Sandbox all browser contexts

src/browser/background.js

@@ -1,4 +1,3 @@
-import { ipcRenderer } from 'electron'
 import { h, render } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import styled from 'styled-components'
@@ -27,9 +26,7 @@ function App() {
   })
 
   useEffect(() => {
-    ipcRenderer.on('state', (ev, state) => {
-      setState(state)
-    })
+    streamwall.onState(setState)
   }, [])
 
   const { streams } = state

src/browser/layerPreload.js

@@ -0,0 +1,6 @@
+import { ipcRenderer, contextBridge } from 'electron'
+
+contextBridge.exposeInMainWorld('streamwall', {
+  openDevTools: () => ipcRenderer.send('devtools-overlay'),
+  onState: (handler) => ipcRenderer.on('state', (ev, state) => handler(state)),
+})

src/browser/overlay.js

@@ -1,4 +1,3 @@
-import { ipcRenderer } from 'electron'
 import { h, Fragment, render } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import { State } from 'xstate'
@@ -84,13 +83,11 @@ function App() {
   })
 
   useEffect(() => {
-    ipcRenderer.on('state', (ev, state) => {
-      setState(state)
-    })
+    streamwall.onState(setState)
   }, [])
 
   useHotkeys('ctrl+shift+i', () => {
-    ipcRenderer.send('devtools-overlay')
+    streamwall.openDevTools()
   })
 
   const { config, views, streams, customStreams } = state