134 lines
4.8 KiB
JavaScript
134 lines
4.8 KiB
JavaScript
import * as colors from 'material-ui/styles/colors'
|
|
import createGetter from 'fn-getter'
|
|
import * as React from 'react'
|
|
import darkBaseTheme$0 from 'material-ui/styles/baseThemes/darkBaseTheme'
|
|
import getMuiTheme$0 from 'material-ui/styles/getMuiTheme'
|
|
import muiThemeProvider from 'material-ui/styles/MuiThemeProvider'
|
|
import Header from '../components/header.js'
|
|
import TorrentListPage from './torrent-list-page.js'
|
|
import playerPage from './player-page.js'
|
|
import createTorrentPage from './create-torrent-page.js'
|
|
import preferencesPage from './preferences-page.js'
|
|
import openTorrentAddressModal from '../components/open-torrent-address-modal.js'
|
|
import removeTorrentModal from '../components/remove-torrent-modal.js'
|
|
import updateAvailableModal from '../components/update-available-modal.js'
|
|
import unsupportedMediaModal from '../components/unsupported-media-modal.js'
|
|
import deleteAllTorrentsModal from '../components/delete-all-torrents-modal.js'
|
|
const darkBaseTheme = { default: darkBaseTheme$0 }.default
|
|
const getMuiTheme = getMuiTheme$0.default
|
|
const MuiThemeProvider = muiThemeProvider.default
|
|
const Views = {
|
|
home: createGetter(() => TorrentListPage),
|
|
player: createGetter(() => playerPage),
|
|
'create-torrent': createGetter(() => createTorrentPage),
|
|
preferences: createGetter(() => preferencesPage)
|
|
}
|
|
|
|
const Modals = {
|
|
'open-torrent-address-modal': createGetter(() => openTorrentAddressModal),
|
|
'remove-torrent-modal': createGetter(() => removeTorrentModal),
|
|
'update-available-modal': createGetter(() => updateAvailableModal),
|
|
'unsupported-media-modal': createGetter(() => unsupportedMediaModal),
|
|
'delete-all-torrents-modal': createGetter(() => deleteAllTorrentsModal)
|
|
}
|
|
|
|
const fontFamily = process.platform === 'win32'
|
|
? '"Segoe UI", sans-serif'
|
|
: 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
|
|
|
|
darkBaseTheme.fontFamily = fontFamily
|
|
darkBaseTheme.userAgent = false
|
|
darkBaseTheme.palette.primary1Color = colors.grey50
|
|
darkBaseTheme.palette.primary2Color = colors.grey50
|
|
darkBaseTheme.palette.primary3Color = colors.grey600
|
|
darkBaseTheme.palette.accent1Color = colors.redA200
|
|
darkBaseTheme.palette.accent2Color = colors.redA400
|
|
darkBaseTheme.palette.accent3Color = colors.redA100
|
|
|
|
let darkMuiTheme
|
|
let lightMuiTheme
|
|
|
|
export default class App extends React.Component {
|
|
render () {
|
|
const 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
|
|
const hideControls = state.shouldHidePlayerControls()
|
|
|
|
const 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')
|
|
|
|
if (!darkMuiTheme) {
|
|
darkMuiTheme = getMuiTheme(darkBaseTheme)
|
|
}
|
|
|
|
return (
|
|
<MuiThemeProvider muiTheme={darkMuiTheme}>
|
|
<div className={'app ' + cls.join(' ')}>
|
|
<Header state={state} />
|
|
{this.getErrorPopover()}
|
|
<div key='content' className='content'>{this.getView()}</div>
|
|
{this.getModal()}
|
|
</div>
|
|
</MuiThemeProvider>
|
|
)
|
|
}
|
|
|
|
getErrorPopover () {
|
|
const state = this.props.state
|
|
const now = new Date().getTime()
|
|
const recentErrors = state.errors.filter((x) => now - x.time < 5000)
|
|
const hasErrors = recentErrors.length > 0
|
|
|
|
const errorElems = recentErrors.map((error, i) => <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>
|
|
)
|
|
}
|
|
|
|
async getModal () {
|
|
const state = this.props.state
|
|
if (!state.modal) return
|
|
|
|
if (!lightMuiTheme) {
|
|
const lightBaseTheme = (await import('material-ui/styles/baseThemes/lightBaseTheme')).default
|
|
lightBaseTheme.fontFamily = fontFamily
|
|
lightBaseTheme.userAgent = false
|
|
lightMuiTheme = getMuiTheme(lightBaseTheme)
|
|
}
|
|
|
|
const ModalContents = Modals[state.modal.id]()
|
|
return (
|
|
<MuiThemeProvider muiTheme={lightMuiTheme}>
|
|
<div key='modal' className='modal'>
|
|
<div key='modal-background' className='modal-background' />
|
|
<div key='modal-content' className='modal-content'>
|
|
<ModalContents state={state} />
|
|
</div>
|
|
</div>
|
|
</MuiThemeProvider>
|
|
)
|
|
}
|
|
|
|
getView () {
|
|
const state = this.props.state
|
|
const View = Views[state.location.url()]()
|
|
return (<View state={state} />)
|
|
}
|
|
}
|