[pull] main from siddharthvaddem:main

.github/workflows/ci.yml

@@ -42,3 +42,26 @@ jobs:
           cache: npm
       - run: npm ci
       - run: npx vite build
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium
+      # Install Electron system dependencies not covered by Playwright's chromium deps
+      - run: npx electron . --version || sudo apt-get install -y libgbm-dev
+      - run: npm run build-vite
+      # xvfb provides a virtual display; Electron needs one on Linux even with show:false
+      - run: xvfb-run --auto-servernum npm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -25,4 +25,8 @@ dist-ssr
 *.sw?
 release/**
 *.kiro/
-# npx electron-builder --mac --win
+# npx electron-builder --mac --win
+
+# Playwright
+test-results
+playwright-report/

electron/electron-env.d.ts

@@ -51,6 +51,13 @@ interface Window {
 		openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>;
 		setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>;
 		getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
+		readBinaryFile: (filePath: string) => Promise<{
+			success: boolean;
+			data?: ArrayBuffer;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
 		clearCurrentVideoPath: () => Promise<{ success: boolean }>;
 		saveProjectFile: (
 			projectData: unknown,

electron/ipc/handlers.ts

@@ -200,6 +200,29 @@ export function registerIpcHandlers(
 		}
 	});
 
+	ipcMain.handle("read-binary-file", async (_, inputPath: string) => {
+		try {
+			const normalizedPath = normalizeVideoSourcePath(inputPath);
+			if (!normalizedPath) {
+				return { success: false, message: "Invalid file path" };
+			}
+
+			const data = await fs.readFile(normalizedPath);
+			return {
+				success: true,
+				data: data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength),
+				path: normalizedPath,
+			};
+		} catch (error) {
+			console.error("Failed to read binary file:", error);
+			return {
+				success: false,
+				message: "Failed to read binary file",
+				error: String(error),
+			};
+		}
+	});
+
 	ipcMain.handle("set-recording-state", (_, recording: boolean) => {
 		if (recording) {
 			stopCursorCapture();

electron/main.ts

@@ -70,6 +70,19 @@ function createWindow() {
 	mainWindow = createHudOverlayWindow();
 }
 
+function showMainWindow() {
+	if (mainWindow && !mainWindow.isDestroyed()) {
+		if (mainWindow.isMinimized()) {
+			mainWindow.restore();
+		}
+		mainWindow.show();
+		mainWindow.focus();
+		return;
+	}
+
+	createWindow();
+}
+
 function isEditorWindow(window: BrowserWindow) {
 	return window.webContents.getURL().includes("windowType=editor");
 }
@@ -177,6 +190,12 @@ function setupApplicationMenu() {
 
 function createTray() {
 	tray = new Tray(defaultTrayIcon);
+	tray.on("click", () => {
+		showMainWindow();
+	});
+	tray.on("double-click", () => {
+		showMainWindow();
+	});
 }
 
 function getTrayIcon(filename: string) {
@@ -208,11 +227,7 @@ function updateTrayMenu(recording: boolean = false) {
 				{
 					label: "Open",
 					click: () => {
-						if (mainWindow && !mainWindow.isDestroyed()) {
-							mainWindow.isMinimized() && mainWindow.restore();
-						} else {
-							createWindow();
-						}
+						showMainWindow();
 					},
 				},
 				{
@@ -355,7 +370,7 @@ app.whenReady().then(async () => {
 			if (!tray) createTray();
 			updateTrayMenu(recording);
 			if (!recording) {
-				if (mainWindow) mainWindow.restore();
+				showMainWindow();
 			}
 		},
 	);

electron/preload.ts

@@ -60,6 +60,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	getCurrentVideoPath: () => {
 		return ipcRenderer.invoke("get-current-video-path");
 	},
+	readBinaryFile: (filePath: string) => {
+		return ipcRenderer.invoke("read-binary-file", filePath);
+	},
 	clearCurrentVideoPath: () => {
 		return ipcRenderer.invoke("clear-current-video-path");
 	},

electron/windows.ts

@@ -7,6 +7,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const APP_ROOT = path.join(__dirname, "..");
 const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
 const RENDERER_DIST = path.join(APP_ROOT, "dist");
+const HEADLESS = process.env["HEADLESS"] === "true";
 
 let hudOverlayWindow: BrowserWindow | null = null;
 
@@ -41,6 +42,7 @@ export function createHudOverlayWindow(): BrowserWindow {
 		alwaysOnTop: true,
 		skipTaskbar: true,
 		hasShadow: false,
+		show: !HEADLESS,
 		webPreferences: {
 			preload: path.join(__dirname, "preload.mjs"),
 			nodeIntegration: false,
@@ -90,6 +92,7 @@ export function createEditorWindow(): BrowserWindow {
 		skipTaskbar: false,
 		title: "OpenScreen",
 		backgroundColor: "#000000",
+		show: !HEADLESS,
 		webPreferences: {
 			preload: path.join(__dirname, "preload.mjs"),
 			nodeIntegration: false,

package.json

@@ -15,6 +15,8 @@
 		"build:linux": "tsc && vite build && electron-builder --linux",
 		"test": "vitest --run",
 		"test:watch": "vitest",
+		"build-vite": "tsc && vite build",
+		"test:e2e": "playwright test",
 		"prepare": "husky"
 	},
 	"dependencies": {
@@ -61,6 +63,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.13",
+		"@playwright/test": "^1.58.2",
 		"@types/node": "^25.0.3",
 		"@types/react": "^18.2.64",
 		"@types/react-dom": "^18.2.21",

playwright.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+	testDir: "./tests/e2e",
+	timeout: 120_000, // GIF encoding is CPU-bound; give it room
+	retries: 0,
+	reporter: "list",
+});

src/components/video-editor/SettingsPanel.tsx

@@ -33,6 +33,7 @@ import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@
 import { GIF_FRAME_RATES, GIF_SIZE_PRESETS } from "@/lib/exporter";
 import { cn } from "@/lib/utils";
 import { type AspectRatio } from "@/utils/aspectRatioUtils";
+import { getTestId } from "@/utils/getTestId";
 import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
 import { CropControl } from "./CropControl";
 import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
@@ -968,6 +969,7 @@ export function SettingsPanel({
 						MP4
 					</button>
 					<button
+						data-testid={getTestId("gif-format-button")}
 						onClick={() => onExportFormatChange?.("gif")}
 						className={cn(
 							"flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
@@ -1042,6 +1044,7 @@ export function SettingsPanel({
 								{Object.entries(GIF_SIZE_PRESETS).map(([key, _preset]) => (
 									<button
 										key={key}
+										data-testid={getTestId(`gif-size-button-${key}`)}
 										onClick={() => onGifSizePresetChange?.(key as GifSizePreset)}
 										className={cn(
 											"rounded-md transition-all text-[10px] font-medium",
@@ -1093,6 +1096,7 @@ export function SettingsPanel({
 				</div>
 
 				<Button
+					data-testid={getTestId("export-button")}
 					type="button"
 					size="lg"
 					onClick={onExport}

src/lib/exporter/streamingDecoder.ts

@@ -32,11 +32,37 @@ export class StreamingVideoDecoder {
 	private cancelled = false;
 	private metadata: DecodedVideoInfo | null = null;
 
-	async loadMetadata(videoUrl: string): Promise<DecodedVideoInfo> {
+	private async loadSourceFile(videoUrl: string): Promise<{ file: File; blob: Blob }> {
+		const isRemoteUrl = /^(https?:|blob:|data:)/i.test(videoUrl);
+
+		if (!isRemoteUrl && window.electronAPI?.readBinaryFile) {
+			const result = await window.electronAPI.readBinaryFile(videoUrl);
+			if (!result.success || !result.data) {
+				throw new Error(result.message || result.error || "Failed to read source video");
+			}
+
+			const filename = (result.path || videoUrl).split(/[\\/]/).pop() || "video";
+			const blob = new Blob([result.data]);
+			return {
+				blob,
+				file: new File([blob], filename, { type: blob.type || "application/octet-stream" }),
+			};
+		}
+
 		const response = await fetch(videoUrl);
+		if (!response.ok) {
+			throw new Error(`Failed to fetch source video: ${response.status} ${response.statusText}`);
+		}
 		const blob = await response.blob();
 		const filename = videoUrl.split("/").pop() || "video";
-		const file = new File([blob], filename, { type: blob.type });
+		return {
+			blob,
+			file: new File([blob], filename, { type: blob.type }),
+		};
+	}
+
+	async loadMetadata(videoUrl: string): Promise<DecodedVideoInfo> {
+		const { file } = await this.loadSourceFile(videoUrl);
 
 		// Relative URL so it resolves correctly in both dev (http) and packaged (file://) builds
 		const wasmUrl = new URL("./wasm/web-demuxer.wasm", window.location.href).href;

src/utils/getTestId.ts

@@ -0,0 +1,5 @@
+export type TestId = `gif-size-button-${string}` | "export-button" | `gif-format-button`;
+
+export function getTestId(testId: TestId) {
+	return `testId-${testId}`;
+}