Auto full-screen

pico.css

@@ -46,6 +46,8 @@ body {
 }
 .media {
     grid-area: media;
+    display: grid;
+    grid-template-rows: auto 1fr;
 }
 #textbox {
     resize: none;
@@ -70,6 +72,10 @@ body {
     resize: vertical;
     position: relative;
 }
+.videos.full-screen {
+    height: 100% !important;
+    resize: none;
+}
 .video-container {
     display: inline-block;
     position: relative;

pico.js

@@ -244,6 +244,14 @@ const TextBox = {
 }
 const VideoOptions = {
     available: ['mirror', 'square', 'full-screen'],
+    anyFullScreen: () => {
+        for(const username of State.online) {
+            if(State.options[username].has('full-screen')) {
+                return 'full-screen'
+            }
+        }
+        return ''
+    },
     getFor: (username) => {
         if(!State.options[username]) {
             State.options[username] = new Set(['mirror', 'square'])
@@ -324,7 +332,7 @@ const Media = {
                     'mute'
                 ),
             ),
-            m('.videos',
+            m('.videos', {className: VideoOptions.anyFullScreen()},
                 Object.keys(State.streams).map((username) =>
                     m(Video, {key: username, username})
                 ),