optimize menu pagination performance

2018-09-19 05:54:05 -07:00
parent 31d1fcdbac
commit 92a327694f
9 changed files with 112 additions and 55 deletions
--- a/src/components/active-color.js
+++ b/src/components/active-color.js
@@ -15,6 +15,7 @@ AFRAME.registerComponent('active-color', {

  update: function () {
    var el = this.el;
+
    if (this.data.active) {
      el.setAttribute('material', 'color', this.data.color);
      el.setAttribute('material', 'opacity', 1);
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -11,10 +11,14 @@ var algolia = client.initIndex('supersaber');
 AFRAME.registerComponent('search', {
  init: function() {
    this.eventDetail = {results: []};
-    this.queryObject = {hitsPerPage: 30, query: ''};
+    this.popularHits = null;
+    this.queryObject = {hitsPerPage: 100, query: ''};

    // Populate popular.
    this.search('');
+
+    // Less hits on normal searches.
+    this.queryObject.hitsPerPage = 30;
  },

  superkeyboardchange: bindEvent(function (evt) {
@@ -22,8 +26,17 @@ AFRAME.registerComponent('search', {
  }),

  search: function (query) {
+    // Use cached for popular hits.
+    if (!query && this.popularHits) {
+      this.eventDetail.results = popularHits;
+      this.el.sceneEl.emit('searchresults', this.eventDetail);
+      return;
+    }
+
    this.queryObject.query = query;
    algolia.search(this.queryObject, (err, content) => {
+      // Cache popular hits.
+      if (!query) { this.popularHits = content.hits; }
      this.eventDetail.results = content.hits;
      this.el.sceneEl.emit('searchresults', this.eventDetail);
    });
@@ -40,3 +53,28 @@ AFRAME.registerComponent('search-result-list', {
                         false);
  }),
 });
+
+AFRAME.registerComponent('search-result-image', {
+  dependencies: ['material'],
+
+  schema: {
+    id: {type: 'string'}
+  },
+
+  init: function () {
+    this.materialUpdateObj = {color: '#223'};
+
+    this.el.addEventListener('materialtextureloaded', () => {
+      this.el.setAttribute('material', 'color', '#FFF');
+    });
+  },
+
+  update: function () {
+    this.el.components.material.material.map = null;
+    this.el.components.material.material.needsUpdate = true;
+
+    this.materialUpdateObj.src =
+      `https://s3-us-west-2.amazonaws.com/supersaber/${this.data.id}-image.jpg`
+    this.el.setAttribute('material', this.materialUpdateObj);
+  },
+});
--- a/src/components/song-preview.js
+++ b/src/components/song-preview.js
@@ -74,7 +74,9 @@ AFRAME.registerComponent('song-preview-system', {
    if (this.audioStore[challengeId]) { return; }
    const audio = document.createElement('audio');
    audio.crossOrigin = 'anonymous';
-    audio.currentTime = previewStartTime;
+    audio.addEventListener('canplaythrough', () => {
+      audio.currentTime = previewStartTime;
+    }, false);
    audio.volume = 0;
    this.audioStore[challengeId] = audio;

--- a/src/components/song.js
+++ b/src/components/song.js
@@ -23,7 +23,9 @@ AFRAME.registerComponent('song', {
    // Changed challenge.
    if (data.challengeId !== oldData.challengeId) {
      let songUrl = utils.getS3FileUrl(data.challengeId, 'song.ogg');
-      this.audio.currentTime = 0;
+      this.audio.addEventListener('canplaythrough', () => {
+        this.audio.currentTime = 0;
+      }, false);
      this.audio.src = data.challengeId ? songUrl : '';
    }

--- a/src/index.html
+++ b/src/index.html
@@ -49,15 +49,15 @@
        <a-entity id="camera" position="0 1.6 0.5" camera look-controls wasd-controls></a-entity>
        <a-entity id="leftHand"
          saber-controls="hand: left"
-          proxy-event__pause="event: menudown; to: a-scene; as: pause"
-          proxy-event__pauserifta="event: abuttondown; to: a-scene; as: pause"
-          proxy-event__pauseriftb="event: bbuttondown; to: a-scene; as: pause"
+          proxy-event__pause="event: menudown; to: a-scene; as: pausegame"
+          proxy-event__pauserifta="event: abuttondown; to: a-scene; as: pausegame"
+          proxy-event__pauseriftb="event: bbuttondown; to: a-scene; as: pausegame"
          bind__saber-controls="bladeEnabled: !menu.active"></a-entity>
        <a-entity id="rightHand"
          saber-controls="hand: right"
-          proxy-event__pause="event: menudown; to: a-scene; as: pause"
-          proxy-event__pauseriftx="event: xbuttondown; to: a-scene; as: pause"
-          proxy-event__pauserifty="event: ybuttondown; to: a-scene; as: pause"
+          proxy-event__pause="event: menudown; to: a-scene; as: pausegame"
+          proxy-event__pauseriftx="event: xbuttondown; to: a-scene; as: pausegame"
+          proxy-event__pauserifty="event: ybuttondown; to: a-scene; as: pausegame"
          bind__saber-controls="bladeEnabled: !menu.active"
          bind__line="visible: menu.active"></a-entity>
      </a-entity>
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -83,7 +83,7 @@ AFRAME.registerState({
      state.menuSelectedChallenge.difficulty = difficulty;
    },

-    pause: (state) => {
+    pausegame: (state) => {
      state.menu.active = true;
    },

--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -1,11 +1,10 @@
 <!-- Macro is a templating function. It is rendered into the HTML below with searchResults(). -->
 {% macro searchResults () %}
  <a-entity id="searchResultList"
-            bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate"
+            bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate; updateInPlace: true"
            layout="type: box; columns: 1; marginRow: -0.2"
            search-result-list
-            position="0 0.644 0">
-  </a-entity>
+            position="0 0.644 0"></a-entity>

  <!-- TODO: Pagination icons. -->
  <a-mixin id="searchPageButton"
@@ -14,34 +13,62 @@
    mixin="slice"
    slice9="width: 0.5; height: 0.08; padding: 0.03"
    text="align: center; wrapCount: 40; zOffset: 0.001"></a-mixin>
+
  <a-entity id="searchPrevPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasPrev && menu.active" text="value: PREV" position="-0.05 0.65 0" proxy-event="event: click; to: a-scene; as: searchprevpage" bind__visible="search.hasPrev"></a-entity>
  <a-entity id="searchNextPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasNext && menu.active" text="value: NEXT" position="-0.05 -0.634 0" proxy-event="event: click; to: a-scene; as: searchnextpage" bind__visible="search.hasNext"></a-entity>
-
-  {% raw %}
-    <template id="searchResultTemplate">
-      <a-entity class="searchResult" data-id="{{ item.id }}" song-preview="challengeId: {{ item.id }}; previewStartTime: {{ item.previewStartTime }}">
-        <a-entity class="searchResultBackground"
-            bind__active-color="active: menuSelectedChallenge.id === '{{ item.id }}'"
-            bind__animation__mouseenter="enabled: menuSelectedChallenge.id !== '{{ item.id }}'"
-            bind__animation__mouseleave="enabled: menuSelectedChallenge.id !== '{{ item.id }}'"
-            geometry="primitive: plane; width: 1.1; height: 0.2"
-            material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
-            position="0 -0.13 -0.002"
-            play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
-            animation__mouseenter="property: components.material.material.opacity; from: 0.0; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
-            animation__mouseleave="property: components.material.material.opacity; from: 1.0; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
-            raycastable></a-entity>
-        <a-entity class="searchResultContent" position="0.125 -0.05 0">
-          <a-entity class="searchResultImage" geometry="primitive: plane; width: 0.2; height: 0.2" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.576 -0.08 0.001" visible="false" event-set__materialtextureloaded="visible: true"></a-entity>
-          <a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #333; wrapCount: 28; value: {{ item.shortSongName }}" position="0.064 -0.091 0" bind__visible="menuSelectedChallenge.id === '{{ item.id }}'"></a-entity>
-          <a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 28; value: {{ item.shortSongName }}" position="0.064 -0.091 0" bind__visible="menuSelectedChallenge.id !== '{{ item.id }}'"></a-entity>
-          <a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 42; align: left; color: #999; value: {{ item.shortSongSubName }}" position="0.064 -0.147 0"></a-entity>
-        </a-entity>
-      </a-entity>
-    </template>
-  {% endraw %}
 {% endmacro %}

+{% raw %}
+  <template id="searchResultTemplate">
+    <a-entity
+      class="searchResult"
+      bind-item__data-id="item.id"
+      bind-item__song-preview="challengeId: item.id; previewStartTime: item.previewStartTime">
+      <a-entity
+        class="searchResultBackground"
+        active-color
+        bind-item__active-color="active: menuSelectedChallenge.id === item.id"
+        bind-item__animation__mouseenter="enabled: menuSelectedChallenge.id !== item.id"
+        bind-item__animation__mouseleave="enabled: menuSelectedChallenge.id !== item.id"
+        bind-toggle__raycastable="menu.active"
+        geometry="primitive: plane; width: 1.1; height: 0.2"
+        material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
+        position="0 -0.13 -0.002"
+        play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
+        animation__mouseenter="property: components.material.material.opacity; from: 0.0; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
+        animation__mouseleave="property: components.material.material.opacity; from: 1.0; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-entity>
+      <a-entity class="searchResultContent" position="0.125 -0.05 0">
+        <a-entity
+          class="searchResultImage"
+          bind-item__search-result-image="id: item.id"
+          geometry="primitive: plane; width: 0.2; height: 0.2"
+          material="shader: flat"
+          position="-0.576 -0.08 0.001"></a-entity>
+        <a-entity
+          class="searchResultTitleActive"
+          mixin="textFont"
+          bind-item__text="value: item.shortSongName"
+          bind-visible="value: menuSelectedChallenge.id === item.id"
+          text="align: left; color: #333; wrapCount: 28"
+          position="0.064 -0.091 0"></a-entity>
+        <a-entity
+          class="searchResultTitle"
+          bind-item__text="value: item.shortSongName"
+          bind-visible="value: menuSelectedChallenge.id !== item.id"
+          mixin="textFont"
+          text="align: left; color: #FFF; wrapCount: 28"
+          position="0.064 -0.091 0"></a-entity>
+        <a-entity
+          class="searchResultAuthor"
+          mixin="textFont"
+          bind-item__text="value: item.shortSongSubName"
+          text="wrapCount: 42; align: left; color: #999"
+          position="0.064 -0.147 0"></a-entity>
+      </a-entity>
+    </a-entity>
+  </template>
+{% endraw %}
+
 <!-- Menu container begins here. -->
 <a-entity id="menu" bind__visible="menu.active" position="0 1.6 -2.3">
  <a-entity id="menuBackground"