Salastil/streamwall
1
0
Fork 0
mirror of https://github.com/streamwall/streamwall.git synced 2026-01-24 22:22:50 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fade control window if disconnected

Browse Source
This commit is contained in:
Max Goodhart
2020-06-18 21:09:12 -07:00
parent 888b632f2a
commit 6bded73711
1 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/web/control.js
View File

@@ -88,29 +88,31 @@ function App({ wsEndpoint }) {
<div> <div>
connection status: {isConnected ? 'connected' : 'connecting...'} connection status: {isConnected ? 'connected' : 'connecting...'}
</div> </div>
<div> <StyledDataContainer isConnected={isConnected}>
{range(0, 3).map((y) => ( <div>
<StyledGridLine> {range(0, 3).map((y) => (
{range(0, 3).map((x) => { <StyledGridLine>
const idx = 3 * y + x {range(0, 3).map((x) => {
return ( const idx = 3 * y + x
<GridInput return (
idx={idx} <GridInput
onChangeSpace={handleSetSpace} idx={idx}
spaceValue={spaceIdxMap.get(idx)} onChangeSpace={handleSetSpace}
isListening={listeningIdxSet.has(idx)} spaceValue={spaceIdxMap.get(idx)}
onSetListening={handleSetListening} isListening={listeningIdxSet.has(idx)}
/> onSetListening={handleSetListening}
) />
})} )
</StyledGridLine> })}
))} </StyledGridLine>
</div> ))}
<div> </div>
{streamData <div>
? streamData.map((row) => <StreamLine id={row._id} row={row} />) {streamData
: 'loading...'} ? streamData.map((row) => <StreamLine id={row._id} row={row} />)
</div> : 'loading...'}
</div>
</StyledDataContainer>
</div> </div>
) )
} }
@@ -182,6 +184,10 @@ function ListeningButton(props) {
) )
} }
const StyledDataContainer = styled.div`
opacity: ${({ isConnected }) => (isConnected ? 1 : 0.5)};
`
const StyledGridLine = styled.div` const StyledGridLine = styled.div`
display: flex; display: flex;
` `