fix: dependency arrays & marking

Author: martastain

frontend/src/containers/VideoPlayer/Trackbar.jsx

@@ -2,6 +2,8 @@ import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 
 import { Canvas, Navbar } from '/src/components';
 
+const MARK_SIZE = 7;
+
 const Trackbar = ({
   duration,
   currentTime,
@@ -72,8 +74,10 @@ const Trackbar = ({
       markInX = (markIn / duration) * width;
       ctx.strokeStyle = 'green';
       ctx.beginPath();
-      ctx.moveTo(markInX, 0);
-      ctx.lineTo(markInX, height);
+      ctx.moveTo(markInX, height - MARK_SIZE);
+      ctx.lineTo(markInX, height - 1);
+      ctx.lineTo(markInX - MARK_SIZE, height - 1);
+      ctx.lineTo(markInX, height - MARK_SIZE);
       ctx.stroke();
     }
 
@@ -82,8 +86,10 @@ const Trackbar = ({
       markOutX = (markOut / duration) * width + frameWidth;
       ctx.strokeStyle = 'red';
       ctx.beginPath();
-      ctx.moveTo(markOutX, 0);
-      ctx.lineTo(markOutX, height);
+      ctx.moveTo(markOutX, height - MARK_SIZE);
+      ctx.lineTo(markOutX, height - 1);
+      ctx.lineTo(markOutX + MARK_SIZE, height - 1);
+      ctx.lineTo(markOutX, height - MARK_SIZE);
       ctx.stroke();
     }
 

frontend/src/containers/VideoPlayer/VideoPlayerBody.jsx

@@ -128,7 +128,7 @@ const VideoPlayerBody = ({ ...props }) => {
   }, [videoRef]);
 
   // Position
-  //
+
   const updatePos = () => {
     const video = videoRef.current;
     const atFrame = time2frames(video.currentTime, props.frameRate);
@@ -139,7 +139,7 @@ const VideoPlayerBody = ({ ...props }) => {
     const markOutFrame =
       time2frames(markOutRef.current, props.frameRate) || durFramesRef.current - 1;
 
-    if (atFrame === markOutFrame) {
+    if (atFrame >= markOutFrame && atFrame < markOutFrame + 4) {
       videoRef.current.currentTime = markInRef.current || 0;
       videoRef.current.play();
     }
@@ -157,7 +157,7 @@ const VideoPlayerBody = ({ ...props }) => {
 
   useEffect(() => {
     updatePosMon();
-  }, [videoRef, isPlaying, loop]);
+  }, [videoRef, isPlaying]);
 
   const seekToFrame = (frame) => {
     const videoElement = videoRef.current;

frontend/src/pages/AssetEditor/Preview.jsx

@@ -55,7 +55,6 @@ const Preview = ({ assetData, setAssetData }) => {
   );
   const frameRate = useMemo(() => {
     const fps = assetData['video/fps_f'] || 25.0;
-    //console.log('fps', fps)
     return fps;
   }, [assetData]);
 
@@ -82,7 +81,7 @@ const Preview = ({ assetData, setAssetData }) => {
     if (!arrayEquals(existingSubclips, subclips)) {
       patchAsset({ subclips: subclips.length ? subclips : null });
     }
-  }, [subclips, assetData]);
+  }, [subclips]);
 
   // Dropdown menu options for poster frame
 
@@ -109,7 +108,6 @@ const Preview = ({ assetData, setAssetData }) => {
   const onSetMarks = () => {
     // Set asset mark_in and mark_out values
     // (content primary selection)
-    console.log('Setting margs');
     patchAsset({
       mark_in: selection.mark_in || null,
       mark_out: selection.mark_out || null,
@@ -127,6 +125,11 @@ const Preview = ({ assetData, setAssetData }) => {
       return;
     }
 
+    if (selection.mark_out - selection.mark_in < 2) {
+      toast.error('Region must be at least 2 frames long');
+      return;
+    }
+
     setSubclips((subclips) => [
       ...subclips,
       { title: `SubClip ${subclips.length + 1}`, ...selection },

frontend/src/pages/AssetEditor/Subclip.jsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { toast } from 'react-toastify';
 import { Timecode } from '@wfoxall/timeframe';
 
 import { InputText, Button } from '/src/components';
@@ -65,29 +66,45 @@ const Subclip = ({
   const startTC = new Timecode(Math.floor(mark_in * fps), fps);
   const endTC = new Timecode(Math.floor(mark_out * fps), fps);
 
+  const updateSubclip = () => {
+    if (!(selection.mark_in && selection.mark_out)) {
+      toast.error('Please select a region first');
+      return;
+    }
+
+    if (selection.mark_in >= selection.mark_out) {
+      toast.error('Please select a valid region');
+      return;
+    }
+
+    if (selection.mark_out - selection.mark_in < 2) {
+      toast.error('Region must be at least 2 frames long');
+      return;
+    }
+    onSetMarks(selection);
+  };
+
+  const showSubclip = () => {
+    setSelection({
+      mark_in: mark_in || null,
+      mark_out: mark_out || null,
+    });
+  };
+
   return (
     <SubclipContainer>
       <h3>
         {startTC.toString()} - {endTC.toString()}
       </h3>
       <SubclipRow>
-        <InputText value={title} onChange={onTitleChange} style={{ flex: 1 }} />
-        <Button icon="delete" tooltip="Delete subclip" onClick={() => onRemove()} />
         <Button
           icon="screenshot_region"
           tooltip="Update subclip from selection"
-          onClick={() => onSetMarks(selection)}
-        />
-        <Button
-          icon="frame_inspect"
-          tooltip="Select region"
-          onClick={() =>
-            setSelection({
-              mark_in: mark_in || null,
-              mark_out: mark_out || null,
-            })
-          }
+          onClick={updateSubclip}
         />
+        <Button icon="delete" tooltip="Delete subclip" onClick={() => onRemove()} />
+        <InputText value={title} onChange={onTitleChange} style={{ flex: 1 }} />
+        <Button icon="frame_inspect" tooltip="Select region" onClick={showSubclip} />
       </SubclipRow>
     </SubclipContainer>
   );