Merge pull request #3342 from dmitrylyzo/livetv-paging

Fix LiveTV Channels paging and autofocus

src/controllers/livetv.html

@@ -64,6 +64,9 @@
                 <button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list"></span></button>
             </div>
             <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div>
+            <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
+                <div class="paging"></div>
+            </div>
         </div>
         <div class="pageTabContent" id="recordingsTab" data-index="3">
             <div id="latestRecordings" class="verticalSection hide">

src/controllers/livetv/livetvchannels.js

@@ -50,7 +50,9 @@ export default function (view, params, tabContent) {
             if (userSettings.libraryPageSize() > 0) {
                 query.StartIndex += query.Limit;
             }
-            reloadItems(context);
+            reloadItems(context).then(() => {
+                window.scrollTo(0, 0);
+            });
         }
 
         function onPreviousPageClick() {
@@ -61,18 +63,24 @@ export default function (view, params, tabContent) {
             if (userSettings.libraryPageSize() > 0) {
                 query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
             }
-            reloadItems(context);
+            reloadItems(context).then(() => {
+                window.scrollTo(0, 0);
+            });
         }
 
         const query = getQuery();
-        context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
-            startIndex: query.StartIndex,
-            limit: query.Limit,
-            totalRecordCount: result.TotalRecordCount,
-            showLimit: false,
-            updatePageSizeSetting: false,
-            filterButton: false
-        });
+
+        for (const elem of context.querySelectorAll('.paging')) {
+            elem.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;
@@ -110,13 +118,13 @@ export default function (view, params, tabContent) {
         const query = getQuery();
         const apiClient = ApiClient;
         query.UserId = apiClient.getCurrentUserId();
-        apiClient.getLiveTvChannels(query).then(function (result) {
+        return apiClient.getLiveTvChannels(query).then(function (result) {
             renderChannels(context, result);
             loading.hide();
             isLoading = false;
 
             import('../../components/autoFocuser').then(({default: autoFocuser}) => {
-                autoFocuser.autoFocus(view);
+                autoFocuser.autoFocus(context);
             });
         });
     }