diff --git a/maze-utils b/maze-utils index 0549dd0c..c92044ab 160000 --- a/maze-utils +++ b/maze-utils @@ -1 +1 @@ -Subproject commit 0549dd0ce37f930e8935449793f7f7f217f2e0e8 +Subproject commit c92044ab314ed0b52250016a3c6c3c8922787c47 diff --git a/public/content.css b/public/content.css index 02911c99..3236d165 100644 --- a/public/content.css +++ b/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; diff --git a/src/content.ts b/src/content.ts index 9636af59..050618f4 100644 --- a/src/content.ts +++ b/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) diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts index e3fdf745..001de564 100644 --- a/src/js-components/previewBar.ts +++ b/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"); - const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip)") as HTMLElement; + // YT, Vorapis, unknown + 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; + // YT, Vorapis v3 + const allProgressBars = document.querySelectorAll(".ytp-progress-bar, .ytp-progress-bar-container > .html5-progress-bar > .ytp-progress-list") as NodeListOf; this.progressBar = findValidElement(allProgressBars) ?? allProgressBars?.[0]; if (this.progressBar) { diff --git a/src/utils/compatibility.ts b/src/utils/compatibility.ts index b08877e6..a139ee04 100644 --- a/src/utils/compatibility.ts +++ b/src/utils/compatibility.ts @@ -12,4 +12,8 @@ export function runCompatibilityChecks() { Config.config.showZoomToFillError2 = false; }, 10000); } +} + +export function isVorapisInstalled() { + return document.querySelector(`.v3`); } \ No newline at end of file diff --git a/src/utils/pageUtils.ts b/src/utils/pageUtils.ts index 4c824836..69c9d7f4 100644 --- a/src/utils/pageUtils.ts +++ b/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) {