From 2acb6825e9fa4d0df4dd4a7c235fde9da8985288 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 23 May 2022 09:16:40 -0400
Subject: [PATCH] Prevent video elements from being mistakenly muted/unmuted

---
 src/video-grid/useMediaStream.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/video-grid/useMediaStream.js b/src/video-grid/useMediaStream.js
index 027df73..15efcff 100644
--- a/src/video-grid/useMediaStream.js
+++ b/src/video-grid/useMediaStream.js
@@ -27,10 +27,21 @@ export function useMediaStream(stream, audioOutputDevice, mute = false) {
     );
 
     if (mediaRef.current) {
+      const mediaEl = mediaRef.current;
+
       if (stream) {
-        mediaRef.current.muted = mute;
-        mediaRef.current.srcObject = stream;
-        mediaRef.current.play();
+        mediaEl.muted = mute;
+        mediaEl.srcObject = stream;
+        mediaEl.play();
+
+        // Unmuting the tab in Safari causes all video elements to be individually
+        // unmuted, so we need to reset the mute state here to prevent audio loops
+        const onVolumeChange = () => {
+          mediaEl.muted = mute;
+        };
+        mediaEl.addEventListener("volumechange", onVolumeChange);
+        return () =>
+          mediaEl.removeEventListener("volumechange", onVolumeChange);
       } else {
         mediaRef.current.srcObject = null;
       }