style update to match mombay's design

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

@@ -1,6 +1,5 @@
 import React, {
   useCallback,
-  useEffect,
   useState,
   useRef,
   PointerEvent
@@ -10,15 +9,27 @@ import {
   faPause
 } from "@fortawesome/pro-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, VideoFakeyou } from "components/common";
+import {
+  Button,
+  SelectionBubbles,
+  VideoFakeyou
+} from "components/common";
 import { VideoFakeyouProps } from "../VideoFakeyou/VideoFakeyou";
 
 import './styles.scss'
 
+function roundTo2Dec(floaty:number){
+  return Math.round(floaty*100)/100;
+}
 function fractionToPercentage(fraction:number){
-  return Math.round(fraction * 10000) / 100;
+  return roundTo2Dec(fraction * 100);
+}
+function formatSecondsToHHMMSS(seconds:number){
+  if(seconds < 3600) 
+    return new Date(seconds * 1000).toISOString().substring(14, 19)
+  else
+    return new Date(seconds * 1000).toISOString().slice(11, 19);
 }
-
 interface VideoQuickTrimProps extends VideoFakeyouProps{
   onChange: ()=>void;
 }
@@ -62,6 +73,13 @@ export default function VideoQuickTrim({
     }
   }, []); //END videoRefCallback
 
+  const trimOptions: { [key: string]: number } = {
+    "3s": 3,
+    "5s": 5,
+    "10s": 10,
+    "15s" : 15,
+    "20s" : 20,
+  };
   const trimZoneRef = useRef<HTMLDivElement>(null);
   const playbarRef = useRef<HTMLDivElement>(null);
   const [playpause, setPlaypause] = useState<'playing'|'paused'|'stopped'>('paused');
@@ -70,11 +88,11 @@ export default function VideoQuickTrim({
     isScrubbingTrim,
   }, setState] = useState<TrimState>(initialState);
 
-  const handleChangeTrimDuration = (newTrim: number) =>{
+  const handleChangeTrimDuration = (selected: string) =>{
     setState((curr)=>({
       ...curr,
-      trimDuration: newTrim,
-      trimEnd: curr.trimStart+ newTrim,
+      trimDuration: trimOptions[selected],
+      trimEnd: curr.trimStart+ trimOptions[selected],
     }))
   }
   const handlePlaypause = ()=>{
@@ -107,64 +125,59 @@ export default function VideoQuickTrim({
           }
           
         </div>
-     
-        <div className="playbar" ref={playbarRef}>
-          <div className="trimzone" 
-            ref={trimZoneRef}
-            style={{width: (
-              videoRef.current ? 
-                (trimDuration / videoRef.current.duration * 100) 
-                : 0
-            ) + "%"}}
-            onPointerDown={()=>{
-              if(trimZoneRef.current){
-                trimZoneRef.current.style.cursor = 'grabbing';
-                setState((curr)=>({
-                  ...curr,
-                  isScrubbingTrim: true,
-                }))
-              }
-            }}
-            onPointerUp={()=>{
-              if(trimZoneRef.current) {
-                trimZoneRef.current.style.cursor = 'grab';
-                setState((curr)=>({
-                  ...curr,
-                  isScrubbingTrim: true,
-                }));
-              }
-            }}
-            onPointerMove={(e: PointerEvent<HTMLDivElement>)=>{
-              if(trimZoneRef.current && playbarRef.current && isScrubbingTrim){
-                console.log(fractionToPercentage(
-                  (e.clientX - trimZoneRef.current.getBoundingClientRect().left) / playbarRef.current.getBoundingClientRect().width
-                ) + "%");
-              }
-            }}
-          />
-          <div className="playcursor" style={{left: currentTimePortion+"%"}}/>
-        </div> {/* END of Playbar */}
       </div>{/* END of Video Wrapper */}
-      <div className="d-flex w-100 justify-content-center">
-        <Button label="3s"
-          isActive={trimDuration===3}
-          onClick={()=>handleChangeTrimDuration(3)}
+      <div className="playbar" ref={playbarRef}>
+        <div className="playbar-bg" />
+        <div className="trimzone" 
+          ref={trimZoneRef}
+          style={{width: (
+            videoRef.current ? 
+              (trimDuration / videoRef.current.duration * 100) 
+              : 0
+          ) + "%"}}
+          onPointerDown={()=>{
+            if(trimZoneRef.current){
+              trimZoneRef.current.style.cursor = 'grabbing';
+              setState((curr)=>({
+                ...curr,
+                isScrubbingTrim: true,
+              }))
+            }
+          }}
+          onPointerUp={()=>{
+            if(trimZoneRef.current) {
+              trimZoneRef.current.style.cursor = 'grab';
+              setState((curr)=>({
+                ...curr,
+                isScrubbingTrim: true,
+              }));
+            }
+          }}
+          onPointerMove={(e: PointerEvent<HTMLDivElement>)=>{
+            if(trimZoneRef.current && playbarRef.current && isScrubbingTrim){
+              console.log(fractionToPercentage(
+                (e.clientX - trimZoneRef.current.getBoundingClientRect().left) / (playbarRef.current.getBoundingClientRect().width)
+              ) + "%");
+            }
+          }}
         />
-        <Button label="5s"
-          isActive={trimDuration===5}
-          onClick={()=>handleChangeTrimDuration(5)}
-        />
-        <Button label="10s"
-          isActive={trimDuration===10}
-          onClick={()=>handleChangeTrimDuration(10)}
-        />
-        <Button label="15s"
-          isActive={trimDuration===15}
-          onClick={()=>handleChangeTrimDuration(15)}
-        />
-        <Button label="20s"
-          isActive={trimDuration===20}
-          onClick={()=>handleChangeTrimDuration(20)}
+        <div className="playcursor" style={{left: currentTimePortion+"%"}}/>
+      </div> {/* END of Playbar */}
+
+      <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
+            icon={playpause === 'playing' ? faPause : faPlay}
+            variant="secondary"
+            onClick={handlePlaypause}
+          />
+          <div className="playtime ms-3">
+            <p>{`${formatSecondsToHHMMSS(videoRef.current?.currentTime || 0)} / ${formatSecondsToHHMMSS(videoRef.current?.duration || 0)}`}</p>
+          </div>
+        </div>
+        <SelectionBubbles
+          options={Object.keys(trimOptions)}
+          onSelect={handleChangeTrimDuration}
         />
       </div>
     </div>

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

@@ -1,11 +1,15 @@
 @import "scss/colours.scss";
 
+$playbar-height: 2rem;
+
 .fy-video-quicktrim {
   .video-wrapper{
     position: relative;
     background-color: $bg;
     border-radius: 0.5rem 0.5rem 0 0;
-    border: $panel-inner-border 1px solid;
+    border-top: $panel-inner-border 1px solid;
+    border-left: $panel-inner-border 1px solid;
+    border-right: $panel-inner-border 1px solid;
   }
   .playpause-overlay{
     position: absolute;
@@ -28,9 +32,17 @@
   }
   .playbar{
     position:relative;
-    height: 2rem;
+    height: $playbar-height;
     width: 100%;
-    background-color: rgba(255,255,255,0.6);
+  }
+  .playbar-bg{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top:0;
+    left: 0;
+    background-color: $panel-inner-border;
+    border-radius: 0 0 0.5rem 0.5rem;
   }
   .trimzone{
     position: absolute;
@@ -44,8 +56,8 @@
   .playcursor{
     position: absolute;
     top:0;
-    width: 1px;
-    height: 2rem;
-    background-color: red;
+    width: 0.5rem;
+    height: $playbar-height;
+    background-color: white;
   }
 }