Add Waveform as Background of the Trim Track - Easier to size the Trim

src/components/video-editor/SettingsPanel.tsx

@@ -1,5 +1,6 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import {
+	Brackets,
 	Bug,
 	Crop,
 	Download,
@@ -258,6 +259,8 @@ interface SettingsPanelProps {
 	onShadowCommit?: () => void;
 	showBlur?: boolean;
 	onBlurChange?: (showBlur: boolean) => void;
+	showTrimWaveform?: boolean;
+	onTrimWaveformChange?: (show: boolean) => void;
 	motionBlurAmount?: number;
 	onMotionBlurChange?: (amount: number) => void;
 	onMotionBlurCommit?: () => void;
@@ -343,7 +346,7 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
 	{ depth: 6, label: "5×" },
 ];
 
-type SettingsPanelMode = "background" | "effects" | "layout" | "cursor" | "export";
+type SettingsPanelMode = "background" | "effects" | "layout" | "cursor" | "export" | "timeline";
 
 const MP4_EXPORT_SHORT_SIDES = {
 	medium: 720,
@@ -389,6 +392,8 @@ export function SettingsPanel({
 	onShadowCommit,
 	showBlur,
 	onBlurChange,
+	showTrimWaveform = false,
+	onTrimWaveformChange,
 	motionBlurAmount = 0,
 	onMotionBlurChange,
 	onMotionBlurCommit,
@@ -603,6 +608,7 @@ export function SettingsPanel({
 		{ id: "background", label: t("background.title"), icon: Palette },
 		{ id: "effects", label: t("effects.title"), icon: SlidersHorizontal },
 		{ id: "layout", label: t("layout.title"), icon: LayoutPanelTop, disabled: !hasWebcam },
+		{ id: "timeline", label: t("timeline.title"), icon: Brackets },
 		...(hasCursorPanel
 			? [
 					{
@@ -624,8 +630,10 @@ export function SettingsPanel({
 			: selectedSpeedId
 				? t("speed.playbackSpeed")
 				: t("trim.deleteRegion")
-		: ([...panelModes, exportPanelMode].find((mode) => mode.id === activePanelMode)?.label ??
-			t("background.title"));
+		: activePanelMode === "timeline"
+			? t("timeline.title")
+			: ([...panelModes, exportPanelMode].find((mode) => mode.id === activePanelMode)?.label ??
+				t("background.title"));
 
 	const handleDeleteClick = () => {
 		if (selectedZoomId && onZoomDelete) {
@@ -1696,6 +1704,28 @@ export function SettingsPanel({
 									</AccordionContent>
 								</AccordionItem>
 							)}
+							{activePanelMode === "timeline" && (
+								<AccordionItem value="timeline" className="editor-panel-section px-3">
+									<AccordionTrigger className="py-2.5 hover:no-underline">
+										<div className="flex items-center gap-2">
+											<Brackets className="w-4 h-4 text-[#34B27B]" />
+											<span className="text-xs font-medium">{t("timeline.title")}</span>
+										</div>
+									</AccordionTrigger>
+									<AccordionContent className="pb-3">
+										<div className="flex items-center justify-between p-2 rounded-lg editor-control-surface">
+											<div className="text-[10px] font-medium text-slate-300">
+												{t("timeline.waveform")}
+											</div>
+											<Switch
+												checked={showTrimWaveform}
+												onCheckedChange={onTrimWaveformChange}
+												className="data-[state=checked]:bg-[#34B27B] scale-90 ml-2 shrink-0"
+											/>
+										</div>
+									</AccordionContent>
+								</AccordionItem>
+							)}
 						</Accordion>
 					)}
 				</div>

src/components/video-editor/VideoEditor.tsx

@@ -169,6 +169,7 @@ export default function VideoEditor() {
 		wallpaper,
 		shadowIntensity,
 		showBlur,
+		showTrimWaveform,
 		motionBlurAmount,
 		borderRadius,
 		padding,
@@ -355,6 +356,7 @@ export default function VideoEditor() {
 				wallpaper: normalizedEditor.wallpaper,
 				shadowIntensity: normalizedEditor.shadowIntensity,
 				showBlur: normalizedEditor.showBlur,
+				showTrimWaveform: normalizedEditor.showTrimWaveform,
 				motionBlurAmount: normalizedEditor.motionBlurAmount,
 				borderRadius: normalizedEditor.borderRadius,
 				padding: normalizedEditor.padding,
@@ -426,6 +428,7 @@ export default function VideoEditor() {
 			wallpaper,
 			shadowIntensity,
 			showBlur,
+			showTrimWaveform,
 			motionBlurAmount,
 			borderRadius,
 			padding,
@@ -449,6 +452,7 @@ export default function VideoEditor() {
 		wallpaper,
 		shadowIntensity,
 		showBlur,
+		showTrimWaveform,
 		motionBlurAmount,
 		borderRadius,
 		padding,
@@ -572,6 +576,7 @@ export default function VideoEditor() {
 				wallpaper,
 				shadowIntensity,
 				showBlur,
+				showTrimWaveform,
 				motionBlurAmount,
 				borderRadius,
 				padding,
@@ -631,6 +636,7 @@ export default function VideoEditor() {
 			wallpaper,
 			shadowIntensity,
 			showBlur,
+			showTrimWaveform,
 			motionBlurAmount,
 			borderRadius,
 			padding,
@@ -2192,6 +2198,8 @@ export default function VideoEditor() {
 									onShadowCommit={commitState}
 									showBlur={showBlur}
 									onBlurChange={(v) => pushState({ showBlur: v })}
+									showTrimWaveform={showTrimWaveform}
+									onTrimWaveformChange={(v) => pushState({ showTrimWaveform: v })}
 									motionBlurAmount={motionBlurAmount}
 									onMotionBlurChange={(v) => updateState({ motionBlurAmount: v })}
 									onMotionBlurCommit={commitState}
@@ -2355,6 +2363,8 @@ export default function VideoEditor() {
 												: webcamLayoutPreset,
 									})
 								}
+								videoUrl={videoPath ?? undefined}
+								showTrimWaveform={showTrimWaveform}
 							/>
 						</div>
 					</Panel>

src/components/video-editor/editorDefaults.ts

@@ -34,11 +34,13 @@ export const DEFAULT_EDITOR_APPEARANCE_SETTINGS: {
 	showBlur: boolean;
 	motionBlurAmount: number;
 	borderRadius: number;
+	showTrimWaveform: boolean;
 } = {
 	shadowIntensity: 0,
 	showBlur: false,
 	motionBlurAmount: 0,
 	borderRadius: 0,
+	showTrimWaveform: false,
 };
 
 export const DEFAULT_EDITOR_LAYOUT_SETTINGS: {

src/components/video-editor/projectPersistence.ts

@@ -65,6 +65,7 @@ export interface ProjectEditorState {
 	wallpaper: string;
 	shadowIntensity: number;
 	showBlur: boolean;
+	showTrimWaveform: boolean;
 	motionBlurAmount: number;
 	borderRadius: number;
 	padding: number;
@@ -445,6 +446,10 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 			typeof editor.showBlur === "boolean"
 				? editor.showBlur
 				: DEFAULT_EDITOR_APPEARANCE_SETTINGS.showBlur,
+		showTrimWaveform:
+			typeof editor.showTrimWaveform === "boolean"
+				? editor.showTrimWaveform
+				: DEFAULT_EDITOR_APPEARANCE_SETTINGS.showTrimWaveform,
 		motionBlurAmount: isFiniteNumber(editor.motionBlurAmount)
 			? clamp(editor.motionBlurAmount, 0, 1)
 			: typeof (editor as { motionBlurEnabled?: unknown }).motionBlurEnabled === "boolean"

src/components/video-editor/timeline/BackgroundWaveform.tsx

@@ -0,0 +1,90 @@
+import { useTimelineContext } from "dnd-timeline";
+import { useEffect, useRef, useState } from "react";
+
+export interface BackgroundWaveformProps {
+	/** Pre-computed peaks array: pairs of [min, max] per block (length = 2 * N). */
+	peaks: Float32Array | null;
+	videoDurationMs: number;
+}
+
+/**
+ * Renders a faint audio waveform on a `<canvas>` that fills its containing
+ * block. Designed to be passed as the `background` prop of `<Row>`, which
+ * already provides `relative overflow-hidden` — no wrapper element needed.
+ *
+ * - Accepts pre-computed `peaks` from the caller (see `useAudioPeaks`).
+ * - Redraws whenever the timeline zoom/pan range changes.
+ * - `pointer-events: none` — never blocks drag-to-create interactions.
+ */
+export default function BackgroundWaveform({ peaks, videoDurationMs }: BackgroundWaveformProps) {
+	const { range } = useTimelineContext();
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const [canvasSize, setCanvasSize] = useState({ w: 0, h: 0 });
+
+	// Observe the canvas itself — Row's `relative overflow-hidden` parent
+	// makes it fill the row exactly, so no wrapper div is needed.
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const ro = new ResizeObserver((entries) => {
+			const { width, height } = entries[0].contentRect;
+			setCanvasSize({ w: width, h: height });
+		});
+		ro.observe(canvas);
+		return () => ro.disconnect();
+	}, []);
+
+	// Redraw whenever peaks, range, or canvas size changes.
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas || canvasSize.w <= 0 || canvasSize.h <= 0) return;
+
+		const dpr = window.devicePixelRatio || 1;
+		canvas.width = Math.round(canvasSize.w * dpr);
+		canvas.height = Math.round(canvasSize.h * dpr);
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		ctx.scale(dpr, dpr);
+		ctx.clearRect(0, 0, canvasSize.w, canvasSize.h);
+
+		if (!peaks || peaks.length === 0) return;
+
+		const W = canvasSize.w;
+		const H = canvasSize.h;
+		const mid = H / 2;
+		const amp = mid * 0.9;
+		const rangeMs = range.end - range.start;
+		if (rangeMs <= 0 || videoDurationMs <= 0) return;
+
+		const N = peaks.length / 2;
+
+		ctx.beginPath();
+		ctx.strokeStyle = "rgba(255, 255, 255, 0.12)";
+		ctx.lineWidth = 1;
+
+		for (let x = 0; x < W; x++) {
+			const startMs = range.start + (x / W) * rangeMs;
+			const endMs = range.start + ((x + 1) / W) * rangeMs;
+			const lo = Math.max(0, Math.floor((startMs / videoDurationMs) * N));
+			const hi = Math.min(N - 1, Math.ceil((endMs / videoDurationMs) * N));
+
+			let minVal = 0;
+			let maxVal = 0;
+			for (let i = lo; i <= hi; i++) {
+				const mn = peaks[i * 2];
+				const mx = peaks[i * 2 + 1];
+				if (mn < minVal) minVal = mn;
+				if (mx > maxVal) maxVal = mx;
+			}
+
+			ctx.moveTo(x + 0.5, mid - maxVal * amp);
+			ctx.lineTo(x + 0.5, mid - minVal * amp);
+		}
+
+		ctx.stroke();
+	}, [peaks, range, canvasSize, videoDurationMs]);
+
+	return <canvas ref={canvasRef} className="absolute inset-0 pointer-events-none w-full h-full" />;
+}

src/components/video-editor/timeline/Row.tsx

@@ -5,16 +5,23 @@ interface RowProps extends RowDefinition {
 	children: React.ReactNode;
 	hint?: string;
 	isEmpty?: boolean;
+	background?: React.ReactNode;
 }
 
-export default function Row({ id, children, hint, isEmpty }: RowProps) {
+/**
+ * A single horizontal lane in the timeline. Wraps the dnd-timeline `useRow`
+ * hook and adds an optional `background` layer (e.g. `BackgroundWaveform`),
+ * an empty-state hint label, and a minimum height.
+ */
+export default function Row({ id, children, hint, isEmpty, background }: RowProps) {
 	const { setNodeRef, rowWrapperStyle, rowStyle } = useRow({ id });
 
 	return (
 		<div
 			className="border-b border-white/[0.055] bg-[#101116] relative overflow-hidden"
 			style={{ ...rowWrapperStyle, minHeight: 36 }}
 		>
+			{background}
 			{isEmpty && hint && (
 				<div className="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-10">
 					<span className="text-[11px] text-white/[0.12] font-medium">{hint}</span>

src/components/video-editor/timeline/TimelineEditor.tsx

@@ -22,6 +22,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useScopedT } from "@/contexts/I18nContext";
 import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { useAudioPeaks } from "@/hooks/useAudioPeaks";
 import { matchesShortcut } from "@/lib/shortcuts";
 import { cn } from "@/lib/utils";
 import { ASPECT_RATIOS, type AspectRatio, getAspectRatioLabel } from "@/utils/aspectRatioUtils";
@@ -34,6 +35,7 @@ import type {
 	ZoomFocus,
 	ZoomRegion,
 } from "../types";
+import BackgroundWaveform from "./BackgroundWaveform";
 import Item from "./Item";
 import KeyframeMarkers from "./KeyframeMarkers";
 import Row from "./Row";
@@ -88,6 +90,8 @@ interface TimelineEditorProps {
 	onSelectSpeed?: (id: string | null) => void;
 	aspectRatio: AspectRatio;
 	onAspectRatioChange: (aspectRatio: AspectRatio) => void;
+	videoUrl?: string;
+	showTrimWaveform?: boolean;
 }
 
 interface TimelineScaleConfig {
@@ -567,6 +571,8 @@ function Timeline({
 	selectedBlurId,
 	selectedSpeedId,
 	keyframes = [],
+	videoUrl,
+	showTrimWaveform = false,
 }: {
 	items: TimelineRenderItem[];
 	videoDurationMs: number;
@@ -584,12 +590,15 @@ function Timeline({
 	selectedBlurId?: string | null;
 	selectedSpeedId?: string | null;
 	keyframes?: { id: string; time: number }[];
+	videoUrl?: string;
+	showTrimWaveform?: boolean;
 }) {
 	const t = useScopedT("timeline");
 	const { setTimelineRef, style, sidebarWidth, range, pixelsToValue } = useTimelineContext();
 	const localTimelineRef = useRef<HTMLDivElement | null>(null);
 	const isScrubbingTimelineRef = useRef(false);
 	const scrubPointerIdRef = useRef<number | null>(null);
+	const peaks = useAudioPeaks(showTrimWaveform ? videoUrl : undefined);
 
 	const setRefs = useCallback(
 		(node: HTMLDivElement | null) => {
@@ -788,7 +797,16 @@ function Timeline({
 				))}
 			</Row>
 
-			<Row id={TRIM_ROW_ID} isEmpty={trimItems.length === 0} hint={t("hints.pressTrim")}>
+			<Row
+				id={TRIM_ROW_ID}
+				isEmpty={trimItems.length === 0}
+				hint={t("hints.pressTrim")}
+				background={
+					showTrimWaveform ? (
+						<BackgroundWaveform peaks={peaks} videoDurationMs={videoDurationMs} />
+					) : undefined
+				}
+			>
 				{trimItems.map((item) => (
 					<Item
 						id={item.id}
@@ -899,6 +917,8 @@ export default function TimelineEditor({
 	onSelectSpeed,
 	aspectRatio,
 	onAspectRatioChange,
+	videoUrl,
+	showTrimWaveform = false,
 }: TimelineEditorProps) {
 	const t = useScopedT("timeline");
 	const totalMs = useMemo(() => Math.max(0, Math.round(videoDuration * 1000)), [videoDuration]);
@@ -1700,6 +1720,8 @@ export default function TimelineEditor({
 						selectedBlurId={selectedBlurId}
 						selectedSpeedId={selectedSpeedId}
 						keyframes={keyframes}
+						videoUrl={videoUrl}
+						showTrimWaveform={showTrimWaveform}
 					/>
 				</TimelineWrapper>
 			</div>