From f8d749a6fd44f19cf2c9e80ab36b48aa8402bfde Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Sun, 22 Jul 2018 14:29:38 +0200
Subject: [PATCH] attempt preload speedup

---
 src/components/preview-song.js |  52 ----------------
 src/components/song-preview.js | 107 +++++++++++++++++++++++++++++++++
 src/index.html                 |   2 +-
 src/templates/menu.html        |   2 +-
 4 files changed, 109 insertions(+), 54 deletions(-)
 delete mode 100644 src/components/preview-song.js
 create mode 100644 src/components/song-preview.js

diff --git a/src/components/preview-song.js b/src/components/preview-song.js
deleted file mode 100644
index a69282d..0000000
--- a/src/components/preview-song.js
+++ /dev/null
@@ -1,52 +0,0 @@
-var utils = require('../utils');
-
-/**
- * Handle song preview play, pause, fades.
- */
-AFRAME.registerComponent('preview-song', {
-  schema: {
-    challengeId: {type: 'string'},
-    previewStartTime: {type: 'number'}
-  },
-
-  init: function() {
-    var el = this.el;
-    this.audio = new Audio();
-    this.audio.volume = 0;
-
-    // anime.js animation.
-    this.volumeTarget = {volume: 0};
-    this.animation = AFRAME.anime({
-      targets: this.volumeTarget,
-      delay: 250,
-      duration: 1500,
-      easing: 'easeInQuad',
-      volume: 0.5,
-      autoplay: false,
-      loop: false,
-      update: () => {
-        this.audio.volume = this.volumeTarget.volume;
-      }
-    });
-  },
-
-  update: function (oldData) {
-    // Stop.
-    if (oldData.challengeId && !this.data.challengeId) {
-      if (this.animation) { this.animation.pause(); }
-      if (!this.audio.paused) { this.audio.pause(); }
-      this.audio.src = '';
-      return;
-    }
-
-    // Play preview.
-    if (this.data.challengeId) {
-      this.audio.currentTime = this.data.previewStartTime;
-      this.audio.src = utils.getS3FileUrl(this.data.challengeId, 'song.ogg');
-      this.audio.volume = 0;
-      this.volumeTarget.volume = 0;
-      this.audio.play();
-      this.animation.restart();
-    }
-  }
-});
diff --git a/src/components/song-preview.js b/src/components/song-preview.js
new file mode 100644
index 0000000..d89c977
--- /dev/null
+++ b/src/components/song-preview.js
@@ -0,0 +1,107 @@
+var utils = require('../utils');
+
+AFRAME.registerComponent('song-preview-system', {
+  schema: {
+    selectedChallengeId: {type: 'string'}
+  },
+
+  init: function () {
+    this.audio = null;
+    this.audioStore = {};
+    this.preloadQueue = [];
+
+    // anime.js animation to fade in volume.
+    this.volumeTarget = {volume: 0};
+    this.animation = AFRAME.anime({
+      targets: this.volumeTarget,
+      delay: 250,
+      duration: 1500,
+      easing: 'easeInQuad',
+      volume: 0.5,
+      autoplay: false,
+      loop: false,
+      update: () => {
+        this.audio.volume = this.volumeTarget.volume;
+      }
+    });
+  },
+
+  update: function (oldData) {
+    const data = this.data;
+    if (oldData.selectedChallengeId &&
+        oldData.selectedChallengeId !== data.selectedChallengeId) {
+      this.stopSong();
+    }
+
+    if (data.selectedChallengeId &&
+        oldData.selectedChallengeId !== data.selectedChallengeId) {
+      this.playSong(data.selectedChallengeId);
+    }
+  },
+
+  preloadSong: function (challengeId, previewStartTime) {
+    const audio = document.createElement('audio');
+    audio.currentTime = previewStartTime;
+    audio.src = utils.getS3FileUrl(challengeId, 'song.ogg');
+    audio.volume = 0;
+    this.audioStore[challengeId] = audio;
+
+    if (this.preloadQueue.length === 0) {
+      preloadMetatata(audio);
+    } else {
+      this.preloadQueue.push(audio);
+    }
+  },
+
+  preloadMetadata: function (audio) {
+    audio.addEventListener('loadedmetadata', () => {
+      if (this.preloadQueue.length) {
+        preloadMetadata(this.preloadQueue[0]);
+      }
+    });
+    audio.preload = 'metadata';
+  },
+
+  stopSong: function () {
+    if (!this.audio) { return; }
+    if (this.animation) { this.animation.pause(); }
+    if (!this.audio.paused) { this.audio.pause(); }
+  },
+
+  playSong: function (challengeId) {
+    if (!challengeId) { return; }
+    this.audio = this.audioStore[challengeId];
+    this.audio.volume = 0;
+    this.volumeTarget.volume = 0;
+    this.audio.play();
+    this.animation.restart();
+  },
+
+  clearSong: function (challengeId) {
+    let audio = this.audioStore[challengeId];
+    audio.preload = 'none';
+    delete this.audioStore[challengeId];
+    audio = null;
+    this.preloadQueue.length = 0;
+  }
+});
+
+/**
+ * Handle song preview play, pause, fades.
+ */
+AFRAME.registerComponent('song-preview', {
+  schema: {
+    challengeId: {type: 'string'},
+    previewStartTime: {type: 'number'}
+  },
+
+  play: function () {
+    this.el.sceneEl.components['song-preview-system'].preloadSong(
+      this.data.challengeId, this.data.previewStartTime
+    );
+  },
+
+  remove: function () {
+    this.el.sceneEl.components['song-preview-system'].clearSong(this.data.challengeId);
+  }
+});
diff --git a/src/index.html b/src/index.html
index db71618..329c355 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,8 +7,8 @@
   </head>
   <body>
     <a-scene bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty"
-             bind__preview-song="challengeId: menuSelectedChallenge.id; previewStartTime: menuSelectedChallenge.previewStartTime"
              bind__song="challengeId: challenge.id; isPlaying: !menu.active && !challenge.isLoading"
+             bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
              console-shortcuts
              search>
       <a-assets timeout="10000">
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 66ed213..0181be3 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -18,7 +18,7 @@
 
   {% raw %}
     <template id="searchResultTemplate">
-      <a-entity class="searchResult" data-id="{{ item.id }}">
+      <a-entity class="searchResult" data-id="{{ item.id }}" song-preview="challengeId: {{ item.id }}; previewStartTime: {{ item.previewStartTime }}">
         <a-entity class="searchResultBackground"
             bind__active-color="active: menuSelectedChallenge.id === '{{ item.id }}'"
             bind__animation__mouseenter="enabled: menuSelectedChallenge.id !== '{{ item.id }}'"