Place video options elsewhere

pico.css

@@ -74,7 +74,7 @@ body {
     position: absolute;
     z-index: 999;
 }
-.video-meta label {
+.video-option {
     display: block;
 }
 .video-container video {

pico.js

@@ -183,18 +183,31 @@ const hotKey = (e) => {
 }
 const VideoOptions = {
     available: ['mirror', 'square'],
+    getFor: (username) => {
+        if(!State.options[username]) {
+            State.options[username] = new Set(VideoOptions.available)
+        }
+        return State.options[username]
+    },
+    getClassListFor: (username) => {
+        return [...VideoOptions.getFor(username)].join(' ')
+    },
     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,
-        )),
+    view({attrs: {username}}) {
+        const options = VideoOptions.getFor(username)
+        return VideoOptions.available.map((string) =>
+            m('label.video-option',
+                m('input', {
+                    type: 'checkbox',
+                    checked: options.has(string),
+                    onchange: VideoOptions.toggle(options, string),
+                }),
+                string,
+            )
+        )
+    }
 }
 const Video = {
     keepRatio: {observe: () => {}},
@@ -205,20 +218,12 @@ const Video = {
         dom.ondblclick = toggleFullscreen(dom)
     },
     view({attrs}) {
-        if(!State.options[attrs.username]) {
-            State.options[attrs.username] = new Set(VideoOptions.available)
-        }
-        const options = State.options[attrs.username]
-        const classList = [...options].join(' ')
-
+        const classList = VideoOptions.getClassListFor(attrs.username)
         const rpc = State.rpcs[attrs.username] || {iceConnectionState: null}
         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-meta',
+                m('span.video-source', attrs.username),
+                m('.video-state', rpc.iceConnectionState),
             ),
             m('video', {playsinline: true, oncreate: Video.appendStream(attrs)}),
         )
@@ -346,7 +351,12 @@ const Chat = {
             ),
             m('.online',
                 m('button', {onclick: Login.sendLogout}, 'Logout'),
-                m('ul.user-list', State.online.map(username => m('li', username))),
+                m('.user-list', State.online.map(username =>
+                    m('details',
+                        m('summary', username),
+                        m(VideoOptions, {username}),
+                    ),
+                )),
             ),
             m(Media),
         )