73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
module.exports = Player
|
|
|
|
var h = require('virtual-dom/h')
|
|
|
|
function Player (state, dispatch) {
|
|
// Unfortunately, play/pause can't be done just by modifying HTML.
|
|
// Instead, grab the DOM node and play/pause it if necessary
|
|
var videoElement = document.querySelector('video')
|
|
if (videoElement !== null &&
|
|
videoElement.paused !== state.video.isPaused) {
|
|
if (state.video.isPaused) {
|
|
videoElement.pause()
|
|
} else {
|
|
videoElement.play()
|
|
}
|
|
}
|
|
|
|
return h('.player', [
|
|
h('video', {
|
|
src: state.server.localURL,
|
|
autoplay: true,
|
|
onloadedmetadata: onLoadedMetadata
|
|
}),
|
|
renderPlayerControls(state, dispatch)
|
|
])
|
|
|
|
// As soon as the video loads far enough to know the dimensions, resize the
|
|
// window to match the video resolution
|
|
function onLoadedMetadata (e) {
|
|
var video = e.target
|
|
var dimensions = {
|
|
width: video.videoWidth,
|
|
height: video.videoHeight
|
|
}
|
|
dispatch('setDimensions', dimensions)
|
|
}
|
|
}
|
|
|
|
// Renders all video controls: play/pause, scrub, loading bar
|
|
// TODO: cast buttons
|
|
function renderPlayerControls (state, dispatch) {
|
|
return h('.player-controls', [
|
|
h('.bottom-bar', [
|
|
h('.loading-bar', {
|
|
onclick: () => dispatch('playbackJump')
|
|
}, renderLoadingBar(state)),
|
|
h('.playback-cursor', {
|
|
style: {left: '125px'}
|
|
}),
|
|
h('i.icon.play-pause', {
|
|
onclick: () => dispatch('playPause')
|
|
}, state.video.isPaused ? 'play_arrow' : 'pause')
|
|
])
|
|
])
|
|
}
|
|
|
|
// Renders the loading bar. Shows which parts of the torrent are loaded, which
|
|
// can be "spongey" / non-contiguous
|
|
function renderLoadingBar (state) {
|
|
// TODO: get real data from webtorrent
|
|
return [
|
|
h('.loading-bar-part', {
|
|
style: {left: '10px', width: '50px'}
|
|
}),
|
|
h('.loading-bar-part', {
|
|
style: {left: '90px', width: '40px'}
|
|
}),
|
|
h('.loading-bar-part', {
|
|
style: {left: '135px', width: '5px'}
|
|
})
|
|
]
|
|
}
|