From de6d1aed982941064cc34af1be816dc284a95c04 Mon Sep 17 00:00:00 2001 From: Siddharth Date: Sun, 12 Oct 2025 14:45:22 -0700 Subject: [PATCH] apply transparent bg dynamically --- dist-electron/main.js | 56 +++++++++++++++++++++---- dist-electron/preload.mjs | 3 ++ electron/main.ts | 61 +++++++++++++++++++++++---- electron/preload.ts | 3 ++ src/App.tsx | 73 +++++++++++++++------------------ src/components/LaunchWindow.tsx | 52 +++++++++++++++++++++++ src/index.css | 71 -------------------------------- src/vite-env.d.ts | 6 +++ 8 files changed, 198 insertions(+), 127 deletions(-) create mode 100644 src/components/LaunchWindow.tsx diff --git a/dist-electron/main.js b/dist-electron/main.js index d938516..47c4487 100644 --- a/dist-electron/main.js +++ b/dist-electron/main.js @@ -10,13 +10,12 @@ 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 win; -function createWindow() { +function createHudOverlayWindow() { win = new BrowserWindow({ - icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"), width: 250, height: 80, - minWidth: 360, - maxWidth: 360, + minWidth: 250, + maxWidth: 250, minHeight: 80, maxHeight: 80, frame: false, @@ -26,7 +25,10 @@ function createWindow() { skipTaskbar: true, hasShadow: false, webPreferences: { - preload: path.join(__dirname, "preload.mjs") + preload: path.join(__dirname, "preload.mjs"), + nodeIntegration: false, + contextIsolation: true, + backgroundThrottling: false } }); win.setResizable(false); @@ -34,11 +36,44 @@ function createWindow() { win == null ? void 0 : win.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString()); }); if (VITE_DEV_SERVER_URL) { - win.loadURL(VITE_DEV_SERVER_URL); + win.loadURL(VITE_DEV_SERVER_URL + "?windowType=hud-overlay"); } else { - win.loadFile(path.join(RENDERER_DIST, "index.html")); + win.loadFile(path.join(RENDERER_DIST, "index.html"), { + query: { windowType: "hud-overlay" } + }); } } +function createEditorWindow() { + win = new BrowserWindow({ + width: 1200, + height: 800, + minWidth: 800, + minHeight: 600, + frame: true, + transparent: false, + resizable: true, + alwaysOnTop: false, + skipTaskbar: false, + webPreferences: { + preload: path.join(__dirname, "preload.mjs"), + nodeIntegration: false, + contextIsolation: true + } + }); + 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) { + win.loadURL(VITE_DEV_SERVER_URL + "?windowType=editor"); + } else { + win.loadFile(path.join(RENDERER_DIST, "index.html"), { + query: { windowType: "editor" } + }); + } +} +function createWindow() { + createHudOverlayWindow(); +} app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); @@ -53,6 +88,13 @@ app.on("activate", () => { ipcMain.handle("get-sources", async (_, opts) => { return await desktopCapturer.getSources(opts); }); +ipcMain.handle("switch-to-editor", () => { + if (win) { + win.close(); + win = null; + } + createEditorWindow(); +}); app.whenReady().then(createWindow); export { MAIN_DIST, diff --git a/dist-electron/preload.mjs b/dist-electron/preload.mjs index bee3c3f..c80af2b 100644 --- a/dist-electron/preload.mjs +++ b/dist-electron/preload.mjs @@ -3,5 +3,8 @@ const electron = require("electron"); electron.contextBridge.exposeInMainWorld("electronAPI", { getSources: async (opts) => { return await electron.ipcRenderer.invoke("get-sources", opts); + }, + switchToEditor: () => { + return electron.ipcRenderer.invoke("switch-to-editor"); } }); diff --git a/electron/main.ts b/electron/main.ts index d9b76b4..aa4d73b 100644 --- a/electron/main.ts +++ b/electron/main.ts @@ -26,13 +26,12 @@ process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, let win: BrowserWindow | null -function createWindow() { +function createHudOverlayWindow() { win = new BrowserWindow({ - icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'), width: 250, height: 80, - minWidth: 360, - maxWidth: 360, + minWidth: 250, + maxWidth: 250, minHeight: 80, maxHeight: 80, frame: false, @@ -43,25 +42,63 @@ function createWindow() { hasShadow: false, webPreferences: { preload: path.join(__dirname, 'preload.mjs'), + nodeIntegration: false, + contextIsolation: true, + backgroundThrottling: false, }, }) // Absolutely lock the size win.setResizable(false) - // Test active push message to Renderer-process. win.webContents.on('did-finish-load', () => { win?.webContents.send('main-process-message', (new Date).toLocaleString()) }) if (VITE_DEV_SERVER_URL) { - win.loadURL(VITE_DEV_SERVER_URL) + win.loadURL(VITE_DEV_SERVER_URL + '?windowType=hud-overlay') } else { - // win.loadFile('dist/index.html') - win.loadFile(path.join(RENDERER_DIST, 'index.html')) + win.loadFile(path.join(RENDERER_DIST, 'index.html'), { + query: { windowType: 'hud-overlay' } + }) } } +function createEditorWindow() { + win = new BrowserWindow({ + width: 1200, + height: 800, + minWidth: 800, + minHeight: 600, + frame: true, + transparent: false, + resizable: true, + alwaysOnTop: false, + skipTaskbar: false, + webPreferences: { + preload: path.join(__dirname, 'preload.mjs'), + nodeIntegration: false, + contextIsolation: true, + }, + }) + + win.webContents.on('did-finish-load', () => { + win?.webContents.send('main-process-message', (new Date).toLocaleString()) + }) + + if (VITE_DEV_SERVER_URL) { + win.loadURL(VITE_DEV_SERVER_URL + '?windowType=editor') + } else { + win.loadFile(path.join(RENDERER_DIST, 'index.html'), { + query: { windowType: 'editor' } + }) + } +} + +function createWindow() { + createHudOverlayWindow() +} + // Quit when all windows are closed, except on macOS. There, it's common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd + Q. @@ -84,4 +121,12 @@ ipcMain.handle('get-sources', async (_, opts) => { return await desktopCapturer.getSources(opts) }) +ipcMain.handle('switch-to-editor', () => { + if (win) { + win.close() + win = null + } + createEditorWindow() +}) + app.whenReady().then(createWindow) diff --git a/electron/preload.ts b/electron/preload.ts index b51a411..0d394ea 100644 --- a/electron/preload.ts +++ b/electron/preload.ts @@ -3,5 +3,8 @@ import { contextBridge, ipcRenderer } from 'electron' contextBridge.exposeInMainWorld('electronAPI', { getSources: async (opts: Electron.SourcesOptions) => { return await ipcRenderer.invoke('get-sources', opts) + }, + switchToEditor: () => { + return ipcRenderer.invoke('switch-to-editor') } }) \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index f146f27..b0f87f5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,48 +1,39 @@ -import { useScreenRecorder } from "./hooks/useScreenRecorder"; -import { Button } from "@/components/ui/button"; -import { BsRecordCircle } from "react-icons/bs"; -import { FaRegStopCircle } from "react-icons/fa"; -import { MdMonitor } from "react-icons/md"; +import { LaunchWindow } from "./components/LaunchWindow"; +import { useEffect, useState } from "react"; export default function App() { - const { recording, toggleRecording } = useScreenRecorder(); + const [windowType, setWindowType] = useState(''); + + useEffect(() => { + const urlParams = new URLSearchParams(window.location.search); + const type = urlParams.get('windowType') || 'default'; + setWindowType(type); + + // Apply transparency only for HUD overlay windows + if (type === 'hud-overlay') { + document.body.style.background = 'transparent'; + document.documentElement.style.background = 'transparent'; + const root = document.getElementById('root'); + if (root) root.style.background = 'transparent'; + } + }, []); + + if (windowType === 'hud-overlay') { + return ; + } + + if (windowType === 'editor') { + return ( +
+

Video Editor

+

Recording stopped. Video editor interface coming soon...

+
+ ); + } return ( -
-
- - -
- - -
+
+

Default Window

); } diff --git a/src/components/LaunchWindow.tsx b/src/components/LaunchWindow.tsx new file mode 100644 index 0000000..5d9533a --- /dev/null +++ b/src/components/LaunchWindow.tsx @@ -0,0 +1,52 @@ +import { useScreenRecorder } from "../hooks/useScreenRecorder"; +import { Button } from "@/components/ui/button"; +import { BsRecordCircle } from "react-icons/bs"; +import { FaRegStopCircle } from "react-icons/fa"; +import { MdMonitor } from "react-icons/md"; + +export function LaunchWindow() { + const { recording, toggleRecording } = useScreenRecorder(); + + return ( +
+
+ + +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 42299a3..628823a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,78 +1,7 @@ -body { - background: transparent !important; -} @tailwind base; @tailwind components; @tailwind utilities; -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} - - - @layer base { :root { --background: 0 0% 100%; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 7d0ff9e..b8f0d54 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,7 @@ /// +interface Window { + electronAPI: { + getSources: (opts: Electron.SourcesOptions) => Promise + switchToEditor: () => Promise + } +} \ No newline at end of file