Add keyboard support for esc and seek for imavid (#4726)

voxel51 · Sep 10, 2024 · f53cbb9 · f53cbb9
1 parent ad76f26
commit f53cbb9
Showing 1 changed file with 74 additions and 51 deletions.
diff --git a/app/packages/looker/src/elements/common/actions.ts b/app/packages/looker/src/elements/common/actions.ts
@@ -2,6 +2,7 @@
  * Copyright 2017-2024, Voxel51, Inc.
  */
 
+import { is } from "immutable";
 import { SCALE_FACTOR } from "../../constants";
 import { ImaVidFramesController } from "../../lookers/imavid/controller";
 import {
@@ -553,23 +554,41 @@ export const resetPlaybackRate: Control<VideoState> = {
   },
 };
 
-const seekTo: Control<VideoState> = {
+const seekTo: Control<VideoState | ImaVidState> = {
   title: "Seek to",
   detail: "Seek to 0%, 10%, 20%... of the video",
   shortcut: "0-9",
   eventKeys: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
   action: (update, dispatchEvent, eventKey) => {
-    update(({ duration, config: { frameRate, support }, lockedToSupport }) => {
-      const frameCount = getFrameNumber(duration, duration, frameRate);
-      const total = lockedToSupport ? support[1] - support[0] : frameCount;
-      const base = lockedToSupport ? support[0] : 1;
-
+    update((state: ImaVidState | VideoState) => {
+      const isImavid = (state.config as ImaVidConfig)
+        .frameStoreController as ImaVidFramesController;
+      const frameName = isImavid ? "currentFrameNumber" : "frameNumber";
+      let total = 0;
+      let base = 0;
+      if (isImavid) {
+        const {
+          config: {
+            frameStoreController: { totalFrameCount },
+          },
+          currentFrameNumber,
+        } = state as ImaVidState;
+        total = totalFrameCount;
+        base = currentFrameNumber < totalFrameCount ? currentFrameNumber : 1;
+      } else {
+        const {
+          lockedToSupport,
+          config: { support, frameRate },
+          duration,
+        } = state as VideoState;
+        const frameCount = getFrameNumber(duration, duration, frameRate);
+        total = lockedToSupport ? support[1] - support[0] : frameCount;
+        base = lockedToSupport ? support[0] : 1;
+      }
+      const position = Math.round((parseInt(eventKey, 10) / 10) * total) + base;
       dispatchEvent("options", { showJSON: false });
       return {
-        frameNumber: Math.max(
-          1,
-          Math.round((parseInt(eventKey, 10) / 10) * total) + base
-        ),
+        [frameName]: Math.min(total, Math.max(1, position)),
         options: { showJSON: false },
       };
     });
@@ -594,66 +613,70 @@ export const supportLock: Control<VideoState> = {
   },
 };
 
-const videoEscape: Control<VideoState> = {
+const videoEscape: Control<VideoState | ImaVidState> = {
   title: "Escape context",
   shortcut: "Esc",
   eventKeys: "Escape",
   detail: "Escape the current context",
   alwaysHandle: true,
-  action: (update, dispatchEvent, eventKey) => {
-    update(
-      ({
+  action: (update, dispatchEvent) => {
+    update((state: ImaVidState | VideoState) => {
+      const isImavid = (state.config as ImaVidConfig)
+        .frameStoreController as ImaVidFramesController;
+
+      const frameName = isImavid ? "currentFrameNumber" : "frameNumber";
+
+      const {
         hasDefaultZoom,
         showOptions,
-        frameNumber,
         config: { support },
         options: { showHelp, showJSON, selectedLabels },
         lockedToSupport,
-      }) => {
-        if (showHelp) {
-          dispatchEvent("panels", { showHelp: "close" });
-          return { showHelp: "close" };
-        }
+      } = state as VideoState;
 
-        if (showOptions) {
-          return { showOptions: false };
-        }
+      if (showHelp) {
+        dispatchEvent("panels", { showHelp: "close" });
+        return { showHelp: "close" };
+      }
 
-        if (showJSON) {
-          dispatchEvent("panels", { showJSON: "close" });
-          dispatchEvent("options", { showJSON: false });
-          return { options: { showJSON: false } };
-        }
+      if (showOptions) {
+        return { showOptions: false };
+      }
 
-        if (!lockedToSupport && Boolean(support)) {
-          return {
-            frameNumber: support[0],
-            lockedToSupport: true,
-          };
-        }
+      if (showJSON) {
+        dispatchEvent("panels", { showJSON: "close" });
+        dispatchEvent("options", { showJSON: false });
+        return { options: { showJSON: false } };
+      }
 
-        if (!hasDefaultZoom) {
-          return {
-            setZoom: true,
-          };
-        }
+      if (!lockedToSupport && Boolean(support) && !isImavid) {
+        return {
+          frameNumber: support[0],
+          lockedToSupport: true,
+        };
+      }
 
-        if (frameNumber !== 1) {
-          return {
-            frameNumber: 1,
-            playing: false,
-          };
-        }
+      if (!hasDefaultZoom) {
+        return {
+          setZoom: true,
+        };
+      }
 
-        if (selectedLabels.length) {
-          dispatchEvent("clear");
-          return {};
-        }
+      if (state[frameName] !== 1) {
+        return {
+          [frameName]: 1,
+          playing: false,
+        };
+      }
 
-        dispatchEvent("close");
+      if (selectedLabels.length) {
+        dispatchEvent("clear");
         return {};
       }
-    );
+
+      dispatchEvent("close");
+      return {};
+    });
   },
 };