Add support for vorapis v3

Based on patch by @ten4dinosaur

public/content.css

@@ -11,6 +11,11 @@
 	display: none;
 }
 
+/* Vorapi compatibility */
+#player-api_VORAPI_ELEMENT_ID #previewbar {
+	z-index: 999;
+}
+
 #previewbar {
     overflow: visible;
     padding: 0;
@@ -44,7 +49,16 @@
 }
 
 div:hover > #previewbar.sbNotInvidious {
-	transform: scaleY(1)
+	transform: scaleY(1);
+}
+
+/* Vorapis */
+.v3 #previewbar.sbNotInvidious {
+	transform: scaleY(1);
+}
+.sponsorCategoryTooltipVisible.ytp-progress-tooltip {
+	width: 216px !important;
+  	/* left: 264.308px !important; */
 }
 
 .previewbar {
@@ -835,6 +849,15 @@ input::-webkit-inner-spin-button {
 	white-space: nowrap;
 }
 
+/* Vorapis V3 support */
+#watch7-content .sponsorBlockCategoryPill {
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+#watch7-content .sponsorBlockCategoryPillTitle {
+	font-size: 15px;
+}
+
 .categoryPillClose {
 	display: none;
 	height: 10px;

src/content.ts

@@ -43,7 +43,7 @@ import { generateUserID } from "../maze-utils/src/setup";
 import { updateAll } from "../maze-utils/src/thumbnailManagement";
 import { setupThumbnailListener } from "./utils/thumbnails";
 import * as documentScript from "../dist/js/document.js";
-import { runCompatibilityChecks } from "./utils/compatibility";
+import { isVorapisInstalled, runCompatibilityChecks } from "./utils/compatibility";
 import { cleanPage } from "./utils/pageCleaner";
 import { addCleanupListener } from "../maze-utils/src/cleanup";
 import { hideDeArrowPromotion, tryShowingDeArrowPromotion } from "./dearrowPromotion";
@@ -552,6 +552,9 @@ function getPreviewBarAttachElement(): HTMLElement | null {
             // For piped
             selector: ".shaka-ad-markers",
             isVisibleCheck: false
+        }, {
+            // For Vorapis v3
+            selector: ".ytp-progress-bar-container > .html5-progress-bar > .ytp-progress-list"
         }
     ];
 
@@ -2750,6 +2753,10 @@ function setCategoryColorCSSVariables() {
     if (!styleContainer) {
         styleContainer = document.createElement("style");
         styleContainer.id = "sbCategoryColorStyle";
+        if (isVorapisInstalled()) {
+            // Vorapi deletes styles
+            styleContainer.className = 'stylus';
+        }
 
         const head = (document.head || document.documentElement);
         head.appendChild(styleContainer)

src/js-components/previewBar.ts

@@ -14,6 +14,7 @@ import { normalizeChapterName } from "../utils/exporter";
 import { findValidElement } from "../../maze-utils/src/dom";
 import { addCleanupListener } from "../../maze-utils/src/cleanup";
 import { isVisible } from "../utils/pageUtils";
+import { isVorapisInstalled } from "../utils/compatibility";
 
 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 const MIN_CHAPTER_SIZE = 0.003;
@@ -100,13 +101,15 @@ class PreviewBar {
         this.chapterTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
 
         // global chaper tooltip or duration tooltip
-        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
+        // YT, Vorapis, unknown
-        const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip)") as HTMLElement;
+        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper, .ytp-progress-tooltip-text-container") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
+        const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip), .ytp-progress-tooltip-text:not(.sponsorCategoryTooltip)") as HTMLElement;
         if (!tooltipTextWrapper || !tooltipTextWrapper.parentElement) return;
 
         // Grab the tooltip from the text wrapper as the tooltip doesn't have its classes on init
         this.categoryTooltipContainer = tooltipTextWrapper.parentElement;
-        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title") as HTMLElement;
+        // YT, Vorapis
+        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title, .ytp-progress-tooltip-text") as HTMLElement;
         if (!this.categoryTooltipContainer || !titleTooltip) return;
 
         tooltipTextWrapper.insertBefore(this.categoryTooltip, titleTooltip.nextSibling);
@@ -128,7 +131,7 @@ class PreviewBar {
         seekBar.addEventListener("mousemove", (e: MouseEvent) => {
             if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer || !chrome.runtime?.id) return;
 
-            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title");
+            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title, .ytp-progress-tooltip-timestamp");
             const timeInSeconds = this.decimalToTime((e.clientX - seekBar.getBoundingClientRect().x) / seekBar.clientWidth);
 
             // Find the segment at that location, using the shortest if multiple found
@@ -156,6 +159,11 @@ class PreviewBar {
                 this.setTooltipTitle(mainSegment, this.categoryTooltip);
                 this.setTooltipTitle(secondarySegment, this.chapterTooltip);
 
+                if (isVorapisInstalled()) {
+                    const tooltipParent = tooltipTextWrapper.parentElement!;
+                    tooltipParent.classList.add("with-text");
+                }
+
                 if (normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.categoryTooltip.textContent)
                         || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)) {
                     if (originalTooltip.style.display !== "none") originalTooltip.style.display = "none";
@@ -238,7 +246,8 @@ class PreviewBar {
     }
 
     private updatePageElements(): void {
-        const allProgressBars = document.querySelectorAll(".ytp-progress-bar") as NodeListOf<HTMLElement>;
+        // YT, Vorapis v3
+        const allProgressBars = document.querySelectorAll(".ytp-progress-bar, .ytp-progress-bar-container > .html5-progress-bar > .ytp-progress-list") as NodeListOf<HTMLElement>;
         this.progressBar = findValidElement(allProgressBars) ?? allProgressBars?.[0];
 
         if (this.progressBar) {

src/utils/compatibility.ts

@@ -12,4 +12,8 @@ export function runCompatibilityChecks() {
             Config.config.showZoomToFillError2 = false;
         }, 10000);
     }
+}
+
+export function isVorapisInstalled() {
+    return document.querySelector(`.v3`);
 }

src/utils/pageUtils.ts

@@ -10,7 +10,9 @@ export function getControls(): HTMLElement {
         // Invidious/videojs video element's controls element
         ".vjs-control-bar",
         // Piped shaka player
-        ".shaka-bottom-controls"
+        ".shaka-bottom-controls",
+        // Vorapis v3
+        ".html5-player-chrome"
     ];
 
     for (const controlsSelector of controlsSelectors) {