mirror of
https://github.com/Carbon-for-F1TV/Carbon-for-F1TV.git
synced 2026-11-11 01:10:09 +01:00
Updates to extension popup
This commit is contained in:
najdek committed
1 parent
4e7568ab9d
commit
c22044882b
3 files changed
+202
-19
No files matched your search
@@ -21,6 +21,8 @@ VERSION=`grep "// @version" carbon-for-f1tv.user.js | rev | cut -d ' ' -f 1 | re
|
||||
echo $VERSION
|
||||
sed -i "s/0.1000.1000/$VERSION/" manifest.json
|
||||
sed -i "s/0.1000.1000/$VERSION/" manifest_firefox.json
|
||||
sed -i "s/0.1000.1000/$VERSION/" popup.html
|
||||
|
||||
|
||||
mv manifest_firefox.json ../
|
||||
|
||||
|
||||
+98
-8
@@ -12,28 +12,37 @@
|
||||
width: 385px;
|
||||
height: 580px;
|
||||
margin: 0;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.carbon-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #3d0000;
|
||||
background-color: #180000;
|
||||
padding: 6px 0px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.carbon-header .logo {
|
||||
background-image: url("icon/icon.svg");
|
||||
background-repeat: no-repeat;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.carbon-header .title {
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.carbon-header .version {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -41,7 +50,7 @@
|
||||
.carbon-video {
|
||||
display: block;
|
||||
background-color: #00000085;
|
||||
border-radius: 18px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin: 8px 4px;
|
||||
cursor: pointer;
|
||||
@@ -49,6 +58,13 @@
|
||||
|
||||
.carbon-video:hover {
|
||||
background-color: #0000004c;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.carbon-video:hover .video-img {
|
||||
background-size: 107%;
|
||||
background-position: center center;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.carbon-video .video-content {
|
||||
@@ -58,10 +74,12 @@
|
||||
}
|
||||
|
||||
.video-content .video-img {
|
||||
background-position: center center;
|
||||
width: 167px;
|
||||
height: 83.5px;
|
||||
border-radius: 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-size: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
@@ -80,11 +98,76 @@
|
||||
word-break: break-word;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #eee;
|
||||
width: 190px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
#featured-list-switchers {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.featured-switcher {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
background-color: #666;
|
||||
margin: 2px 4px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.featured-switcher.enabled {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
|
||||
#featured-list-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#video-list-title {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.featured-upcoming .video-duration {
|
||||
background-color: #000000cc !important;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 8px 0px !important;
|
||||
}
|
||||
|
||||
.featured-live .video-duration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-subtype {
|
||||
background-color: #000;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
padding: 2px 6px;
|
||||
border-radius: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.video-subtype-live {
|
||||
background-color: #cc0000;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.video-subtype-replay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-subtype-upcoming {
|
||||
background-color: #286395;
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -102,7 +185,7 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@@ -120,9 +203,16 @@
|
||||
<div class="carbon-header">
|
||||
<div class="logo"></div>
|
||||
<div class="title">Carbon for F1TV</div>
|
||||
<div class="version">v0.1000.1000</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="video-list"></div>
|
||||
<div id="featured-list">
|
||||
<div id="featured-list-title"></div>
|
||||
<div id="featured-list-switchers"></div>
|
||||
</div>
|
||||
<div id="video-list">
|
||||
<div id="video-list-title">VIDEOS</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
|
||||
+102
-11
@@ -1,23 +1,25 @@
|
||||
var f1tvDomain = "https://f1tv.formula1.com/";
|
||||
var f1tvVideosUrl = "2.0/R/ENG/WEB_DASH/ALL/PAGE/SEARCH/VOD/F1_TV_Pro_Annual/2?orderBy=contractStartDate&sortOrder=desc&filter_orderByDefault=Y&maxResults=18";
|
||||
var f1tvVideosUrl = "2.0/R/ENG/WEB_DASH/ALL/PAGE/SEARCH/VOD/F1_TV_Pro_Annual/2?orderBy=contractStartDate&sortOrder=desc&filter_orderByDefault=Y&maxResults=12";
|
||||
|
||||
var f1tvFeaturedUrl = "2.0/R/ENG/WEB_DASH/ALL/PAGE/395/F1_TV_Pro_Annual/2";
|
||||
|
||||
var f1tvVideoImageUrl = [f1tvDomain + "image-resizer/image/",
|
||||
"?w=296&h=167&q=HI&o=L"];
|
||||
|
||||
var f1tvVideos = $.getJSON(f1tvDomain + f1tvVideosUrl, function (data) {
|
||||
if (data.resultCode == "OK") {
|
||||
listVideos(data.resultObj.containers);
|
||||
}
|
||||
}).fail(function() {
|
||||
$("#video-list").text("Error: Can't load video list from F1TV");
|
||||
});
|
||||
|
||||
|
||||
var f1tvVideos = $.getJSON(f1tvDomain + f1tvVideosUrl, function (data) {
|
||||
if (data.resultCode == "OK") {
|
||||
listVideos(data.resultObj.containers);
|
||||
}
|
||||
}).fail(function () {
|
||||
$("#video-list").text("Error: Can't load video list from F1TV");
|
||||
});
|
||||
|
||||
function listVideos(data) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let videoHtml = "<div class='carbon-video' id='vid-" + i + "'>" +
|
||||
"<div class='video-content'>" +
|
||||
"<div class='video-img' id='video-img-" + i + "'><div class='video-duration'></div></div>" +
|
||||
"<div class='video-img'><div class='video-duration'></div></div>" +
|
||||
"<div class='video-title'></div>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
@@ -39,8 +41,97 @@ function listVideos(data) {
|
||||
}
|
||||
$("#vid-" + i + " .video-duration").text(duration);
|
||||
$("#vid-" + i)[0].addEventListener("click", function () {
|
||||
window.open(f1tvDomain + "detail/" + data[i]["metadata"]["contentId"] + "/a");
|
||||
window.open(f1tvDomain + "detail/" + data[i]["metadata"]["contentId"] + "/0?action=play");
|
||||
window.close();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var f1tvFeatured = $.getJSON(f1tvDomain + f1tvFeaturedUrl, function (data) {
|
||||
if (data.resultCode == "OK") {
|
||||
let containers = data.resultObj.containers;
|
||||
for (let i = 0; i < containers.length; i++) {
|
||||
if (containers[i].layout == "interactive_schedule") {
|
||||
listFeatured(containers[i].retrieveItems.resultObj.containers, containers[i].title);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}).fail(function () {
|
||||
$("#featured-list").text("Error: Can't load featured list from F1TV");
|
||||
});
|
||||
|
||||
function listFeatured(data, title) {
|
||||
console.log(title);
|
||||
console.log(data);
|
||||
|
||||
$("#featured-list-title").text(title);
|
||||
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let dataI = i;
|
||||
let eventName = data[i].eventShortName || data[i].eventName;
|
||||
let events = data[i].events;
|
||||
|
||||
let eventBtnHtml = "<div id='featured-switcher-" + dataI + "' class='featured-switcher'>" + eventName + "</div>";
|
||||
$("#featured-list-switchers")[0].insertAdjacentHTML("beforeend", eventBtnHtml);
|
||||
$("#featured-switcher-" + dataI)[0].addEventListener("click", function() {
|
||||
$(".carbon-video.featured").hide();
|
||||
$(".carbon-video.featured-" + dataI).show();
|
||||
$(".featured-switcher").removeClass("enabled");
|
||||
$("#featured-switcher-" + dataI).addClass("enabled");
|
||||
})
|
||||
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
let subtype = events[i]["metadata"]["contentSubtype"];
|
||||
if (subtype == "LIVE_EVENT") {
|
||||
subtype = "UPCOMING";
|
||||
}
|
||||
let videoHtml = "<div class='carbon-video featured featured-" + subtype.toLowerCase() + " featured-" + dataI + "' id='featured-" + dataI + "-" + i + "'>" +
|
||||
"<div class='video-content'>" +
|
||||
"<div class='video-img'>" +
|
||||
"<div class='video-subtype video-subtype-" + subtype.toLowerCase() + "'>" + subtype + "</div>" +
|
||||
"<div class='video-duration'></div>" +
|
||||
"</div>" +
|
||||
"<div class='video-title'></div>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
$("#featured-list")[0].insertAdjacentHTML("beforeend", videoHtml);
|
||||
$("#featured-" + dataI + "-" + i + " .video-img").css("background-image", "url(" + f1tvVideoImageUrl[0] + events[i]["metadata"]["pictureUrl"] + f1tvVideoImageUrl[1] + ")");
|
||||
let title = events[i]["metadata"]["titleBrief"] || events[i]["metadata"]["title"];
|
||||
$("#featured-" + dataI + "-" + i + " .video-title").text(title);
|
||||
let duration = events[i]["metadata"]["uiDuration"];
|
||||
let durationH = parseInt(duration.split(":")[0]);
|
||||
let durationM;
|
||||
let durationS;
|
||||
if (durationH > 0) {
|
||||
durationM = duration.split(":")[1];
|
||||
durationS = duration.split(":")[2];
|
||||
duration = durationH + ":" + durationM + ":" + durationS;
|
||||
} else {
|
||||
durationM = parseInt(duration.split(":")[1]);
|
||||
durationS = duration.split(":")[2];
|
||||
duration = durationM + ":" + durationS;
|
||||
}
|
||||
if (subtype == "UPCOMING") {
|
||||
let sessionStartDate = parseInt(events[i]["metadata"]["emfAttributes"]["sessionStartDate"]);
|
||||
sessionStartDate = new Date(sessionStartDate);
|
||||
console.log(sessionStartDate);
|
||||
|
||||
sessionStartDate = sessionStartDate.toISOString().split('T')[0] + " " + sessionStartDate.toTimeString().split(' ')[0].slice(0, -3);
|
||||
$("#featured-" + dataI + "-" + i + " .video-duration").text(sessionStartDate);
|
||||
} else {
|
||||
$("#featured-" + dataI + "-" + i + " .video-duration").text(duration);
|
||||
$("#featured-" + dataI + "-" + i)[0].addEventListener("click", function () {
|
||||
window.open(f1tvDomain + "detail/" + events[i]["metadata"]["contentId"] + "/0?action=play");
|
||||
window.close();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
$("#featured-switcher-0").click();
|
||||
if ($(".featured-switcher").length < 3) {
|
||||
$("#featured-list-switchers").hide();
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user