Revert "fix song preview time leaking into sync, don't use song current time until beat preload finish"

This reverts commit 7f1cdec783.

src/components/beat-loader.js

@@ -67,10 +67,9 @@ AFRAME.registerComponent('beat-loader', {
     this.beatDataProcessed = false;
     this.beatContainer = document.getElementById('beatContainer');
     this.beatsTime = undefined;
-    this.beatsPreloadTime = 0;
-    this.beatsPreloadTimeTotal =
-      (this.data.beatAnticipationTime + this.data.beatWarmupTime) * 1000;
+    this.beatsTimeOffset = undefined;
     this.bpm = undefined;
+    this.songCurrentTime = undefined;
     this.xhr = null;
     this.stageColors = this.el.components['stage-colors'];
     this.twister = document.getElementById('twister');
@@ -129,8 +128,8 @@ AFRAME.registerComponent('beat-loader', {
   processBeats: function () {
     // Reset variables used during playback.
     // Beats spawn ahead of the song and get to the user in sync with the music.
+    this.beatsTimeOffset = (this.data.beatAnticipationTime + this.data.beatWarmupTime) * 1000;
     this.beatsTime = 0;
-    this.beatsPreloadTime = 0;
     this.beatData._events.sort(lessThan);
     this.beatData._obstacles.sort(lessThan);
     this.beatData._notes.sort(lessThan);
@@ -152,62 +151,60 @@ AFRAME.registerComponent('beat-loader', {
    * Generate beats and stuff according to timestamp.
    */
   tick: function (time, delta) {
+    var i;
+    var noteTime;
+
     if (!this.data.isPlaying || !this.data.challengeId || !this.beatData) { return; }
 
-    const prevBeatsTime = this.beatsTime;
-    if (this.beatsPreloadTime === undefined) {
-      // Get current song time.
-      const song = this.el.components.song;
-      if (!song.isPlaying) { return; }
-      this.beatsTime = (song.getCurrentTime() + this.data.beatAnticipationTime) * 1000;
-      if (this.beatsTime <= this.beatsPreloadTimeTotal) { return; }
-    } else {
-      // Song is not playing and is preloading beats, use maintained beat time.
-      this.beatsTime = this.beatsPreloadTime;
+    // Re-sync song with beats playback.
+    const songComponent = this.el.components.song;
+    const currentTime = songComponent.getCurrentTime();
+
+    if (songComponent.songStartTime && this.beatsTimeOffset !== undefined &&
+        this.songCurrentTime !== currentTime) {
+      this.songCurrentTime = currentTime;
+      this.beatsTime = (this.songCurrentTime + this.data.beatAnticipationTime) * 1000;
     }
 
-    // Load in stuff scheduled between the last timestamp and current timestamp.
-    // Beats.
     const beatsTime = this.beatsTime;
     const bpm = this.beatData._beatsPerMinute;
     const msPerBeat = 1000 * 60 / this.beatData._beatsPerMinute;
     const notes = this.beatData._notes;
-    for (let i = 0; i < notes.length; ++i) {
-      let noteTime = notes[i]._time * msPerBeat;
-      if (noteTime > prevBeatsTime && noteTime <= beatsTime) {
+    for (i = 0; i < notes.length; ++i) {
+      noteTime = notes[i]._time * msPerBeat;
+      if (noteTime > beatsTime && noteTime <= (beatsTime + delta)) {
         notes[i].time = noteTime;
         this.generateBeat(notes[i]);
       }
     }
 
-    // Walls.
     const obstacles = this.beatData._obstacles;
-    for (let i = 0; i < obstacles.length; ++i) {
-      let noteTime = obstacles[i]._time * msPerBeat;
-      if (noteTime > prevBeatsTime && noteTime <= beatsTime) {
+    for (i=0; i < obstacles.length; ++i) {
+      noteTime = obstacles[i]._time * msPerBeat;
+      if (noteTime > beatsTime && noteTime <= beatsTime + delta) {
         this.generateWall(obstacles[i]);
       }
     }
 
-    // Stage events.
     const events = this.beatData._events;
-    for (let i = 0; i < events.length; ++i) {
-      let noteTime = events[i]._time * msPerBeat;
-      if (noteTime > prevBeatsTime && noteTime <= beatsTime) {
+    for (i=0; i < events.length; ++i) {
+      noteTime = events[i]._time * msPerBeat;
+      if (noteTime > beatsTime && noteTime <= beatsTime + delta) {
         this.generateEvent(events[i]);
       }
     }
 
-    if (this.beatsPreloadTime === undefined) { return; }
-
-    if (this.beatsPreloadTime >= this.beatsPreloadTimeTotal) {
-      // Finished preload.
-      this.el.sceneEl.emit('beatloaderpreloadfinish', null, false);
-      this.beatsPreloadTime = undefined;
-    } else {
-      // Continue preload.
-      this.beatsPreloadTime += delta;
+    if (this.beatsTimeOffset !== undefined) {
+      if (this.beatsTimeOffset <= 0) {
+        this.el.sceneEl.emit('beatloaderpreloadfinish', null, false);
+        this.songCurrentTime = this.el.components.song.context.currentTime;
+        this.beatsTimeOffset = undefined;
+      } else {
+        this.beatsTimeOffset -= delta;
+      }
     }
+
+    this.beatsTime = beatsTime + delta;
   },
 
   generateBeat: (function () {
@@ -324,8 +321,8 @@ AFRAME.registerComponent('beat-loader', {
    * Restart by returning all beats to pool.
    */
   clearBeats: function () {
-    this.beatsPreloadTime = 0;
     this.beatsTime = 0;
+    this.beatsTimeOffset = (this.data.beatAnticipationTime + this.data.beatWarmupTime) * 1000;
     for (let i = 0; i < this.beatContainer.children.length; i++) {
       let child = this.beatContainer.children[i];
       if (child.components.beat) {

src/components/debug-song-time.js

@@ -1,13 +0,0 @@
-/**
- * Emit events from query parameter to state to automatically set up state.
- */
-AFRAME.registerComponent('debug-song-time', {
-  dependencies: ['song'],
-
-  init: function () {
-    if (!AFRAME.utils.getUrlParameter('debug-song-time')) { return; }
-    setInterval(() => {
-      console.log(this.el.components.song.getCurrentTime());
-    }, 250);
-  }
-});

src/components/song.js

@@ -31,7 +31,6 @@ AFRAME.registerComponent('song', {
     this.analyserSetter = {buffer: true};
     this.audioAnalyser = this.data.analyserEl.components.audioanalyser;
     this.context = this.audioAnalyser.context;
-    this.isPlaying = false;
     this.songLoadingIndicator = document.getElementById('songLoadingIndicator');
     this.songStartTime = 0;
 
@@ -111,8 +110,6 @@ AFRAME.registerComponent('song', {
 
   getAudio: function () {
     const data = this.data;
-
-    this.isPlaying = false;
     return new Promise(resolve => {
       data.analyserEl.addEventListener('audioanalyserbuffersource', evt => {
         // Finished decoding.
@@ -143,7 +140,6 @@ AFRAME.registerComponent('song', {
     this.source.stop();
     this.source.disconnect();
     this.source = null;
-    this.isPlaying = false;
   },
 
   victory: function () {
@@ -160,8 +156,6 @@ AFRAME.registerComponent('song', {
   },
 
   onGameOver: function () {
-    this.isPlaying = false;
-
     // Playback rate.
     const playbackRate = this.source.playbackRate;
     playbackRate.setValueAtTime(playbackRate.value, this.context.currentTime);
@@ -179,8 +173,6 @@ AFRAME.registerComponent('song', {
   },
 
   onRestart: function () {
-    this.isPlaying = false;
-
     // Restart, get new buffer source node and play.
     if (this.source) { this.source.disconnect(); }
 
@@ -211,7 +203,6 @@ AFRAME.registerComponent('song', {
     this.songStartTime = this.context.currentTime;
     this.source.onended = this.victory;
     this.source.start();
-    this.isPlaying = true;
   },
 
   getCurrentTime: function () {

src/index.html

@@ -27,7 +27,6 @@
       console-shortcuts
       debug-beat-loader
       debug-controller
-      debug-song-time
       debug-state
       effect-bloom="strength: 1"
       gpu-preloader