kalugin66/webtorrent-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

React: convert functions to controls

Browse Source
This commit is contained in:
DC
2016-07-20 01:27:40 -07:00
parent 2a1e987d42
commit 946bba19a9
10 changed files with 299 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/renderer/views/app.js
View File

@@ -49,9 +49,9 @@ module.exports = class App extends React.Component {
var vdom = ( var vdom = (
<div className={'app ' + cls.join(' ')}> <div className={'app ' + cls.join(' ')}>
{Header(state)} <Header state={state} />
{getErrorPopover(state)} {getErrorPopover(state)}
<div className='content'>{getView(state)}</div> <div key='content' className='content'>{getView(state)}</div>
{getModal(state)} {getModal(state)}
</div> </div>
) )
@@ -65,12 +65,13 @@ function getErrorPopover (state) {
var recentErrors = state.errors.filter((x) => now - x.time < 5000) var recentErrors = state.errors.filter((x) => now - x.time < 5000)
var hasErrors = recentErrors.length > 0 var hasErrors = recentErrors.length > 0
var errorElems = recentErrors.map(function (error) { var errorElems = recentErrors.map(function (error, i) {
return (<div className='error'>{error.message}</div>) return (<div key={i} className='error'>{error.message}</div>)
}) })
return ( return (
<div className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}> <div key='errors'
<div className='title'>Error</div> className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
<div key='title' className='title'>Error</div>
{errorElems} {errorElems}
</div> </div>
) )
@@ -78,18 +79,18 @@ function getErrorPopover (state) {
function getModal (state) { function getModal (state) {
if (!state.modal) return if (!state.modal) return
var contents = Modals[state.modal.id](state) var ModalContents = Modals[state.modal.id]
return ( return (
<div className='modal'> <div key='modal' className='modal'>
<div className='modal-background'></div> <div key='modal-background' className='modal-background'></div>
<div className='modal-content'> <div key='modal-content' className='modal-content'>
{contents} <ModalContents state={state} />
</div> </div>
</div> </div>
) )
} }
function getView (state) { function getView (state) {
var url = state.location.url() var View = Views[state.location.url()]
return Views[url](state) return (<View state={state} />)
} }

216
src/renderer/views/create-torrent.js
View File

@@ -1,143 +1,125 @@
module.exports = CreateTorrentPage
const React = require('react') const React = require('react')
const createTorrent = require('create-torrent') const createTorrent = require('create-torrent')
const path = require('path') const path = require('path')
const prettyBytes = require('prettier-bytes') const prettyBytes = require('prettier-bytes')
const {dispatch, dispatcher} = require('../lib/dispatcher') const {dispatch, dispatcher} = require('../lib/dispatcher')
const CreateTorrentErrorPage = require('./create-torrent-error-page')
function CreateTorrentPage (state) { module.exports = class CreateTorrentPage extends React.Component {
var info = state.location.current() render () {
var state = this.props.state
var info = state.location.current()
// Preprocess: exclude .DS_Store and other dotfiles // Preprocess: exclude .DS_Store and other dotfiles
var files = info.files var files = info.files
.filter((f) => !f.name.startsWith('.')) .filter((f) => !f.name.startsWith('.'))
.map((f) => ({name: f.name, path: f.path, size: f.size})) .map((f) => ({name: f.name, path: f.path, size: f.size}))
if (files.length === 0) return CreateTorrentErrorPage() if (files.length === 0) return (<CreateTorrentErrorPage state={state} />)
// First, extract the base folder that the files are all in // First, extract the base folder that the files are all in
var pathPrefix = info.folderPath var pathPrefix = info.folderPath
if (!pathPrefix) { if (!pathPrefix) {
pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix) pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix)
if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) { if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
pathPrefix = path.dirname(pathPrefix) pathPrefix = path.dirname(pathPrefix)
}
} }
}
// Sanity check: show the number of files and total size // Sanity check: show the number of files and total size
var numFiles = files.length var numFiles = files.length
var totalBytes = files var totalBytes = files
.map((f) => f.size) .map((f) => f.size)
.reduce((a, b) => a + b, 0) .reduce((a, b) => a + b, 0)
var torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}` var torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}`
// Then, use the name of the base folder (or sole file, for a single file torrent) // 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. // as the default name. Show all files relative to the base folder.
var defaultName, basePath var defaultName, basePath
if (files.length === 1) { if (files.length === 1) {
// Single file torrent: /a/b/foo.jpg -> torrent name 'foo.jpg', path '/a/b' // Single file torrent: /a/b/foo.jpg -> torrent name 'foo.jpg', path '/a/b'
defaultName = files[0].name defaultName = files[0].name
basePath = pathPrefix basePath = pathPrefix
} else { } else {
// Multi file torrent: /a/b/{foo, bar}.jpg -> torrent name 'b', path '/a' // Multi file torrent: /a/b/{foo, bar}.jpg -> torrent name 'b', path '/a'
defaultName = path.basename(pathPrefix) defaultName = path.basename(pathPrefix)
basePath = path.dirname(pathPrefix) basePath = path.dirname(pathPrefix)
} }
var maxFileElems = 100 var maxFileElems = 100
var fileElems = files.slice(0, maxFileElems).map(function (file) { var fileElems = files.slice(0, maxFileElems).map(function (file) {
var relativePath = files.length === 0 ? file.name : path.relative(pathPrefix, file.path) var relativePath = files.length === 0 ? file.name : path.relative(pathPrefix, file.path)
return (<div>{relativePath}</div>) return (<div>{relativePath}</div>)
}) })
if (files.length > maxFileElems) { if (files.length > maxFileElems) {
fileElems.push(<div>+ {maxFileElems - files.length} more</div>) fileElems.push(<div>+ {maxFileElems - files.length} more</div>)
} }
var trackers = createTorrent.announceList.join('\n') var trackers = createTorrent.announceList.join('\n')
var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed' var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed'
return ( return (
<div className='create-torrent'> <div className='create-torrent'>
<h2>Create torrent {defaultName}</h2> <h2>Create torrent {defaultName}</h2>
<p className='torrent-info'> <p className='torrent-info'>
{torrentInfo} {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>
<p className='torrent-attribute'> <p className='torrent-attribute'>
<label>Trackers:</label> <label>Path:</label>
<textarea className='torrent-attribute torrent-trackers'>{trackers}</textarea> <div className='torrent-attribute'>{pathPrefix}</div>
</p> </p>
<p className='torrent-attribute'> <div className={'expand-collapse ' + collapsedClass}
<label>Private:</label> onClick={dispatcher('toggleCreateTorrentAdvanced')}>
<input type='checkbox' className='torrent-is-private' value='torrent-is-private' /> {info.showAdvanced ? 'Basic' : 'Advanced'}
</p> </div>
<p className='torrent-attribute'> <div className={'create-torrent-advanced ' + collapsedClass}>
<label>Files:</label> <p className='torrent-attribute'>
<div>{fileElems}</div> <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> </p>
</div> </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 () { function handleOK () {
var announceList = document.querySelector('.torrent-trackers').value // TODO: dcposch use React refs instead
.split('\n') var announceList = document.querySelector('.torrent-trackers').value
.map((s) => s.trim()) .split('\n')
.filter((s) => s !== '') .map((s) => s.trim())
var isPrivate = document.querySelector('.torrent-is-private').checked .filter((s) => s !== '')
var comment = document.querySelector('.torrent-comment').value.trim() var isPrivate = document.querySelector('.torrent-is-private').checked
var options = { var comment = document.querySelector('.torrent-comment').value.trim()
// We can't let the user choose their own name if we want WebTorrent var options = {
// to use the files in place rather than creating a new folder. // We can't let the user choose their own name if we want WebTorrent
// If we ever want to add support for that: // to use the files in place rather than creating a new folder.
// name: document.querySelector('.torrent-name').value // If we ever want to add support for that:
name: defaultName, // name: document.querySelector('.torrent-name').value
path: basePath, name: defaultName,
files: files, path: basePath,
announce: announceList, files: files,
private: isPrivate, announce: announceList,
comment: comment private: isPrivate,
comment: comment
}
dispatch('createTorrent', options)
} }
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 // Finds the longest common prefix
function findCommonPrefix (a, b) { function findCommonPrefix (a, b) {
for (var i = 0; i < a.length && i < b.length; i++) { for (var i = 0; i < a.length && i < b.length; i++) {

55
src/renderer/views/header.js
View File

@@ -1,39 +1,42 @@
module.exports = Header
const React = require('react') const React = require('react')
const {dispatcher} = require('../lib/dispatcher') const {dispatcher} = require('../lib/dispatcher')
function Header (state) { module.exports = class Header extends React.Component {
return ( render () {
<div className='header'> var loc = this.props.state.location
{getTitle()} return (
<div className='nav left float-left'> <div key='header' className='header'>
<i {this.getTitle()}
className={'icon back ' + (state.location.hasBack() ? '' : 'disabled')} <div className='nav left float-left'>
title='Back' <i
onClick={dispatcher('back')}> className={'icon back ' + (loc.hasBack() ? '' : 'disabled')}
chevron_left title='Back'
</i> onClick={dispatcher('back')}>
<i chevron_left
className={'icon forward ' + (state.location.hasForward() ? '' : 'disabled')} </i>
title='Forward' <i
onClick={dispatcher('forward')}> className={'icon forward ' + (loc.hasForward() ? '' : 'disabled')}
chevron_right title='Forward'
</i> onClick={dispatcher('forward')}>
chevron_right
</i>
</div>
<div className='nav right float-right'>
{this.getAddButton()}
</div>
</div> </div>
<div className='nav right float-right'> )
{getAddButton()} }
</div>
</div>
)
function getTitle () { getTitle () {
if (process.platform !== 'darwin') return null if (process.platform !== 'darwin') return null
var state = this.props.state
return (<div className='title ellipsis'>{state.window.title}</div>) return (<div className='title ellipsis'>{state.window.title}</div>)
} }
function getAddButton () { getAddButton () {
var state = this.props.state
if (state.location.url() !== 'home') return null if (state.location.url() !== 'home') return null
return ( return (
<i <i

34
src/renderer/views/open-torrent-address-modal.js
View File

@@ -1,23 +1,24 @@
module.exports = OpenTorrentAddressModal
const React = require('react') const React = require('react')
const {dispatch, dispatcher} = require('../lib/dispatcher') const {dispatch, dispatcher} = require('../lib/dispatcher')
function OpenTorrentAddressModal (state) { module.exports = class OpenTorrentAddressModal extends React.Component {
return ( render () {
<div className='open-torrent-address-modal'> // TODO: dcposch remove janky inline <script>
<p><label>Enter torrent address or magnet link</label></p> return (
<p> <div className='open-torrent-address-modal'>
<input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} /> <p><label>Enter torrent address or magnet link</label></p>
</p> <p>
<p className='float-right'> <input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} />
<button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button> </p>
<button className='button button-raised' onClick={handleOK}>OK</button> <p className='float-right'>
</p> <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
<script>document.querySelector('#add-torrent-url').focus()</script> <button className='button button-raised' onClick={handleOK}>OK</button>
</div> </p>
) <script>document.querySelector('#add-torrent-url').focus()</script>
</div>
)
}
} }
function handleKeyPress (e) { function handleKeyPress (e) {
@@ -26,5 +27,6 @@ function handleKeyPress (e) {
function handleOK () { function handleOK () {
dispatch('exitModal') dispatch('exitModal')
// TODO: dcposch use React refs instead
dispatch('addTorrent', document.querySelector('#add-torrent-url').value) dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
} }

31
src/renderer/views/player.js
View File

@@ -1,5 +1,3 @@
module.exports = Player
const React = require('react') const React = require('react')
const Bitfield = require('bitfield') const Bitfield = require('bitfield')
const prettyBytes = require('prettier-bytes') const prettyBytes = require('prettier-bytes')
@@ -9,19 +7,22 @@ const TorrentSummary = require('../lib/torrent-summary')
const {dispatch, dispatcher} = require('../lib/dispatcher') const {dispatch, dispatcher} = require('../lib/dispatcher')
// Shows a streaming video player. Standard features + Chromecast + Airplay // Shows a streaming video player. Standard features + Chromecast + Airplay
function Player (state) { module.exports = class Player extends React.Component {
// Show the video as large as will fit in the window, play immediately render () {
// If the video is on Chromecast or Airplay, show a title screen instead // Show the video as large as will fit in the window, play immediately
var showVideo = state.playing.location === 'local' // If the video is on Chromecast or Airplay, show a title screen instead
return ( var state = this.props.state
<div var showVideo = state.playing.location === 'local'
className='player' return (
onWheel={handleVolumeWheel} <div
onMouseMove={dispatcher('mediaMouseMoved')}> className='player'
{showVideo ? renderMedia(state) : renderCastScreen(state)} onWheel={handleVolumeWheel}
{renderPlayerControls(state)} onMouseMove={dispatcher('mediaMouseMoved')}>
</div> {showVideo ? renderMedia(state) : renderCastScreen(state)}
) {renderPlayerControls(state)}
</div>
)
}
} }
// Handles volume change by wheel // Handles volume change by wheel

17
src/renderer/views/preferences.js
View File

@@ -1,17 +1,18 @@
module.exports = Preferences
const React = require('react') const React = require('react')
const remote = require('electron').remote const remote = require('electron').remote
const dialog = remote.dialog const dialog = remote.dialog
const {dispatch} = require('../lib/dispatcher') const {dispatch} = require('../lib/dispatcher')
function Preferences (state) { module.exports = class Preferences extends React.Component {
return ( render () {
<div className='preferences'> var state = this.props.state
{renderGeneralSection(state)} return (
</div> <div className='preferences'>
) {renderGeneralSection(state)}
</div>
)
}
} }
function renderGeneralSection (state) { function renderGeneralSection (state) {

39
src/renderer/views/remove-torrent-modal.js
View File

@@ -1,27 +1,28 @@
module.exports = RemoveTorrentModal
const React = require('react') const React = require('react')
const {dispatch, dispatcher} = require('../lib/dispatcher') const {dispatch, dispatcher} = require('../lib/dispatcher')
function RemoveTorrentModal (state) { module.exports = class RemoveTorrentModal extends React.Component {
var message = state.modal.deleteData render () {
? 'Are you sure you want to remove this torrent from the list and delete the data file?' var state = this.props.state
: 'Are you sure you want to remove this torrent from the list?' var message = state.modal.deleteData
var buttonText = state.modal.deleteData ? 'Remove Data' : 'Remove' ? '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 ( return (
<div> <div>
<p><strong>{message}</strong></p> <p><strong>{message}</strong></p>
<p className='float-right'> <p className='float-right'>
<button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button> <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
<button className='button button-raised' onClick={handleRemove}>{buttonText}</button> <button className='button button-raised' onClick={handleRemove}>{buttonText}</button>
</p> </p>
</div> </div>
) )
function handleRemove () { function handleRemove () {
dispatch('deleteTorrent', state.modal.infoHash, state.modal.deleteData) dispatch('deleteTorrent', state.modal.infoHash, state.modal.deleteData)
dispatch('exitModal') dispatch('exitModal')
}
} }
} }

84
src/renderer/views/torrent-list.js
View File

@@ -1,5 +1,3 @@
module.exports = TorrentList
const React = require('react') const React = require('react')
const prettyBytes = require('prettier-bytes') const prettyBytes = require('prettier-bytes')
@@ -7,21 +5,25 @@ const TorrentSummary = require('../lib/torrent-summary')
const TorrentPlayer = require('../lib/torrent-player') const TorrentPlayer = require('../lib/torrent-player')
const {dispatcher} = require('../lib/dispatcher') const {dispatcher} = require('../lib/dispatcher')
function TorrentList (state) { module.exports = class TorrentList extends React.Component {
var torrentRows = state.saved.torrents.map( render () {
(torrentSummary) => renderTorrent(torrentSummary) var state = this.props.state
) var torrentRows = state.saved.torrents.map(
(torrentSummary) => this.renderTorrent(torrentSummary)
)
return ( return (
<div className='torrent-list'> <div className='torrent-list'>
{torrentRows} {torrentRows}
<div className='torrent-placeholder'> <div className='torrent-placeholder'>
<span className='ellipsis'>Drop a torrent file here or paste a magnet link</span> <span className='ellipsis'>Drop a torrent file here or paste a magnet link</span>
</div>
</div> </div>
</div> )
) }
function renderTorrent (torrentSummary) { renderTorrent (torrentSummary) {
var state = this.props.state
var infoHash = torrentSummary.infoHash var infoHash = torrentSummary.infoHash
var isSelected = infoHash && state.selectedInfoHash === infoHash var isSelected = infoHash && state.selectedInfoHash === infoHash
@@ -46,15 +48,15 @@ function TorrentList (state) {
<div style={style} className={classes.join(' ')} <div style={style} className={classes.join(' ')}
onContextMenu={infoHash && dispatcher('openTorrentContextMenu', infoHash)} onContextMenu={infoHash && dispatcher('openTorrentContextMenu', infoHash)}
onClick={infoHash && dispatcher('toggleSelectTorrent', infoHash)}> onClick={infoHash && dispatcher('toggleSelectTorrent', infoHash)}>
{renderTorrentMetadata(torrentSummary)} {this.renderTorrentMetadata(torrentSummary)}
{infoHash ? renderTorrentButtons(torrentSummary) : ''} {infoHash ? this.renderTorrentButtons(torrentSummary) : null}
{isSelected ? renderTorrentDetails(torrentSummary) : ''} {isSelected ? this.renderTorrentDetails(torrentSummary) : null}
</div> </div>
) )
} }
// Show name, download status, % complete // Show name, download status, % complete
function renderTorrentMetadata (torrentSummary) { renderTorrentMetadata (torrentSummary) {
var name = torrentSummary.name || 'Loading torrent...' var name = torrentSummary.name || 'Loading torrent...'
var elements = [( var elements = [(
<div className='name ellipsis'>{name}</div> <div className='name ellipsis'>{name}</div>
@@ -132,7 +134,7 @@ function TorrentList (state) {
// Download button toggles between torrenting (DL/seed) and paused // Download button toggles between torrenting (DL/seed) and paused
// Play button starts streaming the torrent immediately, unpausing if needed // Play button starts streaming the torrent immediately, unpausing if needed
function renderTorrentButtons (torrentSummary) { renderTorrentButtons (torrentSummary) {
var infoHash = torrentSummary.infoHash var infoHash = torrentSummary.infoHash
var playIcon, playTooltip, playClass var playIcon, playTooltip, playClass
@@ -164,7 +166,7 @@ function TorrentList (state) {
torrentSummary.files[torrentSummary.defaultPlayFileIndex] torrentSummary.files[torrentSummary.defaultPlayFileIndex]
if (defaultFile && defaultFile.currentTime && !willShowSpinner) { if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
var fraction = defaultFile.currentTime / defaultFile.duration var fraction = defaultFile.currentTime / defaultFile.duration
positionElem = renderRadialProgressBar(fraction, 'radial-progress-large') positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
playClass = 'resume-position' playClass = 'resume-position'
} }
@@ -202,7 +204,7 @@ function TorrentList (state) {
} }
// Show files, per-file download status and play buttons, and so on // Show files, per-file download status and play buttons, and so on
function renderTorrentDetails (torrentSummary) { renderTorrentDetails (torrentSummary) {
var filesElement var filesElement
if (!torrentSummary.files) { if (!torrentSummary.files) {
// We don't know what files this torrent contains // We don't know what files this torrent contains
@@ -219,7 +221,7 @@ function TorrentList (state) {
if (b.file.name < a.file.name) return 1 if (b.file.name < a.file.name) return 1
return 0 return 0
}) })
.map((object) => renderFileRow(torrentSummary, object.file, object.index)) .map((object) => this.renderFileRow(torrentSummary, object.file, object.index))
filesElement = ( filesElement = (
<div className='files'> <div className='files'>
@@ -238,7 +240,7 @@ function TorrentList (state) {
} }
// Show a single torrentSummary file in the details view for a single torrent // Show a single torrentSummary file in the details view for a single torrent
function renderFileRow (torrentSummary, file, index) { renderFileRow (torrentSummary, file, index) {
// First, find out how much of the file we've downloaded // First, find out how much of the file we've downloaded
// Are we even torrenting it? // Are we even torrenting it?
var isSelected = torrentSummary.selections && torrentSummary.selections[index] var isSelected = torrentSummary.selections && torrentSummary.selections[index]
@@ -254,7 +256,7 @@ function TorrentList (state) {
var positionElem var positionElem
if (file.currentTime) { if (file.currentTime) {
// Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru // Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru
positionElem = renderRadialProgressBar(file.currentTime / file.duration) positionElem = this.renderRadialProgressBar(file.currentTime / file.duration)
} }
// Finally, render the file as a table row // Finally, render the file as a table row
@@ -294,25 +296,25 @@ function TorrentList (state) {
</tr> </tr>
) )
} }
}
function renderRadialProgressBar (fraction, cssClass) { renderRadialProgressBar (fraction, cssClass) {
var rotation = 360 * fraction var rotation = 360 * fraction
var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'} var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
var transformFix = {transform: 'rotate(' + rotation + 'deg)'} var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
return ( return (
<div className={'radial-progress ' + cssClass}> <div className={'radial-progress ' + cssClass}>
<div className='circle'> <div className='circle'>
<div className='mask full' style={transformFill}> <div className='mask full' style={transformFill}>
<div className='fill' style={transformFill}></div> <div className='fill' style={transformFill}></div>
</div> </div>
<div className='mask half'> <div className='mask half'>
<div className='fill' style={transformFill}></div> <div className='fill' style={transformFill}></div>
<div className='fill fix' style={transformFix}></div> <div className='fill fix' style={transformFix}></div>
</div>
</div> </div>
<div className='inset'></div>
</div> </div>
<div className='inset'></div> )
</div> }
)
} }

60
src/renderer/views/unsupported-media-modal.js
View File

@@ -1,39 +1,39 @@
module.exports = UnsupportedMediaModal
const React = require('react') const React = require('react')
const electron = require('electron') const electron = require('electron')
const {dispatch, dispatcher} = require('../lib/dispatcher') const {dispatcher} = require('../lib/dispatcher')
function UnsupportedMediaModal (state) { module.exports = class UnsupportedMediaModal extends React.Component {
var err = state.modal.error render () {
var message = (err && err.getMessage) var state = this.props.state
? err.getMessage() var err = state.modal.error
: err var message = (err && err.getMessage)
var actionButton = state.modal.vlcInstalled ? err.getMessage()
? (<button className='button-raised' onClick={onPlay}>Play in VLC</button>) : err
: (<button className='button-raised' onClick={onInstall}>Install VLC</button>) var actionButton = state.modal.vlcInstalled
var vlcMessage = state.modal.vlcNotFound ? (<button className='button-raised' onClick={dispatcher('vlcPlay')}>Play in VLC</button>)
? 'Couldn\'t run VLC. Please make sure it\'s installed.' : (<button className='button-raised' onClick={() => this.onInstall}>Install VLC</button>)
: '' var vlcMessage = state.modal.vlcNotFound
return ( ? 'Couldn\'t run VLC. Please make sure it\'s installed.'
<div> : ''
<p><strong>Sorry, we can't play that file.</strong></p> return (
<p>{message}</p> <div>
<p className='float-right'> <p><strong>Sorry, we can't play that file.</strong></p>
<button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button> <p>{message}</p>
{actionButton} <p className='float-right'>
</p> <button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
<p className='error-text'>{vlcMessage}</p> {actionButton}
</div> </p>
) <p className='error-text'>{vlcMessage}</p>
</div>
)
}
function onInstall () { onInstall () {
electron.shell.openExternal('http://www.videolan.org/vlc/') electron.shell.openExternal('http://www.videolan.org/vlc/')
// TODO: dcposch send a dispatch rather than modifying state directly
var state = this.props.state
state.modal.vlcInstalled = true // Assume they'll install it successfully state.modal.vlcInstalled = true // Assume they'll install it successfully
} }
function onPlay () {
dispatch('vlcPlay')
}
} }

41
src/renderer/views/update-available-modal.js
View File

@@ -1,29 +1,30 @@
module.exports = UpdateAvailableModal
const React = require('react') const React = require('react')
const electron = require('electron') const electron = require('electron')
const {dispatch} = require('../lib/dispatcher') const {dispatch} = require('../lib/dispatcher')
function UpdateAvailableModal (state) { module.exports = class UpdateAvailableModal extends React.Component {
return ( render () {
<div className='update-available-modal'> var state = this.props.state
<p><strong>A new version of WebTorrent is available: v{state.modal.version}</strong></p> return (
<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> <div className='update-available-modal'>
<p className='float-right'> <p><strong>A new version of WebTorrent is available: v{state.modal.version}</strong></p>
<button className='button button-flat' onClick={handleCancel}>Skip This Release</button> <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>
<button className='button button-raised' onClick={handleOK}>Show Download Page</button> <p className='float-right'>
</p> <button className='button button-flat' onClick={handleCancel}>Skip This Release</button>
</div> <button className='button button-raised' onClick={handleOK}>Show Download Page</button>
) </p>
</div>
)
function handleOK () { function handleOK () {
electron.shell.openExternal('https://github.com/feross/webtorrent-desktop/releases') electron.shell.openExternal('https://github.com/feross/webtorrent-desktop/releases')
dispatch('exitModal') dispatch('exitModal')
} }
function handleCancel () { function handleCancel () {
dispatch('skipVersion', state.modal.version) dispatch('skipVersion', state.modal.version)
dispatch('exitModal') dispatch('exitModal')
}
} }
} }