Merge pull request #1141 from mchangrh/videoPreviewButtons

fix hover preview segments

2 files changed, 44 insertions, 4 deletions

diff --git a/src/content.ts b/src/content.ts
index 37c3812a..14f1f95d 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -15,7 +15,6 @@ import { Message, MessageResponse, VoteResponse } from "./messageTypes";
 import * as Chat from "./js-components/chat";
 import { getCategoryActionType } from "./utils/categoryUtils";
 import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
-import { Tooltip } from "./render/Tooltip";
 import { getStartTimeFromUrl } from "./utils/urlParser";
 import { findValidElement, getControls, getHashParams, isVisible } from "./utils/pageUtils";
 import { CategoryPill } from "./render/CategoryPill";
@@ -92,6 +91,8 @@ const playerButtons: Record<string, {button: HTMLButtonElement, image: HTMLImage
 
 // Direct Links after the config is loaded
 utils.wait(() => Config.config !== null, 1000, 1).then(() => videoIDChange(getYouTubeVideoID(document)));
+// wait for hover preview to appear, and refresh attachments if ever found
+window.addEventListener("DOMContentLoaded", () => utils.waitForElement(".ytp-inline-preview-ui").then(() => refreshVideoAttachments()));
 addPageListeners();
 addHotkeyListener();
 
@@ -945,7 +946,7 @@ function getYouTubeVideoID(document: Document): string | boolean {
     // skip to document if matches pattern
     if (url.includes("/channel/") || url.includes("/user/") || url.includes("/c/")) return getYouTubeVideoIDFromDocument(document);
     // not sure, try URL then document
-    return getYouTubeVideoIDFromURL(url) || getYouTubeVideoIDFromDocument(document);
+    return getYouTubeVideoIDFromURL(url) || getYouTubeVideoIDFromDocument(document, false);
 }
 
 function getYouTubeVideoIDFromDocument(document: Document, hideIcon = true): string | boolean {
diff --git a/src/utils.ts b/src/utils.ts
index cbbf03a3..e3c612bc 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -21,6 +21,10 @@ export default class Utils {
         "popup.css"
     ];
 
+    /* Used for waitForElement */
+    waitingMutationObserver:MutationObserver = null;
+    waitingElements: { selector: string, callback: (element: Element) => void }[] = [];
+
     constructor(backgroundScriptContainer: BackgroundScriptContainer = null) {
         this.backgroundScriptContainer = backgroundScriptContainer;
     }
@@ -29,6 +33,41 @@ export default class Utils {
         return GenericUtils.wait(condition, timeout, check);
     }
 
+    /* Uses a mutation observer to wait asynchronously */
+    async waitForElement(selector: string): Promise<Element> {
+        return await new Promise((resolve) => {
+            this.waitingElements.push({
+                selector,
+                callback: resolve
+            });
+
+            if (!this.waitingMutationObserver) {
+                this.waitingMutationObserver = new MutationObserver(() => {
+                    const foundSelectors = [];
+                    for (const { selector, callback } of this.waitingElements) {
+                        const element = document.querySelector(selector);
+                        if (element) {
+                            callback(element);
+                            foundSelectors.push(selector);
+                        }
+                    }
+
+                    this.waitingElements = this.waitingElements.filter((element) => !foundSelectors.includes(element.selector));
+                    
+                    if (this.waitingElements.length === 0) {
+                        this.waitingMutationObserver.disconnect();
+                        this.waitingMutationObserver = null;
+                    }
+                });
+
+                this.waitingMutationObserver.observe(document.body, {
+                    childList: true,
+                    subtree: true
+                });
+            }
+        });
+    }
+
     containsPermission(permissions: chrome.permissions.Permissions): Promise<boolean> {
         return new Promise((resolve) => {
             chrome.permissions.contains(permissions, resolve)
@@ -331,9 +370,9 @@ export default class Utils {
 
     findReferenceNode(): HTMLElement {
         const selectors = [
-            "#player-container-id",
             "#movie_player",
             "#c4-player", // Channel Trailer
+            "#player-container", // Preview on hover
             "#main-panel.ytmusic-player-page", // YouTube music
             "#player-container .video-js", // Invidious
             ".main-video-section > .video-container" // Cloudtube  
@@ -347,7 +386,7 @@ export default class Utils {
                 let index = 1;
 
                 //find the child that is the video player (sometimes it is not the first)
-                while (index < player.children.length && (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed"))) {
+                while (index < player.children.length && (!referenceNode.classList?.contains("html5-video-player") || !referenceNode.classList?.contains("ytp-embed"))) {
                     referenceNode = player.children[index] as HTMLElement;
 
                     index++;