rework library buttons

dashboard-ui/css/card.css

@@ -39,10 +39,8 @@
         text-overflow: ellipsis;
     }
 
-.smallBackdropPosterItem .cardOverlayInner > div {
+.buttonCard:hover .cardBox {
-    white-space: nowrap;
+    opacity: .6;
-    text-overflow: ellipsis;
-    overflow: hidden;
 }
 
 .cardBox {
@@ -233,10 +231,10 @@
     height: 100%;
 }
 
-.cardImage canvas {
+    .cardImage canvas {
-    width: 100%;
+        width: 100%;
-    height: 100%;
+        height: 100%;
-}
+    }
 
 .coveredCardImage {
     background-size: cover;

dashboard-ui/css/nowplaying.css

@@ -42,6 +42,12 @@
     white-space: nowrap;
 }
 
+.smallBackdropPosterItem .cardOverlayInner > div {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
 .chapterPosterItem {
     width: 240px!important;
     cursor: pointer;

dashboard-ui/css/tileitem.css

@@ -405,145 +405,4 @@
     padding: 5px 4px 4px;
     text-shadow: none;
     font-weight: 400;
-}
+}
-
-.posterItemImage {
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center bottom;
-    background-color: #000;
-    position: relative;
-}
-
-.myLibraryPosterItem {
-    width: 42%;
-    min-width: 50px;
-}
-
-    .myLibraryPosterItem .posterItemImage {
-        height: 34px;
-        background-position: 9px center;
-        background-size: 14px 14px;
-        background-color: rgba(51, 136, 204, 0.7);
-        background-color: rgba(82, 181, 75, 0.7);
-    }
-
-    .myLibraryPosterItem .posterItemText {
-        top: 0;
-        left: 0;
-        line-height: 34px;
-        text-align: left;
-        padding: 0 0 0 12px;
-        position: absolute;
-    }
-
-    .myLibraryPosterItem i {
-        margin-right: 10px;
-    }
-
-.moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage {
-    background-color: rgba(176, 94, 81, 0.7);
-}
-
-.musicPosterItem .posterItemImage {
-    background-color: rgba(217, 145, 67, 0.7);
-}
-
-.tvshowsPosterItem .posterItemImage {
-    background-color: rgba(77, 88, 164, 0.7);
-}
-
-.gamesPosterItem .posterItemImage {
-    background-color: rgba(183, 202, 72, 0.7);
-}
-
-.channelsPosterItem .posterItemImage {
-    background-color: rgba(51, 136, 204, 0.7);
-}
-
-.livetvPosterItem .posterItemImage {
-    background-color: rgba(255, 233, 127, 0.7);
-}
-
-.homevideosPosterItem .posterItemImage {
-    background-color: rgba(110, 52, 32, 0.7);
-}
-
-.photosPosterItem .posterItemImage {
-    background-color: rgba(127, 0, 0, 0.7);
-}
-
-.musicvideosPosterItem .posterItemImage {
-    background-color: rgba(143, 54, 168, 0.7);
-}
-
-@media all and (min-width: 600px) {
-
-    .myLibraryPosterItem {
-        width: 31%;
-        /* Specify a min width just in case the container doesn't have a width */
-        min-width: 160px;
-    }
-}
-
-@media all and (min-width: 800px) {
-
-    .myLibraryPosterItem {
-        width: 32%;
-        /* Specify a min width just in case the container doesn't have a width */
-        min-width: 160px;
-    }
-}
-
-@media all and (min-width: 1000px) {
-
-    .myLibraryPosterItem {
-        width: 23.5%;
-        /* Specify a min width just in case the container doesn't have a width */
-        min-width: 220px;
-    }
-}
-
-@media all and (min-width: 1200px) {
-
-    .myLibraryPosterItem {
-        width: 24.0%;
-    }
-}
-
-@media all and (min-width: 1440px) {
-
-    .myLibraryPosterItem {
-        width: 19.0%;
-        /* Specify a min width just in case the container doesn't have a width */
-        min-width: 220px;
-    }
-}
-
-@media all and (min-width: 1600px) {
-
-    .myLibraryPosterItem {
-        width: 15.5%;
-    }
-}
-
-@media all and (min-width: 1700px) {
-
-    .myLibraryPosterItem {
-        width: 16%;
-    }
-}
-
-@media all and (min-width: 2000px) {
-
-    .myLibraryPosterItem {
-        width: 13.5%;
-    }
-}
-
-@media all and (min-width: 2300px) {
-
-    .myLibraryPosterItem {
-        width: 13.8%;
-    }
-}

dashboard-ui/scripts/indexpage.js

@@ -26,38 +26,51 @@
             var item = items[i];
 
             var icon;
+            var backgroundColor = 'rgba(82, 181, 75, 0.7)';
 
             switch (item.CollectionType) {
                 case "movies":
                     icon = "fa-film";
+                    backgroundColor = 'rgba(176, 94, 81, 0.7)';
                     break;
                 case "music":
                     icon = "fa-music";
+                    backgroundColor = 'rgba(217, 145, 67, 0.7)';
                     break;
                 case "photos":
                     icon = "fa-photo";
+                    backgroundColor = 'rgba(127, 0, 0, 0.7)';
                     break;
                 case "livetv":
+                    icon = "fa-video-camera";
+                    backgroundColor = 'rgba(255, 233, 127, 0.7)';
+                    break;
                 case "tvshows":
                     icon = "fa-video-camera";
+                    backgroundColor = 'rgba(77, 88, 164, 0.7)';
                     break;
                 case "games":
                     icon = "fa-gamepad";
+                    backgroundColor = 'rgba(183, 202, 72, 0.7)';
                     break;
                 case "trailers":
                     icon = "fa-film";
+                    backgroundColor = 'rgba(176, 94, 81, 0.7)';
                     break;
                 case "homevideos":
                     icon = "fa-video-camera";
+                    backgroundColor = 'rgba(110, 52, 32, 0.7)';
                     break;
                 case "musicvideos":
                     icon = "fa-video-camera";
+                    backgroundColor = 'rgba(143, 54, 168, 0.7)';
                     break;
                 case "books":
                     icon = "fa-book";
                     break;
                 case "channels":
                     icon = "fa-globe";
+                    backgroundColor = 'rgba(51, 136, 204, 0.7)';
                     break;
                 case "playlists":
                     icon = "fa-list";
@@ -67,25 +80,22 @@
                     break;
             }
 
-            var cssClass = "posterItem";
+            var cssClass = 'card smallBackdropCard buttonCard';
-            cssClass += ' ' + options.shape + 'PosterItem';
 
             if (item.CollectionType) {
-                cssClass += ' ' + item.CollectionType + 'PosterItem';
+                cssClass += ' ' + item.CollectionType + 'buttonCard';
             }
 
             var href = item.url || LibraryBrowser.getHref(item, options.context);
 
             html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
+            html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
 
-            var imageCssClass = '';
+            html += "<div class='cardText' style='padding:5px 10px;color:#fff;'>";
-
-            html += '<div class="posterItemImage ' + imageCssClass + '">';
-            html += '</div>';
-
-            html += "<div class='posterItemDefaultText posterItemText'>";
             html += '<i class="fa ' + icon + '"></i>';
-            html += '<span>' + item.Name + '</span>';
+            html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
+            html += "</div>";
+
             html += "</div>";
 
             html += "</a>";
@@ -106,7 +116,6 @@
             html += '<div>';
             html += createMediaLinks({
                 items: items,
-                shape: 'myLibrary',
                 showTitle: true,
                 centerText: true
 

dashboard-ui/scripts/librarybrowser.js

@@ -949,42 +949,61 @@
             
             var screenWidth = $(window).width();
 
-            if (!AppInfo.isTouchPreferred) {
-                screenWidth = window.screen.availWidth;
-            }
-
             return screenWidth;
         },
 
-        getPostersPerRow: function () {
+        getPostersPerRow: function (screenWidth) {
-
-            var screenWidth = LibraryBrowser.screenWidth();
 
             var div = $('<div class="card squareCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
             var square = screenWidth / $('.cardImage', div).innerWidth();
             div.remove();
 
-            div = $('<div class="card backdropCard">><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
+            div = $('<div class="card backdropCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
             var thumb = screenWidth / $('.cardImage', div).innerWidth();
             div.remove();
 
-            div = $('<div class="card portraitCard">><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
+            div = $('<div class="card portraitCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
             var poster = screenWidth / $('.cardImage', div).innerWidth();
             div.remove();
 
+            div = $('<div class="card bannerCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
+            var banner = screenWidth / $('.cardImage', div).innerWidth();
+            div.remove();
+
             return {
                 thumb: thumb,
                 poster: poster,
-                square: square
+                square: square,
+                banner: banner
             };
         },
 
-        getPosterViewSizes: function () {
+        posterSizes: [],
 
-            var imagesPerRow = LibraryBrowser.getPostersPerRow();
+        getPosterViewInfo: function () {
 
             var screenWidth = LibraryBrowser.screenWidth();
 
+            var cachedResults = LibraryBrowser.posterSizes;
+
+            for (var i = 0, length = cachedResults.length; i < length; i++) {
+                
+                if (cachedResults[i].screenWidth == screenWidth) {
+                    return cachedResults[i];
+                }
+            }
+
+            var result = LibraryBrowser.getPosterViewInfoInternal(screenWidth);
+
+            cachedResults.push(result);
+
+            return result;
+        },
+
+        getPosterViewInfoInternal: function (screenWidth) {
+
+            var imagesPerRow = LibraryBrowser.getPostersPerRow(screenWidth);
+
             if (AppInfo.hasLowImageBandwidth) {
                 screenWidth *= .95;
             } else {
@@ -994,11 +1013,28 @@
             var thumbWidth = screenWidth / imagesPerRow.thumb;
             var posterWidth = screenWidth / imagesPerRow.poster;
             var squareSize = screenWidth / imagesPerRow.square;
+            var bannerWidth = screenWidth / imagesPerRow.banner;
+
+            if (!AppInfo.isTouchPreferred) {
+
+                var roundTo = 100;
+
+                thumbWidth = Math.round(thumbWidth / roundTo) * roundTo;
+                posterWidth = Math.round(posterWidth / roundTo) * roundTo;
+                squareSize = Math.round(squareSize / roundTo) * roundTo;
+                bannerWidth = Math.round(bannerWidth / roundTo) * roundTo;
+            }
+
+            var defaultPortait = 'portrait';
+            var defaultThumb = 'backdrop';
+            var defaultSquare = 'square';
 
             return {
-                thumbWidth: parseInt(thumbWidth),
+                thumbWidth: Math.round(thumbWidth),
-                posterWidth: parseInt(posterWidth),
+                posterWidth: Math.round(posterWidth),
-                squareSize: parseInt(squareSize)
+                squareSize: Math.round(squareSize),
+                bannerWidth: Math.round(bannerWidth),
+                screenWidth: screenWidth
             };
         },
 
@@ -1035,11 +1071,12 @@
                 }
             }
 
-            var sizes = LibraryBrowser.getPosterViewSizes();
+            var sizes = LibraryBrowser.getPosterViewInfo();
 
             var thumbWidth = sizes.thumbWidth;
             var posterWidth = sizes.posterWidth;
             var squareSize = sizes.squareSize;
+            var bannerWidth = sizes.bannerWidth;
 
             for (var i = 0, length = items.length; i < length; i++) {
 
@@ -1153,7 +1190,7 @@
 
                     imgUrl = ApiClient.getScaledImageUrl(item.Id, {
                         type: "Banner",
-                        maxWidth: 700,
+                        maxWidth: bannerWidth,
                         tag: item.ImageTags.Banner,
                         enableImageEnhancers: enableImageEnhancers
                     });

dashboard-ui/scripts/site.js

@@ -1404,13 +1404,32 @@ var Dashboard = {
         }
 
         var appVersion = window.dashboardVersion;
-        var appName = Dashboard.isConnectMode() ?
+        var appName = "Emby Web Client";
-            "Emby Mobile" :
-            "Emby Web Client";
 
         var deviceName;
         var deviceId;
 
+        if (Dashboard.isRunningInCordova()) {
+
+            if ($.browser.safari) {
+
+                appName = "iOS";
+
+                if ($.browser.iphone) {
+                    deviceName = 'iPhone';
+                } else if ($.browser.ipad) {
+                    deviceName = 'iPad';
+                }
+
+            } else {
+
+                appName = "Android";
+
+            }
+        }
+
+        deviceName = deviceName || generateDeviceName();
+
         // Cordova
         //if (window.device) {
 
@@ -1420,9 +1439,6 @@ var Dashboard = {
         //}
         //else
         {
-
-            deviceName = generateDeviceName();
-
             var seed = [];
             var keyName = 'randomId';