more informational loading text (fetching v. decoding)

src/components/song.js

@@ -84,6 +84,7 @@ AFRAME.registerComponent('song', {
     const data = this.data;
     return new Promise(resolve => {
       data.analyserEl.addEventListener('audioanalyserbuffersource', evt => {
+        // Finished decoding.
         this.source = evt.detail;
         this.source.onended = this.victory;
         resolve(this.source);
@@ -91,6 +92,7 @@ AFRAME.registerComponent('song', {
       this.analyserSetter.src = utils.getS3FileUrl(data.challengeId, 'song.ogg');
       data.analyserEl.setAttribute('audioanalyser', this.analyserSetter);
       this.audioAnalyser.xhr.addEventListener('progress', evt => {
+        // Finished fetching.
         this.onFetchProgress(evt);
       });
     });
@@ -114,6 +116,7 @@ AFRAME.registerComponent('song', {
   onFetchProgress: function (evt) {
     const progress = evt.loaded / evt.total;
     this.songLoadingIndicator.setAttribute('geometry', 'thetaLength', progress * 360);
+    if (progress >= 1) { this.el.sceneEl.emit('songfetchfinish', null, false); }
   },
 
   onRestart: function () {

src/state/index.js

@@ -34,16 +34,14 @@ AFRAME.registerState({
     },
     damage: 0,
     inVR: false,
-    isGameOver: false,
+    isGameOver: false,  // Game over screen.
     isPaused: false,  // Playing, but paused. Not active during menu.
-    isPlaying: false,  // Not in the menu AND not paused.
-    isSongLoading: false,
-    isVictory: false,
-    keyboardActive: false,
-    menu: {
-      active: true,
-      playButtonText: 'Play'
-    },
+    isPlaying: false,  // Actively playing (slicing beats).
+    isSongFetching: false,  // Fetching stage.
+    isSongLoading: false,  // Either fetching or decoding.
+    isVictory: false,  // Victory screen.
+    keyboardActive: false,  // Whether search is open.
+    menu: {active: true},
     menuDifficulties: [],
     menuSelectedChallenge: {
       author: '',
@@ -227,11 +225,17 @@ AFRAME.registerState({
       computeMenuSelectedChallengeIndex(state);
     },
 
+    songfetchfinish: (state) => {
+      state.isSongFetching = false;
+    },
+
     songloadfinish: (state) => {
+      state.isSongFetching = false;
       state.isSongLoading = false;
     },
 
     songloadstart: (state) => {
+      state.isSongFetching = true;
       state.isSongLoading = true;
     },
 
@@ -264,6 +268,13 @@ AFRAME.registerState({
     state.leftRaycasterActive = anyMenuOpen && state.activeHand === 'left' && state.inVR;
     state.rightRaycasterActive = anyMenuOpen && state.activeHand === 'right' && state.inVR;
 
+    // Song is decoding if it is loading, but not fetching.
+    if (state.isSongLoading) {
+      state.loadingText = state.isSongFetching ? 'Downloading song...' : 'Processing song...';
+    } else {
+      state.loadingText = '';
+    }
+
     state.multiplierText = `${state.score.multiplier}x`;
   }
 });

src/templates/stage.html

@@ -115,7 +115,7 @@
 
   <a-entity
     id="songLoadingIndicator"
-    bind__visible="isSongLoading"
+    bind__visible="isSongFetching"
     geometry="primitive: ring; radiusInner: 0.05; radiusOuter: 0.08"
     material="shader: flat; color: #FAFAFA; opacity: 0.75; side: back"
     position="0 1.4 -2.5"
@@ -125,11 +125,12 @@
   <a-entity
     id="loadingText"
     mixin="textFont"
-    bind__animation__color="enabled: challenge.isLoading || isSongLoading"
-    animation__color="property: components.text.material.uniforms.color.value; type: color; from: #AAF; to: #88D; dir: alternate; loop: true; dur: 2000; easing: easeInOutCubic; enabled: false"
-    text="value: READY, STEADY...; align: center; color: #aaf; wrapCount: 18; width: 2"
+    bind__animation__color="enabled: isSongLoading"
+    bind__text="value: loadingText"
+    animation__color="property: components.text.material.uniforms.color.value; type: color; from: #AAF; to: #88D; dir: alternate; loop: true; dur: 750; easing: easeInOutCubic; enabled: false"
+    text="align: center; color: #aaf; wrapCount: 18; width: 2"
     position="0 1.5 -2.5"
-    bind__visible="challenge.isLoading || isSongLoading"></a-entity>
+    bind__visible="isSongLoading"></a-entity>
 
   <a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>