Pause on Watch on YouTube

Author: mgurgel

special-pages/pages/duckplayer/app/components/InfoBar.jsx

@@ -11,6 +11,7 @@ import { SwitchContext, SwitchProvider } from '../providers/SwitchProvider.jsx';
 import { Tooltip } from './Tooltip.jsx';
 import { useSetFocusMode } from './FocusMode.jsx';
 import { useTypedTranslation } from '../types.js';
+import { usePlaybackControl } from './PlaybackControl';
 
 /**
  * @param {object} props
@@ -99,6 +100,7 @@ export function InfoIcon({ debugStyles = false }) {
  */
 function ControlBarDesktop({ embed }) {
     const settingsUrl = useSettingsUrl();
+    const { pauseVideo } = usePlaybackControl();
     const openOnYoutube = useOpenOnYoutubeHandler();
     const { t } = useTypedTranslation();
     const { state } = useContext(SwitchContext);
@@ -120,7 +122,10 @@ function ControlBarDesktop({ embed }) {
                 formfactor={'desktop'}
                 buttonProps={{
                     onClick: () => {
-                        if (embed) openOnYoutube(embed);
+                        if (embed) {
+                            pauseVideo();
+                            openOnYoutube(embed);
+                        }
                     },
                 }}
             >

special-pages/pages/duckplayer/app/components/PlaybackControl.jsx

@@ -0,0 +1,13 @@
+export const EVENT_PLAY = 'ddg-duckplayer-play';
+export const EVENT_PAUSE = 'ddg-duckplayer-pause';
+
+export function usePlaybackControl() {
+    return {
+        playVideo: () => {
+            window.dispatchEvent(new Event(EVENT_PLAY));
+        },
+        pauseVideo: () => {
+            window.dispatchEvent(new Event(EVENT_PAUSE));
+        },
+    };
+}

special-pages/pages/duckplayer/app/components/Player.jsx

@@ -102,6 +102,7 @@ function useIframeEffects(src) {
             features.clickCapture(),
             features.titleCapture(),
             features.mouseCapture(),
+            features.playbackEvents(),
         ];
 
         /**

special-pages/pages/duckplayer/app/features/iframe.js

@@ -3,6 +3,7 @@ import { AutoFocus } from './autofocus.js';
 import { ClickCapture } from './click-capture.js';
 import { TitleCapture } from './title-capture.js';
 import { MouseCapture } from './mouse-capture.js';
+import { PlaybackEvents } from './playback-events.js';
 
 /**
  * Represents an individual piece of functionality in the iframe.
@@ -74,5 +75,11 @@ export function createIframeFeatures(settings) {
         mouseCapture: () => {
             return new MouseCapture();
         },
+        /**
+         * @return {IframeFeature}
+         */
+        playbackEvents: () => {
+            return new PlaybackEvents();
+        },
     };
 }

special-pages/pages/duckplayer/app/features/playback-events.js

@@ -0,0 +1,85 @@
+import { EVENT_PLAY, EVENT_PAUSE } from '../components/PlaybackControl.jsx';
+
+/**
+ * @typedef {import("./iframe").IframeFeature} IframeFeature
+ */
+
+/**
+ * Exposes video element in iframe.
+ *
+ * @implements IframeFeature
+ */
+export class PlaybackEvents {
+    /** @type {MutationObserver} */
+    observer;
+
+    /** @type {[EVENT_PLAY|EVENT_PAUSE, (() => void)][]} */
+    handlers = [];
+
+    destroy() {
+        if (this.observer) this.observer.disconnect();
+
+        this.handlers.forEach(([event, handler]) => {
+            window.removeEventListener(event, handler);
+        });
+    }
+
+    /**
+     * @param {HTMLIFrameElement} iframe
+     */
+    iframeDidLoad(iframe) {
+        const documentBody = iframe.contentWindow?.document?.body;
+
+        if (documentBody) {
+            const videoElement = documentBody.querySelector('video');
+
+            // Check if iframe already contains video
+            if (videoElement) {
+                this.addHandlersToVideo(videoElement);
+            } else {
+                // No video found. Observe iframe's document for changes
+                this.observer = new MutationObserver(this.handleMutation.bind(this));
+
+                this.observer.observe(documentBody, {
+                    childList: true,
+                    subtree: true, // Observe all descendants of the body
+                });
+            }
+        }
+
+        return () => {
+            this.destroy();
+        };
+    }
+
+    /**
+     *
+     * @param {HTMLVideoElement} videoElement
+     */
+    addHandlersToVideo(videoElement) {
+        const playHandler = () => videoElement.play();
+        window.addEventListener(EVENT_PLAY, playHandler);
+        this.handlers.push([EVENT_PLAY, playHandler]);
+
+        const pauseHandler = () => videoElement.pause();
+        window.addEventListener(EVENT_PAUSE, pauseHandler);
+        this.handlers.push([EVENT_PAUSE, pauseHandler]);
+    }
+
+    /**
+     * Mutation handler that checks for a new video element
+     *
+     * @type {MutationCallback}
+     */
+    handleMutation(mutationsList) {
+        for (const mutation of mutationsList) {
+            if (mutation.type === 'childList') {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE && /** @type {HTMLElement} */ (node).tagName === 'VIDEO') {
+                        this.addHandlersToVideo(/** @type {HTMLVideoElement} */ (node));
+                    }
+                });
+            }
+        }
+    }
+}