Merge pull request #549 from storytold/feature/comp/playbar-w-trim

put back the mute button

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

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