Add preview bar to small progress bar on the bottom

hanydd · Mar 3, 2024 · f9380c7 · f9380c7
1 parent 171d2f6
commit f9380c7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/src/content.ts b/src/content.ts
@@ -431,20 +431,20 @@ function createPreviewBar(): void {
     const progressElementOptions = [{
         // For Desktop Bilibili
         selector: ".bpx-player-progress-schedule-wrap",
+        shadowSelector: ".bpx-player-shadow-progress-area",
         isVisibleCheck: true
-        }
-    ];
+    }];
 
     for (const option of progressElementOptions) {
         const allElements = document.querySelectorAll(option.selector) as NodeListOf<HTMLElement>;
-        const el = option.isVisibleCheck ? findValidElement(allElements) : allElements[0];
+        const parent = option.isVisibleCheck ? findValidElement(allElements) : allElements[0];
+        const allshadowSelectorElements = document.querySelectorAll(option.shadowSelector) as NodeListOf<HTMLElement>;
+        const shadowParent = allshadowSelectorElements[0];
 
-        if (el) {
+        if (parent) {
             const chapterVote = new ChapterVote(voteAsync);
-            previewBar = new PreviewBar(el, chapterVote);
-
+            previewBar = new PreviewBar(parent, shadowParent, chapterVote);
             updatePreviewBar();
-
             break;
         }
     }

diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts
@@ -25,7 +25,10 @@ export interface PreviewBarSegment {
 }
 
 class PreviewBar {
+    // main progress bar
     container: HTMLUListElement;
+    // small progress bar on the bottom of <video />, shown only when not hovering the video
+    shadowContainer: HTMLUListElement;
     categoryTooltip?: HTMLDivElement;
     categoryTooltipContainer?: HTMLElement;
     lastSmallestSegment: Record<string, {
@@ -34,20 +37,23 @@ class PreviewBar {
     }> = {};
 
     parent: HTMLElement;
-    progressBar: HTMLElement;
+    shadowParent: HTMLElement;
 
     segments: PreviewBarSegment[] = [];
     existingChapters: PreviewBarSegment[] = [];
     videoDuration = 0;
 
     chapterVote: ChapterVote;
 
-    constructor(parent: HTMLElement, chapterVote: ChapterVote, test=false) {
+    constructor(parent: HTMLElement, shadowParent: HTMLElement, chapterVote: ChapterVote, test=false) {
         if (test) return;
         this.container = document.createElement('ul');
         this.container.id = 'previewbar';
+        this.shadowContainer = document.createElement('ul');
+        this.shadowContainer.id = 'shadowPreviewbar';
 
         this.parent = parent;
+        this.shadowParent = shadowParent;
         this.chapterVote = chapterVote;
 
         this.createElement();
@@ -119,15 +125,20 @@ class PreviewBar {
      * Insert the container of the preview bar into DOM,
      * as the first child node of parent
      */
-    createElement(parent?: HTMLElement): void {
+    createElement(parent?: HTMLElement, shadowParent?: HTMLElement): void {
         if (parent) this.parent = parent;
         this.parent.prepend(this.container);
+        if (shadowParent) this.shadowParent = shadowParent;
+        this.shadowParent?.prepend(this.shadowContainer);
     }
 
     clear(): void {
         while (this.container.firstChild) {
             this.container.removeChild(this.container.firstChild);
         }
+        while (this.shadowContainer?.firstChild) {
+            this.shadowContainer.removeChild(this.shadowContainer.firstChild);
+        }
 
         this.chapterVote?.setVisibility(false);
     }
@@ -155,7 +166,9 @@ class PreviewBar {
         });
         for (const segment of sortedSegments) {
             const bar = this.createBar(segment);
+            const shadowBar = bar.cloneNode(true) as HTMLLIElement;
             this.container.appendChild(bar);
+            this.shadowContainer?.appendChild(shadowBar);
         }
     }
 

diff --git a/src/utils/pageCleaner.ts b/src/utils/pageCleaner.ts
@@ -1,7 +1,7 @@
 export function cleanPage() {
     // For live-updates
     if (document.readyState === "complete") {
-        for (const element of document.querySelectorAll("#categoryPillParent, .playerButton, .sponsorThumbnailLabel, #submissionNoticeContainer, .sponsorSkipNoticeContainer, #sponsorBlockPopupContainer, .skipButtonControlBarContainer, #previewbar")) {
+        for (const element of document.querySelectorAll("#categoryPillParent, .playerButton, .sponsorThumbnailLabel, #submissionNoticeContainer, .sponsorSkipNoticeContainer, #sponsorBlockPopupContainer, .skipButtonControlBarContainer, #previewbar, #shadowPreviewbar")) {
             element.remove();
         }
     }