Updated extension popup

extension/carbon-for-f1tv.user.js

@@ -2,7 +2,7 @@
 // @name           Carbon for F1TV
 // @namespace      https://Carbon-for-F1TV.github.io/Carbon-for-F1TV/
 // @match          https://f1tv.formula1.com/*
-// @version        1.0.5
+// @version        1.0.5.3
 // @author         Carbon-for-F1TV
 // @description    Enhance your F1TV experience
 // @require        https://code.jquery.com/jquery-3.7.1.min.js

extension/popup.html

@@ -50,7 +50,7 @@
         .carbon-video {
             display: block;
             background-color: #00000085;
-            border-radius: 10px;
+            border-radius: 6px;
             overflow: hidden;
             margin: 8px 4px;
             cursor: pointer;
@@ -61,6 +61,17 @@
             transition: all .4s;
         }
 
+        .carbon-video.featured-live {
+            border: 2px solid #a30000;
+            background-color: #4f000085;
+        }
+
+        .carbon-video.featured-live:hover {
+            background-color: #cf00004c;
+            transition: all .4s;
+        }
+
+
         .carbon-video:hover .video-img {
             background-size: 107%;
             background-position: center center;
@@ -77,7 +88,7 @@
             background-position: center center;
             width: 167px;
             height: 83.5px;
-            border-radius: 10px;
+            border-radius: 6px;
             background-repeat: no-repeat;
             background-size: 100%;
             display: block;
@@ -104,6 +115,23 @@
             padding: 4px 8px;
         }
 
+        .video-content .video-title-header {
+            margin-left: 8px;
+            margin-right: 4px;
+        }
+
+        .video-content .video-title-header-f1 {
+            color: #ff4242;
+        }
+
+        .video-content .video-title-header-f2 {
+            color: #42b8ff;
+        }
+
+        .video-content .video-title-header-f3 {
+            color: #6d8987;
+        }
+        
         #featured-list-switchers {
             text-align: center;
         }
@@ -151,7 +179,7 @@
             font-size: 14px;
             position: absolute;
             padding: 2px 6px;
-            border-radius: 0 0 10px 0;
+            border-radius: 0 0 6px 0;
         }
 
         .video-subtype-live {
@@ -166,6 +194,7 @@
 
         .video-subtype-upcoming {
             background-color: #286395;
+            display: none;
         }
 
         a:link {
@@ -194,7 +223,7 @@
 
         ::-webkit-scrollbar-thumb {
             background: rgb(118, 15, 15);
-            border-radius: 10px;
+            border-radius: 6px;
         }
     </style>
 </head>

extension/popup.js

@@ -53,7 +53,8 @@ var f1tvFeatured = $.getJSON(f1tvDomain + f1tvFeaturedUrl, function (data) {
         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);
+                let title = containers[i].meeting.metadata.shortDescription;
+                listFeatured(containers[i].retrieveItems.resultObj.containers, title);
                 break;
             }
         }
@@ -62,6 +63,19 @@ var f1tvFeatured = $.getJSON(f1tvDomain + f1tvFeaturedUrl, function (data) {
     $("#featured-list").text("Error: Can't load featured list from F1TV");
 });
 
+
+function timesCompare(a, b) {
+    let timeA = parseInt(a.metadata.emfAttributes.sessionStartDate);
+    let timeB = parseInt(b.metadata.emfAttributes.sessionStartDate);
+    let c = 0;
+    if (timeA > timeB) {
+        c = 1;
+    } else if (timeA < timeB) {
+        c = -1;
+    }
+    return c;
+}
+
 function listFeatured(data, title) {
     console.log(title);
     console.log(data);
@@ -74,6 +88,9 @@ function listFeatured(data, title) {
         let eventName = data[i].eventShortName || data[i].eventName;
         let events = data[i].events;
 
+        let sortedEvents = events.sort(timesCompare);
+
+        console.log(sortedEvents);
         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() {
@@ -81,25 +98,31 @@ function listFeatured(data, title) {
             $(".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") {
+            if ((subtype == "LIVE_EVENT") || (subtype == "SHOW")) {
                 subtype = "UPCOMING";
             }
+            let title = events[i]["metadata"]["titleBrief"] || events[i]["metadata"]["title"];
+            let titleHeader = events[i]["metadata"]["uiSeries"];
+            if (/^[A-Za-z0-9]*$/.test(titleHeader) == false) {
+                titleHeader = "";
+            }
             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-header video-title-header-" + titleHeader.toLowerCase() + "'></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-header").text(titleHeader);
             $("#featured-" + dataI + "-" + i + " .video-title").text(title);
             let duration = events[i]["metadata"]["uiDuration"];
             let durationH = parseInt(duration.split(":")[0]);