994 lines
30 KiB
JavaScript
994 lines
30 KiB
JavaScript
/* globals MediaMetadata */
|
|
|
|
const React = require('react')
|
|
const BitField = require('bitfield').default
|
|
const prettyBytes = require('prettier-bytes')
|
|
|
|
const TorrentSummary = require('../lib/torrent-summary')
|
|
const Playlist = require('../lib/playlist')
|
|
const { dispatch, dispatcher } = require('../lib/dispatcher')
|
|
const config = require('../../config')
|
|
const { calculateEta } = require('../lib/time')
|
|
|
|
// Shows a streaming video player. Standard features + Chromecast + Airplay
|
|
module.exports = class Player extends React.Component {
|
|
render () {
|
|
// Show the video as large as will fit in the window, play immediately
|
|
// If the video is on Chromecast or Airplay, show a title screen instead
|
|
const state = this.props.state
|
|
const showVideo = state.playing.location === 'local'
|
|
const showControls = state.playing.location !== 'external'
|
|
return (
|
|
<div
|
|
className='player'
|
|
onWheel={handleVolumeWheel}
|
|
onMouseMove={dispatcher('mediaMouseMoved')}
|
|
>
|
|
{showVideo ? renderMedia(state) : renderCastScreen(state)}
|
|
{showControls ? renderPlayerControls(state) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
onComponentWillUnmount () {
|
|
// Unload the media element so that Chromium stops trying to fetch data
|
|
const tag = document.querySelector('audio,video')
|
|
if (!tag) return
|
|
tag.pause()
|
|
tag.src = ''
|
|
tag.load()
|
|
navigator.mediaSession.metadata = null
|
|
}
|
|
}
|
|
|
|
// Handles volume change by wheel
|
|
function handleVolumeWheel (e) {
|
|
dispatch('changeVolume', (-e.deltaY | e.deltaX) / 500)
|
|
}
|
|
|
|
function renderMedia (state) {
|
|
if (!state.server) return
|
|
|
|
// Unfortunately, play/pause can't be done just by modifying HTML.
|
|
// Instead, grab the DOM node and play/pause it if necessary
|
|
// Get the <video> or <audio> tag
|
|
const mediaElement = document.querySelector(state.playing.type)
|
|
if (mediaElement !== null) {
|
|
if (navigator.mediaSession.metadata === null && mediaElement.played.length !== 0) {
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
title: state.playing.fileName
|
|
})
|
|
navigator.mediaSession.setActionHandler('pause', () => {
|
|
dispatch('playPause')
|
|
})
|
|
navigator.mediaSession.setActionHandler('play', () => {
|
|
dispatch('playPause')
|
|
})
|
|
if (Playlist.hasNext(state)) {
|
|
navigator.mediaSession.setActionHandler('nexttrack', () => {
|
|
dispatch('nextTrack')
|
|
})
|
|
}
|
|
if (Playlist.hasPrevious(state)) {
|
|
navigator.mediaSession.setActionHandler('previoustrack', () => {
|
|
dispatch('previousTrack')
|
|
})
|
|
}
|
|
}
|
|
|
|
if (state.playing.isPaused && !mediaElement.paused) {
|
|
mediaElement.pause()
|
|
} else if (!state.playing.isPaused && mediaElement.paused) {
|
|
mediaElement.play()
|
|
}
|
|
// When the user clicks or drags on the progress bar, jump to that position
|
|
if (state.playing.jumpToTime != null) {
|
|
mediaElement.currentTime = state.playing.jumpToTime
|
|
state.playing.jumpToTime = null
|
|
}
|
|
if (state.playing.playbackRate !== mediaElement.playbackRate) {
|
|
mediaElement.playbackRate = state.playing.playbackRate
|
|
}
|
|
// Recover previous volume
|
|
if (state.previousVolume !== null && isFinite(state.previousVolume)) {
|
|
mediaElement.volume = state.previousVolume
|
|
state.previousVolume = null
|
|
}
|
|
|
|
// Set volume
|
|
if (state.playing.setVolume !== null && isFinite(state.playing.setVolume)) {
|
|
mediaElement.volume = state.playing.setVolume
|
|
state.playing.setVolume = null
|
|
}
|
|
|
|
// Switch to the newly added subtitle track, if available
|
|
const tracks = mediaElement.textTracks || []
|
|
for (let j = 0; j < tracks.length; j++) {
|
|
const isSelectedTrack = j === state.playing.subtitles.selectedIndex
|
|
tracks[j].mode = isSelectedTrack ? 'showing' : 'hidden'
|
|
}
|
|
|
|
// Save video position
|
|
const file = state.getPlayingFileSummary()
|
|
file.currentTime = state.playing.currentTime = mediaElement.currentTime
|
|
file.duration = state.playing.duration = mediaElement.duration
|
|
|
|
// Save selected subtitle
|
|
if (state.playing.subtitles.selectedIndex !== -1) {
|
|
const index = state.playing.subtitles.selectedIndex
|
|
file.selectedSubtitle = state.playing.subtitles.tracks[index].filePath
|
|
} else if (file.selectedSubtitle != null) {
|
|
delete file.selectedSubtitle
|
|
}
|
|
|
|
// Switch to selected audio track
|
|
const audioTracks = mediaElement.audioTracks || []
|
|
for (let j = 0; j < audioTracks.length; j++) {
|
|
const isSelectedTrack = j === state.playing.audioTracks.selectedIndex
|
|
audioTracks[j].enabled = isSelectedTrack
|
|
}
|
|
|
|
state.playing.volume = mediaElement.volume
|
|
}
|
|
|
|
// Add subtitles to the <video> tag
|
|
const trackTags = []
|
|
if (state.playing.subtitles.selectedIndex >= 0) {
|
|
state.playing.subtitles.tracks.forEach((track, i) => {
|
|
const isSelected = state.playing.subtitles.selectedIndex === i
|
|
trackTags.push(
|
|
<track
|
|
key={i}
|
|
default={isSelected}
|
|
label={track.label}
|
|
kind='subtitles'
|
|
src={track.buffer}
|
|
/>
|
|
)
|
|
})
|
|
}
|
|
|
|
// Create the <audio> or <video> tag
|
|
const MediaTagName = state.playing.type
|
|
const mediaTag = (
|
|
<MediaTagName
|
|
src={Playlist.getCurrentLocalURL(state)}
|
|
onDoubleClick={dispatcher('toggleFullScreen')}
|
|
onClick={dispatcher('playPause')}
|
|
onLoadedMetadata={onLoadedMetadata}
|
|
onEnded={onEnded}
|
|
onStalled={dispatcher('mediaStalled')}
|
|
onError={dispatcher('mediaError')}
|
|
onTimeUpdate={dispatcher('mediaTimeUpdate')}
|
|
onEncrypted={dispatcher('mediaEncrypted')}
|
|
>
|
|
{trackTags}
|
|
</MediaTagName>
|
|
)
|
|
|
|
// Show the media.
|
|
return (
|
|
<div
|
|
key='letterbox'
|
|
className='letterbox'
|
|
onMouseMove={dispatcher('mediaMouseMoved')}
|
|
>
|
|
{mediaTag}
|
|
{renderOverlay(state)}
|
|
</div>
|
|
)
|
|
|
|
function onLoadedMetadata (e) {
|
|
const mediaElement = e.target
|
|
|
|
// check if we can decode video and audio track
|
|
if (state.playing.type === 'video') {
|
|
if (mediaElement.videoTracks.length === 0) {
|
|
dispatch('mediaError', 'Video codec unsupported')
|
|
}
|
|
|
|
if (mediaElement.audioTracks.length === 0) {
|
|
dispatch('mediaError', 'Audio codec unsupported')
|
|
}
|
|
|
|
dispatch('mediaSuccess')
|
|
|
|
const dimensions = {
|
|
width: mediaElement.videoWidth,
|
|
height: mediaElement.videoHeight
|
|
}
|
|
|
|
// As soon as we know the video dimensions, resize the window
|
|
dispatch('setDimensions', dimensions)
|
|
|
|
// set audioTracks
|
|
const tracks = []
|
|
for (let i = 0; i < mediaElement.audioTracks.length; i++) {
|
|
tracks.push({
|
|
label: mediaElement.audioTracks[i].label || `Track ${i + 1}`,
|
|
language: mediaElement.audioTracks[i].language
|
|
})
|
|
}
|
|
|
|
state.playing.audioTracks.tracks = tracks
|
|
state.playing.audioTracks.selectedIndex = 0
|
|
}
|
|
|
|
// check if we can decode audio track
|
|
if (state.playing.type === 'audio') {
|
|
if (mediaElement.audioTracks.length === 0) {
|
|
dispatch('mediaError', 'Audio codec unsupported')
|
|
}
|
|
|
|
dispatch('mediaSuccess')
|
|
}
|
|
}
|
|
|
|
function onEnded () {
|
|
if (Playlist.hasNext(state)) {
|
|
dispatch('nextTrack')
|
|
} else {
|
|
// When the last video completes, pause the video instead of looping
|
|
state.playing.isPaused = true
|
|
if (state.window.isFullScreen) dispatch('toggleFullScreen')
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderOverlay (state) {
|
|
const elems = []
|
|
const audioMetadataElem = renderAudioMetadata(state)
|
|
const spinnerElem = renderLoadingSpinner(state)
|
|
if (audioMetadataElem) elems.push(audioMetadataElem)
|
|
if (spinnerElem) elems.push(spinnerElem)
|
|
|
|
// Video fills the window, centered with black bars if necessary
|
|
// Audio gets a static poster image and a summary of the file metadata.
|
|
let style
|
|
if (state.playing.type === 'audio') {
|
|
style = { backgroundImage: cssBackgroundImagePoster(state) }
|
|
} else if (elems.length !== 0) {
|
|
style = { backgroundImage: cssBackgroundImageDarkGradient() }
|
|
} else {
|
|
// Video playing, so no spinner. No overlay needed
|
|
return
|
|
}
|
|
|
|
return (
|
|
<div key='overlay' className='media-overlay-background' style={style}>
|
|
<div className='media-overlay'>{elems}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Render track or disk number string
|
|
* @param common metadata.common part
|
|
* @param key should be either 'track' or 'disk'
|
|
* @return track or disk number metadata as JSX block
|
|
*/
|
|
function renderTrack (common, key) {
|
|
// Audio metadata: track-number
|
|
if (common[key] && common[key].no) {
|
|
let str = `${common[key].no}`
|
|
if (common[key].of) {
|
|
str += ` of ${common[key].of}`
|
|
}
|
|
const style = { textTransform: 'capitalize' }
|
|
return (
|
|
<div className={`audio-${key}`}>
|
|
<label style={style}>{key}</label> {str}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
function renderAudioMetadata (state) {
|
|
const fileSummary = state.getPlayingFileSummary()
|
|
if (!fileSummary.audioInfo) return
|
|
const common = fileSummary.audioInfo.common || {}
|
|
|
|
// Get audio track info
|
|
const title = common.title ? common.title : fileSummary.name
|
|
|
|
// Show a small info box in the middle of the screen with title/album/etc
|
|
const elems = []
|
|
|
|
// Audio metadata: artist(s)
|
|
const artist = common.artist || common.albumartist
|
|
if (artist) {
|
|
elems.push((
|
|
<div key='artist' className='audio-artist'>
|
|
<label>Artist</label>{artist}
|
|
</div>
|
|
))
|
|
}
|
|
|
|
// Audio metadata: disk & track-number
|
|
const count = ['track', 'disk']
|
|
count.forEach(key => {
|
|
const nrElem = renderTrack(common, key)
|
|
if (nrElem) {
|
|
elems.push(nrElem)
|
|
}
|
|
})
|
|
|
|
// Audio metadata: album
|
|
if (common.album) {
|
|
elems.push((
|
|
<div key='album' className='audio-album'>
|
|
<label>Album</label>{common.album}
|
|
</div>
|
|
))
|
|
}
|
|
|
|
// Audio metadata: year
|
|
if (common.year) {
|
|
elems.push((
|
|
<div key='year' className='audio-year'>
|
|
<label>Year</label>{common.year}
|
|
</div>
|
|
))
|
|
}
|
|
|
|
// Audio metadata: release information (label & catalog-number)
|
|
if (common.label || common.catalognumber) {
|
|
const releaseInfo = []
|
|
if (common.label && common.catalognumber &&
|
|
common.label.length === common.catalognumber.length) {
|
|
// Assume labels & catalog-numbers are pairs
|
|
for (let n = 0; n < common.label.length; ++n) {
|
|
releaseInfo.push(common.label[0] + ' / ' + common.catalognumber[n])
|
|
}
|
|
} else {
|
|
if (common.label) {
|
|
releaseInfo.push(...common.label)
|
|
}
|
|
if (common.catalognumber) {
|
|
releaseInfo.push(...common.catalognumber)
|
|
}
|
|
}
|
|
elems.push((
|
|
<div key='release' className='audio-release'>
|
|
<label>Release</label>{releaseInfo.join(', ')}
|
|
</div>
|
|
))
|
|
}
|
|
|
|
// Audio metadata: format
|
|
const format = []
|
|
fileSummary.audioInfo.format = fileSummary.audioInfo.format || ''
|
|
if (fileSummary.audioInfo.format.container) {
|
|
format.push(fileSummary.audioInfo.format.container)
|
|
}
|
|
if (fileSummary.audioInfo.format.codec &&
|
|
fileSummary.audioInfo.format.container !== fileSummary.audioInfo.format.codec) {
|
|
format.push(fileSummary.audioInfo.format.codec)
|
|
}
|
|
if (fileSummary.audioInfo.format.bitrate) {
|
|
format.push(Math.round(fileSummary.audioInfo.format.bitrate / 1000) + ' kbit/s') // 128 kbit/s
|
|
}
|
|
if (fileSummary.audioInfo.format.sampleRate) {
|
|
format.push(Math.round(fileSummary.audioInfo.format.sampleRate / 100) / 10 + ' kHz')
|
|
}
|
|
if (fileSummary.audioInfo.format.bitsPerSample) {
|
|
format.push(fileSummary.audioInfo.format.bitsPerSample + '-bit')
|
|
}
|
|
if (format.length > 0) {
|
|
elems.push((
|
|
<div key='format' className='audio-format'>
|
|
<label>Format</label>{format.join(', ')}
|
|
</div>
|
|
))
|
|
}
|
|
|
|
// Audio metadata: comments
|
|
if (common.comment) {
|
|
elems.push((
|
|
<div key='comments' className='audio-comments'>
|
|
<label>Comments</label>{common.comment.join(' / ')}
|
|
</div>
|
|
))
|
|
}
|
|
|
|
// Align the title with the other info, if available. Otherwise, center title
|
|
const emptyLabel = (<label />)
|
|
elems.unshift((
|
|
<div key='title' className='audio-title'>
|
|
{elems.length ? emptyLabel : undefined}{title}
|
|
</div>
|
|
))
|
|
|
|
return (<div key='audio-metadata' className='audio-metadata'>{elems}</div>)
|
|
}
|
|
|
|
function renderLoadingSpinner (state) {
|
|
if (state.playing.isPaused) return
|
|
const isProbablyStalled = state.playing.isStalled ||
|
|
(new Date().getTime() - state.playing.lastTimeUpdate > 2000)
|
|
if (!isProbablyStalled) return
|
|
|
|
const prog = state.getPlayingTorrentSummary().progress || {}
|
|
let fileProgress = 0
|
|
if (prog.files) {
|
|
const file = prog.files[state.playing.fileIndex]
|
|
fileProgress = Math.floor(100 * file.numPiecesPresent / file.numPieces)
|
|
}
|
|
|
|
return (
|
|
<div key='loading' className='media-stalled'>
|
|
<div key='loading-spinner' className='loading-spinner' />
|
|
<div key='loading-progress' className='loading-status ellipsis'>
|
|
<span><span className='progress'>{fileProgress}%</span> downloaded</span>
|
|
<span> ↓ {prettyBytes(prog.downloadSpeed || 0)}/s</span>
|
|
<span> ↑ {prettyBytes(prog.uploadSpeed || 0)}/s</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function renderCastScreen (state) {
|
|
let castIcon, castType, isCast
|
|
if (state.playing.location.startsWith('chromecast')) {
|
|
castIcon = 'cast_connected'
|
|
castType = 'Chromecast'
|
|
isCast = true
|
|
} else if (state.playing.location.startsWith('airplay')) {
|
|
castIcon = 'airplay'
|
|
castType = 'AirPlay'
|
|
isCast = true
|
|
} else if (state.playing.location.startsWith('dlna')) {
|
|
castIcon = 'tv'
|
|
castType = 'DLNA'
|
|
isCast = true
|
|
} else if (state.playing.location === 'external') {
|
|
castIcon = 'tv'
|
|
castType = state.getExternalPlayerName()
|
|
isCast = false
|
|
} else if (state.playing.location === 'error') {
|
|
castIcon = 'error_outline'
|
|
castType = 'Unable to Play'
|
|
isCast = false
|
|
}
|
|
|
|
const isStarting = state.playing.location.endsWith('-pending')
|
|
const castName = state.playing.castName
|
|
const fileName = state.getPlayingFileSummary().name || ''
|
|
let castStatus
|
|
if (isCast && isStarting) castStatus = 'Connecting to ' + castName + '...'
|
|
else if (isCast && !isStarting) castStatus = 'Connected to ' + castName
|
|
else castStatus = ''
|
|
|
|
const prog = state.getPlayingTorrentSummary().progress || {}
|
|
|
|
// Show a nice title image, if possible
|
|
const style = {
|
|
backgroundImage: cssBackgroundImagePoster(state)
|
|
}
|
|
|
|
function renderEta (total, downloaded) {
|
|
const missing = (total || 0) - (downloaded || 0)
|
|
const downloadSpeed = prog.downloadSpeed || 0
|
|
if (downloadSpeed === 0 || missing === 0) return
|
|
|
|
const etaStr = calculateEta(missing, downloadSpeed)
|
|
|
|
return (<span>{etaStr}</span>)
|
|
}
|
|
|
|
function renderDownloadProgress () {
|
|
if (!prog.files) return
|
|
|
|
const fileProg = prog.files[state.playing.fileIndex]
|
|
const fileProgress = fileProg.numPiecesPresent / fileProg.numPieces
|
|
const fileLength = state.getPlayingFileSummary().length
|
|
const fileDownloaded = fileProgress * fileLength
|
|
|
|
const progress = Math.round(100 * fileProgress)
|
|
const total = prettyBytes(fileLength)
|
|
const completed = prettyBytes(fileDownloaded)
|
|
|
|
const downloadSpeed = prettyBytes(prog.downloadSpeed || 0)
|
|
const uploadSpeed = prettyBytes(prog.uploadSpeed || 0)
|
|
|
|
let sizes
|
|
if (fileProgress < 1) {
|
|
sizes = <span> | {completed} / {total}</span>
|
|
} else {
|
|
sizes = <span> | {completed}</span>
|
|
}
|
|
|
|
return (
|
|
<div key='download-progress'>
|
|
<span className='progress'>{progress}% downloaded {sizes}</span>
|
|
<br />
|
|
<span>↓ {downloadSpeed}/s ↑ {uploadSpeed}/s | {prog.numPeers || 0} peer(s)</span>
|
|
<br />
|
|
{renderEta(fileLength, fileDownloaded)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div key='cast' className='letterbox' style={style}>
|
|
<div className='cast-screen'>
|
|
<i className='icon'>{castIcon}</i>
|
|
<div key='type' className='cast-type'>{castType}</div>
|
|
<div key='status' className='cast-status'>{castStatus}</div>
|
|
<div key='name' className='name'>{fileName}</div>
|
|
{renderDownloadProgress()}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function renderCastOptions (state) {
|
|
if (!state.devices.castMenu) return
|
|
|
|
const { location, devices } = state.devices.castMenu
|
|
const player = state.devices[location]
|
|
|
|
const items = devices.map((device, ix) => {
|
|
const isSelected = player.device === device
|
|
const name = device.name
|
|
return (
|
|
<li key={ix} onClick={dispatcher('selectCastDevice', ix)}>
|
|
<i className='icon'>{isSelected ? 'radio_button_checked' : 'radio_button_unchecked'}</i>
|
|
{' '}
|
|
{name}
|
|
</li>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<ul key='cast-options' className='options-list'>
|
|
{items}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
function renderSubtitleOptions (state) {
|
|
const subtitles = state.playing.subtitles
|
|
if (!subtitles.tracks.length || !subtitles.showMenu) return
|
|
|
|
const items = subtitles.tracks.map((track, ix) => {
|
|
const isSelected = state.playing.subtitles.selectedIndex === ix
|
|
return (
|
|
<li key={ix} onClick={dispatcher('selectSubtitle', ix)}>
|
|
<i className='icon'>{'radio_button_' + (isSelected ? 'checked' : 'unchecked')}</i>
|
|
{track.label}
|
|
</li>
|
|
)
|
|
})
|
|
|
|
const noneSelected = state.playing.subtitles.selectedIndex === -1
|
|
const noneClass = 'radio_button_' + (noneSelected ? 'checked' : 'unchecked')
|
|
return (
|
|
<ul key='subtitle-options' className='options-list'>
|
|
{items}
|
|
<li onClick={dispatcher('selectSubtitle', -1)}>
|
|
<i className='icon'>{noneClass}</i>
|
|
None
|
|
</li>
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
function renderAudioTrackOptions (state) {
|
|
const audioTracks = state.playing.audioTracks
|
|
if (!audioTracks.tracks.length || !audioTracks.showMenu) return
|
|
|
|
const items = audioTracks.tracks.map((track, ix) => {
|
|
const isSelected = state.playing.audioTracks.selectedIndex === ix
|
|
return (
|
|
<li key={ix} onClick={dispatcher('selectAudioTrack', ix)}>
|
|
<i className='icon'>{'radio_button_' + (isSelected ? 'checked' : 'unchecked')}</i>
|
|
{track.label}
|
|
</li>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<ul key='audio-track-options' className='options-list'>
|
|
{items}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
function renderPlayerControls (state) {
|
|
const positionPercent = 100 * state.playing.currentTime / state.playing.duration
|
|
const playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 3px)' }
|
|
const captionsClass = state.playing.subtitles.tracks.length === 0
|
|
? 'disabled'
|
|
: state.playing.subtitles.selectedIndex >= 0
|
|
? 'active'
|
|
: ''
|
|
const multiAudioClass = state.playing.audioTracks.tracks.length > 1
|
|
? 'active'
|
|
: 'disabled'
|
|
const prevClass = Playlist.hasPrevious(state) ? '' : 'disabled'
|
|
const nextClass = Playlist.hasNext(state) ? '' : 'disabled'
|
|
|
|
const elements = [
|
|
renderPreview(state),
|
|
|
|
<div key='playback-bar' className='playback-bar'>
|
|
{renderLoadingBar(state)}
|
|
<div
|
|
key='cursor'
|
|
className='playback-cursor'
|
|
style={playbackCursorStyle}
|
|
/>
|
|
<div
|
|
key='scrub-bar'
|
|
className='scrub-bar'
|
|
draggable='true'
|
|
onMouseMove={handleScrubPreview}
|
|
onMouseOut={clearPreview}
|
|
onDragStart={handleDragStart}
|
|
onClick={handleScrub}
|
|
onDrag={handleScrub}
|
|
/>
|
|
</div>,
|
|
|
|
<i
|
|
key='skip-previous'
|
|
className={'icon skip-previous float-left ' + prevClass}
|
|
onClick={dispatcher('previousTrack')}
|
|
role='button'
|
|
aria-label='Previous track'
|
|
>
|
|
skip_previous
|
|
</i>,
|
|
|
|
<i
|
|
key='play'
|
|
className='icon play-pause float-left'
|
|
onClick={dispatcher('playPause')}
|
|
role='button'
|
|
aria-label={state.playing.isPaused ? 'Play' : 'Pause'}
|
|
>
|
|
{state.playing.isPaused ? 'play_arrow' : 'pause'}
|
|
</i>,
|
|
|
|
<i
|
|
key='skip-next'
|
|
className={'icon skip-next float-left ' + nextClass}
|
|
onClick={dispatcher('nextTrack')}
|
|
role='button'
|
|
aria-label='Next track'
|
|
>
|
|
skip_next
|
|
</i>,
|
|
|
|
<i
|
|
key='fullscreen'
|
|
className='icon fullscreen float-right'
|
|
onClick={dispatcher('toggleFullScreen')}
|
|
role='button'
|
|
aria-label={state.window.isFullScreen ? 'Exit full screen' : 'Enter full screen'}
|
|
>
|
|
{state.window.isFullScreen ? 'fullscreen_exit' : 'fullscreen'}
|
|
</i>
|
|
]
|
|
|
|
if (state.playing.type === 'video') {
|
|
// Show closed captions icon
|
|
elements.push((
|
|
<i
|
|
key='subtitles'
|
|
className={'icon closed-caption float-right ' + captionsClass}
|
|
onClick={handleSubtitles}
|
|
role='button'
|
|
aria-label='Closed captions'
|
|
>
|
|
closed_caption
|
|
</i>
|
|
), (
|
|
<i
|
|
key='audio-tracks'
|
|
className={'icon multi-audio float-right ' + multiAudioClass}
|
|
onClick={handleAudioTracks}
|
|
>
|
|
library_music
|
|
</i>
|
|
))
|
|
}
|
|
|
|
// If we've detected a Chromecast or AppleTV, the user can play video there
|
|
const castTypes = ['chromecast', 'airplay', 'dlna']
|
|
const isCastingAnywhere = castTypes.some(
|
|
(castType) => state.playing.location.startsWith(castType))
|
|
|
|
// Add the cast buttons. Icons for each cast type, connected/disconnected:
|
|
const buttonIcons = {
|
|
chromecast: { true: 'cast_connected', false: 'cast' },
|
|
airplay: { true: 'airplay', false: 'airplay' },
|
|
dlna: { true: 'tv', false: 'tv' }
|
|
}
|
|
castTypes.forEach(castType => {
|
|
// Do we show this button (eg. the Chromecast button) at all?
|
|
const isCasting = state.playing.location.startsWith(castType)
|
|
const player = state.devices[castType]
|
|
if ((!player || player.getDevices().length === 0) && !isCasting) return
|
|
|
|
// Show the button. Three options for eg the Chromecast button:
|
|
let buttonClass, buttonHandler
|
|
if (isCasting) {
|
|
// Option 1: we are currently connected to Chromecast. Button stops the cast.
|
|
buttonClass = 'active'
|
|
buttonHandler = dispatcher('stopCasting')
|
|
} else if (isCastingAnywhere) {
|
|
// Option 2: we are currently connected somewhere else. Button disabled.
|
|
buttonClass = 'disabled'
|
|
buttonHandler = undefined
|
|
} else {
|
|
// Option 3: we are not connected anywhere. Button opens Chromecast menu.
|
|
buttonClass = ''
|
|
buttonHandler = dispatcher('toggleCastMenu', castType)
|
|
}
|
|
const buttonIcon = buttonIcons[castType][isCasting]
|
|
|
|
elements.push((
|
|
<i
|
|
key={castType}
|
|
className={'icon device float-right ' + buttonClass}
|
|
onClick={buttonHandler}
|
|
>
|
|
{buttonIcon}
|
|
</i>
|
|
))
|
|
})
|
|
|
|
// Render volume slider
|
|
const volume = state.playing.volume
|
|
const volumeIcon = 'volume_' + (
|
|
volume === 0
|
|
? 'off'
|
|
: volume < 0.3
|
|
? 'mute'
|
|
: volume < 0.6
|
|
? 'down'
|
|
: 'up'
|
|
)
|
|
const volumeStyle = {
|
|
background: '-webkit-gradient(linear, left top, right top, ' +
|
|
'color-stop(' + (volume * 100) + '%, #eee), ' +
|
|
'color-stop(' + (volume * 100) + '%, #727272))'
|
|
}
|
|
|
|
elements.push((
|
|
<div key='volume' className='volume float-left'>
|
|
<i
|
|
className='icon volume-icon float-left'
|
|
onMouseDown={handleVolumeMute}
|
|
role='button'
|
|
aria-label='Mute'
|
|
>
|
|
{volumeIcon}
|
|
</i>
|
|
<input
|
|
className='volume-slider float-right'
|
|
type='range' min='0' max='1' step='0.05'
|
|
value={volume}
|
|
onChange={handleVolumeScrub}
|
|
style={volumeStyle}
|
|
/>
|
|
</div>
|
|
))
|
|
|
|
// Show video playback progress
|
|
const currentTimeStr = formatTime(state.playing.currentTime, state.playing.duration)
|
|
const durationStr = formatTime(state.playing.duration, state.playing.duration)
|
|
elements.push((
|
|
<span key='time' className='time float-left'>
|
|
{currentTimeStr} / {durationStr}
|
|
</span>
|
|
))
|
|
|
|
// Render playback rate
|
|
if (state.playing.playbackRate !== 1) {
|
|
elements.push((
|
|
<span key='rate' className='rate float-left'>
|
|
{state.playing.playbackRate}x
|
|
</span>
|
|
))
|
|
}
|
|
|
|
const emptyImage = new window.Image(0, 0)
|
|
emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D'
|
|
function handleDragStart (e) {
|
|
if (e.dataTransfer) {
|
|
const dt = e.dataTransfer
|
|
// Prevent the cursor from changing, eg to a green + icon on Mac
|
|
dt.effectAllowed = 'none'
|
|
// Prevent ghost image
|
|
dt.setDragImage(emptyImage, 0, 0)
|
|
}
|
|
}
|
|
|
|
// Handles a scrub hover (preview another position in the video)
|
|
function handleScrubPreview (e) {
|
|
// Only show for videos
|
|
if (!e.clientX || state.playing.type !== 'video') return
|
|
dispatch('mediaMouseMoved')
|
|
dispatch('preview', e.clientX)
|
|
}
|
|
|
|
function clearPreview () {
|
|
if (state.playing.type !== 'video') return
|
|
dispatch('clearPreview')
|
|
}
|
|
|
|
// Handles a click or drag to scrub (jump to another position in the video)
|
|
function handleScrub (e) {
|
|
if (!e.clientX) return
|
|
dispatch('mediaMouseMoved')
|
|
const windowWidth = document.querySelector('body').clientWidth
|
|
const fraction = e.clientX / windowWidth
|
|
const position = fraction * state.playing.duration /* seconds */
|
|
dispatch('skipTo', position)
|
|
}
|
|
|
|
// Handles volume muting and Unmuting
|
|
function handleVolumeMute () {
|
|
if (state.playing.volume === 0.0) {
|
|
dispatch('setVolume', 1.0)
|
|
} else {
|
|
dispatch('setVolume', 0.0)
|
|
}
|
|
}
|
|
|
|
// Handles volume slider scrub
|
|
function handleVolumeScrub (e) {
|
|
dispatch('setVolume', e.target.value)
|
|
}
|
|
|
|
function handleSubtitles (e) {
|
|
if (!state.playing.subtitles.tracks.length || e.ctrlKey || e.metaKey) {
|
|
// if no subtitles available select it
|
|
dispatch('openSubtitles')
|
|
} else {
|
|
dispatch('toggleSubtitlesMenu')
|
|
}
|
|
}
|
|
|
|
function handleAudioTracks () {
|
|
dispatch('toggleAudioTracksMenu')
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key='controls' className='controls'
|
|
onMouseEnter={dispatcher('mediaControlsMouseEnter')}
|
|
onMouseLeave={dispatcher('mediaControlsMouseLeave')}
|
|
>
|
|
{elements}
|
|
{renderCastOptions(state)}
|
|
{renderSubtitleOptions(state)}
|
|
{renderAudioTrackOptions(state)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function renderPreview (state) {
|
|
const { previewXCoord = null } = state.playing
|
|
|
|
// Calculate time from x-coord as fraction of track width
|
|
const windowWidth = document.querySelector('body').clientWidth
|
|
const fraction = previewXCoord / windowWidth
|
|
const time = fraction * state.playing.duration /* seconds */
|
|
|
|
const height = 70
|
|
let width = 0
|
|
|
|
const previewEl = document.querySelector('video#preview')
|
|
if (previewEl !== null && previewXCoord !== null) {
|
|
previewEl.currentTime = time
|
|
|
|
// Auto adjust width to maintain video aspect ratio
|
|
width = Math.floor((previewEl.videoWidth / previewEl.videoHeight) * height)
|
|
}
|
|
|
|
// Center preview window on mouse cursor,
|
|
// while avoiding falling off the left or right edges
|
|
const xPos = Math.min(Math.max(previewXCoord - (width / 2), 5), windowWidth - width - 5)
|
|
|
|
return (
|
|
<div
|
|
key='preview' style={{
|
|
position: 'absolute',
|
|
bottom: 50,
|
|
left: xPos,
|
|
display: previewXCoord == null && 'none' // Hide preview when XCoord unset
|
|
}}
|
|
>
|
|
<div style={{ width, height, backgroundColor: 'black' }}>
|
|
<video
|
|
src={Playlist.getCurrentLocalURL(state)}
|
|
id='preview'
|
|
style={{ border: '1px solid lightgrey', borderRadius: 2 }}
|
|
/>
|
|
</div>
|
|
<p
|
|
style={{
|
|
textAlign: 'center', margin: 5, textShadow: '0 0 2px rgba(0,0,0,.5)', color: '#eee'
|
|
}}
|
|
>
|
|
{formatTime(time, state.playing.duration)}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Renders the loading bar. Shows which parts of the torrent are loaded, which
|
|
// can be 'spongey' / non-contiguous
|
|
function renderLoadingBar (state) {
|
|
if (config.IS_TEST) return // Don't integration test the loading bar. Screenshots won't match.
|
|
|
|
const torrentSummary = state.getPlayingTorrentSummary()
|
|
if (!torrentSummary.progress) {
|
|
return null
|
|
}
|
|
|
|
// Find all contiguous parts of the torrent which are loaded
|
|
const prog = torrentSummary.progress
|
|
const fileProg = prog.files[state.playing.fileIndex]
|
|
|
|
if (!fileProg) return null
|
|
|
|
const parts = []
|
|
let lastPiecePresent = false
|
|
for (let i = fileProg.startPiece; i <= fileProg.endPiece; i++) {
|
|
const partPresent = BitField.prototype.get.call(prog.bitfield, i)
|
|
if (partPresent && !lastPiecePresent) {
|
|
parts.push({ start: i - fileProg.startPiece, count: 1 })
|
|
} else if (partPresent) {
|
|
parts[parts.length - 1].count++
|
|
}
|
|
lastPiecePresent = partPresent
|
|
}
|
|
|
|
// Output some bars to show which parts of the file are loaded
|
|
const loadingBarElems = parts.map((part, i) => {
|
|
const style = {
|
|
left: (100 * part.start / fileProg.numPieces) + '%',
|
|
width: (100 * part.count / fileProg.numPieces) + '%'
|
|
}
|
|
|
|
return (<div key={i} className='loading-bar-part' style={style} />)
|
|
})
|
|
|
|
return (<div key='loading-bar' className='loading-bar'>{loadingBarElems}</div>)
|
|
}
|
|
|
|
// Returns the CSS background-image string for a poster image + dark vignette
|
|
function cssBackgroundImagePoster (state) {
|
|
const torrentSummary = state.getPlayingTorrentSummary()
|
|
const posterPath = TorrentSummary.getPosterPath(torrentSummary)
|
|
if (!posterPath) return ''
|
|
return cssBackgroundImageDarkGradient() + `, url('${posterPath}')`
|
|
}
|
|
|
|
function cssBackgroundImageDarkGradient () {
|
|
return 'radial-gradient(circle at center, ' +
|
|
'rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%)'
|
|
}
|
|
|
|
function formatTime (time, total) {
|
|
if (typeof time !== 'number' || Number.isNaN(time)) {
|
|
return '0:00'
|
|
}
|
|
|
|
const totalHours = Math.floor(total / 3600)
|
|
const totalMinutes = Math.floor(total / 60)
|
|
const hours = Math.floor(time / 3600)
|
|
let minutes = Math.floor(time % 3600 / 60)
|
|
if (totalMinutes > 9 && minutes < 10) {
|
|
minutes = '0' + minutes
|
|
}
|
|
const seconds = `0${Math.floor(time % 60)}`.slice(-2)
|
|
|
|
return (totalHours > 0 ? hours + ':' : '') + minutes + ':' + seconds
|
|
}
|