diff --git a/renderer/main.js b/renderer/main.js index 6ee63609..453c982d 100644 --- a/renderer/main.js +++ b/renderer/main.js @@ -92,6 +92,7 @@ function onState (err, _state) { // 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 setInterval(update, 1000) + requestAnimationFrame(redrawIfNecessary) // OS integrations: // ...drag and drop a torrent or video file to play or seed @@ -143,10 +144,22 @@ function render (state) { } // Calls render() to go from state -> UI, then applies to vdom to the real DOM. +// Runs at 60fps, but only executes when necessary +var needsRedraw = 0 + +function redrawIfNecessary () { + if (needsRedraw > 1) console.log('combining %d update() calls into one update', needsRedraw) + if (needsRedraw) { + controllers.playback.showOrHidePlayerControls() + vdomLoop.update(state) + updateElectron() + needsRedraw = 0 + } + requestAnimationFrame(redrawIfNecessary) +} + function update () { - controllers.playback.showOrHidePlayerControls() - vdomLoop.update(state) - updateElectron() + needsRedraw++ } // Some state changes can't be reflected in the DOM, instead we have to diff --git a/renderer/views/app.js b/renderer/views/app.js index 58c64b2d..caa6fdbe 100644 --- a/renderer/views/app.js +++ b/renderer/views/app.js @@ -18,6 +18,7 @@ var Modals = { } function App (state) { + console.time('render app') // 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) @@ -38,7 +39,7 @@ function App (state) { if (state.window.isFocused) cls.push('is-focused') if (hideControls) cls.push('hide-video-controls') - return hx` + var vdom = hx`
${Header(state)} ${getErrorPopover(state)} @@ -46,6 +47,8 @@ function App (state) { ${getModal(state)}
` + console.timeEnd('render app') + return vdom } function getErrorPopover (state) {