Merge pull request #443 from AppQuality/UN-384-video-controls-spacing

reviewed spacings of video controls according to figma
AppQuality · Nov 19, 2024 · 38f7f53 · 38f7f53
2 parents 76e7413 + 792550d
commit 38f7f53
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/src/stories/player/parts/controls.tsx b/src/stories/player/parts/controls.tsx
@@ -16,7 +16,8 @@ import useDebounce from "../../../hooks/useDebounce";
 import { CutStart } from "./CutStart";
 
 export const ControlsWrapper = styled.div<WrapperProps>`
-  ${({ showControls }) => showControls ? "position: relative;" : "position: absolute;"}
+  ${({ showControls }) =>
+    showControls ? "position: relative;" : "position: absolute;"}
   bottom: 0;
   left: 0;
   right: 0;
@@ -47,6 +48,7 @@ export const ControlsBar = styled.div`
 const StyledDiv = styled.div`
   display: flex;
   align-items: center;
+  gap: ${({ theme }) => theme.space.xxs};
 `;
 
 const CurrentTimeMarker = styled.div<{
@@ -84,7 +86,7 @@ export const Controls = ({
   const [marks, setMarks] = useState<IBookmark[] | undefined>(bookmarks);
   const [updatedMark, setUpdatedMark] = useState<IBookmark>();
   const progressRef = useRef<HTMLDivElement>(null);
-  const { context, setCurrentTime } = useVideoContext()
+  const { context, setCurrentTime } = useVideoContext();
   const debouncedMark = useDebounce(updatedMark, 500);
   const [cutStart, setCutStart] = useState<number>(0);
 
@@ -228,19 +230,21 @@ export const Controls = ({
           progress={progress}
           handleSkipAhead={handleSkipAhead}
           duration={duration}
-          />
+        />
         {isCutting && <CutStart left={cutStart} />}
         <CurrentTimeMarker left={progress} />
       </ProgressContainer>
 
       <ControlsBar>
-        <StyledDiv style={{ width: "20%", justifyContent: "start" }}>
+        <StyledDiv
+          style={{ width: "20%", justifyContent: "start"}}
+        >
           <AudioButton />
           <TimeLabel current={relCurrentTime} duration={duration} />
         </StyledDiv>
         <ControlsGroupCenter style={{ width: "60%" }} />
 
-        <StyledDiv style={{ width: "20%", justifyContent: "end" }}>
+        <StyledDiv style={{ width: "20%", justifyContent: "end"  }}>
           <Cutter
             onCutHandler={onCutHandler}
             isCutting={isCutting}

diff --git a/src/stories/player/parts/controlsCenterGroup.tsx b/src/stories/player/parts/controlsCenterGroup.tsx
@@ -14,6 +14,7 @@ const StyledDiv = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: ${({ theme }) => theme.space.xxs};
 `;
 
 export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
@@ -45,6 +46,7 @@ export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
   return (
     <StyledDiv {...props}>
       <ControlButton
+        size={"small"}
         onClick={(e) => {
           if (videoRef) {
             videoRef.currentTime = 0;
@@ -55,21 +57,23 @@ export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
         <PreviousIcon />
       </ControlButton>
       <ControlButton
+        size={"small"}
         onClick={(e) => {
           onRewind();
           e.stopPropagation();
         }}
       >
         <RewindIcon />
       </ControlButton>
-      <ControlButton size={"large"} onClick={togglePlay}>
+      <ControlButton onClick={togglePlay}>
         {isPlaying ? (
-          <PauseIcon style={{ width: "24px", height: "24px" }} />
+          <PauseIcon style={{ width: "20px", height: "20px" }} />
         ) : (
-          <PlayIcon style={{ width: "24px", height: "24px" }} />
+          <PlayIcon style={{ width: "20px", height: "20px" }} />
         )}
       </ControlButton>
       <ControlButton
+        size={"small"}
         onClick={(e) => {
           onForward();
           e.stopPropagation();
@@ -78,6 +82,7 @@ export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
         <ForwardIcon />
       </ControlButton>
       <ControlButton
+        size={"small"}
         isPill
         onClick={(e) => {
           const newSpeed = getNextPlaybackRate(playBackRate);