feat: lock screen event

src/ambient.d.ts

@@ -1,3 +1,4 @@
+import { IpcRendererEvent } from 'electron';
 import * as MonacoType from 'monaco-editor';
 
 import {
@@ -58,6 +59,10 @@ declare global {
         type: 'engine-status-changed',
         listener: (status: string, port: string) => void,
       ): void;
+      addEventListener(
+        type: 'power-monitor',
+        listener: (event: string) => void,
+      ): void;
       addEventListener(
         type: 'engine-stdout',
         listener: (data: string) => void,

src/interfaces.ts

@@ -193,6 +193,7 @@ export type FiddleEvent =
   | 'open-settings'
   | 'open-template'
   | 'package-fiddle'
+  | 'power-monitor'
   | 'redo-in-editor'
   | 'run-fiddle'
   | 'save-fiddle-gist'

src/ipc-events.ts

@@ -82,6 +82,7 @@ export enum IpcEvents {
   ENGINE_STDOUT = 'ENGINE_STDOUT',
   ENGINE_STDERR = 'ENGINE_STDERR',
   GET_ENGINE_STATUS = 'GET_ENGINE_STATUS',
+  POWER_MONITOR = 'POWER_MONITOR',
 }
 
 export const ipcMainEvents = [
@@ -136,6 +137,7 @@ export const ipcMainEvents = [
   IpcEvents.ENGINE_STDOUT,
   IpcEvents.ENGINE_STDERR,
   IpcEvents.GET_ENGINE_STATUS,
+  IpcEvents.POWER_MONITOR,
 ];
 
 export const WEBCONTENTS_READY_FOR_IPC_SIGNAL =

src/main/main.ts

@@ -4,6 +4,7 @@ import {
   IpcMainEvent,
   app,
   nativeTheme,
+  powerMonitor,
   systemPreferences,
 } from 'electron';
 
@@ -60,6 +61,7 @@ export async function onReady() {
   setupThemes();
   setupIsDevMode();
   setupNpm();
+  setupPowerMonitor();
   const knownVersions = await setupVersions();
   setupGetProjectName();
   setupGetUsername();
@@ -76,6 +78,16 @@ export async function onReady() {
   processCommandLine(argv);
 }
 
+const POWER_MONITOR_EVENTS = ['lock-screen', 'unlock-screen'];
+
+export function setupPowerMonitor() {
+  POWER_MONITOR_EVENTS.forEach((event) => {
+    powerMonitor.on(event as any, () => {
+      ipcMainManager.send(IpcEvents.POWER_MONITOR, [event]);
+    });
+  });
+}
+
 /**
  * Handle the "before-quit" event
  */

src/preload/preload.ts

@@ -59,6 +59,7 @@ const channelMapping: Record<FiddleEvent, IpcEvents> = {
   'engine-started': IpcEvents.ENGINE_STARTED,
   'engine-stdout': IpcEvents.ENGINE_STDOUT,
   'engine-stderr': IpcEvents.ENGINE_STDERR,
+  'power-monitor': IpcEvents.POWER_MONITOR,
 } as const;
 
 async function preload() {

src/renderer/components/main-viewer.tsx

@@ -1,18 +1,36 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Spinner } from '@blueprintjs/core';
+import type { WebviewTag } from 'electron';
 import { observer } from 'mobx-react-lite';
 
 import { AppState } from '../state';
 
 export const MainViewer = observer(({ appState }: { appState: AppState }) => {
-  console.log('🚀 ~ MainViewer ~ appState:', appState.enginePort);
+  const ref = React.useRef<WebviewTag>(null);
+  useEffect(() => {
+    window.ElectronFiddle.addEventListener('power-monitor', (event: string) => {
+      if (ref.current) {
+        ref.current.executeJavaScript(`
+          window.postMessage('${event}', '*');
+        `);
+      } else {
+        console.warn('⚠️ webview not found!');
+      }
+    });
+
+    return () => {
+      window.ElectronFiddle.removeAllListeners('power-monitor');
+    };
+  }, []);
+
   if (
     (appState.engineStatus === 'ready' || appState.engineStatus === 'remote') &&
     appState.enginePort
   ) {
     return (
       <webview
+        ref={ref}
         id="mainView"
         src={appState.enginePort}
         style={{ width: '100%', height: '100%' }}