Add preview category

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

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": {

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;
         }

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 = ' ';
 
-        const barSegmentType = (preview ? 'preview-' : '') + category;
+        const barSegmentType = (unsubmitted ? 'preview-' : '') + category;
 
         bar.setAttribute('data-vs-segment-type', barSegmentType);