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

Merge pull request #1553 from Camc314/mirate-to-ES6-17

Browse source 
Migration of Movies to ES6 Modules
This commit is contained in:
Bond-009 2020-08-06 20:36:30 +02:00 • committed by GitHub
commit 267c1582c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 280 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -218,6 +218,11 @@
"src/controllers/edititemmetadata.js", "src/controllers/edititemmetadata.js",
"src/controllers/favorites.js", "src/controllers/favorites.js",
"src/controllers/hometab.js", "src/controllers/hometab.js",
"src/controllers/movies/moviecollections.js",
"src/controllers/movies/moviegenres.js",
"src/controllers/movies/movies.js",
"src/controllers/movies/moviesrecommended.js",
"src/controllers/movies/movietrailers.js",
"src/controllers/playback/nowplaying.js", "src/controllers/playback/nowplaying.js",
"src/controllers/playback/videoosd.js", "src/controllers/playback/videoosd.js",
"src/controllers/itemDetails/index.js", "src/controllers/itemDetails/index.js",

94
src/controllers/movies/moviecollections.js
View file

@ -1,13 +1,18 @@
define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) { import loading from 'loading';
'use strict'; 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; /* eslint-disable indent */
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) { export default function (view, params, tabContent) {
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] = {
@ -47,9 +52,9 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
return context.savedQueryKey; return context.savedQueryKey;
} }
function onViewStyleChange() { const onViewStyleChange = () => {
var viewStyle = self.getCurrentViewStyle(); const viewStyle = this.getCurrentViewStyle();
var itemsContainer = tabContent.querySelector('.itemsContainer'); const itemsContainer = tabContent.querySelector('.itemsContainer');
if (viewStyle == 'List') { if (viewStyle == 'List') {
itemsContainer.classList.add('vertical-list'); itemsContainer.classList.add('vertical-list');
@ -60,13 +65,13 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
} }
itemsContainer.innerHTML = ''; itemsContainer.innerHTML = '';
} };
function reloadItems(page) { const reloadItems = (page) => {
loading.show(); loading.show();
isLoading = true; isLoading = true;
var query = getQuery(page); const query = getQuery(page);
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
function onNextPageClick() { function onNextPageClick() {
if (isLoading) { if (isLoading) {
return; return;
@ -90,8 +95,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
} }
window.scrollTo(0, 0); window.scrollTo(0, 0);
var html; let html;
var pagingHtml = libraryBrowser.getQueryPagingHtml({ const pagingHtml = libraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex, startIndex: query.StartIndex,
limit: query.Limit, limit: query.Limit,
totalRecordCount: result.TotalRecordCount, totalRecordCount: result.TotalRecordCount,
@ -101,7 +106,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
sortButton: false, sortButton: false,
filterButton: false filterButton: false
}); });
var viewStyle = self.getCurrentViewStyle(); const viewStyle = this.getCurrentViewStyle();
if (viewStyle == 'Thumb') { if (viewStyle == 'Thumb') {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
@ -155,22 +160,21 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
showTitle: true showTitle: true
}); });
} }
var i;
var length;
var elems = tabContent.querySelectorAll('.paging');
for (i = 0, length = elems.length; i < length; i++) { let elems = tabContent.querySelectorAll('.paging');
elems[i].innerHTML = pagingHtml;
for (const elem of elems) {
elem.innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll('.btnNextPage');
for (i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].addEventListener('click', onNextPageClick); elem.addEventListener('click', onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll('.btnPreviousPage');
for (i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].addEventListener('click', onPreviousPageClick); elem.addEventListener('click', onPreviousPageClick);
} }
if (!result.Items.length) { if (!result.Items.length) {
@ -182,28 +186,27 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
html += '</div>'; html += '</div>';
} }
var itemsContainer = tabContent.querySelector('.itemsContainer'); const itemsContainer = tabContent.querySelector('.itemsContainer');
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer); imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
loading.hide(); loading.hide();
isLoading = false; isLoading = false;
require(['autoFocuser'], function (autoFocuser) { import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(page); autoFocuser.autoFocus(page);
}); });
}); });
} };
var self = this; const data = {};
var data = {}; let isLoading = false;
var isLoading = false;
self.getCurrentViewStyle = function () { this.getCurrentViewStyle = function () {
return getPageData(tabContent).view; return getPageData(tabContent).view;
}; };
function initPage(tabContent) { const initPage = (tabContent) => {
tabContent.querySelector('.btnSort').addEventListener('click', function (e) { tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
items: [{ items: [{
@ -230,36 +233,37 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
button: e.target button: e.target
}); });
}); });
var btnSelectView = tabContent.querySelector('.btnSelectView'); const btnSelectView = tabContent.querySelector('.btnSelectView');
btnSelectView.addEventListener('click', function (e) { 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) { btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle; const viewStyle = e.detail.viewStyle;
getPageData(tabContent).view = viewStyle; getPageData(tabContent).view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
getQuery(tabContent).StartIndex = 0; getQuery(tabContent).StartIndex = 0;
onViewStyleChange(); onViewStyleChange();
reloadItems(tabContent); reloadItems(tabContent);
}); });
tabContent.querySelector('.btnNewCollection').addEventListener('click', function () { tabContent.querySelector('.btnNewCollection').addEventListener('click', () => {
require(['collectionEditor'], function (collectionEditor) { import('collectionEditor').then(({default: collectionEditor}) => {
var serverId = ApiClient.serverInfo().Id; const serverId = ApiClient.serverInfo().Id;
new collectionEditor.showEditor({ new collectionEditor.showEditor({
items: [], items: [],
serverId: serverId serverId: serverId
}); });
}); });
}); });
} };
initPage(tabContent); initPage(tabContent);
onViewStyleChange(); onViewStyleChange();
self.renderTab = function () { this.renderTab = function () {
reloadItems(tabContent); reloadItems(tabContent);
}; };
self.destroy = function () {}; this.destroy = function () {};
}; }
});
/* eslint-enable indent */

81
src/controllers/movies/moviegenres.js
View file

@ -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) { import layoutManager from 'layoutManager';
'use strict'; 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; /* eslint-disable indent */
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) { export default function (view, params, tabContent) {
function getPageData() { function getPageData() {
var key = getSavedQueryKey(); const key = getSavedQueryKey();
var pageData = data[key]; let pageData = data[key];
if (!pageData) { if (!pageData) {
pageData = data[key] = { pageData = data[key] = {
@ -37,7 +42,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
function getPromise() { function getPromise() {
loading.show(); loading.show();
var query = getQuery(); const query = getQuery();
return ApiClient.getGenres(ApiClient.getCurrentUserId(), query); return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
} }
@ -53,18 +58,18 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
return enableScrollX() ? 'overflowPortrait' : 'portrait'; return enableScrollX() ? 'overflowPortrait' : 'portrait';
} }
function fillItemsContainer(entry) { const fillItemsContainer = (entry) => {
var elem = entry.target; const elem = entry.target;
var id = elem.getAttribute('data-id'); const id = elem.getAttribute('data-id');
var viewStyle = self.getCurrentViewStyle(); const viewStyle = this.getCurrentViewStyle();
var limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9; let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
if (enableScrollX()) { if (enableScrollX()) {
limit = 10; limit = 10;
} }
var enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary'; const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
var query = { const query = {
SortBy: 'SortName', SortBy: 'SortName',
SortOrder: 'Ascending', SortOrder: 'Ascending',
IncludeItemTypes: 'Movie', IncludeItemTypes: 'Movie',
@ -126,17 +131,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide'); tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
} }
}); });
} };
function reloadItems(context, promise) { function reloadItems(context, promise) {
var query = getQuery(); const query = getQuery();
promise.then(function (result) { promise.then(function (result) {
var elem = context.querySelector('#items'); const elem = context.querySelector('#items');
var html = ''; let html = '';
var items = result.Items; const items = result.Items;
for (var i = 0, length = items.length; i < length; i++) { for (let i = 0, length = items.length; i < length; i++) {
var item = items[i]; const item = items[i];
html += '<div class="verticalSection">'; html += '<div class="verticalSection">';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">'; html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
@ -151,7 +156,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
html += '</a>'; html += '</a>';
html += '</div>'; html += '</div>';
if (enableScrollX()) { if (enableScrollX()) {
var scrollXClass = 'scrollX hiddenScrollX'; let scrollXClass = 'scrollX hiddenScrollX';
if (layoutManager.tv) { if (layoutManager.tv) {
scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale'; scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale';
@ -182,37 +187,37 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
}); });
} }
function fullyReload() { const fullyReload = () => {
self.preRender(); this.preRender();
self.renderTab(); this.renderTab();
} };
var self = this; const data = {};
var data = {};
self.getViewStyles = function () { this.getViewStyles = function () {
return 'Poster,PosterCard,Thumb,ThumbCard'.split(','); return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
}; };
self.getCurrentViewStyle = function () { this.getCurrentViewStyle = function () {
return getPageData().view; return getPageData().view;
}; };
self.setCurrentViewStyle = function (viewStyle) { this.setCurrentViewStyle = function (viewStyle) {
getPageData().view = viewStyle; getPageData().view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle); libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
fullyReload(); fullyReload();
}; };
self.enableViewSelection = true; this.enableViewSelection = true;
var promise; let promise;
self.preRender = function () { this.preRender = function () {
promise = getPromise(); promise = getPromise();
}; };
self.renderTab = function () { this.renderTab = function () {
reloadItems(tabContent, promise); reloadItems(tabContent, promise);
}; };
}; }
});
/* eslint-enable indent */

115
src/controllers/movies/movies.js
View file

@ -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) { import loading from 'loading';
'use strict'; 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; /* eslint-disable indent */
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent, options) { export default function (view, params, tabContent, options) {
function onViewStyleChange() { const onViewStyleChange = () => {
if (self.getCurrentViewStyle() == 'List') { if (this.getCurrentViewStyle() == 'List') {
itemsContainer.classList.add('vertical-list'); itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap'); itemsContainer.classList.remove('vertical-wrap');
} else { } else {
@ -15,13 +21,13 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
} }
itemsContainer.innerHTML = ''; itemsContainer.innerHTML = '';
} };
function updateFilterControls() { const updateFilterControls = () => {
if (self.alphaPicker) { if (this.alphaPicker) {
self.alphaPicker.value(query.NameStartsWithOrGreater); this.alphaPicker.value(query.NameStartsWithOrGreater);
} }
} };
function fetchData() { function fetchData() {
isLoading = true; isLoading = true;
@ -54,7 +60,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
window.scrollTo(0, 0); window.scrollTo(0, 0);
updateFilterControls(); updateFilterControls();
var pagingHtml = libraryBrowser.getQueryPagingHtml({ const pagingHtml = libraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex, startIndex: query.StartIndex,
limit: query.Limit, limit: query.Limit,
totalRecordCount: result.TotalRecordCount, totalRecordCount: result.TotalRecordCount,
@ -64,35 +70,30 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
sortButton: false, sortButton: false,
filterButton: false filterButton: false
}); });
var i;
var length;
var elems = tabContent.querySelectorAll('.paging');
for (i = 0, length = elems.length; i < length; i++) { for (const elem of tabContent.querySelectorAll('.paging')) {
elems[i].innerHTML = pagingHtml; elem.innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); for (const elem of tabContent.querySelectorAll('.btnNextPage')) {
for (i = 0, length = elems.length; i < length; i++) { elem.addEventListener('click', onNextPageClick);
elems[i].addEventListener('click', onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); for (const elem of tabContent.querySelectorAll('.btnPreviousPage')) {
for (i = 0, length = elems.length; i < length; i++) { elem.addEventListener('click', onPreviousPageClick);
elems[i].addEventListener('click', onPreviousPageClick);
} }
isLoading = false; isLoading = false;
loading.hide(); loading.hide();
require(['autoFocuser'], function (autoFocuser) { import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(tabContent); autoFocuser.autoFocus(tabContent);
}); });
} }
function getItemsHtml(items) { const getItemsHtml = (items) => {
var html; let html;
var viewStyle = self.getCurrentViewStyle(); const viewStyle = this.getCurrentViewStyle();
if (viewStyle == 'Thumb') { if (viewStyle == 'Thumb') {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
@ -156,22 +157,22 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
} }
return html; return html;
} };
function initPage(tabContent) { const initPage = (tabContent) => {
itemsContainer.fetchData = fetchData; itemsContainer.fetchData = fetchData;
itemsContainer.getItemsHtml = getItemsHtml; itemsContainer.getItemsHtml = getItemsHtml;
itemsContainer.afterRefresh = afterRefresh; itemsContainer.afterRefresh = afterRefresh;
var alphaPickerElement = tabContent.querySelector('.alphaPicker'); let alphaPickerElement = tabContent.querySelector('.alphaPicker');
if (alphaPickerElement) { if (alphaPickerElement) {
alphaPickerElement.addEventListener('alphavaluechanged', function (e) { alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
var newValue = e.detail.value; let newValue = e.detail.value;
query.NameStartsWithOrGreater = newValue; query.NameStartsWithOrGreater = newValue;
query.StartIndex = 0; query.StartIndex = 0;
itemsContainer.refreshItems(); itemsContainer.refreshItems();
}); });
self.alphaPicker = new AlphaPicker.default({ this.alphaPicker = new AlphaPicker({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
}); });
@ -181,14 +182,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
itemsContainer.classList.add('padded-right-withalphapicker'); itemsContainer.classList.add('padded-right-withalphapicker');
} }
var btnFilter = tabContent.querySelector('.btnFilter'); const btnFilter = tabContent.querySelector('.btnFilter');
if (btnFilter) { if (btnFilter) {
btnFilter.addEventListener('click', function () { btnFilter.addEventListener('click', () => {
self.showFilterMenu(); this.showFilterMenu();
}); });
} }
var btnSort = tabContent.querySelector('.btnSort'); const btnSort = tabContent.querySelector('.btnSort');
if (btnSort) { if (btnSort) {
btnSort.addEventListener('click', function (e) { 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) { 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) { btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle; let viewStyle = e.detail.viewStyle;
userSettings.set(savedViewKey, viewStyle); userSettings.set(savedViewKey, viewStyle);
query.StartIndex = 0; query.StartIndex = 0;
onViewStyleChange(); onViewStyleChange();
itemsContainer.refreshItems(); itemsContainer.refreshItems();
}); });
} };
var self = this; let itemsContainer = tabContent.querySelector('.itemsContainer');
var itemsContainer = tabContent.querySelector('.itemsContainer'); const savedQueryKey = params.topParentId + '-' + options.mode;
var savedQueryKey = params.topParentId + '-' + options.mode; const savedViewKey = savedQueryKey + '-view';
var savedViewKey = savedQueryKey + '-view'; let query = {
var query = {
SortBy: 'SortName,ProductionYear', SortBy: 'SortName,ProductionYear',
SortOrder: 'Ascending', SortOrder: 'Ascending',
IncludeItemTypes: 'Movie', IncludeItemTypes: 'Movie',
@ -264,7 +264,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
query['Limit'] = userSettings.libraryPageSize(); query['Limit'] = userSettings.libraryPageSize();
} }
var isLoading = false; let isLoading = false;
if (options.mode === 'favorites') { if (options.mode === 'favorites') {
query.IsFavorite = true; query.IsFavorite = true;
@ -272,14 +272,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
query = userSettings.loadQuerySettings(savedQueryKey, query); query = userSettings.loadQuerySettings(savedQueryKey, query);
self.showFilterMenu = function () { this.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
var filterDialog = new filterDialogFactory({ let filterDialog = new filterDialogFactory({
query: query, query: query,
mode: 'movies', mode: 'movies',
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });
events.on(filterDialog, 'filterchange', function () { events.on(filterDialog, 'filterchange', () => {
query.StartIndex = 0; query.StartIndex = 0;
itemsContainer.refreshItems(); itemsContainer.refreshItems();
}); });
@ -287,22 +287,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
}); });
}; };
self.getCurrentViewStyle = function () { this.getCurrentViewStyle = function () {
return userSettings.get(savedViewKey) || 'Poster'; return userSettings.get(savedViewKey) || 'Poster';
}; };
self.initTab = function () { this.initTab = function () {
initPage(tabContent); initPage(tabContent);
onViewStyleChange(); onViewStyleChange();
}; };
self.renderTab = function () { this.renderTab = function () {
itemsContainer.refreshItems(); itemsContainer.refreshItems();
updateFilterControls(); updateFilterControls();
}; };
self.destroy = function () { this.destroy = function () {
itemsContainer = null; itemsContainer = null;
}; };
}; }
});
/* eslint-enable indent */

134
src/controllers/movies/moviesrecommended.js
View file

@ -1,7 +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) { import events from 'events';
'use strict'; 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';
playbackManager = playbackManager.default || playbackManager; /* eslint-disable indent */
function enableScrollX() { function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
@ -16,7 +29,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
} }
function loadLatest(page, userId, parentId) { function loadLatest(page, userId, parentId) {
var options = { const options = {
IncludeItemTypes: 'Movie', IncludeItemTypes: 'Movie',
Limit: 18, Limit: 18,
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo', Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
@ -26,8 +39,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
EnableTotalRecordCount: false EnableTotalRecordCount: false
}; };
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) { ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
var allowBottomPadding = !enableScrollX(); const allowBottomPadding = !enableScrollX();
var container = page.querySelector('#recentlyAddedItems'); const container = page.querySelector('#recentlyAddedItems');
cardBuilder.buildCards(items, { cardBuilder.buildCards(items, {
itemsContainer: container, itemsContainer: container,
shape: getPortraitShape(), shape: getPortraitShape(),
@ -45,8 +58,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
} }
function loadResume(page, userId, parentId) { function loadResume(page, userId, parentId) {
var screenWidth = dom.getWindowSize().innerWidth; let screenWidth = dom.getWindowSize().innerWidth;
var options = { const options = {
SortBy: 'DatePlayed', SortBy: 'DatePlayed',
SortOrder: 'Descending', SortOrder: 'Descending',
IncludeItemTypes: 'Movie', IncludeItemTypes: 'Movie',
@ -67,8 +80,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
page.querySelector('#resumableSection').classList.add('hide'); page.querySelector('#resumableSection').classList.add('hide');
} }
var allowBottomPadding = !enableScrollX(); const allowBottomPadding = !enableScrollX();
var container = page.querySelector('#resumableItems'); const container = page.querySelector('#resumableItems');
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: container, itemsContainer: container,
preferThumb: true, preferThumb: true,
@ -88,8 +101,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
} }
function getRecommendationHtml(recommendation) { function getRecommendationHtml(recommendation) {
var html = ''; let html = '';
var title = ''; let title = '';
switch (recommendation.RecommendationType) { switch (recommendation.RecommendationType) {
case 'SimilarToRecentlyPlayed': case 'SimilarToRecentlyPlayed':
@ -113,7 +126,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
html += '<div class="verticalSection">'; html += '<div class="verticalSection">';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
var allowBottomPadding = true; const allowBottomPadding = true;
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">'; html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
@ -141,8 +154,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
} }
function loadSuggestions(page, userId, parentId) { function loadSuggestions(page, userId, parentId) {
var screenWidth = dom.getWindowSize().innerWidth; let screenWidth = dom.getWindowSize().innerWidth;
var url = ApiClient.getUrl('Movies/Recommendations', { let url = ApiClient.getUrl('Movies/Recommendations', {
userId: userId, userId: userId,
categoryLimit: 6, categoryLimit: 6,
ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5, ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5,
@ -157,9 +170,9 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
return; return;
} }
var html = recommendations.map(getRecommendationHtml).join(''); const html = recommendations.map(getRecommendationHtml).join('');
page.querySelector('.noItemsMessage').classList.add('hide'); page.querySelector('.noItemsMessage').classList.add('hide');
var recs = page.querySelector('.recommendations'); let recs = page.querySelector('.recommendations');
recs.innerHTML = html; recs.innerHTML = html;
imageLoader.lazyChildren(recs); imageLoader.lazyChildren(recs);
@ -169,7 +182,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
} }
function autoFocus(page) { function autoFocus(page) {
require(['autoFocuser'], function (autoFocuser) { import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(page); autoFocuser.autoFocus(page);
}); });
} }
@ -195,17 +208,16 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
} }
function initSuggestedTab(page, tabContent) { function initSuggestedTab(page, tabContent) {
var containers = tabContent.querySelectorAll('.itemsContainer'); const containers = tabContent.querySelectorAll('.itemsContainer');
for (var i = 0, length = containers.length; i < length; i++) { for (const container of containers) {
setScrollClasses(containers[i], enableScrollX()); setScrollClasses(container, enableScrollX());
} }
} }
function loadSuggestionsTab(view, params, tabContent) { function loadSuggestionsTab(view, params, tabContent) {
var parentId = params.topParentId; const parentId = params.topParentId;
var userId = ApiClient.getCurrentUserId(); const userId = ApiClient.getCurrentUserId();
console.debug('loadSuggestionsTab');
loadResume(tabContent, userId, parentId); loadResume(tabContent, userId, parentId);
loadLatest(tabContent, userId, parentId); loadLatest(tabContent, userId, parentId);
loadSuggestions(tabContent, userId, parentId); loadSuggestions(tabContent, userId, parentId);
@ -249,13 +261,13 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
} }
} }
return function (view, params) { export default function (view, params) {
function onBeforeTabChange(e) { function onBeforeTabChange(e) {
preLoadTab(view, parseInt(e.detail.selectedTabIndex)); preLoadTab(view, parseInt(e.detail.selectedTabIndex));
} }
function onTabChange(e) { function onTabChange(e) {
var newIndex = parseInt(e.detail.selectedTabIndex); const newIndex = parseInt(e.detail.selectedTabIndex);
loadTab(view, newIndex); loadTab(view, newIndex);
} }
@ -267,52 +279,54 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange); mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
} }
function getTabController(page, index, callback) { const getTabController = (page, index, callback) => {
var depends = []; let depends = '';
switch (index) { switch (index) {
case 0: case 0:
depends.push('controllers/movies/movies'); depends = 'controllers/movies/movies';
break; break;
case 1: case 1:
depends = 'controllers/movies/moviesrecommended.js';
break; break;
case 2: case 2:
depends.push('controllers/movies/movietrailers'); depends = 'controllers/movies/movietrailers';
break; break;
case 3: case 3:
depends.push('controllers/movies/movies'); depends = 'controllers/movies/movies';
break; break;
case 4: case 4:
depends.push('controllers/movies/moviecollections'); depends = 'controllers/movies/moviecollections';
break; break;
case 5: case 5:
depends.push('controllers/movies/moviegenres'); depends = 'controllers/movies/moviegenres';
break; break;
case 6: case 6:
depends.push('scripts/searchtab'); depends = 'scripts/searchtab';
break;
} }
require(depends, function (controllerFactory) { import(depends).then(({default: controllerFactory}) => {
var tabContent; let tabContent;
if (index === suggestionsTabIndex) { if (index === suggestionsTabIndex) {
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
self.tabContent = tabContent; this.tabContent = tabContent;
} }
var controller = tabControllers[index]; let controller = tabControllers[index];
if (!controller) { if (!controller) {
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
if (index === suggestionsTabIndex) { if (index === suggestionsTabIndex) {
controller = self; controller = this;
} else if (index === 6) { } else if (index === 6) {
controller = new controllerFactory(view, tabContent, { controller = new controllerFactory(view, tabContent, {
collectionType: 'movies', collectionType: 'movies',
@ -335,7 +349,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
callback(controller); callback(controller);
}); });
} };
function preLoadTab(page, index) { function preLoadTab(page, index) {
getTabController(page, index, function (controller) { getTabController(page, index, function (controller) {
@ -347,12 +361,12 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
function loadTab(page, index) { function loadTab(page, index) {
currentTabIndex = index; currentTabIndex = index;
getTabController(page, index, function (controller) { getTabController(page, index, ((controller) => {
if (renderedTabs.indexOf(index) == -1) { if (renderedTabs.indexOf(index) == -1) {
renderedTabs.push(index); renderedTabs.push(index);
controller.renderTab(); controller.renderTab();
} }
}); }));
} }
function onPlaybackStop(e, state) { function onPlaybackStop(e, state) {
@ -370,22 +384,21 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
} }
} }
var self = this; let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); const suggestionsTabIndex = 1;
var suggestionsTabIndex = 1;
self.initTab = function () { this.initTab = function () {
var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
initSuggestedTab(view, tabContent); initSuggestedTab(view, tabContent);
}; };
self.renderTab = function () { this.renderTab = function () {
var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
loadSuggestionsTab(view, params, tabContent); loadSuggestionsTab(view, params, tabContent);
}; };
var tabControllers = []; let tabControllers = [];
var renderedTabs = []; let renderedTabs = [];
view.addEventListener('viewshow', function (e) { view.addEventListener('viewshow', function (e) {
initTabs(); initTabs();
if (!view.getAttribute('data-title')) { if (!view.getAttribute('data-title')) {
@ -405,15 +418,14 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
events.on(playbackManager, 'playbackstop', onPlaybackStop); events.on(playbackManager, 'playbackstop', onPlaybackStop);
inputManager.on(window, onInputCommand); inputManager.on(window, onInputCommand);
}); });
view.addEventListener('viewbeforehide', function (e) { view.addEventListener('viewbeforehide', function () {
inputManager.off(window, onInputCommand); inputManager.off(window, onInputCommand);
}); });
view.addEventListener('viewdestroy', function (e) { for (const tabController of tabControllers) {
tabControllers.forEach(function (t) { if (tabController.destroy) {
if (t.destroy) { tabController.destroy();
t.destroy(); }
} }
}); }
});
}; /* eslint-enable indent */
});

99
src/controllers/movies/movietrailers.js
View file

@ -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) { import loading from 'loading';
'use strict'; 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; /* eslint-disable indent */
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) { export default function (view, params, tabContent) {
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] = {
@ -46,11 +53,11 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
return context.savedQueryKey; return context.savedQueryKey;
} }
function reloadItems() { const reloadItems = () => {
loading.show(); loading.show();
isLoading = true; isLoading = true;
var query = getQuery(tabContent); const query = getQuery(tabContent);
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
function onNextPageClick() { function onNextPageClick() {
if (isLoading) { if (isLoading) {
return; return;
@ -75,7 +82,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
window.scrollTo(0, 0); window.scrollTo(0, 0);
updateFilterControls(tabContent); updateFilterControls(tabContent);
var pagingHtml = libraryBrowser.getQueryPagingHtml({ const pagingHtml = libraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex, startIndex: query.StartIndex,
limit: query.Limit, limit: query.Limit,
totalRecordCount: result.TotalRecordCount, totalRecordCount: result.TotalRecordCount,
@ -85,8 +92,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
sortButton: false, sortButton: false,
filterButton: false filterButton: false
}); });
var html; let html;
var viewStyle = self.getCurrentViewStyle(); const viewStyle = this.getCurrentViewStyle();
if (viewStyle == 'Thumb') { if (viewStyle == 'Thumb') {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
@ -142,22 +149,20 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
}); });
} }
var i; let elems = tabContent.querySelectorAll('.paging');
var length;
var elems = tabContent.querySelectorAll('.paging');
for (i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].innerHTML = pagingHtml; elem.innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll('.btnNextPage');
for (i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].addEventListener('click', onNextPageClick); elem.addEventListener('click', onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll('.btnPreviousPage');
for (i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].addEventListener('click', onPreviousPageClick); elem.addEventListener('click', onPreviousPageClick);
} }
if (!result.Items.length) { if (!result.Items.length) {
@ -169,27 +174,26 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
html += '</div>'; html += '</div>';
} }
var itemsContainer = tabContent.querySelector('.itemsContainer'); const itemsContainer = tabContent.querySelector('.itemsContainer');
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer); imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(tabContent), query); libraryBrowser.saveQueryValues(getSavedQueryKey(tabContent), query);
loading.hide(); loading.hide();
isLoading = false; isLoading = false;
}); });
} };
function updateFilterControls(tabContent) { const updateFilterControls = (tabContent) => {
var query = getQuery(tabContent); const query = getQuery(tabContent);
self.alphaPicker.value(query.NameStartsWithOrGreater); this.alphaPicker.value(query.NameStartsWithOrGreater);
} };
var self = this; const data = {};
var data = {}; let isLoading = false;
var isLoading = false;
self.showFilterMenu = function () { this.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
var filterDialog = new filterDialogFactory({ const filterDialog = new filterDialogFactory({
query: getQuery(tabContent), query: getQuery(tabContent),
mode: 'movies', mode: 'movies',
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
@ -202,21 +206,21 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
}); });
}; };
self.getCurrentViewStyle = function () { this.getCurrentViewStyle = function () {
return getPageData(tabContent).view; return getPageData(tabContent).view;
}; };
function initPage(tabContent) { const initPage = (tabContent) => {
var alphaPickerElement = tabContent.querySelector('.alphaPicker'); const alphaPickerElement = tabContent.querySelector('.alphaPicker');
var itemsContainer = tabContent.querySelector('.itemsContainer'); const itemsContainer = tabContent.querySelector('.itemsContainer');
alphaPickerElement.addEventListener('alphavaluechanged', function (e) { alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
var newValue = e.detail.value; const newValue = e.detail.value;
var query = getQuery(tabContent); const query = getQuery(tabContent);
query.NameStartsWithOrGreater = newValue; query.NameStartsWithOrGreater = newValue;
query.StartIndex = 0; query.StartIndex = 0;
reloadItems(); reloadItems();
}); });
self.alphaPicker = new AlphaPicker.default({ this.alphaPicker = new AlphaPicker({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
}); });
@ -226,7 +230,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
itemsContainer.classList.add('padded-right-withalphapicker'); itemsContainer.classList.add('padded-right-withalphapicker');
tabContent.querySelector('.btnFilter').addEventListener('click', function () { tabContent.querySelector('.btnFilter').addEventListener('click', function () {
self.showFilterMenu(); this.showFilterMenu();
}); });
tabContent.querySelector('.btnSort').addEventListener('click', function (e) { tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
@ -260,15 +264,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
button: e.target button: e.target
}); });
}); });
} };
initPage(tabContent); initPage(tabContent);
self.renderTab = function () { this.renderTab = function () {
reloadItems(); reloadItems();
updateFilterControls(tabContent); updateFilterControls(tabContent);
}; };
self.destroy = function () {}; this.destroy = function () {};
}; }
});
/* eslint-enable indent */