From 6bded7371138e2dc8f314059b9176755ef9029c5 Mon Sep 17 00:00:00 2001
From: Max Goodhart <c@chromakode.com>
Date: Thu, 18 Jun 2020 21:09:12 -0700
Subject: [PATCH] Fade control window if disconnected

---
 src/web/control.js | 52 ++++++++++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 23 deletions(-)

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