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

fix different styles of favorites

Browse source
This commit is contained in:
Luke Pulverenti 2016-03-31 02:33:37 -04:00
parent 638a360cb2
commit e1d17d057b
9 changed files with 448 additions and 419 deletions
Download patch file Download diff file Expand all files Collapse all files

173
dashboard-ui/components/favoriteitems.js Normal file
View 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
};
});

194
dashboard-ui/scripts/favorites.js
View file

@ -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
View 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);
};
};
});

11
dashboard-ui/scripts/homenextup.js
View file

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

11
dashboard-ui/scripts/homeupcoming.js
View file

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

93
dashboard-ui/scripts/indexpage.js
View file

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

2
dashboard-ui/scripts/librarymenu.js
View file

@ -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);">';

4
dashboard-ui/scripts/musicrecommended.js
View file

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

3
dashboard-ui/scripts/site.js
View file

@ -2474,7 +2474,8 @@ var AppInfo = {};
defineRoute({
path: '/favorites.html',
dependencies: [],
autoFocus: false
autoFocus: false,
controller: 'scripts/favorites'
});
defineRoute({