successful merge menu thumbs

package-lock.json

@@ -153,6 +153,11 @@
       "resolved": "https://registry.npmjs.org/aframe-slice9-component/-/aframe-slice9-component-1.0.0.tgz",
       "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E="
     },
+    "aframe-state-component": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-6.1.0.tgz",
+      "integrity": "sha512-14lqMspSp5mZmbQLeRmJ70fd8G+xiYBBjm0vWl4di2nAcz1anxmuK/huKuup1h6qgs/hz69np71bSnsYSSKUgw=="
+    },
     "aframe-super-keyboard": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/aframe-super-keyboard/-/aframe-super-keyboard-2.0.2.tgz",

package.json

@@ -7,7 +7,6 @@
   },
   "dependencies": {
     "aframe-animation-component": "^5.1.2",
-    "aframe-atlas-uvs-component": "^2.0.0",
     "aframe-audioanalyser-component": "^4.0.1",
     "aframe-event-decorators": "^1.0.2",
     "aframe-event-set-component": "^4.0.1",
@@ -17,7 +16,7 @@
     "aframe-orbit-controls": "^1.2.0",
     "aframe-proxy-event-component": "^2.1.0",
     "aframe-slice9-component": "^1.0.0",
-    "aframe-state-component": "6.1.0",
+    "aframe-state-component": "^6.1.0",
     "aframe-super-keyboard": "2.0.2",
     "aframe-thumb-controls-component": "^1.1.0",
     "algoliasearch": "^3.29.0",

src/components/search-thumbnail-atlas.js

@@ -1,12 +1,32 @@
+var CANVAS_HEIGHT = 512;  // Power-of-two.
+var HEIGHT = 64;
+var NUM_PER_PAGE = 6;
+var WIDTH = 64;
+
+// Apply height factor since the images don't reach the power-of-two height, need to stretch.
+var HEIGHT_FACTOR = CANVAS_HEIGHT / (HEIGHT * NUM_PER_PAGE);
+
+/**
+ * Create thumbnail atlas for all the thumbnail images together per page.
+ */
 AFRAME.registerComponent('search-thumbnail-atlas', {
-  dependencies: ['dynamic-texture-atlas', 'geometry', 'material'],
+  dependencies: ['geometry', 'material'],
 
   schema: {
     dummyUpdater: {type: 'string'}
   },
 
   init: function () {
-    this.el.setAttribute('material', 'src', '#searchThumbnailImagesCanvas');
+    const canvas = this.canvas = document.createElement('canvas');
+    canvas.height = CANVAS_HEIGHT;  // Power-of-two.
+    canvas.width = WIDTH;
+
+    this.ctx = canvas.getContext('2d');
+    this.clearCanvas();
+
+    document.body.appendChild(canvas);
+    this.el.setAttribute('material', 'src', canvas);
+
     this.images = [];
   },
 
@@ -14,22 +34,39 @@ AFRAME.registerComponent('search-thumbnail-atlas', {
     var el = this.el;
     var data = this.data;
 
+    this.clearCanvas();
+
     const results = el.sceneEl.systems.state.state.searchResultsPage;
     for (let i = 0; i < results.length; i++) {
       let img = this.images[i] = this.images[i] || document.createElement('img');
       img.crossOrigin = 'anonymous';
-      img.src = results[i].image;
+      img.src = `https://s3-us-west-2.amazonaws.com/supersaber/${results[i].id}-image.jpg`;
       if (img.complete) {
-        this.el.components['dynamic-texture-atlas'].drawTexture(img, i, 1);
+        this.draw(img, i);
       } else {
-        img.onload = (function (i) {
+        img.onload = () => {
-          return () => {
+          this.draw(img, i);
-            this.el.components['dynamic-texture-atlas'].drawTexture(img, i, 1);
+        };
-          };
-        })(i);
       }
     }
+  },
 
+  /**
+   * Draw thumbnail on canvas at row i.
+   */
+  draw: function (img, i) {
+    this.ctx.drawImage(
+      img,
+      0,
+      i * HEIGHT * HEIGHT_FACTOR,
+      WIDTH,
+      HEIGHT * HEIGHT_FACTOR);
     this.el.getObject3D('mesh').material.map.needsUpdate = true;
+  },
+
+  clearCanvas: function () {
+    const canvas = this.canvas;
+    this.ctx.fillStyle = '#111';
+    this.ctx.fillRect(0, 0, canvas.width, canvas.height);
   }
 });

src/components/search.js

@@ -54,31 +54,6 @@ AFRAME.registerComponent('search-result-list', {
   }),
 });
 
-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);
-  },
-});
-
 AFRAME.registerComponent('search-song-name-selected', {
   schema: {
     anchor: {default: 0},

src/templates/menu.html

@@ -25,10 +25,10 @@
   <a-entity
     id="searchThumbnailImages"
     bind__search-thumbnail-atlas="dummyUpdater: search.songSubNameTexts"
-    geometry="primitive: plane; buffer: false; width: 0.2; height: 0.12"
+    geometry="primitive: plane; buffer: false; width: 0.2; height: 1.2"
-    dynamic-texture-atlas="canvasId: searchThumbnailImagesCanvas; canvasWidth: 64; canvasHeight: 512; numColumns: 1; numRows: 6"
+    dynamic-texture-atlas="canvasId: searchThumbnailImagesCanvas; canvasWidth: 64; canvasHeight: 512; numColumns: 1; numRows: 6; debug: true"
     material="shader: flat"
-    position="-0.45 -0.13 0.001"></a-entity>
+    position="-0.45 0.015 0.001"></a-entity>
 
   <a-entity
     id="searchSongNameTextSelected"
@@ -213,7 +213,7 @@
 <a-entity
   id="keyboard"
   bind__super-keyboard="show: keyboardActive"
-  super-keyboard="label: Search from over 2500 songs!; width: 1; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false"
+  super-keyboard="label: Search from over 2500 songs!; labelColor: #FAFAFA; width: 1; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false"
   position="0 0.8 -1"
   rotation="-40 0 0"
   keyboard-raycastable