Actually fix audio sharing volume control

src/components/party/Stream.js

@@ -6,12 +6,12 @@ import StreamMuteIcon from "../../icons/StreamMuteIcon";
 import Banner from "../Banner";
 
 function Stream({ stream, nickname }) {
-  const [streamVolume, setStreamVolume] = useState(0);
+  const [streamVolume, setStreamVolume] = useState(1);
   const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
     false
   );
+  const [streamMuted, setStreamMuted] = useState(false);
   const audioRef = useRef();
-  const streamMuted = streamVolume === 0;
 
   useEffect(() => {
     if (audioRef.current) {
@@ -21,11 +21,10 @@ function Stream({ stream, nickname }) {
         .play()
         .then(() => {
           // Played fine
-          setStreamVolume(1);
         })
         .catch(() => {
           // Unable to autoplay
-          setStreamVolume(0);
+          setStreamMuted(true);
           setShowStreamInteractBanner(true);
         });
     }
@@ -35,11 +34,11 @@ function Stream({ stream, nickname }) {
     if (audioRef.current) {
       if (streamMuted) {
         audioRef.current.play().then(() => {
-          setStreamVolume(1);
+          setStreamMuted(false);
           setShowStreamInteractBanner(false);
         });
       } else {
-        setStreamVolume(0);
+        setStreamMuted(true);
       }
     }
   }
@@ -47,26 +46,7 @@ function Stream({ stream, nickname }) {
   function handleVolumeChange(event) {
     const volume = parseFloat(event.target.value);
     setStreamVolume(volume);
-    if (showStreamInteractBanner) {
-      audioRef.current.play().then(() => {
-        setShowStreamInteractBanner(false);
-      });
   }
-  }
-
-  // Use an audio context gain node to control volume to go past 100%
-  const audioGainRef = useRef();
-  useEffect(() => {
-    if (stream && !streamMuted) {
-      let audioContext = new AudioContext();
-      let source = audioContext.createMediaStreamSource(stream);
-      let gainNode = audioContext.createGain();
-      gainNode.gain.value = 0;
-      source.connect(gainNode);
-      gainNode.connect(audioContext.destination);
-      audioGainRef.current = gainNode;
-    }
-  }, [stream, streamMuted]);
 
   // Platforms like iOS don't allow you to control audio volume
   // Detect this by trying to change the audio volume
@@ -74,13 +54,42 @@ function Stream({ stream, nickname }) {
     true
   );
   useEffect(() => {
-    if (audioRef.current) {
-      const prevVolume = audioRef.current.volume;
-      audioRef.current.volume = 0.5;
-      setIsVolumeControlAvailable(audioRef.current.volume === 0.5);
-      audioRef.current.volume = prevVolume;
+    let audio = audioRef.current;
+    function checkVolumeControlAvailable() {
+      const prevVolume = audio.volume;
+      // Set volume to 0.5, then check if the value actually stuck 100ms later
+      audio.volume = 0.5;
+      setTimeout(() => {
+        setIsVolumeControlAvailable(audio.volume === 0.5);
+        audio.volume = prevVolume;
+      }, [100]);
     }
-  }, [stream]);
+
+    audio.addEventListener("playing", checkVolumeControlAvailable);
+
+    return () => {
+      audio.removeEventListener("playing", checkVolumeControlAvailable);
+    };
+  }, []);
+
+  // Use an audio context gain node to control volume to go past 100%
+  const audioGainRef = useRef();
+  useEffect(() => {
+    let audioContext;
+    if (stream && !streamMuted && isVolumeControlAvailable) {
+      audioContext = new AudioContext();
+      let source = audioContext.createMediaStreamSource(stream);
+      let gainNode = audioContext.createGain();
+      gainNode.gain.value = 0;
+      source.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+      audioGainRef.current = gainNode;
+    }
+
+    return () => {
+      audioContext && audioContext.close();
+    };
+  }, [stream, streamMuted, isVolumeControlAvailable]);
 
   useEffect(() => {
     if (audioGainRef.current && audioRef.current) {
@@ -109,12 +118,12 @@ function Stream({ stream, nickname }) {
           <StreamMuteIcon muted={streamMuted} />
         </IconButton>
         <Slider
-          value={streamVolume}
+          value={streamMuted ? 0 : streamVolume}
           min={0}
           max={2}
           step={0.1}
           onChange={handleVolumeChange}
-          disabled={!isVolumeControlAvailable}
+          disabled={!isVolumeControlAvailable || streamMuted}
         />
         {stream && <audio ref={audioRef} playsInline muted={streamMuted} />}
       </Flex>