diff --git a/static/js/index.js b/static/js/index.js index 720d64f..6240fa5 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -117,7 +117,6 @@ function restoreUiAfterNaClLoad() { } function beginBackgroundPollingOfHost(host) { - host.warmBoxArtCache(); if (host.online) { $("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive'); // The host was already online. Just start polling in the background now. @@ -459,14 +458,11 @@ function showApps(host) { // double clicking the button will cause multiple box arts to appear. // to mitigate this we ensure we don't add a duplicate. // This isn't perfect: there's lots of RTTs before the logic prevents anything - var imageBlob = new Blob([resolvedPromise], {type: "image/png"}); - var outerDiv = $("
", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: URL.createObjectURL(imageBlob), role: 'link', tabindex: 0, title: app.title, 'aria-label': app.title }); - $(outerDiv).append($("", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id, name: app.title })); + var outerDiv = $("
", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: resolvedPromise, role: 'link', tabindex: 0, title: app.title, 'aria-label': app.title }); + $(outerDiv).append($("", {src: resolvedPromise, id: 'game-'+app.id, name: app.title })); $(outerDiv).append($("
", {class: "game-title", html: $("", {html: app.title} )})); $("#game-grid").append(outerDiv); - - // $("#gameList").append($("
", {html:$("", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id, name: app.title }), class: 'box-art mdl-cell mdl-cell--3-col'}).append($("", {html: app.title, class:"game-title"}))); $('#game-'+app.id).on('click', function () { startGame(host, app.id); }); diff --git a/static/js/utils.js b/static/js/utils.js index 566f6ac..e29022a 100644 --- a/static/js/utils.js +++ b/static/js/utils.js @@ -71,7 +71,6 @@ function NvHTTP(address, clientUid, userEnteredAddress = '') { this.serverMajorVersion = 0; this.appVersion = ''; this.clientUid = clientUid; - this._memCachedBoxArtArray = {}; this._pollCount = 0; this._consecutivePollFailures = 0; this.online = false; @@ -223,10 +222,6 @@ NvHTTP.prototype = { return string; }, - _prepareForStorage: function() { - this._memCachedBoxArtArray = {}; - }, - _parseServerInfo: function(xmlStr) { $xml = this._parseXML(xmlStr); $root = $xml.find('root'); @@ -354,77 +349,17 @@ NvHTTP.prototype = { return this.getAppListWithCacheFlush(); }, - // warms `this` _memCachedBoxArtArray with ALL box art from ALL servers - // this is inefficient, but works well. - warmBoxArtCache: function () { - if (!this.paired) { - console.log('%c[utils.js, warmBoxArtCache]', 'color: grey;', 'Not warming box art cache for unpaired host'); - return; - } - if (Object.keys(this._memCachedBoxArtArray).length != 0) { - console.log('%c[utils.js, warmBoxArtCache]', 'color: grey;', 'Box art cache already warmed'); - return; - } - if (chrome.storage) { - chrome.storage.local.get('boxArtCache', function(JSONCachedBoxArtArray) { - - var storedBoxArtArray; // load cached data if it exists - if (JSONCachedBoxArtArray.boxArtCache != undefined) { - storedBoxArtArray = JSONCachedBoxArtArray.boxArtCache; - for (var key in storedBoxArtArray) { - this._memCachedBoxArtArray[key] = _base64ToArrayBuffer(storedBoxArtArray[key]); - } - console.log('%c[utils.js, warmBoxArtCache]', 'color: grey;', 'Box art cache warmed'); - } else { - console.warn('%c[utils.js, warmBoxArtCache]', 'color: grey;', 'No box art found in storage. Cannot warm cache!'); - return; - } - }.bind(this)); - } - }, - // returns the box art of the given appID. // three layers of response time are possible: memory cached (in javascript), storage cached (in chrome.storage.local), and streamed (host sends binary over the network) getBoxArt: function (appId) { - - // TODO: unfortunately we do N lookups from storage cache, each of them filling up the memory cache. - // once the first round of calls are all made, each subsequent request hits this and returns from memory cache - if (this._memCachedBoxArtArray[appId] === null) { - // This means a previous box art request failed, don't try again - return new Promise(function (resolve, reject) { - console.error('%c[utils.js, utils.js, getBoxArt]', 'color: gray;', 'Returning cached box-art failure result') - reject(null); - return; - }.bind(this)); - } else if (this._memCachedBoxArtArray[appId] !== undefined) { - return new Promise(function (resolve, reject) { - console.log('%c[utils.js, utils.js, getBoxArt]', 'color: gray;', 'Returning memory-cached box-art'); - resolve(this._memCachedBoxArtArray[appId]); - return; - }.bind(this)); - } - if (chrome.storage) { // This may be bad practice to push/pull this much data through local storage? - return new Promise(function (resolve, reject) { - chrome.storage.local.get('boxArtCache', function(JSONCachedBoxArtArray) { - - var storedBoxArtArray; // load cached data if it exists - if (JSONCachedBoxArtArray.boxArtCache != undefined && JSONCachedBoxArtArray.boxArtCache[appId] != undefined) { - storedBoxArtArray = JSONCachedBoxArtArray.boxArtCache; - - storedBoxArtArray[appId] = _base64ToArrayBuffer(storedBoxArtArray[appId]); - this._memCachedBoxArtArray[appId] = storedBoxArtArray[appId]; - - } else { - storedBoxArtArray = {}; - } - + chrome.storage.local.get('boxart-'+appId, function(storageData) { // if we already have it, load it. - if (storedBoxArtArray[appId] !== undefined && Object.keys(storedBoxArtArray).length !== 0 && storedBoxArtArray[appId].constructor !== Object) { - console.log('%c[utils.js, getBoxArt]', 'color: gray;', 'Returning strage-cached box art for app: ', appId); - resolve(storedBoxArtArray[appId]); + if (storageData !== undefined && Object.keys(storageData).length !== 0 && storageData['boxart-'+appId].constructor !== Object) { + console.log('%c[utils.js, getBoxArt]', 'color: gray;', 'Returning storage-cached box art for app: ', appId); + resolve(storageData['boxart-'+appId]); return; } @@ -435,24 +370,17 @@ NvHTTP.prototype = { '&appid=' + appId + '&AssetType=2&AssetIdx=0', true - ]).then(function(streamedBoxArt) { - // the memcached data is global to all the async calls we're doing. This way there's only one array that holds everything properly. - this._memCachedBoxArtArray[appId] = streamedBoxArt; - var obj = {}; - var arrayToStore = {} - - for (key in this._memCachedBoxArtArray) { // convert the arraybuffer into a string - arrayToStore[key] = _arrayBufferToBase64(this._memCachedBoxArtArray[key]); + ]).then(function(boxArtBuffer) { + var reader = new FileReader(); + reader.onloadend = function() { + var obj = {}; + obj['boxart-'+appId] = this.result; + chrome.storage.local.set(obj, function(onSuccess) {}); + console.log('%c[utils.js, utils.js, getBoxArt]', 'color: gray;', 'Returning network-fetched box art'); + resolve(this.result); } - - obj['boxArtCache'] = arrayToStore; // storage is in JSON format. JSON does not support binary data. - chrome.storage.local.set(obj, function(onSuccess) {}); - console.log('%c[utils.js, utils.js, getBoxArt]', 'color: gray;', 'Returning streamed box art'); - resolve(streamedBoxArt); - return; + reader.readAsDataURL(new Blob([boxArtBuffer], {type: "image/png"})); }.bind(this), function(error) { - // Cache the failure but not persistently - this._memCachedBoxArtArray[appId] = null; console.error('%c[utils.js, utils.js, getBoxArt]', 'color: gray;', 'Box-art request failed!', error); reject(error); return;