+ 15
- 1
apps/screen.js
ファイルの表示
| const ScreenShareConfig = { | |||||
| view() { | |||||
| const checked = ScreenShare.isOn | |||||
| const onclick = ScreenShare.toggle | |||||
| return m('label.styled', | |||||
| m('input[type=checkbox]', {checked, onclick}), | |||||
| 'screen-share', | |||||
| ) | |||||
| } | |||||
| } | |||||
| const ScreenShare = { | const ScreenShare = { | ||||
| isOn: false, | isOn: false, | ||||
| start() { | start() { | ||||
| }, | }, | ||||
| toggle() { | toggle() { | ||||
| ScreenShare.isOn = !ScreenShare.isOn | ScreenShare.isOn = !ScreenShare.isOn | ||||
| ScreenShare.start() | |||||
| // ScreenShare.start() | |||||
| }, | }, | ||||
| view() { | view() { | ||||
| const style = { | const style = { | ||||
| return m('video.screen[playsinline][autoplay]', {style}) | return m('video.screen[playsinline][autoplay]', {style}) | ||||
| }, | }, | ||||
| } | } | ||||
| addEventListener('load', () => { | |||||
| Headers.push([ScreenShareConfig]) | |||||
| Apps.push([ScreenShare, {key: 'screen-share-container'}]) | |||||
| }) |
+ 1
- 8
apps/streams.js
ファイルの表示
| StreamContainer[value] = !StreamContainer[value] | StreamContainer[value] = !StreamContainer[value] | ||||
| updateSelfVideo() | updateSelfVideo() | ||||
| } | } | ||||
| const style = { | |||||
| 'font-family': 'monospace', | |||||
| 'display': 'inline-flex', | |||||
| 'justify-content': 'center', | |||||
| 'align-items': 'center', | |||||
| 'padding': '0 0.5em', | |||||
| } | |||||
| const checked = StreamContainer[value] | const checked = StreamContainer[value] | ||||
| return m('label', {style}, | |||||
| return m('label.styled', | |||||
| m('input[type=checkbox]', {checked, onclick}), | m('input[type=checkbox]', {checked, onclick}), | ||||
| label, | label, | ||||
| ) | ) |
+ 17
- 0
pico.html
ファイルの表示
| <script src="/libs/purify.min.js"></script> | <script src="/libs/purify.min.js"></script> | ||||
| <script src="/pico.js" defer></script> | <script src="/pico.js" defer></script> | ||||
| <script src="/apps/streams.js"></script> | <script src="/apps/streams.js"></script> | ||||
| <script src="/apps/screen.js"></script> | |||||
| <script src="/apps/chat.js"></script> | <script src="/apps/chat.js"></script> | ||||
| <!-- <script src="/apps/volume.js"></script> --> | <!-- <script src="/apps/volume.js"></script> --> | ||||
| <!-- <script src="/apps/screen.js"></script> --> | <!-- <script src="/apps/screen.js"></script> --> | ||||
| grid-template-rows: auto 1fr; | grid-template-rows: auto 1fr; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| } | } | ||||
| label.styled { | |||||
| font-family: monospace; | |||||
| display: inline-flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| padding: 0 0.5em; | |||||
| } | |||||
| header { | |||||
| display: grid; | |||||
| grid-auto-flow: column; | |||||
| justify-items: start; | |||||
| margin-right: auto; | |||||
| } | |||||
| main { | |||||
| overflow: hidden; | |||||
| } | |||||
| </style> | </style> | ||||
| <body>PicoChat requires JS</body> | <body>PicoChat requires JS</body> | ||||
| </html> | </html> |
+ 2
- 8
pico.js
ファイルの表示
| autocomplete: 'off', | autocomplete: 'off', | ||||
| value: localStorage.username, | value: localStorage.username, | ||||
| } | } | ||||
| const headerStyle = { | |||||
| display: 'grid', | |||||
| gridAutoFlow: 'column', | |||||
| justifyItems: 'start', | |||||
| marginRight: 'auto', | |||||
| } | |||||
| return [ | return [ | ||||
| m('header', {style: headerStyle}, | |||||
| m('header', | |||||
| State.isConnected | State.isConnected | ||||
| ? Headers.map(h => m(...h)) | ? Headers.map(h => m(...h)) | ||||
| : [ | : [ | ||||
| ), | ), | ||||
| ], | ], | ||||
| ), | ), | ||||
| m('main', {style: {overflow: 'hidden'}}, | |||||
| m('main', | |||||
| State.isConnected | State.isConnected | ||||
| ? Apps.map(a => m(...a)) | ? Apps.map(a => m(...a)) | ||||
| : [ | : [ |
読み込み中…