Add preview category

Closes https://github.com/ajayyy/SponsorBlock/issues/444

(cherry picked from commit a10d7c338c)

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"]
 }

public/_locales/en/messages.json

@@ -446,6 +446,9 @@
     "preview": {
         "message": "Preview"
     },
+    "unsubmitted": {
+        "message": "Unsubmitted"
+    },
     "inspect": {
         "message": "Inspect"
     },
@@ -480,6 +483,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"
     },
@@ -495,20 +513,14 @@
     "category_outro_description": {
         "message": "Credits or when the YouTube endcards appear. Not for conclusions with information."
     },
-    "category_interaction": {
+    "category_preview": {
-        "message": "Interaction Reminder (Subscribe)"
+        "message": "Preview/Recap"
     },
-    "category_interaction_description": {
+    "category_preview_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."
+        "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": {
+    "category_preview_short": {
-        "message": "Interaction Reminder"
+        "message": "Preview"
-    },
-    "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_music_offtopic": {
         "message": "Music: Non-Music Section"
@@ -538,7 +550,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": {

src/config.ts

@@ -47,14 +47,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": PreviewBarOption,
-        "preview-interaction": PreviewBarOption,
+        "preview-preview": PreviewBarOption,
-        "selfpromo": PreviewBarOption,
-        "preview-selfpromo": PreviewBarOption,
         "music_offtopic": PreviewBarOption,
         "preview-music_offtopic": PreviewBarOption,
     }
@@ -192,6 +194,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"
@@ -208,20 +226,12 @@ const Config: SBObject = {
                 color: "#000070",
                 opacity: "0.7"
             },
-            "interaction": {
+            "preview": {
-                color: "#cc00ff",
+                color: "#0b9d65",
                 opacity: "0.7"
             },
-            "preview-interaction": {
+            "preview-preview": {
-                color: "#6c0087",
+                color: "#065b3a",
-                opacity: "0.7"
-            },
-            "selfpromo": {
-                color: "#ffff00",
-                opacity: "0.7"
-            },
-            "preview-selfpromo": {
-                color: "#bfbf35",
                 opacity: "0.7"
             },
             "music_offtopic": {

src/content.ts

@@ -805,7 +805,7 @@ function updatePreviewBar(): void {
             previewBarSegments.push({
                 segment: segment.segment as [number, number],
                 category: segment.category,
-                preview: false,
+                unsubmitted: false,
             });
         });
     }
@@ -814,7 +814,7 @@ function updatePreviewBar(): void {
         previewBarSegments.push({
             segment: segment.segment as [number, number],
             category: segment.category,
-            preview: true,
+            unsubmitted: true,
         });
     });
 
@@ -876,14 +876,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 unsubmittedSponsorStartTimes = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments);
-    const previewSponsorStartTimesAfterCurrentTime = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, false, false);
+    const unsubmittedSponsorStartTimesAfterCurrentTime = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, false, false);
 
-    const minPreviewSponsorTimeIndex = previewSponsorStartTimes.indexOf(Math.min(...previewSponsorStartTimesAfterCurrentTime));
+    const minUnsubmittedSponsorTimeIndex = unsubmittedSponsorStartTimes.indexOf(Math.min(...unsubmittedSponsorStartTimesAfterCurrentTime));
-    const previewEndTimeIndex = getLatestEndTimeIndex(sponsorTimesSubmitting, minPreviewSponsorTimeIndex);
+    const previewEndTimeIndex = getLatestEndTimeIndex(sponsorTimesSubmitting, minUnsubmittedSponsorTimeIndex);
 
-    if ((minPreviewSponsorTimeIndex === -1 && minSponsorTimeIndex !== -1) || 
+    if ((minUnsubmittedSponsorTimeIndex === -1 && minSponsorTimeIndex !== -1) || 
-            sponsorStartTimes[minSponsorTimeIndex] < previewSponsorStartTimes[minPreviewSponsorTimeIndex]) {
+            sponsorStartTimes[minSponsorTimeIndex] < unsubmittedSponsorStartTimes[minUnsubmittedSponsorTimeIndex]) {
         return {
             array: sponsorTimes,
             index: minSponsorTimeIndex,
@@ -893,7 +893,7 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
     } else {
         return {
             array: sponsorTimesSubmitting,
-            index: minPreviewSponsorTimeIndex,
+            index: minUnsubmittedSponsorTimeIndex,
             endIndex: previewEndTimeIndex,
             openNotice: false
         };

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) {
+                if (segment.unsubmitted) {
-                    this.categoryTooltip.textContent = chrome.i18n.getMessage("preview") + " " + utils.shortCategoryName(segment.category);
+                    this.categoryTooltip.textContent = chrome.i18n.getMessage("unsubmitted") + " " + utils.shortCategoryName(segment.category);
                 } else {
                     this.categoryTooltip.textContent = utils.shortCategoryName(segment.category);
                 }
@@ -181,13 +181,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 = ' ';
 
-        const fullCategoryName = (preview ? 'preview-' : '') + category;
+        const fullCategoryName = (unsubmitted ? 'preview-' : '') + category;
-
         bar.setAttribute('sponsorblock-category', fullCategoryName);
 
         bar.style.backgroundColor = Config.config.barTypes[fullCategoryName]?.color;