My library icons updates

Conflicts:
	MediaBrowser.WebDashboard/dashboard-ui/scripts/indexpage.js

dashboard-ui/css/posteritem.css

@@ -136,6 +136,25 @@
         height: 83.25px;
     }
 
+.myLibraryPosterItem {
+    width: 157px;
+}
+
+    .myLibraryPosterItem .posterItemImage {
+        height: 65px;
+        background-position: 20px center;
+        background-size: 25px 25px;
+        background-color: rgba(51, 51, 51, 0.5);
+    }
+
+    .myLibraryPosterItem .posterItemDefaultText {
+        top: 0;
+        left: 0;
+        line-height: 65px;
+        text-align: left;
+        padding-left: 60px;
+    }
+
 .smallBackdropPosterItem {
     width: 157px;
 }

dashboard-ui/scripts/indexpage.js

@@ -1,5 +1,193 @@
 (function ($, document, apiClient) {
 
+    function fillSeriesSpotlight(elem, item, nextUp) {
+
+        var html = '<h1 class="spotlightTitle">' + item.Name + '</h1>';
+
+        var imgUrl = ApiClient.getImageUrl(item.Id, {
+            type: "Backdrop",
+            tag: item.BackdropImageTags[0]
+        });
+
+        html += '<div class="spotlight" style="background-image:url(\'' + imgUrl + '\');">';
+
+        imgUrl = ApiClient.getImageUrl(item.Id, {
+            type: "Primary",
+            tag: item.ImageTags.Primary,
+            EnableImageEnhancers: false
+        });
+
+        html += '<div class="spotlightContent">';
+        html += '<div class="spotlightPoster" style="background-image:url(\'' + imgUrl + '\');">';
+
+        html += '<div class="spotlightContentInner">';
+        html += '<p>' + LibraryBrowser.getMiscInfoHtml(item) + '</p>';
+        html += '<p>' + (item.Overview || '') + '</p>';
+        html += '</div>';
+
+        html += '</div>';
+        html += '</div>';
+
+        if (nextUp && nextUp.ImageTags && nextUp.ImageTags.Primary) {
+
+            html += '<div class="spotlightContent rightSpotlightContent">';
+
+            imgUrl = ApiClient.getImageUrl(nextUp.Id, {
+                type: "Primary",
+                tag: nextUp.ImageTags.Primary,
+                EnableImageEnhancers: false
+            });
+
+            html += '<div class="spotlightPoster" style="background-image:url(\'' + imgUrl + '\');">';
+
+            html += '<div class="spotlightContentInner">';
+            html += LibraryBrowser.getPosterViewDisplayName(nextUp);
+            html += '</div>';
+
+            html += '</div>';
+            html += '</div>';
+        }
+
+        html += '</div>';
+
+        html += '<div class="spotlightPlaceHolder"></div>';
+
+        $(elem).html(html);
+    }
+
+    function reloadSpotlight(page, allPromise) {
+
+        var options = {
+
+            SortBy: "Random",
+            SortOrder: "Descending",
+            Limit: 1,
+            Recursive: true,
+            IncludeItemTypes: "Series",
+            ImageTypes: "Backdrop,Primary",
+            Fields: "Overview"
+        };
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+            allPromise.done(function () {
+
+                var index = 0;
+                $('.spotlightContainer', page).each(function () {
+
+                    var elem = this;
+                    var item = result.Items[index];
+                    index++;
+
+                    if (item && item.Type == 'Series') {
+
+                        options = {
+
+                            Limit: 1,
+                            UserId: Dashboard.getCurrentUserId(),
+                            SeriesId: item.Id
+                        };
+
+                        ApiClient.getNextUpEpisodes(options).done(function (nextUpResult) {
+
+                            fillSeriesSpotlight(elem, item, nextUpResult.Items[0]);
+                        });
+
+                    } else {
+                        $(this).hide();
+                    }
+
+                });
+
+            });
+        });
+    }
+
+    function createMediaLinks(options) {
+
+        var html = "";
+
+        var items = options.items;
+
+        console.log("options", options);
+
+        // "My Library" backgrounds
+        for (var i = 0, length = items.length; i < length; i++) {
+
+            var item = items[i];
+            var background = "#333";
+            var backgroundSize = "45px 45px";
+            var backgroundPosition = "20px center";
+
+            switch (item.CollectionType) {
+                case "movies":
+                    imgUrl = "css/images/items/folders/movies.png";
+                    break;
+                case "music":
+                    imgUrl = "css/images/items/folders/music.png";
+                    break;
+                case "photos":
+                    imgUrl = "css/images/items/folders/photos.png";
+                    break;
+                case "tvshows":
+                    imgUrl = "css/images/items/folders/tv.png";
+                    break;
+                case "games":
+                    imgUrl = "css/images/items/folders/games.png";
+                    break;
+                case "trailers":
+                    imgUrl = "css/images/items/folders/games.png";
+                    break;
+                case "homevideos":
+                    imgUrl = "css/images/items/folders/homevideos.png";
+                    break;
+                case "musicvideos":
+                    imgUrl = "css/images/items/folders/musicvideos.png";
+                    break;
+                case "boxsets":
+                default:
+                    imgUrl = "css/images/items/folders/folder.png";
+                    break;
+            }
+
+            var cssClass = "posterItem";
+            cssClass += ' ' + options.shape + 'PosterItem';
+
+            var mediaSourceCount = item.MediaSourceCount || 1;
+
+            var href = options.linkItem === false ? '#' : LibraryBrowser.getHref(item, options.context);
+
+            html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" data-mediasourcecount="' + mediaSourceCount + '" href="' + href + '">';
+
+            var style = "";
+
+            if (imgUrl) {
+                style += 'background-image:url(\'' + imgUrl + '\');';
+            }
+
+            var imageCssClass = 'posterItemImage';
+
+            html += '<div class="' + imageCssClass + '" style="' + style + '">';
+            html += '</div>';
+
+            var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
+
+            if (options.showTitle) {
+                html += "<div class='posterItemDefaultText'>";
+                html += name;
+                html += "</div>";
+            }
+
+            cssClass = options.centerText ? "posterItemText posterItemTextCentered" : "posterItemText";
+
+            html += "</a>";
+        }
+
+        console.log("html", html);
+
+        return html;
+    }
+
     $(document).on('pagebeforeshow', "#indexPage", function () {
 
         var screenWidth = $(window).width();
@@ -16,9 +204,9 @@
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
 
-            $('.myLibrary', page).html(LibraryBrowser.getPosterViewHtml({
+            $('.myLibrary', page).html(createMediaLinks({
                 items: result.Items,
-                shape: 'smallBackdrop',
+                shape: 'myLibrary',
                 showTitle: true,
                 centerText: true
 

dashboard-ui/scripts/librarybrowser.js

@@ -538,8 +538,6 @@
                 var background = null;
                 var width = null;
                 var height = null;
-                var backgroundSize = null;
-                var backgroundPosition = null;
 
                 var forceName = false;
 
@@ -693,48 +691,8 @@
                         imgUrl = 'css/images/items/list/collection.png';
                     }
                     background = defaultBackground;
-
-                    // "My Library" backgrounds
-                    if (item.Type == "CollectionFolder" || item.Type == "ManualCollectionsFolder") {
-
-                        backgroundSize = "90px 90px";
-                        backgroundPosition = "center center";
-
-                        switch (item.CollectionType) {
-                            case "movies":
-                                imgUrl = "css/images/items/folders/movies.png";
-                                break;
-                            case "music":
-                                imgUrl = "css/images/items/folders/music.png";
-                                break;
-                            case "photos":
-                                imgUrl = "css/images/items/folders/photos.png";
-                                break;
-                            case "tvshows":
-                                imgUrl = "css/images/items/folders/tv.png";
-                                break;
-                            case "games":
-                                imgUrl = "css/images/items/folders/games.png";
-                                break;
-                            case "trailers":
-                                imgUrl = "css/images/items/folders/games.png";
-                                break;
-                            case "homevideos":
-                                imgUrl = "css/images/items/folders/homevideos.png";
-                                break;
-                            case "musicvideos":
-                                imgUrl = "css/images/items/folders/musicvideos.png";
-                                break;
-                            case "boxsets":
-                            default:
-                                imgUrl = "css/images/items/folders/folder.png";
-                                break;
-                        }
-                    }
                 }
 
-                console.log("item", item);
-
                 var cssClass = "posterItem";
 
                 if (options.transparent !== false) {
@@ -763,14 +721,6 @@
                     style += "background-color:" + background + ";";
                 }
 
-                if (backgroundPosition) {
-                    style += "background-position:" + backgroundPosition + ";";
-                }
-
-                if (backgroundSize) {
-                    style += "background-size:" + backgroundSize + ";";
-                }
-
                 var imageCssClass = 'posterItemImage';
                 if (options.coverImage) {
                     imageCssClass += " coveredPosterItemImage";