Simplify view loading (hopefully more consistent page visibility)

packages/streamwall/src/main/StreamWindow.ts

@@ -36,7 +36,6 @@ export interface StreamWindowEventMap {
 export default class StreamWindow extends EventEmitter<StreamWindowEventMap> {
   config: StreamWindowConfig
   win: BrowserWindow
-  offscreenWin: BrowserWindow
   backgroundView: WebContentsView
   overlayView: WebContentsView
   views: Map<number, ViewActor>
@@ -70,13 +69,6 @@ export default class StreamWindow extends EventEmitter<StreamWindowEventMap> {
     })
     this.win = win
 
-    const offscreenWin = new BrowserWindow({
-      width,
-      height,
-      show: false,
-    })
-    this.offscreenWin = offscreenWin
-
     const backgroundView = new WebContentsView({
       webPreferences: {
         preload: path.join(__dirname, 'layerPreload.js'),
@@ -146,7 +138,7 @@ export default class StreamWindow extends EventEmitter<StreamWindowEventMap> {
   }
 
   createView() {
-    const { win, offscreenWin } = this
+    const { win } = this
     assert(win != null, 'Window must be initialized')
     const { backgroundColor } = this.config
     const view = new WebContentsView({
@@ -154,6 +146,7 @@ export default class StreamWindow extends EventEmitter<StreamWindowEventMap> {
         preload: path.join(__dirname, 'mediaPreload.js'),
         nodeIntegration: false,
         contextIsolation: true,
+        backgroundThrottling: false,
         partition: 'persist:session',
       },
     })
@@ -171,7 +164,6 @@ export default class StreamWindow extends EventEmitter<StreamWindowEventMap> {
         id: viewId,
         view,
         win,
-        offscreenWin,
       },
     })
 

packages/streamwall/src/main/viewStateMachine.ts

@@ -21,13 +21,11 @@ const viewStateMachine = setup({
       id: number
       view: WebContentsView
       win: BrowserWindow
-      offscreenWin: BrowserWindow
     },
 
     context: {} as {
       id: number
       win: BrowserWindow
-      offscreenWin: BrowserWindow
       view: WebContentsView
       pos: ViewPos | null
       content: ViewContent | null
@@ -85,23 +83,19 @@ const viewStateMachine = setup({
     },
 
     offscreenView: ({ context }) => {
-      const { view, win, offscreenWin } = context
+      const { view, win } = context
-      // It appears necessary to initialize the browser view by adding it to a window and setting bounds. Otherwise, some streaming sites like Periscope will not load their videos due to RAFs not firing.
+      win.contentView.addChildView(view, 0) // Insert below background (so hidden by background)
-      // TODO: Is this still necessary with WebContentsView?
-      win.contentView.removeChildView(view)
-      offscreenWin.contentView.addChildView(view)
       view.setBounds(win.getBounds())
     },
 
     positionView: ({ context }) => {
-      const { pos, view, win, offscreenWin } = context
+      const { pos, view, win } = context
 
       if (!pos) {
         return
       }
 
-      offscreenWin.contentView.removeChildView(view)
+      win.contentView.addChildView(view, win.contentView.children.length - 2) // Insert below overlay but above background
-      win.contentView.addChildView(view, 1) // Insert at index 1 above default view and so overlay remains on top
       view.setBounds(pos)
     },
   },
@@ -147,24 +141,16 @@ const viewStateMachine = setup({
         } else {
           wc.loadURL(content.url)
         }
-
-        try {
-          // Force page visibility
-          wc.capturePage(undefined, { stayAwake: true })
-        } catch (err) {
-          console.warn('Error calling capturePage:', err)
-        }
       },
     ),
   },
 }).createMachine({
   id: 'view',
   initial: 'empty',
-  context: ({ input: { id, view, win, offscreenWin } }) => ({
+  context: ({ input: { id, view, win } }) => ({
     id,
     view,
     win,
-    offscreenWin,
     pos: null,
     content: null,
     options: null,