From bf054c5042c862ff55bf7c9249afec9e56f68bd2 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Mon, 12 Nov 2018 14:07:39 +0800
Subject: [PATCH] no show song progress ring until preloaded

---
 src/components/song-progress-ring.js | 24 ++++++++++--------------
 src/templates/stage.html             |  4 ++--
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/song-progress-ring.js b/src/components/song-progress-ring.js
index d89ca60..993bf74 100644
--- a/src/components/song-progress-ring.js
+++ b/src/components/song-progress-ring.js
@@ -2,32 +2,23 @@ AFRAME.registerComponent('song-progress-ring', {
   dependencies: ['geometry', 'material'],
 
   schema: {
-    challengeId: {type: 'string'},
     enabled: {default: false}
   },
 
   init: function () {
-    this.tick = AFRAME.utils.throttleTick(this.tick.bind(this), 2000);
+    this.tick = AFRAME.utils.throttleTick(this.tick.bind(this), 1000);
+
+    this.progress = this.el.getObject3D('mesh').material.uniforms.progress;
     this.el.sceneEl.addEventListener('cleargame', () => {
       this.progress.value = 0;
     });
   },
 
   update: function (oldData) {
-    // Reset when changing song.
-    if (oldData.challengeId !== this.data.challengeId && this.progress) {
-      this.progress.value = 0;
-    }
+    this.progress.value = 0;
   },
 
-  play: function () {
-    this.context = this.el.sceneEl.components.song.context;
-    this.progress = this.el.getObject3D('mesh').material.uniforms.progress;
-  },
-
-  tick: function () {
-    if (!this.data.enabled) { return; }
-
+  updateRing: function () {
     const source = this.el.sceneEl.components.song.source;
     if (!source) { return; }
 
@@ -35,5 +26,10 @@ AFRAME.registerComponent('song-progress-ring', {
       this.el.sceneEl.components.song.getCurrentTime() /
       source.buffer.duration;
     this.progress.value = progress;
+  },
+
+  tick: function () {
+    if (!this.data.enabled) { return; }
+    this.updateRing();
   }
 });
diff --git a/src/templates/stage.html b/src/templates/stage.html
index 7e9b123..3f6e0d7 100644
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -134,8 +134,8 @@
 
   <a-entity
     id="songProgressRing"
-    bind__song-progress-ring="challengeId: challenge.id; enabled: isPlaying"
-    bind__visible="isPlaying"
+    bind__song-progress-ring="enabled: isPlaying && challenge.isBeatsPreloaded"
+    bind__visible="isPlaying && challenge.isBeatsPreloaded"
     geometry="primitive: plane; width: 0.1; height: 0.1"
     material="shader: ring; progress: 0; transparent: true; radiusInner: 0.5; color: #ABABAB"
     position="0 0.1 -1.5"