Merge pull request #823 from MrTimscampi/details-rework

Details page artwork ribbon revamp

src/assets/css/fonts.css

@@ -29,7 +29,7 @@ h3 {
 }
 
 .layout-tv {
-    font-size: 2.5vh;
+    font-size: 130%;
 }
 
 .layout-mobile {

src/assets/css/librarybrowser.css

@@ -439,10 +439,42 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+    background-attachment: fixed;
     height: 50vh;
     position: relative;
 }
 
+.layout-desktop .itemBackdrop::after,
+.layout-tv .itemBackdrop::after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.65);
+    display: block;
+}
+
+.layout-desktop .noBackdrop .itemBackdrop,
+.layout-tv .noBackdrop .itemBackdrop {
+    display: none;
+}
+
+.detailPageContent {
+    display: flex;
+    flex-direction: column;
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.layout-desktop .noBackdrop .detailPageContent,
+.layout-tv .noBackdrop .detailPageContent {
+    margin-top: 2.5em;
+}
+
+.layout-desktop .noBackdrop .detailImageContainer img,
+.layout-tv .noBackdrop .detailImageContainer img {
+    margin-top: 0;
+}
+
 .personBackdrop {
     background-size: contain;
 }
@@ -509,8 +541,6 @@
     display: flex;
     align-items: center;
     align-content: center;
-    position: sticky;
-    top: 3.85em;
     z-index: 2;
 }
 
@@ -520,13 +550,21 @@
     top: 0;
 }
 
-.layout-tv .detailPagePrimaryContainer {
+.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
+.layout-desktop #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer {
     position: relative;
     top: 0;
+    padding-left: 32.45vw;
 }
 
-.detailSticky {
+.layout-desktop .detailSticky,
-    background-color: #101010;
+.layout-tv .detailSticky {
+    margin-top: -7.2em;
+}
+
+.layout-desktop .noBackdrop .detailSticky,
+.layout-tv .noBackdrop .detailSticky {
+    margin-top: 0;
 }
 
 .infoWrapper {
@@ -548,23 +586,17 @@
     margin: 1.25em 0;
 }
 
-.detailPageContent {
-    display: flex;
-    flex-direction: column;
-    padding-left: 2%;
-    padding-right: 2%;
-}
-
 .detailImageContainer {
-    position: sticky;
+    position: relative;
-    top: 25%;
+    margin-top: -25vh;
     float: left;
-    width: 22.786458333333332vw;
+    width: 25vw;
+    z-index: 3;
 }
 
-.layout-mobile .detailImageContainer,
+.layout-desktop .noBackdrop .detailImageContainer,
-.layout-tv .detailImageContainer {
+.layout-tv .noBackdrop .detailImageContainer {
-    position: relative;
+    margin-top: 0;
 }
 
 .detailPagePrimaryContent {
@@ -572,15 +604,19 @@
 }
 
 .detailLogo {
-    width: 25em;
+    width: 67.25vw;
-    height: 9.375em;
+    height: 14.5vh;
     position: absolute;
-    top: 14.5%;
+    top: 15vh;
-    right: 10.5%;
+    right: 0;
     -webkit-background-size: contain;
     background-size: contain;
 }
 
+.noBackdrop .detailLogo {
+    display: none;
+}
+
 @media all and (max-width: 87.5em) {
     .detailLogo {
         right: 5%;
@@ -607,8 +643,8 @@
 
 .itemDetailImage {
     width: 100% !important;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
+    -webkit-box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);
-    -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
+    box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);
 }
 
 div.itemDetailGalleryLink.defaultCardBackground {
@@ -635,6 +671,16 @@ div.itemDetailGalleryLink.defaultCardBackground {
         position: relative;
     }
 
+    .layout-desktop .detailPageWrapperContainer,
+    .layout-tv .detailPageWrapperContainer {
+        margin-top: 7.2em;
+    }
+
+    .layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
+    .layout-desktop #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer {
+        padding-left: 3.3%;
+    }
+
     .btnPlaySimple {
         display: none !important;
     }
@@ -849,6 +895,11 @@ div.itemDetailGalleryLink.defaultCardBackground {
     border-collapse: collapse;
 }
 
+.layout-desktop .noBackdrop .detailPageWrapperContainer,
+.layout-tv .noBackdrop .detailPageWrapperContainer {
+    margin-top: 3.8em;
+}
+
 .mediaInfoStream {
     margin: 0 3em 0 0;
     display: inline-block;

src/controllers/itemdetailpage.js

@@ -1,4 +1,4 @@
-define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuilder", "datetime", "mediaInfo", "backdrop", "listView", "itemContextMenu", "itemHelper", "dom", "indicators", "apphost", "imageLoader", "libraryMenu", "globalize", "browser", "events", "scrollHelper", "playbackManager", "libraryBrowser", "scrollStyles", "emby-itemscontainer", "emby-checkbox", "emby-button", "emby-playstatebutton", "emby-ratingbutton", "emby-scroller", "emby-select"], function (loading, appRouter, layoutManager, connectionManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, appHost, imageLoader, libraryMenu, globalize, browser, events, scrollHelper, playbackManager, libraryBrowser) {
+define(["loading", "appRouter", "layoutManager", "connectionManager", "userSettings", "cardBuilder", "datetime", "mediaInfo", "backdrop", "listView", "itemContextMenu", "itemHelper", "dom", "indicators", "imageLoader", "libraryMenu", "globalize", "browser", "events", "playbackManager", "scrollStyles", "emby-itemscontainer", "emby-checkbox", "emby-button", "emby-playstatebutton", "emby-ratingbutton", "emby-scroller", "emby-select"], function (loading, appRouter, layoutManager, connectionManager, userSettings, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, imageLoader, libraryMenu, globalize, browser, events, playbackManager) {
     "use strict";
 
     function getPromise(apiClient, params) {
@@ -60,8 +60,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         return options;
     }
 
-    function getProgramScheduleHtml(items, options) {
+    function getProgramScheduleHtml(items) {
-        options = options || {};
         var html = "";
         html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
         html += listView.getListViewHtml({
@@ -445,7 +444,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         }
     }
 
-    function renderBackdrop(page, item, apiClient) {
+    function renderBackdrop(item) {
         if (dom.getWindowSize().innerWidth >= 1000) {
             backdrop.setBackdrops([item]);
         } else {
@@ -455,7 +454,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
 
     function renderDetailPageBackdrop(page, item, apiClient) {
         var imgUrl;
-        var screenWidth = screen.availWidth;
         var hasbackdrop = false;
         var itemBackdropElement = page.querySelector("#itemBackdrop");
         var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" ||
@@ -464,13 +462,17 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             item.Type === "MusicArtist" ||
             item.Type === "Person";
 
+        if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
+            return false;
+        }
+
         if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) {
             imgUrl = apiClient.getScaledImageUrl(item.Id, {
                 type: "Thumb",
                 index: 0,
                 tag: item.ImageTags.Thumb
             });
-            itemBackdropElement.classList.remove("noBackdrop");
+            page.classList.remove("noBackdrop");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
@@ -479,7 +481,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
                 index: 0,
                 tag: item.ImageTags.Primary
             });
-            itemBackdropElement.classList.remove("noBackdrop");
+            page.classList.remove("noBackdrop");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
@@ -488,7 +490,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
                 index: 0,
                 tag: item.BackdropImageTags[0]
             });
-            itemBackdropElement.classList.remove("noBackdrop");
+            page.classList.remove("noBackdrop");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
@@ -497,7 +499,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
                 index: 0,
                 tag: item.ParentBackdropImageTags[0]
             });
-            itemBackdropElement.classList.remove("noBackdrop");
+            page.classList.remove("noBackdrop");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else if (item.ImageTags && item.ImageTags.Thumb) {
@@ -506,15 +508,16 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
                 index: 0,
                 tag: item.ImageTags.Thumb
             });
-            itemBackdropElement.classList.remove("noBackdrop");
+            page.classList.remove("noBackdrop");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else {
-            itemBackdropElement.classList.add("noBackdrop");
             itemBackdropElement.style.backgroundImage = "";
         }
 
         if ("Person" === item.Type) {
+            // FIXME: This hides the backdrop on all persons to fix a margin issue. Ideally, a proper fix should be made.
+            page.classList.add('noBackdrop');
             itemBackdropElement.classList.add("personBackdrop");
         } else {
             itemBackdropElement.classList.remove("personBackdrop");
@@ -526,6 +529,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
     function reloadFromItem(instance, page, params, item, user) {
         var context = params.context;
         page.querySelector(".detailPagePrimaryContainer").classList.add("detailSticky");
+
         renderName(item, page.querySelector(".nameContainer"), false, context);
         var apiClient = connectionManager.getApiClient(item.ServerId);
         renderSeriesTimerEditor(page, item, apiClient, user);
@@ -536,7 +540,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         setInitialCollapsibleState(page, item, apiClient, context, user);
         renderDetails(page, item, apiClient, context);
         renderTrackSelections(page, instance, item);
-        renderBackdrop(page, item, apiClient);
+        renderBackdrop(item);
         renderDetailPageBackdrop(page, item, apiClient);
         var canPlay = reloadPlayButtons(page, item);
 
@@ -663,7 +667,9 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         });
         var detailLogo = page.querySelector(".detailLogo");
 
-        if (url) {
+        if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
+            detailLogo.classList.add("hide");
+        } else if (url) {
             detailLogo.classList.remove("hide");
             detailLogo.classList.add("lazy");
             detailLogo.setAttribute("data-src", url);
@@ -817,7 +823,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         if (editable) {
             html += "</a>";
         } else if (!editable && url === undefined) {
-            html += "</div>"
+            html += "</div>";
         }
 
         var progressHtml = item.IsFolder || !item.UserData ? "" : indicators.getProgressBarHtml(item);
@@ -873,7 +879,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         elem.querySelector(".detailImageProgressContainer").innerHTML = indicators.getProgressBarHtml(item);
     }
 
-    function refreshImage(page, item, user) {
+    function refreshImage(page, item) {
         refreshDetailImageUserData(page.querySelector(".detailImageContainer"), item);
     }
 
@@ -922,10 +928,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
 
         if ("Playlist" == item.Type) {
             page.querySelector("#childrenCollapsible").classList.remove("hide");
-            renderPlaylistItems(page, item, user);
+            renderPlaylistItems(page, item);
         } else if ("Studio" == item.Type || "Person" == item.Type || "Genre" == item.Type || "MusicGenre" == item.Type || "MusicArtist" == item.Type) {
             page.querySelector("#childrenCollapsible").classList.remove("hide");
-            renderItemsByName(page, item, user);
+            renderItemsByName(page, item);
         } else if (item.IsFolder) {
             if ("BoxSet" == item.Type) {
                 page.querySelector("#childrenCollapsible").classList.add("hide");
@@ -937,7 +943,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         }
 
         if ("Series" == item.Type) {
-            renderSeriesSchedule(page, item, user);
+            renderSeriesSchedule(page, item);
             renderNextUp(page, item, user);
         } else {
             page.querySelector(".nextUpSection").classList.add("hide");
@@ -952,7 +958,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             page.querySelector("#specialsCollapsible").classList.add("hide");
         }
 
-        renderCast(page, item, context, enableScrollX() ? null : 12);
+        renderCast(page, item);
 
         if (item.PartCount && item.PartCount > 1) {
             page.querySelector("#additionalPartsCollapsible").classList.remove("hide");
@@ -988,7 +994,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         }
     }
 
-    function renderGenres(page, item, apiClient, context, isStatic) {
+    function renderGenres(page, item, context) {
         context = context || inferContext(item);
         var type;
         var genres = item.GenreItems || [];
@@ -1022,7 +1028,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         }
     }
 
-    function renderDirector(page, item, apiClient, context, isStatic) {
+    function renderDirector(page, item, context) {
         var directors = (item.People || []).filter(function (p) {
             return "Director" === p.Type;
         });
@@ -1050,8 +1056,8 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         renderSimilarItems(page, item, context);
         renderMoreFromSeason(page, item, apiClient);
         renderMoreFromArtist(page, item, apiClient);
-        renderDirector(page, item, apiClient, context, isStatic);
+        renderDirector(page, item, context);
-        renderGenres(page, item, apiClient, context, isStatic);
+        renderGenres(page, item, context);
         renderChannelGuide(page, apiClient, item);
         var taglineElement = page.querySelector(".tagline");
 
@@ -1125,14 +1131,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         return scrollX ? "overflowSquare" : "square";
     }
 
-    function getThumbShape(scrollX) {
-        if (null == scrollX) {
-            scrollX = enableScrollX();
-        }
-
-        return scrollX ? "overflowBackdrop" : "backdrop";
-    }
-
     function renderMoreFromSeason(view, item, apiClient) {
         var section = view.querySelector(".moreFromSeasonSection");
 
@@ -1508,13 +1506,13 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         }
     }
 
-    function renderItemsByName(page, item, user) {
+    function renderItemsByName(page, item) {
         require("scripts/itembynamedetailpage".split(","), function () {
             window.ItemsByName.renderItems(page, item);
         });
     }
 
-    function renderPlaylistItems(page, item, user) {
+    function renderPlaylistItems(page, item) {
         require("scripts/playlistedit".split(","), function () {
             PlaylistViewer.render(page, item);
         });
@@ -1594,7 +1592,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         }
     }
 
-    function renderSeriesSchedule(page, item, user) {
+    function renderSeriesSchedule(page, item) {
         var apiClient = connectionManager.getApiClient(item.ServerId);
         apiClient.getLiveTvPrograms({
             UserId: apiClient.getCurrentUserId(),
@@ -1844,7 +1842,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         });
     }
 
-    function renderCast(page, item, context, limit, isStatic) {
+    function renderCast(page, item) {
         var people = (item.People || []).filter(function (p) {
             return "Director" !== p.Type;
         });
@@ -1934,7 +1932,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             playbackManager.play(playOptions);
         }
 
-        function playTrailer(page) {
+        function playTrailer() {
             playbackManager.playTrailers(currentItem);
         }
 
@@ -1991,11 +1989,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         }
 
         function onPlayTrailerClick() {
-            playTrailer(view);
+            playTrailer();
-        }
-
-        function onDownloadChange() {
-            reload(self, view, params);
         }
 
         function onDownloadClick() {
@@ -2050,9 +2044,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
                 if (userData) {
                     currentItem.UserData = userData;
                     reloadPlayButtons(view, currentItem);
-                    apiClient.getCurrentUser().then(function (user) {
+                    refreshImage(view, currentItem);
-                        refreshImage(view, currentItem, user);
-                    });
                 }
             }
         }
@@ -2083,11 +2075,9 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         });
         view.addEventListener("click", function (e) {
             if (dom.parentWithClass(e.target, "moreScenes")) {
-                apiClient.getCurrentUser().then(function (user) {
+                renderScenes(view, currentItem);
-                    renderScenes(view, currentItem);
-                });
             } else if (dom.parentWithClass(e.target, "morePeople")) {
-                renderCast(view, currentItem, params.context);
+                renderCast(view, currentItem);
             } else if (dom.parentWithClass(e.target, "moreSpecials")) {
                 apiClient.getCurrentUser().then(function (user) {
                     renderSpecials(view, currentItem, user);

src/itemdetails.html

@@ -1,5 +1,5 @@
-<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
+<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true">
-    <div id="itemBackdrop" class="itemBackdrop noBackdrop">
+    <div id="itemBackdrop" class="itemBackdrop">
         <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
             <i class="material-icons play_arrow"></i>
         </button>

src/themes/appletv/theme.css

@@ -112,7 +112,7 @@ html {
 .inputLabelFocused,
 .selectLabelFocused,
 .textareaLabelFocused {
-    color: green;
+    color: #00a4dc;
 }
 
 .checkboxOutline {

src/themes/dark/theme.css

@@ -201,6 +201,10 @@ html {
 }
 
 .detailSticky {
+    background: rgba(32, 32, 32, 0.8);
+}
+
+.noBackdrop .detailSticky {
     background: #202020;
 }
 

src/themes/light/theme.css

@@ -105,7 +105,7 @@ html {
 .inputLabelFocused,
 .selectLabelFocused,
 .textareaLabelFocused {
-    color: green;
+    color: #00a4dc;
 }
 
 .checkboxOutline {