From d303f2e3415237e1a519db21ad4e089c2ba7e9f9 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Thu, 23 Dec 2021 21:29:26 +0100
Subject: feat: Add BrowserView and synchronize its position

---
 packages/main/package.json            |  2 +-
 packages/main/src/index.ts            | 63 +++++++++++++++++++++++------------
 packages/main/src/stores/RootStore.ts | 22 +++++++++---
 3 files changed, 61 insertions(+), 26 deletions(-)

(limited to 'packages/main')

diff --git a/packages/main/package.json b/packages/main/package.json
index 509acdc..014c511 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@sophie/shared": "workspace:*",
-    "electron": "^16.0.5",
+    "electron": "16.0.5",
     "mobx": "^6.3.10",
     "mobx-state-tree": "^5.1.0"
   },
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', () => {
diff --git a/packages/main/src/stores/RootStore.ts b/packages/main/src/stores/RootStore.ts
index edc740c..9d138ce 100644
--- a/packages/main/src/stores/RootStore.ts
+++ b/packages/main/src/stores/RootStore.ts
@@ -18,15 +18,29 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Instance, types } from 'mobx-state-tree';
-import { sharedStore } from '@sophie/shared';
+import { applySnapshot, Instance, types } from 'mobx-state-tree';
+import {
+  BrowserViewBounds,
+  emptySharedStore,
+  PaletteMode,
+  sharedStore,
+} from '@sophie/shared';
 
 export const rootStore = types.model('RootStore', {
   shared: sharedStore,
 }).actions((self) => ({
-  buttonClick() {
-    self.shared.clickCount += 1;
+  setBrowserViewBounds(bounds: BrowserViewBounds) {
+    applySnapshot(self.shared.browserViewBounds, bounds);
+  },
+  setPaletteMode(mode: PaletteMode) {
+    self.shared.shouldUseDarkColors = mode === 'dark';
   },
 }));
 
 export interface RootStore extends Instance<typeof rootStore> {}
+
+export function createRootStore(): RootStore {
+  return rootStore.create({
+    shared: emptySharedStore,
+  });
+}
-- 
cgit v1.2.3-54-g00ecf