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

Migration of playlists to ES6 module

Browse source
This commit is contained in:
Cameron 2020-07-18 09:28:07 +01:00
parent fc96cbd9ad
commit 28bf9c3e6f
3 changed files with 183 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -166,6 +166,7 @@
"src/components/fetchhelper.js", "src/components/fetchhelper.js",
"src/scripts/editorsidebar.js", "src/scripts/editorsidebar.js",
"src/scripts/globalize.js", "src/scripts/globalize.js",
"src/scripts/playlists.js",
"src/scripts/keyboardNavigation.js", "src/scripts/keyboardNavigation.js",
"src/scripts/settings/appSettings.js", "src/scripts/settings/appSettings.js",
"src/scripts/settings/userSettings.js", "src/scripts/settings/userSettings.js",

4
src/scripts/editorsidebar.js
View file

@ -183,7 +183,7 @@ import 'material-icons';
} }
function initializeTree(page, currentUser, openItems, selectedId) { function initializeTree(page, currentUser, openItems, selectedId) {
require(['jstree'], function () { import('jstree').then(() => {
initializeTreeInternal(page, currentUser, openItems, selectedId); initializeTreeInternal(page, currentUser, openItems, selectedId);
}); });
} }
@ -303,7 +303,7 @@ import 'material-icons';
$(document).on('itemsaved', '.metadataEditorPage', function (e, item) { $(document).on('itemsaved', '.metadataEditorPage', function (e, item) {
updateEditorNode(this, item); updateEditorNode(this, item);
}).on('pagebeforeshow', '.metadataEditorPage', function () { }).on('pagebeforeshow', '.metadataEditorPage', function () {
require(['css!assets/css/metadataeditor.css']); import('css!assets/css/metadataeditor.css');
}).on('pagebeforeshow', '.metadataEditorPage', function () { }).on('pagebeforeshow', '.metadataEditorPage', function () {
var page = this; var page = this;
Dashboard.getCurrentUser().then(function (user) { Dashboard.getCurrentUser().then(function (user) {

353
src/scripts/playlists.js
View file

@ -1,195 +1,202 @@
define(['loading', 'listView', 'cardBuilder', 'libraryMenu', 'libraryBrowser', 'apphost', 'imageLoader', 'userSettings', 'emby-itemscontainer'], function (loading, listView, cardBuilder, libraryMenu, libraryBrowser, appHost, imageLoader, userSettings) { import loading from 'loading';
'use strict'; import listView from 'listView';
import cardBuilder from 'cardBuilder';
import libraryMenu from 'libraryMenu';
import libraryBrowser from 'libraryBrowser';
import appHost from 'apphost';
import imageLoader from 'imageLoader';
import userSettings from 'userSettings';
import 'emby-itemscontainer';
return function (view, params) { export default function (view, params) {
function getPageData(context) { function getPageData(context) {
var key = getSavedQueryKey(context); const key = getSavedQueryKey(context);
var pageData = data[key]; let pageData = data[key];
if (!pageData) { if (!pageData) {
pageData = data[key] = { pageData = data[key] = {
query: { query: {
SortBy: 'SortName', SortBy: 'SortName',
SortOrder: 'Ascending', SortOrder: 'Ascending',
IncludeItemTypes: 'Playlist', IncludeItemTypes: 'Playlist',
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete', Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete',
StartIndex: 0 StartIndex: 0
}, },
view: libraryBrowser.getSavedView(key) || 'Poster' view: libraryBrowser.getSavedView(key) || 'Poster'
}; };
if (userSettings.libraryPageSize() > 0) { if (userSettings.libraryPageSize() > 0) {
pageData.query['Limit'] = userSettings.libraryPageSize(); pageData.query['Limit'] = userSettings.libraryPageSize();
}
pageData.query.ParentId = libraryMenu.getTopParentId();
libraryBrowser.loadSavedQueryValues(key, pageData.query);
} }
return pageData; pageData.query.ParentId = libraryMenu.getTopParentId();
libraryBrowser.loadSavedQueryValues(key, pageData.query);
} }
function getQuery(context) { return pageData;
return getPageData(context).query; }
function getQuery(context) {
return getPageData(context).query;
}
function getSavedQueryKey(context) {
if (!context.savedQueryKey) {
context.savedQueryKey = libraryBrowser.getSavedQueryKey();
} }
function getSavedQueryKey(context) { return context.savedQueryKey;
if (!context.savedQueryKey) { }
context.savedQueryKey = libraryBrowser.getSavedQueryKey();
}
return context.savedQueryKey; function showLoadingMessage() {
loading.show();
}
function hideLoadingMessage() {
loading.hide();
}
function onViewStyleChange() {
const viewStyle = getPageData(view).view;
const itemsContainer = view.querySelector('.itemsContainer');
if ('List' == viewStyle) {
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
} else {
itemsContainer.classList.remove('vertical-list');
itemsContainer.classList.add('vertical-wrap');
} }
function showLoadingMessage() { itemsContainer.innerHTML = '';
loading.show(); }
}
function hideLoadingMessage() { function reloadItems() {
loading.hide(); showLoadingMessage();
} const query = getQuery(view);
const promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
// TODO: promise2 is unused, check if necessary.
const promise2 = Dashboard.getCurrentUser();
Promise.all([promise1, promise2]).then(function (responses) {
const result = responses[0];
// TODO: Is the scroll necessary?
window.scrollTo(0, 0);
let html = '';
const 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
});
function onViewStyleChange() { if (result.TotalRecordCount) {
var viewStyle = getPageData(view).view; if (viewStyle == 'List') {
var itemsContainer = view.querySelector('.itemsContainer'); html = listView.getListViewHtml({
items: result.Items,
if ('List' == viewStyle) { sortBy: query.SortBy
itemsContainer.classList.add('vertical-list'); });
itemsContainer.classList.remove('vertical-wrap'); } else if (viewStyle == 'PosterCard') {
} else { html = cardBuilder.getCardsHtml({
itemsContainer.classList.remove('vertical-list'); items: result.Items,
itemsContainer.classList.add('vertical-wrap'); shape: 'square',
} coverImage: true,
showTitle: true,
itemsContainer.innerHTML = ''; cardLayout: true
} });
} else if (viewStyle == 'Thumb') {
function reloadItems() { html = cardBuilder.getCardsHtml({
showLoadingMessage(); items: result.Items,
var query = getQuery(view); shape: 'backdrop',
var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query); showTitle: true,
// TODO: promise2 is unused, check if necessary. centerText: true,
var promise2 = Dashboard.getCurrentUser(); preferThumb: true,
Promise.all([promise1, promise2]).then(function (responses) { overlayPlayButton: true
var result = responses[0]; });
// TODO: Is the scroll necessary? } else if (viewStyle == 'ThumbCard') {
window.scrollTo(0, 0); html = cardBuilder.getCardsHtml({
var html = ''; items: result.Items,
var viewStyle = getPageData(view).view; shape: 'backdrop',
view.querySelector('.listTopPaging').innerHTML = libraryBrowser.getQueryPagingHtml({ showTitle: true,
startIndex: query.StartIndex, preferThumb: true,
limit: query.Limit, cardLayout: true
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',
coverImage: true,
showTitle: true,
cardLayout: true
});
} else if (viewStyle == 'Thumb') {
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: 'backdrop',
showTitle: true,
centerText: true,
preferThumb: true,
overlayPlayButton: true
});
} else if (viewStyle == 'ThumbCard') {
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: 'backdrop',
showTitle: true,
preferThumb: true,
cardLayout: true
});
} else {
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: 'square',
showTitle: true,
coverImage: true,
centerText: true,
overlayPlayButton: true
});
}
view.querySelector('.noItemsMessage').classList.add('hide');
} else { } else {
view.querySelector('.noItemsMessage').classList.remove('hide'); html = cardBuilder.getCardsHtml({
} items: result.Items,
shape: 'square',
var elem = view.querySelector('.itemsContainer'); showTitle: true,
elem.innerHTML = html; coverImage: true,
imageLoader.lazyChildren(elem); centerText: true,
var btnNextPage = view.querySelector('.btnNextPage'); overlayPlayButton: true
if (btnNextPage) {
btnNextPage.addEventListener('click', function () {
if (userSettings.libraryPageSize() > 0) {
query.StartIndex += query.Limit;
}
reloadItems();
}); });
} }
view.querySelector('.noItemsMessage').classList.add('hide');
} else {
view.querySelector('.noItemsMessage').classList.remove('hide');
}
var btnPreviousPage = view.querySelector('.btnPreviousPage'); const elem = view.querySelector('.itemsContainer');
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
const btnNextPage = view.querySelector('.btnNextPage');
if (btnPreviousPage) { if (btnNextPage) {
btnPreviousPage.addEventListener('click', function () { btnNextPage.addEventListener('click', function () {
if (userSettings.libraryPageSize() > 0) { if (userSettings.libraryPageSize() > 0) {
query.StartIndex = Math.max(0, query.StartIndex - query.Limit); query.StartIndex += query.Limit;
} }
reloadItems(); 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();
});
}
var data = {};
view.addEventListener('viewbeforeshow', function () {
reloadItems();
});
view.querySelector('.btnNewPlaylist').addEventListener('click', function () {
require(['playlistEditor'], function (playlistEditor) {
var serverId = ApiClient.serverInfo().Id;
new playlistEditor.showEditor({
items: [],
serverId: serverId
}); });
}
const btnPreviousPage = view.querySelector('.btnPreviousPage');
if (btnPreviousPage) {
btnPreviousPage.addEventListener('click', function () {
if (userSettings.libraryPageSize() > 0) {
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
}
reloadItems();
});
}
const btnChangeLayout = view.querySelector('.btnChangeLayout');
if (btnChangeLayout) {
btnChangeLayout.addEventListener('layoutchange', function (e) {
const layout = e.detail.viewStyle;
getPageData(view).view = layout;
libraryBrowser.saveViewSetting(getSavedQueryKey(view), layout);
onViewStyleChange();
reloadItems();
});
}
libraryBrowser.saveQueryValues(getSavedQueryKey(view), query);
hideLoadingMessage();
});
}
const data = {};
view.addEventListener('viewbeforeshow', function () {
reloadItems();
});
view.querySelector('.btnNewPlaylist').addEventListener('click', function () {
import('playlistEditor').then(({default: playlistEditor}) => {
const serverId = ApiClient.serverInfo().Id;
new playlistEditor.showEditor({
items: [],
serverId: serverId
}); });
}); });
onViewStyleChange(); });
}; onViewStyleChange();
}); }