Trigger changes even if videoid doesn't change if video element changes

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 the id has not changed return unless the video element has changed
-    if (sponsorVideoID === id) return;
+    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);

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");

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 {
+export function findValidElementFromSelector(selectors: string[]): HTMLElement {
-    for (const selector of selectors) {
+    return findValidElementFromGenerator(selectors, (selector) => document.querySelector(selector));
-        const element = document.querySelector(selector) as HTMLElement;
+}
+
+export function findValidElement(elements: HTMLElement[] | NodeListOf<HTMLElement>): HTMLElement {
+    return findValidElementFromGenerator(elements);
+}
+
+function findValidElementFromGenerator<T>(objects: T[] | NodeListOf<HTMLElement>, 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;
         }