Simpler alternative. Thanks @shakeyShane

Author: mgurgel

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

@@ -10,76 +10,21 @@ import { EVENT_PLAY, EVENT_PAUSE } from '../components/PlaybackControl.jsx';
  * @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;
+        const document = iframe.contentWindow?.document;
 
-        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();
+        const playHandler = () => document?.querySelector('video')?.play();
         window.addEventListener(EVENT_PLAY, playHandler);
-        this.handlers.push([EVENT_PLAY, playHandler]);
 
-        const pauseHandler = () => videoElement.pause();
+        const pauseHandler = () => document?.querySelector('video')?.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));
-                    }
-                });
-            }
-        }
+        return () => {
+            window.removeEventListener(EVENT_PLAY, playHandler);
+            window.removeEventListener(EVENT_PAUSE, pauseHandler);
+        };
     }
 }