Display spinner when media re-acquiring

packages/streamwall/src/main/StreamWindow.ts

@@ -126,6 +126,9 @@ export default class StreamWindow extends EventEmitter<StreamWindowEventMap> {
     ipcMain.on('view-loaded', (ev) => {
       this.views.get(ev.sender.id)?.send?.({ type: 'VIEW_LOADED' })
     })
+    ipcMain.on('view-stalled', (ev) => {
+      this.views.get(ev.sender.id)?.send?.({ type: 'VIEW_STALLED' })
+    })
     ipcMain.on('view-info', (ev, { info }) => {
       this.views.get(ev.sender.id)?.send?.({ type: 'VIEW_INFO', info })
     })

packages/streamwall/src/main/viewStateMachine.ts

@@ -44,6 +44,7 @@ const viewStateMachine = setup({
         }
       | { type: 'VIEW_INIT' }
       | { type: 'VIEW_LOADED' }
+      | { type: 'VIEW_STALLED' }
       | { type: 'VIEW_INFO'; info: ContentViewInfo }
       | { type: 'VIEW_ERROR'; error: unknown }
       | { type: 'MUTE' }
@@ -290,6 +291,17 @@ const viewStateMachine = setup({
             ],
           },
           states: {
+            playback: {
+              initial: 'playing',
+              on: {
+                VIEW_STALLED: '.stalled',
+                VIEW_LOADED: '.playing',
+              },
+              states: {
+                playing: {},
+                stalled: {},
+              },
+            },
             audio: {
               initial: 'muted',
               on: {

packages/streamwall/src/preload/mediaPreload.ts

@@ -300,6 +300,8 @@ async function main() {
     const media = await findMedia(content.kind, elementTimeout)
     console.log('media acquired', media)
 
+    ipcRenderer.send('view-loaded')
+
     if (content.kind === 'video' && media instanceof HTMLVideoElement) {
       rotationController = new RotationController(media)
       snapshotInterval = window.setInterval(() => {
@@ -311,7 +313,10 @@ async function main() {
       'emptied',
       async () => {
         console.warn('media emptied, re-acquiring', media)
+
+        ipcRenderer.send('view-stalled')
         clearInterval(snapshotInterval)
+
         const newMedia = await acquireMedia(REACQUIRE_ELEMENT_TIMEOUT)
         if (newMedia !== media) {
           media.remove()
@@ -332,9 +337,8 @@ async function main() {
     })
   } else if (content.kind === 'web') {
     webFrame.insertCSS(NO_SCROLL_STYLE, { cssOrigin: 'user' })
-  }
-
     ipcRenderer.send('view-loaded')
+  }
 
   function updateOptions(options: ContentDisplayOptions) {
     if (rotationController) {

packages/streamwall/src/renderer/overlay.tsx

@@ -62,7 +62,9 @@ function Overlay({
           'displaying.running.video.blurred',
           state,
         )
-        const isLoading = matchesState('displaying.loading', state)
+        const isLoading =
+          matchesState('displaying.loading', state) ||
+          matchesState('displaying.running.playback.stalled', state)
         const hasTitle = data && (data.label || data.source)
         const position = data?.labelPosition ?? 'top-left'
         return (