+ 15
- 1
apps/screen.js
查看文件
| @@ -1,3 +1,13 @@ | |||
| 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 = { | |||
| isOn: false, | |||
| start() { | |||
| @@ -8,7 +18,7 @@ const ScreenShare = { | |||
| }, | |||
| toggle() { | |||
| ScreenShare.isOn = !ScreenShare.isOn | |||
| ScreenShare.start() | |||
| // ScreenShare.start() | |||
| }, | |||
| view() { | |||
| const style = { | |||
| @@ -18,3 +28,7 @@ const ScreenShare = { | |||
| return m('video.screen[playsinline][autoplay]', {style}) | |||
| }, | |||
| } | |||
| addEventListener('load', () => { | |||
| Headers.push([ScreenShareConfig]) | |||
| Apps.push([ScreenShare, {key: 'screen-share-container'}]) | |||
| }) | |||
+ 1
- 8
apps/streams.js
查看文件
| @@ -4,15 +4,8 @@ const Toggle = { | |||
| StreamContainer[value] = !StreamContainer[value] | |||
| updateSelfVideo() | |||
| } | |||
| const style = { | |||
| 'font-family': 'monospace', | |||
| 'display': 'inline-flex', | |||
| 'justify-content': 'center', | |||
| 'align-items': 'center', | |||
| 'padding': '0 0.5em', | |||
| } | |||
| const checked = StreamContainer[value] | |||
| return m('label', {style}, | |||
| return m('label.styled', | |||
| m('input[type=checkbox]', {checked, onclick}), | |||
| label, | |||
| ) | |||
+ 17
- 0
pico.html
查看文件
| @@ -9,6 +9,7 @@ | |||
| <script src="/libs/purify.min.js"></script> | |||
| <script src="/pico.js" defer></script> | |||
| <script src="/apps/streams.js"></script> | |||
| <script src="/apps/screen.js"></script> | |||
| <script src="/apps/chat.js"></script> | |||
| <!-- <script src="/apps/volume.js"></script> --> | |||
| <!-- <script src="/apps/screen.js"></script> --> | |||
| @@ -24,6 +25,22 @@ body { | |||
| grid-template-rows: auto 1fr; | |||
| 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> | |||
| <body>PicoChat requires JS</body> | |||
| </html> | |||
+ 2
- 8
pico.js
查看文件
| @@ -175,14 +175,8 @@ const Base = { | |||
| autocomplete: 'off', | |||
| value: localStorage.username, | |||
| } | |||
| const headerStyle = { | |||
| display: 'grid', | |||
| gridAutoFlow: 'column', | |||
| justifyItems: 'start', | |||
| marginRight: 'auto', | |||
| } | |||
| return [ | |||
| m('header', {style: headerStyle}, | |||
| m('header', | |||
| State.isConnected | |||
| ? Headers.map(h => m(...h)) | |||
| : [ | |||
| @@ -193,7 +187,7 @@ const Base = { | |||
| ), | |||
| ], | |||
| ), | |||
| m('main', {style: {overflow: 'hidden'}}, | |||
| m('main', | |||
| State.isConnected | |||
| ? Apps.map(a => m(...a)) | |||
| : [ | |||
Loading…