Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into pr/Acors24/2086

2025-12-12 22:47:18 +03:00 · 2024-11-26 02:29:22 -05:00
parent 61f1a8918c 842f7b33b8
commit dbd51d026b
32 changed files with 1834 additions and 2048 deletions
--- a/src/config.ts
+++ b/src/config.ts
@@ -479,4 +479,26 @@ const localDefaults = {
 };

 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);
-export default Config;
+export default Config;
+
+export function generateDebugDetails(): string {
+    // Build output debug information object
+    const output = {
+        debug: {
+            userAgent: navigator.userAgent,
+            platform: navigator.platform,
+            language: navigator.language,
+            extensionVersion: chrome.runtime.getManifest().version
+        },
+        config: JSON.parse(JSON.stringify(Config.cachedSyncConfig)) // Deep clone config object
+    };
+
+    // Sanitise sensitive user config values
+    delete output.config.userID;
+    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress)
+        ? "Default server address" : "Custom server address";
+    output.config.invidiousInstances = output.config.invidiousInstances.length;
+    output.config.whitelistedChannels = output.config.whitelistedChannels.length;
+
+    return JSON.stringify(output, null, 4);
+}
--- a/src/content.ts
+++ b/src/content.ts
@@ -51,6 +51,7 @@ import { asyncRequestToServer } from "./utils/requests";
 import { isMobileControlsOpen } from "./utils/mobileUtils";
 import { defaultPreviewTime } from "./utils/constants";
 import { onVideoPage } from "../maze-utils/src/pageInfo";
+import { getSegmentsForVideo } from "./utils/segmentData";

 cleanPage();

@@ -75,7 +76,6 @@ let sponsorTimes: SponsorTime[] = [];
 let existingChaptersImported = false;
 let importingChaptersWaitingForFocus = false;
 let importingChaptersWaiting = false;
-let triedImportingChapters = false;
 // List of open skip notices
 const skipNotices: SkipNotice[] = [];
 let upcomingNotice: UpcomingNotice | null = null;
@@ -142,6 +142,9 @@ let switchingVideos = null;
 let lastCheckTime = 0;
 let lastCheckVideoTime = -1;

+// To determine if a video resolution change is happening
+let firstPlay = true;
+
 //is this channel whitelised from getting sponsors skipped
 let channelWhitelisted = false;

@@ -267,7 +270,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
            sendResponse({ hasVideo: getVideoID() != null });
            // fetch segments
            if (getVideoID()) {
-                sponsorsLookup(false);
+                sponsorsLookup(false, true);
            }

            break;
@@ -345,6 +348,12 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
                metaKey: request.metaKey
            }));
            break;
+        case "getLogs":
+            sendResponse({
+                debug: window["SBLogs"].debug,
+                warn: window["SBLogs"].warn
+            });
+            break;
    }

    sendResponse({});
@@ -362,7 +371,7 @@ function contentConfigUpdateListener(changes: StorageChangesObject) {
                updateVisibilityOfPlayerControlsButton()
                break;
            case "categorySelections":
-                sponsorsLookup();
+                sponsorsLookup(true, true);
                break;
            case "barTypes":
                setCategoryColorCSSVariables();
@@ -384,10 +393,10 @@ function resetValues() {
    lastCheckVideoTime = -1;
    retryCount = 0;
    previewedSegment = false;
+    firstPlay = true;

    sponsorTimes = [];
    existingChaptersImported = false;
-    triedImportingChapters = false;
    sponsorSkipped = [];
    lastResponseStatus = 0;
    shownSegmentFailedToFetchWarning = false;
@@ -509,12 +518,8 @@ function handleMobileControlsMutations(): void {

 function getPreviewBarAttachElement(): HTMLElement | null {
    const progressElementOptions = [{
-            // For new mobile YouTube (#1287)
-            selector: ".progress-bar-line",
-            isVisibleCheck: true
-        }, {
-            // For newer mobile YouTube (Jan 2024)
-            selector: ".YtProgressBarProgressBarLine",
+            // For newer mobile YouTube (Sept 2024)
+            selector: ".YtProgressBarLineHost, .YtChapteredProgressBarHost",
            isVisibleCheck: true
        }, {
            // For newer mobile YouTube (May 2024)
@@ -646,7 +651,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current

    updateActiveSegment(currentTime);

-    if (getVideo().paused 
+    if ((getVideo().paused && getCurrentTime() !== 0) // Allow autoplay disabled videos to skip before playing
        || (getCurrentTime() >= getVideoDuration() - 0.01 && getVideoDuration() > 1)) return;
    const skipInfo = getNextSkipIndex(currentTime, includeIntersectingSegments, includeNonIntersectingSegments);

@@ -874,6 +879,7 @@ let lastPlaybackSpeed = 1;
 let setupVideoListenersFirstTime = true;
 function setupVideoListeners() {
    const video = getVideo();
+    if (!video) return; // Maybe video became invisible

    //wait until it is loaded
    video.addEventListener('loadstart', videoOnReadyListener)
@@ -891,6 +897,7 @@ function setupVideoListeners() {

        let startedWaiting = false;
        let lastPausedAtZero = true;
+        let lastVideoDataChange = 0;

        const rateChangeListener = () => {
            updateVirtualTime();
@@ -903,13 +910,10 @@ function setupVideoListeners() {
        video.addEventListener('videoSpeed_ratechange', rateChangeListener);

        const playListener = () => {
-            // If it is not the first event, then the only way to get to 0 is if there is a seek event
-            // This check makes sure that changing the video resolution doesn't cause the extension to think it
-            // gone back to the begining
-            if (video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA
-                    && video.currentTime === 0) return;
+            // Prevent video resolution changes from causing skips
+            if (!firstPlay && Date.now() - lastVideoDataChange < 200 && video.currentTime === 0) return;

-                    
+            firstPlay = false;
            updateVirtualTime();
            checkForMiniplayerPlaying();

@@ -1041,6 +1045,24 @@ function setupVideoListeners() {
        };
        video.addEventListener('waiting', waitingListener);

+        // When video data is changed
+        const emptyListener = () => {
+            lastVideoDataChange = Date.now();
+
+            if (firstPlay && video.currentTime === 0) {
+                playListener();
+            }
+        }
+        video.addEventListener('emptied', emptyListener);
+
+        // For when autoplay is off to skip before starting playback
+        const metadataLoadedListener = () => {
+            if (firstPlay && getCurrentTime() === 0) {
+                playListener();
+            }
+        }
+        video.addEventListener('loadedmetadata', metadataLoadedListener)
+
        startSponsorSchedule();

        if (setupVideoListenersFirstTime) {
@@ -1052,6 +1074,8 @@ function setupVideoListeners() {
                video.removeEventListener('videoSpeed_ratechange', rateChangeListener);
                video.removeEventListener('pause', pauseListener);
                video.removeEventListener('waiting', waitingListener);
+                video.removeEventListener('empty', emptyListener);
+                video.removeEventListener('loadedmetadata', metadataLoadedListener);

                if (playbackRateCheckInterval) clearInterval(playbackRateCheckInterval);
            });
@@ -1136,38 +1160,23 @@ function setupCategoryPill() {
    categoryPill.attachToPage(isOnMobileYouTube(), isOnInvidious(), voteAsync);
 }

-async function sponsorsLookup(keepOldSubmissions = true) {
-    const categories: string[] = Config.config.categorySelections.map((category) => category.name);
-
-    const extraRequestData: Record<string, unknown> = {};
-    const hashParams = getHashParams();
-    if (hashParams.requiredSegment) extraRequestData.requiredSegment = hashParams.requiredSegment;
-
-    const videoID = getVideoID()
+async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
+    const videoID = getVideoID();
    if (!videoID) {
        console.error("[SponsorBlock] Attempted to fetch segments with a null/undefined videoID.");
        return;
    }
-    const hashPrefix = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
-    const response = await asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
-        categories,
-        actionTypes: getEnabledActionTypes(),
-        userAgent: `${chrome.runtime.id}`,
-        ...extraRequestData
-    });
+
+    const segmentData = await getSegmentsForVideo(videoID, ignoreCache);
+
+    // Make sure an old pending request doesn't get used.
+    if (videoID !== getVideoID()) return;

    // store last response status
-    lastResponseStatus = response?.status;
+    lastResponseStatus = segmentData.status;
+    if (segmentData.status === 200) {
+        const receivedSegments = segmentData.segments;

-    if (response?.ok) {
-        const receivedSegments: SponsorTime[] = JSON.parse(response.responseText)
-                    ?.filter((video) => video.videoID === getVideoID())
-                    ?.map((video) => video.segments)?.[0]
-                    ?.map((segment) => ({
-                        ...segment,
-                        source: SponsorSourceType.Server
-                    }))
-                    ?.sort((a, b) => a.segment[0] - b.segment[0]);
        if (receivedSegments && receivedSegments.length) {
            sponsorDataFound = true;

@@ -1207,6 +1216,7 @@ async function sponsorsLookup(keepOldSubmissions = true) {
            }

            // See if some segments should be hidden
+            const hashPrefix = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
            const downvotedData = Config.local.downvotedSegments[hashPrefix];
            if (downvotedData) {
                for (const segment of sponsorTimes) {
@@ -1253,7 +1263,7 @@ async function sponsorsLookup(keepOldSubmissions = true) {
 }

 function importExistingChapters(wait: boolean) {
-    if (!existingChaptersImported && !importingChaptersWaiting && !triedImportingChapters && onVideoPage() && !isOnMobileYouTube()) {
+    if (!existingChaptersImported && !importingChaptersWaiting && onVideoPage() && !isOnMobileYouTube()) {
        const waitCondition = () => getVideoDuration() && getExistingChapters(getVideoID(), getVideoDuration());

        if (wait && !document.hasFocus() && !importingChaptersWaitingForFocus && !waitCondition()) {
@@ -1274,23 +1284,11 @@ function importExistingChapters(wait: boolean) {
                        existingChaptersImported = true;
                        updatePreviewBar();
                    }
-                }).catch(() => { importingChaptersWaiting = false; triedImportingChapters = true; }); // eslint-disable-line @typescript-eslint/no-empty-function
+                }).catch(() => { importingChaptersWaiting = false; }); // eslint-disable-line @typescript-eslint/no-empty-function
        }
    }
 }

-function getEnabledActionTypes(forceFullVideo = false): ActionType[] {
-    const actionTypes = [ActionType.Skip, ActionType.Poi, ActionType.Chapter];
-    if (Config.config.muteSegments) {
-        actionTypes.push(ActionType.Mute);
-    }
-    if (Config.config.fullVideoSegments || forceFullVideo) {
-        actionTypes.push(ActionType.Full);
-    }
-
-    return actionTypes;
-}
-
 async function lockedCategoriesLookup(): Promise<void> {
    const hashPrefix = (await getHash(getVideoID(), 1)).slice(0, 4);
    const response = await asyncRequestToServer("GET", "/api/lockCategories/" + hashPrefix);
@@ -1750,7 +1748,7 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u

    if (autoSkip && Config.config.audioNotificationOnSkip
            && !isSubmittingSegment && !getVideo()?.muted) {
-        const beep = new Audio(chrome.runtime.getURL("icons/beep.ogg"));
+        const beep = new Audio(chrome.runtime.getURL("icons/beep.oga"));
        beep.volume = getVideo().volume * 0.1;
        const oldMetadata = navigator.mediaSession.metadata
        beep.play();
@@ -2031,7 +2029,7 @@ function startOrEndTimingNewSegment() {
    Config.forceLocalUpdate("unsubmittedSegments");

    // Make sure they know if someone has already submitted something it while they were watching
-    sponsorsLookup();
+    sponsorsLookup(true, true);

    updateEditButtonsOnPlayer();
    updateSponsorTimesSubmitting(false);
@@ -2568,8 +2566,10 @@ function addHotkeyListener(): void {
 }

 function hotkeyListener(e: KeyboardEvent): void {
-    if (["textarea", "input"].includes(document.activeElement?.tagName?.toLowerCase())
-        || document.activeElement?.id?.toLowerCase()?.includes("editable")) return;
+    if ((["textarea", "input"].includes(document.activeElement?.tagName?.toLowerCase())
+        || (document.activeElement as HTMLElement)?.isContentEditable
+        || document.activeElement?.id?.toLowerCase()?.match(/editable|input/))
+            && document.hasFocus()) return;

    const key: Keybind = {
        key: e.key,
@@ -2616,6 +2616,8 @@ function hotkeyListener(e: KeyboardEvent): void {
        submitSegments();
        return;
    } else if (keybindEquals(key, openSubmissionMenuKey)) {
+        e.preventDefault();
+
        openSubmissionMenu();
        return;
    } else if (keybindEquals(key, previewKey)) {
@@ -2630,16 +2632,6 @@ function hotkeyListener(e: KeyboardEvent): void {
        previousChapter();
        return;
    }
-
-    //legacy - to preserve keybinds for skipKey, startSponsorKey and submitKey for people who set it before the update. (shouldn't be changed for future keybind options)
-    if (key.key == skipKey?.key && skipKey.code == null && !keybindEquals(Config.syncDefaults.skipKeybind, skipKey)) {
-        if (activeSkipKeybindElement)
-            activeSkipKeybindElement.toggleSkip.call(activeSkipKeybindElement);
-    } else if (key.key == startSponsorKey?.key && startSponsorKey.code == null && !keybindEquals(Config.syncDefaults.startSponsorKeybind, startSponsorKey)) {
-        startOrEndTimingNewSegment();
-    } else if (key.key == submitKey?.key && submitKey.code == null && !keybindEquals(Config.syncDefaults.submitKeybind, submitKey)) {
-        openSubmissionMenu();
-    }
 }

 /**
@@ -2687,11 +2679,11 @@ function showTimeWithoutSkips(skippedDuration: number): void {
    }

    // YouTube player time display
-    const displayClass =
-        isOnInvidious()     ? "vjs-duration" :
-        isOnMobileYouTube() ? "ytm-time-display" :
-                              "ytp-time-display.notranslate";
-    const display = document.querySelector(`.${displayClass}`);
+    const selector =
+        isOnInvidious()     ? ".vjs-duration" :
+        isOnMobileYouTube() ? ".YtwPlayerTimeDisplayContent" :
+                              ".ytp-time-display.notranslate .ytp-time-wrapper";
+    const display = document.querySelector(selector);
    if (!display) return;

    const durationID = "sponsorBlockDurationAfterSkips";
@@ -2701,9 +2693,13 @@ function showTimeWithoutSkips(skippedDuration: number): void {
    if (duration === null) {
        duration = document.createElement('span');
        duration.id = durationID;
-        if (!isOnInvidious()) duration.classList.add(displayClass);

-        display.appendChild(duration);
+        if (isOnMobileYouTube()) {
+            duration.style.paddingLeft = "4px";
+            display.insertBefore(duration, display.lastChild);
+        } else {
+            display.appendChild(duration);
+        }
    }

    const durationAfterSkips = getFormattedTime(getVideoDuration() - skippedDuration);
--- a/src/js-components/previewBar.ts
+++ b/src/js-components/previewBar.ts
@@ -197,7 +197,6 @@ class PreviewBar {

        if (this.onMobileYouTube) {
            this.container.style.transform = "none";
-            this.container.style.height = "var(--yt-progress-bar-height)";
        } else if (!this.onInvidious) {
            this.container.classList.add("sbNotInvidious");
        }
@@ -648,8 +647,21 @@ class PreviewBar {
                        if (changedData.scale !== null) {
                            const transformScale = (changedData.scale) / progressBar.clientWidth;

+                            const scale = Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft));
                            customChangedElement.style.transform =
-                                `scaleX(${Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft))}`;
+                                `scaleX(${scale})`;
+                            if (customChangedElement.style.backgroundSize) {
+                                const backgroundSize = Math.max(changedData.scale / scale, fullSectionWidth * progressBar.clientWidth);
+                                customChangedElement.style.backgroundSize = `${backgroundSize}px`;
+
+                                if (changedData.scale < (cursor + fullSectionWidth) * progressBar.clientWidth) {
+                                    customChangedElement.style.backgroundPosition = `-${backgroundSize - fullSectionWidth * progressBar.clientWidth}px`;
+                                } else {
+                                    // Passed this section
+                                    customChangedElement.style.backgroundPosition = `-${cursor * progressBar.clientWidth}px`;
+                                }
+                            }
+
                            if (firstUpdate) {
                                customChangedElement.style.transition = "none";
                                setTimeout(() => customChangedElement.style.removeProperty("transition"), 50);
--- a/src/messageTypes.ts
+++ b/src/messageTypes.ts
@@ -17,7 +17,8 @@ interface DefaultMessage {
        | "isChannelWhitelisted"
        | "submitTimes"
        | "refreshSegments"
-        | "closePopup";
+        | "closePopup"
+        | "getLogs";
 }

 interface BoolValueMessage {
@@ -104,7 +105,8 @@ export type MessageResponse =
    | Record<string, never> // empty object response {}
    | VoteResponse
    | ImportSegmentsResponse
-    | RefreshSegmentsResponse;
+    | RefreshSegmentsResponse
+    | LogResponse;

 export interface VoteResponse {
    successType: number;
@@ -120,6 +122,11 @@ export interface RefreshSegmentsResponse {
    hasVideo: boolean;
 }

+export interface LogResponse {
+    debug: string[];
+    warn: string[];
+}
+
 export interface TimeUpdateMessage {
    message: "time";
    time: number;
--- a/src/options.ts
+++ b/src/options.ts
@@ -1,8 +1,7 @@
 import * as React from "react";
 import { createRoot } from 'react-dom/client';

-import Config from "./config";
-import * as CompileConfig from "../config.json";
+import Config, { generateDebugDetails } from "./config";
 import * as invidiousList from "../ci/invidiouslist.json";

 // Make the config public for debugging purposes
@@ -698,32 +697,14 @@ function validateServerAddress(input: string): string {
 }

 function copyDebugOutputToClipboard() {
-    // Build output debug information object
-    const output = {
-        debug: {
-            userAgent: navigator.userAgent,
-            platform: navigator.platform,
-            language: navigator.language,
-            extensionVersion: chrome.runtime.getManifest().version
-        },
-        config: JSON.parse(JSON.stringify(Config.cachedSyncConfig)) // Deep clone config object
-    };
-
-    // Sanitise sensitive user config values
-    delete output.config.userID;
-    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress)
-        ? "Default server address" : "Custom server address";
-    output.config.invidiousInstances = output.config.invidiousInstances.length;
-    output.config.whitelistedChannels = output.config.whitelistedChannels.length;
-
    // Copy object to clipboard
-    navigator.clipboard.writeText(JSON.stringify(output, null, 4))
-      .then(() => {
+    navigator.clipboard.writeText(generateDebugDetails())
+    .then(() => {
        alert(chrome.i18n.getMessage("copyDebugInformationComplete"));
-      })
-      .catch(() => {
+    })
+    .catch(() => {
        alert(chrome.i18n.getMessage("copyDebugInformationFailed"));
-      });
+    });
 }

 function isIncognitoAllowed(): Promise<boolean> {
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -1,4 +1,4 @@
-import Config from "./config";
+import Config, { generateDebugDetails } from "./config";

 import Utils from "./utils";
 import {
@@ -12,6 +12,7 @@ import {
    GetChannelIDResponse,
    IsChannelWhitelistedResponse,
    IsInfoFoundMessageResponse,
+    LogResponse,
    Message,
    MessageResponse,
    PopupMessage,
@@ -184,7 +185,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
        "exportSegmentsButton",
        "importSegmentsMenu",
        "importSegmentsText",
-        "importSegmentsSubmit"
+        "importSegmentsSubmit",
+        "debugLogs"

    ].forEach(id => PageElements[id] = document.getElementById(id));

@@ -255,6 +257,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
    PageElements.helpButton.addEventListener("click", openHelp);
    PageElements.refreshSegmentsButton.addEventListener("click", refreshSegments);
    PageElements.sbPopupIconCopyUserID.addEventListener("click", async () => copyToClipboard(await getHash(Config.config.userID)));
+    PageElements.debugLogs.addEventListener("click", copyDebgLogs);

    // Forward click events
    if (window !== window.top) {
@@ -1143,6 +1146,12 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
        }
    }

+    function copyDebgLogs() {
+        sendTabMessage({ message: "getLogs" }, (logs: LogResponse) => {
+            copyToClipboard(`${generateDebugDetails()}\n\nWarn:\n${logs.warn.join("\n")}\n\nDebug:\n${logs.debug.join("\n")}`);
+        });
+    }
+
    function onMessage(msg: PopupMessage) {
        switch (msg.message) {
            case "time":
--- a/src/types.ts
+++ b/src/types.ts
@@ -56,7 +56,13 @@ export enum ActionType {
    Poi = "poi"
 }

-export const ActionTypes = [ActionType.Skip, ActionType.Mute];
+export const ActionTypes = [
+    ActionType.Skip,
+    ActionType.Mute,
+    ActionType.Chapter,
+    ActionType.Full,
+    ActionType.Poi
+];

 export type SegmentUUID = string  & { __segmentUUIDBrand: unknown };
 export type Category = string & { __categoryBrand: unknown };
--- a/src/utils/pageUtils.ts
+++ b/src/utils/pageUtils.ts
@@ -55,7 +55,7 @@ export function getHashParams(): Record<string, unknown> {

 export function getExistingChapters(currentVideoID: VideoID, duration: number): SponsorTime[] {
    const chaptersBox = document.querySelector("ytd-macro-markers-list-renderer");
-    const title = document.querySelector("[target-id=engagement-panel-macro-markers-auto-chapters] #title-text");
+    const title = chaptersBox?.closest("ytd-engagement-panel-section-list-renderer")?.querySelector("#title-text.ytd-engagement-panel-title-header-renderer");
    if (title?.textContent?.includes("Key moment")) return [];

    const chapters: SponsorTime[] = [];
--- a/src/utils/requests.ts
+++ b/src/utils/requests.ts
@@ -9,8 +9,8 @@ import { FetchResponse, sendRequestToCustomServer } from "../../maze-utils/src/b
 * @param address The address to add to the SponsorBlock server address
 * @param callback 
 */    
-export function asyncRequestToCustomServer(type: string, url: string, data = {}): Promise<FetchResponse> {
-    return sendRequestToCustomServer(type, url, data);
+export function asyncRequestToCustomServer(type: string, url: string, data = {}, headers = {}): Promise<FetchResponse> {
+    return sendRequestToCustomServer(type, url, data, headers);
 }

 /**
@@ -20,10 +20,10 @@ export function asyncRequestToCustomServer(type: string, url: string, data = {})
 * @param address The address to add to the SponsorBlock server address
 * @param callback 
 */    
-export async function asyncRequestToServer(type: string, address: string, data = {}): Promise<FetchResponse> {
+export async function asyncRequestToServer(type: string, address: string, data = {}, headers = {}): Promise<FetchResponse> {
    const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;

-    return await (asyncRequestToCustomServer(type, serverAddress + address, data));
+    return await (asyncRequestToCustomServer(type, serverAddress + address, data, headers));
 }

 /**
--- a/src/utils/segmentData.ts
+++ b/src/utils/segmentData.ts
@@ -0,0 +1,104 @@
+import { DataCache } from "../../maze-utils/src/cache";
+import { getHash, HashedValue } from "../../maze-utils/src/hash";
+import Config from "../config";
+import * as CompileConfig from "../../config.json";
+import { ActionType, ActionTypes, SponsorSourceType, SponsorTime, VideoID } from "../types";
+import { getHashParams } from "./pageUtils";
+import { asyncRequestToServer } from "./requests";
+
+const segmentDataCache = new DataCache<VideoID, SegmentResponse>(() => {
+    return {
+        segments: null,
+        status: 200
+    };
+}, 5);
+
+const pendingList: Record<VideoID, Promise<SegmentResponse>> = {};
+
+export interface SegmentResponse {
+    segments: SponsorTime[] | null;
+    status: number;
+}
+
+export async function getSegmentsForVideo(videoID: VideoID, ignoreCache: boolean): Promise<SegmentResponse> {
+    if (!ignoreCache) {
+        const cachedData = segmentDataCache.getFromCache(videoID);
+        if (cachedData) {
+            segmentDataCache.cacheUsed(videoID);
+            return cachedData;
+        }
+    }
+
+    if (pendingList[videoID]) {
+        return await pendingList[videoID];
+    }
+
+    const pendingData = fetchSegmentsForVideo(videoID);
+    pendingList[videoID] = pendingData;
+
+    const result = await pendingData;
+    delete pendingList[videoID];
+
+    return result;
+}
+
+async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse> {
+    const categories: string[] = Config.config.categorySelections.map((category) => category.name);
+
+    const extraRequestData: Record<string, unknown> = {};
+    const hashParams = getHashParams();
+    if (hashParams.requiredSegment) extraRequestData.requiredSegment = hashParams.requiredSegment;
+    
+    const hashPrefix = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
+    const response = await asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
+        categories: CompileConfig.categoryList,
+        actionTypes: ActionTypes,
+        ...extraRequestData
+    }, {
+        "X-CLIENT-NAME": `${chrome.runtime.id}/v${chrome.runtime.getManifest().version}`
+    });
+
+    if (response.ok) {
+        const enabledActionTypes = getEnabledActionTypes();
+
+        const receivedSegments: SponsorTime[] = JSON.parse(response.responseText)
+                    ?.filter((video) => video.videoID === videoID)
+                    ?.map((video) => video.segments)?.[0]
+                    ?.filter((segment) => enabledActionTypes.includes(segment.actionType) && categories.includes(segment.category))
+                    ?.map((segment) => ({
+                        ...segment,
+                        source: SponsorSourceType.Server
+                    }))
+                    ?.sort((a, b) => a.segment[0] - b.segment[0]);
+
+        if (receivedSegments && receivedSegments.length) {
+            const result = {
+                segments: receivedSegments,
+                status: response.status
+            };
+
+            segmentDataCache.setupCache(videoID).segments = result.segments;
+            return result;
+        } else {
+            // Setup with null data
+            segmentDataCache.setupCache(videoID);
+        }
+    }
+
+    return {
+        segments: null,
+        status: response.status
+    };
+}
+
+function getEnabledActionTypes(forceFullVideo = false): ActionType[] {
+    const actionTypes = [ActionType.Skip, ActionType.Poi, ActionType.Chapter];
+    if (Config.config.muteSegments) {
+        actionTypes.push(ActionType.Mute);
+    }
+    if (Config.config.fullVideoSegments || forceFullVideo) {
+        actionTypes.push(ActionType.Full);
+    }
+
+    return actionTypes;
+}
--- a/src/utils/thumbnails.ts
+++ b/src/utils/thumbnails.ts
@@ -1,10 +1,15 @@
 import { isOnInvidious, parseYouTubeVideoIDFromURL } from "../../maze-utils/src/video";
 import Config from "../config";
 import { getVideoLabel } from "./videoLabels";
-import { setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
+import { getThumbnailSelector, setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
+import { VideoID } from "../types";
+import { getSegmentsForVideo } from "./segmentData";

-export async function labelThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
-    await Promise.all(thumbnails.map((t) => labelThumbnail(t)));
+export async function handleThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
+    await Promise.all(thumbnails.map((t) => {
+        labelThumbnail(t);
+        setupThumbnailHover(t);
+    }));
 }

 export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLElement | null> {
@@ -13,9 +18,7 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
        return null;
    }
    
-    const link = (isOnInvidious() ? thumbnail.parentElement : thumbnail.querySelector("#thumbnail")) as HTMLAnchorElement
-    if (!link || link.nodeName !== "A" || !link.href) return null; // no link found
-    const videoID = parseYouTubeVideoIDFromURL(link.href)?.videoID;
+    const videoID = extractVideoID(thumbnail);
    if (!videoID) {
        hideThumbnailLabel(thumbnail);
        return null;
@@ -37,6 +40,47 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
    return overlay;
 }

+export async function setupThumbnailHover(thumbnail: HTMLImageElement): Promise<void> {
+    // Cache would be reset every load due to no SPA
+    if (isOnInvidious()) return;
+
+    const mainElement = thumbnail.closest("#dismissible") as HTMLElement;
+    if (mainElement) {
+        mainElement.removeEventListener("mouseenter", thumbnailHoverListener);
+        mainElement.addEventListener("mouseenter", thumbnailHoverListener);
+    }
+}
+
+function thumbnailHoverListener(e: MouseEvent) {
+    if (!chrome.runtime?.id) return;
+
+    const thumbnail = (e.target as HTMLElement).querySelector(getThumbnailSelector()) as HTMLImageElement;
+    if (!thumbnail) return;
+
+    // Pre-fetch data for this video
+    const videoID = extractVideoID(thumbnail);
+    if (videoID) {
+        void getSegmentsForVideo(videoID, false);
+    }
+}
+
+function getLink(thumbnail: HTMLImageElement): HTMLAnchorElement | null {
+    if (isOnInvidious()) {
+        return thumbnail.parentElement as HTMLAnchorElement | null;
+    } else if (thumbnail.nodeName.toLowerCase() === "yt-thumbnail-view-model") {
+        return thumbnail.closest("yt-lockup-view-model")?.querySelector("a.yt-lockup-metadata-view-model-wiz__title");
+    } else {
+        return thumbnail.querySelector("#thumbnail");
+    }
+}
+
+function extractVideoID(thumbnail: HTMLImageElement): VideoID | null {
+    const link = getLink(thumbnail);
+    if (!link || link.nodeName !== "A" || !link.href) return null; // no link found
+
+    return parseYouTubeVideoIDFromURL(link.href)?.videoID;
+}
+
 function getOldThumbnailLabel(thumbnail: HTMLImageElement): HTMLElement | null {
    return thumbnail.querySelector(".sponsorThumbnailLabel") as HTMLElement | null;
 }   
@@ -109,7 +153,7 @@ function insertSBIconDefinition() {
 }

 export function setupThumbnailListener(): void {
-    setThumbnailListener(labelThumbnails, () => {
+    setThumbnailListener(handleThumbnails, () => {
        insertSBIconDefinition();
    }, () => Config.isReady());
 }