mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 10:58:20 -07:00
convert playlist page
This commit is contained in:
Luke Pulverenti
parent
b971acb33a
commit
0d9c8e71fe
@ -37,6 +37,10 @@
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.layout-tv .vertical-wrap .card {
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.card, .card:focus {
|
||||
font-weight: inherit !important;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="playlistsPage" data-dom-cache="true" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/playlists,emby-itemscontainer" data-title="${HeaderPlaylists}">
|
||||
<div id="playlistsPage" data-dom-cache="true" data-role="page" class="page libraryPage noSecondaryNavPage" data-title="${HeaderPlaylists}">
|
||||
|
||||
<div data-role="content">
|
||||
<div class="viewSettings">
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer centered"></div>
|
||||
<div class="noItemsMessage hide" style="text-align: center;">
|
||||
<p>${MessageNoPlaylistsAvailable}</p>
|
||||
</div>
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
|
||||
function updateEncoder(form) {
|
||||
|
||||
return ApiClient.getSystemInfo().then(function(systemInfo) {
|
||||
|
||||
return ApiClient.getSystemInfo().then(function (systemInfo) {
|
||||
|
||||
if (systemInfo.EncoderLocationType == "External") {
|
||||
return;
|
||||
}
|
||||
@ -118,8 +118,10 @@
|
||||
|
||||
if (this.value == 'Custom') {
|
||||
page.querySelector('.fldEncoderPath').classList.remove('hide');
|
||||
page.querySelector('.txtEncoderPath').setAttribute('required', 'required');
|
||||
} else {
|
||||
page.querySelector('.fldEncoderPath').classList.add('hide');
|
||||
page.querySelector('.txtEncoderPath').removeAttribute('required');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,184 +1,210 @@
|
||||
define(['listView'], function (listView) {
|
||||
define(['listView', 'cardBuilder', 'libraryBrowser', 'emby-itemscontainer'], function (listView, cardBuilder, libraryBrowser) {
|
||||
|
||||
var data = {};
|
||||
function getPageData() {
|
||||
var key = getSavedQueryKey();
|
||||
var pageData = data[key];
|
||||
return function (view, params) {
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Playlist",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo",
|
||||
StartIndex: 0,
|
||||
Limit: LibraryBrowser.getDefaultPageSize()
|
||||
},
|
||||
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('PosterCard', 'PosterCard')
|
||||
};
|
||||
var data = {};
|
||||
function getPageData(context) {
|
||||
var key = getSavedQueryKey(context);
|
||||
var pageData = data[key];
|
||||
|
||||
pageData.query.ParentId = LibraryMenu.getTopParentId();
|
||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Playlist",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo",
|
||||
StartIndex: 0,
|
||||
Limit: LibraryBrowser.getDefaultPageSize()
|
||||
},
|
||||
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('PosterCard', 'PosterCard')
|
||||
};
|
||||
|
||||
pageData.query.ParentId = LibraryMenu.getTopParentId();
|
||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
return pageData;
|
||||
}
|
||||
return pageData;
|
||||
}
|
||||
|
||||
function getQuery() {
|
||||
function getQuery(context) {
|
||||
|
||||
return getPageData().query;
|
||||
}
|
||||
return getPageData(context).query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey() {
|
||||
function getSavedQueryKey(context) {
|
||||
|
||||
return LibraryBrowser.getSavedQueryKey();
|
||||
}
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey();
|
||||
}
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function showLoadingMessage(page) {
|
||||
function showLoadingMessage() {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
}
|
||||
Dashboard.showLoadingMsg();
|
||||
}
|
||||
|
||||
function hideLoadingMessage(page) {
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
function hideLoadingMessage() {
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
function onViewStyleChange() {
|
||||
|
||||
showLoadingMessage(page);
|
||||
var viewStyle = getPageData(view).view;
|
||||
|
||||
var query = getQuery();
|
||||
var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
|
||||
var promise2 = Dashboard.getCurrentUser();
|
||||
var itemsContainer = view.querySelector('.itemsContainer');
|
||||
|
||||
Promise.all([promise1, promise2]).then(function (responses) {
|
||||
if (viewStyle == "List") {
|
||||
|
||||
var result = responses[0];
|
||||
var user = responses[1];
|
||||
itemsContainer.classList.add('vertical-list');
|
||||
itemsContainer.classList.remove('vertical-wrap');
|
||||
}
|
||||
else {
|
||||
|
||||
// Scroll back up so they can see the results from the beginning
|
||||
window.scrollTo(0, 0);
|
||||
itemsContainer.classList.remove('vertical-list');
|
||||
itemsContainer.classList.add('vertical-wrap');
|
||||
}
|
||||
itemsContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
var html = '';
|
||||
var view = getPageData().view;
|
||||
function reloadItems() {
|
||||
|
||||
page.querySelector('.listTopPaging').innerHTML = LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
viewButton: false,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: true,
|
||||
layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
|
||||
currentLayout: view
|
||||
showLoadingMessage();
|
||||
|
||||
var query = getQuery(view);
|
||||
var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
|
||||
var promise2 = Dashboard.getCurrentUser();
|
||||
|
||||
Promise.all([promise1, promise2]).then(function (responses) {
|
||||
|
||||
var result = responses[0];
|
||||
var user = responses[1];
|
||||
|
||||
// Scroll back up so they can see the results from the beginning
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
var html = '';
|
||||
var viewStyle = getPageData(view).view;
|
||||
|
||||
view.querySelector('.listTopPaging').innerHTML = LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
viewButton: false,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: true,
|
||||
layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
|
||||
currentLayout: viewStyle
|
||||
|
||||
});
|
||||
|
||||
if (result.TotalRecordCount) {
|
||||
|
||||
if (viewStyle == "List") {
|
||||
|
||||
html = listView.getListViewHtml({
|
||||
items: result.Items,
|
||||
sortBy: query.SortBy
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "PosterCard") {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "square",
|
||||
showTitle: true,
|
||||
lazy: true,
|
||||
coverImage: true,
|
||||
showItemCounts: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "Thumb") {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
preferThumb: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "ThumbCard") {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
lazy: true,
|
||||
preferThumb: true,
|
||||
cardLayout: true,
|
||||
showItemCounts: true
|
||||
});
|
||||
}
|
||||
else {
|
||||
// Poster
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "square",
|
||||
showTitle: true,
|
||||
lazy: true,
|
||||
coverImage: true,
|
||||
showItemCounts: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
|
||||
view.querySelector('.noItemsMessage').classList.add('hide');
|
||||
|
||||
} else {
|
||||
|
||||
view.querySelector('.noItemsMessage').classList.remove('hide');
|
||||
}
|
||||
|
||||
var elem = view.querySelector('.itemsContainer');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
var btnNextPage = view.querySelector('.btnNextPage');
|
||||
if (btnNextPage) {
|
||||
btnNextPage.addEventListener('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems();
|
||||
});
|
||||
}
|
||||
|
||||
var btnPreviousPage = view.querySelector('.btnPreviousPage');
|
||||
if (btnPreviousPage) {
|
||||
btnPreviousPage.addEventListener('click', function () {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems();
|
||||
});
|
||||
}
|
||||
|
||||
var btnChangeLayout = view.querySelector('.btnChangeLayout');
|
||||
if (btnChangeLayout) {
|
||||
btnChangeLayout.addEventListener('layoutchange', function (e) {
|
||||
var layout = e.detail.viewStyle;
|
||||
getPageData(view).view = layout;
|
||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(view), layout);
|
||||
onViewStyleChange();
|
||||
reloadItems();
|
||||
});
|
||||
}
|
||||
|
||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(view), query);
|
||||
|
||||
hideLoadingMessage();
|
||||
});
|
||||
}
|
||||
|
||||
if (result.TotalRecordCount) {
|
||||
|
||||
if (view == "List") {
|
||||
|
||||
html = listView.getListViewHtml({
|
||||
items: result.Items,
|
||||
sortBy: query.SortBy
|
||||
});
|
||||
}
|
||||
else if (view == "PosterCard") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "square",
|
||||
showTitle: true,
|
||||
lazy: true,
|
||||
coverImage: true,
|
||||
showItemCounts: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
else if (view == "Thumb") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
preferThumb: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
else if (view == "ThumbCard") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
lazy: true,
|
||||
preferThumb: true,
|
||||
cardLayout: true,
|
||||
showItemCounts: true
|
||||
});
|
||||
}
|
||||
else {
|
||||
// Poster
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "square",
|
||||
showTitle: true,
|
||||
lazy: true,
|
||||
coverImage: true,
|
||||
showItemCounts: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
|
||||
page.querySelector('.noItemsMessage').classList.add('hide');
|
||||
|
||||
} else {
|
||||
|
||||
page.querySelector('.noItemsMessage').classList.remove('hide');
|
||||
}
|
||||
|
||||
var elem = page.querySelector('.itemsContainer');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
var btnNextPage = page.querySelector('.btnNextPage');
|
||||
if (btnNextPage) {
|
||||
btnNextPage.addEventListener('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems(page);
|
||||
});
|
||||
}
|
||||
|
||||
var btnPreviousPage = page.querySelector('.btnPreviousPage');
|
||||
if (btnPreviousPage) {
|
||||
btnPreviousPage.addEventListener('click', function () {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems(page);
|
||||
});
|
||||
}
|
||||
|
||||
var btnChangeLayout = page.querySelector('.btnChangeLayout');
|
||||
if (btnChangeLayout) {
|
||||
btnChangeLayout.addEventListener('layoutchange', function (e) {
|
||||
var layout = e.detail.viewStyle;
|
||||
getPageData().view = layout;
|
||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
|
||||
reloadItems(page);
|
||||
});
|
||||
}
|
||||
|
||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||
|
||||
hideLoadingMessage(page);
|
||||
view.addEventListener('viewbeforeshow', function() {
|
||||
reloadItems();
|
||||
});
|
||||
}
|
||||
|
||||
pageIdOn('pagebeforeshow', "playlistsPage", function () {
|
||||
|
||||
var page = this;
|
||||
reloadItems(page);
|
||||
});
|
||||
onViewStyleChange();
|
||||
|
||||
};
|
||||
});
|
||||
@ -2497,7 +2497,8 @@ var AppInfo = {};
|
||||
path: '/playlists.html',
|
||||
dependencies: [],
|
||||
autoFocus: false,
|
||||
transition: 'fade'
|
||||
transition: 'fade',
|
||||
controller: 'scripts/playlists'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user