mute button

packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx

@@ -11,6 +11,7 @@ import './styles.scss';
 export interface VideoFakeyouProps{
   wrapperClassName?: string;
   controls?:boolean;
+  muted?:boolean;
   className?:string;
   src?:string;
   mediaToken?: string;
@@ -23,6 +24,7 @@ type Ref = HTMLVideoElement;
 const VideoFakeyou = forwardRef<Ref, VideoFakeyouProps>(({
   wrapperClassName,
   controls,
+  muted,
   className,
   src,
   mediaToken,
@@ -47,6 +49,7 @@ const VideoFakeyou = forwardRef<Ref, VideoFakeyouProps>(({
         {label && <Label label={label}/>}
         <video
           controls={controls}
+          muted={muted}
           ref={ref} 
           key={mediaToken}
           {...{

packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx

@@ -65,6 +65,7 @@ export default function VideoQuickTrim({
 
   const [{playbarWidth, timeCursorOffset}, setPlaybarState] = useState<PlaybarStates>(initialPlaybarState);
   const [playpause, setPlaypause] = useState<'playing'|'paused'|'stopped'>('paused');
+  const [isMuted, setIsMuted] = useState<boolean>(false);
   const [{
     trimStart,
     trimEnd,
@@ -134,12 +135,16 @@ export default function VideoQuickTrim({
       videoRef.current?.pause();
       setPlaypause('paused');
     }
+  }
+  const handleMute = ()=> {
+    
   }
   return (
     <div className="fy-video-quicktrim">
       <div className="video-wrapper">
         <VideoFakeyou
           controls={false}
+          muted={isMuted}
           ref={videoRefCallback}
           {...rest}
         />
@@ -154,7 +159,6 @@ export default function VideoQuickTrim({
               icon={faPause} size="8x"
             />
           }
-          
         </div>
       </div>{/* END of Video Wrapper */}
       <div className="playbar" ref={playbarRefCallback}>
@@ -200,10 +204,17 @@ export default function VideoQuickTrim({
       <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">
           <Button
+            className="button-playpause"
             icon={playpause === 'playing' ? faPause : faPlay}
             variant="secondary"
             onClick={handlePlaypause}
           />
+          <Button
+            className="button-mute"
+            icon={isMuted ? faVolumeSlash : faVolume}
+            variant="secondary"
+            onClick={()=>setIsMuted((curr)=>(!curr))}
+          />
           <div className="playtime ms-3 d-flex">
             <span >
               <p>

packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss

@@ -70,15 +70,26 @@ $playbar-height: 2rem;
     height: $playbar-height;
     background-color: $white;
   }
-  .playtime{
-    span{
-      width: 60px;
+  .playpause-external{
+    .button-playpause{
+      width: 55px;
+      height: 40px;
+      margin-right: 0.5rem;
     }
-    div{
-      width: 10px;
-      margin-left: 3px;
-      margin-right: 5px;
-      text-align: center;
+    .button-mute{
+      width: 40px;
+      height: 40px;
+    }
+    .playtime{
+      span{
+        width: 60px;
+      }
+      div{
+        width: 10px;
+        margin-left: 3px;
+        margin-right: 5px;
+        text-align: center;
+      }
     }
   }
 }