Player improvements

src/stories/player/index.tsx

@@ -57,6 +57,7 @@ const PlayerCore = forwardRef<HTMLVideoElement, PlayerArgs>(
         ) : (
           <FloatingControls
             isPlaying={context.isPlaying}
+            showControls={props.showControls}
             onClick={togglePlay}
           />
         )}

src/stories/player/parts/CutStart.tsx

@@ -0,0 +1,30 @@
+import { styled } from "styled-components";
+
+const Pin = styled.div<{ left: number }>`
+  width: 2px;
+  bottom: 0;
+  left: ${({ left }) => `${left}%`};
+  position: absolute;
+  height: 250%;
+  z-index: 2;
+  background-color: ${({ theme }) => theme.palette.grey[600]};
+  margin-left: -2px; // To not override the current time marker
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: translate(-50%, 0);
+    background-color: ${({ theme }) => theme.palette.grey[600]};
+  }
+`;
+
+const CutStart = ({ left }: { left: number; }) => {
+  return <Pin id="obs-start-pin" left={left} />;
+};
+
+export { CutStart };

src/stories/player/parts/container.tsx

@@ -6,10 +6,12 @@ import { VideoStyle } from "./video";
 
 export const Container = styled.div<WrapperProps>`
   position: relative;
-  ${({ showControls }) => !showControls && `
+  ${({ showControls }) => !showControls ? `
     display: flex;
     flex-direction: column;
     justify-content: center;
+  `: `
+    margin-bottom: 80px;
   `}
   height: 100%;
   width: 100%;

src/stories/player/parts/controls.tsx

@@ -13,6 +13,7 @@ import { TimeLabel } from "./timeLabel";
 import { PlayerTooltip } from "./tooltip";
 import { formatDuration } from "../utils";
 import useDebounce from "../../../hooks/useDebounce";
+import { CutStart } from "./CutStart";
 
 export const ControlsWrapper = styled.div<WrapperProps>`
   ${({ showControls }) => showControls ? "position: relative;" : "position: absolute;"}
@@ -85,6 +86,7 @@ export const Controls = ({
   const progressRef = useRef<HTMLDivElement>(null);
   const { context, setCurrentTime } = useVideoContext()
   const debouncedMark = useDebounce(updatedMark, 500);
+  const [cutStart, setCutStart] = useState<number>(0);
 
   const { reset, isGrabbing, activeBookmark, fromEnd } = useProgressContext();
 
@@ -197,6 +199,13 @@ export const Controls = ({
     }
   }, [debouncedMark, onBookMarkUpdated]);
 
+  useEffect(() => {
+    if (isCutting) {
+      setCutStart(progress);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCutting]);
+
   return (
     <ControlsWrapper
       showControls={showControls}
@@ -219,7 +228,8 @@ export const Controls = ({
           progress={progress}
           handleSkipAhead={handleSkipAhead}
           duration={duration}
-        />
+          />
+        {isCutting && <CutStart left={cutStart} />}
         <CurrentTimeMarker left={progress} />
       </ProgressContainer>
 

src/stories/player/parts/floatingControls.tsx

@@ -9,9 +9,9 @@ export const FloatingContainer = styled.div<WrapperProps>`
   top: 0;
   left: 0;
   right: 0;
-  ${({ isPlaying }) => isPlaying && "display: none;"}
   z-index: 1;
-  height: calc(100% - 80px);
+  ${({ isPlaying }) => isPlaying && "display: none;"}
+  ${({ showControls }) => showControls ? "height: 100%" : "height: calc(100% - 80px)"};
 `;
 
 const PlayIcon = styled(PlayIconComponent)``;
@@ -40,12 +40,13 @@ const ButtonsContainer = styled.div`
 
 export const FloatingControls = (props: {
   isPlaying?: boolean;
+  showControls?: boolean;
   onClick?: () => void;
 }) => {
-  const { isPlaying, onClick } = props;
+  const { isPlaying, showControls, onClick } = props;
 
   return (
-    <FloatingContainer isPlaying={isPlaying} onClick={onClick}>
+    <FloatingContainer isPlaying={isPlaying} showControls={showControls} onClick={onClick}>
       <ButtonsContainer>
         {!isPlaying && (
           <BigButton isPrimary size={"large"}>