Minor refactoring

apps/streams.js

@@ -138,7 +138,6 @@ const Video = {
         const styleOuter = {
             position: 'relative',
             display: 'block',
-            backgroundColor: 'black',
             color: 'white',
             overflow: 'hidden',
         }
@@ -187,6 +186,7 @@ const StreamContainer = {
         const dims = [StreamContainer.getRows(), StreamContainer.getColumns()]
         if(innerHeight > innerWidth) dims.reverse()
         const style = {
+            backgroundColor: 'black',
             overflow: 'hidden',
             display: 'grid',
             padding: '1px',

pico.js

@@ -127,20 +127,23 @@ const Base = {
         }
         return m('main', {style: mainStyle},
             m('header', {style: headerStyle},
-                State.isConnected ? null : m('form.login',
-                    {onsubmit: Base.sendLogin},
-                    m('input', attrs),
-                    m('button', 're-join'),
-                ),
                 State.isConnected ? [
-                    m('button', {onclick: Base.sendLogout}, 'pick name'),
-                ] : null,
-                State.isConnected ? m(VideoConfig) : null,
-                State.isConnected ? m(ChatConfig) : null,
+                    m('button', {onclick: Base.sendLogout}, 'settings'),
+                    m(VideoConfig),
+                    m(ChatConfig),
+                ] : [
+                    m('form.login',
+                        {onsubmit: Base.sendLogin},
+                        m('input', attrs),
+                        m('button', 're-join'),
+                    ),
+                ],
                 m('span.error', State.info),
             ),
-            State.isConnected ? m(StreamContainer) : null,
-            State.isConnected ? m(Chat) : null,
+            State.isConnected ? [
+                m(StreamContainer),
+                m(Chat),
+            ] : null,
         )
     },
 }