Add preview category

Closes https://github.com/ajayyy/SponsorBlock/issues/444
2025-12-08 20:47:11 +03:00 · 2021-03-30 22:50:36 -04:00
parent 3ff5fdb3a1
commit a10d7c338c
5 changed files with 69 additions and 47 deletions
--- a/config.json.example
+++ b/config.json.example
@@ -2,5 +2,5 @@
    "serverAddress": "https://sponsor.ajay.app",
    "testingServerAddress": "https://sponsor.ajay.app/test",
    "serverAddressComment": "This specifies the default SponsorBlock server to connect to",
-    "categoryList": ["sponsor", "intro", "outro", "interaction", "selfpromo", "music_offtopic"]
+    "categoryList": ["sponsor", "selfpromo", "interaction", "intro", "outro", "preview", "music_offtopic"]
 }
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -449,6 +449,9 @@
    "preview": {
        "message": "Preview"
    },
+    "unsubmitted": {
+        "message": "Unsubmitted"
+    },
    "inspect": {
        "message": "Inspect"
    },
@@ -483,6 +486,21 @@
    "category_sponsor_description": {
        "message": "Paid promotion, paid referrals and direct advertisements. Not for self-promotion or free shoutouts to causes/creators/websites/products they like."
    },
+    "category_selfpromo": {
+        "message": "Unpaid/Self Promotion"
+    },
+    "category_selfpromo_description": {
+        "message": "Similar to \"sponsor\" except for unpaid or self promotion. This includes sections about merchandise, donations, or information about who they collaborated with."
+    },
+    "category_interaction": {
+        "message": "Interaction Reminder (Subscribe)"
+    },
+    "category_interaction_description": {
+        "message": "When there is a short reminder to like, subscribe or follow them in the middle of content. If it is long or about something specific, it should be under self promotion instead."
+    },
+    "category_interaction_short": {
+        "message": "Interaction Reminder"
+    },
    "category_intro": {
        "message": "Intermission/Intro Animation"
    },
@@ -498,20 +516,14 @@
    "category_outro_description": {
        "message": "Credits or when the YouTube endcards appear. Not for conclusions with information."
    },
-    "category_interaction": {
-        "message": "Interaction Reminder (Subscribe)"
+    "category_preview": {
+        "message": "Preview/Recap"
    },
-    "category_interaction_description": {
-        "message": "When there is a short reminder to like, subscribe or follow them in the middle of content. If it is long or about something specific, it should be under self promotion instead."
+    "category_preview_description": {
+        "message": "Quick recap of previous episodes, or a preview of what's coming up later in the current video. Meant for edited together clips, not for spoken summaries."
    },
-    "category_interaction_short": {
-        "message": "Interaction Reminder"
-    },
-    "category_selfpromo": {
-        "message": "Unpaid/Self Promotion"
-    },
-    "category_selfpromo_description": {
-        "message": "Similar to \"sponsor\" except for unpaid or self promotion. This includes sections about merchandise, donations, or information about who they collaborated with."
+    "category_preview_short": {
+        "message": "Preview"
    },
    "category_music_offtopic": {
        "message": "Music: Non-Music Section"
@@ -541,7 +553,7 @@
        "message": "Your color is formatted incorrectly. It should be a 3 or 6 digit hex code with a number sign at the beginning."
    },
    "previewColor": {
-        "message": "Preview Color",
+        "message": "Unsubmitted Color",
        "description": "Referring to submissions that have not been sent to the server yet."
    },
    "seekBarColor": {
--- a/src/config.ts
+++ b/src/config.ts
@@ -45,14 +45,16 @@ interface SBConfig {
        "preview-chooseACategory": PreviewBarOption,
        "sponsor": PreviewBarOption,
        "preview-sponsor": PreviewBarOption,
+        "selfpromo": PreviewBarOption,
+        "preview-selfpromo": PreviewBarOption,
+        "interaction": PreviewBarOption,
+        "preview-interaction": PreviewBarOption,
        "intro": PreviewBarOption,
        "preview-intro": PreviewBarOption,
        "outro": PreviewBarOption,
        "preview-outro": PreviewBarOption,
-        "interaction": PreviewBarOption,
-        "preview-interaction": PreviewBarOption,
-        "selfpromo": PreviewBarOption,
-        "preview-selfpromo": PreviewBarOption,
+        "preview": PreviewBarOption,
+        "preview-preview": PreviewBarOption,
        "music_offtopic": PreviewBarOption,
        "preview-music_offtopic": PreviewBarOption,
    }
@@ -189,6 +191,22 @@ const Config: SBObject = {
                color: "#007800",
                opacity: "0.7"
            },
+            "selfpromo": {
+                color: "#ffff00",
+                opacity: "0.7"
+            },
+            "preview-selfpromo": {
+                color: "#bfbf35",
+                opacity: "0.7"
+            },
+            "interaction": {
+                color: "#cc00ff",
+                opacity: "0.7"
+            },
+            "preview-interaction": {
+                color: "#6c0087",
+                opacity: "0.7"
+            },
            "intro": {
                color: "#00ffff",
                opacity: "0.7"
@@ -205,20 +223,12 @@ const Config: SBObject = {
                color: "#000070",
                opacity: "0.7"
            },
-            "interaction": {
-                color: "#cc00ff",
+            "preview": {
+                color: "#ff1684",
                opacity: "0.7"
            },
-            "preview-interaction": {
-                color: "#6c0087",
-                opacity: "0.7"
-            },
-            "selfpromo": {
-                color: "#ffff00",
-                opacity: "0.7"
-            },
-            "preview-selfpromo": {
-                color: "#bfbf35",
+            "preview-preview": {
+                color: "#9b044c",
                opacity: "0.7"
            },
            "music_offtopic": {
--- a/src/content.ts
+++ b/src/content.ts
@@ -816,7 +816,7 @@ function updatePreviewBar(): void {
            previewBarSegments.push({
                segment: segment.segment as [number, number],
                category: segment.category,
-                preview: false,
+                unsubmitted: false,
            });
        });
    }
@@ -825,7 +825,7 @@ function updatePreviewBar(): void {
        previewBarSegments.push({
            segment: segment.segment as [number, number],
            category: segment.category,
-            preview: true,
+            unsubmitted: true,
        });
    });

@@ -873,14 +873,14 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
    const minSponsorTimeIndex = sponsorStartTimes.indexOf(Math.min(...sponsorStartTimesAfterCurrentTime));
    const endTimeIndex = getLatestEndTimeIndex(sponsorTimes, minSponsorTimeIndex);

-    const previewSponsorStartTimes = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments);
-    const previewSponsorStartTimesAfterCurrentTime = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, false, false);
+    const unsubmittedSponsorStartTimes = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments);
+    const unsubmittedSponsorStartTimesAfterCurrentTime = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, false, false);

-    const minPreviewSponsorTimeIndex = previewSponsorStartTimes.indexOf(Math.min(...previewSponsorStartTimesAfterCurrentTime));
-    const previewEndTimeIndex = getLatestEndTimeIndex(sponsorTimesSubmitting, minPreviewSponsorTimeIndex);
+    const minUnsubmittedSponsorTimeIndex = unsubmittedSponsorStartTimes.indexOf(Math.min(...unsubmittedSponsorStartTimesAfterCurrentTime));
+    const previewEndTimeIndex = getLatestEndTimeIndex(sponsorTimesSubmitting, minUnsubmittedSponsorTimeIndex);

-    if ((minPreviewSponsorTimeIndex === -1 && minSponsorTimeIndex !== -1) || 
-            sponsorStartTimes[minSponsorTimeIndex] < previewSponsorStartTimes[minPreviewSponsorTimeIndex]) {
+    if ((minUnsubmittedSponsorTimeIndex === -1 && minSponsorTimeIndex !== -1) || 
+            sponsorStartTimes[minSponsorTimeIndex] < unsubmittedSponsorStartTimes[minUnsubmittedSponsorTimeIndex]) {
        return {
            array: sponsorTimes,
            index: minSponsorTimeIndex,
@@ -890,7 +890,7 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
    } else {
        return {
            array: sponsorTimesSubmitting,
-            index: minPreviewSponsorTimeIndex,
+            index: minUnsubmittedSponsorTimeIndex,
            endIndex: previewEndTimeIndex,
            openNotice: false
        };
@@ -1007,7 +1007,7 @@ function skipToTime(v: HTMLVideoElement, skipTime: number[], skippingSegments: S
    //send telemetry that a this sponsor was skipped
    if (Config.config.trackViewCount && autoSkip) {
        let alreadySkipped = false;
-        let isPreviewSegment = false;
+        let isUnsubmittedSegment = false;

        for (const segment of skippingSegments) {
            const index = sponsorTimes.indexOf(segment);
@@ -1019,11 +1019,11 @@ function skipToTime(v: HTMLVideoElement, skipTime: number[], skippingSegments: S
                alreadySkipped = true;
            }

-            if (index === -1) isPreviewSegment = true;
+            if (index === -1) isUnsubmittedSegment = true;
        }
        
        // Count this as a skip
-        if (!alreadySkipped && !isPreviewSegment) {
+        if (!alreadySkipped && !isUnsubmittedSegment) {
            Config.config.minutesSaved = Config.config.minutesSaved + (skipTime[1] - skipTime[0]) / 60;
            Config.config.skipCount = Config.config.skipCount + 1;
        }
--- a/src/js-components/previewBar.ts
+++ b/src/js-components/previewBar.ts
@@ -14,7 +14,7 @@ const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 export interface PreviewBarSegment {
    segment: [number, number];
    category: string;
-    preview: boolean;
+    unsubmitted: boolean;
 }

 class PreviewBar {
@@ -117,8 +117,8 @@ class PreviewBar {
            } else if (segment !== null) {
                this.tooltipContainer.classList.add(TOOLTIP_VISIBLE_CLASS);

-                if (segment.preview) {
-                    this.categoryTooltip.textContent = chrome.i18n.getMessage("preview") + " " + utils.shortCategoryName(segment.category);
+                if (segment.unsubmitted) {
+                    this.categoryTooltip.textContent = chrome.i18n.getMessage("unsubmitted") + " " + utils.shortCategoryName(segment.category);
                } else {
                    this.categoryTooltip.textContent = utils.shortCategoryName(segment.category);
                }
@@ -185,12 +185,12 @@ class PreviewBar {
        });
    }

-    createBar({category, preview, segment}: PreviewBarSegment): HTMLLIElement {
+    createBar({category, unsubmitted, segment}: PreviewBarSegment): HTMLLIElement {
        const bar = document.createElement('li');
        bar.classList.add('previewbar');
        bar.innerHTML = '&nbsp;';

-        const barSegmentType = (preview ? 'preview-' : '') + category;
+        const barSegmentType = (unsubmitted ? 'preview-' : '') + category;

        bar.setAttribute('data-vs-segment-type', barSegmentType);