Add action type to preview bar test

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "5.0.1",
+    "version": "5.0.2",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",

public/_locales/en/messages.json

@@ -1107,7 +1107,7 @@
         "message": "Export segments"
     },
     "importSegments": {
-        "message": "Import chapters"
+        "message": "Import segments"
     },
     "Import": {
         "message": "Import",

public/content.css

@@ -26,11 +26,15 @@
 	transition: transform .1s cubic-bezier(0,0,0.2,1);
 }
 
+.ytp-big-mode #previewbar {
+	transform: scaleY(0.625) translateY(-30%) translateY(1.5px);
+}
+
 .progress-bar-line > #previewbar {
 	height: 3px;
 }
 
-#previewbar.hovered {
+div:hover > #previewbar.sbNotInvidious {
 	transform: scaleY(1)
 }
 
@@ -126,7 +130,7 @@ div:hover > .sponsorBlockChapterBar {
 	vertical-align: top;
 }
 
-.playerButton.hidden {
+.playerButton.hidden:not(.autoHiding) {
 	display: none !important;
 }
 

src/content.ts

@@ -71,6 +71,10 @@ let lastKnownVideoTime: { videoTime: number, preciseTime: number } = {
 };
 // It resumes with a slightly later time on chromium
 let lastTimeFromWaitingEvent = null;
+const lastNextChapterKeybind = {
+    time: 0,
+    date: 0
+};
 
 // Skips are scheduled to ensure precision.
 // Skips are rescheduled every seeking event.
@@ -338,6 +342,7 @@ function resetValues() {
     existingChaptersImported = false;
     sponsorSkipped = [];
 
+    sponsorVideoID = null;
     videoInfo = null;
     pageType = null;
     channelWhitelisted = false;
@@ -379,10 +384,8 @@ async function videoIDChange(id): Promise<void> {
     //if the id has not changed return unless the video element has changed
     if (sponsorVideoID === id && (isVisible(video) || !video)) return;
 
-    //set the global videoID
-    sponsorVideoID = id;
-
     resetValues();
+    sponsorVideoID = id;
 
 	//id is not valid
     if (!id) return;
@@ -612,7 +615,8 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
 
         for (const segment of skipInfo.array) {
             if (shouldAutoSkip(segment) &&
-                    segment.segment[0] >= skipTime[0] && segment.segment[1] <= skipTime[1]) {
+                    segment.segment[0] >= skipTime[0] && segment.segment[1] <= skipTime[1]
+                    && segment.segment[0] === segment.scheduledTime) { // Don't include artifical scheduled segments (end times for mutes)
                 skippingSegments.push(segment);
             }
         }
@@ -620,9 +624,6 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
 
     logDebug(`Next step in starting skipping: ${!shouldSkip(currentSkip)}, ${!sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment)}`);
 
-    // Don't skip if this category should not be skipped
-    if (!shouldSkip(currentSkip) && !sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment)) return;
-
     const skippingFunction = (forceVideoTime?: number) => {
         let forcedSkipTime: number = null;
         let forcedIncludeIntersectingSegments = false;
@@ -1044,7 +1045,7 @@ async function sponsorsLookup(keepOldSubmissions = true) {
 
 function importExistingChapters(wait: boolean) {
     if (!existingChaptersImported) {
-        GenericUtils.wait(() => video && getExistingChapters(sponsorVideoID, video.duration),
+        GenericUtils.wait(() => video?.duration && getExistingChapters(sponsorVideoID, video.duration),
             wait ? 5000 : 0, 100, (c) => c?.length > 0).then((chapters) => {
                 if (!existingChaptersImported && chapters?.length > 0) {
                     sponsorTimes = (sponsorTimes ?? []).concat(...chapters).sort((a, b) => a.segment[0] - b.segment[0]);
@@ -2203,8 +2204,7 @@ function windowListenerHandler(event: MessageEvent): void {
     const dataType = data.type;
     if (data.source !== "sponsorblock") return;
 
-    if (dataType === "navigation") {
-        sponsorVideoID = data.videoID;
+    if (dataType === "navigation" && data.videoID) {
         pageType = data.pageType;
 
         if (data.channelID) {
@@ -2213,17 +2213,17 @@ function windowListenerHandler(event: MessageEvent): void {
                 status: ChannelIDStatus.Found
             };
         }
+
+        videoIDChange(data.videoID);
     } else if (dataType === "ad") {
         if (isAdPlaying != data.playing) {
             isAdPlaying = data.playing
             updatePreviewBar();
             updateVisibilityOfPlayerControlsButton();
         }
-    } else if (dataType === "data") {
-        if (data.video !== sponsorVideoID) {
-            sponsorVideoID = data.videoID;
-            videoIDChange(sponsorVideoID);
-        }
+    } else if (dataType === "data" && data.videoID) {
+        videoIDChange(data.videoID);
+
         isLivePremiere = data.isLive || data.isPremiere
     }
 }
@@ -2237,30 +2237,39 @@ function updateActiveSegment(currentTime: number): void {
 }
 
 function nextChapter(): void {
-    const chapters = sponsorTimes.filter((time) => time.actionType === ActionType.Chapter)
-        .sort((a, b) => a.segment[1] - b.segment[1]);
-    if (chapters.length <= 0) return;
+    const chapters = previewBar.unfilteredChapterGroups?.filter((time) => [ActionType.Chapter, null].includes(time.actionType));
+    if (!chapters || chapters.length <= 0) return;
 
-    const nextChapter = chapters.findIndex((time) => time.actionType === ActionType.Chapter
-        && time.segment[1] > video.currentTime);
+    lastNextChapterKeybind.time = video.currentTime;
+    lastNextChapterKeybind.date = Date.now();
+
+    const nextChapter = chapters.findIndex((time) => time.segment[0] > video.currentTime);
     if (nextChapter !== -1) {
-        reskipSponsorTime(chapters[nextChapter], true);
+        video.currentTime = chapters[nextChapter].segment[0];
     } else {
         video.currentTime = video.duration;
     }
 }
 
 function previousChapter(): void {
-    const chapters = sponsorTimes.filter((time) => time.actionType === ActionType.Chapter);
-    if (chapters.length <= 0) return;
+    if (Date.now() - lastNextChapterKeybind.date < 3000) {
+        video.currentTime = lastNextChapterKeybind.time;
+        lastNextChapterKeybind.date = 0;
+        return;
+    }
+
+    const chapters = previewBar.unfilteredChapterGroups?.filter((time) => [ActionType.Chapter, null].includes(time.actionType));
+    if (!chapters || chapters.length <= 0) {
+        video.currentTime = 0;
+        return;
+    }
 
     // subtract 5 seconds to allow skipping back to the previous chapter if close to start of
     // the current one
-    const nextChapter = chapters.findIndex((time) => time.actionType === ActionType.Chapter
-        && time.segment[0] > video.currentTime - Math.min(5, time.segment[1] - time.segment[0]));
+    const nextChapter = chapters.findIndex((time) => time.segment[0] > video.currentTime - Math.min(5, time.segment[1] - time.segment[0]));
     const previousChapter = nextChapter !== -1 ? (nextChapter - 1) : (chapters.length - 1);
     if (previousChapter !== -1) {
-        unskipSponsorTime(chapters[previousChapter], null, true);
+        video.currentTime = chapters[previousChapter].segment[0];
     } else {
         video.currentTime = 0;
     }

src/js-components/previewBar.ts

@@ -28,7 +28,8 @@ export interface PreviewBarSegment {
 }
 
 interface ChapterGroup extends SegmentContainer {
-    originalDuration: number 
+    originalDuration: number;
+    actionType: ActionType;
 }
 
 class PreviewBar {
@@ -53,6 +54,9 @@ class PreviewBar {
     chapterVote: ChapterVote;
     originalChapterBar: HTMLElement;
     originalChapterBarBlocks: NodeListOf<HTMLElement>;
+    chapterMargin: number;
+    unfilteredChapterGroups: ChapterGroup[];
+    chapterGroups: ChapterGroup[];
 
     constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, chapterVote: ChapterVote, test=false) {
         if (test) return;
@@ -74,6 +78,10 @@ class PreviewBar {
     setupHoverText(): void {
         if (this.onMobileYouTube || this.onInvidious) return;
 
+        // delete old ones
+        document.querySelectorAll(`.sponsorCategoryTooltip`)
+            .forEach((e) => e.remove());
+
         // Create label placeholder
         this.categoryTooltip = document.createElement("div");
         this.categoryTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
@@ -191,10 +199,7 @@ class PreviewBar {
 
             this.container.style.transform = "none";
         } else if (!this.onInvidious) {
-            // Hover listener
-            this.parent.addEventListener("mouseenter", () => this.container.classList.add("hovered"));
-
-            this.parent.addEventListener("mouseleave", () => this.container.classList.remove("hovered"));
+            this.container.classList.add("sbNotInvidious");
         }
 
         // On the seek bar
@@ -225,16 +230,29 @@ class PreviewBar {
         const allProgressBars = document.querySelectorAll('.ytp-progress-bar') as NodeListOf<HTMLElement>;
         this.progressBar = findValidElement(allProgressBars) ?? allProgressBars?.[0];
 
-        this.originalChapterBar = this.progressBar.querySelector(".ytp-chapters-container:not(.sponsorBlockChapterBar)") as HTMLElement;
+        const newChapterBar = this.progressBar.querySelector(".ytp-chapters-container:not(.sponsorBlockChapterBar)") as HTMLElement;
+        if (this.originalChapterBar !== newChapterBar) {
+            // Make sure changes are undone on old bar
+            this.originalChapterBar?.style?.removeProperty("display");
+
+            this.originalChapterBar = newChapterBar;
+        }
+        
     }
 
     private update(): void {
         this.clear();
         if (!this.segments) return;
 
+        this.chapterMargin = 2;
         if (this.originalChapterBar) {
             this.originalChapterBarBlocks = this.originalChapterBar.querySelectorAll(":scope > div") as NodeListOf<HTMLElement>
             this.existingChapters = this.segments.filter((s) => s.source === SponsorSourceType.YouTube).sort((a, b) => a.segment[0] - b.segment[0]);
+        
+            if (this.existingChapters?.length > 0) {
+                const margin = parseFloat(this.originalChapterBarBlocks?.[0]?.style?.marginRight?.replace("px", ""));
+                if (margin) this.chapterMargin = margin;
+            }
         }
 
         const sortedSegments = this.segments.sort(({ segment: a }, { segment: b }) => {
@@ -277,7 +295,8 @@ class PreviewBar {
         bar.style.position = "absolute";
         const duration = Math.min(segment[1], this.videoDuration) - segment[0];
         if (duration > 0) {
-            bar.style.width = `calc(${this.intervalToPercentage(segment[0], segment[1])}${this.chapterFilter(barSegment) ? ' - 2px' : ''})`;
+            bar.style.width = `calc(${this.intervalToPercentage(segment[0], segment[1])}${
+                this.chapterFilter(barSegment) && segment[1] < this.videoDuration ? ` - ${this.chapterMargin}px` : ''})`;
         }
         
         const time = segment[1] ? Math.min(this.videoDuration, segment[0]) : segment[0];
@@ -287,25 +306,42 @@ class PreviewBar {
     }
 
     createChaptersBar(segments: PreviewBarSegment[]): void {
-        if (!this.progressBar || !this.originalChapterBar || this.originalChapterBar.childElementCount <= 0) return;
+        if (!this.progressBar || !this.originalChapterBar || this.originalChapterBar.childElementCount <= 0) {
+            if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
+            return;
+        }
+
+        // Merge overlapping chapters
+        this.unfilteredChapterGroups = this.createChapterRenderGroups(segments);
 
         if (segments.every((segments) => segments.source === SponsorSourceType.YouTube) 
             || (!Config.config.renderSegmentsAsChapters 
                 && segments.every((segment) => segment.actionType !== ActionType.Chapter 
-                    || segment.source === SponsorSourceType.YouTube))) {
+                    || segment.source === SponsorSourceType.YouTube))
+            || this.chapterGroups?.length <= 0) {
             if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
             this.originalChapterBar.style.removeProperty("display");
             return;
         }
 
-        // Merge overlapping chapters
         const filteredSegments = segments?.filter((segment) => this.chapterFilter(segment));
-        const chaptersToRender = this.createChapterRenderGroups(filteredSegments).filter((segment) => this.chapterGroupFilter(segment));
+        if (filteredSegments) {
+            let groups = this.unfilteredChapterGroups;
+            if (filteredSegments.length !== segments.length) {
+                groups = this.createChapterRenderGroups(filteredSegments);
+            }
+            this.chapterGroups = groups.filter((segment) => this.chapterGroupFilter(segment));
 
-        if (chaptersToRender?.length <= 0) {
-            if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
-            this.originalChapterBar.style.removeProperty("display");
-            return;
+            if (groups.length !== this.chapterGroups.length) {
+                // Fix missing sections due to filtered segments
+                for (let i = 1; i < this.chapterGroups.length; i++) {
+                    if (this.chapterGroups[i].segment[0] !== this.chapterGroups[i - 1].segment[1]) {
+                        this.chapterGroups[i - 1].segment[1] = this.chapterGroups[i].segment[0]
+                    }
+                }
+            }
+        } else {
+            this.chapterGroups = this.unfilteredChapterGroups;
         }
 
         // Create it from cloning
@@ -324,24 +360,26 @@ class PreviewBar {
         const originalSection = originalSections[0];
 
         // For switching to a video with less chapters
-        if (originalSections.length > chaptersToRender.length) {
-            for (let i = originalSections.length - 1; i >= chaptersToRender.length; i--) {
+        if (originalSections.length > this.chapterGroups.length) {
+            for (let i = originalSections.length - 1; i >= this.chapterGroups.length; i--) {
                 this.customChaptersBar.removeChild(originalSections[i]);
             }
         }
 
         // Modify it to have sections for each segment
-        for (let i = 0; i < chaptersToRender.length; i++) {
-            const chapter = chaptersToRender[i].segment;
+        for (let i = 0; i < this.chapterGroups.length; i++) {
+            const chapter = this.chapterGroups[i].segment;
             let newSection = originalSections[i] as HTMLElement;
             if (!newSection) {
                 newSection = originalSection.cloneNode(true) as HTMLElement;
 
                 this.firstTimeSetupChapterSection(newSection);
                 this.customChaptersBar.appendChild(newSection);
+            } else if (createFromScratch) {
+                this.firstTimeSetupChapterSection(newSection);
             }
 
-            this.setupChapterSection(newSection, chapter[0], chapter[1], i !== chaptersToRender.length - 1);
+            this.setupChapterSection(newSection, chapter[0], chapter[1], i !== this.chapterGroups.length - 1);
         }
 
         // Hide old bar
@@ -383,15 +421,19 @@ class PreviewBar {
                         latestValidChapter = result[result.length - 1];
                     }
 
+                    const priorityActionType = this.getActionTypePrioritized([segment.actionType, latestChapter?.actionType]);
+
                     // Split the latest chapter if smaller
                     result.push({
                         segment: [segment.segment[0], segment.segment[1]],
                         originalDuration: segmentDuration,
+                        actionType: priorityActionType
                     });
                     if (latestValidChapter?.segment[1] > segment.segment[1]) {
                         result.push({
                             segment: [segment.segment[1], latestValidChapter.segment[1]],
-                            originalDuration: latestValidChapter.originalDuration
+                            originalDuration: latestValidChapter.originalDuration,
+                            actionType: latestValidChapter.actionType
                         });
                     }
 
@@ -410,7 +452,8 @@ class PreviewBar {
                     // Start at end of old one otherwise
                     result.push({
                         segment: [latestChapter.segment[1], segment.segment[1]],
-                        originalDuration: segmentDuration
+                        originalDuration: segmentDuration,
+                        actionType: segment.actionType
                     });
                 }
             } else {
@@ -419,7 +462,8 @@ class PreviewBar {
                 if (segment.segment[0] > lastTime) {
                     result.push({
                         segment: [lastTime, segment.segment[0]],
-                        originalDuration: 0
+                        originalDuration: 0,
+                        actionType: null
                     });
                 }
 
@@ -427,7 +471,8 @@ class PreviewBar {
                 const endTime = Math.min(segment.segment[1], this.videoDuration);
                 result.push({
                     segment: [segment.segment[0], endTime],
-                    originalDuration: endTime - segment.segment[0]
+                    originalDuration: endTime - segment.segment[0],
+                    actionType: segment.actionType
                 });
             }
 
@@ -439,7 +484,8 @@ class PreviewBar {
                 if (this.intervalToDecimal(lastTime, nextTime) > MIN_CHAPTER_SIZE) {
                     result.push({
                         segment: [lastTime, nextTime],
-                        originalDuration: 0
+                        originalDuration: 0,
+                        actionType: null
                     });
                 }
             }
@@ -448,11 +494,21 @@ class PreviewBar {
         return result;
     }
 
+    private getActionTypePrioritized(actionTypes: ActionType[]): ActionType {
+        if (actionTypes.includes(ActionType.Skip)) {
+            return ActionType.Skip;
+        } else if (actionTypes.includes(ActionType.Mute)) {
+            return ActionType.Mute;
+        } else {
+            return actionTypes.find(a => a) ?? actionTypes[0];
+        }
+    }
+
     private setupChapterSection(section: HTMLElement, startTime: number, endTime: number, addMargin: boolean): void {
         const sizePercent = this.intervalToPercentage(startTime, endTime);
         if (addMargin) {
-            section.style.marginRight = "2px";
-            section.style.width = `calc(${sizePercent} - 2px)`;
+            section.style.marginRight = `${this.chapterMargin}px`;
+            section.style.width = `calc(${sizePercent} - ${this.chapterMargin}px)`;
         } else {
             section.style.marginRight = "0";
             section.style.width = sizePercent;
@@ -529,7 +585,7 @@ class PreviewBar {
                 const section = sections[i];
 
                 const sectionWidthDecimal = parseFloat(section.getAttribute("decimal-width"));
-                const sectionWidthDecimalNoMargin = sectionWidthDecimal - 2 / progressBar.clientWidth;
+                const sectionWidthDecimalNoMargin = sectionWidthDecimal - this.chapterMargin / progressBar.clientWidth;
 
                 for (const className in changes) {
                     const selector = `.${className}`
@@ -572,6 +628,7 @@ class PreviewBar {
             { left: number, scale: number } {
         const sections = currentElement.parentElement.parentElement.parentElement.children;
         let currentWidth = 0;
+        let lastWidth = 0;
 
         let left = 0;
         let leftPosition = 0;
@@ -579,6 +636,7 @@ class PreviewBar {
         let scale = null;
         let scalePosition = 0;
         let scaleWidth = 0;
+        let lastScalePosition = 0;
 
         for (let i = 0; i < sections.length; i++) {
             const section = sections[i] as HTMLElement;
@@ -598,24 +656,33 @@ class PreviewBar {
             const transformMatch = checkElement.style.transform.match(/scaleX\(([0-9.]+?)\)/);
             if (transformMatch) {
                 const transformScale = parseFloat(transformMatch[1]);
-                if (i === sections.length - 1 || (transformScale < 1 && transformScale + checkLeft / currentSectionWidthNoMargin < 0.99999)) {
-                    scale = transformScale;
-                    scaleWidth = currentSectionWidthNoMargin;
+                const endPosition = transformScale + checkLeft / currentSectionWidthNoMargin;
 
-                    if (transformScale > 0) {
-                        // reached the end of this section for sure, since the scale is now between 0 and 1
-                        // if the scale is always zero, then it will go through all sections but still return 0
+                if (lastScalePosition > 0.99999 && endPosition === 0) {
+                    // Last one was an end section that was fully filled
+                    scalePosition = currentWidth - lastWidth;
+                    break;
+                }
 
-                        scalePosition = currentWidth;
-                        if (checkLeft !== 0) {
-                            scalePosition += left;
-                        }
-                        break;
+                lastScalePosition = endPosition;
+
+                scale = transformScale;
+                scaleWidth = currentSectionWidthNoMargin;
+
+                if ((i === sections.length - 1 || endPosition < 0.99999) && endPosition > 0) {
+                    // reached the end of this section for sure
+                    // if the scale is always zero, then it will go through all sections but still return 0
+
+                    scalePosition = currentWidth;
+                    if (checkLeft !== 0) {
+                        scalePosition += left;
                     }
+                    break;
                 }
             }
 
-            currentWidth += currentSectionWidth;
+            lastWidth = currentSectionWidth;
+            currentWidth += lastWidth;
         }
 
         return { 
@@ -653,8 +720,6 @@ class PreviewBar {
         const chaptersContainer = document.querySelector(".ytp-chapter-container") as HTMLDivElement;
 
         if (chaptersContainer) {
-            // TODO: Check if existing chapters exist (if big chapters menu is available?)
-
             if (segments.length > 0) {
                 chaptersContainer.style.removeProperty("display");
 
@@ -692,7 +757,6 @@ class PreviewBar {
                     this.chapterVote.setVisibility(false);
                 }
             } else {
-                // Hide chapters menu again
                 chaptersContainer.style.display = "none";
                 this.chapterVote.setVisibility(false);
             }

test/previewBar.test.ts

@@ -11,12 +11,14 @@ describe("createChapterRenderGroups", () => {
         const groups = previewBar.createChapterRenderGroups([{
             segment: [2, 30],
             category: "sponsor",
+            actionType: "skip",
             unsubmitted: false,
             showLarger: false,
             description: ""
         }, {
             segment: [50, 80],
             category: "sponsor",
+            actionType: "skip",
             unsubmitted: false,
             showLarger: false,
             description: ""
@@ -24,19 +26,24 @@ describe("createChapterRenderGroups", () => {
 
         expect(groups).toStrictEqual([{
             segment: [0, 2],
-            originalDuration: 0
+            originalDuration: 0,
+            actionType: null
         }, {
             segment: [2, 30],
-            originalDuration: 30 - 2
+            originalDuration: 30 - 2,
+            actionType: "skip"
         }, {
             segment: [30, 50],
-            originalDuration: 0
+            originalDuration: 0,
+            actionType: null
         }, {
             segment: [50, 80],
-            originalDuration: 80 - 50
+            originalDuration: 80 - 50,
+            actionType: "skip"
         }, {
             segment: [80, 315],
-            originalDuration: 0
+            originalDuration: 0,
+            actionType: null
         }]);
     });
 
@@ -45,12 +52,14 @@ describe("createChapterRenderGroups", () => {
         const groups = previewBar.createChapterRenderGroups([{
             segment: [2.52, 30],
             category: "sponsor",
+            actionType: "skip",
             unsubmitted: false,
             showLarger: false,
             description: ""
         }, {
             segment: [20, 25],
             category: "sponsor",
+            actionType: "skip",
             unsubmitted: false,
             showLarger: false,
             description: ""
@@ -58,19 +67,24 @@ describe("createChapterRenderGroups", () => {
 
         expect(groups).toStrictEqual([{
             segment: [0, 2.52],
-            originalDuration: 0
+            originalDuration: 0,
+            actionType: null
         }, {
             segment: [2.52, 20],
-            originalDuration: 30 - 2.52
+            originalDuration: 30 - 2.52,
+            actionType: "skip"
         }, {
             segment: [20, 25],
-            originalDuration: 25 - 20
+            originalDuration: 25 - 20,
+            actionType: "skip"
         }, {
             segment: [25, 30],
-            originalDuration: 30 - 2.52
+            originalDuration: 30 - 2.52,
+            actionType: "skip"
         }, {
             segment: [30, 315],
-            originalDuration: 0
+            originalDuration: 0,
+            actionType: null
         }]);
     });
 
@@ -79,12 +93,14 @@ describe("createChapterRenderGroups", () => {
         const groups = previewBar.createChapterRenderGroups([{
             segment: [2.52, 30],
             category: "sponsor",
+            actionType: "skip",
             unsubmitted: false,
             showLarger: false,
             description: ""
         }, {
             segment: [2.52, 40],
             category: "sponsor",
+            actionType: "skip",
             unsubmitted: false,
             showLarger: false,
             description: ""
@@ -92,16 +108,20 @@ describe("createChapterRenderGroups", () => {
 
         expect(groups).toStrictEqual([{
             segment: [0, 2.52],
-            originalDuration: 0
+            originalDuration: 0,
+            actionType: null
         }, {
             segment: [2.52, 30],
-            originalDuration: 30 - 2.52
+            originalDuration: 30 - 2.52,
+            actionType: "skip"
         }, {
             segment: [30, 40],
-            originalDuration: 40 - 2.52
+            originalDuration: 40 - 2.52,
+            actionType: "skip"
         }, {
             segment: [40, 315],
-            originalDuration: 0
+            originalDuration: 0,
+            actionType: null
         }]);
     });
 
@@ -110,6 +130,7 @@ describe("createChapterRenderGroups", () => {
         const groups = previewBar.createChapterRenderGroups([
             {
                 "category": "chapter",
+                "actionType": "chapter",
                 "segment": [
                     0,
                     49.977
@@ -122,6 +143,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     2.926,
                     5
@@ -134,6 +156,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "chapter",
+                "actionType": "chapter",
                 "segment": [
                     14.487,
                     37.133
@@ -146,6 +169,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     23.450537,
                     34.486084
@@ -158,6 +182,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "interaction",
+                "actionType": "skip",
                 "segment": [
                     50.015343,
                     56.775314
@@ -170,6 +195,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     62.51888,
                     74.33331
@@ -182,6 +208,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     88.71328,
                     96.05933
@@ -194,6 +221,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     101.50703,
                     115.088326
@@ -205,6 +233,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     122.211845,
                     137.42178
@@ -217,6 +246,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     144.08913,
                     160.14084
@@ -229,6 +259,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     164.22084,
                     170.98082
@@ -241,6 +272,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     180.56674,
                     189.16516
@@ -253,6 +285,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     204.10468,
                     211.87865
@@ -265,6 +298,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     214.92064,
                     222.0186
@@ -277,6 +311,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     233.0754,
                     244.56734
@@ -289,6 +324,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     260.64053,
                     269.35938
@@ -301,6 +337,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     288.686,
                     301.96
@@ -313,6 +350,7 @@ describe("createChapterRenderGroups", () => {
             },
             {
                 "category": "sponsor",
+                "actionType": "skip",
                 "segment": [
                     288.686,
                     295
@@ -330,245 +368,280 @@ describe("createChapterRenderGroups", () => {
                     0,
                     2.926
                 ],
-                "originalDuration": 49.977
+                "originalDuration": 49.977,
+                "actionType": "chapter"
             },
             {
                 "segment": [
                     2.926,
                     5
                 ],
-                "originalDuration": 2.074
+                "originalDuration": 2.074,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     5,
                     14.487
                 ],
-                "originalDuration": 49.977
+                "originalDuration": 49.977,
+                "actionType": "chapter"
             },
             {
                 "segment": [
                     14.487,
                     23.450537
                 ],
-                "originalDuration": 22.646
+                "originalDuration": 22.646,
+                "actionType": "chapter"
             },
             {
                 "segment": [
                     23.450537,
                     34.486084
                 ],
-                "originalDuration": 11.035546999999998
+                "originalDuration": 11.035546999999998,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     34.486084,
                     37.133
                 ],
-                "originalDuration": 22.646
+                "originalDuration": 22.646,
+                "actionType": "chapter"
             },
             {
                 "segment": [
                     37.133,
                     49.977
                 ],
-                "originalDuration": 49.977
+                "originalDuration": 49.977,
+                "actionType": "chapter"
             },
             {
                 "segment": [
                     49.977,
                     50.015343
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     50.015343,
                     56.775314
                 ],
-                "originalDuration": 6.759971
+                "originalDuration": 6.759971,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     56.775314,
                     62.51888
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     62.51888,
                     74.33331
                 ],
-                "originalDuration": 11.814429999999994
+                "originalDuration": 11.814429999999994,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     74.33331,
                     88.71328
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     88.71328,
                     96.05933
                 ],
-                "originalDuration": 7.346050000000005
+                "originalDuration": 7.346050000000005,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     96.05933,
                     101.50703
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     101.50703,
                     115.088326
                 ],
-                "originalDuration": 13.581295999999995
+                "originalDuration": 13.581295999999995,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     115.088326,
                     122.211845
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     122.211845,
                     137.42178
                 ],
-                "originalDuration": 15.209935000000016
+                "originalDuration": 15.209935000000016,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     137.42178,
                     144.08913
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     144.08913,
                     160.14084
                 ],
-                "originalDuration": 16.051709999999986
+                "originalDuration": 16.051709999999986,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     160.14084,
                     164.22084
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     164.22084,
                     170.98082
                 ],
-                "originalDuration": 6.759979999999985
+                "originalDuration": 6.759979999999985,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     170.98082,
                     180.56674
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     180.56674,
                     189.16516
                 ],
-                "originalDuration": 8.598419999999976
+                "originalDuration": 8.598419999999976,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     189.16516,
                     204.10468
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     204.10468,
                     211.87865
                 ],
-                "originalDuration": 7.773969999999991
+                "originalDuration": 7.773969999999991,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     211.87865,
                     214.92064
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     214.92064,
                     222.0186
                 ],
-                "originalDuration": 7.0979600000000005
+                "originalDuration": 7.0979600000000005,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     222.0186,
                     233.0754
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     233.0754,
                     244.56734
                 ],
-                "originalDuration": 11.49194
+                "originalDuration": 11.49194,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     244.56734,
                     260.64053
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     260.64053,
                     269.35938
                 ],
-                "originalDuration": 8.718849999999975
+                "originalDuration": 8.718849999999975,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     269.35938,
                     288.686
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     288.686,
                     295
                 ],
-                "originalDuration": 6.314000000000021
+                "originalDuration": 6.314000000000021,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     295,
                     301.96
                 ],
-                "originalDuration": 13.274000000000001
+                "originalDuration": 13.274000000000001,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     301.96,
                     315.061
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             }
         ]);
     })
@@ -581,6 +654,7 @@ describe("createChapterRenderGroups", () => {
                     2797.323
                 ],
                 "category": "chooseACategory",
+                "actionType": "skip",
                 "unsubmitted": true,
                 "showLarger": false,
             },{
@@ -589,6 +663,7 @@ describe("createChapterRenderGroups", () => {
                     3432.255
                 ],
                 "category": "chooseACategory",
+                "actionType": "skip",
                 "unsubmitted": true,
                 "showLarger": false,
             },{
@@ -597,6 +672,7 @@ describe("createChapterRenderGroups", () => {
                     3412.413
                 ],
                 "category": "chooseACategory",
+                "actionType": "skip",
                 "unsubmitted": true,
                 "showLarger": false,
             },{
@@ -605,6 +681,7 @@ describe("createChapterRenderGroups", () => {
                     1674.286
                 ],
                 "category": "sponsor",
+                "actionType": "skip",
                 "unsubmitted": false,
                 "showLarger": false,
             }
@@ -616,49 +693,56 @@ describe("createChapterRenderGroups", () => {
                     0,
                     160
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             },
             {
                 "segment": [
                     160,
                     169
                 ],
-                "originalDuration": 2637.323
+                "originalDuration": 2637.323,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     169,
                     1594.92
                 ],
-                "originalDuration": 3243.413
+                "originalDuration": 3243.413,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     1594.92,
                     1674.286
                 ],
-                "originalDuration": 79.36599999999999
+                "originalDuration": 79.36599999999999,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     1674.286,
                     3412.413
                 ],
-                "originalDuration": 3243.413
+                "originalDuration": 3243.413,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     3412.413,
                     3432.255
                 ],
-                "originalDuration": 3263.255
+                "originalDuration": 3263.255,
+                "actionType": "skip"
             },
             {
                 "segment": [
                     3432.255,
                     3615.161
                 ],
-                "originalDuration": 0
+                "originalDuration": 0,
+                "actionType": null
             }
         ]);
     });