From 2bd01c9a46e07e83f22d97c469ee33a424b99379 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 15:42:22 +1000
Subject: [PATCH 1/9] Fix video wallpaper sync and streamline updater UI

---
 electron/updater.ts                           | 20 -----
 src/components/launch/LaunchWindow.tsx        | 12 +++
 src/components/video-editor/SettingsPanel.tsx | 64 +++++++++++----
 src/components/video-editor/VideoPlayback.tsx | 62 +++++++++++---
 src/lib/assetPath.test.ts                     | 41 ++++++++++
 src/lib/assetPath.ts                          | 81 +++++++++++++++++++
 src/lib/exporter/frameRenderer.ts             |  6 +-
 src/lib/exporter/modernFrameRenderer.ts       |  6 +-
 8 files changed, 246 insertions(+), 46 deletions(-)
 create mode 100644 src/lib/assetPath.test.ts

diff --git a/electron/updater.ts b/electron/updater.ts
index 23eb65e5..81a4f351 100644
--- a/electron/updater.ts
+++ b/electron/updater.ts
@@ -292,15 +292,6 @@ export function getUpdateStatusSummary() {
 	return updateStatusSummary;
 }
 
-async function showNoUpdatesDialog(getMainWindow: () => BrowserWindow | null) {
-	await showMessageBox(getMainWindow, {
-		type: "info",
-		title: "No Updates Available",
-		message: "Recordly is up to date.",
-		detail: `You are running version ${app.getVersion()}.`,
-	});
-}
-
 async function showUpdateErrorDialog(getMainWindow: () => BrowserWindow | null, error: unknown) {
 	await showMessageBox(getMainWindow, {
 		type: "error",
@@ -647,13 +638,6 @@ export async function checkForAppUpdates(
 
 	if (updateCheckInProgress) {
 		writeUpdaterLog("Skipped update check because a previous check is still running.");
-		if (options?.manual) {
-			await showMessageBox(getMainWindow, {
-				type: "info",
-				title: "Update Check In Progress",
-				message: "Recordly is already checking for updates.",
-			});
-		}
 		return;
 	}
 
@@ -758,11 +742,7 @@ export function setupAutoUpdates(
 			detail: `Recordly ${app.getVersion()} is up to date.`,
 		});
 		clearVisibleUpdateToast(sendToRenderer);
-		const shouldReport = manualCheckRequested;
 		manualCheckRequested = false;
-		if (shouldReport) {
-			void showNoUpdatesDialog(getMainWindow);
-		}
 	});
 
 	autoUpdater.on("download-progress", (progress) => {
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 8f48fd79..3863751e 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -72,6 +72,7 @@ const COUNTDOWN_OPTIONS = [0, 3, 5, 10];
 const WEBCAM_PREVIEW_DRAG_THRESHOLD = 6;
 const DEFAULT_WEBCAM_PREVIEW_OFFSET = { x: 0, y: 0 };
 const DEFAULT_RECORDING_HUD_OFFSET = { x: 0, y: 0 };
+const SHOW_DEV_UPDATE_PREVIEW = import.meta.env.DEV;
 
 function IconButton({
 	onClick,
@@ -1472,6 +1473,17 @@ export function LaunchWindow() {
 									>
 										{t("recording.openProject")}
 									</DropdownItem>
+									{SHOW_DEV_UPDATE_PREVIEW ? (
+										<DropdownItem
+											icon={<RefreshCw size={16} />}
+											onClick={() => {
+												void window.electronAPI.previewUpdateToast();
+												setActiveDropdown("none");
+											}}
+										>
+											{t("recording.previewUpdateUi", "Preview Update UI")}
+										</DropdownItem>
+									) : null}
 									<div className={styles.ddLabel} style={{ marginTop: 4 }}>
 										{t("recording.language")}
 									</div>
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index aa7d2bfd..e7fe287d 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -13,7 +13,12 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useTheme } from "@/contexts/ThemeContext";
-import { getAssetPath, getRenderableAssetUrl, getWallpaperThumbnailUrl } from "@/lib/assetPath";
+import {
+	getAssetPath,
+	getRenderableAssetUrl,
+	getRenderableVideoUrl,
+	getWallpaperThumbnailUrl,
+} from "@/lib/assetPath";
 import type { ExtensionSettingField } from "@/lib/extensions";
 import { extensionHost, type FrameInstance } from "@/lib/extensions";
 import { cn } from "@/lib/utils";
@@ -147,6 +152,47 @@ function SectionLabel({ children }: { children: React.ReactNode }) {
 	);
 }
 
+function WallpaperVideoPreview({ src }: { src: string }) {
+	const [resolvedSrc, setResolvedSrc] = useState(src);
+
+	useEffect(() => {
+		let cancelled = false;
+
+		void (async () => {
+			try {
+				const nextSrc = await getRenderableVideoUrl(src);
+				if (!cancelled) {
+					setResolvedSrc(nextSrc);
+				}
+			} catch {
+				if (!cancelled) {
+					setResolvedSrc(src);
+				}
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [src]);
+
+	return (
+		<video
+			src={resolvedSrc}
+			muted
+			playsInline
+			preload="metadata"
+			className="h-full w-full select-none object-cover [transform:translateZ(0)]"
+			draggable={false}
+			onMouseEnter={(e) => e.currentTarget.play().catch(() => undefined)}
+			onMouseLeave={(e) => {
+				e.currentTarget.pause();
+				e.currentTarget.currentTime = 0;
+			}}
+		/>
+	);
+}
+
 /**
  * Renders extension-contributed settings fields (toggle, slider, select, color, text).
  */
@@ -847,7 +893,7 @@ export function SettingsPanel({
 						const assetUrl = await getAssetPath(wallpaper.relativePath);
 						// Use tiny thumbnails for the grid; full-res loads on selection
 						if (isVideoWallpaperSource(wallpaper.publicPath)) {
-							return getRenderableAssetUrl(assetUrl);
+							return getRenderableVideoUrl(assetUrl);
 						}
 						return getWallpaperThumbnailUrl(assetUrl);
 					}),
@@ -1260,19 +1306,7 @@ export function SettingsPanel({
 		>
 			<div className="absolute inset-[1px] overflow-hidden rounded-[8px] bg-editor-dialog">
 				{isVideoWallpaperSource(wallpaperUrl) ? (
-					<video
-						src={wallpaperUrl}
-						muted
-						playsInline
-						preload="metadata"
-						className="h-full w-full select-none object-cover [transform:translateZ(0)]"
-						draggable={false}
-						onMouseEnter={(e) => e.currentTarget.play().catch(() => undefined)}
-						onMouseLeave={(e) => {
-							e.currentTarget.pause();
-							e.currentTarget.currentTime = 0;
-						}}
-					/>
+					<WallpaperVideoPreview src={wallpaperUrl} />
 				) : (
 					<img
 						src={wallpaperUrl}
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index e0f064bd..6bcb7549 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -18,8 +18,8 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { getAssetPath, getRenderableAssetUrl } from "@/lib/assetPath";
-import { clampMediaTimeToDuration } from "@/lib/mediaTiming";
+import { getAssetPath, getRenderableAssetUrl, getRenderableVideoUrl } from "@/lib/assetPath";
+import { clampMediaTimeToDuration, getMediaSyncPlaybackRate } from "@/lib/mediaTiming";
 import {
 	DEFAULT_WALLPAPER_PATH,
 	DEFAULT_WALLPAPER_RELATIVE_PATH,
@@ -398,6 +398,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const trimRegionsRef = useRef<TrimRegion[]>([]);
 		const speedRegionsRef = useRef<SpeedRegion[]>([]);
 		const lastWebcamSyncTimeRef = useRef<number | null>(null);
+		const lastBackgroundSyncTimeRef = useRef<number | null>(null);
 		const bgVideoRef = useRef<HTMLVideoElement | null>(null);
 		const zoomMotionBlurRef = useRef(zoomMotionBlur);
 		const connectZoomsRef = useRef(connectZooms);
@@ -1006,13 +1007,55 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			}
 		}, [isPlaying]);
 
-		// Sync background video wallpaper with timeline scrubbing
+		// Keep video wallpapers locked to the same source timestamp as the main clip.
 		useEffect(() => {
 			const bgVideo = bgVideoRef.current;
 			if (!bgVideo) return;
-			if (!isPlaying && bgVideo.duration && Number.isFinite(bgVideo.duration)) {
-				bgVideo.currentTime = currentTime % bgVideo.duration;
+
+			const videoDuration =
+				Number.isFinite(bgVideo.duration) && bgVideo.duration > 0 ? bgVideo.duration : null;
+			const targetTime = videoDuration
+				? currentTime % videoDuration
+				: clampMediaTimeToDuration(currentTime, videoDuration);
+
+			const activeSpeedRegion = speedRegionsRef.current.find(
+				(region) => currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
+			);
+			const targetPlaybackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+			const syncedPlaybackRate = getMediaSyncPlaybackRate({
+				basePlaybackRate: targetPlaybackRate,
+				currentTime: bgVideo.currentTime,
+				targetTime,
+				toleranceSeconds: 0.02,
+				correctionWindowSeconds: 1.5,
+				maxAdjustment: 0.12,
+			});
+			if (Math.abs(bgVideo.playbackRate - syncedPlaybackRate) > 0.001) {
+				bgVideo.playbackRate = syncedPlaybackRate;
 			}
+
+			const previousTimelineTime = lastBackgroundSyncTimeRef.current;
+			const timelineJumped =
+				previousTimelineTime === null || Math.abs(targetTime - previousTimelineTime) > 0.25;
+			const driftThreshold = isPlaying ? 0.35 : 0.01;
+			if (timelineJumped || Math.abs(bgVideo.currentTime - targetTime) > driftThreshold) {
+				try {
+					bgVideo.currentTime = targetTime;
+				} catch {
+					// no-op
+				}
+			}
+
+			if (isPlaying) {
+				const playPromise = bgVideo.play();
+				if (playPromise) {
+					playPromise.catch(() => undefined);
+				}
+			} else {
+				bgVideo.pause();
+			}
+
+			lastBackgroundSyncTimeRef.current = targetTime;
 		}, [currentTime, isPlaying]);
 
 		useEffect(() => {
@@ -1275,6 +1318,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			lastWebcamSyncTimeRef.current = null;
 		}, [webcamVideoPath]);
 
+		useEffect(() => {
+			lastBackgroundSyncTimeRef.current = null;
+		}, [wallpaper]);
+
 		useEffect(() => {
 			const overlayEl = overlayRef.current;
 			if (!overlayEl) return;
@@ -2119,10 +2166,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					}
 
 					if (isVideoWallpaperSource(wallpaper)) {
-						let videoSrc = wallpaper;
-						if (wallpaper.startsWith("/") && !wallpaper.startsWith("//")) {
-							videoSrc = await getAssetPath(wallpaper.replace(/^\//, ""));
-						}
+						const videoSrc = await getRenderableVideoUrl(wallpaper);
 						if (mounted) {
 							setResolvedWallpaper(videoSrc);
 							setResolvedWallpaperKind("video");
diff --git a/src/lib/assetPath.test.ts b/src/lib/assetPath.test.ts
new file mode 100644
index 00000000..826006bb
--- /dev/null
+++ b/src/lib/assetPath.test.ts
@@ -0,0 +1,41 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getRenderableVideoUrl } from "./assetPath";
+
+describe("getRenderableVideoUrl", () => {
+	beforeEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it("uses the local media server for absolute local video paths when available", async () => {
+		vi.stubGlobal("window", {
+			electronAPI: {
+				getLocalMediaUrl: vi.fn(async (filePath: string) => ({
+					success: true,
+					url: `http://127.0.0.1:4321/video?path=${encodeURIComponent(filePath)}`,
+				})),
+			},
+		});
+
+		await expect(getRenderableVideoUrl("/Users/egg/Desktop/bg.mp4")).resolves.toBe(
+			"http://127.0.0.1:4321/video?path=%2FUsers%2Fegg%2FDesktop%2Fbg.mp4",
+		);
+	});
+
+	it("falls back to a file URL for absolute local video paths", async () => {
+		await expect(getRenderableVideoUrl("/Users/egg/Desktop/bg.mp4")).resolves.toBe(
+			"file:///Users/egg/Desktop/bg.mp4",
+		);
+	});
+
+	it("keeps bundled wallpaper paths routed through the app asset directory", async () => {
+		vi.stubGlobal("window", {
+			location: {
+				protocol: "http:",
+			},
+		});
+
+		await expect(getRenderableVideoUrl("/wallpapers/wispysky.mp4")).resolves.toBe(
+			"/wallpapers/wispysky.mp4",
+		);
+	});
+});
diff --git a/src/lib/assetPath.ts b/src/lib/assetPath.ts
index 8aed2ad9..152ff629 100644
--- a/src/lib/assetPath.ts
+++ b/src/lib/assetPath.ts
@@ -11,6 +11,47 @@ function ensureTrailingSlash(value: string): string {
 	return value.endsWith("/") ? value : `${value}/`;
 }
 
+const WINDOWS_ABSOLUTE_PATH_PATTERN = /^[A-Za-z]:[\\/]/;
+const WINDOWS_UNC_PATH_PATTERN = /^\\\\[^\\]+\\[^\\]+/;
+
+function encodeFilePathSegments(pathname: string, keepWindowsDrive = false): string {
+	return pathname
+		.split("/")
+		.map((segment, index) => {
+			if (!segment) return "";
+			if (keepWindowsDrive && index === 1 && /^[A-Za-z]:$/.test(segment)) {
+				return segment;
+			}
+			return encodeURIComponent(segment);
+		})
+		.join("/");
+}
+
+function toFileUrl(filePath: string): string {
+	const normalized = filePath.replace(/\\/g, "/");
+
+	if (WINDOWS_ABSOLUTE_PATH_PATTERN.test(normalized)) {
+		return `file://${encodeFilePathSegments(`/${normalized}`, true)}`;
+	}
+
+	if (normalized.startsWith("//")) {
+		const [host, ...pathParts] = normalized.replace(/^\/+/, "").split("/");
+		const encodedPath = pathParts.map((part) => encodeURIComponent(part)).join("/");
+		return encodedPath ? `file://${host}/${encodedPath}` : `file://${host}/`;
+	}
+
+	const absolutePath = normalized.startsWith("/") ? normalized : `/${normalized}`;
+	return `file://${encodeFilePathSegments(absolutePath)}`;
+}
+
+export function isAbsoluteLocalAssetPath(asset: string): boolean {
+	return (
+		asset.startsWith("/") ||
+		WINDOWS_ABSOLUTE_PATH_PATTERN.test(asset) ||
+		WINDOWS_UNC_PATH_PATTERN.test(asset)
+	);
+}
+
 export async function getAssetPath(relativePath: string): Promise<string> {
 	const encodedRelativePath = encodeRelativeAssetPath(relativePath);
 	const isWebContext =
@@ -121,6 +162,46 @@ export async function getRenderableAssetUrl(asset: string): Promise<string> {
 	}
 }
 
+async function resolveLocalMediaUrl(filePath: string): Promise<string> {
+	if (typeof window !== "undefined" && window.electronAPI?.getLocalMediaUrl) {
+		try {
+			const result = await window.electronAPI.getLocalMediaUrl(filePath);
+			if (result.success && result.url) {
+				return result.url;
+			}
+		} catch {
+			// Fall through to a file URL when the media server is unavailable.
+		}
+	}
+
+	return toFileUrl(filePath);
+}
+
+export async function getRenderableVideoUrl(asset: string): Promise<string> {
+	if (
+		!asset ||
+		asset.startsWith("blob:") ||
+		asset.startsWith("data:") ||
+		asset.startsWith("file://") ||
+		asset.startsWith("http")
+	) {
+		return asset;
+	}
+
+	const isBundledAssetPath =
+		asset.startsWith("/wallpapers/") || asset.startsWith("/app-icons/");
+
+	if (isAbsoluteLocalAssetPath(asset) && !isBundledAssetPath) {
+		return resolveLocalMediaUrl(asset);
+	}
+
+	if (asset.startsWith("/") && !asset.startsWith("//")) {
+		return getAssetPath(asset.replace(/^\/+/, ""));
+	}
+
+	return asset;
+}
+
 // ---------------------------------------------------------------------------
 // Wallpaper thumbnail helper — generates a tiny JPEG thumbnail via the main
 // process (nativeImage resize) and returns a data URL for fast grid rendering.
diff --git a/src/lib/exporter/frameRenderer.ts b/src/lib/exporter/frameRenderer.ts
index aa388d0b..fc342ff6 100644
--- a/src/lib/exporter/frameRenderer.ts
+++ b/src/lib/exporter/frameRenderer.ts
@@ -51,7 +51,7 @@ import {
 	getWebcamOverlaySizePx,
 } from "@/components/video-editor/webcamOverlay";
 import { getWebcamMediaTargetTimeSeconds } from "@/components/video-editor/videoPlayback/webcamSync";
-import { getAssetPath, getRenderableAssetUrl } from "@/lib/assetPath";
+import { getAssetPath, getRenderableAssetUrl, getRenderableVideoUrl } from "@/lib/assetPath";
 import { extensionHost } from "@/lib/extensions";
 import {
 	mapCursorToCanvasNormalized,
@@ -580,6 +580,10 @@ export class FrameRenderer {
 			return wallpaper;
 		}
 
+		if (isVideoWallpaperSource(wallpaper)) {
+			return getRenderableVideoUrl(wallpaper);
+		}
+
 		if (
 			wallpaper.startsWith("#") ||
 			wallpaper.startsWith("linear-gradient") ||
diff --git a/src/lib/exporter/modernFrameRenderer.ts b/src/lib/exporter/modernFrameRenderer.ts
index 2db3c645..1b3f2190 100644
--- a/src/lib/exporter/modernFrameRenderer.ts
+++ b/src/lib/exporter/modernFrameRenderer.ts
@@ -57,7 +57,7 @@ import {
 	getWebcamOverlaySizePx,
 } from "@/components/video-editor/webcamOverlay";
 import { getWebcamMediaTargetTimeSeconds } from "@/components/video-editor/videoPlayback/webcamSync";
-import { getAssetPath, getRenderableAssetUrl } from "@/lib/assetPath";
+import { getAssetPath, getRenderableAssetUrl, getRenderableVideoUrl } from "@/lib/assetPath";
 import { extensionHost } from "@/lib/extensions";
 import {
 	mapCursorToCanvasNormalized,
@@ -1487,6 +1487,10 @@ export class FrameRenderer {
 			return wallpaper;
 		}
 
+		if (isVideoWallpaperSource(wallpaper)) {
+			return getRenderableVideoUrl(wallpaper);
+		}
+
 		if (
 			wallpaper.startsWith("#") ||
 			wallpaper.startsWith("linear-gradient") ||

From 872fc0560657766e34f79d023cf947b0c6c3ef35 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:04:04 +1000
Subject: [PATCH 2/9] Address CodeRabbit review feedback

---
 src/components/launch/LaunchWindow.tsx        |  9 ++++++++-
 src/components/video-editor/SettingsPanel.tsx |  1 +
 src/components/video-editor/VideoPlayback.tsx | 10 ++++++----
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 3863751e..4344b7c5 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -1477,8 +1477,15 @@ export function LaunchWindow() {
 										<DropdownItem
 											icon={<RefreshCw size={16} />}
 											onClick={() => {
-												void window.electronAPI.previewUpdateToast();
 												setActiveDropdown("none");
+												void window.electronAPI
+													.previewUpdateToast()
+													.catch((error) => {
+														console.warn(
+															"Failed to preview update toast:",
+															error,
+														);
+													});
 											}}
 										>
 											{t("recording.previewUpdateUi", "Preview Update UI")}
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index e7fe287d..51b1a0c7 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -157,6 +157,7 @@ function WallpaperVideoPreview({ src }: { src: string }) {
 
 	useEffect(() => {
 		let cancelled = false;
+		setResolvedSrc(src);
 
 		void (async () => {
 			try {
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 6bcb7549..c6c50f0b 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -1012,11 +1012,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			const bgVideo = bgVideoRef.current;
 			if (!bgVideo) return;
 
+			const clipTimelineTime = currentTime;
 			const videoDuration =
 				Number.isFinite(bgVideo.duration) && bgVideo.duration > 0 ? bgVideo.duration : null;
 			const targetTime = videoDuration
-				? currentTime % videoDuration
-				: clampMediaTimeToDuration(currentTime, videoDuration);
+				? clipTimelineTime % videoDuration
+				: clampMediaTimeToDuration(clipTimelineTime, videoDuration);
 
 			const activeSpeedRegion = speedRegionsRef.current.find(
 				(region) => currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
@@ -1036,7 +1037,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
 			const previousTimelineTime = lastBackgroundSyncTimeRef.current;
 			const timelineJumped =
-				previousTimelineTime === null || Math.abs(targetTime - previousTimelineTime) > 0.25;
+				previousTimelineTime === null ||
+				Math.abs(clipTimelineTime - previousTimelineTime) > 0.25;
 			const driftThreshold = isPlaying ? 0.35 : 0.01;
 			if (timelineJumped || Math.abs(bgVideo.currentTime - targetTime) > driftThreshold) {
 				try {
@@ -1055,7 +1057,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				bgVideo.pause();
 			}
 
-			lastBackgroundSyncTimeRef.current = targetTime;
+			lastBackgroundSyncTimeRef.current = clipTimelineTime;
 		}, [currentTime, isPlaying]);
 
 		useEffect(() => {

From af141b0790dba194f6d9d8f7d8a85e193142e641 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:13:58 +1000
Subject: [PATCH 3/9] feat(webcam): add mirror toggle to settings

Closes #363
---
 src/components/video-editor/SettingsPanel.tsx | 10 ++++++++++
 src/i18n/locales/en/settings.json             |  1 +
 src/i18n/locales/es/settings.json             |  1 +
 src/i18n/locales/fr/settings.json             |  1 +
 src/i18n/locales/ko/settings.json             |  1 +
 src/i18n/locales/nl/settings.json             |  1 +
 src/i18n/locales/pt-BR/settings.json          |  1 +
 src/i18n/locales/zh-CN/settings.json          |  1 +
 8 files changed, 17 insertions(+)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 51b1a0c7..670c6532 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -2848,6 +2848,16 @@ export function SettingsPanel({
 									className="data-[state=checked]:bg-[#2563EB] scale-75"
 								/>
 							</div>
+							<div className="flex items-center justify-between rounded-lg bg-foreground/[0.03] px-2.5 py-1.5">
+								<span className="text-[10px] text-muted-foreground">
+									{tSettings("effects.webcamMirror", "Mirror Webcam")}
+								</span>
+								<Switch
+									checked={webcam?.mirror ?? defaultWebcam.mirror}
+									onCheckedChange={(mirror) => updateWebcam({ mirror })}
+									className="data-[state=checked]:bg-[#2563EB] scale-75"
+								/>
+							</div>
 							<div className="flex items-center justify-between rounded-lg bg-foreground/[0.03] px-2.5 py-1.5">
 								<span className="text-[10px] text-muted-foreground">
 									{tSettings("effects.webcamReactToZoom")}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index c788b132..162f2f14 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -85,6 +85,7 @@
 		"webcamFootageAdded": "Webcam footage linked",
 		"webcamFootageRemoved": "Webcam footage removed",
 		"webcamSize": "Webcam Size",
+		"webcamMirror": "Mirror Webcam",
 		"webcamReactToZoom": "Webcam Reacts To Zoom",
 		"webcamRoundness": "Webcam Roundness",
 		"webcamShadow": "Webcam Shadow",
diff --git a/src/i18n/locales/es/settings.json b/src/i18n/locales/es/settings.json
index ab686b30..9d7617b7 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -85,6 +85,7 @@
 		"webcamFootageAdded": "Metraje de cámara vinculado",
 		"webcamFootageRemoved": "Metraje de cámara eliminado",
 		"webcamSize": "Tamaño de cámara",
+		"webcamMirror": "Reflejar cámara",
 		"webcamReactToZoom": "La cámara reacciona al zoom",
 		"webcamRoundness": "Redondez de cámara",
 		"webcamShadow": "Sombra de cámara",
diff --git a/src/i18n/locales/fr/settings.json b/src/i18n/locales/fr/settings.json
index c4748e3d..0342c078 100644
--- a/src/i18n/locales/fr/settings.json
+++ b/src/i18n/locales/fr/settings.json
@@ -85,6 +85,7 @@
 		"webcamFootageAdded": "Vidéo de webcam liée",
 		"webcamFootageRemoved": "Vidéo de webcam supprimée",
 		"webcamSize": "Taille de la webcam",
+		"webcamMirror": "Inverser la webcam",
 		"webcamReactToZoom": "La webcam réagit au zoom",
 		"webcamRoundness": "Arrondi de la webcam",
 		"webcamShadow": "Ombre de la webcam",
diff --git a/src/i18n/locales/ko/settings.json b/src/i18n/locales/ko/settings.json
index 62f6f8fd..592f176c 100644
--- a/src/i18n/locales/ko/settings.json
+++ b/src/i18n/locales/ko/settings.json
@@ -85,6 +85,7 @@
 		"webcamFootageAdded": "웹캠 영상을 연결했습니다",
 		"webcamFootageRemoved": "웹캠 영상을 제거했습니다",
 		"webcamSize": "웹캠 크기",
+		"webcamMirror": "웹캠 좌우 반전",
 		"webcamReactToZoom": "확대 시 웹캠 반응",
 		"webcamRoundness": "웹캠 둥글기",
 		"webcamShadow": "웹캠 그림자",
diff --git a/src/i18n/locales/nl/settings.json b/src/i18n/locales/nl/settings.json
index 2aaa43e9..259c1696 100644
--- a/src/i18n/locales/nl/settings.json
+++ b/src/i18n/locales/nl/settings.json
@@ -85,6 +85,7 @@
 		"webcamFootageAdded": "Webcambeelden gekoppeld",
 		"webcamFootageRemoved": "Webcambeelden verwijderd",
 		"webcamSize": "Webcamgrootte",
+		"webcamMirror": "Webcam spiegelen",
 		"webcamReactToZoom": "Webcam reageert op zoom",
 		"webcamRoundness": "Webcam-afronding",
 		"webcamShadow": "Webcamschaduw",
diff --git a/src/i18n/locales/pt-BR/settings.json b/src/i18n/locales/pt-BR/settings.json
index 86e969d5..0f9e834d 100644
--- a/src/i18n/locales/pt-BR/settings.json
+++ b/src/i18n/locales/pt-BR/settings.json
@@ -85,6 +85,7 @@
 		"webcamFootageAdded": "Filmagem da webcam vinculada",
 		"webcamFootageRemoved": "Filmagem da webcam removida",
 		"webcamSize": "Tamanho da webcam",
+		"webcamMirror": "Espelhar webcam",
 		"webcamReactToZoom": "Webcam reage ao zoom",
 		"webcamRoundness": "Arredondamento da webcam",
 		"webcamShadow": "Sombra da webcam",
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index dae55a79..508ec4d0 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -85,6 +85,7 @@
 		"webcamFootageAdded": "已关联摄像头素材",
 		"webcamFootageRemoved": "已移除摄像头素材",
 		"webcamSize": "摄像头大小",
+		"webcamMirror": "镜像摄像头",
 		"webcamReactToZoom": "摄像头随缩放变化",
 		"webcamRoundness": "摄像头圆角",
 		"webcamShadow": "摄像头阴影",

From 6c724543b84b7d5ce6194d3e180da2ccb3ffb8df Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:22:57 +1000
Subject: [PATCH 4/9] Fix black video wallpaper exports

---
 src/lib/assetPath.test.ts                    | 26 +++++++-
 src/lib/assetPath.ts                         | 31 +++++++--
 src/lib/exporter/frameRenderer.test.ts       |  1 +
 src/lib/exporter/frameRenderer.ts            | 36 +++++++++--
 src/lib/exporter/modernFrameRenderer.test.ts |  1 +
 src/lib/exporter/modernFrameRenderer.ts      | 66 +++++++++++++++++---
 6 files changed, 141 insertions(+), 20 deletions(-)

diff --git a/src/lib/assetPath.test.ts b/src/lib/assetPath.test.ts
index 826006bb..7cb51728 100644
--- a/src/lib/assetPath.test.ts
+++ b/src/lib/assetPath.test.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { getRenderableVideoUrl } from "./assetPath";
+import { getExportableVideoUrl, getRenderableVideoUrl } from "./assetPath";
 
 describe("getRenderableVideoUrl", () => {
 	beforeEach(() => {
@@ -39,3 +39,27 @@ describe("getRenderableVideoUrl", () => {
 		);
 	});
 });
+
+describe("getExportableVideoUrl", () => {
+	beforeEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it("uses a direct file URL for absolute local video paths", async () => {
+		await expect(getExportableVideoUrl("/Users/egg/Desktop/bg.mp4")).resolves.toBe(
+			"file:///Users/egg/Desktop/bg.mp4",
+		);
+	});
+
+	it("keeps bundled wallpaper paths routed through the app asset directory", async () => {
+		vi.stubGlobal("window", {
+			location: {
+				protocol: "http:",
+			},
+		});
+
+		await expect(getExportableVideoUrl("/wallpapers/wispysky.mp4")).resolves.toBe(
+			"/wallpapers/wispysky.mp4",
+		);
+	});
+});
diff --git a/src/lib/assetPath.ts b/src/lib/assetPath.ts
index 152ff629..6ff5ddeb 100644
--- a/src/lib/assetPath.ts
+++ b/src/lib/assetPath.ts
@@ -177,6 +177,10 @@ async function resolveLocalMediaUrl(filePath: string): Promise<string> {
 	return toFileUrl(filePath);
 }
 
+function isBundledAssetPath(asset: string): boolean {
+	return asset.startsWith("/wallpapers/") || asset.startsWith("/app-icons/");
+}
+
 export async function getRenderableVideoUrl(asset: string): Promise<string> {
 	if (
 		!asset ||
@@ -188,10 +192,7 @@ export async function getRenderableVideoUrl(asset: string): Promise<string> {
 		return asset;
 	}
 
-	const isBundledAssetPath =
-		asset.startsWith("/wallpapers/") || asset.startsWith("/app-icons/");
-
-	if (isAbsoluteLocalAssetPath(asset) && !isBundledAssetPath) {
+	if (isAbsoluteLocalAssetPath(asset) && !isBundledAssetPath(asset)) {
 		return resolveLocalMediaUrl(asset);
 	}
 
@@ -202,6 +203,28 @@ export async function getRenderableVideoUrl(asset: string): Promise<string> {
 	return asset;
 }
 
+export async function getExportableVideoUrl(asset: string): Promise<string> {
+	if (
+		!asset ||
+		asset.startsWith("blob:") ||
+		asset.startsWith("data:") ||
+		asset.startsWith("file://") ||
+		asset.startsWith("http")
+	) {
+		return asset;
+	}
+
+	if (isAbsoluteLocalAssetPath(asset) && !isBundledAssetPath(asset)) {
+		return toFileUrl(asset);
+	}
+
+	if (asset.startsWith("/") && !asset.startsWith("//")) {
+		return getAssetPath(asset.replace(/^\/+/, ""));
+	}
+
+	return asset;
+}
+
 // ---------------------------------------------------------------------------
 // Wallpaper thumbnail helper — generates a tiny JPEG thumbnail via the main
 // process (nativeImage resize) and returns a data URL for fast grid rendering.
diff --git a/src/lib/exporter/frameRenderer.test.ts b/src/lib/exporter/frameRenderer.test.ts
index caf807d7..bae16422 100644
--- a/src/lib/exporter/frameRenderer.test.ts
+++ b/src/lib/exporter/frameRenderer.test.ts
@@ -18,6 +18,7 @@ vi.mock("pixi-filters/motion-blur", () => ({
 
 vi.mock("@/lib/assetPath", () => ({
 	getAssetPath: vi.fn(async (value: string) => value),
+	getExportableVideoUrl: vi.fn(async (value: string) => value),
 	getRenderableAssetUrl: vi.fn((value: string) => value),
 }));
 
diff --git a/src/lib/exporter/frameRenderer.ts b/src/lib/exporter/frameRenderer.ts
index fc342ff6..6c6da5b5 100644
--- a/src/lib/exporter/frameRenderer.ts
+++ b/src/lib/exporter/frameRenderer.ts
@@ -51,7 +51,11 @@ import {
 	getWebcamOverlaySizePx,
 } from "@/components/video-editor/webcamOverlay";
 import { getWebcamMediaTargetTimeSeconds } from "@/components/video-editor/videoPlayback/webcamSync";
-import { getAssetPath, getRenderableAssetUrl, getRenderableVideoUrl } from "@/lib/assetPath";
+import {
+	getAssetPath,
+	getExportableVideoUrl,
+	getRenderableAssetUrl,
+} from "@/lib/assetPath";
 import { extensionHost } from "@/lib/extensions";
 import {
 	mapCursorToCanvasNormalized,
@@ -374,17 +378,39 @@ export class FrameRenderer {
 					videoSrc = await getAssetPath(wallpaper.replace(/^\//, ""));
 				}
 
+				const backgroundSource = await resolveMediaElementSource(videoSrc);
+				this.cleanupBackgroundSource = backgroundSource.revoke;
+
 				const video = document.createElement("video");
 				video.muted = true;
 				video.loop = true;
 				video.playsInline = true;
 				video.preload = "auto";
-				video.src = videoSrc;
+				video.src = backgroundSource.src;
+				video.load();
 
 				await new Promise<void>((resolve, reject) => {
-					video.onloadeddata = () => resolve();
-					video.onerror = () =>
+					const onReady = () => {
+						if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+							return;
+						}
+						cleanup();
+						resolve();
+					};
+					const onError = () => {
+						cleanup();
 						reject(new Error(`Failed to load video wallpaper: ${wallpaper}`));
+					};
+					const cleanup = () => {
+						video.removeEventListener("loadeddata", onReady);
+						video.removeEventListener("canplay", onReady);
+						video.removeEventListener("error", onError);
+					};
+
+					video.addEventListener("loadeddata", onReady);
+					video.addEventListener("canplay", onReady);
+					video.addEventListener("error", onError);
+					onReady();
 				});
 
 				this.backgroundVideoElement = video;
@@ -581,7 +607,7 @@ export class FrameRenderer {
 		}
 
 		if (isVideoWallpaperSource(wallpaper)) {
-			return getRenderableVideoUrl(wallpaper);
+			return getExportableVideoUrl(wallpaper);
 		}
 
 		if (
diff --git a/src/lib/exporter/modernFrameRenderer.test.ts b/src/lib/exporter/modernFrameRenderer.test.ts
index 2ccdec77..b87b3b19 100644
--- a/src/lib/exporter/modernFrameRenderer.test.ts
+++ b/src/lib/exporter/modernFrameRenderer.test.ts
@@ -36,6 +36,7 @@ vi.mock("pixi-filters/motion-blur", () => ({
 
 vi.mock("@/lib/assetPath", () => ({
 	getAssetPath: vi.fn(async (value: string) => value),
+	getExportableVideoUrl: vi.fn(async (value: string) => value),
 	getRenderableAssetUrl: vi.fn((value: string) => value),
 }));
 
diff --git a/src/lib/exporter/modernFrameRenderer.ts b/src/lib/exporter/modernFrameRenderer.ts
index 1b3f2190..c300a454 100644
--- a/src/lib/exporter/modernFrameRenderer.ts
+++ b/src/lib/exporter/modernFrameRenderer.ts
@@ -57,7 +57,11 @@ import {
 	getWebcamOverlaySizePx,
 } from "@/components/video-editor/webcamOverlay";
 import { getWebcamMediaTargetTimeSeconds } from "@/components/video-editor/videoPlayback/webcamSync";
-import { getAssetPath, getRenderableAssetUrl, getRenderableVideoUrl } from "@/lib/assetPath";
+import {
+	getAssetPath,
+	getExportableVideoUrl,
+	getRenderableAssetUrl,
+} from "@/lib/assetPath";
 import { extensionHost } from "@/lib/extensions";
 import {
 	mapCursorToCanvasNormalized,
@@ -332,6 +336,7 @@ export class FrameRenderer {
 	private backgroundForwardFrameSource: ForwardFrameSource | null = null;
 	private backgroundDecodedFrame: VideoFrame | null = null;
 	private backgroundVideoElement: HTMLVideoElement | null = null;
+	private cleanupBackgroundSource: (() => void) | null = null;
 	private videoShadowLayers: ShadowLayer[] = [];
 	private webcamShadowLayers: ShadowLayer[] = [];
 	private webcamSprite: Sprite | null = null;
@@ -344,6 +349,8 @@ export class FrameRenderer {
 	private webcamFrameCacheCtx: CanvasRenderingContext2D | null = null;
 	private sceneVideoFrameStagingCanvas: HTMLCanvasElement | null = null;
 	private sceneVideoFrameStagingCtx: CanvasRenderingContext2D | null = null;
+	private backgroundVideoFrameStagingCanvas: HTMLCanvasElement | null = null;
+	private backgroundVideoFrameStagingCtx: CanvasRenderingContext2D | null = null;
 	private webcamVideoFrameStagingCanvas: HTMLCanvasElement | null = null;
 	private webcamVideoFrameStagingCtx: CanvasRenderingContext2D | null = null;
 	private captionMeasureCanvas: HTMLCanvasElement | null = null;
@@ -708,7 +715,7 @@ export class FrameRenderer {
 	}
 
 	private ensureVideoFrameStagingCanvas(
-		kind: "scene" | "webcam",
+		kind: "scene" | "background" | "webcam",
 		width: number,
 		height: number,
 	): { canvas: HTMLCanvasElement; context: CanvasRenderingContext2D } | null {
@@ -717,9 +724,15 @@ export class FrameRenderer {
 		const currentCanvas =
 			kind === "scene"
 				? this.sceneVideoFrameStagingCanvas
-				: this.webcamVideoFrameStagingCanvas;
+				: kind === "background"
+					? this.backgroundVideoFrameStagingCanvas
+					: this.webcamVideoFrameStagingCanvas;
 		const currentContext =
-			kind === "scene" ? this.sceneVideoFrameStagingCtx : this.webcamVideoFrameStagingCtx;
+			kind === "scene"
+				? this.sceneVideoFrameStagingCtx
+				: kind === "background"
+					? this.backgroundVideoFrameStagingCtx
+					: this.webcamVideoFrameStagingCtx;
 
 		if (
 			currentCanvas &&
@@ -741,6 +754,9 @@ export class FrameRenderer {
 		if (kind === "scene") {
 			this.sceneVideoFrameStagingCanvas = canvas;
 			this.sceneVideoFrameStagingCtx = context;
+		} else if (kind === "background") {
+			this.backgroundVideoFrameStagingCanvas = canvas;
+			this.backgroundVideoFrameStagingCtx = context;
 		} else {
 			this.webcamVideoFrameStagingCanvas = canvas;
 			this.webcamVideoFrameStagingCtx = context;
@@ -751,7 +767,7 @@ export class FrameRenderer {
 
 	private stageVideoFrameForTexture(
 		frame: VideoFrame,
-		kind: "scene" | "webcam",
+		kind: "scene" | "background" | "webcam",
 		fallbackWidth: number,
 		fallbackHeight: number,
 	): CanvasImageSource | VideoFrame {
@@ -814,6 +830,8 @@ export class FrameRenderer {
 		void this.backgroundForwardFrameSource?.destroy();
 		this.backgroundForwardFrameSource = null;
 		this.closeBackgroundDecodedFrame();
+		this.cleanupBackgroundSource?.();
+		this.cleanupBackgroundSource = null;
 
 		if (this.backgroundVideoElement) {
 			this.backgroundVideoElement.pause();
@@ -856,17 +874,39 @@ export class FrameRenderer {
 					);
 				}
 
+				const backgroundSource = await resolveMediaElementSource(videoSrc);
+				this.cleanupBackgroundSource = backgroundSource.revoke;
+
 				const video = document.createElement("video");
 				video.muted = true;
 				video.loop = true;
 				video.playsInline = true;
 				video.preload = "auto";
-				video.src = videoSrc;
+				video.src = backgroundSource.src;
+				video.load();
 
 				await new Promise<void>((resolve, reject) => {
-					video.onloadeddata = () => resolve();
-					video.onerror = () =>
+					const onReady = () => {
+						if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+							return;
+						}
+						cleanup();
+						resolve();
+					};
+					const onError = () => {
+						cleanup();
 						reject(new Error(`Failed to load video wallpaper: ${wallpaper}`));
+					};
+					const cleanup = () => {
+						video.removeEventListener("loadeddata", onReady);
+						video.removeEventListener("canplay", onReady);
+						video.removeEventListener("error", onError);
+					};
+
+					video.addEventListener("loadeddata", onReady);
+					video.addEventListener("canplay", onReady);
+					video.addEventListener("error", onError);
+					onReady();
 				});
 
 				this.backgroundVideoElement = video;
@@ -1434,8 +1474,14 @@ export class FrameRenderer {
 			this.closeBackgroundDecodedFrame();
 			this.backgroundDecodedFrame = decodedFrame;
 			if (decodedFrame) {
-				this.ensureBackgroundSprite(
+				const resolvedBackgroundSource = this.stageVideoFrameForTexture(
 					decodedFrame,
+					"background",
+					decodedFrame.displayWidth,
+					decodedFrame.displayHeight,
+				);
+				this.ensureBackgroundSprite(
+					resolvedBackgroundSource,
 					decodedFrame.displayWidth,
 					decodedFrame.displayHeight,
 				);
@@ -1488,7 +1534,7 @@ export class FrameRenderer {
 		}
 
 		if (isVideoWallpaperSource(wallpaper)) {
-			return getRenderableVideoUrl(wallpaper);
+			return getExportableVideoUrl(wallpaper);
 		}
 
 		if (

From 57f18dc69962ec18101214a7fb5c617896e5b01d Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:24:35 +1000
Subject: [PATCH 5/9] fix(timeline): cap viewport to two rows

---
 src/components/video-editor/VideoEditor.tsx              | 6 ++++--
 src/components/video-editor/timeline/TimelineEditor.tsx  | 2 +-
 .../video-editor/timeline/timelineLayout.test.ts         | 9 +++++++++
 src/components/video-editor/timeline/timelineLayout.ts   | 5 +++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 580627ac..e95372c2 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -124,6 +124,7 @@ import {
 	RECORDLY_ISSUES_URL,
 } from "./TutorialHelp";
 import TimelineEditor, { type TimelineEditorHandle } from "./timeline/TimelineEditor";
+import { TIMELINE_VIEWPORT_MIN_HEIGHT_PX } from "./timeline/timelineLayout";
 import { normalizeCursorTelemetry } from "./timeline/zoomSuggestionUtils";
 import {
 	type AnnotationRegion,
@@ -5698,8 +5699,9 @@ export default function VideoEditor() {
 				<div
 					className="flex-shrink-0 flex flex-col"
 					style={{
-						height: timelineCollapsed ? undefined : "15%",
-						minHeight: timelineCollapsed ? 0 : 160,
+						height: timelineCollapsed ? undefined : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
+						minHeight: timelineCollapsed ? 0 : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
+						maxHeight: timelineCollapsed ? undefined : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
 					}}
 				>
 					<TimelineEditor
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index b2a97a1e..fe92bce9 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -2059,7 +2059,7 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
 		}
 
 		return (
-			<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-auto">
+			<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-hidden">
 				{hideToolbar ? null : (
 					<div className="flex items-center gap-2 px-4 py-2 border-b border-foreground/10 bg-editor-panel">
 						<div className="flex items-center gap-1">
diff --git a/src/components/video-editor/timeline/timelineLayout.test.ts b/src/components/video-editor/timeline/timelineLayout.test.ts
index 42cdd329..3e880dbd 100644
--- a/src/components/video-editor/timeline/timelineLayout.test.ts
+++ b/src/components/video-editor/timeline/timelineLayout.test.ts
@@ -4,6 +4,8 @@ import {
 	getTimelineRowsMinHeightPx,
 	TIMELINE_AXIS_HEIGHT_PX,
 	TIMELINE_ROW_MIN_HEIGHT_PX,
+	TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
+	TIMELINE_VISIBLE_ROW_COUNT,
 } from "./timelineLayout";
 
 describe("timelineLayout", () => {
@@ -28,4 +30,11 @@ describe("timelineLayout", () => {
 			TIMELINE_AXIS_HEIGHT_PX + 2 * TIMELINE_ROW_MIN_HEIGHT_PX,
 		);
 	});
+
+	it("caps the default timeline viewport to two visible rows", () => {
+		expect(TIMELINE_VISIBLE_ROW_COUNT).toBe(2);
+		expect(TIMELINE_VIEWPORT_MIN_HEIGHT_PX).toBe(
+			TIMELINE_AXIS_HEIGHT_PX + TIMELINE_VISIBLE_ROW_COUNT * TIMELINE_ROW_MIN_HEIGHT_PX,
+		);
+	});
 });
diff --git a/src/components/video-editor/timeline/timelineLayout.ts b/src/components/video-editor/timeline/timelineLayout.ts
index bdf03a17..072b64d3 100644
--- a/src/components/video-editor/timeline/timelineLayout.ts
+++ b/src/components/video-editor/timeline/timelineLayout.ts
@@ -1,5 +1,6 @@
 export const TIMELINE_AXIS_HEIGHT_PX = 32;
 export const TIMELINE_ROW_MIN_HEIGHT_PX = 28;
+export const TIMELINE_VISIBLE_ROW_COUNT = 2;
 
 function normalizeRowCount(rowCount: number) {
 	if (!Number.isFinite(rowCount)) {
@@ -16,3 +17,7 @@ export function getTimelineRowsMinHeightPx(rowCount: number) {
 export function getTimelineContentMinHeightPx(rowCount: number) {
 	return TIMELINE_AXIS_HEIGHT_PX + getTimelineRowsMinHeightPx(rowCount);
 }
+
+export const TIMELINE_VIEWPORT_MIN_HEIGHT_PX = getTimelineContentMinHeightPx(
+	TIMELINE_VISIBLE_ROW_COUNT,
+);

From ce69a2afc5bdf259051d69509158480235c418ee Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:29:26 +1000
Subject: [PATCH 6/9] fix(timeline): stretch visible rows without capping panel

---
 src/components/video-editor/VideoEditor.tsx          |  6 ++----
 .../video-editor/timeline/TimelineEditor.tsx         |  5 ++++-
 .../video-editor/timeline/timelineLayout.test.ts     |  9 +++++----
 .../video-editor/timeline/timelineLayout.ts          | 12 +++++++++---
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index e95372c2..580627ac 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -124,7 +124,6 @@ import {
 	RECORDLY_ISSUES_URL,
 } from "./TutorialHelp";
 import TimelineEditor, { type TimelineEditorHandle } from "./timeline/TimelineEditor";
-import { TIMELINE_VIEWPORT_MIN_HEIGHT_PX } from "./timeline/timelineLayout";
 import { normalizeCursorTelemetry } from "./timeline/zoomSuggestionUtils";
 import {
 	type AnnotationRegion,
@@ -5699,9 +5698,8 @@ export default function VideoEditor() {
 				<div
 					className="flex-shrink-0 flex flex-col"
 					style={{
-						height: timelineCollapsed ? undefined : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
-						minHeight: timelineCollapsed ? 0 : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
-						maxHeight: timelineCollapsed ? undefined : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
+						height: timelineCollapsed ? undefined : "15%",
+						minHeight: timelineCollapsed ? 0 : 160,
 					}}
 				>
 					<TimelineEditor
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index fe92bce9..ee3c314d 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -63,6 +63,8 @@ import TimelineWrapper from "./TimelineWrapper";
 import {
 	getTimelineContentMinHeightPx,
 	getTimelineRowsMinHeightPx,
+	getTimelineViewportStretchFactor,
+	TIMELINE_AXIS_HEIGHT_PX,
 } from "./timelineLayout";
 import { type AudioPeaksData, useAudioPeaks } from "./useAudioPeaks";
 import { buildInteractionZoomSuggestions } from "./zoomSuggestionUtils";
@@ -709,13 +711,14 @@ function Timeline({
 	const timelineRowCount = 2 + annotationRowIds.length + audioRowIds.length;
 	const timelineRowsMinHeightPx = getTimelineRowsMinHeightPx(timelineRowCount);
 	const timelineContentMinHeightPx = getTimelineContentMinHeightPx(timelineRowCount);
+	const timelineViewportStretchFactor = getTimelineViewportStretchFactor(timelineRowCount);
 
 	return (
 		<div
 			ref={setRefs}
 			style={{
 				...style,
-				minHeight: `max(100%, ${timelineContentMinHeightPx}px)`,
+				minHeight: `max(100%, ${timelineContentMinHeightPx}px, calc(${TIMELINE_AXIS_HEIGHT_PX}px + (100% - ${TIMELINE_AXIS_HEIGHT_PX}px) * ${timelineViewportStretchFactor}))`,
 			}}
 			className="select-none bg-editor-bg relative cursor-pointer group flex flex-col"
 			onClick={handleTimelineClick}
diff --git a/src/components/video-editor/timeline/timelineLayout.test.ts b/src/components/video-editor/timeline/timelineLayout.test.ts
index 3e880dbd..38c26138 100644
--- a/src/components/video-editor/timeline/timelineLayout.test.ts
+++ b/src/components/video-editor/timeline/timelineLayout.test.ts
@@ -2,9 +2,9 @@ import { describe, expect, it } from "vitest";
 import {
 	getTimelineContentMinHeightPx,
 	getTimelineRowsMinHeightPx,
+	getTimelineViewportStretchFactor,
 	TIMELINE_AXIS_HEIGHT_PX,
 	TIMELINE_ROW_MIN_HEIGHT_PX,
-	TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
 	TIMELINE_VISIBLE_ROW_COUNT,
 } from "./timelineLayout";
 
@@ -33,8 +33,9 @@ describe("timelineLayout", () => {
 
 	it("caps the default timeline viewport to two visible rows", () => {
 		expect(TIMELINE_VISIBLE_ROW_COUNT).toBe(2);
-		expect(TIMELINE_VIEWPORT_MIN_HEIGHT_PX).toBe(
-			TIMELINE_AXIS_HEIGHT_PX + TIMELINE_VISIBLE_ROW_COUNT * TIMELINE_ROW_MIN_HEIGHT_PX,
-		);
+		expect(getTimelineViewportStretchFactor(2)).toBe(1);
+		expect(getTimelineViewportStretchFactor(4)).toBe(2);
+		expect(getTimelineViewportStretchFactor(5)).toBe(2.5);
+		expect(getTimelineViewportStretchFactor(0)).toBe(1);
 	});
 });
diff --git a/src/components/video-editor/timeline/timelineLayout.ts b/src/components/video-editor/timeline/timelineLayout.ts
index 072b64d3..0f54c4b4 100644
--- a/src/components/video-editor/timeline/timelineLayout.ts
+++ b/src/components/video-editor/timeline/timelineLayout.ts
@@ -18,6 +18,12 @@ export function getTimelineContentMinHeightPx(rowCount: number) {
 	return TIMELINE_AXIS_HEIGHT_PX + getTimelineRowsMinHeightPx(rowCount);
 }
 
-export const TIMELINE_VIEWPORT_MIN_HEIGHT_PX = getTimelineContentMinHeightPx(
-	TIMELINE_VISIBLE_ROW_COUNT,
-);
+export function getTimelineViewportStretchFactor(rowCount: number) {
+	const normalizedRowCount = normalizeRowCount(rowCount);
+
+	if (normalizedRowCount <= 0) {
+		return 1;
+	}
+
+	return Math.max(1, normalizedRowCount / TIMELINE_VISIBLE_ROW_COUNT);
+}

From 1ea47c8ef19279341794804dc4d9b411beffd696 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:33:13 +1000
Subject: [PATCH 7/9] revert: undo recent session changes

---
 src/components/video-editor/SettingsPanel.tsx         | 10 ----------
 .../video-editor/timeline/TimelineEditor.tsx          |  7 ++-----
 .../video-editor/timeline/timelineLayout.test.ts      | 10 ----------
 .../video-editor/timeline/timelineLayout.ts           | 11 -----------
 src/i18n/locales/en/settings.json                     |  1 -
 src/i18n/locales/es/settings.json                     |  1 -
 src/i18n/locales/fr/settings.json                     |  1 -
 src/i18n/locales/ko/settings.json                     |  1 -
 src/i18n/locales/nl/settings.json                     |  1 -
 src/i18n/locales/pt-BR/settings.json                  |  1 -
 src/i18n/locales/zh-CN/settings.json                  |  1 -
 11 files changed, 2 insertions(+), 43 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 670c6532..51b1a0c7 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -2848,16 +2848,6 @@ export function SettingsPanel({
 									className="data-[state=checked]:bg-[#2563EB] scale-75"
 								/>
 							</div>
-							<div className="flex items-center justify-between rounded-lg bg-foreground/[0.03] px-2.5 py-1.5">
-								<span className="text-[10px] text-muted-foreground">
-									{tSettings("effects.webcamMirror", "Mirror Webcam")}
-								</span>
-								<Switch
-									checked={webcam?.mirror ?? defaultWebcam.mirror}
-									onCheckedChange={(mirror) => updateWebcam({ mirror })}
-									className="data-[state=checked]:bg-[#2563EB] scale-75"
-								/>
-							</div>
 							<div className="flex items-center justify-between rounded-lg bg-foreground/[0.03] px-2.5 py-1.5">
 								<span className="text-[10px] text-muted-foreground">
 									{tSettings("effects.webcamReactToZoom")}
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index ee3c314d..b2a97a1e 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -63,8 +63,6 @@ import TimelineWrapper from "./TimelineWrapper";
 import {
 	getTimelineContentMinHeightPx,
 	getTimelineRowsMinHeightPx,
-	getTimelineViewportStretchFactor,
-	TIMELINE_AXIS_HEIGHT_PX,
 } from "./timelineLayout";
 import { type AudioPeaksData, useAudioPeaks } from "./useAudioPeaks";
 import { buildInteractionZoomSuggestions } from "./zoomSuggestionUtils";
@@ -711,14 +709,13 @@ function Timeline({
 	const timelineRowCount = 2 + annotationRowIds.length + audioRowIds.length;
 	const timelineRowsMinHeightPx = getTimelineRowsMinHeightPx(timelineRowCount);
 	const timelineContentMinHeightPx = getTimelineContentMinHeightPx(timelineRowCount);
-	const timelineViewportStretchFactor = getTimelineViewportStretchFactor(timelineRowCount);
 
 	return (
 		<div
 			ref={setRefs}
 			style={{
 				...style,
-				minHeight: `max(100%, ${timelineContentMinHeightPx}px, calc(${TIMELINE_AXIS_HEIGHT_PX}px + (100% - ${TIMELINE_AXIS_HEIGHT_PX}px) * ${timelineViewportStretchFactor}))`,
+				minHeight: `max(100%, ${timelineContentMinHeightPx}px)`,
 			}}
 			className="select-none bg-editor-bg relative cursor-pointer group flex flex-col"
 			onClick={handleTimelineClick}
@@ -2062,7 +2059,7 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
 		}
 
 		return (
-			<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-hidden">
+			<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-auto">
 				{hideToolbar ? null : (
 					<div className="flex items-center gap-2 px-4 py-2 border-b border-foreground/10 bg-editor-panel">
 						<div className="flex items-center gap-1">
diff --git a/src/components/video-editor/timeline/timelineLayout.test.ts b/src/components/video-editor/timeline/timelineLayout.test.ts
index 38c26138..42cdd329 100644
--- a/src/components/video-editor/timeline/timelineLayout.test.ts
+++ b/src/components/video-editor/timeline/timelineLayout.test.ts
@@ -2,10 +2,8 @@ import { describe, expect, it } from "vitest";
 import {
 	getTimelineContentMinHeightPx,
 	getTimelineRowsMinHeightPx,
-	getTimelineViewportStretchFactor,
 	TIMELINE_AXIS_HEIGHT_PX,
 	TIMELINE_ROW_MIN_HEIGHT_PX,
-	TIMELINE_VISIBLE_ROW_COUNT,
 } from "./timelineLayout";
 
 describe("timelineLayout", () => {
@@ -30,12 +28,4 @@ describe("timelineLayout", () => {
 			TIMELINE_AXIS_HEIGHT_PX + 2 * TIMELINE_ROW_MIN_HEIGHT_PX,
 		);
 	});
-
-	it("caps the default timeline viewport to two visible rows", () => {
-		expect(TIMELINE_VISIBLE_ROW_COUNT).toBe(2);
-		expect(getTimelineViewportStretchFactor(2)).toBe(1);
-		expect(getTimelineViewportStretchFactor(4)).toBe(2);
-		expect(getTimelineViewportStretchFactor(5)).toBe(2.5);
-		expect(getTimelineViewportStretchFactor(0)).toBe(1);
-	});
 });
diff --git a/src/components/video-editor/timeline/timelineLayout.ts b/src/components/video-editor/timeline/timelineLayout.ts
index 0f54c4b4..bdf03a17 100644
--- a/src/components/video-editor/timeline/timelineLayout.ts
+++ b/src/components/video-editor/timeline/timelineLayout.ts
@@ -1,6 +1,5 @@
 export const TIMELINE_AXIS_HEIGHT_PX = 32;
 export const TIMELINE_ROW_MIN_HEIGHT_PX = 28;
-export const TIMELINE_VISIBLE_ROW_COUNT = 2;
 
 function normalizeRowCount(rowCount: number) {
 	if (!Number.isFinite(rowCount)) {
@@ -17,13 +16,3 @@ export function getTimelineRowsMinHeightPx(rowCount: number) {
 export function getTimelineContentMinHeightPx(rowCount: number) {
 	return TIMELINE_AXIS_HEIGHT_PX + getTimelineRowsMinHeightPx(rowCount);
 }
-
-export function getTimelineViewportStretchFactor(rowCount: number) {
-	const normalizedRowCount = normalizeRowCount(rowCount);
-
-	if (normalizedRowCount <= 0) {
-		return 1;
-	}
-
-	return Math.max(1, normalizedRowCount / TIMELINE_VISIBLE_ROW_COUNT);
-}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 162f2f14..c788b132 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -85,7 +85,6 @@
 		"webcamFootageAdded": "Webcam footage linked",
 		"webcamFootageRemoved": "Webcam footage removed",
 		"webcamSize": "Webcam Size",
-		"webcamMirror": "Mirror Webcam",
 		"webcamReactToZoom": "Webcam Reacts To Zoom",
 		"webcamRoundness": "Webcam Roundness",
 		"webcamShadow": "Webcam Shadow",
diff --git a/src/i18n/locales/es/settings.json b/src/i18n/locales/es/settings.json
index 9d7617b7..ab686b30 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -85,7 +85,6 @@
 		"webcamFootageAdded": "Metraje de cámara vinculado",
 		"webcamFootageRemoved": "Metraje de cámara eliminado",
 		"webcamSize": "Tamaño de cámara",
-		"webcamMirror": "Reflejar cámara",
 		"webcamReactToZoom": "La cámara reacciona al zoom",
 		"webcamRoundness": "Redondez de cámara",
 		"webcamShadow": "Sombra de cámara",
diff --git a/src/i18n/locales/fr/settings.json b/src/i18n/locales/fr/settings.json
index 0342c078..c4748e3d 100644
--- a/src/i18n/locales/fr/settings.json
+++ b/src/i18n/locales/fr/settings.json
@@ -85,7 +85,6 @@
 		"webcamFootageAdded": "Vidéo de webcam liée",
 		"webcamFootageRemoved": "Vidéo de webcam supprimée",
 		"webcamSize": "Taille de la webcam",
-		"webcamMirror": "Inverser la webcam",
 		"webcamReactToZoom": "La webcam réagit au zoom",
 		"webcamRoundness": "Arrondi de la webcam",
 		"webcamShadow": "Ombre de la webcam",
diff --git a/src/i18n/locales/ko/settings.json b/src/i18n/locales/ko/settings.json
index 592f176c..62f6f8fd 100644
--- a/src/i18n/locales/ko/settings.json
+++ b/src/i18n/locales/ko/settings.json
@@ -85,7 +85,6 @@
 		"webcamFootageAdded": "웹캠 영상을 연결했습니다",
 		"webcamFootageRemoved": "웹캠 영상을 제거했습니다",
 		"webcamSize": "웹캠 크기",
-		"webcamMirror": "웹캠 좌우 반전",
 		"webcamReactToZoom": "확대 시 웹캠 반응",
 		"webcamRoundness": "웹캠 둥글기",
 		"webcamShadow": "웹캠 그림자",
diff --git a/src/i18n/locales/nl/settings.json b/src/i18n/locales/nl/settings.json
index 259c1696..2aaa43e9 100644
--- a/src/i18n/locales/nl/settings.json
+++ b/src/i18n/locales/nl/settings.json
@@ -85,7 +85,6 @@
 		"webcamFootageAdded": "Webcambeelden gekoppeld",
 		"webcamFootageRemoved": "Webcambeelden verwijderd",
 		"webcamSize": "Webcamgrootte",
-		"webcamMirror": "Webcam spiegelen",
 		"webcamReactToZoom": "Webcam reageert op zoom",
 		"webcamRoundness": "Webcam-afronding",
 		"webcamShadow": "Webcamschaduw",
diff --git a/src/i18n/locales/pt-BR/settings.json b/src/i18n/locales/pt-BR/settings.json
index 0f9e834d..86e969d5 100644
--- a/src/i18n/locales/pt-BR/settings.json
+++ b/src/i18n/locales/pt-BR/settings.json
@@ -85,7 +85,6 @@
 		"webcamFootageAdded": "Filmagem da webcam vinculada",
 		"webcamFootageRemoved": "Filmagem da webcam removida",
 		"webcamSize": "Tamanho da webcam",
-		"webcamMirror": "Espelhar webcam",
 		"webcamReactToZoom": "Webcam reage ao zoom",
 		"webcamRoundness": "Arredondamento da webcam",
 		"webcamShadow": "Sombra da webcam",
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index 508ec4d0..dae55a79 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -85,7 +85,6 @@
 		"webcamFootageAdded": "已关联摄像头素材",
 		"webcamFootageRemoved": "已移除摄像头素材",
 		"webcamSize": "摄像头大小",
-		"webcamMirror": "镜像摄像头",
 		"webcamReactToZoom": "摄像头随缩放变化",
 		"webcamRoundness": "摄像头圆角",
 		"webcamShadow": "摄像头阴影",

From dc59b8dd0a21e53c2dc1f8f893ff994e1f32030a Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:50:30 +1000
Subject: [PATCH 8/9] Loop wallpaper videos during export

---
 src/lib/exporter/modernFrameRenderer.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/lib/exporter/modernFrameRenderer.ts b/src/lib/exporter/modernFrameRenderer.ts
index c300a454..bb343c93 100644
--- a/src/lib/exporter/modernFrameRenderer.ts
+++ b/src/lib/exporter/modernFrameRenderer.ts
@@ -862,18 +862,6 @@ export class FrameRenderer {
 					videoSrc = await getAssetPath(wallpaper.replace(/^\//, ""));
 				}
 
-				try {
-					const frameSource = new ForwardFrameSource();
-					await frameSource.initialize(videoSrc);
-					this.backgroundForwardFrameSource = frameSource;
-					return;
-				} catch (error) {
-					console.warn(
-						"[FrameRenderer] Decoder-backed wallpaper source unavailable during export; falling back to media element sync:",
-						error,
-					);
-				}
-
 				const backgroundSource = await resolveMediaElementSource(videoSrc);
 				this.cleanupBackgroundSource = backgroundSource.revoke;
 

From 798740cd19252fa1d78aed624c4da3d1faa80383 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:52:15 +1000
Subject: [PATCH 9/9] fix(timeline): restore visible track row height

---
 .../video-editor/timeline/TimelineEditor.tsx          |  7 +++++--
 .../video-editor/timeline/TimelineWrapper.tsx         |  2 +-
 .../video-editor/timeline/timelineLayout.test.ts      | 10 ++++++++++
 .../video-editor/timeline/timelineLayout.ts           | 11 +++++++++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index b2a97a1e..128ac5c9 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -63,6 +63,8 @@ import TimelineWrapper from "./TimelineWrapper";
 import {
 	getTimelineContentMinHeightPx,
 	getTimelineRowsMinHeightPx,
+	getTimelineViewportStretchFactor,
+	TIMELINE_AXIS_HEIGHT_PX,
 } from "./timelineLayout";
 import { type AudioPeaksData, useAudioPeaks } from "./useAudioPeaks";
 import { buildInteractionZoomSuggestions } from "./zoomSuggestionUtils";
@@ -709,13 +711,14 @@ function Timeline({
 	const timelineRowCount = 2 + annotationRowIds.length + audioRowIds.length;
 	const timelineRowsMinHeightPx = getTimelineRowsMinHeightPx(timelineRowCount);
 	const timelineContentMinHeightPx = getTimelineContentMinHeightPx(timelineRowCount);
+	const timelineViewportStretchFactor = getTimelineViewportStretchFactor(timelineRowCount);
 
 	return (
 		<div
 			ref={setRefs}
 			style={{
 				...style,
-				minHeight: `max(100%, ${timelineContentMinHeightPx}px)`,
+				height: `max(100%, ${timelineContentMinHeightPx}px, calc(${TIMELINE_AXIS_HEIGHT_PX}px + (100% - ${TIMELINE_AXIS_HEIGHT_PX}px) * ${timelineViewportStretchFactor}))`,
 			}}
 			className="select-none bg-editor-bg relative cursor-pointer group flex flex-col"
 			onClick={handleTimelineClick}
@@ -2059,7 +2062,7 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
 		}
 
 		return (
-			<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-auto">
+			<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-hidden">
 				{hideToolbar ? null : (
 					<div className="flex items-center gap-2 px-4 py-2 border-b border-foreground/10 bg-editor-panel">
 						<div className="flex items-center gap-1">
diff --git a/src/components/video-editor/timeline/TimelineWrapper.tsx b/src/components/video-editor/timeline/TimelineWrapper.tsx
index fed0431c..32a94565 100644
--- a/src/components/video-editor/timeline/TimelineWrapper.tsx
+++ b/src/components/video-editor/timeline/TimelineWrapper.tsx
@@ -375,7 +375,7 @@ export default function TimelineWrapper({
 			autoScroll={{ enabled: false }}
 			resizeHandleWidth={28}
 		>
-			<div className="relative min-h-full">
+			<div className="relative h-full min-h-0">
 				{children}
 				{/* Floating tooltip shown during drag/resize */}
 				<div
diff --git a/src/components/video-editor/timeline/timelineLayout.test.ts b/src/components/video-editor/timeline/timelineLayout.test.ts
index 42cdd329..ba175632 100644
--- a/src/components/video-editor/timeline/timelineLayout.test.ts
+++ b/src/components/video-editor/timeline/timelineLayout.test.ts
@@ -2,8 +2,10 @@ import { describe, expect, it } from "vitest";
 import {
 	getTimelineContentMinHeightPx,
 	getTimelineRowsMinHeightPx,
+	getTimelineViewportStretchFactor,
 	TIMELINE_AXIS_HEIGHT_PX,
 	TIMELINE_ROW_MIN_HEIGHT_PX,
+	TIMELINE_VISIBLE_ROW_COUNT,
 } from "./timelineLayout";
 
 describe("timelineLayout", () => {
@@ -28,4 +30,12 @@ describe("timelineLayout", () => {
 			TIMELINE_AXIS_HEIGHT_PX + 2 * TIMELINE_ROW_MIN_HEIGHT_PX,
 		);
 	});
+
+	it("stretches content height to keep a two-row viewport", () => {
+		expect(TIMELINE_VISIBLE_ROW_COUNT).toBe(2);
+		expect(getTimelineViewportStretchFactor(2)).toBe(1);
+		expect(getTimelineViewportStretchFactor(4)).toBe(2);
+		expect(getTimelineViewportStretchFactor(5)).toBe(2.5);
+		expect(getTimelineViewportStretchFactor(0)).toBe(1);
+	});
 });
diff --git a/src/components/video-editor/timeline/timelineLayout.ts b/src/components/video-editor/timeline/timelineLayout.ts
index bdf03a17..0f54c4b4 100644
--- a/src/components/video-editor/timeline/timelineLayout.ts
+++ b/src/components/video-editor/timeline/timelineLayout.ts
@@ -1,5 +1,6 @@
 export const TIMELINE_AXIS_HEIGHT_PX = 32;
 export const TIMELINE_ROW_MIN_HEIGHT_PX = 28;
+export const TIMELINE_VISIBLE_ROW_COUNT = 2;
 
 function normalizeRowCount(rowCount: number) {
 	if (!Number.isFinite(rowCount)) {
@@ -16,3 +17,13 @@ export function getTimelineRowsMinHeightPx(rowCount: number) {
 export function getTimelineContentMinHeightPx(rowCount: number) {
 	return TIMELINE_AXIS_HEIGHT_PX + getTimelineRowsMinHeightPx(rowCount);
 }
+
+export function getTimelineViewportStretchFactor(rowCount: number) {
+	const normalizedRowCount = normalizeRowCount(rowCount);
+
+	if (normalizedRowCount <= 0) {
+		return 1;
+	}
+
+	return Math.max(1, normalizedRowCount / TIMELINE_VISIBLE_ROW_COUNT);
+}