Add UI for streamdelay start/stop functionality

src/node/StreamdelayClient.js

@@ -50,4 +50,8 @@ export default class StreamdelayClient extends EventEmitter {
   setCensored(isCensored) {
     this.ws.send(JSON.stringify({ isCensored }))
   }
+
+  setStreamRunning(isStreamRunning) {
+    this.ws.send(JSON.stringify({ isStreamRunning }))
+  }
 }

src/node/index.js

@@ -306,6 +306,8 @@ async function main() {
       }
     } else if (msg.type === 'set-stream-censored' && streamdelayClient) {
       streamdelayClient.setCensored(msg.isCensored)
+    } else if (msg.type === 'set-stream-running' && streamdelayClient) {
+      streamdelayClient.setStreamRunning(msg.isStreamRunning)
     } else if (msg.type === 'create-invite') {
       const { secret } = await auth.createToken({
         kind: 'invite',

src/roles.js

@@ -5,6 +5,7 @@ const operatorActions = new Set([
   'set-custom-streams',
   'reload-view',
   'set-stream-censored',
+  'set-stream-running',
   'mutate-state-doc',
 ])
 

src/web/control.js

@@ -422,6 +422,13 @@ function App({ wsEndpoint, role }) {
     })
   }, [])
 
+  const setStreamRunning = useCallback((isStreamRunning) => {
+    send({
+      type: 'set-stream-running',
+      isStreamRunning,
+    })
+  }, [])
+
   const [newInvite, setNewInvite] = useState()
 
   const handleCreateInvite = useCallback(({ name, role }) => {
@@ -510,8 +517,10 @@ function App({ wsEndpoint, role }) {
         </StyledHeader>
         {delayState && (
           <StreamDelayBox
+            role={role}
             delayState={delayState}
             setStreamCensored={setStreamCensored}
+            setStreamRunning={setStreamRunning}
           />
         )}
         <StyledDataContainer isConnected={isConnected}>
@@ -662,10 +671,20 @@ const Stack = styled.div`
   ${({ minHeight }) => minHeight && `min-height: ${minHeight}px`};
 `
 
-function StreamDelayBox({ delayState, setStreamCensored }) {
+function StreamDelayBox({
+  role,
+  delayState,
+  setStreamCensored,
+  setStreamRunning,
+}) {
   const handleToggleStreamCensored = useCallback(() => {
     setStreamCensored(!delayState.isCensored)
   }, [delayState.isCensored, setStreamCensored])
+  const handleToggleStreamRunning = useCallback(() => {
+    if (!delayState.isStreamRunning || confirm('End stream?')) {
+      setStreamRunning(!delayState.isStreamRunning)
+    }
+  }, [delayState.isStreamRunning, setStreamRunning])
   let buttonText
   if (delayState.isConnected) {
     if (delayState.state.matches('censorship.censored.deactivating')) {
@@ -680,10 +699,12 @@ function StreamDelayBox({ delayState, setStreamCensored }) {
     <div>
       <StyledStreamDelayBox>
         <strong>Streamdelay</strong>
-        <span>{delayState.isConnected ? 'connected' : 'connecting...'}</span>
+        {!delayState.isConnected && <span>connecting...</span>}
+        {!delayState.isStreamRunning && <span>stream stopped</span>}
         {delayState.isConnected && (
           <>
             <span>delay: {delayState.delaySeconds}s</span>
+            {delayState.isStreamRunning && (
               <StyledButton
                 isActive={delayState.isCensored}
                 onClick={handleToggleStreamCensored}
@@ -691,6 +712,12 @@ function StreamDelayBox({ delayState, setStreamCensored }) {
               >
                 {buttonText}
               </StyledButton>
+            )}
+            {roleCan(role, 'set-stream-running') && (
+              <StyledButton onClick={handleToggleStreamRunning} tabIndex={1}>
+                {delayState.isStreamRunning ? 'End stream' : 'Start stream'}
+              </StyledButton>
+            )}
           </>
         )}
       </StyledStreamDelayBox>