diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 9765ea68c8..1bdf1cd903 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -40,6 +40,7 @@ - [Andrei Oanca](https://github.com/OancaAndrei) - [Cromefire_](https://github.com/cromefire) - [Orry Verducci](https://github.com/orryverducci) + - [Camc314](https://github.com/camc314) # Emby Contributors diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js index 01111d4c1b..09be5a71f0 100644 --- a/src/controllers/movies/movies.js +++ b/src/controllers/movies/movies.js @@ -26,6 +26,11 @@ import 'emby-itemscontainer'; const updateFilterControls = () => { if (this.alphaPicker) { this.alphaPicker.value(query.NameStartsWith); + if (query.SortBy.indexOf('SortName') === 0) { + this.alphaPicker.visible(true); + } else { + this.alphaPicker.visible(false); + } } }; diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js index 42490fd2f4..55e59b6289 100644 --- a/src/controllers/music/musicalbums.js +++ b/src/controllers/music/musicalbums.js @@ -155,20 +155,21 @@ import 'emby-itemscontainer'; overlayPlayButton: true }); } + let elems = tabContent.querySelectorAll('.paging'); - for (let 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 (let 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 (let i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onPreviousPageClick); + for (const elem of elems) { + elem.addEventListener('click', onPreviousPageClick); } const itemsContainer = tabContent.querySelector('.itemsContainer'); @@ -186,7 +187,16 @@ import 'emby-itemscontainer'; const updateFilterControls = (tabContent) => { const query = getQuery(); - this.alphaPicker.value(query.NameStartsWith); + + if (this.alphaPicker) { + this.alphaPicker.value(query.NameStartsWith); + + if (query.SortBy.indexOf('SortName') === 0) { + this.alphaPicker.visible(true); + } else { + this.alphaPicker.visible(false); + } + } }; let savedQueryKey; @@ -200,10 +210,12 @@ import 'emby-itemscontainer'; mode: 'albums', serverId: ApiClient.serverId() }); + events.on(filterDialog, 'filterchange', function () { getQuery().StartIndex = 0; reloadItems(tabContent); }); + filterDialog.show(); }); }; @@ -223,6 +235,7 @@ import 'emby-itemscontainer'; query.StartIndex = 0; reloadItems(tabContent); }); + this.alphaPicker = new AlphaPicker({ element: alphaPickerElement, valueChangeEvent: 'click' @@ -235,6 +248,7 @@ import 'emby-itemscontainer'; tabContent.querySelector('.btnFilter').addEventListener('click', () => { this.showFilterMenu(); }); + tabContent.querySelector('.btnSort').addEventListener('click', (e) => { libraryBrowser.showSortMenu({ items: [{ @@ -267,10 +281,12 @@ import 'emby-itemscontainer'; button: e.target }); }); + const btnSelectView = tabContent.querySelector('.btnSelectView'); btnSelectView.addEventListener('click', (e) => { libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); }); + btnSelectView.addEventListener('layoutchange', function (e) { const viewStyle = e.detail.viewStyle; getPageData().view = viewStyle; @@ -279,6 +295,7 @@ import 'emby-itemscontainer'; onViewStyleChange(); reloadItems(tabContent); }); + tabContent.querySelector('.btnPlayAll').addEventListener('click', playAll); tabContent.querySelector('.btnShuffle').addEventListener('click', shuffle); }; diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js index fee4fd24a5..949c994606 100644 --- a/src/controllers/shows/tvshows.js +++ b/src/controllers/shows/tvshows.js @@ -54,8 +54,8 @@ import 'emby-itemscontainer'; return context.savedQueryKey; } - function onViewStyleChange() { - const viewStyle = self.getCurrentViewStyle(); + const onViewStyleChange = () => { + const viewStyle = this.getCurrentViewStyle(); const itemsContainer = tabContent.querySelector('.itemsContainer'); if (viewStyle == 'List') { @@ -67,13 +67,13 @@ import 'emby-itemscontainer'; } itemsContainer.innerHTML = ''; - } + }; - function reloadItems(page) { + const reloadItems = (page) => { loading.show(); isLoading = true; const query = getQuery(page); - ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { + ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => { function onNextPageClick() { if (isLoading) { return; @@ -109,7 +109,7 @@ import 'emby-itemscontainer'; sortButton: false, filterButton: false }); - const viewStyle = self.getCurrentViewStyle(); + const viewStyle = this.getCurrentViewStyle(); if (viewStyle == 'Thumb') { html = cardBuilder.getCardsHtml({ items: result.Items, @@ -169,18 +169,18 @@ import 'emby-itemscontainer'; let elems = tabContent.querySelectorAll('.paging'); - for (let 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 (let 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 (let i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onPreviousPageClick); + for (const elem of elems) { + elem.addEventListener('click', onPreviousPageClick); } const itemsContainer = tabContent.querySelector('.itemsContainer'); @@ -194,18 +194,26 @@ import 'emby-itemscontainer'; autoFocuser.autoFocus(page); }); }); - } + }; - function updateFilterControls(tabContent) { + const updateFilterControls = (tabContent) => { const query = getQuery(tabContent); - self.alphaPicker.value(query.NameStartsWith); - } - const self = this; + if (this.alphaPicker) { + this.alphaPicker.value(query.NameStartsWith); + + if (query.SortBy.indexOf('SortName') === 0) { + this.alphaPicker.visible(true); + } else { + this.alphaPicker.visible(false); + } + } + }; + const data = {}; let isLoading = false; - self.showFilterMenu = function () { + this.showFilterMenu = function () { import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), @@ -220,11 +228,11 @@ import 'emby-itemscontainer'; }); }; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return getPageData(tabContent).view; }; - function initPage(tabContent) { + const initPage = (tabContent) => { const alphaPickerElement = tabContent.querySelector('.alphaPicker'); const itemsContainer = tabContent.querySelector('.itemsContainer'); @@ -235,7 +243,7 @@ import 'emby-itemscontainer'; query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new AlphaPicker({ + this.alphaPicker = new AlphaPicker({ element: alphaPickerElement, valueChangeEvent: 'click' }); @@ -244,8 +252,8 @@ import 'emby-itemscontainer'; alphaPickerElement.classList.add('alphaPicker-fixed-right'); itemsContainer.classList.add('padded-right-withalphapicker'); - tabContent.querySelector('.btnFilter').addEventListener('click', function () { - self.showFilterMenu(); + tabContent.querySelector('.btnFilter').addEventListener('click', () => { + this.showFilterMenu(); }); tabContent.querySelector('.btnSort').addEventListener('click', function (e) { libraryBrowser.showSortMenu({ @@ -277,8 +285,8 @@ import 'emby-itemscontainer'; }); }); const btnSelectView = tabContent.querySelector('.btnSelectView'); - btnSelectView.addEventListener('click', function (e) { - libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); + btnSelectView.addEventListener('click', (e) => { + libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { const viewStyle = e.detail.viewStyle; @@ -288,17 +296,17 @@ import 'emby-itemscontainer'; onViewStyleChange(); reloadItems(tabContent); }); - } + }; initPage(tabContent); onViewStyleChange(); - self.renderTab = function () { + this.renderTab = function () { reloadItems(tabContent); updateFilterControls(tabContent); }; - self.destroy = function () {}; + this.destroy = function () {}; } /* eslint-enable indent */