From f386e12f72e8c2b23d3b41eaeddad628c83ccda0 Mon Sep 17 00:00:00 2001
From: Rob Watson <rob@netflux.io>
Date: Sat, 15 Jan 2022 18:14:16 +0100
Subject: [PATCH] Add option to trigger "selection changed" callback in
 realtime

---
 frontend/src/App.tsx       | 12 ++++++++++--
 frontend/src/HudCanvas.tsx | 11 +++++++----
 frontend/src/Overview.tsx  |  5 ++++-
 frontend/src/Waveform.tsx  | 14 ++++++++------
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6afe307..0f980d2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -214,10 +214,18 @@ function App(): JSX.Element {
   };
 
   // handler called when the selection in the main waveform view is changed.
-  const handleWaveformSelectionChange = (newSelection: Frames) => {
+  const handleWaveformSelectionChange = (
+    newSelection: Frames,
+    final: boolean
+  ) => {
+    if (mediaSet == null) {
+      return;
+    }
+
     setSelection(newSelection);
 
-    if (mediaSet == null) {
+    // only update playback position when the selection is final.
+    if (!final) {
       return;
     }
 
diff --git a/frontend/src/HudCanvas.tsx b/frontend/src/HudCanvas.tsx
index 6cf83c1..d71ff40 100644
--- a/frontend/src/HudCanvas.tsx
+++ b/frontend/src/HudCanvas.tsx
@@ -14,7 +14,7 @@ interface Props {
   styles: Styles;
   position: number | null;
   selection: Selection;
-  onSelectionChange: (selection: Selection) => void;
+  onSelectionChange: (selection: Selection, final: boolean) => void;
 }
 
 enum Mode {
@@ -79,6 +79,10 @@ export const HudCanvas: React.FC<Props> = ({
     };
   }, [mode, newSelection]);
 
+  useEffect(() => {
+    onSelectionChange({ ...newSelection }, mode == Mode.Normal);
+  }, [mode, newSelection]);
+
   // draw the overview HUD
   useEffect(() => {
     requestAnimationFrame(() => {
@@ -279,8 +283,6 @@ export const HudCanvas: React.FC<Props> = ({
       handleEmptySelectionAction();
       return;
     }
-
-    onSelectionChange({ ...newSelection });
   };
 
   const handleEmptySelectionAction = () => {
@@ -289,7 +291,8 @@ export const HudCanvas: React.FC<Props> = ({
         setNewSelection({ ...selection });
         break;
       case EmptySelectionAction.SelectNothing:
-        onSelectionChange({ start: 0, end: 0 });
+        setMode(Mode.Normal);
+        setNewSelection({ start: 0, end: 0 });
         break;
     }
   };
diff --git a/frontend/src/Overview.tsx b/frontend/src/Overview.tsx
index 8eed2e1..a755d82 100644
--- a/frontend/src/Overview.tsx
+++ b/frontend/src/Overview.tsx
@@ -56,7 +56,10 @@ export const Overview: React.FC<Props> = ({
   // handlers
 
   // convert selection change from canvas pixels to frames, and trigger callback.
-  const handleSelectionChange = ({ start, end }: Selection) => {
+  const handleSelectionChange = ({ start, end }: Selection, final: boolean) => {
+    if (!final) {
+      return;
+    }
     onSelectionChange({
       start: Math.round((start / CanvasLogicalWidth) * mediaSet.audioFrames),
       end: Math.round((end / CanvasLogicalWidth) * mediaSet.audioFrames),
diff --git a/frontend/src/Waveform.tsx b/frontend/src/Waveform.tsx
index a2be14a..00d60a2 100644
--- a/frontend/src/Waveform.tsx
+++ b/frontend/src/Waveform.tsx
@@ -10,7 +10,7 @@ interface Props {
   mediaSet: MediaSet;
   position: VideoPosition;
   viewport: Frames;
-  onSelectionChange: (selection: Selection) => void;
+  onSelectionChange: (selection: Selection, final: boolean) => void;
 }
 
 export const CanvasLogicalWidth = 2000;
@@ -91,17 +91,19 @@ export const Waveform: React.FC<Props> = ({
 
   // handlers
 
-  const handleSelectionChange = (selection: Selection) => {
-    setSelectedPixels(selection);
-
+  const handleSelectionChange = (selection: Selection, final: boolean) => {
     const framesPerPixel = (viewport.end - viewport.start) / CanvasLogicalWidth;
     const selectedFrames = {
       start: Math.round(viewport.start + selection.start * framesPerPixel),
       end: Math.round(viewport.start + selection.end * framesPerPixel),
     };
 
-    setSelectedFrames(selectedFrames);
-    onSelectionChange(selectedFrames);
+    if (final) {
+      setSelectedPixels(selection);
+      setSelectedFrames(selectedFrames);
+    }
+
+    onSelectionChange(selectedFrames, final);
   };
 
   // helpers