From 6a0cee76f7b4a654cee24c9d467a3f9d6b332fdc Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Sun, 17 Mar 2024 18:36:28 -0400
Subject: [PATCH] put back the mute button

---
 .../components/ControlBar/ButtonMute.tsx      | 38 +++++++++++++++++++
 .../components/ControlBar/ControlBar.tsx      | 20 +---------
 2 files changed, 40 insertions(+), 18 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/VideoPlayer/components/ControlBar/ButtonMute.tsx

diff --git a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ControlBar/ButtonMute.tsx b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ControlBar/ButtonMute.tsx
new file mode 100644
index 0000000000..d1e5d268c3
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ControlBar/ButtonMute.tsx
@@ -0,0 +1,38 @@
+import React, {
+  useContext,
+  useEffect,
+  useState
+} from "react";
+
+import {
+  faVolumeSlash,
+  faVolume
+} from "@fortawesome/pro-solid-svg-icons";
+
+import { Button } from "components/common";
+import { VideoElementContext } from '../../contexts';
+
+export function ButtonMute (){
+  const vidEl = useContext(VideoElementContext);
+  const [isMuted, setIsMuted] = useState<boolean>(vidEl?.muted || false);
+
+  const toggleMute = ()=>{
+    setIsMuted((curr)=>(!curr));
+  }
+
+  useEffect(()=>{
+    if(vidEl !==null){
+      if (isMuted) vidEl.muted = true;
+      else vidEl.muted = false;
+    }
+  },[isMuted, vidEl]);
+
+  return(
+    <Button
+      className="button-mute"
+      icon={ isMuted ? faVolumeSlash : faVolume}
+      variant="secondary"
+      onClick={toggleMute}
+    />
+  )
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ControlBar/ControlBar.tsx b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ControlBar/ControlBar.tsx
index a589010155..d16d2b9117 100644
--- a/packages/fakeyou.com/src/components/common/VideoPlayer/components/ControlBar/ControlBar.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoPlayer/components/ControlBar/ControlBar.tsx
@@ -1,9 +1,9 @@
 import React, { 
 } from 'react';
 
-// import { SelectionBubbles } from "components/common";
 import { STATE_STATUSES } from "../../reducer";
 import { ButtonPlaypause } from './ButtonPlaypause';
+import { ButtonMute } from './ButtonMute';
 import { LabelTimeDuration } from  "./LabelTimeDuration"
 import { LoadingDots } from '../LoadingDots';
 export const ControlBar = ({
@@ -21,25 +21,9 @@ export const ControlBar = ({
       <div className="d-flex w-100 justify-content-between mt-3 flex-wrap">
         <div className="playpause-external d-flex align-items-center flex-wrap mb-2">
           <ButtonPlaypause />
-          {/* <Button
-            className="button-repeat"
-            icon={faArrowsRepeat}
-            variant={isRepeatOn ? "primary":"secondary"}
-            onClick={()=>dispatchCompState({type:ACTION_TYPES.TOGGLE_REPEAT})}
-          /> */}
-          {/* <Button
-            className="button-mute"
-            icon={isMuted ? faVolumeSlash : faVolume}
-            variant="secondary"
-            onClick={()=>dispatchCompState({type:ACTION_TYPES.TOGGLE_MUTE})}
-          /> */}
+          <ButtonMute />
         </div>
         <LabelTimeDuration />
-        {/* <SelectionBubbles
-          options={Object.keys(TRIM_OPTIONS)}
-          onSelect={handleSetTrimDuration}
-          selectedStyle="outline"
-        /> */}
       </div>
     );
   }