logo update

V0.1

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: siddharthvaddem
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a sissgle Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/build.yml

@@ -1,43 +0,0 @@
-name: Build Electron App
-
-on:
-  push:
-    branches: [ main, master ]
-  workflow_dispatch:
-
-jobs:
-
-
-  build-macos:
-    runs-on: macos-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '22'
-      
-      - name: Setup Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: '3.11'
-          
-      - name: Install dependencies
-        run: npm ci
-        
-      - name: Install app dependencies
-        run: npx electron-builder install-app-deps
-        
-      - name: Build macOS app
-        run: npm run build:mac
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        
-      - name: Upload macOS build
-        uses: actions/upload-artifact@v4
-        with:
-          name: macos-installer
-          path: release/**/*.dmg
-          retention-days: 30

README.md

@@ -33,14 +33,10 @@ OpenScreen is 100% free for personal and commercial use. Use it, modify it, dist
 - Add manual zooms (customizable depth levels)
 - Customize the duration and position of zooms however you please
 - Crop video recordings to hide parts
-- Choose between wallpapers, solid colors, or gradients for your background
+- Choose between wallpapers, solid colors, gradients or your own picture for your background
 - Motion blur and exponential easing for smoother pan and zoom effects
 
-**Note:**
-- After you install the app, you'll need to grant it accessibility and screen recording permissions for it to work properly.
-
-
-## macOS Installation Instructions
+## macOS Installation instructions
 
 Download the latest installer for your platform from the [GitHub Releases](https://github.com/siddharthvaddem/openscreen/releases) page.
 
@@ -67,4 +63,5 @@ _I'm new to open source, idk what I'm doing lol. If something is wrong please ra
 
 ## License
 
-This project is licensed under the [MIT License](./LICENSE). By using this software, you agree that the authors are not liable for any issues, damages, or claims arising from its use.
+
+This project is licensed under the [MIT License](./LICENSE). By using this software, you agree that the authors are not liable for any issues, damages, or claims arising from its use.

dist-electron/main.js

@@ -1,483 +1,343 @@
-import { BrowserWindow, screen, ipcMain, desktopCapturer, shell, app, nativeImage, Tray, Menu } from "electron";
-import { fileURLToPath } from "node:url";
-import path from "node:path";
-import fs from "node:fs/promises";
-import { uIOhook } from "uiohook-napi";
-const __dirname$1 = path.dirname(fileURLToPath(import.meta.url));
-const APP_ROOT = path.join(__dirname$1, "..");
-const VITE_DEV_SERVER_URL$1 = process.env["VITE_DEV_SERVER_URL"];
-const RENDERER_DIST$1 = path.join(APP_ROOT, "dist");
-function createHudOverlayWindow() {
-  const win = new BrowserWindow({
+import { BrowserWindow as P, screen as O, ipcMain as c, desktopCapturer as M, shell as W, app as p, nativeImage as L, Tray as V, Menu as U } from "electron";
+import { fileURLToPath as E } from "node:url";
+import t from "node:path";
+import m from "node:fs/promises";
+import { uIOhook as w } from "uiohook-napi";
+const S = t.dirname(E(import.meta.url)), A = t.join(S, ".."), y = process.env.VITE_DEV_SERVER_URL, x = t.join(A, "dist");
+function C() {
+  const e = new P({
     width: 250,
     height: 80,
     minWidth: 250,
     maxWidth: 250,
     minHeight: 80,
     maxHeight: 80,
-    frame: false,
-    transparent: true,
-    resizable: false,
-    alwaysOnTop: true,
-    skipTaskbar: true,
-    hasShadow: false,
+    frame: !1,
+    transparent: !0,
+    resizable: !1,
+    alwaysOnTop: !0,
+    skipTaskbar: !0,
+    hasShadow: !1,
     webPreferences: {
-      preload: path.join(__dirname$1, "preload.mjs"),
-      nodeIntegration: false,
-      contextIsolation: true,
-      backgroundThrottling: false
+      preload: t.join(S, "preload.mjs"),
+      nodeIntegration: !1,
+      contextIsolation: !0,
+      backgroundThrottling: !1
     }
   });
-  win.webContents.on("did-finish-load", () => {
-    win == null ? void 0 : win.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
-  });
-  if (VITE_DEV_SERVER_URL$1) {
-    win.loadURL(VITE_DEV_SERVER_URL$1 + "?windowType=hud-overlay");
-  } else {
-    win.loadFile(path.join(RENDERER_DIST$1, "index.html"), {
-      query: { windowType: "hud-overlay" }
-    });
-  }
-  return win;
+  return e.webContents.on("did-finish-load", () => {
+    e == null || e.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
+  }), y ? e.loadURL(y + "?windowType=hud-overlay") : e.loadFile(t.join(x, "index.html"), {
+    query: { windowType: "hud-overlay" }
+  }), e;
 }
-function createEditorWindow() {
-  const win = new BrowserWindow({
+function N() {
+  const e = new P({
     width: 1200,
     height: 800,
     minWidth: 800,
     minHeight: 600,
     titleBarStyle: "hiddenInset",
     trafficLightPosition: { x: 12, y: 12 },
-    transparent: false,
-    resizable: true,
-    alwaysOnTop: false,
-    skipTaskbar: false,
+    transparent: !1,
+    resizable: !0,
+    alwaysOnTop: !1,
+    skipTaskbar: !1,
     title: "OpenScreen",
     backgroundColor: "#000000",
     webPreferences: {
-      preload: path.join(__dirname$1, "preload.mjs"),
-      nodeIntegration: false,
-      contextIsolation: true,
-      webSecurity: false
+      preload: t.join(S, "preload.mjs"),
+      nodeIntegration: !1,
+      contextIsolation: !0,
+      webSecurity: !1
     }
   });
-  win.maximize();
-  win.webContents.on("did-finish-load", () => {
-    win == null ? void 0 : win.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
-  });
-  if (VITE_DEV_SERVER_URL$1) {
-    win.loadURL(VITE_DEV_SERVER_URL$1 + "?windowType=editor");
-  } else {
-    win.loadFile(path.join(RENDERER_DIST$1, "index.html"), {
-      query: { windowType: "editor" }
-    });
-  }
-  return win;
+  return e.maximize(), e.webContents.on("did-finish-load", () => {
+    e == null || e.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
+  }), y ? e.loadURL(y + "?windowType=editor") : e.loadFile(t.join(x, "index.html"), {
+    query: { windowType: "editor" }
+  }), e;
 }
-function createSourceSelectorWindow() {
-  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
-  const win = new BrowserWindow({
+function H() {
+  const { width: e, height: n } = O.getPrimaryDisplay().workAreaSize, i = new P({
     width: 620,
     height: 420,
     minHeight: 350,
     maxHeight: 500,
-    x: Math.round((width - 620) / 2),
-    y: Math.round((height - 420) / 2),
-    frame: false,
-    resizable: false,
-    alwaysOnTop: true,
-    transparent: true,
+    x: Math.round((e - 620) / 2),
+    y: Math.round((n - 420) / 2),
+    frame: !1,
+    resizable: !1,
+    alwaysOnTop: !0,
+    transparent: !0,
     backgroundColor: "#00000000",
     webPreferences: {
-      preload: path.join(__dirname$1, "preload.mjs"),
-      nodeIntegration: false,
-      contextIsolation: true
+      preload: t.join(S, "preload.mjs"),
+      nodeIntegration: !1,
+      contextIsolation: !0
     }
   });
-  if (VITE_DEV_SERVER_URL$1) {
-    win.loadURL(VITE_DEV_SERVER_URL$1 + "?windowType=source-selector");
-  } else {
-    win.loadFile(path.join(RENDERER_DIST$1, "index.html"), {
-      query: { windowType: "source-selector" }
-    });
-  }
-  return win;
+  return y ? i.loadURL(y + "?windowType=source-selector") : i.loadFile(t.join(x, "index.html"), {
+    query: { windowType: "source-selector" }
+  }), i;
 }
-let isMouseTrackingActive = false;
-let isHookStarted = false;
-let recordingStartTime = 0;
-let mouseEventData = [];
-function startMouseTracking() {
-  if (isMouseTrackingActive) {
-    return { success: false, message: "Already tracking" };
-  }
-  isMouseTrackingActive = true;
-  recordingStartTime = performance.now();
-  mouseEventData = [];
-  if (!isHookStarted) {
-    setupMouseEventListeners();
-    try {
-      uIOhook.start();
-      isHookStarted = true;
-      return { success: true, message: "Mouse tracking started", startTime: recordingStartTime };
-    } catch (error) {
-      console.error("Failed to start mouse tracking:", error);
-      isMouseTrackingActive = false;
-      return { success: false, message: "Failed to start hook", error };
-    }
-  } else {
-    return { success: true, message: "Mouse tracking resumed", startTime: recordingStartTime };
+let u = !1, _ = !1, d = 0, f = [];
+function z() {
+  if (u)
+    return { success: !1, message: "Already tracking" };
+  if (u = !0, d = performance.now(), f = [], _)
+    return { success: !0, message: "Mouse tracking resumed", startTime: d };
+  q();
+  try {
+    return w.start(), _ = !0, { success: !0, message: "Mouse tracking started", startTime: d };
+  } catch (e) {
+    return console.error("Failed to start mouse tracking:", e), u = !1, { success: !1, message: "Failed to start hook", error: e };
   }
 }
-function stopMouseTracking() {
-  if (!isMouseTrackingActive) {
-    return { success: false, message: "Not currently tracking" };
-  }
-  isMouseTrackingActive = false;
-  const duration = performance.now() - recordingStartTime;
-  const session = {
-    startTime: recordingStartTime,
-    events: mouseEventData,
-    duration
-  };
+function B() {
+  if (!u)
+    return { success: !1, message: "Not currently tracking" };
+  u = !1;
+  const e = performance.now() - d;
   return {
-    success: true,
+    success: !0,
     message: "Mouse tracking stopped",
-    data: session
+    data: {
+      startTime: d,
+      events: f,
+      duration: e
+    }
   };
 }
-function setupMouseEventListeners() {
-  uIOhook.on("mousemove", (e) => {
-    if (isMouseTrackingActive) {
-      const timestamp = performance.now() - recordingStartTime;
-      const event = {
+function q() {
+  w.on("mousemove", (e) => {
+    if (u) {
+      const i = {
         type: "move",
-        timestamp,
+        timestamp: performance.now() - d,
         x: e.x,
         y: e.y
       };
-      mouseEventData.push(event);
+      f.push(i);
     }
-  });
-  uIOhook.on("mousedown", (e) => {
-    if (isMouseTrackingActive) {
-      const timestamp = performance.now() - recordingStartTime;
-      const event = {
+  }), w.on("mousedown", (e) => {
+    if (u) {
+      const i = {
         type: "down",
-        timestamp,
+        timestamp: performance.now() - d,
         x: e.x,
         y: e.y,
         button: e.button,
         clicks: e.clicks
       };
-      mouseEventData.push(event);
+      f.push(i);
     }
-  });
-  uIOhook.on("mouseup", (e) => {
-    if (isMouseTrackingActive) {
-      const timestamp = performance.now() - recordingStartTime;
-      const event = {
+  }), w.on("mouseup", (e) => {
+    if (u) {
+      const i = {
         type: "up",
-        timestamp,
+        timestamp: performance.now() - d,
         x: e.x,
         y: e.y,
         button: e.button
       };
-      mouseEventData.push(event);
+      f.push(i);
     }
-  });
-  uIOhook.on("click", (e) => {
-    if (isMouseTrackingActive) {
-      const timestamp = performance.now() - recordingStartTime;
-      const event = {
+  }), w.on("click", (e) => {
+    if (u) {
+      const i = {
         type: "click",
-        timestamp,
+        timestamp: performance.now() - d,
         x: e.x,
         y: e.y,
         button: e.button,
         clicks: e.clicks
       };
-      mouseEventData.push(event);
+      f.push(i);
     }
   });
 }
-function getTrackingData() {
-  return [...mouseEventData];
+function $() {
+  return [...f];
 }
-function cleanupMouseTracking() {
-  if (isHookStarted) {
+function G() {
+  if (_)
     try {
-      uIOhook.stop();
-      isHookStarted = false;
-      isMouseTrackingActive = false;
-      mouseEventData = [];
-    } catch (error) {
-      console.error("Error cleaning up mouse tracking:", error);
+      w.stop(), _ = !1, u = !1, f = [];
+    } catch (e) {
+      console.error("Error cleaning up mouse tracking:", e);
     }
-  }
 }
-let selectedSource = null;
-function registerIpcHandlers(createEditorWindow2, createSourceSelectorWindow2, getMainWindow, getSourceSelectorWindow, onRecordingStateChange) {
-  ipcMain.handle("get-sources", async (_, opts) => {
-    const sources = await desktopCapturer.getSources(opts);
-    return sources.map((source) => ({
-      id: source.id,
-      name: source.name,
-      display_id: source.display_id,
-      thumbnail: source.thumbnail ? source.thumbnail.toDataURL() : null,
-      appIcon: source.appIcon ? source.appIcon.toDataURL() : null
-    }));
-  });
-  ipcMain.handle("select-source", (_, source) => {
-    selectedSource = source;
-    const sourceSelectorWin = getSourceSelectorWindow();
-    if (sourceSelectorWin) {
-      sourceSelectorWin.close();
-    }
-    return selectedSource;
-  });
-  ipcMain.handle("get-selected-source", () => {
-    return selectedSource;
-  });
-  ipcMain.handle("open-source-selector", () => {
-    const sourceSelectorWin = getSourceSelectorWindow();
-    if (sourceSelectorWin) {
-      sourceSelectorWin.focus();
+let b = null;
+function J(e, n, i, v, T) {
+  c.handle("get-sources", async (o, a) => (await M.getSources(a)).map((r) => ({
+    id: r.id,
+    name: r.name,
+    display_id: r.display_id,
+    thumbnail: r.thumbnail ? r.thumbnail.toDataURL() : null,
+    appIcon: r.appIcon ? r.appIcon.toDataURL() : null
+  }))), c.handle("select-source", (o, a) => {
+    b = a;
+    const s = v();
+    return s && s.close(), b;
+  }), c.handle("get-selected-source", () => b), c.handle("open-source-selector", () => {
+    const o = v();
+    if (o) {
+      o.focus();
       return;
     }
-    createSourceSelectorWindow2();
-  });
-  ipcMain.handle("switch-to-editor", () => {
-    const mainWin = getMainWindow();
-    if (mainWin) {
-      mainWin.close();
-    }
-    createEditorWindow2();
-  });
-  ipcMain.handle("start-mouse-tracking", () => {
-    return startMouseTracking();
-  });
-  ipcMain.handle("stop-mouse-tracking", () => {
-    return stopMouseTracking();
-  });
-  ipcMain.handle("store-recorded-video", async (_, videoData, fileName) => {
+    n();
+  }), c.handle("switch-to-editor", () => {
+    const o = i();
+    o && o.close(), e();
+  }), c.handle("start-mouse-tracking", () => z()), c.handle("stop-mouse-tracking", () => B()), c.handle("store-recorded-video", async (o, a, s) => {
     try {
-      const videoPath = path.join(RECORDINGS_DIR, fileName);
-      await fs.writeFile(videoPath, Buffer.from(videoData));
-      return {
-        success: true,
-        path: videoPath,
+      const r = t.join(h, s);
+      return await m.writeFile(r, Buffer.from(a)), {
+        success: !0,
+        path: r,
         message: "Video stored successfully"
       };
-    } catch (error) {
-      console.error("Failed to store video:", error);
-      return {
-        success: false,
+    } catch (r) {
+      return console.error("Failed to store video:", r), {
+        success: !1,
         message: "Failed to store video",
-        error: String(error)
+        error: String(r)
       };
     }
-  });
-  ipcMain.handle("store-mouse-tracking-data", async (_, fileName) => {
+  }), c.handle("store-mouse-tracking-data", async (o, a) => {
     try {
-      const data = getTrackingData();
-      if (data.length === 0) {
-        return { success: false, message: "No tracking data to save" };
-      }
-      const trackingPath = path.join(RECORDINGS_DIR, fileName);
-      await fs.writeFile(trackingPath, JSON.stringify(data, null, 2), "utf-8");
-      return {
-        success: true,
-        path: trackingPath,
-        eventCount: data.length,
+      const s = $();
+      if (s.length === 0)
+        return { success: !1, message: "No tracking data to save" };
+      const r = t.join(h, a);
+      return await m.writeFile(r, JSON.stringify(s, null, 2), "utf-8"), {
+        success: !0,
+        path: r,
+        eventCount: s.length,
         message: "Mouse tracking data stored successfully"
       };
-    } catch (error) {
-      console.error("Failed to store mouse tracking data:", error);
-      return {
-        success: false,
+    } catch (s) {
+      return console.error("Failed to store mouse tracking data:", s), {
+        success: !1,
         message: "Failed to store mouse tracking data",
-        error: String(error)
+        error: String(s)
       };
     }
-  });
-  ipcMain.handle("get-recorded-video-path", async () => {
+  }), c.handle("get-recorded-video-path", async () => {
     try {
-      const files = await fs.readdir(RECORDINGS_DIR);
-      const videoFiles = files.filter((file) => file.endsWith(".webm"));
-      if (videoFiles.length === 0) {
-        return { success: false, message: "No recorded video found" };
-      }
-      const latestVideo = videoFiles.sort().reverse()[0];
-      const videoPath = path.join(RECORDINGS_DIR, latestVideo);
-      return { success: true, path: videoPath };
-    } catch (error) {
-      console.error("Failed to get video path:", error);
-      return { success: false, message: "Failed to get video path", error: String(error) };
+      const a = (await m.readdir(h)).filter((R) => R.endsWith(".webm"));
+      if (a.length === 0)
+        return { success: !1, message: "No recorded video found" };
+      const s = a.sort().reverse()[0];
+      return { success: !0, path: t.join(h, s) };
+    } catch (o) {
+      return console.error("Failed to get video path:", o), { success: !1, message: "Failed to get video path", error: String(o) };
     }
-  });
-  ipcMain.handle("set-recording-state", (_, recording) => {
-    const source = selectedSource || { name: "Screen" };
-    if (onRecordingStateChange) {
-      onRecordingStateChange(recording, source.name);
-    }
-  });
-  ipcMain.handle("open-external-url", async (_, url) => {
+  }), c.handle("set-recording-state", (o, a) => {
+    T && T(a, (b || { name: "Screen" }).name);
+  }), c.handle("open-external-url", async (o, a) => {
     try {
-      await shell.openExternal(url);
-      return { success: true };
-    } catch (error) {
-      console.error("Failed to open URL:", error);
-      return { success: false, error: String(error) };
+      return await W.openExternal(a), { success: !0 };
+    } catch (s) {
+      return console.error("Failed to open URL:", s), { success: !1, error: String(s) };
     }
-  });
-  ipcMain.handle("get-asset-base-path", () => {
+  }), c.handle("get-asset-base-path", () => {
     try {
-      if (app.isPackaged) {
-        return path.join(process.resourcesPath, "assets");
-      }
-      return path.join(app.getAppPath(), "public", "assets");
-    } catch (err) {
-      console.error("Failed to resolve asset base path:", err);
-      return null;
+      return p.isPackaged ? t.join(process.resourcesPath, "assets") : t.join(p.getAppPath(), "public", "assets");
+    } catch (o) {
+      return console.error("Failed to resolve asset base path:", o), null;
     }
-  });
-  ipcMain.handle("save-exported-video", async (_, videoData, fileName) => {
+  }), c.handle("save-exported-video", async (o, a, s) => {
     try {
-      const downloadsPath = app.getPath("downloads");
-      const videoPath = path.join(downloadsPath, fileName);
-      await fs.writeFile(videoPath, Buffer.from(videoData));
-      return {
-        success: true,
-        path: videoPath,
+      const r = p.getPath("downloads"), R = t.join(r, s);
+      return await m.writeFile(R, Buffer.from(a)), {
+        success: !0,
+        path: R,
         message: "Video exported successfully"
       };
-    } catch (error) {
-      console.error("Failed to save exported video:", error);
-      return {
-        success: false,
+    } catch (r) {
+      return console.error("Failed to save exported video:", r), {
+        success: !1,
         message: "Failed to save exported video",
-        error: String(error)
+        error: String(r)
       };
     }
   });
 }
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const RECORDINGS_DIR = path.join(app.getPath("userData"), "recordings");
-async function cleanupOldRecordings() {
+const K = t.dirname(E(import.meta.url)), h = t.join(p.getPath("userData"), "recordings");
+async function Q() {
   try {
-    const files = await fs.readdir(RECORDINGS_DIR);
-    const now = Date.now();
-    const maxAge = 1 * 24 * 60 * 60 * 1e3;
-    for (const file of files) {
-      const filePath = path.join(RECORDINGS_DIR, file);
-      const stats = await fs.stat(filePath);
-      if (now - stats.mtimeMs > maxAge) {
-        await fs.unlink(filePath);
-        console.log(`Deleted old recording: ${file}`);
-      }
+    const e = await m.readdir(h), n = Date.now(), i = 1 * 24 * 60 * 60 * 1e3;
+    for (const v of e) {
+      const T = t.join(h, v), o = await m.stat(T);
+      n - o.mtimeMs > i && (await m.unlink(T), console.log(`Deleted old recording: ${v}`));
     }
-  } catch (error) {
-    console.error("Failed to cleanup old recordings:", error);
+  } catch (e) {
+    console.error("Failed to cleanup old recordings:", e);
   }
 }
-async function ensureRecordingsDir() {
+async function X() {
   try {
-    await fs.mkdir(RECORDINGS_DIR, { recursive: true });
-    console.log("Recordings directory ready:", RECORDINGS_DIR);
-  } catch (error) {
-    console.error("Failed to create recordings directory:", error);
+    await m.mkdir(h, { recursive: !0 }), console.log("Recordings directory ready:", h);
+  } catch (e) {
+    console.error("Failed to create recordings directory:", e);
   }
 }
-process.env.APP_ROOT = path.join(__dirname, "..");
-const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
-const MAIN_DIST = path.join(process.env.APP_ROOT, "dist-electron");
-const RENDERER_DIST = path.join(process.env.APP_ROOT, "dist");
-process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, "public") : RENDERER_DIST;
-let mainWindow = null;
-let sourceSelectorWindow = null;
-let tray = null;
-let selectedSourceName = "";
-function createWindow() {
-  mainWindow = createHudOverlayWindow();
+process.env.APP_ROOT = t.join(K, "..");
+const Y = process.env.VITE_DEV_SERVER_URL, ie = t.join(process.env.APP_ROOT, "dist-electron"), I = t.join(process.env.APP_ROOT, "dist");
+process.env.VITE_PUBLIC = Y ? t.join(process.env.APP_ROOT, "public") : I;
+let l = null, k = null, g = null, j = "";
+function D() {
+  l = C();
 }
-function createTray() {
-  const iconPath = path.join(process.env.VITE_PUBLIC || RENDERER_DIST, "rec-button.png");
-  let icon = nativeImage.createFromPath(iconPath);
-  icon = icon.resize({ width: 24, height: 24, quality: "best" });
-  tray = new Tray(icon);
-  updateTrayMenu();
+function Z() {
+  const e = t.join(process.env.VITE_PUBLIC || I, "rec-button.png");
+  let n = L.createFromPath(e);
+  n = n.resize({ width: 24, height: 24, quality: "best" }), g = new V(n), F();
 }
-function updateTrayMenu() {
-  if (!tray) return;
-  const menuTemplate = [
+function F() {
+  if (!g) return;
+  const e = [
     {
       label: "Stop Recording",
       click: () => {
-        if (mainWindow && !mainWindow.isDestroyed()) {
-          mainWindow.webContents.send("stop-recording-from-tray");
-        }
+        l && !l.isDestroyed() && l.webContents.send("stop-recording-from-tray");
       }
     }
-  ];
-  const contextMenu = Menu.buildFromTemplate(menuTemplate);
-  tray.setContextMenu(contextMenu);
-  tray.setToolTip(`Recording: ${selectedSourceName}`);
+  ], n = U.buildFromTemplate(e);
+  g.setContextMenu(n), g.setToolTip(`Recording: ${j}`);
 }
-function createEditorWindowWrapper() {
-  if (mainWindow) {
-    mainWindow.close();
-    mainWindow = null;
-  }
-  mainWindow = createEditorWindow();
+function ee() {
+  l && (l.close(), l = null), l = N();
 }
-function createSourceSelectorWindowWrapper() {
-  sourceSelectorWindow = createSourceSelectorWindow();
-  sourceSelectorWindow.on("closed", () => {
-    sourceSelectorWindow = null;
-  });
-  return sourceSelectorWindow;
+function te() {
+  return k = H(), k.on("closed", () => {
+    k = null;
+  }), k;
 }
-app.on("window-all-closed", () => {
+p.on("window-all-closed", () => {
 });
-app.on("activate", () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
-  }
+p.on("activate", () => {
+  P.getAllWindows().length === 0 && D();
 });
-app.on("before-quit", async (event) => {
-  event.preventDefault();
-  cleanupMouseTracking();
-  await cleanupOldRecordings();
-  app.exit(0);
+p.on("before-quit", async (e) => {
+  e.preventDefault(), G(), await Q(), p.exit(0);
 });
-app.whenReady().then(async () => {
-  await ensureRecordingsDir();
-  registerIpcHandlers(
-    createEditorWindowWrapper,
-    createSourceSelectorWindowWrapper,
-    () => mainWindow,
-    () => sourceSelectorWindow,
-    (recording, sourceName) => {
-      selectedSourceName = sourceName;
-      if (recording) {
-        if (!tray) createTray();
-        updateTrayMenu();
-        if (mainWindow) mainWindow.minimize();
-      } else {
-        if (tray) {
-          tray.destroy();
-          tray = null;
-        }
-        if (mainWindow) mainWindow.restore();
-      }
+p.whenReady().then(async () => {
+  await X(), J(
+    ee,
+    te,
+    () => l,
+    () => k,
+    (e, n) => {
+      j = n, e ? (g || Z(), F(), l && l.minimize()) : (g && (g.destroy(), g = null), l && l.restore());
     }
-  );
-  createWindow();
+  ), D();
 });
 export {
-  MAIN_DIST,
-  RECORDINGS_DIR,
-  RENDERER_DIST,
-  VITE_DEV_SERVER_URL
+  ie as MAIN_DIST,
+  h as RECORDINGS_DIR,
+  I as RENDERER_DIST,
+  Y as VITE_DEV_SERVER_URL
 };

dist-electron/preload.mjs

@@ -1,51 +1 @@
-"use strict";
-const electron = require("electron");
-electron.contextBridge.exposeInMainWorld("electronAPI", {
-  getAssetBasePath: async () => {
-    return await electron.ipcRenderer.invoke("get-asset-base-path");
-  },
-  getSources: async (opts) => {
-    return await electron.ipcRenderer.invoke("get-sources", opts);
-  },
-  switchToEditor: () => {
-    return electron.ipcRenderer.invoke("switch-to-editor");
-  },
-  openSourceSelector: () => {
-    return electron.ipcRenderer.invoke("open-source-selector");
-  },
-  selectSource: (source) => {
-    return electron.ipcRenderer.invoke("select-source", source);
-  },
-  getSelectedSource: () => {
-    return electron.ipcRenderer.invoke("get-selected-source");
-  },
-  startMouseTracking: () => {
-    return electron.ipcRenderer.invoke("start-mouse-tracking");
-  },
-  stopMouseTracking: () => {
-    return electron.ipcRenderer.invoke("stop-mouse-tracking");
-  },
-  storeRecordedVideo: (videoData, fileName) => {
-    return electron.ipcRenderer.invoke("store-recorded-video", videoData, fileName);
-  },
-  storeMouseTrackingData: (fileName) => {
-    return electron.ipcRenderer.invoke("store-mouse-tracking-data", fileName);
-  },
-  getRecordedVideoPath: () => {
-    return electron.ipcRenderer.invoke("get-recorded-video-path");
-  },
-  setRecordingState: (recording) => {
-    return electron.ipcRenderer.invoke("set-recording-state", recording);
-  },
-  onStopRecordingFromTray: (callback) => {
-    const listener = () => callback();
-    electron.ipcRenderer.on("stop-recording-from-tray", listener);
-    return () => electron.ipcRenderer.removeListener("stop-recording-from-tray", listener);
-  },
-  openExternalUrl: (url) => {
-    return electron.ipcRenderer.invoke("open-external-url", url);
-  },
-  saveExportedVideo: (videoData, fileName) => {
-    return electron.ipcRenderer.invoke("save-exported-video", videoData, fileName);
-  }
-});
+"use strict";const e=require("electron");e.contextBridge.exposeInMainWorld("electronAPI",{getAssetBasePath:async()=>await e.ipcRenderer.invoke("get-asset-base-path"),getSources:async r=>await e.ipcRenderer.invoke("get-sources",r),switchToEditor:()=>e.ipcRenderer.invoke("switch-to-editor"),openSourceSelector:()=>e.ipcRenderer.invoke("open-source-selector"),selectSource:r=>e.ipcRenderer.invoke("select-source",r),getSelectedSource:()=>e.ipcRenderer.invoke("get-selected-source"),startMouseTracking:()=>e.ipcRenderer.invoke("start-mouse-tracking"),stopMouseTracking:()=>e.ipcRenderer.invoke("stop-mouse-tracking"),storeRecordedVideo:(r,t)=>e.ipcRenderer.invoke("store-recorded-video",r,t),storeMouseTrackingData:r=>e.ipcRenderer.invoke("store-mouse-tracking-data",r),getRecordedVideoPath:()=>e.ipcRenderer.invoke("get-recorded-video-path"),setRecordingState:r=>e.ipcRenderer.invoke("set-recording-state",r),onStopRecordingFromTray:r=>{const t=()=>r();return e.ipcRenderer.on("stop-recording-from-tray",t),()=>e.ipcRenderer.removeListener("stop-recording-from-tray",t)},openExternalUrl:r=>e.ipcRenderer.invoke("open-external-url",r),saveExportedVideo:(r,t)=>e.ipcRenderer.invoke("save-exported-video",r,t)});

electron-builder.json5

@@ -6,12 +6,19 @@
   "productName": "Openscreen",
   "npmRebuild": true,
   "buildDependenciesFromSource": true,
+  "compression": "maximum",
   "directories": {
     "output": "release/${version}"
   },
   "files": [
     "dist",
-    "dist-electron"
+    "dist-electron",
+    "!*.png",
+    "!preview*.png",
+    "!*.md",
+    "!README.md",
+    "!CONTRIBUTING.md",
+    "!LICENSE"
   ],
   "extraResources": [
     {
@@ -19,6 +26,9 @@
       "to": "assets/wallpapers"
     }
   ],
+  "asarUnpack": [
+    "**/node_modules/uiohook-napi/**/*"
+  ],
   "mac": {
       "target": [
         "dmg"

package.json

@@ -24,7 +24,7 @@
     "clsx": "^2.1.1",
     "dnd-timeline": "^2.2.0",
     "lucide-react": "^0.545.0",
-    "mp4-muxer": "^5.2.2",
+    "mediabunny": "^1.25.1",
     "mp4box": "^2.2.0",
     "pixi.js": "^8.14.0",
     "react": "^18.2.0",
@@ -44,16 +44,18 @@
     "autoprefixer": "^10.4.21",
     "electron": "^30.0.1",
     "electron-builder": "^24.13.3",
+    "electron-icon-builder": "^2.0.1",
     "electron-rebuild": "^3.2.9",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.18",
+    "terser": "^5.44.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.6",
     "vite-plugin-electron": "^0.28.6",
     "vite-plugin-electron-renderer": "^0.14.5"
   },
   "main": "dist-electron/main.js"
-}
+}

src/components/video-editor/SettingsPanel.tsx

@@ -223,7 +223,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
           Crop Video
         </Button>
         <p className="text-[10px] text-slate-500 text-center mt-3 px-4 leading-relaxed">
-          If the preview looks weirdly positioned at any time, try force reloading (you will lose all your progress)
+          If the preview looks weirdly positioned or doesn't load, try force reloading the app a few times till it works.
         </p>
       </div>
       

src/components/video-editor/VideoEditor.tsx

@@ -184,15 +184,31 @@ export default function VideoEditor() {
         videoPlaybackRef.current?.pause();
       }
 
-      const width = 1920;
-      const height = 1080;
+      // Get actual video dimensions to match recording resolution
+      const video = videoPlaybackRef.current?.video;
+      if (!video) {
+        toast.error('Video not ready');
+        return;
+      }
+      
+      const width = video.videoWidth || 1920;
+      const height = video.videoHeight || 1080;
+
+      // Calculate visually lossless bitrate matching screen recording optimization
+      const totalPixels = width * height;
+      let bitrate = 30_000_000;
+      if (totalPixels > 1920 * 1080 && totalPixels <= 2560 * 1440) {
+        bitrate = 50_000_000;
+      } else if (totalPixels > 2560 * 1440) {
+        bitrate = 80_000_000;
+      }
 
       const exporter = new VideoExporter({
         videoUrl: videoPath,
         width,
         height,
         frameRate: 60,
-        bitrate: 15_000_000,
+        bitrate,
         codec: 'avc1.640033',
         wallpaper,
         zoomRegions,

src/components/video-editor/VideoPlayback.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { useEffect, useRef, useImperativeHandle, forwardRef, useState, useMemo, useCallback } from "react";
 import { getAssetPath } from "@/lib/assetPath";
-import * as PIXI from 'pixi.js';
+import { Application, Container, Sprite, Graphics, BlurFilter, Texture, VideoSource } from 'pixi.js';
 import { ZOOM_DEPTH_SCALES, type ZoomRegion, type ZoomFocus, type ZoomDepth } from "./types";
 import { DEFAULT_FOCUS, SMOOTHING_FACTOR, MIN_DELTA } from "./videoPlayback/constants";
 import { clamp01 } from "./videoPlayback/mathUtils";
@@ -31,9 +31,9 @@ interface VideoPlaybackProps {
 
 export interface VideoPlaybackRef {
   video: HTMLVideoElement | null;
-  app: PIXI.Application | null;
-  videoSprite: PIXI.Sprite | null;
-  videoContainer: PIXI.Container | null;
+  app: Application | null;
+  videoSprite: Sprite | null;
+  videoContainer: Container | null;
   play: () => Promise<void>;
   pause: () => void;
 }
@@ -56,10 +56,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
 }, ref) => {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const appRef = useRef<PIXI.Application | null>(null);
-  const videoSpriteRef = useRef<PIXI.Sprite | null>(null);
-  const videoContainerRef = useRef<PIXI.Container | null>(null);
-  const cameraContainerRef = useRef<PIXI.Container | null>(null);
+  const appRef = useRef<Application | null>(null);
+  const videoSpriteRef = useRef<Sprite | null>(null);
+  const videoContainerRef = useRef<Container | null>(null);
+  const cameraContainerRef = useRef<Container | null>(null);
   const timeUpdateAnimationRef = useRef<number | null>(null);
   const [pixiReady, setPixiReady] = useState(false);
   const [videoReady, setVideoReady] = useState(false);
@@ -69,7 +69,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
   const zoomRegionsRef = useRef<ZoomRegion[]>([]);
   const selectedZoomIdRef = useRef<string | null>(null);
   const animationStateRef = useRef({ scale: 1, focusX: DEFAULT_FOCUS.cx, focusY: DEFAULT_FOCUS.cy });
-  const blurFilterRef = useRef<PIXI.BlurFilter | null>(null);
+  const blurFilterRef = useRef<BlurFilter | null>(null);
   const isDraggingFocusRef = useRef(false);
   const stageSizeRef = useRef({ width: 0, height: 0 });
   const videoSizeRef = useRef({ width: 0, height: 0 });
@@ -77,7 +77,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
   const baseOffsetRef = useRef({ x: 0, y: 0 });
   const baseMaskRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
   const cropBoundsRef = useRef({ startX: 0, endX: 0, startY: 0, endY: 0 });
-  const maskGraphicsRef = useRef<PIXI.Graphics | null>(null);
+  const maskGraphicsRef = useRef<Graphics | null>(null);
   const isPlayingRef = useRef(isPlaying);
   const isSeekingRef = useRef(false);
   const allowPlaybackRef = useRef(false);
@@ -398,10 +398,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
     if (!container) return;
 
     let mounted = true;
-    let app: PIXI.Application | null = null;
+    let app: Application | null = null;
 
     (async () => {
-      app = new PIXI.Application();
+      app = new Application();
       
       await app.init({
         width: container.clientWidth,
@@ -423,12 +423,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
       container.appendChild(app.canvas);
 
       // Camera container - this will be scaled/positioned for zoom
-      const cameraContainer = new PIXI.Container();
+      const cameraContainer = new Container();
       cameraContainerRef.current = cameraContainer;
       app.stage.addChild(cameraContainer);
 
       // Video container - holds the masked video sprite
-      const videoContainer = new PIXI.Container();
+      const videoContainer = new Container();
       videoContainerRef.current = videoContainer;
       cameraContainer.addChild(videoContainer);
       
@@ -468,19 +468,19 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
     if (!video || !app || !videoContainer) return;
     if (video.videoWidth === 0 || video.videoHeight === 0) return;
     
-    const source = PIXI.VideoSource.from(video);
+    const source = VideoSource.from(video);
     if ('autoPlay' in source) {
       (source as { autoPlay?: boolean }).autoPlay = false;
     }
     if ('autoUpdate' in source) {
       (source as { autoUpdate?: boolean }).autoUpdate = true;
     }
-    const videoTexture = PIXI.Texture.from(source);
+    const videoTexture = Texture.from(source);
     
-    const videoSprite = new PIXI.Sprite(videoTexture);
+    const videoSprite = new Sprite(videoTexture);
     videoSpriteRef.current = videoSprite;
     
-    const maskGraphics = new PIXI.Graphics();
+    const maskGraphics = new Graphics();
     videoContainer.addChild(videoSprite);
     videoContainer.addChild(maskGraphics);
     videoContainer.mask = maskGraphics;
@@ -492,7 +492,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
       focusY: DEFAULT_FOCUS.cy,
     };
 
-    const blurFilter = new PIXI.BlurFilter();
+    const blurFilter = new BlurFilter();
     blurFilter.quality = 3;
     blurFilter.resolution = app.renderer.resolution;
     blurFilter.blur = 0;

src/components/video-editor/videoPlayback/layoutUtils.ts

@@ -1,12 +1,12 @@
-import * as PIXI from 'pixi.js';
+import { Application, Sprite, Graphics } from 'pixi.js';
 import { VIEWPORT_SCALE } from "./constants";
 import type { CropRegion } from '../types';
 
 interface LayoutParams {
   container: HTMLDivElement;
-  app: PIXI.Application;
-  videoSprite: PIXI.Sprite;
-  maskGraphics: PIXI.Graphics;
+  app: Application;
+  videoSprite: Sprite;
+  maskGraphics: Graphics;
   videoElement: HTMLVideoElement;
   cropRegion?: CropRegion;
   lockedVideoDimensions?: { width: number; height: number } | null;

src/components/video-editor/videoPlayback/zoomTransform.ts

@@ -1,8 +1,8 @@
-import * as PIXI from 'pixi.js';
+import { Container, BlurFilter } from 'pixi.js';
 
 interface TransformParams {
-  cameraContainer: PIXI.Container;
-  blurFilter: PIXI.BlurFilter | null;
+  cameraContainer: Container;
+  blurFilter: BlurFilter | null;
   stageSize: { width: number; height: number };
   baseMask: { x: number; y: number; width: number; height: number };
   zoomScale: number;

src/hooks/useScreenRecorder.ts

@@ -55,12 +55,14 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
         return;
       }
       await window.electronAPI.startMouseTracking();
+      // Capture screen at source resolution without constraints
       const mediaStream = await (navigator.mediaDevices as any).getUserMedia({
         audio: false,
         video: {
           mandatory: {
             chromeMediaSource: "desktop",
             chromeMediaSourceId: selectedSource.id,
+            frameRate: { ideal: 60, max: 60 }
           },
         },
       });
@@ -69,16 +71,30 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
         throw new Error("Media stream is not available.");
       }
       const videoTrack = stream.current.getVideoTracks()[0];
-      const { width = 1920, height = 1080 } = videoTrack.getSettings();
+      let { width = 1920, height = 1080 } = videoTrack.getSettings();
+      
+      // Ensure dimensions are divisible by 2 for VP9/AV1 codec compatibility
+      width = Math.floor(width / 2) * 2;
+      height = Math.floor(height / 2) * 2;
+      
+      console.log(`Recording at ${width}x${height}`);
+      
       const totalPixels = width * height;
-      let bitrate = 150_000_000;
+      // Use visually lossless bitrates optimized for quality and file size balance
+      let bitrate = 30_000_000;
       if (totalPixels > 1920 * 1080 && totalPixels <= 2560 * 1440) {
-        bitrate = 250_000_000;
+        bitrate = 50_000_000;
       } else if (totalPixels > 2560 * 1440) {
-        bitrate = 400_000_000;
+        bitrate = 80_000_000;
       }
       chunks.current = [];
-      const mimeType = "video/webm;codecs=vp9";
+      // Prefer AV1 codec for better compression, fallback to VP9 then VP8
+      const supportedCodecs = [
+        'video/webm;codecs=av1',
+        'video/webm;codecs=vp9',
+        'video/webm;codecs=vp8'
+      ];
+      const mimeType = supportedCodecs.find(codec => MediaRecorder.isTypeSupported(codec)) || 'video/webm;codecs=vp9';
       const recorder = new MediaRecorder(stream.current, { mimeType, videoBitsPerSecond: bitrate });
       mediaRecorder.current = recorder;
       recorder.ondataavailable = e => {
@@ -89,6 +105,8 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
         if (chunks.current.length === 0) return;
         const duration = Date.now() - startTime.current;
         const buggyBlob = new Blob(chunks.current, { type: mimeType });
+        // Clear chunks early to free memory immediately after blob creation
+        chunks.current = [];
         const timestamp = Date.now();
         const videoFileName = `recording-${timestamp}.webm`;
         const trackingFileName = `recording-${timestamp}_tracking.json`;
@@ -110,7 +128,8 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
         }
       };
       recorder.onerror = () => setRecording(false);
-      recorder.start(1000);
+      // Use larger timeslice to reduce recording overhead and improve smoothness
+      recorder.start(5000);
       startTime.current = Date.now();
       setRecording(true);
       window.electronAPI?.setRecordingState(true);

src/lib/exporter/frameRenderer.ts

@@ -1,4 +1,4 @@
-import * as PIXI from 'pixi.js';
+import { Application, Container, Sprite, Graphics, BlurFilter, Texture } from 'pixi.js';
 import type { ZoomRegion, CropRegion } from '@/components/video-editor/types';
 import { ZOOM_DEPTH_SCALES } from '@/components/video-editor/types';
 import { findDominantRegion } from '@/components/video-editor/videoPlayback/zoomRegionUtils';
@@ -27,13 +27,13 @@ interface AnimationState {
 // Renders video frames with all effects (background, zoom, crop, blur, shadow) to an offscreen canvas for export.
 
 export class FrameRenderer {
-  private app: PIXI.Application | null = null;
-  private cameraContainer: PIXI.Container | null = null;
-  private videoContainer: PIXI.Container | null = null;
-  private videoSprite: PIXI.Sprite | null = null;
-  private backgroundSprite: PIXI.Sprite | null = null;
-  private maskGraphics: PIXI.Graphics | null = null;
-  private blurFilter: PIXI.BlurFilter | null = null;
+  private app: Application | null = null;
+  private cameraContainer: Container | null = null;
+  private videoContainer: Container | null = null;
+  private videoSprite: Sprite | null = null;
+  private backgroundSprite: Sprite | null = null;
+  private maskGraphics: Graphics | null = null;
+  private blurFilter: BlurFilter | null = null;
   private shadowCanvas: HTMLCanvasElement | null = null;
   private shadowCtx: CanvasRenderingContext2D | null = null;
   private compositeCanvas: HTMLCanvasElement | null = null;
@@ -53,7 +53,7 @@ export class FrameRenderer {
   }
 
   async initialize(): Promise<void> {
-    // Create offscreen canvas with sRGB color space for fidelity
+    // Create canvas for rendering
     const canvas = document.createElement('canvas');
     canvas.width = this.config.width;
     canvas.height = this.config.height;
@@ -69,21 +69,21 @@ export class FrameRenderer {
       console.warn('[FrameRenderer] colorSpace not supported on this platform:', error);
     }
 
-    // Initialize PixiJS app with transparent background (background rendered separately)
-    this.app = new PIXI.Application();
+    // Initialize PixiJS with optimized settings for export performance
+    this.app = new Application();
     await this.app.init({
       canvas,
       width: this.config.width,
       height: this.config.height,
       backgroundAlpha: 0,
-      antialias: true,
-      resolution: 2,
+      antialias: false,
+      resolution: 1,
       autoDensity: true,
     });
 
     // Setup containers
-    this.cameraContainer = new PIXI.Container();
-    this.videoContainer = new PIXI.Container();
+    this.cameraContainer = new Container();
+    this.videoContainer = new Container();
     this.app.stage.addChild(this.cameraContainer);
     this.cameraContainer.addChild(this.videoContainer);
 
@@ -91,7 +91,7 @@ export class FrameRenderer {
     await this.setupBackground();
 
     // Setup blur filter for video container
-    this.blurFilter = new PIXI.BlurFilter();
+    this.blurFilter = new BlurFilter();
     this.blurFilter.quality = 3;
     this.blurFilter.resolution = this.app.renderer.resolution;
     this.blurFilter.blur = 0;
@@ -120,7 +120,7 @@ export class FrameRenderer {
     }
 
     // Setup mask
-    this.maskGraphics = new PIXI.Graphics();
+    this.maskGraphics = new Graphics();
     this.videoContainer.addChild(this.maskGraphics);
     this.videoContainer.mask = this.maskGraphics;
   }
@@ -251,13 +251,15 @@ export class FrameRenderer {
 
     // Create or update video sprite from VideoFrame
     if (!this.videoSprite) {
-      const texture = PIXI.Texture.from(videoFrame as any);
-      this.videoSprite = new PIXI.Sprite(texture);
+      const texture = Texture.from(videoFrame as any);
+      this.videoSprite = new Sprite(texture);
       this.videoContainer.addChild(this.videoSprite);
     } else {
-      // Update texture with new frame
-      const texture = PIXI.Texture.from(videoFrame as any);
-      this.videoSprite.texture = texture;
+      // Destroy old texture to avoid memory leaks, then create new one
+      const oldTexture = this.videoSprite.texture;
+      const newTexture = Texture.from(videoFrame as any);
+      this.videoSprite.texture = newTexture;
+      oldTexture.destroy(true);
     }
 
     // Apply layout
@@ -442,7 +444,7 @@ export class FrameRenderer {
       console.warn('[FrameRenderer] No background sprite found during compositing!');
     }
 
-    // Step 2: Draw video layer with shadows on top of background
+    // Draw video layer with shadows on top of background
     if (this.config.showShadow && this.shadowCanvas && this.shadowCtx) {
       const shadowCtx = this.shadowCtx;
       shadowCtx.clearRect(0, 0, w, h);

src/lib/exporter/muxer.ts

@@ -1,31 +1,20 @@
 import type { ExportConfig } from './types';
-
-interface MP4MuxerOptions {
-  target: any; // ArrayBufferTarget instance
-  video: {
-    codec: string;
-    width: number;
-    height: number;
-  };
-  audio?: {
-    codec: string;
-    numberOfChannels: number;
-    sampleRate: number;
-  };
-  fastStart?: 'in-memory' | 'fragmented';
-}
-
-interface Muxer {
-  addVideoChunk(chunk: EncodedVideoChunk, meta?: EncodedVideoChunkMetadata): void;
-  addAudioChunk(chunk: EncodedAudioChunk, meta?: EncodedAudioChunkMetadata): void;
-  finalize(): void;
-  target?: any;
-}
+import { 
+  Output, 
+  Mp4OutputFormat, 
+  BufferTarget, 
+  EncodedVideoPacketSource, 
+  EncodedAudioPacketSource,
+  EncodedPacket 
+} from 'mediabunny';
 
 export class VideoMuxer {
-  private muxer: Muxer | null = null;
-  private config: ExportConfig;
+  private output: Output | null = null;
+  private videoSource: EncodedVideoPacketSource | null = null;
+  private audioSource: EncodedAudioPacketSource | null = null;
   private hasAudio: boolean;
+  private target: BufferTarget | null = null;
+  private config: ExportConfig;
 
   constructor(config: ExportConfig, hasAudio = false) {
     this.config = config;
@@ -33,57 +22,68 @@ export class VideoMuxer {
   }
 
   async initialize(): Promise<void> {
-    const MP4MuxerModule = await import('mp4-muxer');
-    const MP4MuxerClass = (MP4MuxerModule as any).Muxer || MP4MuxerModule.default;
-    const ArrayBufferTarget = (MP4MuxerModule as any).ArrayBufferTarget;
+    // Create the buffer target
+    this.target = new BufferTarget();
     
-    const target = new ArrayBufferTarget();
-    
-    const options: MP4MuxerOptions = {
-      target,
-      video: {
-        codec: 'avc',
-        width: this.config.width,
-        height: this.config.height,
-      },
-      fastStart: 'in-memory',
-    };
+    this.output = new Output({
+      format: new Mp4OutputFormat({
+        fastStart: 'in-memory',
+      }),
+      target: this.target,
+    });
 
+    // Create video source - codec will be deduced from metadata
+    this.videoSource = new EncodedVideoPacketSource('avc');
+    this.output.addVideoTrack(this.videoSource, {
+      frameRate: this.config.frameRate,
+    });
+
+    // Create audio source if needed
     if (this.hasAudio) {
-      options.audio = {
-        codec: 'opus',
-        numberOfChannels: 2,
-        sampleRate: 48000,
-      };
+      this.audioSource = new EncodedAudioPacketSource('opus');
+      this.output.addAudioTrack(this.audioSource);
     }
 
-    this.muxer = new MP4MuxerClass(options) as Muxer;
+    // Start the output to begin accepting media data
+    await this.output.start();
   }
 
-  addVideoChunk(chunk: EncodedVideoChunk, meta?: EncodedVideoChunkMetadata): void {
-    if (!this.muxer) {
+  async addVideoChunk(chunk: EncodedVideoChunk, meta?: EncodedVideoChunkMetadata): Promise<void> {
+    if (!this.videoSource) {
       throw new Error('Muxer not initialized');
     }
-    this.muxer.addVideoChunk(chunk, meta);
+    
+    // Convert WebCodecs chunk to Mediabunny packet
+    const packet = EncodedPacket.fromEncodedChunk(chunk);
+    
+    // Add metadata with the first chunk
+    await this.videoSource.add(packet, meta);
   }
 
-  addAudioChunk(chunk: EncodedAudioChunk, meta?: EncodedAudioChunkMetadata): void {
-    if (!this.muxer) {
-      throw new Error('Muxer not initialized');
-    }
-    if (!this.hasAudio) {
+  async addAudioChunk(chunk: EncodedAudioChunk, meta?: EncodedAudioChunkMetadata): Promise<void> {
+    if (!this.audioSource) {
       throw new Error('Audio not configured for this muxer');
     }
-    this.muxer.addAudioChunk(chunk, meta);
+    
+    // Convert WebCodecs chunk to Mediabunny packet
+    const packet = EncodedPacket.fromEncodedChunk(chunk);
+    
+    // Add metadata with the first chunk
+    await this.audioSource.add(packet, meta);
   }
 
-  finalize(): Blob {
-    if (!this.muxer) {
+  async finalize(): Promise<Blob> {
+    if (!this.output || !this.target) {
       throw new Error('Muxer not initialized');
     }
     
-    this.muxer.finalize();
-    const buffer = this.muxer.target.buffer;
+    await this.output.finalize();
+    const buffer = this.target.buffer;
+    
+    if (!buffer) {
+      throw new Error('Failed to finalize output');
+    }
+    
     return new Blob([buffer], { type: 'video/mp4' });
   }
 }

src/lib/exporter/videoDecoder.ts

@@ -7,7 +7,6 @@ export interface DecodedVideoInfo {
 }
 
 export class VideoFileDecoder {
-  private decoder: VideoDecoder | null = null;
   private info: DecodedVideoInfo | null = null;
   private videoElement: HTMLVideoElement | null = null;
 
@@ -44,27 +43,6 @@ export class VideoFileDecoder {
     return this.videoElement;
   }
 
-  /**
-   * Seek to a specific time and wait for the frame to be ready
-   */
-  async seekToTime(timeInSeconds: number): Promise<void> {
-    if (!this.videoElement) {
-      throw new Error('Video not loaded');
-    }
-
-    return new Promise((resolve) => {
-      const video = this.videoElement!;
-      
-      const onSeeked = () => {
-        video.removeEventListener('seeked', onSeeked);
-        resolve();
-      };
-
-      video.addEventListener('seeked', onSeeked);
-      video.currentTime = timeInSeconds;
-    });
-  }
-
   getInfo(): DecodedVideoInfo | null {
     return this.info;
   }
@@ -75,12 +53,5 @@ export class VideoFileDecoder {
       this.videoElement.src = '';
       this.videoElement = null;
     }
-    
-    if (this.decoder) {
-      if (this.decoder.state !== 'closed') {
-        this.decoder.close();
-      }
-      this.decoder = null;
-    }
   }
 }

src/lib/exporter/videoExporter.ts

@@ -21,10 +21,14 @@ export class VideoExporter {
   private encoder: VideoEncoder | null = null;
   private muxer: VideoMuxer | null = null;
   private cancelled = false;
-  private encodedChunks: EncodedVideoChunk[] = [];
   private encodeQueue = 0;
-  private readonly MAX_ENCODE_QUEUE = 60;
+  // Increased queue size for better throughput with hardware encoding
+  private readonly MAX_ENCODE_QUEUE = 120;
   private videoDescription: Uint8Array | undefined;
+  private videoColorSpace: VideoColorSpaceInit | undefined;
+  // Track muxing promises for parallel processing
+  private muxingPromises: Promise<void>[] = [];
+  private chunkCount = 0;
 
   constructor(config: VideoExporterConfig) {
     this.config = config;
@@ -67,38 +71,26 @@ export class VideoExporter {
         throw new Error('Video element not available');
       }
 
-      // Process frames with optimized seeking
+      // Process frames continuously without batching delays
       const frameDuration = 1_000_000 / this.config.frameRate; // in microseconds
       let frameIndex = 0;
       const timeStep = 1 / this.config.frameRate;
 
-      // Pre-load first frame
-      videoElement.currentTime = 0;
-      await new Promise(resolve => {
-        const onSeeked = () => {
-          videoElement.removeEventListener('seeked', onSeeked);
-          resolve(null);
-        };
-        videoElement.addEventListener('seeked', onSeeked);
-      });
-
       while (frameIndex < totalFrames && !this.cancelled) {
-        const timestamp = frameIndex * frameDuration;
-        const videoTime = frameIndex * timeStep;
-        // Seek to frame (only seek if not already there)
-        if (Math.abs(videoElement.currentTime - videoTime) > 0.001) {
-          videoElement.currentTime = videoTime;
-          await Promise.race([
-            new Promise(resolve => {
-              const onSeeked = () => {
-                videoElement.removeEventListener('seeked', onSeeked);
-                // Wait for video to render the frame
-                videoElement.requestVideoFrameCallback(() => resolve(null));
-              };
-              videoElement.addEventListener('seeked', onSeeked, { once: true });
-            }),
-            new Promise(resolve => setTimeout(resolve, 200)) // higher this number, slower the export, but better capture/ no frame drops
-          ]);
+        const i = frameIndex;
+        const timestamp = i * frameDuration;
+        const videoTime = i * timeStep;
+          
+        // Seek if needed or wait for first frame to be ready
+        const needsSeek = Math.abs(videoElement.currentTime - videoTime) > 0.001;
+        if (needsSeek || i === 0) {
+          if (needsSeek) {
+            videoElement.currentTime = videoTime;
+          }
+          // Wait for video frame to be ready
+          await new Promise<void>(resolve => {
+            videoElement.requestVideoFrameCallback(() => resolve());
+          });
         }
 
         // Create a VideoFrame from the video element (on GPU!)
@@ -111,16 +103,10 @@ export class VideoExporter {
         
         videoFrame.close();
 
-        while (this.encodeQueue >= this.MAX_ENCODE_QUEUE && !this.cancelled) {
-          await new Promise(resolve => setTimeout(resolve, 1));
-        }
-
-        if (this.cancelled) break;
-
         const canvas = this.renderer!.getCanvas();
-        
 
-        // @ts-ignore - TypeScript definitions may not include all VideoFrameInit properties
+        // Create VideoFrame from canvas on GPU without reading pixels
+        // @ts-ignore - colorSpace not in TypeScript definitions but works at runtime
         const exportFrame = new VideoFrame(canvas, {
           timestamp,
           duration: frameDuration,
@@ -132,14 +118,20 @@ export class VideoExporter {
           },
         });
 
+        // Check encoder queue before encoding to keep it full
+        while (this.encodeQueue >= this.MAX_ENCODE_QUEUE && !this.cancelled) {
+          await new Promise(resolve => setTimeout(resolve, 0));
+        }
+
         if (this.encoder && this.encoder.state === 'configured') {
           this.encodeQueue++;
-          this.encoder.encode(exportFrame, { keyFrame: frameIndex % 150 === 0 });
+          this.encoder.encode(exportFrame, { keyFrame: i % 150 === 0 });
         }
         exportFrame.close();
 
         frameIndex++;
 
+        // Update progress
         if (this.config.onProgress) {
           this.config.onProgress({
             currentFrame: frameIndex,
@@ -159,26 +151,11 @@ export class VideoExporter {
         await this.encoder.flush();
       }
 
-      // Add all chunks to muxer with metadata
-      for (let i = 0; i < this.encodedChunks.length; i++) {
-        const chunk = this.encodedChunks[i];
-        const meta: EncodedVideoChunkMetadata = {};
-        
-        // Add decoder config for the first chunk
-        if (i === 0 && this.videoDescription) {
-          meta.decoderConfig = {
-            codec: this.config.codec || 'avc1.640033',
-            codedWidth: this.config.width,
-            codedHeight: this.config.height,
-            description: this.videoDescription,
-          };
-        }
-        
-        this.muxer!.addVideoChunk(chunk, meta);
-      }
+      // Wait for all muxing operations to complete
+      await Promise.all(this.muxingPromises);
 
       // Finalize muxer and get output blob
-      const blob = this.muxer!.finalize();
+      const blob = await this.muxer!.finalize();
 
       return { success: true, blob };
     } catch (error) {
@@ -193,18 +170,59 @@ export class VideoExporter {
   }
 
   private async initializeEncoder(): Promise<void> {
-    this.encodedChunks = [];
     this.encodeQueue = 0;
+    this.muxingPromises = [];
+    this.chunkCount = 0;
     let videoDescription: Uint8Array | undefined;
 
     this.encoder = new VideoEncoder({
       output: (chunk, meta) => {
+        // Capture decoder config metadata from encoder output
         if (meta?.decoderConfig?.description && !videoDescription) {
           const desc = meta.decoderConfig.description;
           videoDescription = new Uint8Array(desc instanceof ArrayBuffer ? desc : (desc as any));
           this.videoDescription = videoDescription;
         }
-        this.encodedChunks.push(chunk);
+        // Capture colorSpace from encoder metadata if provided
+        if (meta?.decoderConfig?.colorSpace && !this.videoColorSpace) {
+          this.videoColorSpace = meta.decoderConfig.colorSpace;
+        }
+        
+        // Stream chunk to muxer immediately (parallel processing)
+        const isFirstChunk = this.chunkCount === 0;
+        this.chunkCount++;
+        
+        const muxingPromise = (async () => {
+          try {
+            if (isFirstChunk && this.videoDescription) {
+              // Add decoder config for the first chunk
+              const colorSpace = this.videoColorSpace || {
+                primaries: 'bt709',
+                transfer: 'iec61966-2-1',
+                matrix: 'rgb',
+                fullRange: true,
+              };
+              
+              const metadata: EncodedVideoChunkMetadata = {
+                decoderConfig: {
+                  codec: this.config.codec || 'avc1.640033',
+                  codedWidth: this.config.width,
+                  codedHeight: this.config.height,
+                  description: this.videoDescription,
+                  colorSpace,
+                },
+              };
+              
+              await this.muxer!.addVideoChunk(chunk, metadata);
+            } else {
+              await this.muxer!.addVideoChunk(chunk, meta);
+            }
+          } catch (error) {
+            console.error('Muxing error:', error);
+          }
+        })();
+        
+        this.muxingPromises.push(muxingPromise);
         this.encodeQueue--;
       },
       error: (error) => {
@@ -262,8 +280,10 @@ export class VideoExporter {
     }
 
     this.muxer = null;
-    this.encodedChunks = [];
     this.encodeQueue = 0;
+    this.muxingPromises = [];
+    this.chunkCount = 0;
     this.videoDescription = undefined;
+    this.videoColorSpace = undefined;
   }
 }

vite.config.ts

@@ -39,4 +39,25 @@ export default defineConfig({
       '@': path.resolve(__dirname, 'src'),
     },
   },
+  build: {
+    target: 'esnext',
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+        pure_funcs: ['console.log', 'console.debug']
+      }
+    },
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'pixi': ['pixi.js'],
+          'react-vendor': ['react', 'react-dom'],
+          'video-processing': ['mediabunny', 'mp4box', '@fix-webm-duration/fix']
+        }
+      }
+    },
+    chunkSizeWarningLimit: 1000
+  }
 })