juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize menu pagination performance

Browse Source
This commit is contained in:
Kevin Ngo
2018-09-19 05:54:05 -07:00
parent 31d1fcdbac
commit 92a327694f
9 changed files with 112 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
package-lock.json generated
View File

@@ -81,14 +81,6 @@
"webvr-polyfill": "^0.10.5"
}
},
"aframe-animation-component": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-5.1.0.tgz",
"integrity": "sha512-8IP5V2TDReAu5RPhg7t1gMidz/FQZMvvEwxw0xDxrgOCPBBlpFd5rGpW06CaJI+7Enu/PpZGIkImjYwto8tT9A==",
"requires": {
"animejs": "2.2.0"
}
},
"aframe-animation-timeline-component": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/aframe-animation-timeline-component/-/aframe-animation-timeline-component-1.5.0.tgz",
@@ -154,9 +146,9 @@
"integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E="
},
"aframe-state-component": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-4.6.0.tgz",
"integrity": "sha512-sth2BuNuw1Z7wb4HclkD3EJDJ5cYDFOkKCPobih63kw+L8ulhx0G1qEcCMg5JFEvK/Xn7SwpJMKfhJHMlGypMg=="
"version": "5.0.0-beta2",
"resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-5.0.0-beta2.tgz",
"integrity": "sha512-Ioz179I49pfew4a3cHpr31q00QfQW9cSI6uni2kwqfgSlO8FsDR91HtQamzJbGVLGPCHYAYqBvPy+A9fvQaVzg=="
},
"aframe-super-keyboard": {
"version": "2.0.2",
@@ -285,11 +277,6 @@
"resolved": "https://registry.npmjs.org/an-array/-/an-array-1.0.0.tgz",
"integrity": "sha1-wSWlu4JXd4419LT2qpx9D6nkJmU="
},
"animejs": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/animejs/-/animejs-2.2.0.tgz",
"integrity": "sha1-Ne79/FNbgZScnLBvCz5gwC5v3IA="
},
"ansi-escapes": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",

4
package.json
View File

@@ -6,7 +6,7 @@
"start": "webpack-dev-server --host 0.0.0.0 --progress --colors --hot --inline --port 3000"
},
"dependencies": {
"aframe-animation-component": "^5.1.0",
"aframe-animation-component": "^5.1.1",
"aframe-animation-timeline-component": "^1.3.1",
"aframe-audioanalyser-component": "^3.0.3",
"aframe-cubemap-component": "^0.1.2",
@@ -19,7 +19,7 @@
"aframe-particle-system-component": "^1.0.11",
"aframe-proxy-event-component": "^1.1.1",
"aframe-slice9-component": "^1.0.0",
"aframe-state-component": "^4.6.0",
"aframe-state-component": "^5.0.0-beta2",
"aframe-super-keyboard": "2.0.2",
"algoliasearch": "^3.29.0",
"ansi-html": "0.0.7",

1
src/components/active-color.js
View File

@@ -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);

40
src/components/search.js
View File

@@ -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);
},
});

4
src/components/song-preview.js
View File

@@ -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;

4
src/components/song.js
View File

@@ -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 : '';
}

12
src/index.html
View File

@@ -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>

2
src/state/index.js
View File

@@ -83,7 +83,7 @@ AFRAME.registerState({
state.menuSelectedChallenge.difficulty = difficulty;
},
pause: (state) => {
pausegame: (state) => {
state.menu.active = true;
},

81
src/templates/menu.html
View File

@@ -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"