| } | } | ||||
| } | } | ||||
| const Video = { | const Video = { | ||||
| keepRatio: {observe: () => {}}, | |||||
| appendStream: ({username, stream}) => ({dom}) => { | appendStream: ({username, stream}) => ({dom}) => { | ||||
| dom.autoplay = true | dom.autoplay = true | ||||
| dom.muted = (username === State.username) | dom.muted = (username === State.username) | ||||
| }, | }, | ||||
| view({attrs}) { | view({attrs}) { | ||||
| const rpc = State.rpcs[attrs.username] || {iceConnectionState: m.trust(' ')} | const rpc = State.rpcs[attrs.username] || {iceConnectionState: m.trust(' ')} | ||||
| return m('.video-container', | |||||
| return m('.video-container', {oncreate: ({dom}) => Video.keepRatio.observe(dom)}, | |||||
| m('.video-meta', | m('.video-meta', | ||||
| m('.video-source', attrs.username), | m('.video-source', attrs.username), | ||||
| m('.video-state', rpc.iceConnectionState), | m('.video-state', rpc.iceConnectionState), | ||||
| ) | ) | ||||
| }, | }, | ||||
| } | } | ||||
| if(window.ResizeObserver) { | |||||
| const doOne = ({target}) => target.style.width = `${target.clientHeight}px` | |||||
| const doAll = (entries) => entries.forEach(doOne) | |||||
| Video.keepRatio = new ResizeObserver(doAll) | |||||
| } | |||||
| const Media = { | const Media = { | ||||
| videoSources: ['camera', 'screen', 'none'], | videoSources: ['camera', 'screen', 'none'], | ||||
| audioDefaults: { | audioDefaults: { |