diff --git a/src/controllers/list.html b/src/controllers/list.html
index 72dd983d6..e5292522a 100644
--- a/src/controllers/list.html
+++ b/src/controllers/list.html
@@ -3,6 +3,7 @@
+
@@ -50,5 +51,8 @@
+
diff --git a/src/controllers/list.js b/src/controllers/list.js
index 6d1499366..b2be0bbd0 100644
--- a/src/controllers/list.js
+++ b/src/controllers/list.js
@@ -1,11 +1,11 @@
import globalize from '../scripts/globalize';
import listView from '../components/listview/listview';
-import layoutManager from '../components/layoutManager';
import * as userSettings from '../scripts/settings/userSettings';
import focusManager from '../components/focusManager';
import cardBuilder from '../components/cardbuilder/cardBuilder';
import loading from '../components/loading/loading';
import AlphaNumericShortcuts from '../scripts/alphanumericshortcuts';
+import libraryBrowser from '../scripts/libraryBrowser';
import { playbackManager } from '../components/playback/playbackmanager';
import AlphaPicker from '../components/alphaPicker/alphaPicker';
import '../elements/emby-itemscontainer/emby-itemscontainer';
@@ -165,7 +165,14 @@ import { appRouter } from '../components/appRouter';
instance.setFilterStatus(hasFilters);
if (instance.alphaPicker) {
- query.NameStartsWith = instance.alphaPicker.value();
+ const newValue = instance.alphaPicker.value();
+ if (newValue === '#') {
+ query.NameLessThan = 'A';
+ delete query.NameStartsWith;
+ } else {
+ query.NameStartsWith = newValue;
+ delete query.NameLessThan;
+ }
}
return query;
@@ -423,14 +430,75 @@ import { appRouter } from '../components/appRouter';
class ItemsView {
constructor(view, params) {
+ const query = {
+ StartIndex: 0,
+ Limit: undefined
+ };
+
+ if (userSettings.libraryPageSize() > 0) {
+ query['Limit'] = userSettings.libraryPageSize();
+ }
+
+ let isLoading = false;
+
+ function onNextPageClick() {
+ if (!isLoading && query.Limit > 0) {
+ query.StartIndex += query.Limit;
+ self.itemsContainer.refreshItems().then(() => {
+ window.scrollTo(0, 0);
+ autoFocus();
+ });
+ }
+ }
+
+ function onPreviousPageClick() {
+ if (!isLoading && query.Limit > 0) {
+ query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+ self.itemsContainer.refreshItems().then(() => {
+ window.scrollTo(0, 0);
+ autoFocus();
+ });
+ }
+ }
+
+ function updatePaging(startIndex, totalRecordCount, limit) {
+ const pagingHtml = libraryBrowser.getQueryPagingHtml({
+ startIndex,
+ limit,
+ totalRecordCount,
+ showLimit: false,
+ updatePageSizeSetting: false,
+ addLayoutButton: false,
+ sortButton: false,
+ filterButton: false
+ });
+
+ for (const elem of view.querySelectorAll('.paging')) {
+ elem.innerHTML = pagingHtml;
+ }
+
+ for (const elem of view.querySelectorAll('.btnNextPage')) {
+ elem.addEventListener('click', onNextPageClick);
+ }
+
+ for (const elem of view.querySelectorAll('.btnPreviousPage')) {
+ elem.addEventListener('click', onPreviousPageClick);
+ }
+ }
+
function fetchData() {
- return getItems(self, params, self.currentItem).then(function (result) {
+ isLoading = true;
+
+ return getItems(self, params, self.currentItem, null, query.StartIndex, query.Limit).then(function (result) {
if (self.totalItemCount == null) {
self.totalItemCount = result.Items ? result.Items.length : result.length;
}
updateAlphaPickerState(self, self.totalItemCount);
+ updatePaging(result.StartIndex, result.TotalRecordCount, query.Limit);
return result;
+ }).finally(() => {
+ isLoading = false;
});
}
@@ -559,15 +627,13 @@ class ItemsView {
self.alphaPicker = new AlphaPicker({
element: alphaPickerElement,
- itemsContainer: layoutManager.tv ? self.itemsContainer : null,
- itemClass: 'card',
- valueChangeEvent: layoutManager.tv ? null : 'click'
+ valueChangeEvent: 'click'
});
self.alphaPicker.on('alphavaluechanged', onAlphaPickerValueChanged);
}
function onAlphaPickerValueChanged() {
- self.alphaPicker.value();
+ query.StartIndex = 0;
self.itemsContainer.refreshItems();
}
@@ -710,6 +776,12 @@ class ItemsView {
}
}
+ function autoFocus() {
+ import('../components/autoFocuser').then(({default: autoFocuser}) => {
+ autoFocuser.autoFocus(view);
+ });
+ }
+
const self = this;
self.params = params;
this.itemsContainer = view.querySelector('.itemsContainer');