105 lines
3.4 KiB
JavaScript
105 lines
3.4 KiB
JavaScript
const React = require('react')
|
|
|
|
const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').default
|
|
const getMuiTheme = require('material-ui/styles/getMuiTheme').default
|
|
const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default
|
|
|
|
const Header = require('../components/Header')
|
|
|
|
const Views = {
|
|
'home': require('./TorrentListPage'),
|
|
'player': require('./PlayerPage'),
|
|
'create-torrent': require('./CreateTorrentPage'),
|
|
'preferences': require('./PreferencesPage')
|
|
}
|
|
|
|
const Modals = {
|
|
'open-torrent-address-modal': require('../components/open-torrent-address-modal'),
|
|
'remove-torrent-modal': require('../components/remove-torrent-modal'),
|
|
'update-available-modal': require('../components/update-available-modal'),
|
|
'unsupported-media-modal': require('../components/unsupported-media-modal')
|
|
}
|
|
|
|
const MUI_THEME = getMuiTheme(Object.assign(darkBaseTheme, {
|
|
fontFamily: 'BlinkMacSystemFont, \'Helvetica Neue\', Helvetica, sans-serif'
|
|
}))
|
|
|
|
class App extends React.Component {
|
|
render () {
|
|
var state = this.props.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 = (
|
|
<MuiThemeProvider muiTheme={MUI_THEME}>
|
|
<div className={'app ' + cls.join(' ')}>
|
|
<Header state={state} />
|
|
{this.getErrorPopover()}
|
|
<div key='content' className='content'>{this.getView()}</div>
|
|
{this.getModal()}
|
|
</div>
|
|
</MuiThemeProvider>
|
|
)
|
|
|
|
return vdom
|
|
}
|
|
|
|
getErrorPopover () {
|
|
var state = this.props.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, i) {
|
|
return (<div key={i} className='error'>{error.message}</div>)
|
|
})
|
|
return (
|
|
<div key='errors'
|
|
className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
|
|
<div key='title' className='title'>Error</div>
|
|
{errorElems}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
getModal () {
|
|
var state = this.props.state
|
|
if (!state.modal) return
|
|
var ModalContents = Modals[state.modal.id]
|
|
return (
|
|
<div key='modal' className='modal'>
|
|
<div key='modal-background' className='modal-background' />
|
|
<div key='modal-content' className='modal-content'>
|
|
<ModalContents state={state} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
getView () {
|
|
var state = this.props.state
|
|
var View = Views[state.location.url()]
|
|
return (<View state={state} />)
|
|
}
|
|
}
|
|
|
|
module.exports = App
|