feat: lock screen event

src/ambient.d.ts

@@ -1,3 +1,4 @@
+import { IpcRendererEvent } from 'electron';
 import * as MonacoType from 'monaco-editor';
 
 import {
@@ -192,6 +193,14 @@ declare global {
       themePath: string;
       uncacheTypes(ver: RunnableVersion): Promise<void>;
       unwatchElectronTypes(): Promise<void>;
+      addIpcRenderListener: (
+        channel: string,
+        cb: (channel: string) => void,
+      ) => void;
+      removeIpcRenderListener: (
+        channel: string,
+        cb: (channel: string) => void,
+      ) => void;
     };
   }
 }

src/main/main.ts

@@ -4,6 +4,7 @@ import {
   IpcMainEvent,
   app,
   nativeTheme,
+  powerMonitor,
   systemPreferences,
 } from 'electron';
 
@@ -69,11 +70,16 @@ export async function onReady() {
   // Do this after setting everything up to ensure that
   // any IPC listeners are set up before they're used
   mainIsReady();
-  await getOrCreateMainWindow();
+  const mainWindow = await getOrCreateMainWindow();
 
   new TachybaseEngine();
 
   processCommandLine(argv);
+
+  powerMonitor.on('lock-screen', () => {
+    mainWindow.webContents.send('lock-screen');
+  });
+  return mainWindow;
 }
 
 /**

src/preload/preload.ts

@@ -268,6 +268,22 @@ export async function setupFiddleGlobal() {
     async unwatchElectronTypes() {
       await ipcRenderer.invoke(IpcEvents.UNWATCH_ELECTRON_TYPES);
     },
+    addIpcRenderListener: (
+      channel: string,
+      callback: (channel: string) => void,
+    ) => {
+      ipcRenderer.on(channel, () => {
+        callback(channel);
+      });
+    },
+    removeIpcRenderListener: (
+      channel: string,
+      callback: (channel: string) => void,
+    ) => {
+      ipcRenderer.off(channel, () => {
+        callback(channel);
+      });
+    },
   });
 }
 

src/renderer/components/main-viewer.tsx

@@ -1,11 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Spinner } from '@blueprintjs/core';
 import { observer } from 'mobx-react-lite';
 
 import { AppState } from '../state';
 
 export const MainViewer = observer(({ appState }: { appState: AppState }) => {
+  useEffect(() => {
+    const lockScreenChannel = 'lock-screen';
+    const handler = (channel: string) => {
+      const webview = document.getElementById(
+        'mainView',
+      ) as Electron.WebviewTag;
+      if (webview) {
+        webview.executeJavaScript(`
+          window.postMessage('${channel}', '*');
+        `);
+      } else {
+        console.warn('⚠️ webview not found!');
+      }
+    };
+    window.ElectronFiddle?.addIpcRenderListener(lockScreenChannel, handler);
+    return () => {
+      window.ElectronFiddle?.removeIpcRenderListener(
+        lockScreenChannel,
+        handler,
+      );
+    };
+  }, []);
+
   console.log('🚀 ~ MainViewer ~ appState:', appState.enginePort);
   if (
     (appState.engineStatus === 'ready' || appState.engineStatus === 'remote') &&
@@ -14,7 +37,7 @@ export const MainViewer = observer(({ appState }: { appState: AppState }) => {
     return (
       <webview
         id="mainView"
-        src={appState.enginePort}
+        src={`${appState.enginePort}/signin`}
         style={{ width: '100%', height: '100%' }}
       />
     );