Duck Player Native: Mute all elements (#1779)

Author: mgurgel

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

@@ -29,3 +29,41 @@ export function stopVideoFromPlaying(videoSelector) {
         }
     };
 }
+
+const MUTE_ELEMENTS_QUERY = 'audio, video';
+
+/**
+ * Mute all audio and video elements
+ *
+ * @returns {() => void} A function that allows the elements to be unmuted
+ */
+export function muteAllElements() {
+    /**
+     * Set up the interval
+     */
+    const int = setInterval(() => {
+        /** @type {(HTMLAudioElement | HTMLVideoElement)[]} */
+        const elements = Array.from(document.querySelectorAll(MUTE_ELEMENTS_QUERY));
+        elements.forEach((element) => {
+            if (element?.isConnected) {
+                element.muted = true;
+            }
+        });
+    }, 10);
+
+    /**
+     * To clean up, we need to stop the interval
+     * and then call .play() on the original element, if it's still connected
+     */
+    return () => {
+        clearInterval(int);
+
+        /** @type {(HTMLAudioElement | HTMLVideoElement)[]} */
+        const elements = Array.from(document.querySelectorAll(MUTE_ELEMENTS_QUERY));
+        elements.forEach((element) => {
+            if (element?.isConnected) {
+                element.muted = false;
+            }
+        });
+    };
+}

injected/src/features/duckplayer-native/sub-features/duck-player-native-youtube.js

@@ -1,7 +1,7 @@
 import { Logger, SideEffects } from '../../duckplayer/util.js';
 import { muteAudio } from '../mute-audio.js';
 import { pollTimestamp } from '../get-current-timestamp.js';
-import { stopVideoFromPlaying } from '../pause-video.js';
+import { stopVideoFromPlaying, muteAllElements } from '../pause-video.js';
 import { showThumbnailOverlay } from '../overlays/thumbnail-overlay.js';
 
 /**
@@ -86,6 +86,7 @@ export class DuckPlayerNativeYoutube {
 
             if (pause) {
                 this.sideEffects.add('stopping video from playing', () => stopVideoFromPlaying(videoElement));
+                this.sideEffects.add('muting all elements', () => muteAllElements());
                 this.sideEffects.add('appending thumbnail', () => {
                     const clickHandler = () => {
                         this.messages.notifyOverlayDismissed();
@@ -95,6 +96,7 @@ export class DuckPlayerNativeYoutube {
                 });
             } else {
                 this.sideEffects.destroy('stopping video from playing');
+                this.sideEffects.destroy('muting all elements');
                 this.sideEffects.destroy('appending thumbnail');
             }
         }