Add video settings

pico.css

@@ -69,12 +69,17 @@ body {
     position: absolute;
     z-index: 999;
 }
-video {
-    background-color: #eee;
-    object-fit: cover;
+.video-meta label {
+    display: block;
+}
+.video-container video {
+    background-color: lightsteelblue;
     height: 100%;
     width: 100%;
 }
-video.mirrored {
+.video-container.square video {
+    object-fit: cover;
+}
+.video-container.mirror video {
     transform: scaleX(-1);
 }

pico.js

@@ -6,6 +6,7 @@ const State = {
     posts: [],
     rpcs: {},
     media: {},
+    options: {},
 }
 const markedOptions = {
     breaks: true,
@@ -180,6 +181,21 @@ const hotKey = (e) => {
         textbox.setSelectionRange(newA, newB)
     }
 }
+const VideoOptions = {
+    available: ['mirror', 'square'],
+    toggle: (options, string) => () => options.has(string)
+        ? options.delete(string)
+        : options.add(string),
+    view: ({attrs}) => VideoOptions.available.map((string) =>
+        m('label',
+            m('input', {
+                type: 'checkbox',
+                checked: attrs.options.has(string),
+                onchange: VideoOptions.toggle(attrs.options, string),
+            }),
+            string,
+        )),
+}
 const Video = {
     keepRatio: {observe: () => {}},
     appendStream: ({username, stream}) => ({dom}) => {
@@ -189,13 +205,22 @@ const Video = {
         dom.ondblclick = toggleFullscreen(dom)
     },
     view({attrs}) {
+        if(!State.options[attrs.username]) {
+            State.options[attrs.username] = new Set(['mirror', 'square'])
+        }
+        const options = State.options[attrs.username]
+        const classList = [...options].join(' ')
+
         const rpc = State.rpcs[attrs.username] || {iceConnectionState: m.trust(' ')}
-        return m('.video-container', {oncreate: ({dom}) => Video.keepRatio.observe(dom)},
-            m('.video-meta',
-                m('.video-source', attrs.username),
-                m('.video-state', rpc.iceConnectionState),
+        return m('.video-container', {class: classList, oncreate: ({dom}) => Video.keepRatio.observe(dom)},
+            m('details.video-meta',
+                m('summary',
+                    m('span.video-source', attrs.username),
+                    m('.video-state', rpc.iceConnectionState),
+                ),
+                m(VideoOptions, {options}),
             ),
-            m('video.mirrored', {playsinline: true, oncreate: Video.appendStream(attrs)}),
+            m('video', {playsinline: true, oncreate: Video.appendStream(attrs)}),
         )
     },
 }