Add control button to browse page (for authing/debugging)

src/node/index.js

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import yargs from 'yargs'
-import { app, shell } from 'electron'
+import { app, shell, BrowserWindow } from 'electron'
 
 import { pollPublicData, pollSpreadsheetData, processData } from './data'
 import StreamWindow from './StreamWindow'
@@ -52,6 +52,8 @@ async function main() {
   const streamWindow = new StreamWindow()
   streamWindow.init()
 
+  let browseWindow = null
+
   const clientState = {}
   const getInitialState = () => clientState
   let broadcastState = () => {}
@@ -62,6 +64,11 @@ async function main() {
       streamWindow.setListeningView(msg.viewIdx)
     } else if (msg.type === 'reload-view') {
       streamWindow.reloadView(msg.viewIdx)
+    } else if (msg.type === 'browse') {
+      if (!browseWindow || browseWindow.isDestroyed()) {
+        browseWindow = new BrowserWindow()
+      }
+      browseWindow.loadURL(msg.url)
     }
   }
 

src/static/life-ring-regular.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="life-ring" class="svg-inline--fa fa-life-ring fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 504c136.967 0 248-111.033 248-248S392.967 8 256 8 8 119.033 8 256s111.033 248 248 248zm-103.398-76.72l53.411-53.411c31.806 13.506 68.128 13.522 99.974 0l53.411 53.411c-63.217 38.319-143.579 38.319-206.796 0zM336 256c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zm91.28 103.398l-53.411-53.411c13.505-31.806 13.522-68.128 0-99.974l53.411-53.411c38.319 63.217 38.319 143.579 0 206.796zM359.397 84.72l-53.411 53.411c-31.806-13.505-68.128-13.522-99.973 0L152.602 84.72c63.217-38.319 143.579-38.319 206.795 0zM84.72 152.602l53.411 53.411c-13.506 31.806-13.522 68.128 0 99.974L84.72 359.398c-38.319-63.217-38.319-143.579 0-206.796z"></path></svg>

src/web/control.js

@@ -9,6 +9,7 @@ import '../index.css'
 import { GRID_COUNT } from '../constants'
 import SoundIcon from '../static/volume-up-solid.svg'
 import ReloadIcon from '../static/redo-alt-solid.svg'
+import LifeRingIcon from '../static/life-ring-regular.svg'
 
 function emptyStateIdxMap() {
   return new Map(
@@ -113,6 +114,15 @@ function App({ wsEndpoint }) {
     )
   }, [])
 
+  const handleBrowse = useCallback((url) => {
+    wsRef.current.send(
+      JSON.stringify({
+        type: 'browse',
+        url,
+      }),
+    )
+  }, [])
+
   return (
     <div>
       <h1>Stream Wall</h1>
@@ -125,10 +135,13 @@ function App({ wsEndpoint }) {
             <StyledGridLine>
               {range(0, 3).map((x) => {
                 const idx = 3 * y + x
-                const { streamId, isListening, state } = stateIdxMap.get(idx)
+                const { streamId, isListening, url, state } = stateIdxMap.get(
+                  idx,
+                )
                 return (
                   <GridInput
                     idx={idx}
+                    url={url}
                     onChangeSpace={handleSetView}
                     spaceValue={streamId}
                     isError={state.matches('error')}
@@ -136,6 +149,7 @@ function App({ wsEndpoint }) {
                     isListening={isListening}
                     onSetListening={handleSetListening}
                     onReloadView={handleReloadView}
+                    onBrowse={handleBrowse}
                   />
                 )
               })}
@@ -165,6 +179,7 @@ function StreamLine({ id, row: { Source, Title, Link, Notes } }) {
 
 function GridInput({
   idx,
+  url,
   onChangeSpace,
   spaceValue,
   isDisplaying,
@@ -172,6 +187,7 @@ function GridInput({
   isListening,
   onSetListening,
   onReloadView,
+  onBrowse,
 }) {
   const [editingValue, setEditingValue] = useState()
   const handleFocus = useCallback((ev) => {
@@ -196,18 +212,24 @@ function GridInput({
     idx,
     onReloadView,
   ])
+  const handleBrowseClick = useCallback(() => onBrowse(url), [url, onBrowse])
   const handleClick = useCallback((ev) => {
     ev.target.select()
   })
   return (
     <StyledGridContainer>
-      {isDisplaying && (
-        <StyledGridButtons side="left">
+      <StyledGridButtons side="left">
+        {isDisplaying && (
           <StyledButton onClick={handleReloadClick}>
             <ReloadIcon />
           </StyledButton>
-        </StyledGridButtons>
-      )}
+        )}
+        {isError && (
+          <StyledButton onClick={handleBrowseClick}>
+            <LifeRingIcon />
+          </StyledButton>
+        )}
+      </StyledGridButtons>
       <StyledGridButtons side="right">
         <ListeningButton
           isListening={isListening}