feat: raise playback-speed cap to 100x

src/components/video-editor/SettingsPanel.tsx

@@ -89,6 +89,8 @@ import type {
 import {
 	DEFAULT_WEBCAM_MIRRORED,
 	DEFAULT_WEBCAM_REACTIVE_ZOOM,
+	MAX_NATIVE_PLAYBACK_RATE,
+	MAX_PLAYBACK_SPEED,
 	MAX_ZOOM_SCALE,
 	MIN_ZOOM_SCALE,
 	ROTATION_3D_PRESET_ORDER,
@@ -1214,7 +1216,9 @@ export function SettingsPanel({
 									<CustomSpeedInput
 										value={selectedSpeedValue ?? 1}
 										onChange={(val) => onSpeedChange?.(val)}
-										onError={() => toast.error(t("speed.maxSpeedError"))}
+										onError={() =>
+											toast.error(t("speed.maxSpeedError", { max: MAX_PLAYBACK_SPEED }))
+										}
 									/>
 								) : (
 									<div className="flex items-center gap-1 opacity-40">
@@ -1225,6 +1229,13 @@ export function SettingsPanel({
 									</div>
 								)}
 							</div>
+							{selectedSpeedId &&
+								selectedSpeedValue != null &&
+								selectedSpeedValue > MAX_NATIVE_PLAYBACK_RATE && (
+									<p className="px-1 text-[10px] leading-snug text-slate-500">
+										{t("speed.previewFrameSteppingHint", { native: MAX_NATIVE_PLAYBACK_RATE })}
+									</p>
+								)}
 							{selectedSpeedId && (
 								<Button
 									onClick={() => selectedSpeedId && onSpeedDelete?.(selectedSpeedId)}

src/components/video-editor/VideoPlayback.tsx

@@ -62,6 +62,7 @@ import {
 	getZoomScale,
 	isRotation3DIdentity,
 	lerpRotation3D,
+	MAX_NATIVE_PLAYBACK_RATE,
 	rotation3DPerspective,
 	type SpeedRegion,
 	type TrimRegion,
@@ -336,6 +337,11 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const scrubEndTimerRef = useRef<number | null>(null);
 		const [isScrubbing, setIsScrubbing] = useState(false);
 		const allowPlaybackRef = useRef(false);
+		// Seek-stepping state for speed regions above the native playbackRate cap (16×).
+		const seekSteppingRef = useRef(false);
+		const stepVirtualSecRef = useRef(0);
+		const stepLastTsRef = useRef(0);
+		const stepPrevMutedRef = useRef(false);
 		const lockedVideoDimensionsRef = useRef<{
 			width: number;
 			height: number;
@@ -630,7 +636,9 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					const supplementalAudio = supplementalAudioRef.current;
 					if (supplementalAudio) {
 						supplementalAudio.currentTime = vid.currentTime;
-						supplementalAudio.playbackRate = vid.playbackRate;
+						// vid.playbackRate is already capped at the native ceiling; clamp
+						// defensively so the supplemental track never throws either.
+						supplementalAudio.playbackRate = Math.min(vid.playbackRate, MAX_NATIVE_PLAYBACK_RATE);
 						await supplementalAudio.play().catch(() => {
 							// The main video remains the source of truth for playback state.
 						});
@@ -1136,7 +1144,16 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				speedRegions.find(
 					(region) => currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
 				) ?? null;
-			supplementalAudio.playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+			const activeSpeed = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+
+			// Above the native rate the main preview frame-steps silently; a media
+			// element can't play that fast (setting playbackRate > 16 throws), so mute
+			// the supplemental track by pausing it for the duration of the region.
+			if (activeSpeed > MAX_NATIVE_PLAYBACK_RATE) {
+				supplementalAudio.pause();
+				return;
+			}
+			supplementalAudio.playbackRate = activeSpeed;
 
 			if (!isPlaying) {
 				supplementalAudio.pause();
@@ -1227,6 +1244,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				isScrubbingRef,
 				scrubEndTimerRef,
 				onScrubChange: (scrubbing) => setIsScrubbing(scrubbing),
+				seekSteppingRef,
+				stepVirtualSecRef,
+				stepLastTsRef,
+				stepPrevMutedRef,
 			});
 
 			video.addEventListener("play", handlePlay);
@@ -1826,7 +1847,11 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				speedRegions.find(
 					(region) => currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
 				) ?? null;
-			webcamVideo.playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+			// Cap the (silent) webcam element at the native rate so playbackRate never throws.
+			webcamVideo.playbackRate = Math.min(
+				activeSpeedRegion ? activeSpeedRegion.speed : 1,
+				MAX_NATIVE_PLAYBACK_RATE,
+			);
 
 			if (!isPlaying) {
 				webcamVideo.pause();
@@ -1836,7 +1861,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				return;
 			}
 
-			if (Math.abs(webcamVideo.currentTime - currentTime) > 0.15) {
+			// While the main video is seek-stepping (>16×), the playhead advances far
+			// faster than this 16×-capped element can seek; resyncing every frame would
+			// keep its decoder perpetually mid-seek and freeze it — the same failure the
+			// main video's throttle fixes. Let the muted webcam play best-effort at the
+			// clamped rate instead (a small lag is fine).
+			if (!seekSteppingRef.current && Math.abs(webcamVideo.currentTime - currentTime) > 0.15) {
 				webcamVideo.currentTime = currentTime;
 			}
 

src/components/video-editor/customPlaybackSpeed.test.ts

@@ -41,10 +41,27 @@ describe("parseCustomPlaybackSpeedInput", () => {
 		});
 	});
 
-	it("rejects speeds above the editor maximum", () => {
+	it("accepts the maximum editor speed", () => {
+		expect(parseCustomPlaybackSpeedInput("100")).toEqual({
+			status: "valid",
+			draft: "100",
+			speed: 100,
+		});
+	});
+
+	it("accepts high speeds that exceed the native preview rate", () => {
+		// 16.1× was rejected under the old 16× cap; it must now be valid.
 		expect(parseCustomPlaybackSpeedInput("16.1")).toEqual({
-			status: "too-fast",
+			status: "valid",
 			draft: "16.1",
+			speed: 16.1,
+		});
+	});
+
+	it("rejects speeds above the editor maximum", () => {
+		expect(parseCustomPlaybackSpeedInput("100.1")).toEqual({
+			status: "too-fast",
+			draft: "100.1",
 		});
 	});
 });

src/components/video-editor/types.ts

@@ -368,8 +368,11 @@ export const DEFAULT_CROP_REGION: CropRegion = {
 export type PlaybackSpeed = number;
 
 export const MIN_PLAYBACK_SPEED = 0.1;
-// Above 16x the decoder can't keep up and the playhead stalls during preview.
-export const MAX_PLAYBACK_SPEED = 16;
+export const MAX_PLAYBACK_SPEED = 100;
+// Chromium hard-caps HTMLMediaElement.playbackRate at 16 (setting more throws
+// NotSupportedError). At or below this, preview plays natively; above it, preview
+// frame-steps by seeking and audio export uses an offline pitch-preserved stretch.
+export const MAX_NATIVE_PLAYBACK_RATE = 16;
 
 export function clampPlaybackSpeed(speed: number): PlaybackSpeed {
 	return Math.round(Math.min(MAX_PLAYBACK_SPEED, Math.max(MIN_PLAYBACK_SPEED, speed)) * 100) / 100;