menu selected challenge state

src/components/preview-song.js

@@ -0,0 +1,49 @@
+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) {
+    if (oldData.challengeId && !this.data.challengeId) {
+      if (this.animation) { this.animation.pause(); }
+      this.audio.pause();
+      this.audio.src = '';
+      return;
+    }
+
+    // Play preview.
+    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();
+  }
+});

src/components/search.js

@@ -1,6 +1,5 @@
 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');
@@ -34,56 +33,9 @@ AFRAME.registerComponent('search', {
 /**
  * Click listener for search result.
  */
-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.audio.volume = 0;
-    this.eventDetail = {};
-
-    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;
-      }
-    });
-  },
-
-  remove: function () {
-    if (this.animation) { this.animation.pause(); }
-    this.audio.pause();
-  },
-
-  /**
-   * Preview song.
-   */
-  mouseenter: bindEvent(function () {
-    this.audio.volume = 0;
-    this.volumeTarget.volume = 0;
-    this.audio.play();
-    this.animation.restart();
-  }),
-
-  mouseleave: bindEvent(function () {
-    if (this.animation) { this.animation.pause(); }
-    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);
+AFRAME.registerComponent('search-result-list', {
+  click: bindEvent(function (evt) {
+    this.el.sceneEl.emit('menuchallengeclick', evt.target.closest('.searchResult').dataset.id,
+                         false);
   }),
 });