fix muted

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}

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>
 

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}
           />
         )}
 

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;
+    if (!ref.current) return;
-  
+            
-    ref.current?.muted(!ref.current?.muted)
+
+    ref.current?.muted(!isMuted)
     } catch (error) {
       console.error('toggleMute', toggleMute)
     }
-  }, []);
+  }, [isMuted]);
 
   const changeVolume = useCallback(
   (delta: number) => {