mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fix different styles of favorites
This commit is contained in:
parent
638a360cb2
commit
e1d17d057b
9 changed files with 448 additions and 419 deletions
173
dashboard-ui/components/favoriteitems.js
Normal file
173
dashboard-ui/components/favoriteitems.js
Normal file
|
@ -0,0 +1,173 @@
|
|||
define(['libraryBrowser'], function (libraryBrowser) {
|
||||
|
||||
function enableScrollX() {
|
||||
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
||||
}
|
||||
|
||||
function getThumbShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
|
||||
function getPosterShape() {
|
||||
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
||||
}
|
||||
|
||||
function getSquareShape() {
|
||||
return enableScrollX() ? 'overflowSquare' : 'square';
|
||||
}
|
||||
|
||||
function getSections() {
|
||||
|
||||
return [
|
||||
{ name: 'HeaderFavoriteMovies', types: "Movie", id: "favoriteMovies", shape: getPosterShape(), showTitle: false, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteShows', types: "Series", id: "favoriteShows", shape: getPosterShape(), showTitle: false, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteEpisodes', types: "Episode", id: "favoriteEpisode", shape: getThumbShape(), preferThumb: false, showTitle: true, showParentTitle: true, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteGames', types: "Game", id: "favoriteGames", shape: getSquareShape(), preferThumb: false, showTitle: true },
|
||||
{ name: 'HeaderFavoriteArtists', types: "MusicArtist", id: "favoriteArtists", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteAlbums', types: "MusicAlbum", id: "favoriteAlbums", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteSongs', types: "Audio", id: "favoriteSongs", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayMoreButton: true, defaultAction: 'instantmix' }
|
||||
];
|
||||
}
|
||||
|
||||
function loadSection(elem, userId, topParentId, section, isSingleSection) {
|
||||
|
||||
var screenWidth = window.innerWidth;
|
||||
var options = {
|
||||
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
Filters: "IsFavorite",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
||||
CollapseBoxSetItems: false,
|
||||
ExcludeLocationTypes: "Virtual"
|
||||
};
|
||||
|
||||
if (topParentId) {
|
||||
options.ParentId = topParentId;
|
||||
}
|
||||
|
||||
if (!isSingleSection) {
|
||||
options.Limit = screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6);
|
||||
|
||||
if (enableScrollX()) {
|
||||
options.Limit = 16;
|
||||
}
|
||||
}
|
||||
|
||||
var promise;
|
||||
if (section.types == 'MusicArtist') {
|
||||
promise = ApiClient.getArtists(userId, options);
|
||||
} else {
|
||||
|
||||
options.IncludeItemTypes = section.types;
|
||||
promise = ApiClient.getItems(userId, options);
|
||||
}
|
||||
|
||||
return promise.then(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
if (result.Items.length) {
|
||||
|
||||
html += '<div>';
|
||||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate(section.name) + '</h1>';
|
||||
|
||||
if (result.TotalRecordCount > result.Items.length) {
|
||||
var href = "secondaryitems.html?type=" + section.types + "&filters=IsFavorite&titlekey=" + section.name;
|
||||
|
||||
html += '<a class="clearLink" href="' + href + '" style="margin-left:2em;"><paper-button raised class="more mini">' + Globalize.translate('ButtonMore') + '</paper-button></a>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
if (enableScrollX()) {
|
||||
html += '<div class="itemsContainer hiddenScrollX">';
|
||||
} else {
|
||||
html += '<div class="itemsContainer">';
|
||||
}
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferThumb: section.preferThumb,
|
||||
shape: section.shape,
|
||||
overlayText: section.overlayText !== false,
|
||||
showTitle: section.showTitle,
|
||||
showParentTitle: section.showParentTitle,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
centerText: section.centerText,
|
||||
overlayPlayButton: section.overlayPlayButton,
|
||||
overlayMoreButton: section.overlayMoreButton,
|
||||
context: 'home-favorites',
|
||||
defaultAction: section.defaultAction
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
libraryBrowser.createCardMenus(elem);
|
||||
});
|
||||
}
|
||||
|
||||
function loadSections(page, userId, topParentId, types) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var sections = getSections();
|
||||
|
||||
var sectionid = getParameterByName('sectionid');
|
||||
|
||||
if (sectionid) {
|
||||
sections = sections.filter(function (s) {
|
||||
|
||||
return s.id == sectionid;
|
||||
});
|
||||
}
|
||||
|
||||
if (types) {
|
||||
sections = sections.filter(function (s) {
|
||||
|
||||
return types.indexOf(s.id) != -1;
|
||||
});
|
||||
}
|
||||
|
||||
var i, length;
|
||||
|
||||
var elem = page.querySelector('.favoriteSections');
|
||||
|
||||
if (!elem.innerHTML) {
|
||||
var html = '';
|
||||
for (i = 0, length = sections.length; i < length; i++) {
|
||||
|
||||
html += '<div class="homePageSection section' + sections[i].id + '"></div>';
|
||||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
}
|
||||
|
||||
var promises = [];
|
||||
|
||||
for (i = 0, length = sections.length; i < length; i++) {
|
||||
|
||||
var section = sections[i];
|
||||
|
||||
elem = page.querySelector('.section' + section.id);
|
||||
|
||||
promises.push(loadSection(elem, userId, topParentId, section, sections.length == 1));
|
||||
}
|
||||
|
||||
Promise.all(promises).then(function () {
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
libraryBrowser.setLastRefreshed(page);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
render: loadSections
|
||||
};
|
||||
|
||||
});
|
|
@ -1,197 +1,19 @@
|
|||
define(['libraryBrowser'], function (libraryBrowser) {
|
||||
define(['components/favoriteitems'], function (favoriteItems) {
|
||||
|
||||
function enableScrollX() {
|
||||
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
||||
}
|
||||
return function (view, params) {
|
||||
|
||||
function getThumbShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
var self = this;
|
||||
|
||||
function getPosterShape() {
|
||||
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
||||
}
|
||||
view.addEventListener('viewshow', function (e) {
|
||||
|
||||
function getSquareShape() {
|
||||
return enableScrollX() ? 'overflowSquare' : 'square';
|
||||
}
|
||||
var isRestored = e.detail.isRestored;
|
||||
|
||||
function getSections() {
|
||||
if (!isRestored) {
|
||||
|
||||
return [
|
||||
{ name: 'HeaderFavoriteMovies', types: "Movie", id: "favoriteMovies", shape: getPosterShape(), showTitle: false, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteShows', types: "Series", id: "favoriteShows", shape: getPosterShape(), showTitle: false, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteEpisodes', types: "Episode", id: "favoriteEpisode", shape: getThumbShape(), preferThumb: false, showTitle: true, showParentTitle: true, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteGames', types: "Game", id: "favoriteGames", shape: getSquareShape(), preferThumb: false, showTitle: true },
|
||||
{ name: 'HeaderFavoriteArtists', types: "MusicArtist", id: "favoriteArtists", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteAlbums', types: "MusicAlbum", id: "favoriteAlbums", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true },
|
||||
{ name: 'HeaderFavoriteSongs', types: "Audio", id: "favoriteSongs", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayMoreButton: true, defaultAction: 'instantmix' }
|
||||
];
|
||||
}
|
||||
|
||||
function loadSection(elem, userId, topParentId, section, isSingleSection) {
|
||||
|
||||
var screenWidth = window.innerWidth;
|
||||
var options = {
|
||||
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
Filters: "IsFavorite",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
||||
CollapseBoxSetItems: false,
|
||||
ExcludeLocationTypes: "Virtual"
|
||||
};
|
||||
|
||||
if (topParentId) {
|
||||
options.ParentId = topParentId;
|
||||
}
|
||||
|
||||
if (!isSingleSection) {
|
||||
options.Limit = screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6);
|
||||
|
||||
if (enableScrollX()) {
|
||||
options.Limit = 16;
|
||||
}
|
||||
}
|
||||
|
||||
var promise;
|
||||
if (section.types == 'MusicArtist') {
|
||||
promise = ApiClient.getArtists(userId, options);
|
||||
} else {
|
||||
|
||||
options.IncludeItemTypes = section.types;
|
||||
promise = ApiClient.getItems(userId, options);
|
||||
}
|
||||
|
||||
return promise.then(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
if (result.Items.length) {
|
||||
|
||||
html += '<div>';
|
||||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate(section.name) + '</h1>';
|
||||
|
||||
if (result.TotalRecordCount > result.Items.length) {
|
||||
var href = "secondaryitems.html?type=" + section.types + "&filters=IsFavorite&titlekey=" + section.name;
|
||||
|
||||
html += '<a class="clearLink" href="' + href + '" style="margin-left:2em;"><paper-button raised class="more mini">' + Globalize.translate('ButtonMore') + '</paper-button></a>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
if (enableScrollX()) {
|
||||
html += '<div class="itemsContainer hiddenScrollX">';
|
||||
} else {
|
||||
html += '<div class="itemsContainer">';
|
||||
}
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferThumb: section.preferThumb,
|
||||
shape: section.shape,
|
||||
overlayText: section.overlayText !== false,
|
||||
showTitle: section.showTitle,
|
||||
showParentTitle: section.showParentTitle,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
centerText: section.centerText,
|
||||
overlayPlayButton: section.overlayPlayButton,
|
||||
overlayMoreButton: section.overlayMoreButton,
|
||||
context: 'home-favorites',
|
||||
defaultAction: section.defaultAction
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
libraryBrowser.createCardMenus(elem);
|
||||
});
|
||||
}
|
||||
|
||||
function loadSections(page, userId, topParentId, types) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var sections = getSections();
|
||||
|
||||
var sectionid = getParameterByName('sectionid');
|
||||
|
||||
if (sectionid) {
|
||||
sections = sections.filter(function (s) {
|
||||
|
||||
return s.id == sectionid;
|
||||
});
|
||||
}
|
||||
|
||||
if (types) {
|
||||
sections = sections.filter(function (s) {
|
||||
|
||||
return types.indexOf(s.id) != -1;
|
||||
});
|
||||
}
|
||||
|
||||
var i, length;
|
||||
|
||||
var elem = page.querySelector('.favoriteSections');
|
||||
|
||||
if (!elem.innerHTML) {
|
||||
var html = '';
|
||||
for (i = 0, length = sections.length; i < length; i++) {
|
||||
|
||||
html += '<div class="homePageSection section' + sections[i].id + '"></div>';
|
||||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
}
|
||||
|
||||
var promises = [];
|
||||
|
||||
for (i = 0, length = sections.length; i < length; i++) {
|
||||
|
||||
var section = sections[i];
|
||||
|
||||
elem = page.querySelector('.section' + section.id);
|
||||
|
||||
promises.push(loadSection(elem, userId, topParentId, section, sections.length == 1));
|
||||
}
|
||||
|
||||
Promise.all(promises).then(function () {
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
libraryBrowser.setLastRefreshed(page);
|
||||
});
|
||||
}
|
||||
|
||||
function initHomePage() {
|
||||
|
||||
if (window.HomePage) {
|
||||
window.HomePage.renderFavorites = function (page, tabContent) {
|
||||
if (libraryBrowser.needsRefresh(tabContent)) {
|
||||
loadSections(tabContent, Dashboard.getCurrentUserId());
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
initHomePage();
|
||||
|
||||
pageIdOn('pageinit', "indexPage", initHomePage);
|
||||
|
||||
pageIdOn('pagebeforeshow', "favoritesPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
if (libraryBrowser.needsRefresh(page)) {
|
||||
loadSections(page, Dashboard.getCurrentUserId());
|
||||
var parentId = null;
|
||||
favoriteItems.render(view, Dashboard.getCurrentUserId(), parentId);
|
||||
}
|
||||
});
|
||||
|
||||
window.FavoriteItems = {
|
||||
render: loadSections
|
||||
};
|
||||
|
||||
});
|
14
dashboard-ui/scripts/homefavorites.js
Normal file
14
dashboard-ui/scripts/homefavorites.js
Normal file
|
@ -0,0 +1,14 @@
|
|||
define(['components/favoriteitems'], function (favoriteItems) {
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.renderTab = function () {
|
||||
|
||||
var parentId = null;
|
||||
favoriteItems.render(tabContent, Dashboard.getCurrentUserId(), parentId);
|
||||
};
|
||||
};
|
||||
|
||||
});
|
|
@ -50,15 +50,16 @@
|
|||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
LibraryBrowser.setLastRefreshed(page);
|
||||
});
|
||||
}
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.renderTab = function () {
|
||||
|
||||
window.HomePage.renderNextUp = function (page, tabContent) {
|
||||
if (LibraryBrowser.needsRefresh(tabContent)) {
|
||||
reload(tabContent);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
});
|
|
@ -30,8 +30,6 @@
|
|||
renderUpcoming(elem, items);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
LibraryBrowser.setLastRefreshed(page);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -120,11 +118,14 @@
|
|||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
}
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.renderTab = function () {
|
||||
|
||||
window.HomePage.renderUpcoming = function (page, tabContent) {
|
||||
if (LibraryBrowser.needsRefresh(tabContent)) {
|
||||
loadUpcoming(tabContent);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
});
|
|
@ -237,41 +237,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
function loadTab(page, index) {
|
||||
|
||||
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
|
||||
var depends = [];
|
||||
var scope = 'HomePage';
|
||||
var method = '';
|
||||
|
||||
switch (index) {
|
||||
|
||||
case 0:
|
||||
depends.push('scripts/sections');
|
||||
method = 'renderHomeTab';
|
||||
break;
|
||||
case 1:
|
||||
depends.push('scripts/homenextup');
|
||||
method = 'renderNextUp';
|
||||
break;
|
||||
case 2:
|
||||
depends.push('scripts/favorites');
|
||||
method = 'renderFavorites';
|
||||
break;
|
||||
case 3:
|
||||
depends.push('scripts/homeupcoming');
|
||||
method = 'renderUpcoming';
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
break;
|
||||
}
|
||||
|
||||
require(depends, function () {
|
||||
window[scope][method](page, tabContent);
|
||||
});
|
||||
}
|
||||
|
||||
function onPlaybackStop(e, state) {
|
||||
|
||||
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
|
||||
|
@ -291,18 +256,68 @@
|
|||
return ApiClient.getDisplayPreferences(key, userId, displayPreferencesKey());
|
||||
}
|
||||
|
||||
window.HomePage = {
|
||||
renderHomeTab: loadHomeTab
|
||||
};
|
||||
|
||||
return function (view, params) {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.renderTab = function () {
|
||||
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
|
||||
loadHomeTab(view, tabContent);
|
||||
};
|
||||
|
||||
var pageTabsContainer = view.querySelector('.pageTabsContainer');
|
||||
|
||||
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, 'home.html');
|
||||
|
||||
var tabControllers = [];
|
||||
var renderedTabs = [];
|
||||
|
||||
function loadTab(page, index) {
|
||||
|
||||
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
|
||||
var depends = [];
|
||||
|
||||
switch (index) {
|
||||
|
||||
case 0:
|
||||
depends.push('scripts/sections');
|
||||
break;
|
||||
case 1:
|
||||
depends.push('scripts/homenextup');
|
||||
break;
|
||||
case 2:
|
||||
depends.push('scripts/homefavorites');
|
||||
break;
|
||||
case 3:
|
||||
depends.push('scripts/homeupcoming');
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
break;
|
||||
}
|
||||
|
||||
require(depends, function (controllerFactory) {
|
||||
|
||||
if (index == 0) {
|
||||
self.tabContent = tabContent;
|
||||
}
|
||||
var controller = tabControllers[index];
|
||||
if (!controller) {
|
||||
controller = index ? new controllerFactory(view, params, tabContent) : self;
|
||||
tabControllers[index] = controller;
|
||||
|
||||
if (controller.initTab) {
|
||||
controller.initTab();
|
||||
}
|
||||
}
|
||||
|
||||
if (renderedTabs.indexOf(index) == -1) {
|
||||
renderedTabs.push(index);
|
||||
controller.renderTab();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
pageTabsContainer.addEventListener('tabchange', function (e) {
|
||||
loadTab(view, parseInt(e.detail.selectedTabIndex));
|
||||
});
|
||||
|
|
|
@ -331,6 +331,8 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
html += '<div style="height:.5em;"></div>';
|
||||
|
||||
var homeHref = window.ApiClient ? 'home.html' : 'selectserver.html?showuser=1';
|
||||
|
||||
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);">';
|
||||
|
|
|
@ -206,9 +206,9 @@
|
|||
loadRecentlyPlayed(tabContent, parentId);
|
||||
loadFrequentlyPlayed(tabContent, parentId);
|
||||
|
||||
require(['scripts/favorites'], function () {
|
||||
require(['components/favoriteitems'], function (favoriteItems) {
|
||||
|
||||
FavoriteItems.render(tabContent, Dashboard.getCurrentUserId(), parentId, ['favoriteArtists', 'favoriteAlbums', 'favoriteSongs']);
|
||||
favoriteItems.render(tabContent, Dashboard.getCurrentUserId(), parentId, ['favoriteArtists', 'favoriteAlbums', 'favoriteSongs']);
|
||||
|
||||
});
|
||||
}
|
||||
|
|
|
@ -2474,7 +2474,8 @@ var AppInfo = {};
|
|||
defineRoute({
|
||||
path: '/favorites.html',
|
||||
dependencies: [],
|
||||
autoFocus: false
|
||||
autoFocus: false,
|
||||
controller: 'scripts/favorites'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue