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 7a3e0ada68..d3a3438b0b 100644
--- a/src/assets/css/librarybrowser.css
+++ b/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 {
- background-color: #101010;
+.layout-desktop .detailSticky,
+.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;
- 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;
+.layout-desktop .noBackdrop .detailImageContainer,
+.layout-tv .noBackdrop .detailImageContainer {
+ margin-top: 0;
}
.detailPagePrimaryContent {
@@ -572,15 +604,19 @@
}
.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;
}
+.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.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 {
@@ -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;
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index ad8c0286b0..e18311048c 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", "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) {
- options = options || {};
+ function getProgramScheduleHtml(items) {
var html = "";
html += '';
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 += "";
} else if (!editable && url === undefined) {
- html += "
"
+ html += "";
}
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);
- renderGenres(page, item, apiClient, context, isStatic);
+ renderDirector(page, item, context);
+ 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);
- }
-
- function onDownloadChange() {
- reload(self, view, params);
+ playTrailer();
}
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, user);
- });
+ refreshImage(view, currentItem);
}
}
}
@@ -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);
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/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/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;
}
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 {