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