working on cutscenes

cutsceneEditor/src/components/Controls/Controls.tsx

@@ -0,0 +1,67 @@
+import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
+import { usePlayback } from '../../hooks/usePlayback';
+import styles from './Controls.module.css';
+
+function formatMs(ms: number) {
+  const s = Math.floor(ms / 1000);
+  const frac = Math.floor((ms % 1000) / 10).toString().padStart(2, '0');
+  return `${s}.${frac}s`;
+}
+
+export default function Controls() {
+  usePlayback();
+
+  const { playState, currentTimeMs, setPlayState, setCurrentTime } = useCutsceneStore();
+  const cutscene = useSelectedCutscene();
+
+  const totalMs = cutscene
+    ? Math.max(
+        cutscene.durationMs,
+        cutscene.imageSegments.reduce((m, s) => Math.max(m, s.endMs), 0)
+      ) + cutscene.endFadeOutMs + cutscene.endFadeInMs
+    : 0;
+
+  function play() {
+    if (playState === 'stopped' || currentTimeMs >= totalMs) setCurrentTime(0);
+    setPlayState('playing');
+  }
+
+  function pause() { setPlayState('paused'); }
+  function stop() { setPlayState('stopped'); setCurrentTime(0); }
+
+  function handleScrub(e: React.ChangeEvent<HTMLInputElement>) {
+    const ms = Number(e.target.value);
+    setCurrentTime(ms);
+    if (playState === 'playing') setPlayState('paused');
+  }
+
+  const progress = totalMs > 0 ? currentTimeMs / totalMs : 0;
+
+  return (
+    <div className={styles.controls}>
+      <button className={styles.btn} onClick={stop} title="Stop" disabled={!cutscene}>⏹</button>
+      <button className={styles.btn} onClick={() => setCurrentTime(0)} title="Rewind" disabled={!cutscene}>⏮</button>
+      {playState === 'playing' ? (
+        <button className={`${styles.btn} ${styles.active}`} onClick={pause} title="Pause" disabled={!cutscene}>⏸</button>
+      ) : (
+        <button className={`${styles.btn} ${styles.active}`} onClick={play} title="Play" disabled={!cutscene}>▶</button>
+      )}
+
+      <input
+        className={styles.scrubber}
+        type="range"
+        min={0}
+        max={totalMs || 1}
+        step={16}
+        value={currentTimeMs}
+        onChange={handleScrub}
+        disabled={!cutscene}
+        style={{ '--progress': `${progress * 100}%` } as React.CSSProperties}
+      />
+
+      <div className={styles.time}>
+        {formatMs(currentTimeMs)} / {formatMs(totalMs)}
+      </div>
+    </div>
+  );
+}