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(vidEl?.muted || false); + + const toggleMute = ()=>{ + setIsMuted((curr)=>(!curr)); + } + + useEffect(()=>{ + if(vidEl !==null){ + if (isMuted) vidEl.muted = true; + else vidEl.muted = false; + } + },[isMuted, vidEl]); + + return( +