mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge branch 'master' into migrate-to-ES6-46
This commit is contained in:
Cameron
GitHub
commit
7a0dfe982d
40 changed files with 1987 additions and 1692 deletions
|
|
@ -3,6 +3,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
|
|||
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
loading = loading.default || loading;
|
||||
focusManager = focusManager.default || focusManager;
|
||||
|
||||
function getInitialLiveTvQuery(instance, params) {
|
||||
var query = {
|
||||
|
|
|
|||
|
|
@ -1,133 +1,134 @@
|
|||
define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
|
||||
'use strict';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import imageLoader from 'imageLoader';
|
||||
import libraryBrowser from 'libraryBrowser';
|
||||
import loading from 'loading';
|
||||
import events from 'events';
|
||||
import * as userSettings from 'userSettings';
|
||||
import 'emby-itemscontainer';
|
||||
|
||||
loading = loading.default || loading;
|
||||
libraryBrowser = libraryBrowser.default || libraryBrowser;
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData() {
|
||||
if (!pageData) {
|
||||
pageData = {
|
||||
query: {
|
||||
StartIndex: 0,
|
||||
Fields: 'PrimaryImageAspectRatio'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
function getPageData() {
|
||||
if (!pageData) {
|
||||
pageData = {
|
||||
query: {
|
||||
StartIndex: 0,
|
||||
Fields: 'PrimaryImageAspectRatio'
|
||||
}
|
||||
};
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||
}
|
||||
|
||||
return pageData;
|
||||
}
|
||||
|
||||
function getQuery() {
|
||||
return getPageData().query;
|
||||
}
|
||||
|
||||
function getChannelsHtml(channels) {
|
||||
return cardBuilder.getCardsHtml({
|
||||
items: channels,
|
||||
shape: 'square',
|
||||
showTitle: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true,
|
||||
showCurrentProgram: true,
|
||||
showCurrentProgramTime: true
|
||||
});
|
||||
}
|
||||
|
||||
function renderChannels(context, result) {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||
query.StartIndex += query.Limit;
|
||||
}
|
||||
reloadItems(context);
|
||||
}
|
||||
|
||||
function onPreviousPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
return pageData;
|
||||
}
|
||||
|
||||
function getQuery() {
|
||||
return getPageData().query;
|
||||
}
|
||||
|
||||
function getChannelsHtml(channels) {
|
||||
return cardBuilder.getCardsHtml({
|
||||
items: channels,
|
||||
shape: 'square',
|
||||
showTitle: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true,
|
||||
showCurrentProgram: true,
|
||||
showCurrentProgramTime: true
|
||||
});
|
||||
}
|
||||
|
||||
function renderChannels(context, result) {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex += query.Limit;
|
||||
}
|
||||
reloadItems(context);
|
||||
}
|
||||
|
||||
function onPreviousPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
||||
}
|
||||
reloadItems(context);
|
||||
}
|
||||
|
||||
var query = getQuery();
|
||||
context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
filterButton: false
|
||||
});
|
||||
var html = getChannelsHtml(result.Items);
|
||||
var elem = context.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
imageLoader.lazyChildren(elem);
|
||||
var i;
|
||||
var length;
|
||||
var elems;
|
||||
|
||||
for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
||||
}
|
||||
reloadItems(context);
|
||||
}
|
||||
|
||||
function showFilterMenu(context) {
|
||||
require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
|
||||
var filterDialog = new filterDialogFactory({
|
||||
query: getQuery(),
|
||||
mode: 'livetvchannels',
|
||||
serverId: ApiClient.serverId()
|
||||
});
|
||||
events.on(filterDialog, 'filterchange', function () {
|
||||
reloadItems(context);
|
||||
});
|
||||
filterDialog.show();
|
||||
});
|
||||
}
|
||||
|
||||
function reloadItems(context, save) {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
var query = getQuery();
|
||||
var apiClient = ApiClient;
|
||||
query.UserId = apiClient.getCurrentUserId();
|
||||
apiClient.getLiveTvChannels(query).then(function (result) {
|
||||
renderChannels(context, result);
|
||||
loading.hide();
|
||||
isLoading = false;
|
||||
|
||||
require(['autoFocuser'], function (autoFocuser) {
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var pageData;
|
||||
var self = this;
|
||||
var isLoading = false;
|
||||
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
|
||||
showFilterMenu(tabContent);
|
||||
const query = getQuery();
|
||||
context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
filterButton: false
|
||||
});
|
||||
const html = getChannelsHtml(result.Items);
|
||||
const elem = context.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
imageLoader.lazyChildren(elem);
|
||||
let i;
|
||||
let length;
|
||||
let elems;
|
||||
|
||||
self.renderTab = function () {
|
||||
reloadItems(tabContent);
|
||||
};
|
||||
for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
}
|
||||
|
||||
function showFilterMenu(context) {
|
||||
import(['components/filterdialog/filterdialog']).then(({default: FilterDialog}) => {
|
||||
const filterDialog = new FilterDialog({
|
||||
query: getQuery(),
|
||||
mode: 'livetvchannels',
|
||||
serverId: ApiClient.serverId()
|
||||
});
|
||||
events.on(filterDialog, 'filterchange', function () {
|
||||
reloadItems(context);
|
||||
});
|
||||
filterDialog.show();
|
||||
});
|
||||
}
|
||||
|
||||
function reloadItems(context, save) {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
const query = getQuery();
|
||||
const apiClient = ApiClient;
|
||||
query.UserId = apiClient.getCurrentUserId();
|
||||
apiClient.getLiveTvChannels(query).then(function (result) {
|
||||
renderChannels(context, result);
|
||||
loading.hide();
|
||||
isLoading = false;
|
||||
|
||||
import('autoFocuser').then(({default: autoFocuser}) => {
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
let pageData;
|
||||
const self = this;
|
||||
let isLoading = false;
|
||||
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
|
||||
showFilterMenu(tabContent);
|
||||
});
|
||||
|
||||
self.renderTab = function () {
|
||||
reloadItems(tabContent);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,111 +1,112 @@
|
|||
define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'scripts/livetvcomponents', 'listViewStyle', 'emby-itemscontainer'], function (layoutManager, loading, cardBuilder, appHost, imageLoader) {
|
||||
'use strict';
|
||||
import loading from 'loading';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import imageLoader from 'imageLoader';
|
||||
import 'scripts/livetvcomponents';
|
||||
import 'listViewStyle';
|
||||
import 'emby-itemscontainer';
|
||||
|
||||
loading = loading.default || loading;
|
||||
|
||||
function renderRecordings(elem, recordings, cardOptions, scrollX) {
|
||||
if (!elem) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (recordings.length) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
|
||||
var recordingItems = elem.querySelector('.recordingItems');
|
||||
|
||||
if (scrollX) {
|
||||
recordingItems.classList.add('scrollX');
|
||||
recordingItems.classList.add('hiddenScrollX');
|
||||
recordingItems.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
recordingItems.classList.remove('scrollX');
|
||||
recordingItems.classList.remove('hiddenScrollX');
|
||||
recordingItems.classList.add('vertical-wrap');
|
||||
}
|
||||
|
||||
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
|
||||
items: recordings,
|
||||
shape: scrollX ? 'autooverflow' : 'auto',
|
||||
defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
coverImage: true,
|
||||
cardLayout: false,
|
||||
centerText: true,
|
||||
allowBottomPadding: !scrollX,
|
||||
preferThumb: 'auto',
|
||||
overlayText: false
|
||||
}, cardOptions || {}));
|
||||
imageLoader.lazyChildren(recordingItems);
|
||||
function renderRecordings(elem, recordings, cardOptions, scrollX) {
|
||||
if (!elem) {
|
||||
return;
|
||||
}
|
||||
|
||||
function renderLatestRecordings(context, promise) {
|
||||
promise.then(function (result) {
|
||||
renderRecordings(context.querySelector('#latestRecordings'), result.Items, {
|
||||
showYear: true,
|
||||
lines: 2
|
||||
}, false);
|
||||
loading.hide();
|
||||
});
|
||||
if (recordings.length) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
|
||||
function renderRecordingFolders(context, promise) {
|
||||
promise.then(function (result) {
|
||||
renderRecordings(context.querySelector('#recordingFolders'), result.Items, {
|
||||
showYear: false,
|
||||
showParentTitle: false
|
||||
}, false);
|
||||
});
|
||||
const recordingItems = elem.querySelector('.recordingItems');
|
||||
|
||||
if (scrollX) {
|
||||
recordingItems.classList.add('scrollX');
|
||||
recordingItems.classList.add('hiddenScrollX');
|
||||
recordingItems.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
recordingItems.classList.remove('scrollX');
|
||||
recordingItems.classList.remove('hiddenScrollX');
|
||||
recordingItems.classList.add('vertical-wrap');
|
||||
}
|
||||
|
||||
function onMoreClick(e) {
|
||||
var type = this.getAttribute('data-type');
|
||||
var serverId = ApiClient.serverId();
|
||||
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
|
||||
items: recordings,
|
||||
shape: scrollX ? 'autooverflow' : 'auto',
|
||||
defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
coverImage: true,
|
||||
cardLayout: false,
|
||||
centerText: true,
|
||||
allowBottomPadding: !scrollX,
|
||||
preferThumb: 'auto',
|
||||
overlayText: false
|
||||
}, cardOptions || {}));
|
||||
imageLoader.lazyChildren(recordingItems);
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'latest':
|
||||
Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId);
|
||||
}
|
||||
function renderLatestRecordings(context, promise) {
|
||||
promise.then(function (result) {
|
||||
renderRecordings(context.querySelector('#latestRecordings'), result.Items, {
|
||||
showYear: true,
|
||||
lines: 2
|
||||
}, false);
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function renderRecordingFolders(context, promise) {
|
||||
promise.then(function (result) {
|
||||
renderRecordings(context.querySelector('#recordingFolders'), result.Items, {
|
||||
showYear: false,
|
||||
showParentTitle: false
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
|
||||
function onMoreClick(e) {
|
||||
const type = this.getAttribute('data-type');
|
||||
const serverId = ApiClient.serverId();
|
||||
|
||||
switch (type) {
|
||||
case 'latest':
|
||||
Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId);
|
||||
}
|
||||
}
|
||||
|
||||
export default function (view, params, tabContent) {
|
||||
function enableFullRender() {
|
||||
return new Date().getTime() - lastFullRender > 300000;
|
||||
}
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
function enableFullRender() {
|
||||
return new Date().getTime() - lastFullRender > 300000;
|
||||
let foldersPromise;
|
||||
let latestPromise;
|
||||
const self = this;
|
||||
let lastFullRender = 0;
|
||||
const moreButtons = tabContent.querySelectorAll('.more');
|
||||
|
||||
for (let i = 0, length = moreButtons.length; i < length; i++) {
|
||||
moreButtons[i].addEventListener('click', onMoreClick);
|
||||
}
|
||||
|
||||
self.preRender = function () {
|
||||
if (enableFullRender()) {
|
||||
latestPromise = ApiClient.getLiveTvRecordings({
|
||||
UserId: Dashboard.getCurrentUserId(),
|
||||
Limit: 12,
|
||||
Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
|
||||
EnableTotalRecordCount: false,
|
||||
EnableImageTypes: 'Primary,Thumb,Backdrop'
|
||||
});
|
||||
foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId());
|
||||
}
|
||||
|
||||
var foldersPromise;
|
||||
var latestPromise;
|
||||
var self = this;
|
||||
var lastFullRender = 0;
|
||||
var moreButtons = tabContent.querySelectorAll('.more');
|
||||
|
||||
for (var i = 0, length = moreButtons.length; i < length; i++) {
|
||||
moreButtons[i].addEventListener('click', onMoreClick);
|
||||
}
|
||||
|
||||
self.preRender = function () {
|
||||
if (enableFullRender()) {
|
||||
latestPromise = ApiClient.getLiveTvRecordings({
|
||||
UserId: Dashboard.getCurrentUserId(),
|
||||
Limit: 12,
|
||||
Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
|
||||
EnableTotalRecordCount: false,
|
||||
EnableImageTypes: 'Primary,Thumb,Backdrop'
|
||||
});
|
||||
foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId());
|
||||
}
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
if (enableFullRender()) {
|
||||
loading.show();
|
||||
renderLatestRecordings(tabContent, latestPromise);
|
||||
renderRecordingFolders(tabContent, foldersPromise);
|
||||
lastFullRender = new Date().getTime();
|
||||
}
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
self.renderTab = function () {
|
||||
if (enableFullRender()) {
|
||||
loading.show();
|
||||
renderLatestRecordings(tabContent, latestPromise);
|
||||
renderRecordingFolders(tabContent, foldersPromise);
|
||||
lastFullRender = new Date().getTime();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,122 +1,124 @@
|
|||
define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'scripts/livetvcomponents', 'emby-button', 'emby-itemscontainer'], function (layoutManager, cardBuilder, appHost, imageLoader, loading) {
|
||||
'use strict';
|
||||
import layoutManager from 'layoutManager';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import imageLoader from 'imageLoader';
|
||||
import loading from 'loading';
|
||||
import 'scripts/livetvcomponents';
|
||||
import 'emby-button';
|
||||
import 'emby-itemscontainer';
|
||||
|
||||
loading = loading.default || loading;
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
}
|
||||
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
function renderRecordings(elem, recordings, cardOptions) {
|
||||
if (recordings.length) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
|
||||
function renderRecordings(elem, recordings, cardOptions) {
|
||||
if (recordings.length) {
|
||||
const recordingItems = elem.querySelector('.recordingItems');
|
||||
|
||||
if (enableScrollX()) {
|
||||
recordingItems.classList.add('scrollX');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
recordingItems.classList.add('smoothScrollX');
|
||||
}
|
||||
|
||||
recordingItems.classList.add('hiddenScrollX');
|
||||
recordingItems.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
recordingItems.classList.remove('scrollX');
|
||||
recordingItems.classList.remove('smoothScrollX');
|
||||
recordingItems.classList.remove('hiddenScrollX');
|
||||
recordingItems.classList.add('vertical-wrap');
|
||||
}
|
||||
|
||||
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
|
||||
items: recordings,
|
||||
shape: enableScrollX() ? 'autooverflow' : 'auto',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
coverImage: true,
|
||||
cardLayout: false,
|
||||
centerText: true,
|
||||
allowBottomPadding: !enableScrollX(),
|
||||
preferThumb: 'auto'
|
||||
}, cardOptions || {}));
|
||||
imageLoader.lazyChildren(recordingItems);
|
||||
}
|
||||
|
||||
function getBackdropShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
|
||||
function renderActiveRecordings(context, promise) {
|
||||
promise.then(function (result) {
|
||||
renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
|
||||
shape: enableScrollX() ? 'autooverflow' : 'auto',
|
||||
defaultShape: getBackdropShape(),
|
||||
showParentTitle: false,
|
||||
showParentTitleOrTitle: true,
|
||||
showTitle: false,
|
||||
showAirTime: true,
|
||||
showAirEndTime: true,
|
||||
showChannelName: true,
|
||||
coverImage: true,
|
||||
overlayText: false,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderTimers(context, timers, options) {
|
||||
LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
|
||||
const elem = context;
|
||||
|
||||
if (html) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
|
||||
var recordingItems = elem.querySelector('.recordingItems');
|
||||
elem.querySelector('.recordingItems').innerHTML = html;
|
||||
imageLoader.lazyChildren(elem);
|
||||
});
|
||||
}
|
||||
|
||||
if (enableScrollX()) {
|
||||
recordingItems.classList.add('scrollX');
|
||||
function renderUpcomingRecordings(context, promise) {
|
||||
promise.then(function (result) {
|
||||
renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
if (layoutManager.tv) {
|
||||
recordingItems.classList.add('smoothScrollX');
|
||||
}
|
||||
export default function (view, params, tabContent) {
|
||||
let activeRecordingsPromise;
|
||||
let upcomingRecordingsPromise;
|
||||
const self = this;
|
||||
tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
|
||||
self.preRender();
|
||||
self.renderTab();
|
||||
});
|
||||
|
||||
recordingItems.classList.add('hiddenScrollX');
|
||||
recordingItems.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
recordingItems.classList.remove('scrollX');
|
||||
recordingItems.classList.remove('smoothScrollX');
|
||||
recordingItems.classList.remove('hiddenScrollX');
|
||||
recordingItems.classList.add('vertical-wrap');
|
||||
}
|
||||
|
||||
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
|
||||
items: recordings,
|
||||
shape: enableScrollX() ? 'autooverflow' : 'auto',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
coverImage: true,
|
||||
cardLayout: false,
|
||||
centerText: true,
|
||||
allowBottomPadding: !enableScrollX(),
|
||||
preferThumb: 'auto'
|
||||
}, cardOptions || {}));
|
||||
imageLoader.lazyChildren(recordingItems);
|
||||
}
|
||||
|
||||
function getBackdropShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
|
||||
function renderActiveRecordings(context, promise) {
|
||||
promise.then(function (result) {
|
||||
renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
|
||||
shape: enableScrollX() ? 'autooverflow' : 'auto',
|
||||
defaultShape: getBackdropShape(),
|
||||
showParentTitle: false,
|
||||
showParentTitleOrTitle: true,
|
||||
showTitle: false,
|
||||
showAirTime: true,
|
||||
showAirEndTime: true,
|
||||
showChannelName: true,
|
||||
coverImage: true,
|
||||
overlayText: false,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
self.preRender = function () {
|
||||
activeRecordingsPromise = ApiClient.getLiveTvRecordings({
|
||||
UserId: Dashboard.getCurrentUserId(),
|
||||
IsInProgress: true,
|
||||
Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
|
||||
EnableTotalRecordCount: false,
|
||||
EnableImageTypes: 'Primary,Thumb,Backdrop'
|
||||
});
|
||||
}
|
||||
|
||||
function renderTimers(context, timers, options) {
|
||||
LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
|
||||
var elem = context;
|
||||
|
||||
if (html) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
|
||||
elem.querySelector('.recordingItems').innerHTML = html;
|
||||
imageLoader.lazyChildren(elem);
|
||||
upcomingRecordingsPromise = ApiClient.getLiveTvTimers({
|
||||
IsActive: false,
|
||||
IsScheduled: true
|
||||
});
|
||||
}
|
||||
|
||||
function renderUpcomingRecordings(context, promise) {
|
||||
promise.then(function (result) {
|
||||
renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
var activeRecordingsPromise;
|
||||
var upcomingRecordingsPromise;
|
||||
var self = this;
|
||||
tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
|
||||
self.preRender();
|
||||
self.renderTab();
|
||||
});
|
||||
|
||||
self.preRender = function () {
|
||||
activeRecordingsPromise = ApiClient.getLiveTvRecordings({
|
||||
UserId: Dashboard.getCurrentUserId(),
|
||||
IsInProgress: true,
|
||||
Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
|
||||
EnableTotalRecordCount: false,
|
||||
EnableImageTypes: 'Primary,Thumb,Backdrop'
|
||||
});
|
||||
upcomingRecordingsPromise = ApiClient.getLiveTvTimers({
|
||||
IsActive: false,
|
||||
IsScheduled: true
|
||||
});
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
loading.show();
|
||||
renderActiveRecordings(tabContent, activeRecordingsPromise);
|
||||
renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
self.renderTab = function () {
|
||||
loading.show();
|
||||
renderActiveRecordings(tabContent, activeRecordingsPromise);
|
||||
renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +1,52 @@
|
|||
define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-icon-button-light', 'emby-button'], function (datetime, cardBuilder, imageLoader, appHost, loading) {
|
||||
'use strict';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import imageLoader from 'imageLoader';
|
||||
import loading from 'loading';
|
||||
import 'paper-icon-button-light';
|
||||
import 'emby-button';
|
||||
|
||||
loading = loading.default || loading;
|
||||
function renderTimers(context, timers) {
|
||||
const html = cardBuilder.getCardsHtml({
|
||||
items: timers,
|
||||
shape: 'auto',
|
||||
defaultShape: 'portrait',
|
||||
showTitle: true,
|
||||
cardLayout: false,
|
||||
preferThumb: 'auto',
|
||||
coverImage: true,
|
||||
overlayText: false,
|
||||
showSeriesTimerTime: true,
|
||||
showSeriesTimerChannel: true,
|
||||
centerText: true,
|
||||
overlayMoreButton: true,
|
||||
lines: 3
|
||||
});
|
||||
const elem = context.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
imageLoader.lazyChildren(elem);
|
||||
loading.hide();
|
||||
}
|
||||
|
||||
function renderTimers(context, timers) {
|
||||
var html = '';
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: timers,
|
||||
shape: 'auto',
|
||||
defaultShape: 'portrait',
|
||||
showTitle: true,
|
||||
cardLayout: false,
|
||||
preferThumb: 'auto',
|
||||
coverImage: true,
|
||||
overlayText: false,
|
||||
showSeriesTimerTime: true,
|
||||
showSeriesTimerChannel: true,
|
||||
centerText: true,
|
||||
overlayMoreButton: true,
|
||||
lines: 3
|
||||
});
|
||||
var elem = context.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
imageLoader.lazyChildren(elem);
|
||||
loading.hide();
|
||||
}
|
||||
function reload(context, promise) {
|
||||
loading.show();
|
||||
promise.then(function (result) {
|
||||
renderTimers(context, result.Items);
|
||||
});
|
||||
}
|
||||
|
||||
function reload(context, promise) {
|
||||
loading.show();
|
||||
promise.then(function (result) {
|
||||
renderTimers(context, result.Items);
|
||||
});
|
||||
}
|
||||
const query = {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending'
|
||||
};
|
||||
|
||||
var query = {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending'
|
||||
export default function (view, params, tabContent) {
|
||||
let timersPromise;
|
||||
const self = this;
|
||||
|
||||
self.preRender = function () {
|
||||
timersPromise = ApiClient.getLiveTvSeriesTimers(query);
|
||||
};
|
||||
return function (view, params, tabContent) {
|
||||
var timersPromise;
|
||||
var self = this;
|
||||
|
||||
self.preRender = function () {
|
||||
timersPromise = ApiClient.getLiveTvSeriesTimers(query);
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
reload(tabContent, timersPromise);
|
||||
};
|
||||
self.renderTab = function () {
|
||||
reload(tabContent, timersPromise);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
|
||||
'use strict';
|
||||
import loading from 'loading';
|
||||
import libraryBrowser from 'libraryBrowser';
|
||||
import imageLoader from 'imageLoader';
|
||||
import listView from 'listView';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import * as userSettings from 'userSettings';
|
||||
import globalize from 'globalize';
|
||||
import 'emby-itemscontainer';
|
||||
|
||||
loading = loading.default || loading;
|
||||
libraryBrowser = libraryBrowser.default || libraryBrowser;
|
||||
/* eslint-disable indent */
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData(context) {
|
||||
var key = getSavedQueryKey(context);
|
||||
var pageData = data[key];
|
||||
const key = getSavedQueryKey(context);
|
||||
let pageData = data[key];
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
|
|
@ -47,9 +52,9 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
|
|||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function onViewStyleChange() {
|
||||
var viewStyle = self.getCurrentViewStyle();
|
||||
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
const onViewStyleChange = () => {
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
|
||||
if (viewStyle == 'List') {
|
||||
itemsContainer.classList.add('vertical-list');
|
||||
|
|
@ -60,13 +65,13 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
|
|||
}
|
||||
|
||||
itemsContainer.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
function reloadItems(page) {
|
||||
const reloadItems = (page) => {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
var query = getQuery(page);
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
|
||||
const query = getQuery(page);
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
|
|
@ -90,8 +95,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
|
|||
}
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
var html;
|
||||
var pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
let html;
|
||||
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
|
|
@ -101,7 +106,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
|
|||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
var viewStyle = self.getCurrentViewStyle();
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
if (viewStyle == 'Thumb') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
|
|
@ -155,22 +160,21 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
|
|||
showTitle: true
|
||||
});
|
||||
}
|
||||
var i;
|
||||
var length;
|
||||
var elems = tabContent.querySelectorAll('.paging');
|
||||
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].innerHTML = pagingHtml;
|
||||
let elems = tabContent.querySelectorAll('.paging');
|
||||
|
||||
for (const elem of elems) {
|
||||
elem.innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
if (!result.Items.length) {
|
||||
|
|
@ -182,28 +186,27 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
|
|||
html += '</div>';
|
||||
}
|
||||
|
||||
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = html;
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||
loading.hide();
|
||||
isLoading = false;
|
||||
|
||||
require(['autoFocuser'], function (autoFocuser) {
|
||||
import('autoFocuser').then(({default: autoFocuser}) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var self = this;
|
||||
var data = {};
|
||||
var isLoading = false;
|
||||
const data = {};
|
||||
let isLoading = false;
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
this.getCurrentViewStyle = function () {
|
||||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
function initPage(tabContent) {
|
||||
const initPage = (tabContent) => {
|
||||
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||
libraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
|
|
@ -230,36 +233,37 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
|
|||
button: e.target
|
||||
});
|
||||
});
|
||||
var btnSelectView = tabContent.querySelector('.btnSelectView');
|
||||
const btnSelectView = tabContent.querySelector('.btnSelectView');
|
||||
btnSelectView.addEventListener('click', function (e) {
|
||||
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||
});
|
||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||
var viewStyle = e.detail.viewStyle;
|
||||
const viewStyle = e.detail.viewStyle;
|
||||
getPageData(tabContent).view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
|
||||
getQuery(tabContent).StartIndex = 0;
|
||||
onViewStyleChange();
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
tabContent.querySelector('.btnNewCollection').addEventListener('click', function () {
|
||||
require(['collectionEditor'], function (collectionEditor) {
|
||||
var serverId = ApiClient.serverInfo().Id;
|
||||
tabContent.querySelector('.btnNewCollection').addEventListener('click', () => {
|
||||
import('collectionEditor').then(({default: collectionEditor}) => {
|
||||
const serverId = ApiClient.serverInfo().Id;
|
||||
new collectionEditor.showEditor({
|
||||
items: [],
|
||||
serverId: serverId
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
initPage(tabContent);
|
||||
onViewStyleChange();
|
||||
|
||||
self.renderTab = function () {
|
||||
this.renderTab = function () {
|
||||
reloadItems(tabContent);
|
||||
};
|
||||
|
||||
self.destroy = function () {};
|
||||
};
|
||||
});
|
||||
this.destroy = function () {};
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) {
|
||||
'use strict';
|
||||
import layoutManager from 'layoutManager';
|
||||
import loading from 'loading';
|
||||
import libraryBrowser from 'libraryBrowser';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import lazyLoader from 'lazyLoader';
|
||||
import globalize from 'globalize';
|
||||
import appRouter from 'appRouter';
|
||||
import 'emby-button';
|
||||
|
||||
loading = loading.default || loading;
|
||||
libraryBrowser = libraryBrowser.default || libraryBrowser;
|
||||
/* eslint-disable indent */
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData() {
|
||||
var key = getSavedQueryKey();
|
||||
var pageData = data[key];
|
||||
const key = getSavedQueryKey();
|
||||
let pageData = data[key];
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
|
|
@ -37,7 +42,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
|
|||
|
||||
function getPromise() {
|
||||
loading.show();
|
||||
var query = getQuery();
|
||||
const query = getQuery();
|
||||
return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
|
||||
}
|
||||
|
||||
|
|
@ -53,18 +58,18 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
|
|||
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
||||
}
|
||||
|
||||
function fillItemsContainer(entry) {
|
||||
var elem = entry.target;
|
||||
var id = elem.getAttribute('data-id');
|
||||
var viewStyle = self.getCurrentViewStyle();
|
||||
var limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
|
||||
const fillItemsContainer = (entry) => {
|
||||
const elem = entry.target;
|
||||
const id = elem.getAttribute('data-id');
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
|
||||
|
||||
if (enableScrollX()) {
|
||||
limit = 10;
|
||||
}
|
||||
|
||||
var enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
|
||||
var query = {
|
||||
const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
|
||||
const query = {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Movie',
|
||||
|
|
@ -126,17 +131,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
|
|||
tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function reloadItems(context, promise) {
|
||||
var query = getQuery();
|
||||
const query = getQuery();
|
||||
promise.then(function (result) {
|
||||
var elem = context.querySelector('#items');
|
||||
var html = '';
|
||||
var items = result.Items;
|
||||
const elem = context.querySelector('#items');
|
||||
let html = '';
|
||||
const items = result.Items;
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
var item = items[i];
|
||||
for (let i = 0, length = items.length; i < length; i++) {
|
||||
const item = items[i];
|
||||
|
||||
html += '<div class="verticalSection">';
|
||||
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
|
||||
|
|
@ -151,7 +156,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
|
|||
html += '</a>';
|
||||
html += '</div>';
|
||||
if (enableScrollX()) {
|
||||
var scrollXClass = 'scrollX hiddenScrollX';
|
||||
let scrollXClass = 'scrollX hiddenScrollX';
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale';
|
||||
|
|
@ -182,37 +187,37 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
|
|||
});
|
||||
}
|
||||
|
||||
function fullyReload() {
|
||||
self.preRender();
|
||||
self.renderTab();
|
||||
}
|
||||
const fullyReload = () => {
|
||||
this.preRender();
|
||||
this.renderTab();
|
||||
};
|
||||
|
||||
var self = this;
|
||||
var data = {};
|
||||
const data = {};
|
||||
|
||||
self.getViewStyles = function () {
|
||||
this.getViewStyles = function () {
|
||||
return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
|
||||
};
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
this.getCurrentViewStyle = function () {
|
||||
return getPageData().view;
|
||||
};
|
||||
|
||||
self.setCurrentViewStyle = function (viewStyle) {
|
||||
this.setCurrentViewStyle = function (viewStyle) {
|
||||
getPageData().view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
|
||||
fullyReload();
|
||||
};
|
||||
|
||||
self.enableViewSelection = true;
|
||||
var promise;
|
||||
this.enableViewSelection = true;
|
||||
let promise;
|
||||
|
||||
self.preRender = function () {
|
||||
this.preRender = function () {
|
||||
promise = getPromise();
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
this.renderTab = function () {
|
||||
reloadItems(tabContent, promise);
|
||||
};
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) {
|
||||
'use strict';
|
||||
import loading from 'loading';
|
||||
import * as userSettings from 'userSettings';
|
||||
import events from 'events';
|
||||
import libraryBrowser from 'libraryBrowser';
|
||||
import AlphaPicker from 'alphaPicker';
|
||||
import listView from 'listView';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import globalize from 'globalize';
|
||||
import 'emby-itemscontainer';
|
||||
|
||||
loading = loading.default || loading;
|
||||
libraryBrowser = libraryBrowser.default || libraryBrowser;
|
||||
/* eslint-disable indent */
|
||||
|
||||
return function (view, params, tabContent, options) {
|
||||
function onViewStyleChange() {
|
||||
if (self.getCurrentViewStyle() == 'List') {
|
||||
export default function (view, params, tabContent, options) {
|
||||
const onViewStyleChange = () => {
|
||||
if (this.getCurrentViewStyle() == 'List') {
|
||||
itemsContainer.classList.add('vertical-list');
|
||||
itemsContainer.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
|
|
@ -15,13 +21,13 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
}
|
||||
|
||||
itemsContainer.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
function updateFilterControls() {
|
||||
if (self.alphaPicker) {
|
||||
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
||||
const updateFilterControls = () => {
|
||||
if (this.alphaPicker) {
|
||||
this.alphaPicker.value(query.NameStartsWithOrGreater);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function fetchData() {
|
||||
isLoading = true;
|
||||
|
|
@ -54,7 +60,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
|
||||
window.scrollTo(0, 0);
|
||||
updateFilterControls();
|
||||
var pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
|
|
@ -64,35 +70,30 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
var i;
|
||||
var length;
|
||||
var elems = tabContent.querySelectorAll('.paging');
|
||||
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].innerHTML = pagingHtml;
|
||||
for (const elem of tabContent.querySelectorAll('.paging')) {
|
||||
elem.innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
for (const elem of tabContent.querySelectorAll('.btnNextPage')) {
|
||||
elem.addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
for (const elem of tabContent.querySelectorAll('.btnPreviousPage')) {
|
||||
elem.addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
isLoading = false;
|
||||
loading.hide();
|
||||
|
||||
require(['autoFocuser'], function (autoFocuser) {
|
||||
import('autoFocuser').then(({default: autoFocuser}) => {
|
||||
autoFocuser.autoFocus(tabContent);
|
||||
});
|
||||
}
|
||||
|
||||
function getItemsHtml(items) {
|
||||
var html;
|
||||
var viewStyle = self.getCurrentViewStyle();
|
||||
const getItemsHtml = (items) => {
|
||||
let html;
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
|
||||
if (viewStyle == 'Thumb') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
|
|
@ -156,22 +157,22 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
};
|
||||
|
||||
function initPage(tabContent) {
|
||||
const initPage = (tabContent) => {
|
||||
itemsContainer.fetchData = fetchData;
|
||||
itemsContainer.getItemsHtml = getItemsHtml;
|
||||
itemsContainer.afterRefresh = afterRefresh;
|
||||
var alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||
let alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||
|
||||
if (alphaPickerElement) {
|
||||
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
||||
var newValue = e.detail.value;
|
||||
let newValue = e.detail.value;
|
||||
query.NameStartsWithOrGreater = newValue;
|
||||
query.StartIndex = 0;
|
||||
itemsContainer.refreshItems();
|
||||
});
|
||||
self.alphaPicker = new AlphaPicker.default({
|
||||
this.alphaPicker = new AlphaPicker({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
|
@ -181,14 +182,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
itemsContainer.classList.add('padded-right-withalphapicker');
|
||||
}
|
||||
|
||||
var btnFilter = tabContent.querySelector('.btnFilter');
|
||||
const btnFilter = tabContent.querySelector('.btnFilter');
|
||||
|
||||
if (btnFilter) {
|
||||
btnFilter.addEventListener('click', function () {
|
||||
self.showFilterMenu();
|
||||
btnFilter.addEventListener('click', () => {
|
||||
this.showFilterMenu();
|
||||
});
|
||||
}
|
||||
var btnSort = tabContent.querySelector('.btnSort');
|
||||
const btnSort = tabContent.querySelector('.btnSort');
|
||||
|
||||
if (btnSort) {
|
||||
btnSort.addEventListener('click', function (e) {
|
||||
|
|
@ -231,24 +232,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
});
|
||||
});
|
||||
}
|
||||
var btnSelectView = tabContent.querySelector('.btnSelectView');
|
||||
const btnSelectView = tabContent.querySelector('.btnSelectView');
|
||||
btnSelectView.addEventListener('click', function (e) {
|
||||
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle, 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||
});
|
||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||
var viewStyle = e.detail.viewStyle;
|
||||
let viewStyle = e.detail.viewStyle;
|
||||
userSettings.set(savedViewKey, viewStyle);
|
||||
query.StartIndex = 0;
|
||||
onViewStyleChange();
|
||||
itemsContainer.refreshItems();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var self = this;
|
||||
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
var savedQueryKey = params.topParentId + '-' + options.mode;
|
||||
var savedViewKey = savedQueryKey + '-view';
|
||||
var query = {
|
||||
let itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
const savedQueryKey = params.topParentId + '-' + options.mode;
|
||||
const savedViewKey = savedQueryKey + '-view';
|
||||
let query = {
|
||||
SortBy: 'SortName,ProductionYear',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Movie',
|
||||
|
|
@ -264,7 +264,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
query['Limit'] = userSettings.libraryPageSize();
|
||||
}
|
||||
|
||||
var isLoading = false;
|
||||
let isLoading = false;
|
||||
|
||||
if (options.mode === 'favorites') {
|
||||
query.IsFavorite = true;
|
||||
|
|
@ -272,14 +272,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
|
||||
query = userSettings.loadQuerySettings(savedQueryKey, query);
|
||||
|
||||
self.showFilterMenu = function () {
|
||||
require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
|
||||
var filterDialog = new filterDialogFactory({
|
||||
this.showFilterMenu = function () {
|
||||
import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
|
||||
let filterDialog = new filterDialogFactory({
|
||||
query: query,
|
||||
mode: 'movies',
|
||||
serverId: ApiClient.serverId()
|
||||
});
|
||||
events.on(filterDialog, 'filterchange', function () {
|
||||
events.on(filterDialog, 'filterchange', () => {
|
||||
query.StartIndex = 0;
|
||||
itemsContainer.refreshItems();
|
||||
});
|
||||
|
|
@ -287,22 +287,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
|||
});
|
||||
};
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
this.getCurrentViewStyle = function () {
|
||||
return userSettings.get(savedViewKey) || 'Poster';
|
||||
};
|
||||
|
||||
self.initTab = function () {
|
||||
this.initTab = function () {
|
||||
initPage(tabContent);
|
||||
onViewStyleChange();
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
this.renderTab = function () {
|
||||
itemsContainer.refreshItems();
|
||||
updateFilterControls();
|
||||
};
|
||||
|
||||
self.destroy = function () {
|
||||
this.destroy = function () {
|
||||
itemsContainer = null;
|
||||
};
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
|
|
|||
|
|
@ -1,8 +1,20 @@
|
|||
define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu', 'mainTabsManager', 'cardBuilder', 'dom', 'imageLoader', 'playbackManager', 'globalize', 'emby-scroller', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) {
|
||||
'use strict';
|
||||
import events from 'events';
|
||||
import layoutManager from 'layoutManager';
|
||||
import inputManager from 'inputManager';
|
||||
import * as userSettings from 'userSettings';
|
||||
import libraryMenu from 'libraryMenu';
|
||||
import * as mainTabsManager from 'mainTabsManager';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import dom from 'dom';
|
||||
import imageLoader from 'imageLoader';
|
||||
import playbackManager from 'playbackManager';
|
||||
import globalize from 'globalize';
|
||||
import 'emby-scroller';
|
||||
import 'emby-itemscontainer';
|
||||
import 'emby-tabs';
|
||||
import 'emby-button';
|
||||
|
||||
libraryMenu = libraryMenu.default || libraryMenu;
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
/* eslint-disable indent */
|
||||
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
|
|
@ -17,7 +29,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
}
|
||||
|
||||
function loadLatest(page, userId, parentId) {
|
||||
var options = {
|
||||
const options = {
|
||||
IncludeItemTypes: 'Movie',
|
||||
Limit: 18,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
|
|
@ -27,8 +39,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
EnableTotalRecordCount: false
|
||||
};
|
||||
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
|
||||
var allowBottomPadding = !enableScrollX();
|
||||
var container = page.querySelector('#recentlyAddedItems');
|
||||
const allowBottomPadding = !enableScrollX();
|
||||
const container = page.querySelector('#recentlyAddedItems');
|
||||
cardBuilder.buildCards(items, {
|
||||
itemsContainer: container,
|
||||
shape: getPortraitShape(),
|
||||
|
|
@ -46,8 +58,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
}
|
||||
|
||||
function loadResume(page, userId, parentId) {
|
||||
var screenWidth = dom.getWindowSize().innerWidth;
|
||||
var options = {
|
||||
let screenWidth = dom.getWindowSize().innerWidth;
|
||||
const options = {
|
||||
SortBy: 'DatePlayed',
|
||||
SortOrder: 'Descending',
|
||||
IncludeItemTypes: 'Movie',
|
||||
|
|
@ -68,8 +80,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
page.querySelector('#resumableSection').classList.add('hide');
|
||||
}
|
||||
|
||||
var allowBottomPadding = !enableScrollX();
|
||||
var container = page.querySelector('#resumableItems');
|
||||
const allowBottomPadding = !enableScrollX();
|
||||
const container = page.querySelector('#resumableItems');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: container,
|
||||
preferThumb: true,
|
||||
|
|
@ -89,8 +101,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
}
|
||||
|
||||
function getRecommendationHtml(recommendation) {
|
||||
var html = '';
|
||||
var title = '';
|
||||
let html = '';
|
||||
let title = '';
|
||||
|
||||
switch (recommendation.RecommendationType) {
|
||||
case 'SimilarToRecentlyPlayed':
|
||||
|
|
@ -114,7 +126,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
|
||||
html += '<div class="verticalSection">';
|
||||
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
|
||||
var allowBottomPadding = true;
|
||||
const allowBottomPadding = true;
|
||||
|
||||
if (enableScrollX()) {
|
||||
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
|
||||
|
|
@ -142,8 +154,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
}
|
||||
|
||||
function loadSuggestions(page, userId, parentId) {
|
||||
var screenWidth = dom.getWindowSize().innerWidth;
|
||||
var url = ApiClient.getUrl('Movies/Recommendations', {
|
||||
let screenWidth = dom.getWindowSize().innerWidth;
|
||||
let url = ApiClient.getUrl('Movies/Recommendations', {
|
||||
userId: userId,
|
||||
categoryLimit: 6,
|
||||
ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5,
|
||||
|
|
@ -158,9 +170,9 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
return;
|
||||
}
|
||||
|
||||
var html = recommendations.map(getRecommendationHtml).join('');
|
||||
const html = recommendations.map(getRecommendationHtml).join('');
|
||||
page.querySelector('.noItemsMessage').classList.add('hide');
|
||||
var recs = page.querySelector('.recommendations');
|
||||
let recs = page.querySelector('.recommendations');
|
||||
recs.innerHTML = html;
|
||||
imageLoader.lazyChildren(recs);
|
||||
|
||||
|
|
@ -170,7 +182,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
}
|
||||
|
||||
function autoFocus(page) {
|
||||
require(['autoFocuser'], function (autoFocuser) {
|
||||
import('autoFocuser').then(({default: autoFocuser}) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
}
|
||||
|
|
@ -196,17 +208,16 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
}
|
||||
|
||||
function initSuggestedTab(page, tabContent) {
|
||||
var containers = tabContent.querySelectorAll('.itemsContainer');
|
||||
const containers = tabContent.querySelectorAll('.itemsContainer');
|
||||
|
||||
for (var i = 0, length = containers.length; i < length; i++) {
|
||||
setScrollClasses(containers[i], enableScrollX());
|
||||
for (const container of containers) {
|
||||
setScrollClasses(container, enableScrollX());
|
||||
}
|
||||
}
|
||||
|
||||
function loadSuggestionsTab(view, params, tabContent) {
|
||||
var parentId = params.topParentId;
|
||||
var userId = ApiClient.getCurrentUserId();
|
||||
console.debug('loadSuggestionsTab');
|
||||
const parentId = params.topParentId;
|
||||
const userId = ApiClient.getCurrentUserId();
|
||||
loadResume(tabContent, userId, parentId);
|
||||
loadLatest(tabContent, userId, parentId);
|
||||
loadSuggestions(tabContent, userId, parentId);
|
||||
|
|
@ -250,13 +261,13 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
}
|
||||
}
|
||||
|
||||
return function (view, params) {
|
||||
export default function (view, params) {
|
||||
function onBeforeTabChange(e) {
|
||||
preLoadTab(view, parseInt(e.detail.selectedTabIndex));
|
||||
}
|
||||
|
||||
function onTabChange(e) {
|
||||
var newIndex = parseInt(e.detail.selectedTabIndex);
|
||||
const newIndex = parseInt(e.detail.selectedTabIndex);
|
||||
loadTab(view, newIndex);
|
||||
}
|
||||
|
||||
|
|
@ -268,52 +279,54 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
|
||||
}
|
||||
|
||||
function getTabController(page, index, callback) {
|
||||
var depends = [];
|
||||
const getTabController = (page, index, callback) => {
|
||||
let depends = '';
|
||||
|
||||
switch (index) {
|
||||
case 0:
|
||||
depends.push('controllers/movies/movies');
|
||||
depends = 'controllers/movies/movies';
|
||||
break;
|
||||
|
||||
case 1:
|
||||
depends = 'controllers/movies/moviesrecommended.js';
|
||||
break;
|
||||
|
||||
case 2:
|
||||
depends.push('controllers/movies/movietrailers');
|
||||
depends = 'controllers/movies/movietrailers';
|
||||
break;
|
||||
|
||||
case 3:
|
||||
depends.push('controllers/movies/movies');
|
||||
depends = 'controllers/movies/movies';
|
||||
break;
|
||||
|
||||
case 4:
|
||||
depends.push('controllers/movies/moviecollections');
|
||||
depends = 'controllers/movies/moviecollections';
|
||||
break;
|
||||
|
||||
case 5:
|
||||
depends.push('controllers/movies/moviegenres');
|
||||
depends = 'controllers/movies/moviegenres';
|
||||
break;
|
||||
|
||||
case 6:
|
||||
depends.push('scripts/searchtab');
|
||||
depends = 'scripts/searchtab';
|
||||
break;
|
||||
}
|
||||
|
||||
require(depends, function (controllerFactory) {
|
||||
var tabContent;
|
||||
import(depends).then(({default: controllerFactory}) => {
|
||||
let tabContent;
|
||||
|
||||
if (index === suggestionsTabIndex) {
|
||||
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
|
||||
self.tabContent = tabContent;
|
||||
this.tabContent = tabContent;
|
||||
}
|
||||
|
||||
var controller = tabControllers[index];
|
||||
let controller = tabControllers[index];
|
||||
|
||||
if (!controller) {
|
||||
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
|
||||
|
||||
if (index === suggestionsTabIndex) {
|
||||
controller = self;
|
||||
controller = this;
|
||||
} else if (index === 6) {
|
||||
controller = new controllerFactory(view, tabContent, {
|
||||
collectionType: 'movies',
|
||||
|
|
@ -336,7 +349,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
|
||||
callback(controller);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function preLoadTab(page, index) {
|
||||
getTabController(page, index, function (controller) {
|
||||
|
|
@ -348,12 +361,12 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
|
||||
function loadTab(page, index) {
|
||||
currentTabIndex = index;
|
||||
getTabController(page, index, function (controller) {
|
||||
getTabController(page, index, ((controller) => {
|
||||
if (renderedTabs.indexOf(index) == -1) {
|
||||
renderedTabs.push(index);
|
||||
controller.renderTab();
|
||||
}
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
function onPlaybackStop(e, state) {
|
||||
|
|
@ -371,22 +384,21 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
}
|
||||
}
|
||||
|
||||
var self = this;
|
||||
var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
|
||||
var suggestionsTabIndex = 1;
|
||||
let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
|
||||
const suggestionsTabIndex = 1;
|
||||
|
||||
self.initTab = function () {
|
||||
var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
||||
this.initTab = function () {
|
||||
let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
||||
initSuggestedTab(view, tabContent);
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
||||
this.renderTab = function () {
|
||||
let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
||||
loadSuggestionsTab(view, params, tabContent);
|
||||
};
|
||||
|
||||
var tabControllers = [];
|
||||
var renderedTabs = [];
|
||||
let tabControllers = [];
|
||||
let renderedTabs = [];
|
||||
view.addEventListener('viewshow', function (e) {
|
||||
initTabs();
|
||||
if (!view.getAttribute('data-title')) {
|
||||
|
|
@ -406,15 +418,14 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
|
|||
events.on(playbackManager, 'playbackstop', onPlaybackStop);
|
||||
inputManager.on(window, onInputCommand);
|
||||
});
|
||||
view.addEventListener('viewbeforehide', function (e) {
|
||||
view.addEventListener('viewbeforehide', function () {
|
||||
inputManager.off(window, onInputCommand);
|
||||
});
|
||||
view.addEventListener('viewdestroy', function (e) {
|
||||
tabControllers.forEach(function (t) {
|
||||
if (t.destroy) {
|
||||
t.destroy();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
});
|
||||
for (const tabController of tabControllers) {
|
||||
if (tabController.destroy) {
|
||||
tabController.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
|
||||
'use strict';
|
||||
import loading from 'loading';
|
||||
import events from 'events';
|
||||
import libraryBrowser from 'libraryBrowser';
|
||||
import imageLoader from 'imageLoader';
|
||||
import AlphaPicker from 'alphaPicker';
|
||||
import listView from 'listView';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import * as userSettings from 'userSettings';
|
||||
import globalize from 'globalize';
|
||||
import 'emby-itemscontainer';
|
||||
|
||||
loading = loading.default || loading;
|
||||
libraryBrowser = libraryBrowser.default || libraryBrowser;
|
||||
/* eslint-disable indent */
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData(context) {
|
||||
var key = getSavedQueryKey(context);
|
||||
var pageData = data[key];
|
||||
const key = getSavedQueryKey(context);
|
||||
let pageData = data[key];
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
|
|
@ -46,11 +53,11 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
|||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function reloadItems() {
|
||||
const reloadItems = () => {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
var query = getQuery(tabContent);
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
|
||||
const query = getQuery(tabContent);
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
|
|
@ -75,7 +82,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
|||
|
||||
window.scrollTo(0, 0);
|
||||
updateFilterControls(tabContent);
|
||||
var pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
|
|
@ -85,8 +92,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
|||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
var html;
|
||||
var viewStyle = self.getCurrentViewStyle();
|
||||
let html;
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
|
||||
if (viewStyle == 'Thumb') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
|
|
@ -142,22 +149,20 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
|||
});
|
||||
}
|
||||
|
||||
var i;
|
||||
var length;
|
||||
var elems = tabContent.querySelectorAll('.paging');
|
||||
let elems = tabContent.querySelectorAll('.paging');
|
||||
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].innerHTML = pagingHtml;
|
||||
for (const elem of elems) {
|
||||
elem.innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
if (!result.Items.length) {
|
||||
|
|
@ -169,27 +174,26 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
|||
html += '</div>';
|
||||
}
|
||||
|
||||
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = html;
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(tabContent), query);
|
||||
loading.hide();
|
||||
isLoading = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function updateFilterControls(tabContent) {
|
||||
var query = getQuery(tabContent);
|
||||
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
||||
}
|
||||
const updateFilterControls = (tabContent) => {
|
||||
const query = getQuery(tabContent);
|
||||
this.alphaPicker.value(query.NameStartsWithOrGreater);
|
||||
};
|
||||
|
||||
var self = this;
|
||||
var data = {};
|
||||
var isLoading = false;
|
||||
const data = {};
|
||||
let isLoading = false;
|
||||
|
||||
self.showFilterMenu = function () {
|
||||
require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
|
||||
var filterDialog = new filterDialogFactory({
|
||||
this.showFilterMenu = function () {
|
||||
import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
|
||||
const filterDialog = new filterDialogFactory({
|
||||
query: getQuery(tabContent),
|
||||
mode: 'movies',
|
||||
serverId: ApiClient.serverId()
|
||||
|
|
@ -202,21 +206,21 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
|||
});
|
||||
};
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
this.getCurrentViewStyle = function () {
|
||||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
function initPage(tabContent) {
|
||||
var alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
const initPage = (tabContent) => {
|
||||
const alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
||||
var newValue = e.detail.value;
|
||||
var query = getQuery(tabContent);
|
||||
const newValue = e.detail.value;
|
||||
const query = getQuery(tabContent);
|
||||
query.NameStartsWithOrGreater = newValue;
|
||||
query.StartIndex = 0;
|
||||
reloadItems();
|
||||
});
|
||||
self.alphaPicker = new AlphaPicker.default({
|
||||
this.alphaPicker = new AlphaPicker({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
|
@ -226,7 +230,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
|||
itemsContainer.classList.add('padded-right-withalphapicker');
|
||||
|
||||
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
|
||||
self.showFilterMenu();
|
||||
this.showFilterMenu();
|
||||
});
|
||||
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||
libraryBrowser.showSortMenu({
|
||||
|
|
@ -260,15 +264,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
|||
button: e.target
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
initPage(tabContent);
|
||||
|
||||
self.renderTab = function () {
|
||||
this.renderTab = function () {
|
||||
reloadItems();
|
||||
updateFilterControls(tabContent);
|
||||
};
|
||||
|
||||
self.destroy = function () {};
|
||||
};
|
||||
});
|
||||
this.destroy = function () {};
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue