Add initial chapter name rendering

src/content.ts

@@ -419,9 +419,12 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
         return;
     }
 
-    if (!video || video.paused) return;
+    if (!video) return;
     if (currentTime === undefined || currentTime === null) currentTime = video.currentTime;
 
+    previewBar.updateChapterText(sponsorTimes, currentTime);
+
+    if (video.paused) return;
     if (videoMuted && !inMuteSegment(currentTime)) {
         video.muted = false;
         videoMuted = false;
@@ -601,6 +604,8 @@ function setupVideoListeners() {
                 lastCheckVideoTime = video.currentTime;
     
                 startSponsorSchedule();
+            } else {
+                previewBar.updateChapterText(sponsorTimes, video.currentTime);
             }
 
             if (!Config.config.dontShowNotice) {

src/js-components/previewBar.ts

@@ -6,7 +6,9 @@ https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd
 'use strict';
 
 import Config from "../config";
+import { ActionType, ActionTypes, SponsorTime } from "../types";
 import Utils from "../utils";
+import { getSkippingText } from "../utils/categoryUtils";
 const utils = new Utils();
 
 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
@@ -203,6 +205,51 @@ class PreviewBar {
         return bar;
     }
 
+    updateChapterText(segments: SponsorTime[], currentTime: number): void {
+        if (!segments) return;
+
+        const activeSegments = segments.filter((segment) => {
+            return segment.segment[0] <= currentTime && segment.segment[1] >= currentTime;
+        });
+
+        this.setActiveSegments(activeSegments);
+    }
+
+    /**
+     * Adds the text to the chapters slot if not filled by default
+     */
+    private setActiveSegments(segments: SponsorTime[]): void {
+        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");
+
+                const chosenSegment = segments.sort((a, b) => {
+                    if (a.actionType === ActionType.Chapter && b.actionType !== ActionType.Chapter) {
+                        return -1;
+                    } else if (a.actionType !== ActionType.Chapter && b.actionType === ActionType.Chapter) {
+                        return 1;
+                    } else {
+                        return (a.segment[0] - b.segment[1]);
+                    }
+                })[0];
+
+                const chapterButton = chaptersContainer.querySelector("button.ytp-chapter-title") as HTMLButtonElement;
+                chapterButton.classList.remove("ytp-chapter-container-disabled");
+                chapterButton.disabled = false;
+
+                const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
+                chapterTitle.innerText = chosenSegment.description || utils.shortCategoryName(chosenSegment.category);
+            } else {
+                // Hide chapters menu again
+                chaptersContainer.style.display = "none";
+            }
+        }
+    }
+
     remove(): void {
         this.container.remove();
 

src/types.ts

@@ -58,7 +58,8 @@ export enum CategoryActionType {
 
 export enum ActionType {
     Skip = "skip",
-    Mute = "mute"
+    Mute = "mute",
+    Chapter = "chapter",
 }
 
 export const ActionTypes = [ActionType.Skip, ActionType.Mute];
@@ -77,6 +78,7 @@ export interface SponsorTime {
 
     category: Category;
     actionType: ActionType;
+    description?: string;
 
     hidden?: SponsorHideType;
     source?: SponsorSourceType;