staggered, cancellable preloading of all section image assets, as soon as the section loads

1 files changed, 10 insertions, 3 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index 87a325b..8602284 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-import { floatEQ, floatInRange, clamp } from 'app/utils'
+import { floatInRange, clamp } from 'app/utils'
+import { preloadSectionImages } from 'app/utils/image.utils'
 
 import PlayerTranscript from './player.transcript'
 import PlayerFullscreen from './player.fullscreen'
@@ -70,8 +71,13 @@ class PlayerContainer extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.audio.play_ts === prevProps.audio.play_ts) return
-    this.handleTimeUpdate()
+    if (this.props.audio.play_ts !== prevProps.audio.play_ts) {
+      this.handleTimeUpdate()
+    }
+    if (this.props.currentSection !== prevProps.currentSection) {
+      this.preloader && this.preloader.cancel()
+      this.preloader = preloadSectionImages(this.props.currentSection, this.props.mediaLookup)
+    }
   }
 
   handleTimeUpdate() {
@@ -114,6 +120,7 @@ class PlayerContainer extends Component {
 const mapStateToProps = state => ({
   viewer: state.viewer,
   audio: state.audio,
+  mediaLookup: state.media.index.lookup,
   sections: state.viewer.sections,
   currentSection: state.viewer.currentSection,
   autoAdvance: state.viewer.autoAdvance,