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