Change prev/next second controls with prev/next segment

This way it matches the keyboard shortcuts. If someone wants to jump back and forth a bit just to go through the source a bit, they can use the prev/next keyframe controls.

Author: rlaphoenix

README.md

@@ -146,7 +146,7 @@ This allows you to preview your Sources in various comparison modes. This should
 try and get the temporal sync aligned with all sources. It allows you to seek through your
 video and make sure the frames line up.
 
-You can zoom, pan, scrub, seek by frame, second, or keyframe. You can copy the shown frame,
+You can zoom, pan, scrub, seek by frame, segment, or keyframe. You can copy the shown frame,
 go fullscreen (in different ways).
 
 The zoom % amount listed on the top right shows you the relative scale of the shown image.
@@ -189,7 +189,7 @@ It contains the following components:
 - Play/Pause: To enable playback of the project preview (note: its slow, film-strip will lag)
 - Playhead: Lists the current project playback timestamp and frame number.
 - Seekbar: Allows you to drag or click to seek across the project.
-- Buttons: These let you seek back or forward by 1 frame, 1 second, or 1 keyframe.
+- Buttons: These let you seek back or forward by 1 frame, 1 segment, or 1 keyframe.
 
 ### Export
 

ui/components/tabs/preview/Controls.tsx

@@ -81,6 +81,8 @@ interface Props {
   tracks: SeekTrack[];
   onJumpKeyframe?: (dir: 1 | -1) => void;
   canKeyframe?: boolean;
+  onJumpSegment?: (dir: 1 | -1) => void;
+  canSegment?: boolean;
   playing?: boolean;
   onTogglePlay?: () => void;
 }
@@ -92,6 +94,8 @@ export function Controls({
   tracks,
   onJumpKeyframe,
   canKeyframe,
+  onJumpSegment,
+  canSegment,
   playing = false,
   onTogglePlay,
 }: Props) {
@@ -100,7 +104,6 @@ export function Controls({
   const seeking = useRef(false);
   const enabled = maxBase > 0;
 
-  const secondFrames = Math.max(1, Math.round(clockFps));
   const step = (delta: number) => setBase(clampNum(base + delta, 0, maxBase));
 
   const nFromX = (clientX: number, rect: DOMRect) =>
@@ -196,17 +199,17 @@ export function Controls({
         )}
         {navBtn(
           <ChevronsLeft className="size-3.5" />,
-          "Back 1 second",
-          () => step(-secondFrames),
-          !enabled,
+          "Previous segment",
+          () => onJumpSegment?.(-1),
+          !canSegment,
         )}
         {navBtn(<ChevronLeft className="size-3.5" />, "Back 1 frame", () => step(-1), !enabled)}
         {navBtn(<ChevronRight className="size-3.5" />, "Forward 1 frame", () => step(1), !enabled)}
         {navBtn(
           <ChevronsRight className="size-3.5" />,
-          "Forward 1 second",
-          () => step(secondFrames),
-          !enabled,
+          "Next segment",
+          () => onJumpSegment?.(1),
+          !canSegment,
         )}
         {navBtn(
           <SkipForward className="size-3.5" />,

ui/components/tabs/preview/PreviewTab.tsx

@@ -59,7 +59,7 @@ export const PreviewTab = forwardRef<PreviewTabHandle, Props>(function PreviewTa
     bands,
   );
 
-  const { jumpKeyframe } = usePreviewKeyboard({
+  const { jumpKeyframe, jumpSegment } = usePreviewKeyboard({
     keyframes,
     shownSource,
     base,
@@ -124,6 +124,8 @@ export const PreviewTab = forwardRef<PreviewTabHandle, Props>(function PreviewTa
           maxBase={maxBase}
           onJumpKeyframe={jumpKeyframe}
           canKeyframe={keyframes.length > 0}
+          onJumpSegment={jumpSegment}
+          canSegment={(shownSource?.segments?.length ?? 0) > 0}
           playing={playing}
           onTogglePlay={togglePlay}
           tracks={sources.map((s, i) => ({

ui/hooks/usePreviewKeyboard.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, type Dispatch, type SetStateAction } from "react";
-import { frameAt, projectFrameOf } from "@/lib/frames";
+import { projectFrameOf } from "@/lib/frames";
 import type { UiSource } from "@/state/AppState";
 
 const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
@@ -23,45 +23,53 @@ export function usePreviewKeyboard({
   active,
   togglePlay,
 }: KeyboardArgs) {
+  const seekTo = useCallback(
+    (targets: Iterable<number>, dir: 1 | -1) => {
+      const sorted = [...new Set(targets)].sort((a, b) => a - b);
+      const target =
+        dir > 0
+          ? sorted.find((b) => b > base)
+          : [...sorted].reverse().find((b) => b < base);
+      if (target != null) setBase(target);
+    },
+    [base, setBase],
+  );
+
   const jumpKeyframe = useCallback(
     (dir: 1 | -1) => {
       if (!keyframes.length) return;
       const segs = shownSource?.segments ?? [];
-      const cur = frameAt(segs, base);
-      if (cur == null) return;
-      let target: number | undefined;
-      if (dir > 0) target = keyframes.find((k) => k > cur);
-      else {
-        const prev = keyframes.filter((k) => k < cur);
-        target = prev.length ? prev[prev.length - 1] : undefined;
+      if (!segs.length) return;
+      let first = maxBase;
+      let last = 0;
+      for (const s of segs) {
+        first = Math.min(first, clamp(s.pos, 0, maxBase));
+        last = Math.max(last, clamp(s.pos + s.len - 1, 0, maxBase));
       }
-      if (target == null) return;
-      const t = projectFrameOf(segs, target);
-      if (t == null) return;
-      setBase(clamp(t, 0, maxBase));
+      const targets = [first, last];
+      for (const k of keyframes) {
+        const t = projectFrameOf(segs, k);
+        if (t != null) targets.push(clamp(t, 0, maxBase));
+      }
+      seekTo(targets, dir);
     },
-    [keyframes, base, shownSource, maxBase, setBase],
+    [keyframes, shownSource, maxBase, seekTo],
   );
 
   const jumpSegment = useCallback(
     (dir: 1 | -1) => {
       const segs = shownSource?.segments ?? [];
       if (!segs.length) return;
-      const bounds = new Set<number>();
-      let lastFrame = 0;
+      const targets: number[] = [];
+      let last = 0;
       for (const s of segs) {
-        bounds.add(clamp(s.pos, 0, maxBase));
-        lastFrame = Math.max(lastFrame, s.pos + s.len - 1);
+        targets.push(clamp(s.pos, 0, maxBase));
+        last = Math.max(last, s.pos + s.len - 1);
       }
-      bounds.add(clamp(lastFrame, 0, maxBase));
-      const sorted = [...bounds].sort((a, b) => a - b);
-      const target =
-        dir > 0
-          ? sorted.find((b) => b > base)
-          : [...sorted].reverse().find((b) => b < base);
-      if (target != null) setBase(target);
+      targets.push(clamp(last, 0, maxBase));
+      seekTo(targets, dir);
     },
-    [shownSource, base, maxBase, setBase],
+    [shownSource, maxBase, seekTo],
   );
 
   useEffect(() => {
@@ -99,5 +107,5 @@ export function usePreviewKeyboard({
     return () => window.removeEventListener("keydown", onKey);
   }, [active, maxBase, jumpKeyframe, jumpSegment, togglePlay, setBase]);
 
-  return { jumpKeyframe };
+  return { jumpKeyframe, jumpSegment };
 }