enhance autoplay into desktop overlay

js/src/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, session, shell } from 'electron';
+import { app, BrowserWindow, ipcMain, screen, session, shell } from 'electron';
 import path from 'node:path';
 import started from 'electron-squirrel-startup';
 import { updateElectronApp, UpdateSourceType } from 'update-electron-app';
@@ -22,12 +22,12 @@ if (process.platform === 'darwin' && !app.isPackaged) {
   app.dock?.setIcon(path.join(__dirname, '../../assets/icon.png'));
 }
 
+let mainWindow: BrowserWindow | null = null;
 let autoplayWindow: BrowserWindow | null = null;
 let huddleWindow: BrowserWindow | null = null;
 
 const createWindow = () => {
-  // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     resizable: true,
@@ -38,7 +38,6 @@ const createWindow = () => {
     },
   });
 
-  // and load the index.html of the app.
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
     mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
     mainWindow.webContents.openDevTools();
@@ -47,21 +46,26 @@ const createWindow = () => {
       path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`),
     );
   }
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
 };
 
 const createAutoplayWindow = () => {
-  if (autoplayWindow) {
-    autoplayWindow.focus();
-    return;
-  }
+  if (autoplayWindow) return;
 
   autoplayWindow = new BrowserWindow({
-    width: 300,
-    height: 100,
+    width: 320,
+    height: 88,
     resizable: false,
     frame: false,
     alwaysOnTop: true,
     skipTaskbar: true,
+    focusable: false,
+    show: false,
+    transparent: true,
+    hasShadow: false,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
     },
@@ -111,6 +115,13 @@ const createHuddleWindow = () => {
   });
 };
 
+function positionAutoplayWindow() {
+  if (!autoplayWindow) return;
+  const { width } = screen.getPrimaryDisplay().workAreaSize;
+  const [winW] = autoplayWindow.getSize();
+  autoplayWindow.setPosition(width - winW - 16, 16);
+}
+
 // Window control IPC handlers
 ipcMain.on('window:minimize', (event) => {
   BrowserWindow.fromWebContents(event.sender)?.minimize();
@@ -132,12 +143,6 @@ ipcMain.on('window:fullscreen', (event) => {
 });
 
 // Secondary window IPC handlers
-ipcMain.on('window:open-autoplay', () => {
-  createAutoplayWindow();
-});
-ipcMain.on('window:close-autoplay', () => {
-  autoplayWindow?.close();
-});
 ipcMain.on('window:open-huddle', () => {
   createHuddleWindow();
 });
@@ -145,6 +150,31 @@ ipcMain.on('window:close-huddle', () => {
   huddleWindow?.close();
 });
 
+// Autoplay IPC handlers
+ipcMain.on('autoplay:play', (_event, payload) => {
+  if (!autoplayWindow) createAutoplayWindow();
+  if (!autoplayWindow) return;
+
+  const isVideo = typeof payload?.mimeType === 'string' && payload.mimeType.startsWith('video/');
+  autoplayWindow.setSize(320, isVideo ? 260 : 88);
+  positionAutoplayWindow();
+
+  autoplayWindow.webContents.send('autoplay:play', payload);
+  autoplayWindow.showInactive();
+});
+
+ipcMain.on('autoplay:dismiss', () => {
+  autoplayWindow?.hide();
+});
+
+ipcMain.on('autoplay:navigate', (_event, data) => {
+  autoplayWindow?.hide();
+  if (mainWindow) {
+    mainWindow.webContents.send('autoplay:navigate', data);
+    mainWindow.focus();
+  }
+});
+
 // --- Link metadata ---
 
 const metadataCache = new Map<string, LinkMetadata>();
@@ -291,6 +321,7 @@ app.on('ready', () => {
   );
 
   createWindow();
+  createAutoplayWindow();
 });
 
 // Quit when all windows are closed, except on macOS. There, it's common