From 8295688b8ae4b15956c98ac948dc95cb556b82ff Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Mon, 16 Jun 2025 02:24:31 +0300
Subject: [PATCH] fix muted

---
 src/components/VideoPlayer/VideoControls.tsx        |  4 ++--
 src/components/VideoPlayer/VideoControlsBar.tsx     |  6 ++++--
 src/components/VideoPlayer/VideoPlayer.tsx          |  5 ++++-
 .../VideoPlayer/useVideoPlayerController.tsx        | 13 ++++++++-----
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/VideoPlayer/VideoControls.tsx b/src/components/VideoPlayer/VideoControls.tsx
index 91d1ddf..2a95e93 100644
--- a/src/components/VideoPlayer/VideoControls.tsx
+++ b/src/components/VideoPlayer/VideoControls.tsx
@@ -318,12 +318,12 @@ const VolumeSlider = ({ width, volume, onVolumeChange }: any) => {
   );
 };
 
-export const VolumeControl = ({ sliderWidth, onVolumeChange, volume }: any) => {
+export const VolumeControl = ({ sliderWidth, onVolumeChange, volume , isMuted, toggleMute}: any) => {
   return (
     <Box
       sx={{ display: "flex", gap: "5px", alignItems: "center", width: "100%" }}
     >
-      <VolumeButton />
+      <VolumeButton isMuted={isMuted} toggleMute={toggleMute} />
       <VolumeSlider
         width={sliderWidth}
         onVolumeChange={onVolumeChange}
diff --git a/src/components/VideoPlayer/VideoControlsBar.tsx b/src/components/VideoPlayer/VideoControlsBar.tsx
index d1ca3e9..5f71340 100644
--- a/src/components/VideoPlayer/VideoControlsBar.tsx
+++ b/src/components/VideoPlayer/VideoControlsBar.tsx
@@ -38,9 +38,11 @@ interface VideoControlsBarProps {
   openSubtitleManager: ()=> void
   subtitleBtnRef: any
   onSelectPlaybackRate: (rate: number)=> void;
+  isMuted: boolean
+  toggleMute: ()=> void
 }
 
-export const VideoControlsBar = ({subtitleBtnRef, showControls, playbackRate, increaseSpeed,decreaseSpeed, isFullScreen, showControlsFullScreen, reloadVideo, onVolumeChange, volume, isPlaying, canPlay, isScreenSmall, controlsHeight, playerRef, duration, progress, togglePlay, toggleFullscreen, extractFrames, openSubtitleManager, onSelectPlaybackRate}: VideoControlsBarProps) => {
+export const VideoControlsBar = ({subtitleBtnRef, showControls, playbackRate, increaseSpeed,decreaseSpeed, isFullScreen, showControlsFullScreen, reloadVideo, onVolumeChange, volume, isPlaying, canPlay, isScreenSmall, controlsHeight, playerRef, duration, progress, togglePlay, toggleFullscreen, extractFrames, openSubtitleManager, onSelectPlaybackRate, isMuted, toggleMute}: VideoControlsBarProps) => {
 
   const showMobileControls = isScreenSmall && canPlay;
 
@@ -93,7 +95,7 @@ export const VideoControlsBar = ({subtitleBtnRef, showControls, playbackRate, in
 
             
 
-            <VolumeControl onVolumeChange={onVolumeChange} volume={volume} sliderWidth={"100px"} />
+            <VolumeControl onVolumeChange={onVolumeChange} volume={volume} sliderWidth={"100px"} isMuted={isMuted} toggleMute={toggleMute} />
             <VideoTime  progress={progress} duration={duration}/>
           </Box>
 
diff --git a/src/components/VideoPlayer/VideoPlayer.tsx b/src/components/VideoPlayer/VideoPlayer.tsx
index 40b659d..73c18b1 100644
--- a/src/components/VideoPlayer/VideoPlayer.tsx
+++ b/src/components/VideoPlayer/VideoPlayer.tsx
@@ -206,13 +206,14 @@ export const VideoPlayer = ({
     status,
     percentLoaded,
     showControlsFullScreen,
-    onSelectPlaybackRate
+    onSelectPlaybackRate,
   } = useVideoPlayerController({
     autoPlay,
     playerRef,
     qortalVideoResource,
     retryAttempts,
     isPlayerInitialized,
+    isMuted
   });
 
   console.log('isFullscreen', isFullscreen)
@@ -753,6 +754,8 @@ export const VideoPlayer = ({
             progress={localProgress}
             openSubtitleManager={openSubtitleManager}
             onSelectPlaybackRate={onSelectPlaybackRate}
+            isMuted={isMuted}
+            toggleMute={toggleMute}
           />
         )}
 
diff --git a/src/components/VideoPlayer/useVideoPlayerController.tsx b/src/components/VideoPlayer/useVideoPlayerController.tsx
index 1b471f1..18f5894 100644
--- a/src/components/VideoPlayer/useVideoPlayerController.tsx
+++ b/src/components/VideoPlayer/useVideoPlayerController.tsx
@@ -24,10 +24,11 @@ interface UseVideoControls {
   qortalVideoResource: QortalGetMetadata;
   retryAttempts?: number;
   isPlayerInitialized: boolean
+  isMuted: boolean
 }
 
 export const useVideoPlayerController = (props: UseVideoControls) => {
-  const { autoPlay,   playerRef, qortalVideoResource, retryAttempts, isPlayerInitialized } = props;
+  const { autoPlay,   playerRef, qortalVideoResource, retryAttempts, isPlayerInitialized, isMuted } = props;
 
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [showControlsFullScreen, setShowControlsFullScreen] = useState(false)
@@ -153,14 +154,16 @@ export const useVideoPlayerController = (props: UseVideoControls) => {
 
   const toggleMute = useCallback(() => {
     try {
+      console.log('toggleMute')
        const ref = playerRef as any;
-    if (!ref.current?.muted) return;
-  
-    ref.current?.muted(!ref.current?.muted)
+    if (!ref.current) return;
+            
+
+    ref.current?.muted(!isMuted)
     } catch (error) {
       console.error('toggleMute', toggleMute)
     }
-  }, []);
+  }, [isMuted]);
 
   const changeVolume = useCallback(
   (delta: number) => {