Thumbnail is showing

Author: mgurgel

injected/src/features/duckplayer-native/duckplayer-native.js

@@ -40,10 +40,10 @@ export async function initDuckPlayerNative(messages) {
 
         // TODO: move to settings.selectors.videoElement/videoElementContainer or something similar
         const videoElementContainer = document.querySelector('#player .html5-video-player');
-        const videoElement = document.querySelector('#player video');
-        if (videoElement && videoElementContainer) {
+        const videoSelector = '#player video';
+        if (videoElementContainer) {
             sideEffects.push(
-                stopVideoFromPlaying(/** @type {HTMLVideoElement} */ (videoElement)),
+                stopVideoFromPlaying(videoSelector),
                 appendThumbnailOverlay(/** @type {HTMLElement} */ (videoElementContainer)),
             );
         }

injected/src/features/duckplayer-native/error-detection.js

@@ -154,7 +154,9 @@ export class ErrorDetection {
         if (node?.nodeType === Node.ELEMENT_NODE) {
             const element = /** @type {HTMLElement} */ (node);
             // Check if element has the error class or contains any children with that class
-            return element.classList.contains('ytp-error') || !!element.querySelector('.ytp-error');
+            const isError = element.classList.contains('ytp-error') || !!element.querySelector('.ytp-error');
+            console.log('Is error?', isError);
+            return isError;
         }
 
         return false;

injected/src/features/duckplayer-native/overlays/thumbnail-overlay.js

@@ -1,6 +1,7 @@
 import mobilecss from './thumbnail-overlay.css';
 import { createPolicy, html } from '../../../dom-utils.js';
 import { customElementsDefine, customElementsGet } from '../../../captured-globals.js';
+import { VideoParams, appendImageAsBackground } from '../../duckplayer/util';
 
 export function registerCustomElements() {
     if (!customElementsGet(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME)) {
@@ -18,6 +19,8 @@ export class DDGVideoThumbnailOverlay extends HTMLElement {
     policy = createPolicy();
     /** @type {boolean} */
     testMode = false;
+    /** @type {HTMLElement} */
+    container;
 
     connectedCallback() {
         this.createMarkupAndStyles();
@@ -32,6 +35,43 @@ export class DDGVideoThumbnailOverlay extends HTMLElement {
         container.innerHTML = this.policy.createHTML(content);
         shadow.append(style, container);
         this.container = container;
+        this.appendThumbnail();
+    }
+
+    appendThumbnail() {
+        const params = VideoParams.forWatchPage(this.getPlayerPageHref());
+        const videoId = params?.id;
+
+        const imageUrl = this.getLargeThumbnailSrc(videoId);
+        console.log('Image url', imageUrl);
+        appendImageAsBackground(this.container, '.ddg-vpo-bg', imageUrl);
+    }
+
+    getLargeThumbnailSrc(videoId) {
+        const url = new URL(`/vi/${videoId}/maxresdefault.jpg`, 'https://i.ytimg.com');
+        return url.href;
+    }
+
+    /**
+     * This is the URL of the page that the user is currently on
+     * It's abstracted so that we can mock it in tests
+     * @return {string}
+     */
+    getPlayerPageHref() {
+        if (this.testMode) {
+            const url = new URL(window.location.href);
+            if (url.hostname === 'www.youtube.com') return window.location.href;
+
+            // reflect certain query params, this is useful for testing
+            if (url.searchParams.has('v')) {
+                const base = new URL('/watch', 'https://youtube.com');
+                base.searchParams.set('v', url.searchParams.get('v') || '');
+                return base.toString();
+            }
+
+            return 'https://youtube.com/watch?v=123';
+        }
+        return window.location.href;
     }
 
     /**
@@ -47,6 +87,10 @@ export class DDGVideoThumbnailOverlay extends HTMLElement {
     }
 }
 
+
+
+
+
 /**
  *
  * @param {HTMLElement} targetElement

injected/src/features/duckplayer-native/pause-video.js

@@ -1,16 +1,17 @@
 /**
  *
- * @param {HTMLVideoElement} videoElement
+ * @param {string} videoSelector
  */
-export function stopVideoFromPlaying(videoElement) {
+export function stopVideoFromPlaying(videoSelector) {
     console.log('Setting up video pause');
     /**
      * Set up the interval - keep calling .pause() to prevent
      * the video from playing
      */
     const int = setInterval(() => {
-        if (videoElement?.isConnected) {
-            videoElement.pause();
+        const video = /** @type {HTMLVideoElement} */ (document.querySelector(videoSelector));
+        if (video?.isConnected) {
+            video.pause();
         }
     }, 10);
 
@@ -21,8 +22,9 @@ export function stopVideoFromPlaying(videoElement) {
     return () => {
         clearInterval(int);
 
-        if (videoElement?.isConnected) {
-            videoElement.play();
+        const video = /** @type {HTMLVideoElement} */ (document.querySelector(videoSelector));
+        if (video?.isConnected) {
+            video.play();
         }
     };
 }