2 files changed, 90 insertions, 1 deletions

diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js
index b8a2ed7..e2072b6 100644
--- a/frontend/app/utils/index.js
+++ b/frontend/app/utils/index.js
@@ -181,6 +181,35 @@ export const preloadVideo = url => (
   })
 )
 
+export const preloadAudio = url => (
+  new Promise((resolve, reject) => {
+    const audio = document.createElement('audio')
+    let loaded = false
+    const bind = () => {
+      audio.addEventListener('loadedmetadata', onload)
+      audio.addEventListener('error', onerror)
+    }
+    const unbind = () => {
+      audio.removeEventListener('loadedmetadata', onload)
+      audio.removeEventListener('error', onerror)
+    }
+    const onload = () => {
+      if (loaded) return
+      loaded = true
+      unbind()
+      resolve(audio)
+    }
+    const onerror = (error) => {
+      if (loaded) return
+      loaded = true
+      unbind()
+      reject(error)
+    }
+    bind()
+    audio.src = url
+  })
+)
+
 export const cropImage = (url, crop) => {
   return new Promise((resolve, reject) => {
     let { x, y, w, h } = crop
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index f8c2923..bf43c52 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -10,7 +10,7 @@ import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET, BACK_TO_KW } from "site/projec
 import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
 import MuteButton from "site/audio/mute.button"
 import { history } from "site/store"
-import { isMobile } from "app/utils"
+import { isMobile, preloadVideo, preloadImage, preloadAudio } from "app/utils"
 import LandscapeWarning from './landscape.warning'
 
 import TextOverlay from './text.overlay'
@@ -37,6 +37,7 @@ class NavOverlay extends Component {
 
   constructor(props) {
     super(props)
+    this.preloaded = {}
     this.footerRef = React.createRef()
     this.previousArtist = this.previousArtist.bind(this)
     this.nextArtist = this.nextArtist.bind(this)
@@ -61,6 +62,7 @@ class NavOverlay extends Component {
     const pathkey = pathPartz[0]
     const path_chapter = pathPartz[1]
     // console.log(pathkey)
+    this.preloadNextPages()
     if (pathkey === 'start') {
       this.setState({
         showHome: false,
@@ -143,6 +145,63 @@ class NavOverlay extends Component {
       })
     }
   }
+  
+  preloadNextPages() {
+    const { page_name } = this.props.match.params
+    const page_path = ["", "thelastmuseum", page_name].join('/')
+    console.log("preload", page_path)
+    console.log(this.props.graph)
+    console.log(this.props.graph.pages[page_path])
+    const nextPagePaths = this.props.graph.pages[page_path].tiles.reduce((lookup, tile) => {
+      if (tile.href) {
+        lookup[tile.href] = true
+      }
+      return lookup
+    }, {})
+    Object.keys(nextPagePaths).forEach(nextPagePath => this.preloadNextPage(nextPagePath))
+  }
+
+  preloadNextPage(nextPagePath) {
+    const { graph } = this.props
+    const nextPage = graph.pages[nextPagePath]
+    if (!nextPage) return
+    nextPage.tiles.forEach(tile => {
+      if (tile.type === 'video' && !this.preloaded[tile.settings.url]) {
+        this.preloaded[tile.settings.url] = true
+        preloadVideo(tile.settings.url)
+        .then(video => {
+          // console.log("preloaded", video.src)
+          // video.src = null
+        })
+      } else if (tile.type === 'image' && !this.preloaded[tile.settings.url]) {
+        this.preloaded[tile.settings.url] = true
+        preloadImage(tile.settings.url)
+        .then(image => {
+          // console.log("preloaded", image.src)
+          // image.src = null
+        })
+      }
+      if (tile.settings.custom_cursor_id) {
+        const cursor = graph.uploads.find(upload => upload.id === tile.settings.custom_cursor_id)
+        if (cursor.url && !this.preloaded[cursor.url]) {
+          this.preloaded[cursor.url] = true
+          preloadImage(cursor.url)
+          .then(image => {
+            // console.log("preloaded", image.src)
+            // image.src = null
+          })
+        }
+      }
+    })
+    if (nextPage.settings.audio && !this.preloaded[nextPage.settings.audio]) {
+      this.preloaded[nextPage.settings.audio] = true
+      preloadAudio("/thelastmuseum" + nextPage.settings.audio)
+      .then(audio => {
+        // console.log("preloaded", audio.src)
+        // audio.src = null
+      })
+    }
+  }
 
   hideRoadblock() {
     const roadblock = document.querySelector('.roadblock')
@@ -266,6 +325,7 @@ function exitLink(language) {
 
 const mapStateToProps = state => ({
   language: state.site.language,
+  graph: state.site.graph,
 })
 
 export default connect(mapStateToProps)(NavOverlay)