mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #823 from MrTimscampi/details-rework

Browse source 
Details page artwork ribbon revamp
This commit is contained in:
dkanada 2020-03-04 16:23:36 +09:00 • committed by GitHub
commit a44a9c0d7a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 122 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/assets/css/fonts.css
View file

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

99
src/assets/css/librarybrowser.css
View file

@ -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;

84
src/controllers/itemdetailpage.js
View file

@ -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 += '<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);
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);
});
} 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);

4
src/itemdetails.html
View file

@ -1,5 +1,5 @@
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
<div id="itemBackdrop" class="itemBackdrop noBackdrop">
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true">
<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>

2
src/themes/appletv/theme.css
View file

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

4
src/themes/dark/theme.css
View file

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

2
src/themes/light/theme.css
View file

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