| display: 'grid', | display: 'grid', | ||||
| padding: '3px', | padding: '3px', | ||||
| gridGap: '3px', | gridGap: '3px', | ||||
| height: '70vh', | |||||
| height: '90vh', | |||||
| gridTemplateRows: dims[0], | gridTemplateRows: dims[0], | ||||
| gridTemplateColumns: dims[1], | gridTemplateColumns: dims[1], | ||||
| } | } | ||||
| return m('div', | |||||
| m('.video-controls', | |||||
| return [ | |||||
| m('span.video-controls', | |||||
| 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'), | ||||
| ), | ), | ||||
| State.online.filter(username => username != State.username) | State.online.filter(username => username != State.username) | ||||
| .map(username => m(Video, {username})) | .map(username => m(Video, {username})) | ||||
| ), | ), | ||||
| ) | |||||
| ] | |||||
| }, | }, | ||||
| } | } | ||||
| <script src="/libs/mithril.min.js"></script> | <script src="/libs/mithril.min.js"></script> | ||||
| <script src="/apps/streams.js"></script> | <script src="/apps/streams.js"></script> | ||||
| <script src="/pico.js" defer></script> | <script src="/pico.js" defer></script> | ||||
| <style> | |||||
| .hidden { | |||||
| display: none; | |||||
| } | |||||
| </style> | |||||
| </head> | </head> | ||||
| <body style="margin: 0; padding: 0;"> | <body style="margin: 0; padding: 0;"> | ||||
| <div>PicoChat requires JS</div> | <div>PicoChat requires JS</div> |
| autocomplete: 'off', | autocomplete: 'off', | ||||
| value: localStorage.username, | value: localStorage.username, | ||||
| } | } | ||||
| const style = { | |||||
| display: 'inline', | |||||
| } | |||||
| return m('main', | return m('main', | ||||
| m('.login-container', | |||||
| m('form.login' + (State.isConnected ? '.hidden' : ''), | |||||
| {onsubmit: Base.sendLogin}, | |||||
| m('span.login-container', | |||||
| State.isConnected ? null : m('form.login', | |||||
| {style, onsubmit: Base.sendLogin}, | |||||
| m('input', attrs), | m('input', attrs), | ||||
| m('button', 'Login'), | m('button', 'Login'), | ||||
| ), | ), | ||||
| m('form.logout' + (State.isConnected ? '' : '.hidden'), | |||||
| {onsubmit: Base.sendLogout}, | |||||
| State.isConnected ? m('form.logout', | |||||
| {style, onsubmit: Base.sendLogout}, | |||||
| m('button', 'Logout'), | m('button', 'Logout'), | ||||
| m('input[readonly]', {value: location}), | m('input[readonly]', {value: location}), | ||||
| ), | |||||
| m('.error', State.info), | |||||
| ) : null, | |||||
| m('span.error', State.info), | |||||
| ), | ), | ||||
| State.isConnected ? m(StreamContainer) : null, | State.isConnected ? m(StreamContainer) : null, | ||||
| ) | ) |