{children}
{/* Floating tooltip shown during drag/resize */}
{
@@ -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);
+}
diff --git a/src/lib/assetPath.test.ts b/src/lib/assetPath.test.ts
new file mode 100644
index 00000000..7cb51728
--- /dev/null
+++ b/src/lib/assetPath.test.ts
@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getExportableVideoUrl, 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",
+ );
+ });
+});
+
+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 8aed2ad9..6ff5ddeb 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 {
const encodedRelativePath = encodeRelativeAssetPath(relativePath);
const isWebContext =
@@ -121,6 +162,69 @@ export async function getRenderableAssetUrl(asset: string): Promise {
}
}
+async function resolveLocalMediaUrl(filePath: string): Promise {
+ 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);
+}
+
+function isBundledAssetPath(asset: string): boolean {
+ return asset.startsWith("/wallpapers/") || asset.startsWith("/app-icons/");
+}
+
+export async function getRenderableVideoUrl(asset: string): Promise {
+ if (
+ !asset ||
+ asset.startsWith("blob:") ||
+ asset.startsWith("data:") ||
+ asset.startsWith("file://") ||
+ asset.startsWith("http")
+ ) {
+ return asset;
+ }
+
+ if (isAbsoluteLocalAssetPath(asset) && !isBundledAssetPath(asset)) {
+ return resolveLocalMediaUrl(asset);
+ }
+
+ if (asset.startsWith("/") && !asset.startsWith("//")) {
+ return getAssetPath(asset.replace(/^\/+/, ""));
+ }
+
+ return asset;
+}
+
+export async function getExportableVideoUrl(asset: string): Promise {
+ 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 aa388d0b..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 } 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((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;
@@ -580,6 +606,10 @@ export class FrameRenderer {
return wallpaper;
}
+ if (isVideoWallpaperSource(wallpaper)) {
+ return getExportableVideoUrl(wallpaper);
+ }
+
if (
wallpaper.startsWith("#") ||
wallpaper.startsWith("linear-gradient") ||
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 2db3c645..bb343c93 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 } 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();
@@ -844,29 +862,39 @@ 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;
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((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 +1462,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,
);
@@ -1487,6 +1521,10 @@ export class FrameRenderer {
return wallpaper;
}
+ if (isVideoWallpaperSource(wallpaper)) {
+ return getExportableVideoUrl(wallpaper);
+ }
+
if (
wallpaper.startsWith("#") ||
wallpaper.startsWith("linear-gradient") ||