feat: add transport controls and keyboard shortcuts

Centralize seek/play/frame/shuttle in playback helpers, wire the transport bar, and handle global shortcuts from App. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-21 11:08:16 -04:00
parent c13755e5d1
commit 2f25db3cc5
3 changed files with 318 additions and 5 deletions
--- a/src/lib/transport/playback.ts
+++ b/src/lib/transport/playback.ts
@@ -0,0 +1,116 @@
+import { session } from '$lib/stores/videoSession.svelte';
+
+export function seekTo(time: number) {
+  const clamped = Math.max(0, Math.min(time, session.duration));
+  session.currentTime = clamped;
+  const videoEl = document.querySelector('video');
+  if (videoEl) {
+    videoEl.currentTime = clamped;
+  }
+}
+
+export function seekBy(seconds: number) {
+  seekTo(session.currentTime + seconds);
+}
+
+export function togglePlayPause() {
+  const videoEl = document.querySelector('video');
+  if (!videoEl) return;
+  if (videoEl.paused) {
+    void videoEl.play();
+  } else {
+    videoEl.pause();
+  }
+}
+
+export function stepFrame(direction: 1 | -1) {
+  const videoEl = document.querySelector('video');
+  if (videoEl && !videoEl.paused) {
+    videoEl.pause();
+  }
+  seekTo(session.currentTime + direction * (1 / session.fps));
+}
+
+export function jumpKeyframe(direction: 1 | -1) {
+  if (session.keyframePositions.length === 0) return;
+  const positions = session.keyframePositions;
+
+  if (direction > 0) {
+    const next = positions.find((p) => p > session.currentTime + 0.01);
+    if (next !== undefined) seekTo(next);
+  } else {
+    const prev = [...positions].reverse().find((p) => p < session.currentTime - 0.01);
+    if (prev !== undefined) seekTo(prev);
+  }
+}
+
+export function adjustShuttle(dir: 1 | -1, shuttleRate: number): number {
+  const videoEl = document.querySelector('video');
+  if (!videoEl) return shuttleRate;
+
+  const nextRate = Math.max(0.25, Math.min(4, shuttleRate + dir * 0.5));
+  videoEl.playbackRate = nextRate;
+  if (videoEl.paused) {
+    void videoEl.play();
+  }
+  return nextRate;
+}
+
+export type TransportKeyAction =
+  | 'play-pause'
+  | 'frame-back'
+  | 'frame-forward'
+  | 'keyframe-back'
+  | 'keyframe-forward'
+  | 'seek-back-5'
+  | 'seek-forward-5'
+  | 'seek-back-1'
+  | 'seek-forward-1'
+  | 'mark-in'
+  | 'mark-out';
+
+export function runTransportAction(
+  action: TransportKeyAction,
+  markIn: (time: number) => void,
+  markOut: (time: number) => void
+) {
+  switch (action) {
+    case 'play-pause':
+      togglePlayPause();
+      break;
+    case 'frame-back':
+      stepFrame(-1);
+      break;
+    case 'frame-forward':
+      stepFrame(1);
+      break;
+    case 'keyframe-back':
+      jumpKeyframe(-1);
+      break;
+    case 'keyframe-forward':
+      jumpKeyframe(1);
+      break;
+    case 'seek-back-5':
+      seekBy(-5);
+      break;
+    case 'seek-forward-5':
+      seekBy(5);
+      break;
+    case 'seek-back-1':
+      seekBy(-1);
+      break;
+    case 'seek-forward-1':
+      seekBy(1);
+      break;
+    case 'mark-in':
+      markIn(session.currentTime);
+      break;
+    case 'mark-out':
+      markOut(session.currentTime);
+      break;
+    default: {
+      const _exhaustive: never = action;
+      void _exhaustive;
+    }
+  }
+}