Settings

apps/streams.js

 const VideoConfig = Object.seal({
     videoOn: true,
     audioOn: true,
-    get videoCover() {
-        return params.get('c') === '1'
-    },
     get video() {
         return VideoConfig.videoOn
         && params.get('v') !== '0'
             fontSize: 'xxx-large',
         }
         const styleVideo = {
-            objectFit: VideoConfig.videoCover ? 'cover' : 'contain',
+            objectFit: Settings.get('blackBars') ? 'contain' : 'cover',
             width: '100%',
             height: '100%',
             transform: 'scaleX(-1)',

pico.js

 * BASE
 *
 */
+const Settings = {
+    get(key) {
+        try {
+            return JSON.parse(localStorage.getItem(key))
+        }
+        catch(error) {
+            return null
+        }
+    },
+    set(key, value) {
+        localStorage.setItem(key, JSON.stringify(value))
+    },
+    multiField: ([key, options]) => {
+        let current = Settings.get(key)
+        if(!options.includes(current)) {
+            Settings.set(key, options[0])
+        }
+        return m('.field',
+            m('label', key),
+            options.map(value => {
+                const style = {
+                    fontWeight: Settings.get(key) == value ? 'bold' : 'unset'
+                }
+                const onclick = () => Settings.set(key, value)
+                return m('button', {style, onclick}, `${value}`)
+            })
+        )
+    },
+    view() {
+        return m('.settings',
+            Object.entries({
+                blackBars: [true, false],
+            }).map(Settings.multiField)
+        )
+    },
+}
 const Base = {
     oncreate: () => {
         const randomName = ('' + Math.random()).substring(2)
             State.isConnected ? [
                 m(StreamContainer),
                 m(Chat),
-            ] : null,
+            ] : m(Settings),
         )
     },
 }