diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-12-23 21:29:26 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-12-23 21:29:26 +0100 |
commit | d303f2e3415237e1a519db21ad4e089c2ba7e9f9 (patch) | |
tree | 5d562dcaf7bb9c83c1930c7d7cf1b2c9de75e15b /packages/main/src | |
parent | build: Enable asar (diff) | |
download | sophie-d303f2e3415237e1a519db21ad4e089c2ba7e9f9.tar.gz sophie-d303f2e3415237e1a519db21ad4e089c2ba7e9f9.tar.zst sophie-d303f2e3415237e1a519db21ad4e089c2ba7e9f9.zip |
feat: Add BrowserView and synchronize its position
Diffstat (limited to 'packages/main/src')
-rw-r--r-- | packages/main/src/index.ts | 63 | ||||
-rw-r--r-- | packages/main/src/stores/RootStore.ts | 22 |
2 files changed, 60 insertions, 25 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 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import { app, BrowserWindow } from 'electron'; | 21 | import { app, BrowserView, BrowserWindow } from 'electron'; |
22 | import { autorun } from 'mobx'; | ||
22 | import { getSnapshot, onPatch } from 'mobx-state-tree'; | 23 | import { getSnapshot, onPatch } from 'mobx-state-tree'; |
23 | import { join } from 'path'; | 24 | import { join } from 'path'; |
24 | import { | 25 | import { |
26 | browserViewBounds, | ||
25 | MainToRendererIpcMessage, | 27 | MainToRendererIpcMessage, |
28 | paletteMode, | ||
26 | RendererToMainIpcMessage, | 29 | RendererToMainIpcMessage, |
27 | } from '@sophie/shared'; | 30 | } from '@sophie/shared'; |
28 | import { URL } from 'url'; | 31 | import { URL } from 'url'; |
@@ -31,7 +34,7 @@ import { | |||
31 | installDevToolsExtensions, | 34 | installDevToolsExtensions, |
32 | openDevToolsWhenReady, | 35 | openDevToolsWhenReady, |
33 | } from './devTools'; | 36 | } from './devTools'; |
34 | import { rootStore } from './stores/RootStore'; | 37 | import { createRootStore } from './stores/RootStore'; |
35 | 38 | ||
36 | const isSingleInstance = app.requestSingleInstanceLock(); | 39 | const isSingleInstance = app.requestSingleInstanceLock(); |
37 | const isDevelopment = import.meta.env.MODE === 'development'; | 40 | const isDevelopment = import.meta.env.MODE === 'development'; |
@@ -49,19 +52,13 @@ if (isDevelopment) { | |||
49 | 52 | ||
50 | let mainWindow: BrowserWindow | null = null; | 53 | let mainWindow: BrowserWindow | null = null; |
51 | 54 | ||
52 | const store = rootStore.create({ | 55 | const store = createRootStore(); |
53 | shared: { | ||
54 | clickCount: 1, | ||
55 | }, | ||
56 | }); | ||
57 | 56 | ||
58 | function createWindow(): Promise<void> { | 57 | async function createWindow(): Promise<void> { |
59 | mainWindow = new BrowserWindow({ | 58 | mainWindow = new BrowserWindow({ |
60 | show: false, | 59 | show: false, |
61 | autoHideMenuBar: true, | 60 | autoHideMenuBar: true, |
62 | webPreferences: { | 61 | webPreferences: { |
63 | nativeWindowOpen: true, | ||
64 | webviewTag: false, | ||
65 | sandbox: true, | 62 | sandbox: true, |
66 | preload: join(__dirname, '../../preload/dist/index.cjs'), | 63 | preload: join(__dirname, '../../preload/dist/index.cjs'), |
67 | }, | 64 | }, |
@@ -78,16 +75,23 @@ function createWindow(): Promise<void> { | |||
78 | const { webContents } = mainWindow; | 75 | const { webContents } = mainWindow; |
79 | 76 | ||
80 | webContents.on('ipc-message', (_event, channel, ...args) => { | 77 | webContents.on('ipc-message', (_event, channel, ...args) => { |
81 | switch (channel) { | 78 | try { |
82 | case RendererToMainIpcMessage.SharedStoreSnapshotRequest: | 79 | switch (channel) { |
83 | webContents.send(MainToRendererIpcMessage.SharedStoreSnapshot, getSnapshot(store.shared)); | 80 | case RendererToMainIpcMessage.SharedStoreSnapshotRequest: |
84 | break; | 81 | webContents.send(MainToRendererIpcMessage.SharedStoreSnapshot, getSnapshot(store.shared)); |
85 | case RendererToMainIpcMessage.ButtonClick: | 82 | break; |
86 | store.buttonClick(); | 83 | case RendererToMainIpcMessage.SetBrowserViewBounds: |
87 | break; | 84 | store.setBrowserViewBounds(browserViewBounds.parse(args[0])); |
88 | default: | 85 | break; |
89 | console.warn('Unknown IPC message:', channel, args); | 86 | case RendererToMainIpcMessage.SetPaletteMode: |
90 | break; | 87 | store.setPaletteMode(paletteMode.parse(args[0])) |
88 | break; | ||
89 | default: | ||
90 | console.warn('Unknown IPC message:', channel, args); | ||
91 | break; | ||
92 | } | ||
93 | } catch (err) { | ||
94 | console.error('Error while processing IPC message:', channel, args, err); | ||
91 | } | 95 | } |
92 | }); | 96 | }); |
93 | 97 | ||
@@ -99,7 +103,24 @@ function createWindow(): Promise<void> { | |||
99 | ? import.meta.env.VITE_DEV_SERVER_URL | 103 | ? import.meta.env.VITE_DEV_SERVER_URL |
100 | : new URL('../renderer/dist/index.html', `file://${__dirname}`).toString(); | 104 | : new URL('../renderer/dist/index.html', `file://${__dirname}`).toString(); |
101 | 105 | ||
102 | return mainWindow.loadURL(pageUrl); | 106 | const browserView = new BrowserView({ |
107 | webPreferences: { | ||
108 | sandbox: true, | ||
109 | partition: 'service', | ||
110 | }, | ||
111 | }); | ||
112 | |||
113 | browserView.setBackgroundColor('#fff'); | ||
114 | |||
115 | autorun(() => { | ||
116 | browserView.setBounds(store.shared.browserViewBounds); | ||
117 | }); | ||
118 | |||
119 | await mainWindow.loadURL(pageUrl); | ||
120 | |||
121 | mainWindow.addBrowserView(browserView); | ||
122 | |||
123 | return browserView.webContents.loadURL('https://git.marussy.com/sophie/about'); | ||
103 | } | 124 | } |
104 | 125 | ||
105 | app.on('second-instance', () => { | 126 | 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 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import { Instance, types } from 'mobx-state-tree'; | 21 | import { applySnapshot, Instance, types } from 'mobx-state-tree'; |
22 | import { sharedStore } from '@sophie/shared'; | 22 | import { |
23 | BrowserViewBounds, | ||
24 | emptySharedStore, | ||
25 | PaletteMode, | ||
26 | sharedStore, | ||
27 | } from '@sophie/shared'; | ||
23 | 28 | ||
24 | export const rootStore = types.model('RootStore', { | 29 | export const rootStore = types.model('RootStore', { |
25 | shared: sharedStore, | 30 | shared: sharedStore, |
26 | }).actions((self) => ({ | 31 | }).actions((self) => ({ |
27 | buttonClick() { | 32 | setBrowserViewBounds(bounds: BrowserViewBounds) { |
28 | self.shared.clickCount += 1; | 33 | applySnapshot(self.shared.browserViewBounds, bounds); |
34 | }, | ||
35 | setPaletteMode(mode: PaletteMode) { | ||
36 | self.shared.shouldUseDarkColors = mode === 'dark'; | ||
29 | }, | 37 | }, |
30 | })); | 38 | })); |
31 | 39 | ||
32 | export interface RootStore extends Instance<typeof rootStore> {} | 40 | export interface RootStore extends Instance<typeof rootStore> {} |
41 | |||
42 | export function createRootStore(): RootStore { | ||
43 | return rootStore.create({ | ||
44 | shared: emptySharedStore, | ||
45 | }); | ||
46 | } | ||