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

86
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);
});
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);