Cover mode

apps/streams.js

@@ -1,6 +1,7 @@
 const VideoConfig = Object.seal({
     videoOn: true,
     audioOn: true,
+    videoCover: false,
     get video() {
         return VideoConfig.videoOn
         && params.get('v') !== '0'
@@ -18,6 +19,7 @@ const VideoConfig = Object.seal({
         return [
             m('button', {onclick: VideoConfig.toggle('videoOn')}, 'video'),
             m('button', {onclick: VideoConfig.toggle('audioOn')}, 'audio'),
+            m('button', {onclick: VideoConfig.toggle('videoCover')}, 'cover'),
         ]
     }
 })
@@ -150,7 +152,7 @@ const Video = {
             fontSize: 'xxx-large',
         }
         const styleVideo = {
-            objectFit: 'contain',
+            objectFit: VideoConfig.videoCover ? 'cover' : 'contain',
             width: '100%',
             height: '100%',
             transform: 'scaleX(-1)',
@@ -161,10 +163,6 @@ const Video = {
             ),
             m('video[playsinline][autoplay]', {
                 style: styleVideo,
-                onclick: ({target: {style}}) => {
-                    const level = style.objectFit === 'contain'
-                    style.objectFit = ['contain', 'cover'][+level]
-                },
                 oncreate: this.setUp(username),
                 onremove: this.tearDown(username),
             }),