From 4b5e2931eb733b7835de8968cc16ec911b4d3b2e Mon Sep 17 00:00:00 2001
From: Max Goodhart <c@chromakode.com>
Date: Wed, 26 Aug 2020 23:46:43 -0700
Subject: [PATCH] Add hacky support for playing audio-based pages

---
 src/node/viewStateMachine.js | 19 +++++++++++++------
 src/web/control.js           |  4 +++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/node/viewStateMachine.js b/src/node/viewStateMachine.js
index 5caddf5..d953067 100644
--- a/src/node/viewStateMachine.js
+++ b/src/node/viewStateMachine.js
@@ -10,7 +10,7 @@ const VIDEO_OVERRIDE_STYLE = `
     position: static !important;
     z-index: 0 !important;
   }
-  html, body, video {
+  html, body, video, audio {
     display: block !important;
     background: black !important;
   }
@@ -18,7 +18,7 @@ const VIDEO_OVERRIDE_STYLE = `
     overflow: hidden !important;
     background: black !important;
   }
-  video, iframe.__video__ {
+  video, iframe.__video__, audio {
     display: block !important;
     position: fixed !important;
     left: 0 !important;
@@ -31,6 +31,9 @@ const VIDEO_OVERRIDE_STYLE = `
     transition: none !important;
     z-index: 999999 !important;
   }
+  audio {
+    z-index: 999998 !important;
+  }
   .__video_parent__ {
     display: block !important;
   }
@@ -210,7 +213,7 @@ const viewStateMachine = Machine(
         const wc = view.webContents
         wc.audioMuted = true
         await wc.loadURL(content.url)
-        if (content.kind === 'video') {
+        if (content.kind === 'video' || content.kind === 'audio') {
           wc.insertCSS(VIDEO_OVERRIDE_STYLE, { cssOrigin: 'user' })
         } else if (content.kind === 'web') {
           wc.insertCSS(
@@ -225,19 +228,23 @@ const viewStateMachine = Machine(
       },
       startVideo: async (context, event) => {
         const { content, view } = context
-        if (content.kind !== 'video') {
+        if (content.kind !== 'video' && content.kind !== 'audio') {
           return
         }
         const wc = view.webContents
+        // TODO: generalize "video" terminology to "media"
         const info = await wc.executeJavaScript(`
           (function() {
             const sleep = ms => new Promise((resolve) => setTimeout(resolve, ms))
+            const kind = ${JSON.stringify(
+              content.kind === 'video' ? 'video' : 'audio',
+            )}
 
             async function waitForVideo() {
               let tries = 0
               let video
               while ((!video || !video.src) && tries < 10) {
-                video = document.querySelector('video')
+                video = document.querySelector(kind)
                 tries++
                 await sleep(200)
               }
@@ -252,7 +259,7 @@ const viewStateMachine = Machine(
                   if (!iframe.contentDocument) {
                     continue
                   }
-                  video = iframe.contentDocument.querySelector('video')
+                  video = iframe.contentDocument.querySelector(kind)
                   if (video) {
                     break
                   }
diff --git a/src/web/control.js b/src/web/control.js
index 95a7f6d..098a6b4 100644
--- a/src/web/control.js
+++ b/src/web/control.js
@@ -494,7 +494,8 @@ function App({ wsEndpoint, role }) {
   )
 
   const normalStreams = streams.filter(
-    (s) => !s.kind || s.kind === 'video' || s.kind === 'web',
+    (s) =>
+      !s.kind || s.kind === 'video' || s.kind === 'audio' || s.kind === 'web',
   )
 
   return (
@@ -927,6 +928,7 @@ function CustomStreamInput({ idx, onChange, ...props }) {
       />
       <select onChange={handleChangeKind} value={props.kind}>
         <option value="video">video</option>
+        <option value="audio">audio</option>
         <option value="web">web</option>
         <option value="overlay">overlay</option>
         <option value="background">background</option>