Add indicator where current player is for segments in popup

public/popup.css

@@ -219,6 +219,15 @@
 .segmentSummary > div {
   text-align: left;
 }
+
+.segmentActive {
+  color: #bdfffb;
+}
+
+.segmentPassed {
+  color: #adadad;
+}
+
 /*
  * Category dot in segment
  */

src/background.ts

@@ -14,6 +14,8 @@ const utils = new Utils({
     unregisterFirefoxContentScript
 });
 
+const popupPort: Record<string, chrome.runtime.Port> = {};
+
 // Used only on Firefox, which does not support non persistent background pages.
 const contentScriptRegistrations = {};
 
@@ -53,7 +55,7 @@ if (!Config.configSyncListeners.includes(onNavigationApiAvailableChange)) {
         Config.configSyncListeners.push(onNavigationApiAvailableChange);
 }
 
-chrome.runtime.onMessage.addListener(function (request, _, callback) {
+chrome.runtime.onMessage.addListener(function (request, sender, callback) {
     switch(request.message) {
         case "openConfig":
             chrome.tabs.create({url: chrome.runtime.getURL('options/options.html' + (request.hash ? '#' + request.hash : ''))});
@@ -100,6 +102,22 @@ chrome.runtime.onMessage.addListener(function (request, _, callback) {
             });
             return true;
         }
+        case "time":
+            if (sender.tab) {
+                popupPort[sender.tab.id].postMessage(request);
+            }
+            return false;
+	}
+});
+
+chrome.runtime.onConnect.addListener((port) => {
+    if (port.name === "popup") {
+        chrome.tabs.query({
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            popupPort[tabs[0].id] = port;
+        });
     }
 });
 

src/config.ts

@@ -57,7 +57,7 @@ interface SBConfig {
     categoryPillUpdate: boolean,
     darkMode: boolean,
     showCategoryGuidelines: boolean,
-    chaptersActivated: boolean,
+    chaptersAvailable: boolean,
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -175,7 +175,7 @@ const Config: SBObject = {
         categoryPillUpdate: false,
         darkMode: true,
         showCategoryGuidelines: true,
-        chaptersActivated: true,
+        chaptersAvailable: true,
 
         categoryPillColors: {},
 

src/content.ts

@@ -167,6 +167,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             sendResponse({
                 found: sponsorDataFound,
                 sponsorTimes: sponsorTimes,
+                time: video.currentTime,
                 onMobileYouTube
             });
 
@@ -208,6 +209,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             sponsorsLookup(false).then(() => sendResponse({
                 found: sponsorDataFound,
                 sponsorTimes: sponsorTimes,
+                time: video.currentTime,
                 onMobileYouTube
             }));
 
@@ -532,7 +534,7 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
     }
     lastTimeFromWaitingEvent = null;
 
-    previewBar?.updateChapterText(sponsorTimes, sponsorTimesSubmitting, currentTime);
+    updateActiveSegment(currentTime);
 
     if (video.paused) return;
     if (videoMuted && !inMuteSegment(currentTime)) {
@@ -783,7 +785,7 @@ function setupVideoListeners() {
 
                 startSponsorSchedule();
             } else {
-                previewBar?.updateChapterText(sponsorTimes, sponsorTimesSubmitting, video.currentTime);
+                updateActiveSegment(video.currentTime);
             }
         });
         video.addEventListener('ratechange', () => startSponsorSchedule());
@@ -2069,6 +2071,14 @@ function getSegmentsMessage(sponsorTimes: SponsorTime[]): string {
     return sponsorTimesMessage;
 }
 
+function updateActiveSegment(currentTime: number): void {
+    previewBar?.updateChapterText(sponsorTimes, sponsorTimesSubmitting, currentTime);
+    chrome.runtime.sendMessage({
+        message: "time",
+        time: currentTime
+    });
+}
+
 function addPageListeners(): void {
     const refreshListners = () => {
         if (!isVisible(video)) {

src/messageTypes.ts

@@ -74,6 +74,7 @@ export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoF
 export interface IsInfoFoundMessageResponse {
     found: boolean;
     sponsorTimes: SponsorTime[];
+    time: number;
     onMobileYouTube: boolean;
 }
 
@@ -112,3 +113,10 @@ export interface VoteResponse {
 export interface ImportSegmentsResponse {
     importedSegments: SponsorTime[];
 }
+
+export interface TimeUpdateMessage {
+    message: "time";
+    time: number;
+}
+
+export type PopupMessage = TimeUpdateMessage;

src/popup.ts

@@ -2,7 +2,7 @@ import Config from "./config";
 
 import Utils from "./utils";
 import { SponsorTime, SponsorHideType, ActionType, SegmentUUID, SponsorSourceType, StorageChangesObject, CategorySkipOption } from "./types";
-import { Message, MessageResponse, IsInfoFoundMessageResponse, ImportSegmentsResponse } from "./messageTypes";
+import { Message, MessageResponse, IsInfoFoundMessageResponse, ImportSegmentsResponse, PopupMessage } from "./messageTypes";
 import { showDonationLink } from "./utils/configUtils";
 import { AnimationUtils } from "./utils/animationUtils";
 import { GenericUtils } from "./utils/genericUtils";
@@ -81,6 +81,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         Chapters
     }
     let segmentTab = SegmentTab.Segments;
+    let port: chrome.runtime.Port = null;
 
     const PageElements: PageElements = {};
 
@@ -237,6 +238,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         });
     }
 
+    setupComPort();
+
     //show proper disable skipping button
     const disableSkipping = Config.config.disableSkipping;
     if (disableSkipping != undefined && disableSkipping) {
@@ -403,10 +406,13 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             PageElements.whitelistButton.classList.remove("hidden");
             PageElements.loadingIndicator.style.display = "none";
 
+            downloadedTimes = request.sponsorTimes ?? [];
             if (request.found) {
                 PageElements.videoFound.innerHTML = chrome.i18n.getMessage("sponsorFound");
 
-                displayDownloadedSponsorTimes(request);
+                if (request.sponsorTimes) {
+                    displayDownloadedSponsorTimes(request.sponsorTimes, request.time);
+                }
             } else {
                 PageElements.videoFound.innerHTML = chrome.i18n.getMessage("sponsor404");
             }
@@ -477,10 +483,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     }
 
     //display the video times from the array at the top, in a different section
-    function displayDownloadedSponsorTimes(request: { found: boolean, sponsorTimes: SponsorTime[] }) {
-        if (request.sponsorTimes != undefined) {
+    function displayDownloadedSponsorTimes(sponsorTimes: SponsorTime[], time: number) {
         let currentSegmentTab = segmentTab;
-            if (!request.sponsorTimes.some((segment) => segment.actionType === ActionType.Chapter)) {
+        if (!sponsorTimes.some((segment) => segment.actionType === ActionType.Chapter)) {
             PageElements.issueReporterTabs.classList.add("hidden");
             currentSegmentTab = SegmentTab.Segments;
         } else {
@@ -488,7 +493,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         }
 
         // Sort list by start time
-            downloadedTimes = request.sponsorTimes
+        const downloadedTimes = sponsorTimes
             .filter((segment) => {
                 if (currentSegmentTab === SegmentTab.Segments) {
                     return segment.actionType !== ActionType.Chapter;
@@ -525,7 +530,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             const actionType = downloadedTimes[i].actionType;
 
             const segmentSummary = document.createElement("summary");
-                segmentSummary.className = "segmentSummary";
+            segmentSummary.classList.add("segmentSummary");
+            if (time >= downloadedTimes[i].segment[0]) {
+                if (time < downloadedTimes[i].segment[1]) {
+                    segmentSummary.classList.add("segmentActive");
+                } else {
+                    segmentSummary.classList.add("segmentPassed");
+                }
+            }
 
             const categoryColorCircle = document.createElement("span");
             categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID;
@@ -675,7 +687,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             container.appendChild(votingButtons);
         }
     }
-    }
 
     function submitTimes() {
         if (sponsorTimes.length > 0) {
@@ -1076,6 +1087,20 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             }
         }
     }
+
+    function setupComPort(): void {
+        port = chrome.runtime.connect({ name: "popup" });
+        port.onDisconnect.addListener(() => setupComPort());
+        port.onMessage.addListener((msg) => onMessage(msg));
+    }
+
+    function onMessage(msg: PopupMessage) {
+        switch (msg.message) {
+            case "time":
+                displayDownloadedSponsorTimes(downloadedTimes, msg.time);
+                break;
+        }
+    }
 }
 
 runThePopup();