From 4fdab1e8b652d3a1a7e4ec1afd374abf8abf58cf Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Mon, 17 Feb 2020 22:03:36 +0100 Subject: [PATCH 1/8] Hide details page artwork if disabled by user --- src/assets/css/librarybrowser.css | 16 ++++++++++++++++ src/controllers/itemdetailpage.js | 19 +++++++++++++++++-- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 7a3e0ada68..2007a0df77 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -443,6 +443,22 @@ position: relative; } +.itemBackdrop.noBackdrop { + display: none; +} + +.detailPageContent.noBackdrop { + margin-top: 6.75em; +} + +.layout-desktop .detailImageContainer.noBackdrop img { + margin-top: -2.5em; +} + +.layout-tv .detailImageContainer.noBackdrop img { + margin-top: 0; +} + .personBackdrop { background-size: contain; } diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index ad8c0286b0..31e9434ad6 100644 --- a/src/controllers/itemdetailpage.js +++ b/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", "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, userSettings, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, appHost, imageLoader, libraryMenu, globalize, browser, events, scrollHelper, playbackManager, libraryBrowser) { "use strict"; function getPromise(apiClient, params) { @@ -464,6 +464,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild item.Type === "MusicArtist" || item.Type === "Person"; + if (!layoutManager.mobile && !userSettings.enableBackdrops()) { + return hasbackdrop; + } + if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) { imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", @@ -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); @@ -838,6 +844,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild } } + if (!layoutManager.mobile && !userSettings.enableBackdrops()) { + elem.classList.add("noBackdrop"); + } + if ("thumb" == shape) { elem.classList.add("thumbDetailImageContainer"); elem.classList.remove("portraitDetailImageContainer"); @@ -1047,6 +1057,11 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild } function renderDetails(page, item, apiClient, context, isStatic) { + var taglineElement = page.querySelector(".detailPageContent"); + if (!layoutManager.mobile && !userSettings.enableBackdrops()) { + taglineElement.classList.add("noBackdrop"); + } + renderSimilarItems(page, item, context); renderMoreFromSeason(page, item, apiClient); renderMoreFromArtist(page, item, apiClient); From 94cdd38de168dc667d170543f77e5c59151c5a20 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sun, 23 Feb 2020 21:14:38 +0100 Subject: [PATCH 2/8] Changes to details page layout --- src/assets/css/librarybrowser.css | 51 +++++++++++++++++++++---------- src/controllers/itemdetailpage.js | 6 ++++ 2 files changed, 41 insertions(+), 16 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 2007a0df77..96731fca78 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -439,10 +439,21 @@ 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: #000000ad; + background: rgba(0, 0, 0, 0.65); + display: block; +} + .itemBackdrop.noBackdrop { display: none; } @@ -525,8 +536,6 @@ display: flex; align-items: center; align-content: center; - position: sticky; - top: 3.85em; z-index: 2; } @@ -536,13 +545,19 @@ top: 0; } -.layout-tv .detailPagePrimaryContainer { +.layout-tv .detailPagePrimaryContainer:not(.noBackdrop), +.layout-desktop .detailPagePrimaryContainer:not(.noBackdrop) { position: relative; top: 0; + padding-left: 32.45vw; } .detailSticky { - background-color: #101010; + margin-top: -7.3em; +} + +.detailSticky.noBackdrop { + margin-top: 0; } .infoWrapper { @@ -572,15 +587,15 @@ } .detailImageContainer { - position: sticky; - top: 25%; + position: relative; + margin-top: -25vh; float: left; - width: 22.786458333333332vw; + width: 25vw; + z-index: 3; } -.layout-mobile .detailImageContainer, -.layout-tv .detailImageContainer { - position: relative; +.detailImageContainer.noBackdrop { + margin-top: 0; } .detailPagePrimaryContent { @@ -588,11 +603,11 @@ } .detailLogo { - width: 25em; - height: 9.375em; + width: 67.25vw; + height: 14.5vh; position: absolute; - top: 14.5%; - right: 10.5%; + top: 15vh; + right: 0; -webkit-background-size: contain; background-size: contain; } @@ -623,8 +638,8 @@ .itemDetailImage { width: 100% !important; - box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); - -webkit-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); + box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75); } div.itemDetailGalleryLink.defaultCardBackground { @@ -865,6 +880,10 @@ div.itemDetailGalleryLink.defaultCardBackground { border-collapse: collapse; } +.detailPageWrapperContainer.noBackdrop { + margin-top: 4em; +} + .mediaInfoStream { margin: 0 3em 0 0; display: inline-block; diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index 31e9434ad6..fecca7f015 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -515,6 +515,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti hasbackdrop = true; } else { itemBackdropElement.classList.add("noBackdrop"); + page.querySelector(".detailPageWrapperContainer").add("noBackdrop"); itemBackdropElement.style.backgroundImage = ""; } @@ -530,6 +531,11 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti function reloadFromItem(instance, page, params, item, user) { var context = params.context; page.querySelector(".detailPagePrimaryContainer").classList.add("detailSticky"); + + if (!layoutManager.mobile && !userSettings.enableBackdrops()) { + page.querySelector(".detailSticky").classList.add("noBackdrop"); + } + renderName(item, page.querySelector(".nameContainer"), false, context); var apiClient = connectionManager.getApiClient(item.ServerId); renderSeriesTimerEditor(page, item, apiClient, user); From 57bc5e5ee4f49a73586ac80e5a202b9c27f293d9 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 29 Feb 2020 20:14:21 +0100 Subject: [PATCH 3/8] Fix noBackdrop pages --- src/assets/css/fonts.css | 2 +- src/assets/css/librarybrowser.css | 47 +++++++++++++++++++++---------- src/controllers/itemdetailpage.js | 25 +++++----------- src/itemdetails.html | 4 +-- src/themes/dark/theme.css | 4 +++ 5 files changed, 46 insertions(+), 36 deletions(-) diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css index f125bc6a03..cb0da0f80f 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.css @@ -29,7 +29,7 @@ h3 { } .layout-tv { - font-size: 2.5vh; + font-size: 130%; } .layout-mobile { diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 96731fca78..f55a77e1bb 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -454,19 +454,18 @@ display: block; } -.itemBackdrop.noBackdrop { +.layout-desktop .noBackdrop .itemBackdrop, +.layout-tv .noBackdrop .itemBackdrop { display: none; } -.detailPageContent.noBackdrop { - margin-top: 6.75em; +.layout-desktop .noBackdrop .detailPageContent, +.layout-tv .noBackdrop .detailPageContent { + margin-top: 2.5em; } -.layout-desktop .detailImageContainer.noBackdrop img { - margin-top: -2.5em; -} - -.layout-tv .detailImageContainer.noBackdrop img { +.layout-desktop .noBackdrop .detailImageContainer img, +.layout-tv .noBackdrop .detailImageContainer img { margin-top: 0; } @@ -545,18 +544,20 @@ top: 0; } -.layout-tv .detailPagePrimaryContainer:not(.noBackdrop), -.layout-desktop .detailPagePrimaryContainer:not(.noBackdrop) { +.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer, +.layout-desktop #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer { position: relative; top: 0; padding-left: 32.45vw; } -.detailSticky { - margin-top: -7.3em; +.layout-desktop .detailSticky, +.layout-tv .detailSticky { + margin-top: -7.2em; } -.detailSticky.noBackdrop { +.layout-desktop .noBackdrop .detailSticky, +.layout-tv .noBackdrop .detailSticky { margin-top: 0; } @@ -594,7 +595,8 @@ z-index: 3; } -.detailImageContainer.noBackdrop { +.layout-desktop .noBackdrop .detailImageContainer, +.layout-tv .noBackdrop .detailImageContainer { margin-top: 0; } @@ -612,6 +614,10 @@ background-size: contain; } +.noBackdrop .detailLogo { + display: none; +} + @media all and (max-width: 87.5em) { .detailLogo { right: 5%; @@ -666,6 +672,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; } @@ -880,7 +896,8 @@ div.itemDetailGalleryLink.defaultCardBackground { border-collapse: collapse; } -.detailPageWrapperContainer.noBackdrop { +.layout-desktop .noBackdrop .detailPageWrapperContainer, +.layout-tv .noBackdrop .detailPageWrapperContainer { margin-top: 4em; } diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index fecca7f015..dc07a8f526 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -457,6 +457,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti var imgUrl; var screenWidth = screen.availWidth; var hasbackdrop = false; + console.debug(page); var itemBackdropElement = page.querySelector("#itemBackdrop"); var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" || item.MediaType && item.MediaType !== "Video" || @@ -474,7 +475,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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) { @@ -483,7 +484,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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) { @@ -492,7 +493,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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) { @@ -501,7 +502,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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) { @@ -510,16 +511,15 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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"); - page.querySelector(".detailPageWrapperContainer").add("noBackdrop"); itemBackdropElement.style.backgroundImage = ""; } if ("Person" === item.Type) { + page.classList.add('noBackdrop'); itemBackdropElement.classList.add("personBackdrop"); } else { itemBackdropElement.classList.remove("personBackdrop"); @@ -532,10 +532,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti var context = params.context; page.querySelector(".detailPagePrimaryContainer").classList.add("detailSticky"); - if (!layoutManager.mobile && !userSettings.enableBackdrops()) { - page.querySelector(".detailSticky").classList.add("noBackdrop"); - } - renderName(item, page.querySelector(".nameContainer"), false, context); var apiClient = connectionManager.getApiClient(item.ServerId); renderSeriesTimerEditor(page, item, apiClient, user); @@ -850,10 +846,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } } - if (!layoutManager.mobile && !userSettings.enableBackdrops()) { - elem.classList.add("noBackdrop"); - } - if ("thumb" == shape) { elem.classList.add("thumbDetailImageContainer"); elem.classList.remove("portraitDetailImageContainer"); @@ -1064,9 +1056,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti function renderDetails(page, item, apiClient, context, isStatic) { var taglineElement = page.querySelector(".detailPageContent"); - if (!layoutManager.mobile && !userSettings.enableBackdrops()) { - taglineElement.classList.add("noBackdrop"); - } renderSimilarItems(page, item, context); renderMoreFromSeason(page, item, apiClient); diff --git a/src/itemdetails.html b/src/itemdetails.html index 8c685b90b5..a1966afe08 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -1,5 +1,5 @@ -
-
+
+
diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 4d4b0a91be..41af2c32d3 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -201,6 +201,10 @@ html { } .detailSticky { + background: rgba(32, 32, 32, 0.8); +} + +.noBackdrop .detailSticky { background: #202020; } From e6034e9bf2c7d8b15c6f30fd5ec76c078dccbc02 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 29 Feb 2020 20:17:22 +0100 Subject: [PATCH 4/8] Fix leftover green in themes --- src/themes/appletv/theme.css | 2 +- src/themes/light/theme.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index ccc6eaaabe..5ca517bea5 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -112,7 +112,7 @@ html { .inputLabelFocused, .selectLabelFocused, .textareaLabelFocused { - color: green; + color: #00a4dc; } .checkboxOutline { diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index cedc8bfb8b..d84a1c3b67 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -105,7 +105,7 @@ html { .inputLabelFocused, .selectLabelFocused, .textareaLabelFocused { - color: green; + color: #00a4dc; } .checkboxOutline { From 6f35d6696ebcc23616b3d6dbb7fbaacedb7e42a9 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 29 Feb 2020 21:38:07 +0100 Subject: [PATCH 5/8] Fix linting issues --- src/assets/css/librarybrowser.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index f55a77e1bb..210088aea5 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -459,6 +459,13 @@ 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; @@ -580,13 +587,6 @@ margin: 1.25em 0; } -.detailPageContent { - display: flex; - flex-direction: column; - padding-left: 2%; - padding-right: 2%; -} - .detailImageContainer { position: relative; margin-top: -25vh; From a98b99850ef388ce60e95170b3a916e21dd2cfa2 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sun, 1 Mar 2020 15:33:41 +0100 Subject: [PATCH 6/8] Remove dead code --- src/controllers/itemdetailpage.js | 67 +++++++++++-------------------- 1 file changed, 23 insertions(+), 44 deletions(-) diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index dc07a8f526..f33763956a 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -1,4 +1,4 @@ -define(["loading", "appRouter", "layoutManager", "connectionManager", "userSettings", "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, userSettings, 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", "userSetti return options; } - function getProgramScheduleHtml(items, options) { - options = options || {}; + function getProgramScheduleHtml(items) { var html = ""; html += '
'; html += listView.getListViewHtml({ @@ -445,7 +444,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } } - function renderBackdrop(page, item, apiClient) { + function renderBackdrop(item) { if (dom.getWindowSize().innerWidth >= 1000) { backdrop.setBackdrops([item]); } else { @@ -455,9 +454,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti function renderDetailPageBackdrop(page, item, apiClient) { var imgUrl; - var screenWidth = screen.availWidth; var hasbackdrop = false; - console.debug(page); var itemBackdropElement = page.querySelector("#itemBackdrop"); var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" || item.MediaType && item.MediaType !== "Video" || @@ -542,7 +539,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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); @@ -825,7 +822,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti if (editable) { html += ""; } else if (!editable && url === undefined) { - html += "
" + html += "
"; } var progressHtml = item.IsFolder || !item.UserData ? "" : indicators.getProgressBarHtml(item); @@ -881,7 +878,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti elem.querySelector(".detailImageProgressContainer").innerHTML = indicators.getProgressBarHtml(item); } - function refreshImage(page, item, user) { + function refreshImage(page, item) { refreshDetailImageUserData(page.querySelector(".detailImageContainer"), item); } @@ -930,10 +927,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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"); @@ -945,7 +942,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } if ("Series" == item.Type) { - renderSeriesSchedule(page, item, user); + renderSeriesSchedule(page, item); renderNextUp(page, item, user); } else { page.querySelector(".nextUpSection").classList.add("hide"); @@ -960,7 +957,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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"); @@ -996,7 +993,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } } - function renderGenres(page, item, apiClient, context, isStatic) { + function renderGenres(page, item, context) { context = context || inferContext(item); var type; var genres = item.GenreItems || []; @@ -1030,7 +1027,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } } - function renderDirector(page, item, apiClient, context, isStatic) { + function renderDirector(page, item, context) { var directors = (item.People || []).filter(function (p) { return "Director" === p.Type; }); @@ -1055,13 +1052,11 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } function renderDetails(page, item, apiClient, context, isStatic) { - var taglineElement = page.querySelector(".detailPageContent"); - renderSimilarItems(page, item, context); renderMoreFromSeason(page, item, apiClient); renderMoreFromArtist(page, item, apiClient); - renderDirector(page, item, apiClient, context, isStatic); - renderGenres(page, item, apiClient, context, isStatic); + renderDirector(page, item, context); + renderGenres(page, item, context); renderChannelGuide(page, apiClient, item); var taglineElement = page.querySelector(".tagline"); @@ -1135,14 +1130,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti 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"); @@ -1518,13 +1505,13 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } } - 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); }); @@ -1604,7 +1591,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } } - function renderSeriesSchedule(page, item, user) { + function renderSeriesSchedule(page, item) { var apiClient = connectionManager.getApiClient(item.ServerId); apiClient.getLiveTvPrograms({ UserId: apiClient.getCurrentUserId(), @@ -1854,7 +1841,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti }); } - function renderCast(page, item, context, limit, isStatic) { + function renderCast(page, item) { var people = (item.People || []).filter(function (p) { return "Director" !== p.Type; }); @@ -1944,7 +1931,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti playbackManager.play(playOptions); } - function playTrailer(page) { + function playTrailer() { playbackManager.playTrailers(currentItem); } @@ -2001,11 +1988,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } function onPlayTrailerClick() { - playTrailer(view); - } - - function onDownloadChange() { - reload(self, view, params); + playTrailer(); } function onDownloadClick() { @@ -2060,9 +2043,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti if (userData) { currentItem.UserData = userData; reloadPlayButtons(view, currentItem); - apiClient.getCurrentUser().then(function (user) { - refreshImage(view, currentItem, user); - }); + refreshImage(view, currentItem); } } } @@ -2093,11 +2074,9 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti }); 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); From 8a69092106810039b870472866d8546003a15f6d Mon Sep 17 00:00:00 2001 From: Julien Machiels Date: Tue, 3 Mar 2020 13:31:57 +0100 Subject: [PATCH 7/8] Clarify return statement in itemdetailpage Co-Authored-By: Vasily --- src/controllers/itemdetailpage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index f33763956a..db9425186a 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -463,7 +463,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti item.Type === "Person"; if (!layoutManager.mobile && !userSettings.enableBackdrops()) { - return hasbackdrop; + return false; } if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) { From 7f019dfffb8d22b1b481017c9acbe6168528ffa6 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Tue, 3 Mar 2020 19:36:52 +0100 Subject: [PATCH 8/8] Fix one pixel issue on detials and add fixme --- src/assets/css/librarybrowser.css | 3 +-- src/controllers/itemdetailpage.js | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 210088aea5..d3a3438b0b 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -449,7 +449,6 @@ content: ""; width: 100%; height: 100%; - background: #000000ad; background: rgba(0, 0, 0, 0.65); display: block; } @@ -898,7 +897,7 @@ div.itemDetailGalleryLink.defaultCardBackground { .layout-desktop .noBackdrop .detailPageWrapperContainer, .layout-tv .noBackdrop .detailPageWrapperContainer { - margin-top: 4em; + margin-top: 3.8em; } .mediaInfoStream { diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index db9425186a..e18311048c 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -516,6 +516,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } 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 {