Switch from virtualdom to React
This commit is contained in:
DC
95
src/renderer/views/app.js
Normal file
95
src/renderer/views/app.js
Normal file
@@ -0,0 +1,95 @@
|
||||
const React = require('react')
|
||||
|
||||
const Header = require('./header')
|
||||
|
||||
const Views = {
|
||||
'home': require('./torrent-list'),
|
||||
'player': require('./player'),
|
||||
'create-torrent': require('./create-torrent'),
|
||||
'preferences': require('./preferences')
|
||||
}
|
||||
|
||||
const Modals = {
|
||||
'open-torrent-address-modal': require('./open-torrent-address-modal'),
|
||||
'remove-torrent-modal': require('./remove-torrent-modal'),
|
||||
'update-available-modal': require('./update-available-modal'),
|
||||
'unsupported-media-modal': require('./unsupported-media-modal')
|
||||
}
|
||||
|
||||
module.exports = class App extends React.Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = props.state
|
||||
}
|
||||
|
||||
render () {
|
||||
console.time('render app')
|
||||
var state = this.state
|
||||
|
||||
// Hide player controls while playing video, if the mouse stays still for a while
|
||||
// Never hide the controls when:
|
||||
// * The mouse is over the controls or we're scrubbing (see CSS)
|
||||
// * The video is paused
|
||||
// * The video is playing remotely on Chromecast or Airplay
|
||||
var hideControls = state.location.url() === 'player' &&
|
||||
state.playing.mouseStationarySince !== 0 &&
|
||||
new Date().getTime() - state.playing.mouseStationarySince > 2000 &&
|
||||
!state.playing.isPaused &&
|
||||
state.playing.location === 'local' &&
|
||||
state.playing.playbackRate === 1
|
||||
|
||||
var cls = [
|
||||
'view-' + state.location.url(), /* e.g. view-home, view-player */
|
||||
'is-' + process.platform /* e.g. is-darwin, is-win32, is-linux */
|
||||
]
|
||||
if (state.window.isFullScreen) cls.push('is-fullscreen')
|
||||
if (state.window.isFocused) cls.push('is-focused')
|
||||
if (hideControls) cls.push('hide-video-controls')
|
||||
|
||||
var vdom = (
|
||||
<div className={'app ' + cls.join(' ')}>
|
||||
{Header(state)}
|
||||
{getErrorPopover(state)}
|
||||
<div className='content'>{getView(state)}</div>
|
||||
{getModal(state)}
|
||||
</div>
|
||||
)
|
||||
console.timeEnd('render app')
|
||||
return vdom
|
||||
}
|
||||
}
|
||||
|
||||
function getErrorPopover (state) {
|
||||
var now = new Date().getTime()
|
||||
var recentErrors = state.errors.filter((x) => now - x.time < 5000)
|
||||
var hasErrors = recentErrors.length > 0
|
||||
|
||||
var errorElems = recentErrors.map(function (error) {
|
||||
return (<div className='error'>{error.message}</div>)
|
||||
})
|
||||
return (
|
||||
<div className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
|
||||
<div className='title'>Error</div>
|
||||
{errorElems}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getModal (state) {
|
||||
if (!state.modal) return
|
||||
var contents = Modals[state.modal.id](state)
|
||||
return (
|
||||
<div className='modal'>
|
||||
<div className='modal-background'></div>
|
||||
<div className='modal-content'>
|
||||
{contents}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getView (state) {
|
||||
var url = state.location.url()
|
||||
return Views[url](state)
|
||||
}
|
||||
149
src/renderer/views/create-torrent.js
Normal file
149
src/renderer/views/create-torrent.js
Normal file
@@ -0,0 +1,149 @@
|
||||
module.exports = CreateTorrentPage
|
||||
|
||||
const React = require('react')
|
||||
const createTorrent = require('create-torrent')
|
||||
const path = require('path')
|
||||
const prettyBytes = require('prettier-bytes')
|
||||
|
||||
const {dispatch, dispatcher} = require('../lib/dispatcher')
|
||||
|
||||
function CreateTorrentPage (state) {
|
||||
var info = state.location.current()
|
||||
|
||||
// Preprocess: exclude .DS_Store and other dotfiles
|
||||
var files = info.files
|
||||
.filter((f) => !f.name.startsWith('.'))
|
||||
.map((f) => ({name: f.name, path: f.path, size: f.size}))
|
||||
if (files.length === 0) return CreateTorrentErrorPage()
|
||||
|
||||
// First, extract the base folder that the files are all in
|
||||
var pathPrefix = info.folderPath
|
||||
if (!pathPrefix) {
|
||||
pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix)
|
||||
if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
|
||||
pathPrefix = path.dirname(pathPrefix)
|
||||
}
|
||||
}
|
||||
|
||||
// Sanity check: show the number of files and total size
|
||||
var numFiles = files.length
|
||||
var totalBytes = files
|
||||
.map((f) => f.size)
|
||||
.reduce((a, b) => a + b, 0)
|
||||
var torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}`
|
||||
|
||||
// Then, use the name of the base folder (or sole file, for a single file torrent)
|
||||
// as the default name. Show all files relative to the base folder.
|
||||
var defaultName, basePath
|
||||
if (files.length === 1) {
|
||||
// Single file torrent: /a/b/foo.jpg -> torrent name 'foo.jpg', path '/a/b'
|
||||
defaultName = files[0].name
|
||||
basePath = pathPrefix
|
||||
} else {
|
||||
// Multi file torrent: /a/b/{foo, bar}.jpg -> torrent name 'b', path '/a'
|
||||
defaultName = path.basename(pathPrefix)
|
||||
basePath = path.dirname(pathPrefix)
|
||||
}
|
||||
var maxFileElems = 100
|
||||
var fileElems = files.slice(0, maxFileElems).map(function (file) {
|
||||
var relativePath = files.length === 0 ? file.name : path.relative(pathPrefix, file.path)
|
||||
return (<div>{relativePath}</div>)
|
||||
})
|
||||
if (files.length > maxFileElems) {
|
||||
fileElems.push(<div>+ {maxFileElems - files.length} more</div>)
|
||||
}
|
||||
var trackers = createTorrent.announceList.join('\n')
|
||||
var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed'
|
||||
|
||||
return (
|
||||
<div className='create-torrent'>
|
||||
<h2>Create torrent {defaultName}</h2>
|
||||
<p className='torrent-info'>
|
||||
{torrentInfo}
|
||||
</p>
|
||||
<p className='torrent-attribute'>
|
||||
<label>Path:</label>
|
||||
<div className='torrent-attribute'>{pathPrefix}</div>
|
||||
</p>
|
||||
<div className={'expand-collapse ' + collapsedClass}
|
||||
onClick={dispatcher('toggleCreateTorrentAdvanced')}>
|
||||
{info.showAdvanced ? 'Basic' : 'Advanced'}
|
||||
</div>
|
||||
<div className={'create-torrent-advanced ' + collapsedClass}>
|
||||
<p className='torrent-attribute'>
|
||||
<label>Comment:</label>
|
||||
<textarea className='torrent-attribute torrent-comment'></textarea>
|
||||
</p>
|
||||
<p className='torrent-attribute'>
|
||||
<label>Trackers:</label>
|
||||
<textarea className='torrent-attribute torrent-trackers'>{trackers}</textarea>
|
||||
</p>
|
||||
<p className='torrent-attribute'>
|
||||
<label>Private:</label>
|
||||
<input type='checkbox' className='torrent-is-private' value='torrent-is-private' />
|
||||
</p>
|
||||
<p className='torrent-attribute'>
|
||||
<label>Files:</label>
|
||||
<div>{fileElems}</div>
|
||||
</p>
|
||||
</div>
|
||||
<p className='float-right'>
|
||||
<button className='button-flat light' onClick={dispatcher('back')}>Cancel</button>
|
||||
<button className='button-raised' onClick={handleOK}>Create Torrent</button>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
function handleOK () {
|
||||
var announceList = document.querySelector('.torrent-trackers').value
|
||||
.split('\n')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s !== '')
|
||||
var isPrivate = document.querySelector('.torrent-is-private').checked
|
||||
var comment = document.querySelector('.torrent-comment').value.trim()
|
||||
var options = {
|
||||
// We can't let the user choose their own name if we want WebTorrent
|
||||
// to use the files in place rather than creating a new folder.
|
||||
// If we ever want to add support for that:
|
||||
// name: document.querySelector('.torrent-name').value
|
||||
name: defaultName,
|
||||
path: basePath,
|
||||
files: files,
|
||||
announce: announceList,
|
||||
private: isPrivate,
|
||||
comment: comment
|
||||
}
|
||||
dispatch('createTorrent', options)
|
||||
}
|
||||
}
|
||||
|
||||
function CreateTorrentErrorPage () {
|
||||
return (
|
||||
<div className='create-torrent'>
|
||||
<h2>Create torrent</h2>
|
||||
<p className='torrent-info'>
|
||||
<p>
|
||||
Sorry, you must select at least one file that is not a hidden file.
|
||||
</p>
|
||||
<p>
|
||||
Hidden files, starting with a . character, are not included.
|
||||
</p>
|
||||
</p>
|
||||
<p className='float-right'>
|
||||
<button className='button-flat light' onClick={dispatcher('back')}>
|
||||
Cancel
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Finds the longest common prefix
|
||||
function findCommonPrefix (a, b) {
|
||||
for (var i = 0; i < a.length && i < b.length; i++) {
|
||||
if (a.charCodeAt(i) !== b.charCodeAt(i)) break
|
||||
}
|
||||
if (i === a.length) return a
|
||||
if (i === b.length) return b
|
||||
return a.substring(0, i)
|
||||
}
|
||||
47
src/renderer/views/header.js
Normal file
47
src/renderer/views/header.js
Normal file
@@ -0,0 +1,47 @@
|
||||
module.exports = Header
|
||||
|
||||
const React = require('react')
|
||||
|
||||
const {dispatcher} = require('../lib/dispatcher')
|
||||
|
||||
function Header (state) {
|
||||
return (
|
||||
<div className='header'>
|
||||
{getTitle()}
|
||||
<div className='nav left float-left'>
|
||||
<i
|
||||
className={'icon back ' + (state.location.hasBack() ? '' : 'disabled')}
|
||||
title='Back'
|
||||
onClick={dispatcher('back')}>
|
||||
chevron_left
|
||||
</i>
|
||||
<i
|
||||
className={'icon forward ' + (state.location.hasForward() ? '' : 'disabled')}
|
||||
title='Forward'
|
||||
onClick={dispatcher('forward')}>
|
||||
chevron_right
|
||||
</i>
|
||||
</div>
|
||||
<div className='nav right float-right'>
|
||||
{getAddButton()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
function getTitle () {
|
||||
if (process.platform !== 'darwin') return null
|
||||
return (<div className='title ellipsis'>{state.window.title}</div>)
|
||||
}
|
||||
|
||||
function getAddButton () {
|
||||
if (state.location.url() !== 'home') return null
|
||||
return (
|
||||
<i
|
||||
className='icon add'
|
||||
title='Add torrent'
|
||||
onClick={dispatcher('openFiles')}>
|
||||
add
|
||||
</i>
|
||||
)
|
||||
}
|
||||
}
|
||||
30
src/renderer/views/open-torrent-address-modal.js
Normal file
30
src/renderer/views/open-torrent-address-modal.js
Normal file
@@ -0,0 +1,30 @@
|
||||
module.exports = OpenTorrentAddressModal
|
||||
|
||||
const React = require('react')
|
||||
|
||||
const {dispatch, dispatcher} = require('../lib/dispatcher')
|
||||
|
||||
function OpenTorrentAddressModal (state) {
|
||||
return (
|
||||
<div className='open-torrent-address-modal'>
|
||||
<p><label>Enter torrent address or magnet link</label></p>
|
||||
<p>
|
||||
<input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} />
|
||||
</p>
|
||||
<p className='float-right'>
|
||||
<button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
|
||||
<button className='button button-raised' onClick={handleOK}>OK</button>
|
||||
</p>
|
||||
<script>document.querySelector('#add-torrent-url').focus()</script>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function handleKeyPress (e) {
|
||||
if (e.which === 13) handleOK() /* hit Enter to submit */
|
||||
}
|
||||
|
||||
function handleOK () {
|
||||
dispatch('exitModal')
|
||||
dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
|
||||
}
|
||||
633
src/renderer/views/player.js
Normal file
633
src/renderer/views/player.js
Normal file
@@ -0,0 +1,633 @@
|
||||
module.exports = Player
|
||||
|
||||
const React = require('react')
|
||||
const Bitfield = require('bitfield')
|
||||
const prettyBytes = require('prettier-bytes')
|
||||
const zeroFill = require('zero-fill')
|
||||
|
||||
const TorrentSummary = require('../lib/torrent-summary')
|
||||
const {dispatch, dispatcher} = require('../lib/dispatcher')
|
||||
|
||||
// Shows a streaming video player. Standard features + Chromecast + Airplay
|
||||
function Player (state) {
|
||||
// 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
|
||||
var showVideo = state.playing.location === 'local'
|
||||
return (
|
||||
<div
|
||||
className='player'
|
||||
onWheel={handleVolumeWheel}
|
||||
onMouseMove={dispatcher('mediaMouseMoved')}>
|
||||
{showVideo ? renderMedia(state) : renderCastScreen(state)}
|
||||
{renderPlayerControls(state)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 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
|
||||
var mediaElement = document.querySelector(state.playing.type)
|
||||
if (mediaElement !== null) {
|
||||
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
|
||||
var tracks = mediaElement.textTracks || []
|
||||
for (var j = 0; j < tracks.length; j++) {
|
||||
var isSelectedTrack = j === state.playing.subtitles.selectedIndex
|
||||
tracks[j].mode = isSelectedTrack ? 'showing' : 'hidden'
|
||||
}
|
||||
|
||||
// Save video position
|
||||
var 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) {
|
||||
var index = state.playing.subtitles.selectedIndex
|
||||
file.selectedSubtitle = state.playing.subtitles.tracks[index].filePath
|
||||
} else if (file.selectedSubtitle != null) {
|
||||
delete file.selectedSubtitle
|
||||
}
|
||||
|
||||
state.playing.volume = mediaElement.volume
|
||||
}
|
||||
|
||||
// Add subtitles to the <video> tag
|
||||
var trackTags = []
|
||||
if (state.playing.subtitles.selectedIndex >= 0) {
|
||||
for (var i = 0; i < state.playing.subtitles.tracks.length; i++) {
|
||||
var track = state.playing.subtitles.tracks[i]
|
||||
var isSelected = state.playing.subtitles.selectedIndex === i
|
||||
trackTags.push(
|
||||
<track
|
||||
default={isSelected ? 'default' : ''}
|
||||
label={track.label}
|
||||
type='subtitles'
|
||||
src={track.buffer} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Create the <audio> or <video> tag
|
||||
var MediaTagName = state.playing.type
|
||||
var mediaTag = (
|
||||
<MediaTagName
|
||||
src={state.server.localURL}
|
||||
onDoubleClick={dispatcher('toggleFullScreen')}
|
||||
onLoadedMetadata={onLoadedMetadata}
|
||||
onEnded={onEnded}
|
||||
onStalling={dispatcher('mediaStalled')}
|
||||
onError={dispatcher('mediaError')}
|
||||
onTimeUpdate={dispatcher('mediaTimeUpdate')}
|
||||
onEncrypted={dispatcher('mediaEncrypted')}
|
||||
onCanPlay={onCanPlay}>
|
||||
{trackTags}
|
||||
</MediaTagName>
|
||||
)
|
||||
|
||||
// Show the media.
|
||||
return (
|
||||
<div
|
||||
className='letterbox'
|
||||
onMouseMove={dispatcher('mediaMouseMoved')}>
|
||||
{mediaTag}
|
||||
{renderOverlay(state)}
|
||||
</div>
|
||||
)
|
||||
|
||||
// As soon as we know the video dimensions, resize the window
|
||||
function onLoadedMetadata (e) {
|
||||
if (state.playing.type !== 'video') return
|
||||
var video = e.target
|
||||
var dimensions = {
|
||||
width: video.videoWidth,
|
||||
height: video.videoHeight
|
||||
}
|
||||
dispatch('setDimensions', dimensions)
|
||||
}
|
||||
|
||||
// When the video completes, pause the video instead of looping
|
||||
function onEnded (e) {
|
||||
state.playing.isPaused = true
|
||||
}
|
||||
|
||||
function onCanPlay (e) {
|
||||
var elem = e.target
|
||||
if (state.playing.type === 'video' &&
|
||||
elem.webkitVideoDecodedByteCount === 0) {
|
||||
dispatch('mediaError', 'Video codec unsupported')
|
||||
} else if (elem.webkitAudioDecodedByteCount === 0) {
|
||||
dispatch('mediaError', 'Audio codec unsupported')
|
||||
} else {
|
||||
dispatch('mediaSuccess')
|
||||
elem.play()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderOverlay (state) {
|
||||
var elems = []
|
||||
var audioMetadataElem = renderAudioMetadata(state)
|
||||
var 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.
|
||||
var 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 className='media-overlay-background' style={style}>
|
||||
<div className='media-overlay'>{elems}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderAudioMetadata (state) {
|
||||
var fileSummary = state.getPlayingFileSummary()
|
||||
if (!fileSummary.audioInfo) return
|
||||
var info = fileSummary.audioInfo
|
||||
|
||||
// Get audio track info
|
||||
var title = info.title
|
||||
if (!title) {
|
||||
title = fileSummary.name
|
||||
}
|
||||
var artist = info.artist && info.artist[0]
|
||||
var album = info.album
|
||||
if (album && info.year && !album.includes(info.year)) {
|
||||
album += ' (' + info.year + ')'
|
||||
}
|
||||
var track
|
||||
if (info.track && info.track.no && info.track.of) {
|
||||
track = info.track.no + ' of ' + info.track.of
|
||||
}
|
||||
|
||||
// Show a small info box in the middle of the screen with title/album/etc
|
||||
var elems = []
|
||||
if (artist) {
|
||||
elems.push((
|
||||
<div className='audio-artist'>
|
||||
<label>Artist</label>{artist}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
if (album) {
|
||||
elems.push((
|
||||
<div className='audio-album'>
|
||||
<label>Album</label>{album}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
if (track) {
|
||||
elems.push((
|
||||
<div className='audio-track'>
|
||||
<label>Track</label>{track}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
// Align the title with the other info, if available. Otherwise, center title
|
||||
var emptyLabel = (<label></label>)
|
||||
elems.unshift((
|
||||
<div className='audio-title'>
|
||||
{elems.length ? emptyLabel : undefined}{title}
|
||||
</div>
|
||||
))
|
||||
|
||||
return (<div className='audio-metadata'>{elems}</div>)
|
||||
}
|
||||
|
||||
function renderLoadingSpinner (state) {
|
||||
if (state.playing.isPaused) return
|
||||
var isProbablyStalled = state.playing.isStalled ||
|
||||
(new Date().getTime() - state.playing.lastTimeUpdate > 2000)
|
||||
if (!isProbablyStalled) return
|
||||
|
||||
var prog = state.getPlayingTorrentSummary().progress || {}
|
||||
var fileProgress = 0
|
||||
if (prog.files) {
|
||||
var file = prog.files[state.playing.fileIndex]
|
||||
fileProgress = Math.floor(100 * file.numPiecesPresent / file.numPieces)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='media-stalled'>
|
||||
<div className='loading-spinner'> </div>
|
||||
<div className='loading-status ellipsis'>
|
||||
<span className='progress'>{fileProgress}%</span> downloaded,
|
||||
<span>↓ {prettyBytes(prog.downloadSpeed || 0)}/s</span>
|
||||
<span>↑ {prettyBytes(prog.uploadSpeed || 0)}/s</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderCastScreen (state) {
|
||||
var 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 === 'vlc') {
|
||||
castIcon = 'tv'
|
||||
castType = 'VLC'
|
||||
isCast = false
|
||||
} else if (state.playing.location === 'error') {
|
||||
castIcon = 'error_outline'
|
||||
castType = 'Error'
|
||||
isCast = false
|
||||
}
|
||||
|
||||
var isStarting = state.playing.location.endsWith('-pending')
|
||||
var castName = state.playing.castName
|
||||
var castStatus
|
||||
if (isCast && isStarting) castStatus = 'Connecting to ' + castName + '...'
|
||||
else if (isCast && !isStarting) castStatus = 'Connected to ' + castName
|
||||
else castStatus = ''
|
||||
|
||||
// Show a nice title image, if possible
|
||||
var style = {
|
||||
backgroundImage: cssBackgroundImagePoster(state)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='letterbox' style={style}>
|
||||
<div className='cast-screen'>
|
||||
<i className='icon'>{castIcon}</i>
|
||||
<div className='cast-type'>{castType}</div>
|
||||
<div className='cast-status'>{castStatus}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderCastOptions (state) {
|
||||
if (!state.devices.castMenu) return
|
||||
|
||||
var {location, devices} = state.devices.castMenu
|
||||
var player = state.devices[location]
|
||||
|
||||
var items = devices.map(function (device, ix) {
|
||||
var isSelected = player.device === device
|
||||
var name = device.name
|
||||
return (
|
||||
<li onClick={dispatcher('selectCastDevice', ix)}>
|
||||
<i className='icon'>{isSelected ? 'radio_button_checked' : 'radio_button_unchecked'}</i>
|
||||
{name}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<ul className='options-list'>
|
||||
{items}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
function renderSubtitlesOptions (state) {
|
||||
var subtitles = state.playing.subtitles
|
||||
if (!subtitles.tracks.length || !subtitles.showMenu) return
|
||||
|
||||
var items = subtitles.tracks.map(function (track, ix) {
|
||||
var isSelected = state.playing.subtitles.selectedIndex === ix
|
||||
return (
|
||||
<li onClick={dispatcher('selectSubtitle', ix)}>
|
||||
<i className='icon'>{'radio_button_' + (isSelected ? 'checked' : 'unchecked')}</i>
|
||||
{track.label}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
||||
var noneSelected = state.playing.subtitles.selectedIndex === -1
|
||||
var noneClass = 'radio_button_' + (noneSelected ? 'checked' : 'unchecked')
|
||||
return (
|
||||
<ul className='options-list'>
|
||||
{items}
|
||||
<li onClick={dispatcher('selectSubtitle', -1)}>
|
||||
<i className='icon'>{noneClass}</i>
|
||||
None
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
function renderPlayerControls (state) {
|
||||
var positionPercent = 100 * state.playing.currentTime / state.playing.duration
|
||||
var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 3px)' }
|
||||
var captionsClass = state.playing.subtitles.tracks.length === 0
|
||||
? 'disabled'
|
||||
: state.playing.subtitles.selectedIndex >= 0
|
||||
? 'active'
|
||||
: ''
|
||||
|
||||
var elements = [
|
||||
<div className='playback-bar'>
|
||||
{renderLoadingBar(state)}
|
||||
<div
|
||||
className='playback-cursor'
|
||||
style={playbackCursorStyle}>
|
||||
</div>
|
||||
<div
|
||||
className='scrub-bar'
|
||||
draggable='true'
|
||||
onDragStart={handleDragStart}
|
||||
onClick={handleScrub}
|
||||
onDrag={handleScrub}>
|
||||
</div>
|
||||
</div>,
|
||||
|
||||
<i className='icon play-pause float-left' onClick={dispatcher('playPause')}>
|
||||
{state.playing.isPaused ? 'play_arrow' : 'pause'}
|
||||
</i>,
|
||||
|
||||
<i
|
||||
className='icon fullscreen float-right'
|
||||
onClick={dispatcher('toggleFullScreen')}>
|
||||
{state.window.isFullScreen ? 'fullscreen_exit' : 'fullscreen'}
|
||||
</i>
|
||||
]
|
||||
|
||||
if (state.playing.type === 'video') {
|
||||
// show closed captions icon
|
||||
elements.push((
|
||||
<i
|
||||
className={'icon closed-caption float-right ' + captionsClass}
|
||||
onClick={handleSubtitles}>
|
||||
closed_caption
|
||||
</i>
|
||||
))
|
||||
}
|
||||
|
||||
// If we've detected a Chromecast or AppleTV, the user can play video there
|
||||
var castTypes = ['chromecast', 'airplay', 'dlna']
|
||||
var isCastingAnywhere = castTypes.some(
|
||||
(castType) => state.playing.location.startsWith(castType))
|
||||
|
||||
// Add the cast buttons. Icons for each cast type, connected/disconnected:
|
||||
var buttonIcons = {
|
||||
'chromecast': {true: 'cast_connected', false: 'cast'},
|
||||
'airplay': {true: 'airplay', false: 'airplay'},
|
||||
'dlna': {true: 'tv', false: 'tv'}
|
||||
}
|
||||
castTypes.forEach(function (castType) {
|
||||
// Do we show this button (eg. the Chromecast button) at all?
|
||||
var isCasting = state.playing.location.startsWith(castType)
|
||||
var player = state.devices[castType]
|
||||
if ((!player || player.getDevices().length === 0) && !isCasting) return
|
||||
|
||||
// Show the button. Three options for eg the Chromecast button:
|
||||
var 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)
|
||||
}
|
||||
var buttonIcon = buttonIcons[castType][isCasting]
|
||||
|
||||
elements.push((
|
||||
<i
|
||||
className={'icon device float-right ' + buttonClass}
|
||||
onClick={buttonHandler}>
|
||||
{buttonIcon}
|
||||
</i>
|
||||
))
|
||||
})
|
||||
|
||||
// Render volume slider
|
||||
var volume = state.playing.volume
|
||||
var volumeIcon = 'volume_' + (
|
||||
volume === 0 ? 'off'
|
||||
: volume < 0.3 ? 'mute'
|
||||
: volume < 0.6 ? 'down'
|
||||
: 'up')
|
||||
var volumeStyle = {
|
||||
background: '-webkit-gradient(linear, left top, right top, ' +
|
||||
'color-stop(' + (volume * 100) + '%, #eee), ' +
|
||||
'color-stop(' + (volume * 100) + '%, #727272))'
|
||||
}
|
||||
|
||||
elements.push((
|
||||
<div className='volume float-left'>
|
||||
<i
|
||||
className='icon volume-icon float-left'
|
||||
onMouseDown={handleVolumeMute}>
|
||||
{volumeIcon}
|
||||
</i>
|
||||
<input
|
||||
className='volume-slider float-right'
|
||||
type='range' min='0' max='1' step='0.05'
|
||||
value={volumeChanging !== false ? volumeChanging : volume}
|
||||
onMouseDown={handleVolumeScrub}
|
||||
onMouseUp={handleVolumeScrub}
|
||||
onMouseMove={handleVolumeScrub}
|
||||
style={volumeStyle}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
|
||||
// Show video playback progress
|
||||
var currentTimeStr = formatTime(state.playing.currentTime)
|
||||
var durationStr = formatTime(state.playing.duration)
|
||||
elements.push((
|
||||
<span className='time float-left'>
|
||||
{currentTimeStr} / {durationStr}
|
||||
</span>
|
||||
))
|
||||
|
||||
// render playback rate
|
||||
if (state.playing.playbackRate !== 1) {
|
||||
elements.push((
|
||||
<span className='rate float-left'>
|
||||
{state.playing.playbackRate}x
|
||||
</span>
|
||||
))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='controls'>
|
||||
{elements}
|
||||
{renderCastOptions(state)}
|
||||
{renderSubtitlesOptions(state)}
|
||||
</div>
|
||||
)
|
||||
|
||||
function handleDragStart (e) {
|
||||
// Prevent the cursor from changing, eg to a green + icon on Mac
|
||||
if (e.dataTransfer) {
|
||||
var dt = e.dataTransfer
|
||||
dt.effectAllowed = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
// Handles a click or drag to scrub (jump to another position in the video)
|
||||
function handleScrub (e) {
|
||||
if (!e.clientX) return
|
||||
dispatch('mediaMouseMoved')
|
||||
var windowWidth = document.querySelector('body').clientWidth
|
||||
var fraction = e.clientX / windowWidth
|
||||
var position = fraction * state.playing.duration /* seconds */
|
||||
dispatch('skipTo', position)
|
||||
}
|
||||
|
||||
// Handles volume muting and Unmuting
|
||||
function handleVolumeMute (e) {
|
||||
if (state.playing.volume === 0.0) {
|
||||
dispatch('setVolume', 1.0)
|
||||
} else {
|
||||
dispatch('setVolume', 0.0)
|
||||
}
|
||||
}
|
||||
|
||||
// Handles volume slider scrub
|
||||
function handleVolumeScrub (e) {
|
||||
switch (e.type) {
|
||||
case 'mouseup':
|
||||
volumeChanging = false
|
||||
dispatch('setVolume', e.nativeEvent.offsetX / 50)
|
||||
break
|
||||
case 'mousedown':
|
||||
volumeChanging = this.value
|
||||
break
|
||||
case 'mousemove':
|
||||
// only change if move was started by click
|
||||
if (volumeChanging !== false) {
|
||||
volumeChanging = this.value
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function handleSubtitles (e) {
|
||||
if (!state.playing.subtitles.tracks.length || e.ctrlKey || e.metaKey) {
|
||||
// if no subtitles available select it
|
||||
dispatch('openSubtitles')
|
||||
} else {
|
||||
dispatch('toggleSubtitlesMenu')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// lets scrub without sending to volume backend
|
||||
var volumeChanging = false
|
||||
|
||||
// Renders the loading bar. Shows which parts of the torrent are loaded, which
|
||||
// can be 'spongey' / non-contiguous
|
||||
function renderLoadingBar (state) {
|
||||
var torrentSummary = state.getPlayingTorrentSummary()
|
||||
if (!torrentSummary.progress) {
|
||||
return []
|
||||
}
|
||||
|
||||
// Find all contiguous parts of the torrent which are loaded
|
||||
var prog = torrentSummary.progress
|
||||
var fileProg = prog.files[state.playing.fileIndex]
|
||||
var parts = []
|
||||
var lastPiecePresent = false
|
||||
for (var i = fileProg.startPiece; i <= fileProg.endPiece; i++) {
|
||||
var 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
|
||||
var loadingBarElems = parts.map(function (part) {
|
||||
var style = {
|
||||
left: (100 * part.start / fileProg.numPieces) + '%',
|
||||
width: (100 * part.count / fileProg.numPieces) + '%'
|
||||
}
|
||||
|
||||
return (<div className='loading-bar-part' style={style}></div>)
|
||||
})
|
||||
return (<div className='loading-bar'>{loadingBarElems}</div>)
|
||||
}
|
||||
|
||||
// Returns the CSS background-image string for a poster image + dark vignette
|
||||
function cssBackgroundImagePoster (state) {
|
||||
var torrentSummary = state.getPlayingTorrentSummary()
|
||||
var 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) {
|
||||
if (typeof time !== 'number' || Number.isNaN(time)) {
|
||||
return '0:00'
|
||||
}
|
||||
|
||||
var hours = Math.floor(time / 3600)
|
||||
var minutes = Math.floor(time % 3600 / 60)
|
||||
if (hours > 0) {
|
||||
minutes = zeroFill(2, minutes)
|
||||
}
|
||||
var seconds = zeroFill(2, Math.floor(time % 60))
|
||||
|
||||
return (hours > 0 ? hours + ':' : '') + minutes + ':' + seconds
|
||||
}
|
||||
102
src/renderer/views/preferences.js
Normal file
102
src/renderer/views/preferences.js
Normal file
@@ -0,0 +1,102 @@
|
||||
module.exports = Preferences
|
||||
|
||||
const React = require('react')
|
||||
const remote = require('electron').remote
|
||||
const dialog = remote.dialog
|
||||
|
||||
const {dispatch} = require('../lib/dispatcher')
|
||||
|
||||
function Preferences (state) {
|
||||
return (
|
||||
<div className='preferences'>
|
||||
{renderGeneralSection(state)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderGeneralSection (state) {
|
||||
return renderSection({
|
||||
title: 'General',
|
||||
description: '',
|
||||
icon: 'settings'
|
||||
}, [
|
||||
renderDownloadDirSelector(state)
|
||||
])
|
||||
}
|
||||
|
||||
function renderDownloadDirSelector (state) {
|
||||
return renderFileSelector({
|
||||
label: 'Download Path',
|
||||
description: 'Data from torrents will be saved here',
|
||||
property: 'downloadPath',
|
||||
options: {
|
||||
title: 'Select download directory',
|
||||
properties: [ 'openDirectory' ]
|
||||
}
|
||||
},
|
||||
state.unsaved.prefs.downloadPath,
|
||||
function (filePath) {
|
||||
setStateValue('downloadPath', filePath)
|
||||
})
|
||||
}
|
||||
|
||||
// Renders a prefs section.
|
||||
// - definition should be {icon, title, description}
|
||||
// - controls should be an array of vdom elements
|
||||
function renderSection (definition, controls) {
|
||||
var helpElem = !definition.description ? null : (
|
||||
<div className='help text'>
|
||||
<i className='icon'>help_outline</i>{definition.description}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<section className='section preferences-panel'>
|
||||
<div className='section-container'>
|
||||
<div className='section-heading'>
|
||||
<i className='icon'>{definition.icon}</i>{definition.title}
|
||||
</div>
|
||||
{helpElem}
|
||||
<div className='section-body'>
|
||||
{controls}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// Creates a file chooser
|
||||
// - defition should be {label, description, options}
|
||||
// options are passed to dialog.showOpenDialog
|
||||
// - value should be the current pref, a file or folder path
|
||||
// - callback takes a new file or folder path
|
||||
function renderFileSelector (definition, value, callback) {
|
||||
return (
|
||||
<div className='control-group'>
|
||||
<div className='controls'>
|
||||
<label className='control-label'>
|
||||
<div className='preference-title'>{definition.label}</div>
|
||||
<div className='preference-description'>{definition.description}</div>
|
||||
</label>
|
||||
<div className='controls'>
|
||||
<input type='text' className='file-picker-text'
|
||||
id={definition.property}
|
||||
disabled='disabled'
|
||||
value={value} />
|
||||
<button className='btn' onClick={handleClick}>
|
||||
<i className='icon'>folder_open</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
function handleClick () {
|
||||
dialog.showOpenDialog(remote.getCurrentWindow(), definition.options, function (filenames) {
|
||||
if (!Array.isArray(filenames)) return
|
||||
callback(filenames[0])
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function setStateValue (property, value) {
|
||||
dispatch('updatePreferences', property, value)
|
||||
}
|
||||
27
src/renderer/views/remove-torrent-modal.js
Normal file
27
src/renderer/views/remove-torrent-modal.js
Normal file
@@ -0,0 +1,27 @@
|
||||
module.exports = RemoveTorrentModal
|
||||
|
||||
const React = require('react')
|
||||
|
||||
const {dispatch, dispatcher} = require('../lib/dispatcher')
|
||||
|
||||
function RemoveTorrentModal (state) {
|
||||
var message = state.modal.deleteData
|
||||
? 'Are you sure you want to remove this torrent from the list and delete the data file?'
|
||||
: 'Are you sure you want to remove this torrent from the list?'
|
||||
var buttonText = state.modal.deleteData ? 'Remove Data' : 'Remove'
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p><strong>{message}</strong></p>
|
||||
<p className='float-right'>
|
||||
<button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
|
||||
<button className='button button-raised' onClick={handleRemove}>{buttonText}</button>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
function handleRemove () {
|
||||
dispatch('deleteTorrent', state.modal.infoHash, state.modal.deleteData)
|
||||
dispatch('exitModal')
|
||||
}
|
||||
}
|
||||
318
src/renderer/views/torrent-list.js
Normal file
318
src/renderer/views/torrent-list.js
Normal file
@@ -0,0 +1,318 @@
|
||||
module.exports = TorrentList
|
||||
|
||||
const React = require('react')
|
||||
const prettyBytes = require('prettier-bytes')
|
||||
|
||||
const TorrentSummary = require('../lib/torrent-summary')
|
||||
const TorrentPlayer = require('../lib/torrent-player')
|
||||
const {dispatcher} = require('../lib/dispatcher')
|
||||
|
||||
function TorrentList (state) {
|
||||
var torrentRows = state.saved.torrents.map(
|
||||
(torrentSummary) => renderTorrent(torrentSummary)
|
||||
)
|
||||
|
||||
return (
|
||||
<div className='torrent-list'>
|
||||
{torrentRows}
|
||||
<div className='torrent-placeholder'>
|
||||
<span className='ellipsis'>Drop a torrent file here or paste a magnet link</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
function renderTorrent (torrentSummary) {
|
||||
var infoHash = torrentSummary.infoHash
|
||||
var isSelected = infoHash && state.selectedInfoHash === infoHash
|
||||
|
||||
// Background image: show some nice visuals, like a frame from the movie, if possible
|
||||
var style = {}
|
||||
if (torrentSummary.posterFileName) {
|
||||
var gradient = isSelected
|
||||
? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
|
||||
: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
|
||||
var posterPath = TorrentSummary.getPosterPath(torrentSummary)
|
||||
style.backgroundImage = gradient + `, url('${posterPath}')`
|
||||
}
|
||||
|
||||
// Foreground: name of the torrent, basic info like size, play button,
|
||||
// cast buttons if available, and delete
|
||||
var classes = ['torrent']
|
||||
// playStatus turns the play button into a loading spinner or error icon
|
||||
if (torrentSummary.playStatus) classes.push(torrentSummary.playStatus)
|
||||
if (isSelected) classes.push('selected')
|
||||
if (!infoHash) classes.push('disabled')
|
||||
return (
|
||||
<div style={style} className={classes.join(' ')}
|
||||
onContextMenu={infoHash && dispatcher('openTorrentContextMenu', infoHash)}
|
||||
onClick={infoHash && dispatcher('toggleSelectTorrent', infoHash)}>
|
||||
{renderTorrentMetadata(torrentSummary)}
|
||||
{infoHash ? renderTorrentButtons(torrentSummary) : ''}
|
||||
{isSelected ? renderTorrentDetails(torrentSummary) : ''}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Show name, download status, % complete
|
||||
function renderTorrentMetadata (torrentSummary) {
|
||||
var name = torrentSummary.name || 'Loading torrent...'
|
||||
var elements = [(
|
||||
<div className='name ellipsis'>{name}</div>
|
||||
)]
|
||||
|
||||
// If it's downloading/seeding then show progress info
|
||||
var prog = torrentSummary.progress
|
||||
if (torrentSummary.status !== 'paused' && prog) {
|
||||
elements.push((
|
||||
<div className='ellipsis'>
|
||||
{renderPercentProgress()}
|
||||
{renderTotalProgress()}
|
||||
{renderPeers()}
|
||||
{renderDownloadSpeed()}
|
||||
{renderUploadSpeed()}
|
||||
{renderEta()}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
return (<div className='metadata'>{elements}</div>)
|
||||
|
||||
function renderPercentProgress () {
|
||||
var progress = Math.floor(100 * prog.progress)
|
||||
return (<span>{progress}%</span>)
|
||||
}
|
||||
|
||||
function renderTotalProgress () {
|
||||
var downloaded = prettyBytes(prog.downloaded)
|
||||
var total = prettyBytes(prog.length || 0)
|
||||
if (downloaded === total) {
|
||||
return (<span>{downloaded}</span>)
|
||||
} else {
|
||||
return (<span>{downloaded} / {total}</span>)
|
||||
}
|
||||
}
|
||||
|
||||
function renderPeers () {
|
||||
if (prog.numPeers === 0) return
|
||||
var count = prog.numPeers === 1 ? 'peer' : 'peers'
|
||||
return (<span>{prog.numPeers} {count}</span>)
|
||||
}
|
||||
|
||||
function renderDownloadSpeed () {
|
||||
if (prog.downloadSpeed === 0) return
|
||||
return (<span>↓ {prettyBytes(prog.downloadSpeed)}/s</span>)
|
||||
}
|
||||
|
||||
function renderUploadSpeed () {
|
||||
if (prog.uploadSpeed === 0) return
|
||||
return (<span>↑ {prettyBytes(prog.uploadSpeed)}/s</span>)
|
||||
}
|
||||
|
||||
function renderEta () {
|
||||
var downloaded = prog.downloaded
|
||||
var total = prog.length || 0
|
||||
var missing = total - downloaded
|
||||
var downloadSpeed = prog.downloadSpeed
|
||||
if (downloadSpeed === 0 || missing === 0) return
|
||||
|
||||
var rawEta = missing / downloadSpeed
|
||||
var hours = Math.floor(rawEta / 3600) % 24
|
||||
var minutes = Math.floor(rawEta / 60) % 60
|
||||
var seconds = Math.floor(rawEta % 60)
|
||||
|
||||
// Only display hours and minutes if they are greater than 0 but always
|
||||
// display minutes if hours is being displayed
|
||||
var hoursStr = hours ? hours + 'h' : ''
|
||||
var minutesStr = (hours || minutes) ? minutes + 'm' : ''
|
||||
var secondsStr = seconds + 's'
|
||||
|
||||
return (<span>ETA: {hoursStr} {minutesStr} {secondsStr}</span>)
|
||||
}
|
||||
}
|
||||
|
||||
// Download button toggles between torrenting (DL/seed) and paused
|
||||
// Play button starts streaming the torrent immediately, unpausing if needed
|
||||
function renderTorrentButtons (torrentSummary) {
|
||||
var infoHash = torrentSummary.infoHash
|
||||
|
||||
var playIcon, playTooltip, playClass
|
||||
if (torrentSummary.playStatus === 'timeout') {
|
||||
playIcon = 'warning'
|
||||
playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.'
|
||||
} else {
|
||||
playIcon = 'play_arrow'
|
||||
playTooltip = 'Start streaming'
|
||||
}
|
||||
|
||||
var downloadIcon, downloadTooltip
|
||||
if (torrentSummary.status === 'seeding') {
|
||||
downloadIcon = 'file_upload'
|
||||
downloadTooltip = 'Seeding. Click to stop.'
|
||||
} else if (torrentSummary.status === 'downloading') {
|
||||
downloadIcon = 'file_download'
|
||||
downloadTooltip = 'Torrenting. Click to stop.'
|
||||
} else {
|
||||
downloadIcon = 'file_download'
|
||||
downloadTooltip = 'Click to start torrenting.'
|
||||
}
|
||||
|
||||
// Do we have a saved position? Show it using a radial progress bar on top
|
||||
// of the play button, unless already showing a spinner there:
|
||||
var positionElem
|
||||
var willShowSpinner = torrentSummary.playStatus === 'requested'
|
||||
var defaultFile = torrentSummary.files &&
|
||||
torrentSummary.files[torrentSummary.defaultPlayFileIndex]
|
||||
if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
|
||||
var fraction = defaultFile.currentTime / defaultFile.duration
|
||||
positionElem = renderRadialProgressBar(fraction, 'radial-progress-large')
|
||||
playClass = 'resume-position'
|
||||
}
|
||||
|
||||
// Only show the play button for torrents that contain playable media
|
||||
var playButton
|
||||
if (TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
|
||||
playButton = (
|
||||
<i
|
||||
title={playTooltip}
|
||||
className={'button-round icon play ' + playClass}
|
||||
onClick={dispatcher('playFile', infoHash)}>
|
||||
{playIcon}
|
||||
</i>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='buttons'>
|
||||
{positionElem}
|
||||
{playButton}
|
||||
<i
|
||||
className={'button-round icon download ' + torrentSummary.status}
|
||||
title={downloadTooltip}
|
||||
onClick={dispatcher('toggleTorrent', infoHash)}>
|
||||
{downloadIcon}
|
||||
</i>
|
||||
<i
|
||||
className='icon delete'
|
||||
title='Remove torrent'
|
||||
onClick={dispatcher('confirmDeleteTorrent', infoHash, false)}>
|
||||
close
|
||||
</i>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Show files, per-file download status and play buttons, and so on
|
||||
function renderTorrentDetails (torrentSummary) {
|
||||
var filesElement
|
||||
if (!torrentSummary.files) {
|
||||
// We don't know what files this torrent contains
|
||||
var message = torrentSummary.status === 'paused'
|
||||
? 'Failed to load torrent info. Click the download button to try again...'
|
||||
: 'Downloading torrent info...'
|
||||
filesElement = (<div className='files warning'>{message}</div>)
|
||||
} else {
|
||||
// We do know the files. List them and show download stats for each one
|
||||
var fileRows = torrentSummary.files
|
||||
.map((file, index) => ({ file, index }))
|
||||
.sort(function (a, b) {
|
||||
if (a.file.name < b.file.name) return -1
|
||||
if (b.file.name < a.file.name) return 1
|
||||
return 0
|
||||
})
|
||||
.map((object) => renderFileRow(torrentSummary, object.file, object.index))
|
||||
|
||||
filesElement = (
|
||||
<div className='files'>
|
||||
<table>
|
||||
{fileRows}
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='torrent-details'>
|
||||
{filesElement}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Show a single torrentSummary file in the details view for a single torrent
|
||||
function renderFileRow (torrentSummary, file, index) {
|
||||
// First, find out how much of the file we've downloaded
|
||||
// Are we even torrenting it?
|
||||
var isSelected = torrentSummary.selections && torrentSummary.selections[index]
|
||||
var isDone = false // Are we finished torrenting it?
|
||||
var progress = ''
|
||||
if (torrentSummary.progress && torrentSummary.progress.files) {
|
||||
var fileProg = torrentSummary.progress.files[index]
|
||||
isDone = fileProg.numPiecesPresent === fileProg.numPieces
|
||||
progress = Math.round(100 * fileProg.numPiecesPresent / fileProg.numPieces) + '%'
|
||||
}
|
||||
|
||||
// Second, for media files where we saved our position, show how far we got
|
||||
var positionElem
|
||||
if (file.currentTime) {
|
||||
// Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru
|
||||
positionElem = renderRadialProgressBar(file.currentTime / file.duration)
|
||||
}
|
||||
|
||||
// Finally, render the file as a table row
|
||||
var isPlayable = TorrentPlayer.isPlayable(file)
|
||||
var infoHash = torrentSummary.infoHash
|
||||
var icon
|
||||
var handleClick
|
||||
if (isPlayable) {
|
||||
icon = 'play_arrow' /* playable? add option to play */
|
||||
handleClick = dispatcher('playFile', infoHash, index)
|
||||
} else {
|
||||
icon = 'description' /* file icon, opens in OS default app */
|
||||
handleClick = dispatcher('openItem', infoHash, index)
|
||||
}
|
||||
var rowClass = ''
|
||||
if (!isSelected) rowClass = 'disabled' // File deselected, not being torrented
|
||||
if (!isDone && !isPlayable) rowClass = 'disabled' // Can't open yet, can't stream
|
||||
return (
|
||||
<tr onClick={handleClick}>
|
||||
<td className={'col-icon ' + rowClass}>
|
||||
{positionElem}
|
||||
<i className='icon'>{icon}</i>
|
||||
</td>
|
||||
<td className={'col-name ' + rowClass}>
|
||||
{file.name}
|
||||
</td>
|
||||
<td className={'col-progress ' + rowClass}>
|
||||
{isSelected ? progress : ''}
|
||||
</td>
|
||||
<td className={'col-size ' + rowClass}>
|
||||
{prettyBytes(file.length)}
|
||||
</td>
|
||||
<td className='col-select'
|
||||
onClick={dispatcher('toggleTorrentFile', infoHash, index)}>
|
||||
<i className='icon'>{isSelected ? 'close' : 'add'}</i>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function renderRadialProgressBar (fraction, cssClass) {
|
||||
var rotation = 360 * fraction
|
||||
var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
|
||||
var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
|
||||
|
||||
return (
|
||||
<div className={'radial-progress ' + cssClass}>
|
||||
<div className='circle'>
|
||||
<div className='mask full' style={transformFill}>
|
||||
<div className='fill' style={transformFill}></div>
|
||||
</div>
|
||||
<div className='mask half'>
|
||||
<div className='fill' style={transformFill}></div>
|
||||
<div className='fill fix' style={transformFix}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='inset'></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
39
src/renderer/views/unsupported-media-modal.js
Normal file
39
src/renderer/views/unsupported-media-modal.js
Normal file
@@ -0,0 +1,39 @@
|
||||
module.exports = UnsupportedMediaModal
|
||||
|
||||
const React = require('react')
|
||||
const electron = require('electron')
|
||||
|
||||
const {dispatch, dispatcher} = require('../lib/dispatcher')
|
||||
|
||||
function UnsupportedMediaModal (state) {
|
||||
var err = state.modal.error
|
||||
var message = (err && err.getMessage)
|
||||
? err.getMessage()
|
||||
: err
|
||||
var actionButton = state.modal.vlcInstalled
|
||||
? (<button className='button-raised' onClick={onPlay}>Play in VLC</button>)
|
||||
: (<button className='button-raised' onClick={onInstall}>Install VLC</button>)
|
||||
var vlcMessage = state.modal.vlcNotFound
|
||||
? 'Couldn\'t run VLC. Please make sure it\'s installed.'
|
||||
: ''
|
||||
return (
|
||||
<div>
|
||||
<p><strong>Sorry, we can't play that file.</strong></p>
|
||||
<p>{message}</p>
|
||||
<p className='float-right'>
|
||||
<button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
|
||||
{actionButton}
|
||||
</p>
|
||||
<p className='error-text'>{vlcMessage}</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
function onInstall () {
|
||||
electron.shell.openExternal('http://www.videolan.org/vlc/')
|
||||
state.modal.vlcInstalled = true // Assume they'll install it successfully
|
||||
}
|
||||
|
||||
function onPlay () {
|
||||
dispatch('vlcPlay')
|
||||
}
|
||||
}
|
||||
29
src/renderer/views/update-available-modal.js
Normal file
29
src/renderer/views/update-available-modal.js
Normal file
@@ -0,0 +1,29 @@
|
||||
module.exports = UpdateAvailableModal
|
||||
|
||||
const React = require('react')
|
||||
const electron = require('electron')
|
||||
|
||||
const {dispatch} = require('../lib/dispatcher')
|
||||
|
||||
function UpdateAvailableModal (state) {
|
||||
return (
|
||||
<div className='update-available-modal'>
|
||||
<p><strong>A new version of WebTorrent is available: v{state.modal.version}</strong></p>
|
||||
<p>We have an auto-updater for Windows and Mac. We don't have one for Linux yet, so you'll have to download the new version manually.</p>
|
||||
<p className='float-right'>
|
||||
<button className='button button-flat' onClick={handleCancel}>Skip This Release</button>
|
||||
<button className='button button-raised' onClick={handleOK}>Show Download Page</button>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
function handleOK () {
|
||||
electron.shell.openExternal('https://github.com/feross/webtorrent-desktop/releases')
|
||||
dispatch('exitModal')
|
||||
}
|
||||
|
||||
function handleCancel () {
|
||||
dispatch('skipVersion', state.modal.version)
|
||||
dispatch('exitModal')
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user