React: address PR comments

This commit is contained in:
DC
2016-07-22 20:57:54 -07:00
parent d20786cd69
commit 734b0731a1
3 changed files with 14 additions and 30 deletions

View File

@@ -19,7 +19,6 @@ var config = require('../src/config')
var pkg = require('../package.json') var pkg = require('../package.json')
var BUILD_NAME = config.APP_NAME + '-v' + config.APP_VERSION var BUILD_NAME = config.APP_NAME + '-v' + config.APP_VERSION
var BUILD_PATH = path.join(config.ROOT_PATH, 'build')
var DIST_PATH = path.join(config.ROOT_PATH, 'dist') var DIST_PATH = path.join(config.ROOT_PATH, 'dist')
var argv = minimist(process.argv.slice(2), { var argv = minimist(process.argv.slice(2), {

View File

@@ -81,7 +81,6 @@ function onState (err, _state) {
// Do this at least once a second to give every file in every torrentSummary // Do this at least once a second to give every file in every torrentSummary
// a progress bar and to keep the cursor in sync when playing a video // a progress bar and to keep the cursor in sync when playing a video
setInterval(update, 1000) setInterval(update, 1000)
window.requestAnimationFrame(renderIfNecessary)
app = ReactDOM.render(<App state={state} />, document.querySelector('#body')) app = ReactDOM.render(<App state={state} />, document.querySelector('#body'))
// OS integrations: // OS integrations:
@@ -123,23 +122,15 @@ function lazyLoadCast () {
return Cast return Cast
} }
// Calls render() to go from state -> UI, then applies to vdom to the real DOM. // React loop:
// Runs at 60fps, but only executes when necessary // 1. update() - recompute the virtual DOM, diff, apply to the real DOM
var needsRender = 0 // 2. event - might be a click or other DOM event, or something external
// 3. dispatch - the event handler calls dispatch(), main.js sends it to a controller
function renderIfNecessary () { // 4. controller - the controller handles the event, changing the state object
if (needsRender > 1) console.log('combining %d update() calls into one update', needsRender)
if (needsRender) {
controllers.playback.showOrHidePlayerControls()
app.setState(state)
updateElectron()
needsRender = 0
}
window.requestAnimationFrame(renderIfNecessary)
}
function update () { function update () {
needsRender++ controllers.playback.showOrHidePlayerControls()
app.setState(state)
updateElectron()
} }
// Some state changes can't be reflected in the DOM, instead we have to // Some state changes can't be reflected in the DOM, instead we have to
@@ -294,14 +285,6 @@ function backToList () {
// If we were already on the torrent list, scroll to the top // If we were already on the torrent list, scroll to the top
var contentTag = document.querySelector('.content') var contentTag = document.querySelector('.content')
if (contentTag) contentTag.scrollTop = 0 if (contentTag) contentTag.scrollTop = 0
// TODO dcposch: is this still required with React?
// Work around virtual-dom issue: it doesn't expose its redraw function,
// and only redraws on requestAnimationFrame(). That means when the user
// closes the window (hide window / minimize to tray) and we want to pause
// the video, we update the vdom but it keeps playing until you reopen!
var mediaTag = document.querySelector('video,audio')
if (mediaTag) mediaTag.pause()
}) })
} }
@@ -376,7 +359,7 @@ function onOpen (files) {
if (state.location.url() === 'home' || subtitles.length === 0) { if (state.location.url() === 'home' || subtitles.length === 0) {
if (files.every(TorrentPlayer.isTorrent)) { if (files.every(TorrentPlayer.isTorrent)) {
if (state.location.url() !== 'home') { if (state.location.url() !== 'home') {
backToList() dispatch('backToList')
} }
// All .torrent files? Add them. // All .torrent files? Add them.
files.forEach((file) => controllers.torrentList.addTorrent(file)) files.forEach((file) => controllers.torrentList.addTorrent(file))

View File

@@ -5,11 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebTorrent Desktop</title> <title>WebTorrent Desktop</title>
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script>
require('../build/renderer/main.js')
</script>
</head> </head>
<body> <body>
<!-- React prints a warning if you render to <body> directly -->
<div id='body'></div> <div id='body'></div>
<!-- We can't just say src='...main.js', that breaks require()s -->
<script>
require('../build/renderer/main.js')
</script>
</body> </body>
</html> </html>