Toggle

apps/streams.js

@@ -1,27 +1,41 @@
-const VideoConfig = Object.seal({
-    videoOn: true,
-    audioOn: true,
+const Toggle = {
+    view({attrs: {label, value}}) {
+        const onclick = () => {
+            StreamContainer[value] = !StreamContainer[value]
+            updateSelfVideo()
+        }
+        const style = {
+            'font-family': 'monospace',
+            'display': 'inline-flex',
+            'justify-content': 'center',
+            'align-items': 'center',
+            'padding': '0 0.5em',
+        }
+        const checked = StreamContainer[value]
+        return m('label', {style},
+            m('input[type=checkbox]', {checked, onclick}),
+            label,
+        )
+    }
+}
+const VideoConfig = {
     get video() {
-        return VideoConfig.videoOn
+        return StreamContainer.videoOn
         && State.online.length < 10
         && params.get('v') !== '0'
         && {width: {ideal: 320}, facingMode: 'user', frameRate: 26}
     },
     get audio() {
-        return VideoConfig.audioOn
+        return StreamContainer.audioOn
         && params.get('a') !== '0'
     },
-    toggle: (property) => () => {
-        VideoConfig[property] = !VideoConfig[property]
-        updateSelfVideo()
-    },
     view() {
         return [
-            m('button', {onclick: VideoConfig.toggle('videoOn')}, 'video'),
-            m('button', {onclick: VideoConfig.toggle('audioOn')}, 'audio'),
+            m(Toggle, {label: 'video', value: 'videoOn'}),
+            m(Toggle, {label: 'audio', value: 'audioOn'}),
         ]
     }
-})
+}
 const updateSelfVideo = async () => {
     const video = document.querySelector('video.self')
 
@@ -31,7 +45,7 @@ const updateSelfVideo = async () => {
         delete track
     })
 
-    if(VideoConfig.videoOn || VideoConfig.audioOn) {
+    if(StreamContainer.videoOn || StreamContainer.audioOn) {
         await navigator.mediaDevices
         .getUserMedia(VideoConfig)
         .then(s => s.getTracks().forEach(t => video.srcObject.addTrack(t)))
@@ -169,6 +183,8 @@ const Video = {
     },
 }
 const StreamContainer = {
+    videoOn: true,
+    audioOn: true,
     view() {
         const dims = [
             Math.floor((1 + Math.sqrt(4 * State.online.length - 3)) / 2),

pico.js

@@ -192,7 +192,7 @@ const Base = {
         return m('main', {style: mainStyle},
             m('header', {style: headerStyle},
                 State.isConnected ? [
-                    m('button', {onclick: Base.sendLogout}, 'settings'),
+                    m('button', {onclick: Base.sendLogout}, 'log-out'),
                     m(VideoConfig),
                     m(ChatConfig),
                     m('button', {onclick: VolumeMap.toggle}, 'volume'),