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, | ||||
) | ) |