Allow decimal custom playback speeds

Author: qinny

src/components/video-editor/CustomSpeedInput.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { CustomSpeedInput } from "./CustomSpeedInput";
+
+function TestHarness({
+	initialValue,
+	onError = vi.fn(),
+}: {
+	initialValue: number;
+	onError?: () => void;
+}) {
+	const [value, setValue] = useState(initialValue);
+
+	return <CustomSpeedInput value={value} onChange={setValue} onError={onError} />;
+}
+
+describe("CustomSpeedInput", () => {
+	it("shows non-preset decimal values without rounding", () => {
+		render(<CustomSpeedInput value={1.1} onChange={vi.fn()} onError={vi.fn()} />);
+
+		expect((screen.getByRole("spinbutton") as HTMLInputElement).value).toBe("1.1");
+	});
+
+	it("accepts decimal speeds and preserves them after blur", () => {
+		render(<TestHarness initialValue={1.5} />);
+
+		const input = screen.getByRole("spinbutton") as HTMLInputElement;
+		fireEvent.focus(input);
+		fireEvent.change(input, { target: { value: "1.1" } });
+		expect(input.value).toBe("1.1");
+
+		fireEvent.blur(input);
+		expect(input.value).toBe("1.1");
+	});
+
+	it("accepts sub-1 decimal speeds", () => {
+		render(<TestHarness initialValue={1.5} />);
+
+		const input = screen.getByRole("spinbutton") as HTMLInputElement;
+		fireEvent.focus(input);
+		fireEvent.change(input, { target: { value: ".9" } });
+		expect(input.value).toBe(".9");
+
+		fireEvent.blur(input);
+		expect(input.value).toBe("0.9");
+	});
+
+	it("rejects values above the maximum", () => {
+		const onError = vi.fn();
+		render(<CustomSpeedInput value={1.1} onChange={vi.fn()} onError={onError} />);
+
+		const input = screen.getByRole("spinbutton") as HTMLInputElement;
+		fireEvent.focus(input);
+		fireEvent.change(input, { target: { value: "16.01" } });
+
+		expect(onError).toHaveBeenCalledTimes(1);
+		expect(input.value).toBe("1.1");
+	});
+});

src/components/video-editor/CustomSpeedInput.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useState } from "react";
+import { clampPlaybackSpeed, MAX_PLAYBACK_SPEED, MIN_PLAYBACK_SPEED, SPEED_OPTIONS } from "./types";
+
+interface CustomSpeedInputProps {
+	value: number;
+	onChange: (val: number) => void;
+	onError: () => void;
+}
+
+export function CustomSpeedInput({ value, onChange, onError }: CustomSpeedInputProps) {
+	const isPreset = SPEED_OPTIONS.some((option) => option.speed === value);
+	const [draft, setDraft] = useState<string | null>(null);
+	const display = isPreset ? "" : String(clampPlaybackSpeed(value));
+
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const nextDraft = e.target.value;
+			if (nextDraft === "") {
+				setDraft("");
+				return;
+			}
+			if (!/^\d*\.?\d{0,2}$/.test(nextDraft)) {
+				return;
+			}
+
+			const parsed = Number(nextDraft);
+			if (Number.isFinite(parsed) && parsed > MAX_PLAYBACK_SPEED) {
+				onError();
+				return;
+			}
+
+			setDraft(nextDraft);
+			if (Number.isFinite(parsed) && parsed >= MIN_PLAYBACK_SPEED) {
+				onChange(clampPlaybackSpeed(parsed));
+			}
+		},
+		[onChange, onError],
+	);
+
+	return (
+		<div className="flex items-center gap-1">
+			<input
+				type="number"
+				inputMode="decimal"
+				min={MIN_PLAYBACK_SPEED}
+				max={MAX_PLAYBACK_SPEED}
+				step={0.01}
+				placeholder="--"
+				value={draft ?? display}
+				onFocus={() => setDraft(display)}
+				onChange={handleChange}
+				onBlur={() => setDraft(null)}
+				onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
+				className="w-12 bg-white/5 border border-white/10 rounded-md px-1 py-0.5 text-[11px] font-semibold text-[#d97706] text-center focus:outline-none focus:border-[#d97706]/40 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+			/>
+			<span className="text-[11px] font-semibold text-slate-500">×</span>
+		</div>
+	);
+}

src/components/video-editor/SettingsPanel.tsx

@@ -53,6 +53,7 @@ import ColorPicker from "../ui/color-picker";
 import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
 import { BlurSettingsPanel } from "./BlurSettingsPanel";
 import { CropControl } from "./CropControl";
+import { CustomSpeedInput } from "./CustomSpeedInput";
 import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
 import type {
 	AnnotationRegion,
@@ -71,7 +72,6 @@ import type {
 } from "./types";
 import {
 	DEFAULT_WEBCAM_SIZE_PRESET,
-	MAX_PLAYBACK_SPEED,
 	MAX_ZOOM_SCALE,
 	MIN_ZOOM_SCALE,
 	ROTATION_3D_PRESET_ORDER,
@@ -80,69 +80,6 @@ import {
 } from "./types";
 import { getFocusBoundsForScale } from "./videoPlayback/focusUtils";
 
-function CustomSpeedInput({
-	value,
-	onChange,
-	onError,
-}: {
-	value: number;
-	onChange: (val: number) => void;
-	onError: () => void;
-}) {
-	const isPreset = SPEED_OPTIONS.some((o) => o.speed === value);
-	const [draft, setDraft] = useState(isPreset ? "" : String(Math.round(value)));
-	const [isFocused, setIsFocused] = useState(false);
-
-	const prevValue = useRef(value);
-	if (!isFocused && prevValue.current !== value) {
-		prevValue.current = value;
-		setDraft(isPreset ? "" : String(Math.round(value)));
-	}
-
-	const handleChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>) => {
-			const digits = e.target.value.replace(/\D/g, "");
-			if (digits === "") {
-				setDraft("");
-				return;
-			}
-			const num = Number(digits);
-			if (num > MAX_PLAYBACK_SPEED) {
-				onError();
-				return;
-			}
-			setDraft(digits);
-			if (num >= 1) onChange(num);
-		},
-		[onChange, onError],
-	);
-
-	const handleBlur = useCallback(() => {
-		setIsFocused(false);
-		if (!draft || Number(draft) < 1) {
-			setDraft(isPreset ? "" : String(Math.round(value)));
-		}
-	}, [draft, isPreset, value]);
-
-	return (
-		<div className="flex items-center gap-1">
-			<input
-				type="text"
-				inputMode="numeric"
-				pattern="[0-9]*"
-				placeholder="--"
-				value={draft}
-				onFocus={() => setIsFocused(true)}
-				onChange={handleChange}
-				onBlur={handleBlur}
-				onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
-				className="w-12 bg-white/5 border border-white/10 rounded-md px-1 py-0.5 text-[11px] font-semibold text-[#d97706] text-center focus:outline-none focus:border-[#d97706]/40"
-			/>
-			<span className="text-[11px] font-semibold text-slate-500">×</span>
-		</div>
-	);
-}
-
 function ZoomFocusCoordInput({
 	percent,
 	onChange,