Browse Source

Add video settings

master
Roderic Day 5 years ago
parent
commit
e44c2fcf47
2 changed files with 39 additions and 9 deletions
  1. +9
    -4
      pico.css
  2. +30
    -5
      pico.js

+ 9
- 4
pico.css View File

position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
video {
background-color: #eee;
object-fit: cover;
.video-meta label {
display: block;
}
.video-container video {
background-color: lightsteelblue;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
video.mirrored {
.video-container.square video {
object-fit: cover;
}
.video-container.mirror video {
transform: scaleX(-1); transform: scaleX(-1);
} }

+ 30
- 5
pico.js View File

posts: [], posts: [],
rpcs: {}, rpcs: {},
media: {}, media: {},
options: {},
} }
const markedOptions = { const markedOptions = {
breaks: true, breaks: true,
textbox.setSelectionRange(newA, newB) textbox.setSelectionRange(newA, newB)
} }
} }
const VideoOptions = {
available: ['mirror', 'square'],
toggle: (options, string) => () => options.has(string)
? options.delete(string)
: options.add(string),
view: ({attrs}) => VideoOptions.available.map((string) =>
m('label',
m('input', {
type: 'checkbox',
checked: attrs.options.has(string),
onchange: VideoOptions.toggle(attrs.options, string),
}),
string,
)),
}
const Video = { const Video = {
keepRatio: {observe: () => {}}, keepRatio: {observe: () => {}},
appendStream: ({username, stream}) => ({dom}) => { appendStream: ({username, stream}) => ({dom}) => {
dom.ondblclick = toggleFullscreen(dom) dom.ondblclick = toggleFullscreen(dom)
}, },
view({attrs}) { view({attrs}) {
if(!State.options[attrs.username]) {
State.options[attrs.username] = new Set(['mirror', 'square'])
}
const options = State.options[attrs.username]
const classList = [...options].join(' ')

const rpc = State.rpcs[attrs.username] || {iceConnectionState: m.trust(' ')} const rpc = State.rpcs[attrs.username] || {iceConnectionState: m.trust(' ')}
return m('.video-container', {oncreate: ({dom}) => Video.keepRatio.observe(dom)},
m('.video-meta',
m('.video-source', attrs.username),
m('.video-state', rpc.iceConnectionState),
return m('.video-container', {class: classList, oncreate: ({dom}) => Video.keepRatio.observe(dom)},
m('details.video-meta',
m('summary',
m('span.video-source', attrs.username),
m('.video-state', rpc.iceConnectionState),
),
m(VideoOptions, {options}),
), ),
m('video.mirrored', {playsinline: true, oncreate: Video.appendStream(attrs)}),
m('video', {playsinline: true, oncreate: Video.appendStream(attrs)}),
) )
}, },
} }

Loading…
Cancel
Save