mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Migration of playlists to ES6 module
This commit is contained in:
Cameron
parent
fc96cbd9ad
commit
28bf9c3e6f
3 changed files with 183 additions and 175 deletions
|
|
@ -166,6 +166,7 @@
|
|||
"src/components/fetchhelper.js",
|
||||
"src/scripts/editorsidebar.js",
|
||||
"src/scripts/globalize.js",
|
||||
"src/scripts/playlists.js",
|
||||
"src/scripts/keyboardNavigation.js",
|
||||
"src/scripts/settings/appSettings.js",
|
||||
"src/scripts/settings/userSettings.js",
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ import 'material-icons';
|
|||
}
|
||||
|
||||
function initializeTree(page, currentUser, openItems, selectedId) {
|
||||
require(['jstree'], function () {
|
||||
import('jstree').then(() => {
|
||||
initializeTreeInternal(page, currentUser, openItems, selectedId);
|
||||
});
|
||||
}
|
||||
|
|
@ -303,7 +303,7 @@ import 'material-icons';
|
|||
$(document).on('itemsaved', '.metadataEditorPage', function (e, item) {
|
||||
updateEditorNode(this, item);
|
||||
}).on('pagebeforeshow', '.metadataEditorPage', function () {
|
||||
require(['css!assets/css/metadataeditor.css']);
|
||||
import('css!assets/css/metadataeditor.css');
|
||||
}).on('pagebeforeshow', '.metadataEditorPage', function () {
|
||||
var page = this;
|
||||
Dashboard.getCurrentUser().then(function (user) {
|
||||
|
|
|
|||
|
|
@ -1,195 +1,202 @@
|
|||
define(['loading', 'listView', 'cardBuilder', 'libraryMenu', 'libraryBrowser', 'apphost', 'imageLoader', 'userSettings', 'emby-itemscontainer'], function (loading, listView, cardBuilder, libraryMenu, libraryBrowser, appHost, imageLoader, userSettings) {
|
||||
'use strict';
|
||||
import loading from 'loading';
|
||||
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) {
|
||||
function getPageData(context) {
|
||||
var key = getSavedQueryKey(context);
|
||||
var pageData = data[key];
|
||||
export default function (view, params) {
|
||||
function getPageData(context) {
|
||||
const key = getSavedQueryKey(context);
|
||||
let pageData = data[key];
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Playlist',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete',
|
||||
StartIndex: 0
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || 'Poster'
|
||||
};
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Playlist',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete',
|
||||
StartIndex: 0
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || 'Poster'
|
||||
};
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||
}
|
||||
|
||||
pageData.query.ParentId = libraryMenu.getTopParentId();
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||
}
|
||||
|
||||
return pageData;
|
||||
pageData.query.ParentId = libraryMenu.getTopParentId();
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
|
||||
function getQuery(context) {
|
||||
return getPageData(context).query;
|
||||
return pageData;
|
||||
}
|
||||
|
||||
function getQuery(context) {
|
||||
return getPageData(context).query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey();
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey();
|
||||
}
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
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() {
|
||||
loading.show();
|
||||
}
|
||||
itemsContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
function hideLoadingMessage() {
|
||||
loading.hide();
|
||||
}
|
||||
function reloadItems() {
|
||||
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() {
|
||||
var viewStyle = getPageData(view).view;
|
||||
var 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');
|
||||
}
|
||||
|
||||
itemsContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
function reloadItems() {
|
||||
showLoadingMessage();
|
||||
var query = getQuery(view);
|
||||
var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
|
||||
// TODO: promise2 is unused, check if necessary.
|
||||
var promise2 = Dashboard.getCurrentUser();
|
||||
Promise.all([promise1, promise2]).then(function (responses) {
|
||||
var result = responses[0];
|
||||
// TODO: Is the scroll necessary?
|
||||
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',
|
||||
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');
|
||||
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 {
|
||||
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 () {
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex += query.Limit;
|
||||
}
|
||||
reloadItems();
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'square',
|
||||
showTitle: true,
|
||||
coverImage: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
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) {
|
||||
btnPreviousPage.addEventListener('click', function () {
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex = Math.max(0, 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();
|
||||
});
|
||||
}
|
||||
|
||||
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
|
||||
if (btnNextPage) {
|
||||
btnNextPage.addEventListener('click', function () {
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex += query.Limit;
|
||||
}
|
||||
reloadItems();
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue