Improve handling of disconnected Streamdelay server

src/node/StreamdelayClient.js

@@ -36,8 +36,13 @@ export default class StreamdelayClient extends EventEmitter {
   }
 
   emitState() {
+    const isConnected = this.ws.readyState === WebSocket.OPEN
+    if (isConnected && !this.status) {
+      // Wait until we've received the first status message
+      return
+    }
     this.emit('state', {
-      isConnected: this.ws.readyState === WebSocket.OPEN,
+      isConnected,
       ...this.status,
     })
   }

src/node/index.js

@@ -105,7 +105,7 @@ async function main() {
     streams: [],
     customStreams: [],
     views: [],
-    streamdelay: false,
+    streamdelay: { isConnected: false },
   }
   const getInitialState = () => clientState
   let broadcastState = () => {}

src/web/control.js

@@ -22,7 +22,9 @@ function App({ wsEndpoint }) {
   const [streams, setStreams] = useState([])
   const [customStreams, setCustomStreams] = useState([])
   const [stateIdxMap, setStateIdxMap] = useState(new Map())
-  const [delayState, setDelayState] = useState(false)
+  const [delayState, setDelayState] = useState({
+    isConnected: false,
+  })
   const allStreams = sortBy([...streams, ...customStreams], ['_id'])
 
   useEffect(() => {
@@ -70,7 +72,7 @@ function App({ wsEndpoint }) {
         setStreams(newStreams)
         setCustomStreams(newCustomStreams)
         setDelayState(
-          streamdelay && {
+          streamdelay.isConnected && {
             ...streamdelay,
             state: State.from(streamdelay.state),
           },
@@ -228,12 +230,10 @@ function App({ wsEndpoint }) {
       <div>
         connection status: {isConnected ? 'connected' : 'connecting...'}
       </div>
-      {delayState !== false && (
       <StreamDelayBox
         delayState={delayState}
         setStreamCensored={setStreamCensored}
       />
-      )}
       <StyledDataContainer isConnected={isConnected}>
         <div>
           {range(0, GRID_COUNT).map((y) => (
@@ -304,6 +304,7 @@ function StreamDelayBox({ delayState, setStreamCensored }) {
     setStreamCensored(!delayState.isCensored)
   }, [delayState.isCensored, setStreamCensored])
   let buttonText
+  if (delayState.isConnected) {
     if (delayState.state.matches('censorship.censored.deactivating')) {
       buttonText = 'Deactivating...'
     } else if (delayState.isCensored) {
@@ -311,14 +312,15 @@ function StreamDelayBox({ delayState, setStreamCensored }) {
     } else {
       buttonText = 'Censor stream'
     }
+  }
   return (
     <div>
       <StyledStreamDelayBox>
         <strong>Streamdelay</strong>
         <span>{delayState.isConnected ? 'connected' : 'connecting...'}</span>
         {delayState.isConnected && (
+          <>
             <span>delay: {delayState.delaySeconds}s</span>
-        )}
             <StyledToggleButton
               isActive={delayState.isCensored}
               onClick={handleToggleStreamCensored}
@@ -326,6 +328,8 @@ function StreamDelayBox({ delayState, setStreamCensored }) {
             >
               {buttonText}
             </StyledToggleButton>
+          </>
+        )}
       </StyledStreamDelayBox>
     </div>
   )