search results and audio previews

src/components/beat-loader.js

@@ -0,0 +1,55 @@
+var utils = require('../utils');
+
+/**
+ * Load beat data (all the beats and such).
+ */
+AFRAME.registerComponent('beat-loader', {
+  schema: {
+    challengeId: {type: 'string'},
+    difficulty: {type: 'string'}
+  },
+
+  update: function () {
+    var challengeId = this.data.challengeId;
+    var el = this.el;
+    var xhr;
+
+    if (!challengeId || !diffjculty) { return; }
+
+    // Load beats.
+    xhr = new XMLHttpRequest();
+    el.emit('beatloaderstart');
+    xhr.open('GET', utils.getS3FileUrl(challengeId, `${this.data.difficulty}.json`));
+    xhr.addEventListener('load', () => {
+      this.handleBeats(JSON.parse(xhr.responseText));
+    });
+    xhr.send();
+  },
+
+  /**
+   * TODO: Load the beat data into the game.
+   */
+  handleBeats: function (beatData) {
+    var el = this.el;
+
+    history.pushState(
+      '',
+      challenge.songName,
+      updateQueryParam(window.location.href, 'challenge', this.data.challengeId)
+    );
+
+    document.title = `Super Saber - ${challenge.songName}`;
+    el.emit('beatloaderfinish');
+    console.log('Finished loading challenge data.');
+  },
+});
+
+function updateQueryParam(uri, key, value) {
+  var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+  var separator = uri.indexOf('?') !== -1 ? '&' : '?';
+  if (uri.match(re)) {
+    return uri.replace(re, '$1' + key + '=' + value + '$2');
+  } else {
+    return uri + separator + key + '=' + value;
+  }
+}

src/components/challenge-loader.js

@@ -1,57 +0,0 @@
-AFRAME.registerComponent('song-loader', {
-  schema: {
-    challengeId: {type: 'string'},
-  },
-
-  update: async function () {
-    var challengeId = this.data.challengeId;
-    var frameSystem = this.el.systems.frames;
-    var punchSystem = this.el.systems.punches;
-
-    if (!challengeId) {
-      return;
-    }
-
-    const firstClient = new Client({ query: { id: challengeId } });
-    const resp = await firstClient.challengeById(challengeId);
-    const challenge = resp.performance;
-    const auth = firstClient.serialize();
-
-    const client = new Client({ auth });
-    this.el.emit('challengeloadstart');
-
-    console.log('Loading punches...');
-    this.el.emit('challengeloadingpunches');
-    const punches = await client.challengePunches(challenge);
-
-    console.log('Loading frames...');
-    this.el.emit('challengeloadingframes');
-    const frames = await client.challengeFrames(challenge);
-
-    history.pushState(
-      '',
-      challenge.song_name,
-      updateQueryParam(window.location.href, 'challenge', this.data.challengeId)
-    );
-
-    document.title = `Soundboxing - ${challenge.song_name}`;
-    this.el.emit('challengeloaded', {
-      frames: frames,
-      punches: punches,
-      title: challenge.song_name,
-      videoId: challenge.youtube_id,
-    });
-
-    console.log('Finished loading challenge data.');
-  },
-});
-
-function updateQueryParam(uri, key, value) {
-  var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
-  var separator = uri.indexOf('?') !== -1 ? '&' : '?';
-  if (uri.match(re)) {
-    return uri.replace(re, '$1' + key + '=' + value + '$2');
-  } else {
-    return uri + separator + key + '=' + value;
-  }
-}

src/components/search.js

@@ -1,4 +1,6 @@
 var algoliasearch = require('algoliasearch/lite');
+var bindEvent = require('aframe-event-decorators').bindEvent;
+var utils = require('../utils');
 
 var client = algoliasearch('QULTOY3ZWU', 'be07164192471df7e97e6fa70c1d041d');
 var index = client.initIndex('supersaber');
@@ -19,7 +21,6 @@ AFRAME.registerComponent('search', {
     this.queryObject.query = query;
     index.search(this.queryObject, (err, content) => {
       this.eventDetail.results = content.hits;
-      console.log(content.hits);
       this.el.sceneEl.emit('searchresults', this.eventDetail);
     });
   }
@@ -31,12 +32,33 @@ AFRAME.registerComponent('search', {
 AFRAME.registerComponent('search-result', {
   init: function() {
     var el = this.el;
-
+    this.audio = new Audio();
+    this.audio.currentTime = el.getAttribute('data-preview-start-time');
+    this.audio.src = utils.getS3FileUrl(el.getAttribute('data-id'), 'song.ogg');
     this.eventDetail = {};
-    el.addEventListener('click', () => {
-      this.eventDetail.challengeId = el.getAttribute('data-song-id');
-      this.eventDetail.title = el.getAttribute('data-title');
-      el.sceneEl.emit('challengeset', this.eventDetail);
-    });
   },
+
+  remove: function () {
+    this.audio.pause();
+  },
+
+  /**
+   * Preview song.
+   */
+  mouseenter: bindEvent(function () {
+    this.audio.play();
+  }),
+
+  mouseleave: bindEvent(function () {
+    this.audio.pause();
+  }),
+
+  click: bindEvent(function () {
+    var el = this.el;
+    this.eventDetail.id = el.getAttribute('data-id');
+    this.eventDetail.title = el.getAttribute('data-title');
+
+    // Tell application we are starting a challenge and initiate beat-loader.
+    el.sceneEl.emit('challengeset', this.eventDetail);
+  }),
 });