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

convert playlist page

Browse source
This commit is contained in:
Luke Pulverenti 2016-07-30 13:43:55 -04:00
parent b971acb33a
commit 0d9c8e71fe
5 changed files with 196 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

4
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
View file

@ -37,6 +37,10 @@
contain: strict; contain: strict;
} }
.layout-tv .vertical-wrap .card {
contain: layout style;
}
.card, .card:focus { .card, .card:focus {
font-weight: inherit !important; font-weight: inherit !important;
} }

4
dashboard-ui/playlists.html
View file

@ -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 data-role="content">
<div class="viewSettings"> <div class="viewSettings">
@ -7,7 +7,7 @@
&nbsp; &nbsp;
</div> </div>
</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;"> <div class="noItemsMessage hide" style="text-align: center;">
<p>${MessageNoPlaylistsAvailable}</p> <p>${MessageNoPlaylistsAvailable}</p>
</div> </div>

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

@ -118,8 +118,10 @@
if (this.value == 'Custom') { if (this.value == 'Custom') {
page.querySelector('.fldEncoderPath').classList.remove('hide'); page.querySelector('.fldEncoderPath').classList.remove('hide');
page.querySelector('.txtEncoderPath').setAttribute('required', 'required');
} else { } else {
page.querySelector('.fldEncoderPath').classList.add('hide'); page.querySelector('.fldEncoderPath').classList.add('hide');
page.querySelector('.txtEncoderPath').removeAttribute('required');
} }
} }

106
dashboard-ui/scripts/playlists.js
View file

@ -1,8 +1,10 @@
define(['listView'], function (listView) { define(['listView', 'cardBuilder', 'libraryBrowser', 'emby-itemscontainer'], function (listView, cardBuilder, libraryBrowser) {
return function (view, params) {
var data = {}; var data = {};
function getPageData() { function getPageData(context) {
var key = getSavedQueryKey(); var key = getSavedQueryKey(context);
var pageData = data[key]; var pageData = data[key];
if (!pageData) { if (!pageData) {
@ -25,30 +27,52 @@
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) { function hideLoadingMessage() {
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
} }
function reloadItems(page) { function onViewStyleChange() {
showLoadingMessage(page); var viewStyle = getPageData(view).view;
var query = getQuery(); var itemsContainer = view.querySelector('.itemsContainer');
if (viewStyle == "List") {
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
}
else {
itemsContainer.classList.remove('vertical-list');
itemsContainer.classList.add('vertical-wrap');
}
itemsContainer.innerHTML = '';
}
function reloadItems() {
showLoadingMessage();
var query = getQuery(view);
var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query); var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
var promise2 = Dashboard.getCurrentUser(); var promise2 = Dashboard.getCurrentUser();
@ -61,9 +85,9 @@
window.scrollTo(0, 0); window.scrollTo(0, 0);
var html = ''; var html = '';
var view = getPageData().view; var viewStyle = getPageData(view).view;
page.querySelector('.listTopPaging').innerHTML = LibraryBrowser.getQueryPagingHtml({ view.querySelector('.listTopPaging').innerHTML = LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex, startIndex: query.StartIndex,
limit: query.Limit, limit: query.Limit,
totalRecordCount: result.TotalRecordCount, totalRecordCount: result.TotalRecordCount,
@ -72,21 +96,21 @@
updatePageSizeSetting: false, updatePageSizeSetting: false,
addLayoutButton: true, addLayoutButton: true,
layouts: 'List,Poster,PosterCard,Thumb,ThumbCard', layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
currentLayout: view currentLayout: viewStyle
}); });
if (result.TotalRecordCount) { if (result.TotalRecordCount) {
if (view == "List") { if (viewStyle == "List") {
html = listView.getListViewHtml({ html = listView.getListViewHtml({
items: result.Items, items: result.Items,
sortBy: query.SortBy sortBy: query.SortBy
}); });
} }
else if (view == "PosterCard") { else if (viewStyle == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: "square", shape: "square",
showTitle: true, showTitle: true,
@ -96,8 +120,8 @@
cardLayout: true cardLayout: true
}); });
} }
else if (view == "Thumb") { else if (viewStyle == "Thumb") {
html = LibraryBrowser.getPosterViewHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: "backdrop", shape: "backdrop",
showTitle: true, showTitle: true,
@ -107,8 +131,8 @@
overlayPlayButton: true overlayPlayButton: true
}); });
} }
else if (view == "ThumbCard") { else if (viewStyle == "ThumbCard") {
html = LibraryBrowser.getPosterViewHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: "backdrop", shape: "backdrop",
showTitle: true, showTitle: true,
@ -120,7 +144,7 @@
} }
else { else {
// Poster // Poster
html = LibraryBrowser.getPosterViewHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: "square", shape: "square",
showTitle: true, showTitle: true,
@ -132,53 +156,55 @@
}); });
} }
page.querySelector('.noItemsMessage').classList.add('hide'); view.querySelector('.noItemsMessage').classList.add('hide');
} else { } else {
page.querySelector('.noItemsMessage').classList.remove('hide'); view.querySelector('.noItemsMessage').classList.remove('hide');
} }
var elem = page.querySelector('.itemsContainer'); var elem = view.querySelector('.itemsContainer');
elem.innerHTML = html; elem.innerHTML = html;
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(elem);
var btnNextPage = page.querySelector('.btnNextPage'); var btnNextPage = view.querySelector('.btnNextPage');
if (btnNextPage) { if (btnNextPage) {
btnNextPage.addEventListener('click', function () { btnNextPage.addEventListener('click', function () {
query.StartIndex += query.Limit; query.StartIndex += query.Limit;
reloadItems(page); reloadItems();
}); });
} }
var btnPreviousPage = page.querySelector('.btnPreviousPage'); var btnPreviousPage = view.querySelector('.btnPreviousPage');
if (btnPreviousPage) { if (btnPreviousPage) {
btnPreviousPage.addEventListener('click', function () { btnPreviousPage.addEventListener('click', function () {
query.StartIndex -= query.Limit; query.StartIndex -= query.Limit;
reloadItems(page); reloadItems();
}); });
} }
var btnChangeLayout = page.querySelector('.btnChangeLayout'); var btnChangeLayout = view.querySelector('.btnChangeLayout');
if (btnChangeLayout) { if (btnChangeLayout) {
btnChangeLayout.addEventListener('layoutchange', function (e) { btnChangeLayout.addEventListener('layoutchange', function (e) {
var layout = e.detail.viewStyle; var layout = e.detail.viewStyle;
getPageData().view = layout; getPageData(view).view = layout;
LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout); LibraryBrowser.saveViewSetting(getSavedQueryKey(view), layout);
reloadItems(page); onViewStyleChange();
reloadItems();
}); });
} }
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query); LibraryBrowser.saveQueryValues(getSavedQueryKey(view), query);
hideLoadingMessage(page); hideLoadingMessage();
}); });
} }
pageIdOn('pagebeforeshow', "playlistsPage", function () { view.addEventListener('viewbeforeshow', function() {
reloadItems();
var page = this;
reloadItems(page);
}); });
onViewStyleChange();
};
}); });

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

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