From 16f30944f8f455fb4ac503a4b8777eee6ed96889 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Tue, 12 May 2015 09:58:03 -0400 Subject: [PATCH] update image sizes --- dashboard-ui/cordovaindex.html | 40 +++++ dashboard-ui/scripts/dashboardpage.js | 17 +- dashboard-ui/scripts/indexpage.js | 2 +- dashboard-ui/scripts/librarybrowser.js | 34 ++-- dashboard-ui/scripts/site.js | 47 ++--- dashboard-ui/scripts/tvrecommended.js | 4 +- .../thirdparty/jquery.unveil-custom.js | 167 +++++++++++++++++- 7 files changed, 260 insertions(+), 51 deletions(-) create mode 100644 dashboard-ui/cordovaindex.html diff --git a/dashboard-ui/cordovaindex.html b/dashboard-ui/cordovaindex.html new file mode 100644 index 0000000000..a9900cf18b --- /dev/null +++ b/dashboard-ui/cordovaindex.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + Emby + + + + + + \ No newline at end of file diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js index f6dc026364..0f7cd47462 100644 --- a/dashboard-ui/scripts/dashboardpage.js +++ b/dashboard-ui/scripts/dashboardpage.js @@ -590,10 +590,10 @@ getClientImage: function (connection) { var clientLowered = connection.Client.toLowerCase(); + var device = connection.DeviceName.toLowerCase(); - if (clientLowered == "dashboard" || clientLowered == "emby web client" || clientLowered == "emby mobile") { - var device = connection.DeviceName.toLowerCase(); + if (clientLowered == "dashboard" || clientLowered == "emby web client") { var imgUrl; @@ -615,6 +615,19 @@ return "Emby Web Client"; } + if (clientLowered == "emby mobile") { + + var imgUrl; + + if (device.indexOf('iphone') != -1 || device.indexOf('ipad') != -1) { + imgUrl = 'css/images/clients/ios.png'; + } + else { + imgUrl = 'css/images/clients/html5.png'; + } + + return "Emby Web Client"; + } if (clientLowered == "mb-classic") { return ""; diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js index c3b228dd59..65a47b5bae 100644 --- a/dashboard-ui/scripts/indexpage.js +++ b/dashboard-ui/scripts/indexpage.js @@ -282,7 +282,7 @@ items: result.Items, preferThumb: true, shape: 'backdrop', - overlayText: screenWidth >= 600 && !AppInfo.hasLowImageBandwidth, + overlayText: screenWidth >= 800 && !AppInfo.hasLowImageBandwidth, showTitle: true, showParentTitle: true, context: 'home', diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 6c8d0942dd..b51e69053d 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -1070,18 +1070,16 @@ var html = ""; - var primaryImageAspectRatio; + var primaryImageAspectRatio = LibraryBrowser.getAveragePrimaryImageAspectRatio(items); + var isThumbAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.777777778) < .3; + var isSquareAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1) < .33 || + primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.3333334) < .01; if (options.shape == 'auto' || options.shape == 'autohome') { - primaryImageAspectRatio = LibraryBrowser.getAveragePrimaryImageAspectRatio(items); - - if (primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.777777778) < .3) { + if (isThumbAspectRatio) { options.shape = options.shape == 'auto' ? 'backdrop' : 'backdrop'; - } else if (primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1) < .33) { - options.coverImage = true; - options.shape = 'square'; - } else if (primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.3333334) < .01) { + } else if (isSquareAspectRatio) { options.coverImage = true; options.shape = 'square'; } else if (primaryImageAspectRatio && primaryImageAspectRatio > 1.9) { @@ -1101,18 +1099,34 @@ var squareSize = posterInfo.squareSize; var bannerWidth = posterInfo.bannerWidth; + if (isThumbAspectRatio) { + posterInfo.smallPosterWidth = posterInfo.smallThumbWidth; + posterWidth = thumbWidth; + } + else if (isSquareAspectRatio) { + posterInfo.smallPosterWidth = posterInfo.smallSquareSize; + posterWidth = squareSize; + } + if (options.shape == 'backdrop' && posterInfo.defaultThumb == 'smallBackdrop') { options.shape = 'smallBackdrop'; - thumbWidth = posterInfo.smallThumbWidth; } else if (options.shape == 'portrait' && posterInfo.defaultPortait == 'smallPortrait') { options.shape = 'smallPortrait'; - posterWidth = posterInfo.smallPosterWidth; } else if (options.shape == 'square' && posterInfo.defaultSquare == 'smallSquare') { options.shape = 'smallSquare'; + } + + if (options.shape == 'smallBackdrop') { + thumbWidth = posterInfo.smallThumbWidth; + } + else if (options.shape == 'smallPortrait') { + posterWidth = posterInfo.smallPosterWidth; + } + else if (options.shape == 'smallSquare') { squareSize = posterInfo.smallSquareSize; } else if (options.shape == 'detailPagePortrait') { diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 39adfc2aaa..b838998872 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1373,7 +1373,7 @@ var Dashboard = { return quality; }, - normalizeImageOptions: function(options) { + normalizeImageOptions: function (options) { if (AppInfo.hasLowImageBandwidth) { @@ -1421,45 +1421,22 @@ var Dashboard = { if (Dashboard.isRunningInCordova()) { - if ($.browser.safari) { - - appName = "iOS"; - - if ($.browser.iphone) { - deviceName = 'iPhone'; - } else if ($.browser.ipad) { - deviceName = 'iPad'; - } - - } else { - - appName = "Android"; - - } + deviceName = store.getItem('cordovaDeviceName'); + deviceId = store.getItem('cordovaDeviceId'); } deviceName = deviceName || generateDeviceName(); - // Cordova - //if (window.device) { + var seed = []; + var keyName = 'randomId'; - // deviceName = device.model; - // deviceId = device.uuid; - - //} - //else - { - var seed = []; - var keyName = 'randomId'; - - if (Dashboard.isRunningInCordova()) { - seed.push('cordova'); - keyName = 'cordovaDeviceId'; - } - - deviceId = MediaBrowser.generateDeviceId(keyName, seed.join(',')); + if (Dashboard.isRunningInCordova()) { + seed.push('cordova'); + keyName = 'cordovaDeviceId'; } + deviceId = deviceId || MediaBrowser.generateDeviceId(keyName, seed.join(',')); + return { appName: appName, appVersion: appVersion, @@ -1468,8 +1445,8 @@ var Dashboard = { }; }, - loadSwipebox: function() { - + loadSwipebox: function () { + var deferred = DeferredBuilder.Deferred(); require([ diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js index 4961da8ae4..2015a1f654 100644 --- a/dashboard-ui/scripts/tvrecommended.js +++ b/dashboard-ui/scripts/tvrecommended.js @@ -69,6 +69,8 @@ var parentId = LibraryMenu.getTopParentId(); + var screenWidth = $(window).width(); + var limit = AppInfo.hasLowImageBandwidth ? 4 : 6; @@ -102,7 +104,7 @@ shape: "backdrop", showTitle: true, showParentTitle: true, - overlayText: true, + overlayText: screenWidth >= 800 && !AppInfo.hasLowImageBandwidth, lazy: true, context: 'tv' diff --git a/dashboard-ui/thirdparty/jquery.unveil-custom.js b/dashboard-ui/thirdparty/jquery.unveil-custom.js index 2631ccf7b7..69373172a0 100644 --- a/dashboard-ui/thirdparty/jquery.unveil-custom.js +++ b/dashboard-ui/thirdparty/jquery.unveil-custom.js @@ -285,6 +285,162 @@ } catch (err) { deferred.reject(); } + } else { + deferred.reject(); + } + }, false); + + // Send XHR + xhr.send(); + return deferred.promise(); + }; + + self.setImageInto = function (elem, url) { + + function onFail() { + setImageIntoElement(elem, url); + } + + openPromise.done(function () { + + self.getImageUrl(url).done(function (localUrl) { + + setImageIntoElement(elem, localUrl); + + }).fail(onFail); + + }).fail(onFail); + + }; + } + + function indexedDbBlobImageStore() { + + var self = this; + + var openPromise = openDb().done(function (db) { + + self._db = db; + }); + + self.addImageToDatabase = function (blob, key) { + + console.log("addImageToDatabase"); + + // Open a transaction to the database + var transaction = self.db().transaction([imagesStoreName], "readwrite"); + + // Put the blob into the dabase + var put = transaction.objectStore(imagesStoreName).put(blob, key); + }; + + self.revokeUrl = function (url) { + + // Get window.URL object + var URL = window.URL || window.webkitURL; + URL.revokeObjectURL(url); + }; + + self.db = function () { + + return self._db; + }; + + self.get = function (key) { + + var deferred = DeferredBuilder.Deferred(); + + var transaction = self.db().transaction([imagesStoreName], "readonly"); + + // Open a transaction to the database + var getRequest = transaction.objectStore(imagesStoreName).get(key); + + getRequest.onsuccess = function (event) { + + var imgFile = event.target.result; + + if (imgFile) { + + // Get window.URL object + var URL = window.URL || window.webkitURL; + + // Create and revoke ObjectURL + var imgUrl = URL.createObjectURL(imgFile); + + deferred.resolveWith(null, [imgUrl]); + } else { + deferred.reject(); + } + }; + + getRequest.onerror = function () { + deferred.reject(); + }; + + return deferred.promise(); + }; + + self.getImageUrl = function (originalUrl) { + + console.log('getImageUrl:' + originalUrl); + + var key = CryptoJS.SHA1(originalUrl + "1").toString(); + + var deferred = DeferredBuilder.Deferred(); + + self.get(key).done(function (url) { + + deferred.resolveWith(null, [url]); + + }).fail(function () { + + self.downloadImage(originalUrl, key).done(function () { + self.get(key).done(function (url) { + + deferred.resolveWith(null, [url]); + + }).fail(function () { + + deferred.reject(); + }); + }).fail(function () { + + deferred.reject(); + }); + }); + + return deferred.promise(); + }; + + self.downloadImage = function (url, key) { + + var deferred = DeferredBuilder.Deferred(); + + console.log('downloadImage:' + url); + + // Create XHR + var xhr = new XMLHttpRequest(); + + xhr.open("GET", url, true); + // Set the responseType to blob + xhr.responseType = "arraybuffer"; + + xhr.addEventListener("load", function () { + + if (xhr.status === 200) { + console.log("Image retrieved"); + + try { + var blob = new Blob([this.response], { type: this.getResponseHeader('content-type') }); + + // Put the received blob into IndexedDB + self.addImageToDatabase(blob, key); + deferred.resolve(); + } catch (err) { + deferred.reject(); + } + } else { + deferred.reject(); } }, false); @@ -319,9 +475,16 @@ self.setImageInto = setImageIntoElement; } - if ($.browser.safari && indexedDB) { + if ($.browser.safari && indexedDB && window.Blob) { + console.log('creating indexedDbBlobImageStore'); + window.ImageStore = new indexedDbBlobImageStore(); + } + else if ($.browser.safari && indexedDB) { + console.log('creating indexedDbImageStore'); window.ImageStore = new indexedDbImageStore(); - } else { + } + else { + console.log('creating simpleImageStore'); window.ImageStore = new simpleImageStore(); }