feat: Add BrowserView and synchronize its position

1 files changed, 42 insertions, 21 deletions

diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 90102a7..59b9ecb 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -18,11 +18,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserView, BrowserWindow } from 'electron';
+import { autorun } from 'mobx';
 import { getSnapshot, onPatch } from 'mobx-state-tree';
 import { join } from 'path';
 import {
+  browserViewBounds,
   MainToRendererIpcMessage,
+  paletteMode,
   RendererToMainIpcMessage,
 } from '@sophie/shared';
 import { URL } from 'url';
@@ -31,7 +34,7 @@ import {
   installDevToolsExtensions,
   openDevToolsWhenReady,
 } from './devTools';
-import { rootStore } from './stores/RootStore';
+import { createRootStore } from './stores/RootStore';
 
 const isSingleInstance = app.requestSingleInstanceLock();
 const isDevelopment = import.meta.env.MODE === 'development';
@@ -49,19 +52,13 @@ if (isDevelopment) {
 
 let mainWindow: BrowserWindow | null = null;
 
-const store = rootStore.create({
-  shared: {
-    clickCount: 1,
-  },
-});
+const store = createRootStore();
 
-function createWindow(): Promise<void> {
+async function createWindow(): Promise<void> {
   mainWindow = new BrowserWindow({
     show: false,
     autoHideMenuBar: true,
     webPreferences: {
-      nativeWindowOpen: true,
-      webviewTag: false,
       sandbox: true,
       preload: join(__dirname, '../../preload/dist/index.cjs'),
     },
@@ -78,16 +75,23 @@ function createWindow(): Promise<void> {
   const { webContents } = mainWindow;
 
   webContents.on('ipc-message', (_event, channel, ...args) => {
-    switch (channel) {
-      case RendererToMainIpcMessage.SharedStoreSnapshotRequest:
-        webContents.send(MainToRendererIpcMessage.SharedStoreSnapshot, getSnapshot(store.shared));
-        break;
-      case RendererToMainIpcMessage.ButtonClick:
-        store.buttonClick();
-        break;
-      default:
-        console.warn('Unknown IPC message:', channel, args);
-        break;
+    try {
+      switch (channel) {
+        case RendererToMainIpcMessage.SharedStoreSnapshotRequest:
+          webContents.send(MainToRendererIpcMessage.SharedStoreSnapshot, getSnapshot(store.shared));
+          break;
+        case RendererToMainIpcMessage.SetBrowserViewBounds:
+          store.setBrowserViewBounds(browserViewBounds.parse(args[0]));
+          break;
+        case RendererToMainIpcMessage.SetPaletteMode:
+          store.setPaletteMode(paletteMode.parse(args[0]))
+          break;
+        default:
+          console.warn('Unknown IPC message:', channel, args);
+          break;
+      }
+    } catch (err) {
+      console.error('Error while processing IPC message:', channel, args, err);
     }
   });
 
@@ -99,7 +103,24 @@ function createWindow(): Promise<void> {
     ? import.meta.env.VITE_DEV_SERVER_URL
     : new URL('../renderer/dist/index.html', `file://${__dirname}`).toString();
 
-  return mainWindow.loadURL(pageUrl);
+  const browserView = new BrowserView({
+    webPreferences: {
+      sandbox: true,
+      partition: 'service',
+    },
+  });
+
+  browserView.setBackgroundColor('#fff');
+
+  autorun(() => {
+    browserView.setBounds(store.shared.browserViewBounds);
+  });
+
+  await mainWindow.loadURL(pageUrl);
+
+  mainWindow.addBrowserView(browserView);
+
+  return browserView.webContents.loadURL('https://git.marussy.com/sophie/about');
 }
 
 app.on('second-instance', () => {