fix(client): muting / Unmuting the player won't trigger a freeze anymore

src/App.js

@@ -104,6 +104,17 @@ const App = () => {
   const [loading, setLoading] = useState(false);
   const [hasReachedRemoteServer, setHasReachedRemoteServer] = useState(false);
 
+  // Member - Determines whether the audio is currently muted
+  const [muted, setMuted] = useState(true);
+  const toggleMute = () => {
+    const _newMuted = !muted;
+
+    const currentVideo = document.querySelector(`video[data-index="${currentVideoIndex}"]`);
+    currentVideo.muted = _newMuted;
+
+    setMuted(!muted);
+  };
+
   // Member - Saves a { url , title } dictionary for every video discovered
   const [videos, setVideos] = useState([]);
   const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
@@ -128,10 +139,6 @@ const App = () => {
     [videos, blackListUpdater] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  // Member - Determines whether the audio is currently muted
-  const [muted, setMuted] = useState(true);
-  const toggleMute = () => setMuted(!muted);
-
   // Video control - Download the current video
   const download = () => {
     const url = visibleVideos[currentVideoIndex].url;
@@ -298,6 +305,13 @@ const App = () => {
     });
   };
 
+  // Hook - When a new video is focused, update its muted state
+  useEffect(() => {
+    const currentVideo = document.querySelector(`video[data-index="${currentVideoIndex}"]`);
+    if (!currentVideo) return;
+    currentVideo.muted = muted;
+  }, [currentVideoIndex]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Memoized component - Video Feed
   const Feed = useMemo(
     () => {
@@ -316,12 +330,11 @@ const App = () => {
           }
           jumpBackForward={previousVideoIndex !== visibleVideos.length && currentVideoIndex > 1}
           videos={visibleVideos}
-          isMuted={muted}
           onFocusVideo={handleVideoFocus}
         />
       );
     },
-    [muted, visibleVideos] // eslint-disable-line react-hooks/exhaustive-deps
+    [visibleVideos] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // Hook - On mount - Retrieve the locally-stored secret / Attempt to hide the address bar / Retrieve the cache if any

src/components/VideoCard/index.jsx

@@ -1,10 +1,10 @@
 // Dependencies
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useRef } from "react";
 
 // Assets
 import "./index.css";
 
-const VideoCard = ({ index, url, isLoaded, isMuted, refForwarder }) => {
+const VideoCard = ({ index, url, isLoaded, refForwarder }) => {
   const videoRef = useRef(null);
 
   // Toggle play/pause on click
@@ -16,7 +16,7 @@ const VideoCard = ({ index, url, isLoaded, isMuted, refForwarder }) => {
   const forward = useCallback((_ref) => {
     videoRef.current = _ref;
     refForwarder(_ref);
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="video">
@@ -26,9 +26,9 @@ const VideoCard = ({ index, url, isLoaded, isMuted, refForwarder }) => {
         src={isLoaded ? url : null}
         ref={forward}
         onClick={togglePause}
-        muted={isMuted}
         loop={true}
         playsInline={true}
+        muted={true}
         preload="auto"
       />
     </div>

src/components/VideoFeed/index.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 import VideoCard from "../VideoCard";
 import "./index.css";
 
-const VideoFeed = ({ videos, initialIndex, jumpToEnd, jumpBackForward, isMuted, onFocusVideo }) => {
+const VideoFeed = ({ videos, initialIndex, jumpToEnd, jumpBackForward, onFocusVideo }) => {
   // Member - Track the currently-visible video (0-indexed)
   const currentVideoIndex = useRef(0);
 
@@ -146,7 +146,6 @@ const VideoFeed = ({ videos, initialIndex, jumpToEnd, jumpBackForward, isMuted,
           index={k + initialIndex}
           url={videos[k + initialIndex] ? videos[k + initialIndex].url : ""}
           isLoaded={true}
-          isMuted={isMuted}
           refForwarder={saveVideoRef(k)}
         />
       ))}