diff --git a/src/content.ts b/src/content.ts index 019b3c8f..c8dd4ac6 100644 --- a/src/content.ts +++ b/src/content.ts @@ -17,7 +17,7 @@ import { getCategoryActionType } from "./utils/categoryUtils"; import { SkipButtonControlBar } from "./js-components/skipButtonControlBar"; import { Tooltip } from "./render/Tooltip"; import { getStartTimeFromUrl } from "./utils/urlParser"; -import { getControls } from "./utils/pageUtils"; +import { findValidElement, getControls, isVisible } from "./utils/pageUtils"; // Hack to get the CSS loaded on permission-based sites (Invidious) utils.wait(() => Config.config !== null, 5000, 10).then(addCSS); @@ -266,8 +266,8 @@ function resetValues() { } async function videoIDChange(id) { - //if the id has not changed return - if (sponsorVideoID === id) return; + //if the id has not changed return unless the video element has changed + if (sponsorVideoID === id && isVisible(video)) return; //set the global videoID sponsorVideoID = id; @@ -540,7 +540,7 @@ function setupVideoMutationListener() { } function refreshVideoAttachments() { - const newVideo = document.querySelector('video'); + const newVideo = findValidElement(document.querySelectorAll('video')) as HTMLVideoElement; if (newVideo && newVideo !== video) { video = newVideo; @@ -638,7 +638,7 @@ function setupSkipButtonControlBar() { } async function sponsorsLookup(id: string, keepOldSubmissions = true) { - if (!video) refreshVideoAttachments(); + if (!video || !isVisible(video)) refreshVideoAttachments(); //there is still no video here if (!video) { setTimeout(() => sponsorsLookup(id), 100); diff --git a/src/utils.ts b/src/utils.ts index c5299b40..81be9488 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -2,7 +2,7 @@ import Config from "./config"; import { CategorySelection, SponsorTime, FetchResponse, BackgroundScriptContainer, Registration } from "./types"; import * as CompileConfig from "../config.json"; -import { findValidElement } from "./utils/pageUtils"; +import { findValidElementFromSelector } from "./utils/pageUtils"; export default class Utils { @@ -445,7 +445,7 @@ export default class Utils { "#player-container .video-js", // Invidious ".main-video-section > .video-container" // Cloudtube ] - let referenceNode = findValidElement(selectors) + let referenceNode = findValidElementFromSelector(selectors) if (referenceNode == null) { //for embeds const player = document.getElementById("player"); diff --git a/src/utils/pageUtils.ts b/src/utils/pageUtils.ts index d94b36d5..d31ead47 100644 --- a/src/utils/pageUtils.ts +++ b/src/utils/pageUtils.ts @@ -20,12 +20,20 @@ export function getControls(): HTMLElement | false { } export function isVisible(element: HTMLElement): boolean { - return element.offsetWidth > 0 && element.offsetHeight > 0; + return element && element.offsetWidth > 0 && element.offsetHeight > 0; } -export function findValidElement(selectors: string[]): HTMLElement { - for (const selector of selectors) { - const element = document.querySelector(selector) as HTMLElement; +export function findValidElementFromSelector(selectors: string[]): HTMLElement { + return findValidElementFromGenerator(selectors, (selector) => document.querySelector(selector)); +} + +export function findValidElement(elements: HTMLElement[] | NodeListOf): HTMLElement { + return findValidElementFromGenerator(elements); +} + +function findValidElementFromGenerator(objects: T[] | NodeListOf, generator?: (obj: T) => HTMLElement): HTMLElement { + for (const obj of objects) { + const element = generator ? generator(obj as T) : obj as HTMLElement; if (element && isVisible(element)) { return element; }