From f1afaa975ee46f230f93b7702ead15447f3bca4e Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:22:36 -0400
Subject: [PATCH 01/45] Refactor home screen

---
 src/components/cardbuilder/cardBuilder.js     | 268 +++----
 src/components/homesections/homesections.js   | 660 ++----------------
 .../homesections/sections/activeRecordings.ts |  92 +++
 .../homesections/sections/libraryButtons.ts   |  36 +
 .../homesections/sections/libraryTiles.ts     |  46 ++
 .../homesections/sections/liveTv.ts           | 181 +++++
 .../homesections/sections/nextUp.ts           | 106 +++
 .../homesections/sections/recentlyAdded.ts    | 165 +++++
 .../homesections/sections/resume.ts           | 105 +++
 .../homesections/sections/section.d.ts        |  11 +
 src/scripts/settings/userSettings.js          |   6 +-
 src/types/homeSectionType.ts                  |  27 +
 12 files changed, 949 insertions(+), 754 deletions(-)
 create mode 100644 src/components/homesections/sections/activeRecordings.ts
 create mode 100644 src/components/homesections/sections/libraryButtons.ts
 create mode 100644 src/components/homesections/sections/libraryTiles.ts
 create mode 100644 src/components/homesections/sections/liveTv.ts
 create mode 100644 src/components/homesections/sections/nextUp.ts
 create mode 100644 src/components/homesections/sections/recentlyAdded.ts
 create mode 100644 src/components/homesections/sections/resume.ts
 create mode 100644 src/components/homesections/sections/section.d.ts
 create mode 100644 src/types/homeSectionType.ts

diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index d52713283..ef44a1c33 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -33,11 +33,11 @@ import '../guide/programs.scss';
 const enableFocusTransform = !browser.slow && !browser.edge;
 
 /**
-         * Generate the HTML markup for cards for a set of items.
-         * @param items - The items used to generate cards.
-         * @param options - The options of the cards.
-         * @returns {string} The HTML markup for the cards.
-         */
+ * Generate the HTML markup for cards for a set of items.
+ * @param items - The items used to generate cards.
+ * @param [options] - The options of the cards.
+ * @returns {string} The HTML markup for the cards.
+ */
 export function getCardsHtml(items, options) {
     if (arguments.length === 1) {
         options = arguments[0];
@@ -48,10 +48,10 @@ export function getCardsHtml(items, options) {
 }
 
 /**
-         * Checks if the window is resizable.
-         * @param {number} windowWidth - Width of the device's screen.
-         * @returns {boolean} - Result of the check.
-         */
+ * Checks if the window is resizable.
+ * @param {number} windowWidth - Width of the device's screen.
+ * @returns {boolean} - Result of the check.
+ */
 function isResizable(windowWidth) {
     const screen = window.screen;
     if (screen) {
@@ -66,22 +66,22 @@ function isResizable(windowWidth) {
 }
 
 /**
-         * Gets the width of a card's image according to the shape and amount of cards per row.
-         * @param {string} shape - Shape of the card.
-         * @param {number} screenWidth - Width of the screen.
-         * @param {boolean} isOrientationLandscape - Flag for the orientation of the screen.
-         * @returns {number} Width of the image for a card.
-         */
+ * Gets the width of a card's image according to the shape and amount of cards per row.
+ * @param {string} shape - Shape of the card.
+ * @param {number} screenWidth - Width of the screen.
+ * @param {boolean} isOrientationLandscape - Flag for the orientation of the screen.
+ * @returns {number} Width of the image for a card.
+ */
 function getImageWidth(shape, screenWidth, isOrientationLandscape) {
     const imagesPerRow = cardBuilderUtils.getPostersPerRow(shape, screenWidth, isOrientationLandscape, layoutManager.tv);
     return Math.round(screenWidth / imagesPerRow);
 }
 
 /**
-         * Normalizes the options for a card.
-         * @param {Object} items - A set of items.
-         * @param {Object} options - Options for handling the items.
-         */
+ * Normalizes the options for a card.
+ * @param {Object} items - A set of items.
+ * @param {Object} options - Options for handling the items.
+ */
 function setCardData(items, options) {
     options.shape = options.shape || 'auto';
 
@@ -138,11 +138,11 @@ function setCardData(items, options) {
 }
 
 /**
-         * Generates the internal HTML markup for cards.
-         * @param {Object} items - Items for which to generate the markup.
-         * @param {Object} options - Options for generating the markup.
-         * @returns {string} The internal HTML markup of the cards.
-         */
+ * Generates the internal HTML markup for cards.
+ * @param {Object} items - Items for which to generate the markup.
+ * @param {Object} options - Options for generating the markup.
+ * @returns {string} The internal HTML markup of the cards.
+ */
 function buildCardsHtmlInternal(items, options) {
     let isVertical = false;
 
@@ -256,20 +256,20 @@ function buildCardsHtmlInternal(items, options) {
 }
 
 /**
-         * @typedef {Object} CardImageUrl
-         * @property {string} imgUrl - Image URL.
-         * @property {string} blurhash - Image blurhash.
-         * @property {boolean} forceName - Force name.
-         * @property {boolean} coverImage - Use cover style.
-         */
+ * @typedef {Object} CardImageUrl
+ * @property {string} imgUrl - Image URL.
+ * @property {string} blurhash - Image blurhash.
+ * @property {boolean} forceName - Force name.
+ * @property {boolean} coverImage - Use cover style.
+ */
 
 /** Get the URL of the card's image.
-         * @param {Object} item - Item for which to generate a card.
-         * @param {Object} apiClient - API client object.
-         * @param {Object} options - Options of the card.
-         * @param {string} shape - Shape of the desired image.
-         * @returns {CardImageUrl} Object representing the URL of the card's image.
-         */
+ * @param {Object} item - Item for which to generate a card.
+ * @param {Object} apiClient - API client object.
+ * @param {Object} options - Options of the card.
+ * @param {string} shape - Shape of the desired image.
+ * @returns {CardImageUrl} Object representing the URL of the card's image.
+ */
 function getCardImageUrl(item, apiClient, options, shape) {
     item = item.ProgramInfo || item;
 
@@ -412,10 +412,10 @@ function getCardImageUrl(item, apiClient, options, shape) {
 }
 
 /**
-         * Generates an index used to select the default color of a card based on a string.
-         * @param {?string} [str] - String to use for generating the index.
-         * @returns {number} Index of the color.
-         */
+ * Generates an index used to select the default color of a card based on a string.
+ * @param {?string} [str] - String to use for generating the index.
+ * @returns {number} Index of the color.
+ */
 function getDefaultColorIndex(str) {
     const numRandomColors = 5;
 
@@ -435,16 +435,16 @@ function getDefaultColorIndex(str) {
 }
 
 /**
-         * Generates the HTML markup for a card's text.
-         * @param {Array} lines - Array containing the text lines.
-         * @param {string} cssClass - Base CSS class to use for the lines.
-         * @param {boolean} forceLines - Flag to force the rendering of all lines.
-         * @param {boolean} isOuterFooter - Flag to mark the text lines as outer footer.
-         * @param {string} cardLayout - DEPRECATED
-         * @param {boolean} addRightMargin - Flag to add a right margin to the text.
-         * @param {number} maxLines - Maximum number of lines to render.
-         * @returns {string} HTML markup for the card's text.
-         */
+ * Generates the HTML markup for a card's text.
+ * @param {Array} lines - Array containing the text lines.
+ * @param {string} cssClass - Base CSS class to use for the lines.
+ * @param {boolean} forceLines - Flag to force the rendering of all lines.
+ * @param {boolean} isOuterFooter - Flag to mark the text lines as outer footer.
+ * @param {string} cardLayout - DEPRECATED
+ * @param {boolean} addRightMargin - Flag to add a right margin to the text.
+ * @param {number} maxLines - Maximum number of lines to render.
+ * @returns {string} HTML markup for the card's text.
+ */
 function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout, addRightMargin, maxLines) {
     let html = '';
 
@@ -488,21 +488,21 @@ function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout
 }
 
 /**
-         * Determines if the item is live TV.
-         * @param {Object} item - Item to use for the check.
-         * @returns {boolean} Flag showing if the item is live TV.
-         */
+ * Determines if the item is live TV.
+ * @param {Object} item - Item to use for the check.
+ * @returns {boolean} Flag showing if the item is live TV.
+ */
 function isUsingLiveTvNaming(item) {
     return item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'Recording';
 }
 
 /**
-         * Returns the air time text for the item based on the given times.
-         * @param {object} item - Item used to generate the air time text.
-         * @param {boolean} showAirDateTime - ISO8601 date for the start of the show.
-         * @param {boolean} showAirEndTime - ISO8601 date for the end of the show.
-         * @returns {string} The air time text for the item based on the given dates.
-         */
+ * Returns the air time text for the item based on the given times.
+ * @param {object} item - Item used to generate the air time text.
+ * @param {boolean} showAirDateTime - ISO8601 date for the start of the show.
+ * @param {boolean} showAirEndTime - ISO8601 date for the end of the show.
+ * @returns {string} The air time text for the item based on the given dates.
+ */
 function getAirTimeText(item, showAirDateTime, showAirEndTime) {
     let airTimeText = '';
 
@@ -529,16 +529,16 @@ function getAirTimeText(item, showAirDateTime, showAirEndTime) {
 }
 
 /**
-         * Generates the HTML markup for the card's footer text.
-         * @param {Object} item - Item used to generate the footer text.
-         * @param {Object} apiClient - API client instance.
-         * @param {Object} options - Options used to generate the footer text.
-         * @param {string} footerClass - CSS classes of the footer element.
-         * @param {string} progressHtml - HTML markup of the progress bar element.
-         * @param {Object} flags - Various flags for the footer
-         * @param {Object} urls - Various urls for the footer
-         * @returns {string} HTML markup of the card's footer text element.
-         */
+ * Generates the HTML markup for the card's footer text.
+ * @param {Object} item - Item used to generate the footer text.
+ * @param {Object} apiClient - API client instance.
+ * @param {Object} options - Options used to generate the footer text.
+ * @param {string} footerClass - CSS classes of the footer element.
+ * @param {string} progressHtml - HTML markup of the progress bar element.
+ * @param {Object} flags - Various flags for the footer
+ * @param {Object} urls - Various urls for the footer
+ * @returns {string} HTML markup of the card's footer text element.
+ */
 function getCardFooterText(item, apiClient, options, footerClass, progressHtml, flags, urls) {
     item = item.ProgramInfo || item;
     let html = '';
@@ -771,12 +771,12 @@ function getCardFooterText(item, apiClient, options, footerClass, progressHtml,
 }
 
 /**
-         * Generates the HTML markup for the action button.
-         * @param {Object} item - Item used to generate the action button.
-         * @param {string} text - Text of the action button.
-         * @param {string} serverId - ID of the server.
-         * @returns {string} HTML markup of the action button.
-         */
+ * Generates the HTML markup for the action button.
+ * @param {Object} item - Item used to generate the action button.
+ * @param {string} text - Text of the action button.
+ * @param {string} serverId - ID of the server.
+ * @returns {string} HTML markup of the action button.
+ */
 function getTextActionButton(item, text, serverId) {
     if (!text) {
         text = itemHelper.getDisplayName(item);
@@ -797,11 +797,11 @@ function getTextActionButton(item, text, serverId) {
 }
 
 /**
-         * Generates HTML markup for the item count indicator.
-         * @param {Object} options - Options used to generate the item count.
-         * @param {Object} item - Item used to generate the item count.
-         * @returns {string} HTML markup for the item count indicator.
-         */
+ * Generates HTML markup for the item count indicator.
+ * @param {Object} options - Options used to generate the item count.
+ * @param {Object} item - Item used to generate the item count.
+ * @returns {string} HTML markup for the item count indicator.
+ */
 function getItemCountsHtml(options, item) {
     const counts = [];
     let childText;
@@ -879,8 +879,8 @@ function getItemCountsHtml(options, item) {
 let refreshIndicatorLoaded;
 
 /**
-         * Imports the refresh indicator element.
-         */
+ * Imports the refresh indicator element.
+ */
 function importRefreshIndicator() {
     if (!refreshIndicatorLoaded) {
         refreshIndicatorLoaded = true;
@@ -889,22 +889,22 @@ function importRefreshIndicator() {
 }
 
 /**
-         * Returns the default background class for a card based on a string.
-         * @param {?string} [str] - Text used to generate the background class.
-         * @returns {string} CSS classes for default card backgrounds.
-         */
+ * Returns the default background class for a card based on a string.
+ * @param {?string} [str] - Text used to generate the background class.
+ * @returns {string} CSS classes for default card backgrounds.
+ */
 export function getDefaultBackgroundClass(str) {
     return 'defaultCardBackground defaultCardBackground' + getDefaultColorIndex(str);
 }
 
 /**
-         * Builds the HTML markup for an individual card.
-         * @param {number} index - Index of the card
-         * @param {object} item - Item used to generate the card.
-         * @param {object} apiClient - API client instance.
-         * @param {object} options - Options used to generate the card.
-         * @returns {string} HTML markup for the generated card.
-         */
+ * Builds the HTML markup for an individual card.
+ * @param {number} index - Index of the card
+ * @param {object} item - Item used to generate the card.
+ * @param {object} apiClient - API client instance.
+ * @param {object} options - Options used to generate the card.
+ * @returns {string} HTML markup for the generated card.
+ */
 function buildCard(index, item, apiClient, options) {
     let action = options.action || 'link';
 
@@ -1211,11 +1211,11 @@ function buildCard(index, item, apiClient, options) {
 }
 
 /**
-         * Generates HTML markup for the card overlay.
-         * @param {object} item - Item used to generate the card overlay.
-         * @param {string} action - Action assigned to the overlay.
-         * @returns {string} HTML markup of the card overlay.
-         */
+ * Generates HTML markup for the card overlay.
+ * @param {object} item - Item used to generate the card overlay.
+ * @param {string} action - Action assigned to the overlay.
+ * @returns {string} HTML markup of the card overlay.
+ */
 function getHoverMenuHtml(item, action) {
     let html = '';
 
@@ -1253,11 +1253,11 @@ function getHoverMenuHtml(item, action) {
 }
 
 /**
-         * Generates the text or icon used for default card backgrounds.
-         * @param {object} item - Item used to generate the card overlay.
-         * @param {object} options - Options used to generate the card overlay.
-         * @returns {string} HTML markup of the card overlay.
-         */
+ * Generates the text or icon used for default card backgrounds.
+ * @param {object} item - Item used to generate the card overlay.
+ * @param {object} options - Options used to generate the card overlay.
+ * @returns {string} HTML markup of the card overlay.
+ */
 export function getDefaultText(item, options) {
     if (item.CollectionType) {
         return '<span class="cardImageIcon material-icons ' + imageHelper.getLibraryIcon(item.CollectionType) + '" aria-hidden="true"></span>';
@@ -1301,10 +1301,10 @@ export function getDefaultText(item, options) {
 }
 
 /**
-         * Builds a set of cards and inserts them into the page.
-         * @param {Array} items - Array of items used to build the cards.
-         * @param {options} options - Options of the cards to build.
-         */
+ * Builds a set of cards and inserts them into the page.
+ * @param {Array} items - Array of items used to build the cards.
+ * @param {options} options - Options of the cards to build.
+ */
 export function buildCards(items, options) {
     // Abort if the container has been disposed
     if (!document.body.contains(options.itemsContainer)) {
@@ -1345,11 +1345,11 @@ export function buildCards(items, options) {
 }
 
 /**
-         * Ensures the indicators for a card exist and creates them if they don't exist.
-         * @param {HTMLDivElement} card - DOM element of the card.
-         * @param {HTMLDivElement} indicatorsElem - DOM element of the indicators.
-         * @returns {HTMLDivElement} - DOM element of the indicators.
-         */
+ * Ensures the indicators for a card exist and creates them if they don't exist.
+ * @param {HTMLDivElement} card - DOM element of the card.
+ * @param {HTMLDivElement} indicatorsElem - DOM element of the indicators.
+ * @returns {HTMLDivElement} - DOM element of the indicators.
+ */
 function ensureIndicators(card, indicatorsElem) {
     if (indicatorsElem) {
         return indicatorsElem;
@@ -1368,10 +1368,10 @@ function ensureIndicators(card, indicatorsElem) {
 }
 
 /**
-         * Adds user data to the card such as progress indicators and played status.
-         * @param {HTMLDivElement} card - DOM element of the card.
-         * @param {Object} userData - User data to apply to the card.
-         */
+ * Adds user data to the card such as progress indicators and played status.
+ * @param {HTMLDivElement} card - DOM element of the card.
+ * @param {Object} userData - User data to apply to the card.
+ */
 function updateUserData(card, userData) {
     const type = card.getAttribute('data-type');
     const enableCountIndicator = type === 'Series' || type === 'BoxSet' || type === 'Season';
@@ -1447,10 +1447,10 @@ function updateUserData(card, userData) {
 }
 
 /**
-         * Handles when user data has changed.
-         * @param {Object} userData - User data to apply to the card.
-         * @param {HTMLElement} scope - DOM element to use as a scope when selecting cards.
-         */
+ * Handles when user data has changed.
+ * @param {Object} userData - User data to apply to the card.
+ * @param {HTMLElement} scope - DOM element to use as a scope when selecting cards.
+ */
 export function onUserDataChanged(userData, scope) {
     const cards = (scope || document.body).querySelectorAll('.card-withuserdata[data-id="' + userData.ItemId + '"]');
 
@@ -1460,11 +1460,11 @@ export function onUserDataChanged(userData, scope) {
 }
 
 /**
-         * Handles when a timer has been created.
-         * @param {string} programId - ID of the program.
-         * @param {string} newTimerId - ID of the new timer.
-         * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
-         */
+ * Handles when a timer has been created.
+ * @param {string} programId - ID of the program.
+ * @param {string} newTimerId - ID of the new timer.
+ * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
+ */
 export function onTimerCreated(programId, newTimerId, itemsContainer) {
     const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]');
 
@@ -1480,10 +1480,10 @@ export function onTimerCreated(programId, newTimerId, itemsContainer) {
 }
 
 /**
-         * Handles when a timer has been cancelled.
-         * @param {string} timerId - ID of the cancelled timer.
-         * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
-         */
+ * Handles when a timer has been cancelled.
+ * @param {string} timerId - ID of the cancelled timer.
+ * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
+ */
 export function onTimerCancelled(timerId, itemsContainer) {
     const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
 
@@ -1497,10 +1497,10 @@ export function onTimerCancelled(timerId, itemsContainer) {
 }
 
 /**
-         * Handles when a series timer has been cancelled.
-         * @param {string} cancelledTimerId - ID of the cancelled timer.
-         * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
-         */
+ * Handles when a series timer has been cancelled.
+ * @param {string} cancelledTimerId - ID of the cancelled timer.
+ * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer.
+ */
 export function onSeriesTimerCancelled(cancelledTimerId, itemsContainer) {
     const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]');
 
diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
index 27c48f099..83b8ec551 100644
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@@ -1,15 +1,14 @@
-import escapeHtml from 'escape-html';
-
 import globalize from 'scripts/globalize';
-import imageHelper from 'scripts/imagehelper';
-import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
+import { DEFAULT_SECTIONS, HomeSectionType } from 'types/homeSectionType';
 import Dashboard from 'utils/dashboard';
 
-import cardBuilder from '../cardbuilder/cardBuilder';
-import imageLoader from '../images/imageLoader';
-import layoutManager from '../layoutManager';
-import { appRouter } from '../router/appRouter';
-import ServerConnections from '../ServerConnections';
+import { loadRecordings } from './sections/activeRecordings';
+import { loadLibraryButtons } from './sections/libraryButtons';
+import { loadLibraryTiles } from './sections/libraryTiles';
+import { loadLiveTV } from './sections/liveTv';
+import { loadNextUp } from './sections/nextUp';
+import { loadRecentlyAdded } from './sections/recentlyAdded';
+import { loadResume } from './sections/resume';
 
 import 'elements/emby-button/paper-icon-button-light';
 import 'elements/emby-itemscontainer/emby-itemscontainer';
@@ -19,26 +18,8 @@ import 'elements/emby-button/emby-button';
 import './homesections.scss';
 
 export function getDefaultSection(index) {
-    switch (index) {
-        case 0:
-            return 'smalllibrarytiles';
-        case 1:
-            return 'resume';
-        case 2:
-            return 'resumeaudio';
-        case 3:
-            return 'resumebook';
-        case 4:
-            return 'livetv';
-        case 5:
-            return 'nextup';
-        case 6:
-            return 'latestmedia';
-        case 7:
-            return 'none';
-        default:
-            return '';
-    }
+    if (index < 0 || index > DEFAULT_SECTIONS.length) return '';
+    return DEFAULT_SECTIONS[index];
 }
 
 function getAllSectionsToShow(userSettings, sectionCount) {
@@ -138,29 +119,36 @@ export function resume(elem, options) {
 function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) {
     const section = allSections[index];
     const elem = page.querySelector('.section' + index);
+    const options = { enableOverflow: enableScrollX() };
 
-    if (section === 'latestmedia') {
-        loadRecentlyAdded(elem, apiClient, user, userViews);
-    } else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') {
-        loadLibraryTiles(elem, apiClient, user, userSettings, 'smallBackdrop', userViews);
-    } else if (section === 'librarybuttons') {
-        loadlibraryButtons(elem, apiClient, user, userSettings, userViews);
-    } else if (section === 'resume') {
-        return loadResume(elem, apiClient, 'HeaderContinueWatching', 'Video', userSettings);
-    } else if (section === 'resumeaudio') {
-        return loadResume(elem, apiClient, 'HeaderContinueListening', 'Audio', userSettings);
-    } else if (section === 'activerecordings') {
-        loadLatestLiveTvRecordings(elem, true, apiClient);
-    } else if (section === 'nextup') {
-        loadNextUp(elem, apiClient, userSettings);
-    } else if (section === 'onnow' || section === 'livetv') {
-        return loadOnNow(elem, apiClient, user);
-    } else if (section === 'resumebook') {
-        return loadResume(elem, apiClient, 'HeaderContinueReading', 'Book', userSettings);
-    } else {
-        elem.innerHTML = '';
-        return Promise.resolve();
+    switch (section) {
+        case HomeSectionType.ActiveRecordings:
+            loadRecordings(elem, true, apiClient, options);
+            break;
+        case HomeSectionType.LatestMedia:
+            loadRecentlyAdded(elem, apiClient, user, userViews, options);
+            break;
+        case HomeSectionType.LibraryButtons:
+            loadLibraryButtons(elem, userViews);
+            break;
+        case HomeSectionType.LiveTv:
+            return loadLiveTV(elem, apiClient, user, options);
+        case HomeSectionType.NextUp:
+            loadNextUp(elem, apiClient, userSettings, options);
+            break;
+        case HomeSectionType.Resume:
+            return loadResume(elem, apiClient, 'HeaderContinueWatching', 'Video', userSettings, options);
+        case HomeSectionType.ResumeAudio:
+            return loadResume(elem, apiClient, 'HeaderContinueListening', 'Audio', userSettings, options);
+        case HomeSectionType.ResumeBook:
+            return loadResume(elem, apiClient, 'HeaderContinueReading', 'Book', userSettings, options);
+        case HomeSectionType.SmallLibraryTiles:
+            loadLibraryTiles(elem, userViews, options);
+            break;
+        default:
+            elem.innerHTML = '';
     }
+
     return Promise.resolve();
 }
 
@@ -174,573 +162,11 @@ function enableScrollX() {
     return true;
 }
 
-function getLibraryButtonsHtml(items) {
-    let html = '';
-
-    html += '<div class="verticalSection verticalSection-extrabottompadding">';
-    html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
-
-    html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
-
-    // library card background images
-    for (let i = 0, length = items.length; i < length; i++) {
-        const item = items[i];
-        const icon = imageHelper.getLibraryIcon(item.CollectionType);
-        html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '" aria-hidden="true"></span><span class="homeLibraryText">' + escapeHtml(item.Name) + '</span></a>';
-    }
-
-    html += '</div>';
-    html += '</div>';
-
-    return html;
-}
-
-function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) {
-    elem.classList.remove('verticalSection');
-    const html = getLibraryButtonsHtml(userViews);
-
-    elem.innerHTML = html;
-    imageLoader.lazyChildren(elem);
-}
-
-function getFetchLatestItemsFn(serverId, parentId, collectionType) {
-    return function () {
-        const apiClient = ServerConnections.getApiClient(serverId);
-        let limit = 16;
-
-        if (enableScrollX()) {
-            if (collectionType === 'music') {
-                limit = 30;
-            }
-        } else if (collectionType === 'tvshows') {
-            limit = 5;
-        } else if (collectionType === 'music') {
-            limit = 9;
-        } else {
-            limit = 8;
-        }
-
-        const options = {
-            Limit: limit,
-            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Thumb',
-            ParentId: parentId
-        };
-
-        return apiClient.getLatestItems(options);
-    };
-}
-
-function getLatestItemsHtmlFn(itemType, viewType) {
-    return function (items) {
-        const cardLayout = false;
-        let shape;
-        if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
-            shape = getPortraitShape(enableScrollX());
-        } else if (viewType === 'music' || viewType === 'homevideos') {
-            shape = getSquareShape(enableScrollX());
-        } else {
-            shape = getBackdropShape(enableScrollX());
-        }
-
-        return cardBuilder.getCardsHtml({
-            items: items,
-            shape: shape,
-            preferThumb: viewType !== 'movies' && viewType !== 'tvshows' && itemType !== 'Channel' && viewType !== 'music' ? 'auto' : null,
-            showUnplayedIndicator: false,
-            showChildCountIndicator: true,
-            context: 'home',
-            overlayText: false,
-            centerText: !cardLayout,
-            overlayPlayButton: viewType !== 'photos',
-            allowBottomPadding: !enableScrollX() && !cardLayout,
-            cardLayout: cardLayout,
-            showTitle: viewType !== 'photos',
-            showYear: viewType === 'movies' || viewType === 'tvshows' || !viewType,
-            showParentTitle: viewType === 'music' || viewType === 'tvshows' || !viewType || (cardLayout && (viewType === 'tvshows')),
-            lines: 2
-        });
-    };
-}
-
-function renderLatestSection(elem, apiClient, user, parent) {
-    let html = '';
-
-    html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
-    if (!layoutManager.tv) {
-        html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(parent, {
-            section: 'latest'
-        }) + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
-        html += '<h2 class="sectionTitle sectionTitle-cards">';
-        html += globalize.translate('LatestFromLibrary', escapeHtml(parent.Name));
-        html += '</h2>';
-        html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
-        html += '</a>';
-    } else {
-        html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', escapeHtml(parent.Name)) + '</h2>';
-    }
-    html += '</div>';
-
-    if (enableScrollX()) {
-        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-        html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
-    } else {
-        html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x padded-left padded-right vertical-wrap">';
-    }
-
-    if (enableScrollX()) {
-        html += '</div>';
-    }
-    html += '</div>';
-
-    elem.innerHTML = html;
-
-    const itemsContainer = elem.querySelector('.itemsContainer');
-    itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
-    itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
-    itemsContainer.parentContainer = elem;
-}
-
-function loadRecentlyAdded(elem, apiClient, user, userViews) {
-    elem.classList.remove('verticalSection');
-    const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
-
-    for (let i = 0, length = userViews.length; i < length; i++) {
-        const item = userViews[i];
-        if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) {
-            continue;
-        }
-
-        if (excludeViewTypes.indexOf(item.CollectionType || []) !== -1) {
-            continue;
-        }
-
-        const frag = document.createElement('div');
-        frag.classList.add('verticalSection');
-        frag.classList.add('hide');
-        elem.appendChild(frag);
-
-        renderLatestSection(frag, apiClient, user, item);
-    }
-}
-
-export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews) {
-    let html = '';
-    if (userViews.length) {
-        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
-        if (enableScrollX()) {
-            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
-        } else {
-            html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right focuscontainer-x vertical-wrap">';
-        }
-
-        html += cardBuilder.getCardsHtml({
-            items: userViews,
-            shape: getBackdropShape(enableScrollX()),
-            showTitle: true,
-            centerText: true,
-            overlayText: false,
-            lazy: true,
-            transition: false,
-            allowBottomPadding: !enableScrollX()
-        });
-
-        if (enableScrollX()) {
-            html += '</div>';
-        }
-        html += '</div>';
-    }
-
-    elem.innerHTML = html;
-    imageLoader.lazyChildren(elem);
-}
-
-const dataMonitorHints = {
-    'Audio': 'audioplayback,markplayed',
-    'Video': 'videoplayback,markplayed'
-};
-
-function loadResume(elem, apiClient, headerText, mediaType, userSettings) {
-    let html = '';
-
-    const dataMonitor = dataMonitorHints[mediaType] || 'markplayed';
-
-    html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate(headerText) + '</h2>';
-    if (enableScrollX()) {
-        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-        html += `<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="${dataMonitor}">`;
-    } else {
-        html += `<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="${dataMonitor}">`;
-    }
-
-    if (enableScrollX()) {
-        html += '</div>';
-    }
-    html += '</div>';
-
-    elem.classList.add('hide');
-    elem.innerHTML = html;
-
-    const itemsContainer = elem.querySelector('.itemsContainer');
-    itemsContainer.fetchData = getItemsToResumeFn(mediaType, apiClient.serverId());
-    itemsContainer.getItemsHtml = getItemsToResumeHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume(), mediaType);
-    itemsContainer.parentContainer = elem;
-}
-
-function getItemsToResumeFn(mediaType, serverId) {
-    return function () {
-        const apiClient = ServerConnections.getApiClient(serverId);
-
-        const limit = enableScrollX() ? 12 : 5;
-
-        const options = {
-            Limit: limit,
-            Recursive: true,
-            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Thumb',
-            EnableTotalRecordCount: false,
-            MediaTypes: mediaType
-        };
-
-        return apiClient.getResumableItems(apiClient.getCurrentUserId(), options);
-    };
-}
-
-function getItemsToResumeHtmlFn(useEpisodeImages, mediaType) {
-    return function (items) {
-        const cardLayout = false;
-        return cardBuilder.getCardsHtml({
-            items: items,
-            preferThumb: true,
-            inheritThumb: !useEpisodeImages,
-            shape: (mediaType === 'Book') ?
-                getPortraitShape(enableScrollX()) :
-                getBackdropShape(enableScrollX()),
-            overlayText: false,
-            showTitle: true,
-            showParentTitle: true,
-            lazy: true,
-            showDetailsMenu: true,
-            overlayPlayButton: true,
-            context: 'home',
-            centerText: !cardLayout,
-            allowBottomPadding: false,
-            cardLayout: cardLayout,
-            showYear: true,
-            lines: 2
-        });
-    };
-}
-
-function getOnNowFetchFn(serverId) {
-    return function () {
-        const apiClient = ServerConnections.getApiClient(serverId);
-        return apiClient.getLiveTvRecommendedPrograms({
-            userId: apiClient.getCurrentUserId(),
-            IsAiring: true,
-            limit: 24,
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Thumb,Backdrop',
-            EnableTotalRecordCount: false,
-            Fields: 'ChannelInfo,PrimaryImageAspectRatio'
-        });
-    };
-}
-
-function getOnNowItemsHtml(items) {
-    return cardBuilder.getCardsHtml({
-        items: items,
-        preferThumb: 'auto',
-        inheritThumb: false,
-        shape: (enableScrollX() ? 'autooverflow' : 'auto'),
-        showParentTitleOrTitle: true,
-        showTitle: true,
-        centerText: true,
-        coverImage: true,
-        overlayText: false,
-        allowBottomPadding: !enableScrollX(),
-        showAirTime: true,
-        showChannelName: false,
-        showAirDateTime: false,
-        showAirEndTime: true,
-        defaultShape: getBackdropShape(enableScrollX()),
-        lines: 3,
-        overlayPlayButton: true
-    });
-}
-
-function loadOnNow(elem, apiClient, user) {
-    if (!user.Policy.EnableLiveTvAccess) {
-        return Promise.resolve();
-    }
-
-    return apiClient.getLiveTvRecommendedPrograms({
-        userId: apiClient.getCurrentUserId(),
-        IsAiring: true,
-        limit: 1,
-        ImageTypeLimit: 1,
-        EnableImageTypes: 'Primary,Thumb,Backdrop',
-        EnableTotalRecordCount: false,
-        Fields: 'ChannelInfo,PrimaryImageAspectRatio'
-    }).then(function (result) {
-        let html = '';
-        if (result.Items.length) {
-            elem.classList.remove('padded-left');
-            elem.classList.remove('padded-right');
-            elem.classList.remove('padded-bottom');
-            elem.classList.remove('verticalSection');
-
-            html += '<div class="verticalSection">';
-            html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
-            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LiveTV') + '</h2>';
-            html += '</div>';
-
-            if (enableScrollX()) {
-                html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true" data-scrollbuttons="false">';
-                html += '<div class="padded-top padded-bottom scrollSlider focuscontainer-x">';
-            } else {
-                html += '<div class="padded-top padded-bottom focuscontainer-x">';
-            }
-
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
-                serverId: apiClient.serverId(),
-                section: 'programs'
-            }) + '" class="raised"><span>' + globalize.translate('Programs') + '</span></a>';
-
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
-                serverId: apiClient.serverId(),
-                section: 'guide'
-            }) + '" class="raised"><span>' + globalize.translate('Guide') + '</span></a>';
-
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
-                serverId: apiClient.serverId(),
-                section: 'channels'
-            }) + '" class="raised"><span>' + globalize.translate('Channels') + '</span></a>';
-
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('recordedtv', {
-                serverId: apiClient.serverId()
-            }) + '" class="raised"><span>' + globalize.translate('Recordings') + '</span></a>';
-
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
-                serverId: apiClient.serverId(),
-                section: 'dvrschedule'
-            }) + '" class="raised"><span>' + globalize.translate('Schedule') + '</span></a>';
-
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
-                serverId: apiClient.serverId(),
-                section: 'seriesrecording'
-            }) + '" class="raised"><span>' + globalize.translate('Series') + '</span></a>';
-
-            html += '</div>';
-            if (enableScrollX()) {
-                html += '</div>';
-            }
-            html += '</div>';
-            html += '</div>';
-
-            html += '<div class="verticalSection">';
-            html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
-
-            if (!layoutManager.tv) {
-                html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
-                    serverId: apiClient.serverId(),
-                    section: 'onnow'
-                }) + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
-                html += '<h2 class="sectionTitle sectionTitle-cards">';
-                html += globalize.translate('HeaderOnNow');
-                html += '</h2>';
-                html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
-                html += '</a>';
-            } else {
-                html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderOnNow') + '</h2>';
-            }
-            html += '</div>';
-
-            if (enableScrollX()) {
-                html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-                html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
-            } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
-            }
-
-            if (enableScrollX()) {
-                html += '</div>';
-            }
-
-            html += '</div>';
-            html += '</div>';
-
-            elem.innerHTML = html;
-
-            const itemsContainer = elem.querySelector('.itemsContainer');
-            itemsContainer.parentContainer = elem;
-            itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
-            itemsContainer.getItemsHtml = getOnNowItemsHtml;
-        }
-    });
-}
-
-function getNextUpFetchFn(serverId, userSettings) {
-    return function () {
-        const apiClient = ServerConnections.getApiClient(serverId);
-        const oldestDateForNextUp = new Date();
-        oldestDateForNextUp.setDate(oldestDateForNextUp.getDate() - userSettings.maxDaysForNextUp());
-        return apiClient.getNextUpEpisodes({
-            Limit: enableScrollX() ? 24 : 15,
-            Fields: 'PrimaryImageAspectRatio,DateCreated,BasicSyncInfo,Path,MediaSourceCount',
-            UserId: apiClient.getCurrentUserId(),
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
-            EnableTotalRecordCount: false,
-            DisableFirstEpisode: false,
-            NextUpDateCutoff: oldestDateForNextUp.toISOString(),
-            EnableRewatching: userSettings.enableRewatchingInNextUp()
-        });
-    };
-}
-
-function getNextUpItemsHtmlFn(useEpisodeImages) {
-    return function (items) {
-        const cardLayout = false;
-        return cardBuilder.getCardsHtml({
-            items: items,
-            preferThumb: true,
-            inheritThumb: !useEpisodeImages,
-            shape: getBackdropShape(enableScrollX()),
-            overlayText: false,
-            showTitle: true,
-            showParentTitle: true,
-            lazy: true,
-            overlayPlayButton: true,
-            context: 'home',
-            centerText: !cardLayout,
-            allowBottomPadding: !enableScrollX(),
-            cardLayout: cardLayout
-        });
-    };
-}
-
-function loadNextUp(elem, apiClient, userSettings) {
-    let html = '';
-
-    html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
-    if (!layoutManager.tv) {
-        html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('nextup', {
-            serverId: apiClient.serverId()
-        }) + '" class="button-flat button-flat-mini sectionTitleTextButton">';
-        html += '<h2 class="sectionTitle sectionTitle-cards">';
-        html += globalize.translate('NextUp');
-        html += '</h2>';
-        html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
-        html += '</a>';
-    } else {
-        html += '<h2 class="sectionTitle sectionTitle-cards">';
-        html += globalize.translate('NextUp');
-        html += '</h2>';
-    }
-    html += '</div>';
-
-    if (enableScrollX()) {
-        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-        html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">';
-    } else {
-        html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">';
-    }
-
-    if (enableScrollX()) {
-        html += '</div>';
-    }
-    html += '</div>';
-
-    elem.classList.add('hide');
-    elem.innerHTML = html;
-
-    const itemsContainer = elem.querySelector('.itemsContainer');
-    itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId(), userSettings);
-    itemsContainer.getItemsHtml = getNextUpItemsHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume());
-    itemsContainer.parentContainer = elem;
-}
-
-function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
-    return function () {
-        const apiClient = ServerConnections.getApiClient(serverId);
-        return apiClient.getLiveTvRecordings({
-            userId: apiClient.getCurrentUserId(),
-            Limit: enableScrollX() ? 12 : 5,
-            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
-            EnableTotalRecordCount: false,
-            IsLibraryItem: activeRecordingsOnly ? null : false,
-            IsInProgress: activeRecordingsOnly ? true : null
-        });
-    };
-}
-
-function getLatestRecordingItemsHtml(activeRecordingsOnly) {
-    return function (items) {
-        return cardBuilder.getCardsHtml({
-            items: items,
-            shape: enableScrollX() ? 'autooverflow' : 'auto',
-            showTitle: true,
-            showParentTitle: true,
-            coverImage: true,
-            lazy: true,
-            showDetailsMenu: true,
-            centerText: true,
-            overlayText: false,
-            showYear: true,
-            lines: 2,
-            overlayPlayButton: !activeRecordingsOnly,
-            allowBottomPadding: !enableScrollX(),
-            preferThumb: true,
-            cardLayout: false,
-            overlayMoreButton: activeRecordingsOnly,
-            action: activeRecordingsOnly ? 'none' : null,
-            centerPlayButton: activeRecordingsOnly
-        });
-    };
-}
-
-function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient) {
-    const title = activeRecordingsOnly ?
-        globalize.translate('HeaderActiveRecordings') :
-        globalize.translate('HeaderLatestRecordings');
-
-    let html = '';
-
-    html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
-    html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
-    html += '</div>';
-
-    if (enableScrollX()) {
-        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-        html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
-    } else {
-        html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
-    }
-
-    if (enableScrollX()) {
-        html += '</div>';
-    }
-    html += '</div>';
-
-    elem.classList.add('hide');
-    elem.innerHTML = html;
-
-    const itemsContainer = elem.querySelector('.itemsContainer');
-    itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
-    itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
-    itemsContainer.parentContainer = elem;
-}
-
 export default {
-    loadLibraryTiles: loadLibraryTiles,
-    getDefaultSection: getDefaultSection,
-    loadSections: loadSections,
-    destroySections: destroySections,
-    pause: pause,
-    resume: resume
+    getDefaultSection,
+    loadSections,
+    destroySections,
+    pause,
+    resume
 };
 
diff --git a/src/components/homesections/sections/activeRecordings.ts b/src/components/homesections/sections/activeRecordings.ts
new file mode 100644
index 000000000..8b8129f78
--- /dev/null
+++ b/src/components/homesections/sections/activeRecordings.ts
@@ -0,0 +1,92 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { ApiClient } from 'jellyfin-apiclient';
+
+import ServerConnections from 'components/ServerConnections';
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import globalize from 'scripts/globalize';
+
+import type { SectionContainerElement, SectionOptions } from './section';
+
+function getLatestRecordingsFetchFn(
+    serverId: string,
+    activeRecordingsOnly: boolean,
+    { enableOverflow }: SectionOptions
+) {
+    return function () {
+        const apiClient = ServerConnections.getApiClient(serverId);
+        return apiClient.getLiveTvRecordings({
+            userId: apiClient.getCurrentUserId(),
+            Limit: enableOverflow ? 12 : 5,
+            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
+            EnableTotalRecordCount: false,
+            IsLibraryItem: activeRecordingsOnly ? null : false,
+            IsInProgress: activeRecordingsOnly ? true : null
+        });
+    };
+}
+
+function getLatestRecordingItemsHtml(
+    activeRecordingsOnly: boolean,
+    { enableOverflow }: SectionOptions
+) {
+    return function (items: BaseItemDto[]) {
+        return cardBuilder.getCardsHtml({
+            items: items,
+            shape: enableOverflow ? 'autooverflow' : 'auto',
+            showTitle: true,
+            showParentTitle: true,
+            coverImage: true,
+            lazy: true,
+            showDetailsMenu: true,
+            centerText: true,
+            overlayText: false,
+            showYear: true,
+            lines: 2,
+            overlayPlayButton: !activeRecordingsOnly,
+            allowBottomPadding: !enableOverflow,
+            preferThumb: true,
+            cardLayout: false,
+            overlayMoreButton: activeRecordingsOnly,
+            action: activeRecordingsOnly ? 'none' : null,
+            centerPlayButton: activeRecordingsOnly
+        });
+    };
+}
+
+export function loadRecordings(
+    elem: HTMLElement,
+    activeRecordingsOnly: boolean,
+    apiClient: ApiClient,
+    options: SectionOptions
+) {
+    const title = activeRecordingsOnly ?
+        globalize.translate('HeaderActiveRecordings') :
+        globalize.translate('HeaderLatestRecordings');
+
+    let html = '';
+
+    html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
+    html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
+    html += '</div>';
+
+    if (options.enableOverflow) {
+        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
+        html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
+    } else {
+        html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
+    }
+
+    if (options.enableOverflow) {
+        html += '</div>';
+    }
+    html += '</div>';
+
+    elem.classList.add('hide');
+    elem.innerHTML = html;
+
+    const itemsContainer: SectionContainerElement | null = elem.querySelector('.itemsContainer');
+    if (!itemsContainer) return;
+    itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly, options);
+    itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly, options);
+    itemsContainer.parentContainer = elem;
+}
diff --git a/src/components/homesections/sections/libraryButtons.ts b/src/components/homesections/sections/libraryButtons.ts
new file mode 100644
index 000000000..06656c343
--- /dev/null
+++ b/src/components/homesections/sections/libraryButtons.ts
@@ -0,0 +1,36 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import escapeHtml from 'escape-html';
+
+import imageLoader from 'components/images/imageLoader';
+import { appRouter } from 'components/router/appRouter';
+import globalize from 'scripts/globalize';
+import imageHelper from 'scripts/imagehelper';
+
+function getLibraryButtonsHtml(items: BaseItemDto[]) {
+    let html = '';
+
+    html += '<div class="verticalSection verticalSection-extrabottompadding">';
+    html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
+
+    html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
+
+    // library card background images
+    for (let i = 0, length = items.length; i < length; i++) {
+        const item = items[i];
+        const icon = imageHelper.getLibraryIcon(item.CollectionType);
+        html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '" aria-hidden="true"></span><span class="homeLibraryText">' + escapeHtml(item.Name) + '</span></a>';
+    }
+
+    html += '</div>';
+    html += '</div>';
+
+    return html;
+}
+
+export function loadLibraryButtons(elem: HTMLElement, userViews: BaseItemDto[]) {
+    elem.classList.remove('verticalSection');
+    const html = getLibraryButtonsHtml(userViews);
+
+    elem.innerHTML = html;
+    imageLoader.lazyChildren(elem);
+}
diff --git a/src/components/homesections/sections/libraryTiles.ts b/src/components/homesections/sections/libraryTiles.ts
new file mode 100644
index 000000000..6ccfc528c
--- /dev/null
+++ b/src/components/homesections/sections/libraryTiles.ts
@@ -0,0 +1,46 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import imageLoader from 'components/images/imageLoader';
+import globalize from 'scripts/globalize';
+import { getBackdropShape } from 'utils/card';
+
+import type { SectionOptions } from './section';
+
+export function loadLibraryTiles(
+    elem: HTMLElement,
+    userViews: BaseItemDto[],
+    {
+        enableOverflow
+    }: SectionOptions
+) {
+    let html = '';
+    if (userViews.length) {
+        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
+        if (enableOverflow) {
+            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
+        } else {
+            html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right focuscontainer-x vertical-wrap">';
+        }
+
+        html += cardBuilder.getCardsHtml({
+            items: userViews,
+            shape: getBackdropShape(enableOverflow),
+            showTitle: true,
+            centerText: true,
+            overlayText: false,
+            lazy: true,
+            transition: false,
+            allowBottomPadding: !enableOverflow
+        });
+
+        if (enableOverflow) {
+            html += '</div>';
+        }
+        html += '</div>';
+    }
+
+    elem.innerHTML = html;
+    imageLoader.lazyChildren(elem);
+}
diff --git a/src/components/homesections/sections/liveTv.ts b/src/components/homesections/sections/liveTv.ts
new file mode 100644
index 000000000..7c8606c12
--- /dev/null
+++ b/src/components/homesections/sections/liveTv.ts
@@ -0,0 +1,181 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
+import type { ApiClient } from 'jellyfin-apiclient';
+
+import { appRouter } from 'components/router/appRouter';
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import layoutManager from 'components/layoutManager';
+import ServerConnections from 'components/ServerConnections';
+import globalize from 'scripts/globalize';
+import { getBackdropShape } from 'utils/card';
+
+import type { SectionContainerElement, SectionOptions } from './section';
+
+function getOnNowFetchFn(
+    serverId: string
+) {
+    return function () {
+        const apiClient = ServerConnections.getApiClient(serverId);
+        return apiClient.getLiveTvRecommendedPrograms({
+            userId: apiClient.getCurrentUserId(),
+            IsAiring: true,
+            limit: 24,
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Thumb,Backdrop',
+            EnableTotalRecordCount: false,
+            Fields: 'ChannelInfo,PrimaryImageAspectRatio'
+        });
+    };
+}
+
+function getOnNowItemsHtmlFn(
+    { enableOverflow }: SectionOptions
+) {
+    return (items: BaseItemDto[]) => (
+        cardBuilder.getCardsHtml({
+            items: items,
+            preferThumb: 'auto',
+            inheritThumb: false,
+            shape: (enableOverflow ? 'autooverflow' : 'auto'),
+            showParentTitleOrTitle: true,
+            showTitle: true,
+            centerText: true,
+            coverImage: true,
+            overlayText: false,
+            allowBottomPadding: !enableOverflow,
+            showAirTime: true,
+            showChannelName: false,
+            showAirDateTime: false,
+            showAirEndTime: true,
+            defaultShape: getBackdropShape(enableOverflow),
+            lines: 3,
+            overlayPlayButton: true
+        })
+    );
+}
+
+function buildSection(
+    elem: HTMLElement,
+    serverId: string,
+    options: SectionOptions
+) {
+    let html = '';
+
+    elem.classList.remove('padded-left');
+    elem.classList.remove('padded-right');
+    elem.classList.remove('padded-bottom');
+    elem.classList.remove('verticalSection');
+
+    html += '<div class="verticalSection">';
+    html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
+    html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LiveTV') + '</h2>';
+    html += '</div>';
+
+    if (options.enableOverflow) {
+        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true" data-scrollbuttons="false">';
+        html += '<div class="padded-top padded-bottom scrollSlider focuscontainer-x">';
+    } else {
+        html += '<div class="padded-top padded-bottom focuscontainer-x">';
+    }
+
+    html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+        serverId,
+        section: 'programs'
+    }) + '" class="raised"><span>' + globalize.translate('Programs') + '</span></a>';
+
+    html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+        serverId,
+        section: 'guide'
+    }) + '" class="raised"><span>' + globalize.translate('Guide') + '</span></a>';
+
+    html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+        serverId,
+        section: 'channels'
+    }) + '" class="raised"><span>' + globalize.translate('Channels') + '</span></a>';
+
+    html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('recordedtv', {
+        serverId
+    }) + '" class="raised"><span>' + globalize.translate('Recordings') + '</span></a>';
+
+    html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+        serverId,
+        section: 'dvrschedule'
+    }) + '" class="raised"><span>' + globalize.translate('Schedule') + '</span></a>';
+
+    html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+        serverId,
+        section: 'seriesrecording'
+    }) + '" class="raised"><span>' + globalize.translate('Series') + '</span></a>';
+
+    html += '</div>';
+    if (options.enableOverflow) {
+        html += '</div>';
+    }
+    html += '</div>';
+    html += '</div>';
+
+    html += '<div class="verticalSection">';
+    html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
+
+    if (!layoutManager.tv) {
+        html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+            serverId,
+            section: 'onnow'
+        }) + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
+        html += '<h2 class="sectionTitle sectionTitle-cards">';
+        html += globalize.translate('HeaderOnNow');
+        html += '</h2>';
+        html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
+        html += '</a>';
+    } else {
+        html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderOnNow') + '</h2>';
+    }
+    html += '</div>';
+
+    if (options.enableOverflow) {
+        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
+        html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
+    } else {
+        html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
+    }
+
+    if (options.enableOverflow) {
+        html += '</div>';
+    }
+
+    html += '</div>';
+    html += '</div>';
+
+    elem.innerHTML = html;
+
+    const itemsContainer: SectionContainerElement | null = elem.querySelector('.itemsContainer');
+    if (!itemsContainer) return;
+    itemsContainer.parentContainer = elem;
+    itemsContainer.fetchData = getOnNowFetchFn(serverId);
+    itemsContainer.getItemsHtml = getOnNowItemsHtmlFn(options);
+}
+
+export function loadLiveTV(
+    elem: HTMLElement,
+    apiClient: ApiClient,
+    user: UserDto,
+    options: SectionOptions
+) {
+    if (!user.Policy?.EnableLiveTvAccess) {
+        return Promise.resolve();
+    }
+
+    return apiClient.getLiveTvRecommendedPrograms({
+        userId: apiClient.getCurrentUserId(),
+        IsAiring: true,
+        limit: 1,
+        ImageTypeLimit: 1,
+        EnableImageTypes: 'Primary,Thumb,Backdrop',
+        EnableTotalRecordCount: false,
+        Fields: 'ChannelInfo,PrimaryImageAspectRatio'
+    }).then(function (result) {
+        if (result.Items?.length) {
+            buildSection(elem, apiClient.serverId(), options);
+        }
+    });
+}
diff --git a/src/components/homesections/sections/nextUp.ts b/src/components/homesections/sections/nextUp.ts
new file mode 100644
index 000000000..4ab401ab8
--- /dev/null
+++ b/src/components/homesections/sections/nextUp.ts
@@ -0,0 +1,106 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { ApiClient } from 'jellyfin-apiclient';
+
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import layoutManager from 'components/layoutManager';
+import { appRouter } from 'components/router/appRouter';
+import ServerConnections from 'components/ServerConnections';
+import globalize from 'scripts/globalize';
+import type { UserSettings } from 'scripts/settings/userSettings';
+import { getBackdropShape } from 'utils/card';
+
+import type { SectionContainerElement, SectionOptions } from './section';
+
+function getNextUpFetchFn(
+    serverId: string,
+    userSettings: UserSettings,
+    { enableOverflow }: SectionOptions
+) {
+    return function () {
+        const apiClient = ServerConnections.getApiClient(serverId);
+        const oldestDateForNextUp = new Date();
+        oldestDateForNextUp.setDate(oldestDateForNextUp.getDate() - userSettings.maxDaysForNextUp());
+        return apiClient.getNextUpEpisodes({
+            Limit: enableOverflow ? 24 : 15,
+            Fields: 'PrimaryImageAspectRatio,DateCreated,BasicSyncInfo,Path,MediaSourceCount',
+            UserId: apiClient.getCurrentUserId(),
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
+            EnableTotalRecordCount: false,
+            DisableFirstEpisode: false,
+            NextUpDateCutoff: oldestDateForNextUp.toISOString(),
+            EnableRewatching: userSettings.enableRewatchingInNextUp()
+        });
+    };
+}
+
+function getNextUpItemsHtmlFn(
+    useEpisodeImages: boolean,
+    { enableOverflow }: SectionOptions
+) {
+    return function (items: BaseItemDto[]) {
+        const cardLayout = false;
+        return cardBuilder.getCardsHtml({
+            items: items,
+            preferThumb: true,
+            inheritThumb: !useEpisodeImages,
+            shape: getBackdropShape(enableOverflow),
+            overlayText: false,
+            showTitle: true,
+            showParentTitle: true,
+            lazy: true,
+            overlayPlayButton: true,
+            context: 'home',
+            centerText: !cardLayout,
+            allowBottomPadding: !enableOverflow,
+            cardLayout: cardLayout
+        });
+    };
+}
+
+export function loadNextUp(
+    elem: HTMLElement,
+    apiClient: ApiClient,
+    userSettings: UserSettings,
+    options: SectionOptions
+) {
+    let html = '';
+
+    html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
+    if (!layoutManager.tv) {
+        html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('nextup', {
+            serverId: apiClient.serverId()
+        }) + '" class="button-flat button-flat-mini sectionTitleTextButton">';
+        html += '<h2 class="sectionTitle sectionTitle-cards">';
+        html += globalize.translate('NextUp');
+        html += '</h2>';
+        html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
+        html += '</a>';
+    } else {
+        html += '<h2 class="sectionTitle sectionTitle-cards">';
+        html += globalize.translate('NextUp');
+        html += '</h2>';
+    }
+    html += '</div>';
+
+    if (options.enableOverflow) {
+        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
+        html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">';
+    } else {
+        html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">';
+    }
+
+    if (options.enableOverflow) {
+        html += '</div>';
+    }
+    html += '</div>';
+
+    elem.classList.add('hide');
+    elem.innerHTML = html;
+
+    const itemsContainer: SectionContainerElement | null = elem.querySelector('.itemsContainer');
+    if (!itemsContainer) return;
+    itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId(), userSettings, options);
+    itemsContainer.getItemsHtml = getNextUpItemsHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume(), options);
+    itemsContainer.parentContainer = elem;
+}
diff --git a/src/components/homesections/sections/recentlyAdded.ts b/src/components/homesections/sections/recentlyAdded.ts
new file mode 100644
index 000000000..8f41cbb5c
--- /dev/null
+++ b/src/components/homesections/sections/recentlyAdded.ts
@@ -0,0 +1,165 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
+import escapeHtml from 'escape-html';
+import type { ApiClient } from 'jellyfin-apiclient';
+
+import layoutManager from 'components/layoutManager';
+import { appRouter } from 'components/router/appRouter';
+import globalize from 'scripts/globalize';
+import ServerConnections from 'components/ServerConnections';
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
+
+import type { SectionContainerElement, SectionOptions } from './section';
+
+function getFetchLatestItemsFn(
+    serverId: string,
+    parentId: string | undefined,
+    collectionType: string | null | undefined,
+    { enableOverflow }: SectionOptions
+) {
+    return function () {
+        const apiClient = ServerConnections.getApiClient(serverId);
+        let limit = 16;
+
+        if (enableOverflow) {
+            if (collectionType === 'music') {
+                limit = 30;
+            }
+        } else if (collectionType === 'tvshows') {
+            limit = 5;
+        } else if (collectionType === 'music') {
+            limit = 9;
+        } else {
+            limit = 8;
+        }
+
+        const options = {
+            Limit: limit,
+            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Backdrop,Thumb',
+            ParentId: parentId
+        };
+
+        return apiClient.getLatestItems(options);
+    };
+}
+
+function getLatestItemsHtmlFn(
+    itemType: BaseItemKind | undefined,
+    viewType: string | null | undefined,
+    { enableOverflow }: SectionOptions
+) {
+    return function (items: BaseItemDto[]) {
+        const cardLayout = false;
+        let shape;
+        if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
+            shape = getPortraitShape(enableOverflow);
+        } else if (viewType === 'music' || viewType === 'homevideos') {
+            shape = getSquareShape(enableOverflow);
+        } else {
+            shape = getBackdropShape(enableOverflow);
+        }
+
+        return cardBuilder.getCardsHtml({
+            items: items,
+            shape: shape,
+            preferThumb: viewType !== 'movies' && viewType !== 'tvshows' && itemType !== 'Channel' && viewType !== 'music' ? 'auto' : null,
+            showUnplayedIndicator: false,
+            showChildCountIndicator: true,
+            context: 'home',
+            overlayText: false,
+            centerText: !cardLayout,
+            overlayPlayButton: viewType !== 'photos',
+            allowBottomPadding: !enableOverflow && !cardLayout,
+            cardLayout: cardLayout,
+            showTitle: viewType !== 'photos',
+            showYear: viewType === 'movies' || viewType === 'tvshows' || !viewType,
+            showParentTitle: viewType === 'music' || viewType === 'tvshows' || !viewType || (cardLayout && (viewType === 'tvshows')),
+            lines: 2
+        });
+    };
+}
+
+function renderLatestSection(
+    elem: HTMLElement,
+    apiClient: ApiClient,
+    user: UserDto,
+    parent: BaseItemDto,
+    options: SectionOptions
+) {
+    let html = '';
+
+    html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
+    if (!layoutManager.tv) {
+        html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(parent, {
+            section: 'latest'
+        }) + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
+        html += '<h2 class="sectionTitle sectionTitle-cards">';
+        html += globalize.translate('LatestFromLibrary', escapeHtml(parent.Name));
+        html += '</h2>';
+        html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
+        html += '</a>';
+    } else {
+        html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', escapeHtml(parent.Name)) + '</h2>';
+    }
+    html += '</div>';
+
+    if (options.enableOverflow) {
+        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
+        html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
+    } else {
+        html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x padded-left padded-right vertical-wrap">';
+    }
+
+    if (options.enableOverflow) {
+        html += '</div>';
+    }
+    html += '</div>';
+
+    elem.innerHTML = html;
+
+    const itemsContainer: SectionContainerElement | null = elem.querySelector('.itemsContainer');
+    if (!itemsContainer) return;
+    itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType, options);
+    itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType, options);
+    itemsContainer.parentContainer = elem;
+}
+
+export function loadRecentlyAdded(
+    elem: HTMLElement,
+    apiClient: ApiClient,
+    user: UserDto,
+    userViews: BaseItemDto[],
+    options: SectionOptions
+) {
+    elem.classList.remove('verticalSection');
+    const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
+    const userExcludeItems = user.Configuration?.LatestItemsExcludes ?? [];
+
+    for (let i = 0, length = userViews.length; i < length; i++) {
+        const item = userViews[i];
+        if (
+            !item.Id
+            || userExcludeItems.indexOf(item.Id) !== -1
+        ) {
+            continue;
+        }
+
+        if (
+            !item.CollectionType
+            || excludeViewTypes.indexOf(item.CollectionType) !== -1
+        ) {
+            continue;
+        }
+
+        const frag = document.createElement('div');
+        frag.classList.add('verticalSection');
+        frag.classList.add('hide');
+        elem.appendChild(frag);
+
+        renderLatestSection(frag, apiClient, user, item, options);
+    }
+}
diff --git a/src/components/homesections/sections/resume.ts b/src/components/homesections/sections/resume.ts
new file mode 100644
index 000000000..e96dde3ee
--- /dev/null
+++ b/src/components/homesections/sections/resume.ts
@@ -0,0 +1,105 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import type { ApiClient } from 'jellyfin-apiclient';
+
+import ServerConnections from 'components/ServerConnections';
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import globalize from 'scripts/globalize';
+import type { UserSettings } from 'scripts/settings/userSettings';
+import { getBackdropShape, getPortraitShape } from 'utils/card';
+
+import type { SectionContainerElement, SectionOptions } from './section';
+
+const dataMonitorHints: Record<string, string> = {
+    Audio: 'audioplayback,markplayed',
+    Video: 'videoplayback,markplayed'
+};
+
+function getItemsToResumeFn(
+    mediaType: BaseItemKind,
+    serverId: string,
+    { enableOverflow }: SectionOptions
+) {
+    return function () {
+        const apiClient = ServerConnections.getApiClient(serverId);
+
+        const limit = enableOverflow ? 12 : 5;
+
+        const options = {
+            Limit: limit,
+            Recursive: true,
+            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Backdrop,Thumb',
+            EnableTotalRecordCount: false,
+            MediaTypes: mediaType
+        };
+
+        return apiClient.getResumableItems(apiClient.getCurrentUserId(), options);
+    };
+}
+
+function getItemsToResumeHtmlFn(
+    useEpisodeImages: boolean,
+    mediaType: BaseItemKind,
+    { enableOverflow }: SectionOptions
+) {
+    return function (items: BaseItemDto[]) {
+        const cardLayout = false;
+        return cardBuilder.getCardsHtml({
+            items: items,
+            preferThumb: true,
+            inheritThumb: !useEpisodeImages,
+            shape: (mediaType === 'Book') ?
+                getPortraitShape(enableOverflow) :
+                getBackdropShape(enableOverflow),
+            overlayText: false,
+            showTitle: true,
+            showParentTitle: true,
+            lazy: true,
+            showDetailsMenu: true,
+            overlayPlayButton: true,
+            context: 'home',
+            centerText: !cardLayout,
+            allowBottomPadding: false,
+            cardLayout: cardLayout,
+            showYear: true,
+            lines: 2
+        });
+    };
+}
+
+export function loadResume(
+    elem: HTMLElement,
+    apiClient: ApiClient,
+    titleLabel: string,
+    mediaType: BaseItemKind,
+    userSettings: UserSettings,
+    options: SectionOptions
+) {
+    let html = '';
+
+    const dataMonitor = dataMonitorHints[mediaType] ?? 'markplayed';
+
+    html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate(titleLabel) + '</h2>';
+    if (options.enableOverflow) {
+        html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
+        html += `<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="${dataMonitor}">`;
+    } else {
+        html += `<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="${dataMonitor}">`;
+    }
+
+    if (options.enableOverflow) {
+        html += '</div>';
+    }
+    html += '</div>';
+
+    elem.classList.add('hide');
+    elem.innerHTML = html;
+
+    const itemsContainer: SectionContainerElement | null = elem.querySelector('.itemsContainer');
+    if (!itemsContainer) return;
+    itemsContainer.fetchData = getItemsToResumeFn(mediaType, apiClient.serverId(), options);
+    itemsContainer.getItemsHtml = getItemsToResumeHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume(), mediaType, options);
+    itemsContainer.parentContainer = elem;
+}
diff --git a/src/components/homesections/sections/section.d.ts b/src/components/homesections/sections/section.d.ts
new file mode 100644
index 000000000..27f7c3770
--- /dev/null
+++ b/src/components/homesections/sections/section.d.ts
@@ -0,0 +1,11 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+
+export interface SectionOptions {
+    enableOverflow: boolean
+}
+
+export type SectionContainerElement = {
+    fetchData: () => void
+    getItemsHtml: (items: BaseItemDto[]) => void
+    parentContainer: HTMLElement
+} & Element;
diff --git a/src/scripts/settings/userSettings.js b/src/scripts/settings/userSettings.js
index 691b07cb4..9dc065621 100644
--- a/src/scripts/settings/userSettings.js
+++ b/src/scripts/settings/userSettings.js
@@ -301,7 +301,7 @@ export class UserSettings {
 
     /**
      * Get or set 'Use Episode Images in Next Up and Continue Watching' state.
-     * @param {string|boolean|undefined} val - Flag to enable 'Use Episode Images in Next Up and Continue Watching' or undefined.
+     * @param {string|boolean|undefined} [val] - Flag to enable 'Use Episode Images in Next Up and Continue Watching' or undefined.
      * @return {boolean} 'Use Episode Images in Next Up' state.
      */
     useEpisodeImagesInNextUpAndResume(val) {
@@ -463,7 +463,7 @@ export class UserSettings {
 
     /**
      * Get or set max days for next up list.
-     * @param {number|undefined} val - Max days for next up.
+     * @param {number|undefined} [val] - Max days for next up.
      * @return {number} Max days for a show to stay in next up without being watched.
      */
     maxDaysForNextUp(val) {
@@ -482,7 +482,7 @@ export class UserSettings {
 
     /**
      * Get or set rewatching in next up.
-     * @param {boolean|undefined} val - If rewatching items should be included in next up.
+     * @param {boolean|undefined} [val] - If rewatching items should be included in next up.
      * @returns {boolean} Rewatching in next up state.
      */
     enableRewatchingInNextUp(val) {
diff --git a/src/types/homeSectionType.ts b/src/types/homeSectionType.ts
new file mode 100644
index 000000000..1a3e6eb87
--- /dev/null
+++ b/src/types/homeSectionType.ts
@@ -0,0 +1,27 @@
+// NOTE: This should be included in the OpenAPI spec ideally
+// https://github.com/jellyfin/jellyfin/blob/1b4394199a2f9883cd601bdb8c9d66015397aa52/Jellyfin.Data/Enums/HomeSectionType.cs
+export enum HomeSectionType {
+    None = 'none',
+    SmallLibraryTiles = 'smalllibrarytiles',
+    LibraryButtons = 'librarybuttons',
+    ActiveRecordings = 'activerecordings',
+    Resume = 'resume',
+    ResumeAudio = 'resumeaudio',
+    LatestMedia = 'latestmedia',
+    NextUp = 'nextup',
+    LiveTv = 'livetv',
+    ResumeBook = 'resumebook'
+}
+
+// NOTE: This needs to match the server defaults
+// https://github.com/jellyfin/jellyfin/blob/1b4394199a2f9883cd601bdb8c9d66015397aa52/Jellyfin.Api/Controllers/DisplayPreferencesController.cs#L120
+export const DEFAULT_SECTIONS: HomeSectionType[] = [
+    HomeSectionType.SmallLibraryTiles,
+    HomeSectionType.Resume,
+    HomeSectionType.ResumeAudio,
+    HomeSectionType.ResumeBook,
+    HomeSectionType.LiveTv,
+    HomeSectionType.NextUp,
+    HomeSectionType.LatestMedia,
+    HomeSectionType.None
+];

From 8149076fc54c124219091070674e5dfff6add622 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Mon, 2 Oct 2023 13:43:06 -0400
Subject: [PATCH 02/45] Fix function return type

---
 src/components/homesections/sections/section.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/homesections/sections/section.d.ts b/src/components/homesections/sections/section.d.ts
index 27f7c3770..9307ba7c1 100644
--- a/src/components/homesections/sections/section.d.ts
+++ b/src/components/homesections/sections/section.d.ts
@@ -1,11 +1,12 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto-query-result';
 
 export interface SectionOptions {
     enableOverflow: boolean
 }
 
 export type SectionContainerElement = {
-    fetchData: () => void
+    fetchData: () => Promise<BaseItemDtoQueryResult | BaseItemDto[]>
     getItemsHtml: (items: BaseItemDto[]) => void
     parentContainer: HTMLElement
 } & Element;

From 81c3a43601708d29c9c7812778e13d81e64251c1 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Thu, 5 Oct 2023 08:55:19 -0400
Subject: [PATCH 03/45] Use foreach for recently added sections

---
 .../homesections/sections/recentlyAdded.ts    | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/homesections/sections/recentlyAdded.ts b/src/components/homesections/sections/recentlyAdded.ts
index 8f41cbb5c..3c46ecbbe 100644
--- a/src/components/homesections/sections/recentlyAdded.ts
+++ b/src/components/homesections/sections/recentlyAdded.ts
@@ -139,20 +139,13 @@ export function loadRecentlyAdded(
     const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
     const userExcludeItems = user.Configuration?.LatestItemsExcludes ?? [];
 
-    for (let i = 0, length = userViews.length; i < length; i++) {
-        const item = userViews[i];
-        if (
-            !item.Id
-            || userExcludeItems.indexOf(item.Id) !== -1
-        ) {
-            continue;
+    userViews.forEach(item => {
+        if (!item.Id || userExcludeItems.indexOf(item.Id) !== -1) {
+            return;
         }
 
-        if (
-            !item.CollectionType
-            || excludeViewTypes.indexOf(item.CollectionType) !== -1
-        ) {
-            continue;
+        if (!item.CollectionType || excludeViewTypes.indexOf(item.CollectionType) !== -1) {
+            return;
         }
 
         const frag = document.createElement('div');
@@ -161,5 +154,5 @@ export function loadRecentlyAdded(
         elem.appendChild(frag);
 
         renderLatestSection(frag, apiClient, user, item, options);
-    }
+    });
 }

From 60102f28b645fb7b0d1e6c1683f3ba165f49ad16 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Thu, 28 Sep 2023 02:22:58 -0400
Subject: [PATCH 04/45] Refactor GH actions

---
 .github/workflows/{tsc.yml => build.yml}      | 23 ++++++---
 .../{codeql-analysis.yml => codeql.yml}       | 23 +++++----
 .github/workflows/{lint.yml => quality.yml}   | 48 ++++++++++++++++++-
 .../workflows/{repo-stale.yaml => stale.yml}  |  0
 4 files changed, 76 insertions(+), 18 deletions(-)
 rename .github/workflows/{tsc.yml => build.yml} (56%)
 rename .github/workflows/{codeql-analysis.yml => codeql.yml} (71%)
 rename .github/workflows/{lint.yml => quality.yml} (68%)
 rename .github/workflows/{repo-stale.yaml => stale.yml} (100%)

diff --git a/.github/workflows/tsc.yml b/.github/workflows/build.yml
similarity index 56%
rename from .github/workflows/tsc.yml
rename to .github/workflows/build.yml
index 35bde340f..e6d71a240 100644
--- a/.github/workflows/tsc.yml
+++ b/.github/workflows/build.yml
@@ -1,14 +1,19 @@
-name: TypeScript Build Check
+name: Build
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 
 on:
   push:
     branches: [ master, release* ]
   pull_request:
     branches: [ master, release* ]
+  workflow_dispatch:
 
 jobs:
-  tsc:
-    name: Run TypeScript build check
+  run-build-prod:
+    name: Run production build
     runs-on: ubuntu-latest
 
     steps:
@@ -25,8 +30,12 @@ jobs:
       - name: Install Node.js dependencies
         run: npm ci --no-audit
 
-      - name: Run tsc
-        run: npm run build:check
+      - name: Run a production build
+        run: npm run build:production
 
-      - name: Run test suite
-        run: npm run test
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3.1.3
+        with:
+          name: jellyfin-web__prod
+          path: |
+            dist
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql.yml
similarity index 71%
rename from .github/workflows/codeql-analysis.yml
rename to .github/workflows/codeql.yml
index 6c8ffdbbf..3e08d9ce1 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql.yml
@@ -1,31 +1,34 @@
-name: "CodeQL"
+name: CodeQL
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, release* ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, release* ]
   schedule:
     - cron: '30 7 * * 6'
 
 jobs:
-  analyze:
-    name: Analyze
+  codeql:
+    name: CodeQL
     runs-on: ubuntu-latest
 
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
     steps:
     - name: Checkout repository
       uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
+
     - name: Initialize CodeQL
       uses: github/codeql-action/init@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3
       with:
-        languages: ${{ matrix.language }}
+        languages: javascript
         queries: +security-extended
+
     - name: Autobuild
       uses: github/codeql-action/autobuild@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3
+
     - name: Perform CodeQL Analysis
       uses: github/codeql-action/analyze@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3
diff --git a/.github/workflows/lint.yml b/.github/workflows/quality.yml
similarity index 68%
rename from .github/workflows/lint.yml
rename to .github/workflows/quality.yml
index b754665bc..b4840d90c 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/quality.yml
@@ -1,4 +1,8 @@
-name: Lint
+name: Quality checks
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 
 on:
   push:
@@ -99,3 +103,45 @@ jobs:
 
       - name: Run stylelint
         run: npm run stylelint:scss
+
+  run-tsc:
+    name: Run TypeScript build check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
+
+      - name: Setup node environment
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run tsc
+        run: npm run build:check
+
+  run-test:
+    name: Run tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
+
+      - name: Setup node environment
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run test suite
+        run: npm run test
diff --git a/.github/workflows/repo-stale.yaml b/.github/workflows/stale.yml
similarity index 100%
rename from .github/workflows/repo-stale.yaml
rename to .github/workflows/stale.yml

From 203102c4b9f63ce8229e0f660442a29997c5262c Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:57:00 -0400
Subject: [PATCH 05/45] Add CF pages publish actions

---
 .github/workflows/job-messages.yml | 65 +++++++++++++++++++++
 .github/workflows/publish.yml      | 94 ++++++++++++++++++++++++++++++
 2 files changed, 159 insertions(+)
 create mode 100644 .github/workflows/job-messages.yml
 create mode 100644 .github/workflows/publish.yml

diff --git a/.github/workflows/job-messages.yml b/.github/workflows/job-messages.yml
new file mode 100644
index 000000000..0e47838ba
--- /dev/null
+++ b/.github/workflows/job-messages.yml
@@ -0,0 +1,65 @@
+name: Job messages
+
+on:
+  workflow_call:
+    inputs:
+      branch:
+        required: false
+        type: string
+      commit:
+        required: true
+        type: string
+      preview_url:
+        required: false
+        type: string
+      build_workflow_run_id:
+        required: false
+        type: number
+      commenting_workflow_run_id:
+        required: true
+        type: string
+      in_progress:
+        required: true
+        type: boolean
+    outputs:
+      msg:
+        description: The composed message
+        value: ${{ jobs.msg.outputs.msg }}
+      marker:
+        description: Hidden marker to detect PR comments composed by the bot
+        value: "CFPages-deployment"
+
+jobs:
+  msg:
+    name: Deployment status
+    runs-on: ubuntu-latest
+    outputs:
+      msg: ${{ env.msg }}
+
+    steps:
+      - name: Compose message
+        if: ${{ always() }}
+        id: compose
+        env:
+          COMMIT: ${{ inputs.commit }}
+          PREVIEW_URL: ${{ inputs.preview_url != '' && (inputs.branch != 'master' && inputs.preview_url || format('https://jf-web.pages.dev ({0})', inputs.preview_url)) || 'Not available' }}
+          DEPLOY_STATUS: ${{ inputs.in_progress && '🔄 Deploying...' || (inputs.preview_url != '' && '✅ Deployed!' || '❌ Failure. Check workflow logs for details') }}
+          DEPLOYMENT_TYPE: ${{ inputs.branch != 'master' && '🔀 Preview' || '⚙️ Production' }}
+          BUILD_WORKFLOW_RUN: ${{ !inputs.in_progress && format('**[View build logs](https://github.com/{0}/actions/runs/{1})**', 'jellyfin/jellyfin-web', inputs.build_workflow_run_id) || '' }}
+          COMMENTING_WORKFLOW_RUN: ${{ format('**[View bot logs](https://github.com/{0}/actions/runs/{1})**', 'jellyfin/jellyfin-web', inputs.commenting_workflow_run_id) }}
+        # EOF is needed for multiline environment variables in a GitHub Actions context
+        run: |
+          echo "## Cloudflare Pages deployment" > $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "| **Latest commit**       	| <code>${COMMIT::7}</code>     |" >> $GITHUB_STEP_SUMMARY
+          echo "|-------------------------	|:----------------------------:	|" >> $GITHUB_STEP_SUMMARY
+          echo "| **Status**              	| $DEPLOY_STATUS                |" >> $GITHUB_STEP_SUMMARY
+          echo "| **Preview URL**         	| $PREVIEW_URL                  |" >> $GITHUB_STEP_SUMMARY
+          echo "| **Type**         	        | $DEPLOYMENT_TYPE              |" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "$BUILD_WORKFLOW_RUN" >> $GITHUB_STEP_SUMMARY
+          echo "$COMMENTING_WORKFLOW_RUN" >> $GITHUB_STEP_SUMMARY
+          COMPOSED_MSG=$(cat $GITHUB_STEP_SUMMARY)
+          echo "msg<<EOF" >> $GITHUB_ENV
+          echo "$COMPOSED_MSG" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 000000000..2b7bbea71
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,94 @@
+on:
+  workflow_run:
+    workflows:
+      - Build
+    types:
+      - completed
+
+jobs:
+  publish:
+    permissions:
+      contents: read
+      deployments: write
+
+    name: Deploy to Cloudflare Pages
+    runs-on: ubuntu-latest
+    outputs:
+      url: ${{ steps.cf.outputs.url }}
+
+    steps:
+      - name: Download workflow artifact
+        uses: dawidd6/action-download-artifact@v2.27.0
+        with:
+          run_id: ${{ github.event.workflow_run.id }}
+          name: jellyfin-web__prod
+          path: dist
+
+      - name: Publish
+        id: cf
+        uses: cloudflare/pages-action@1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: jf-web
+          directory: dist
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+
+  pr-context:
+    name: PR context
+    if: ${{ always() && github.event.workflow_run.event == 'pull_request' }}
+    runs-on: ubuntu-latest
+    outputs:
+      commit: ${{ env.pr_sha }}
+      pr_number: ${{ env.pr_number }}
+
+    steps:
+      - name: Get PR context
+        uses: dawidd6/action-download-artifact@v2.27.0
+        id: pr_context
+        with:
+          run_id: ${{ github.event.workflow_run.id }}
+          name: PR_context
+
+      - name: Set PR context environment variables
+        if: ${{ steps.pr_context.conclusion == 'success' }}
+        run: |
+          echo "pr_number=$(cat PR_number)" >> $GITHUB_ENV
+          echo "pr_sha=$(cat PR_sha)" >> $GITHUB_ENV
+
+  compose-comment:
+    name: Compose comment
+    if: ${{ always() }}
+    uses: ./.github/workflows/job-messages.yml
+    needs:
+      - publish
+      - pr-context
+
+    with:
+      branch: ${{ github.event.workflow_run.head_branch }}
+      commit: ${{ needs.pr-context.outputs.commit != '' && needs.pr-context.outputs.commit || github.event.workflow_run.head_sha }}
+      preview_url: ${{ needs.publish.outputs.url }}
+      build_workflow_run_id: ${{ github.event.workflow_run.id }}
+      commenting_workflow_run_id: ${{ github.run_id }}
+      in_progress: false
+
+  comment-status:
+    name: Create comment status
+    if: |
+      always() &&
+      github.event.workflow_run.event == 'pull_request' &&
+      needs.pr-context.outputs.pr_number != ''
+    runs-on: ubuntu-latest
+    needs:
+      - compose-comment
+      - pr-context
+
+    steps:
+      - name: Update job summary in PR comment
+        uses: thollander/actions-comment-pull-request@v2.4.2
+        with:
+          GITHUB_TOKEN: ${{ secrets.JF_BOT_TOKEN }}
+          message: ${{ needs.compose-comment.outputs.msg }}
+          pr_number: ${{ needs.pr-context.outputs.pr_number }}
+          comment_tag: ${{ needs.compose-comment.outputs.marker }}
+          mode: recreate

From c1b3a3f60d394c28bc5d51c5c269ff1b592b18f0 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Fri, 29 Sep 2023 00:34:49 -0400
Subject: [PATCH 06/45] Update codeql job name

---
 .github/workflows/codeql.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 3e08d9ce1..34d1fafbf 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -14,7 +14,7 @@ on:
 
 jobs:
   codeql:
-    name: CodeQL
+    name: Run CodeQL
     runs-on: ubuntu-latest
 
     steps:

From ac6c4c449c42fa31c56298b07d7c8335b856a36d Mon Sep 17 00:00:00 2001
From: felix920506 <felix920506@gmail.com>
Date: Thu, 5 Oct 2023 23:45:30 +0000
Subject: [PATCH 07/45] Translated using Weblate (Chinese (Traditional))
 Translation: Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/zh_Hant/

---
 src/strings/zh-tw.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/strings/zh-tw.json b/src/strings/zh-tw.json
index b4825af3b..d6362e2c0 100644
--- a/src/strings/zh-tw.json
+++ b/src/strings/zh-tw.json
@@ -822,7 +822,7 @@
     "LabelFormat": "格式",
     "LabelFriendlyName": "好聽的名字",
     "LabelGroupMoviesIntoCollections": "將電影分組",
-    "LabelKodiMetadataDateFormat": "釋出日期格式",
+    "LabelKodiMetadataDateFormat": "發行日期格式",
     "LabelIconMaxWidth": "Icon 最寬寬度",
     "LabelGroupMoviesIntoCollectionsHelp": "選擇檢視電影清單時，集合中的電影將作為一個分組項目顯示。",
     "LabelEncoderPreset": "預設編碼",

From f6946f9898bebef934d844797150cf9c8085d31c Mon Sep 17 00:00:00 2001
From: arminius <armin@sprejz.de>
Date: Fri, 6 Oct 2023 03:55:11 +0200
Subject: [PATCH 08/45] Remove cache from docker images after installing
 packages

---
 deployment/Dockerfile.centos   | 3 ++-
 deployment/Dockerfile.debian   | 3 ++-
 deployment/Dockerfile.docker   | 2 +-
 deployment/Dockerfile.fedora   | 5 +++--
 deployment/Dockerfile.portable | 3 ++-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/deployment/Dockerfile.centos b/deployment/Dockerfile.centos
index 32ade8de4..39a8b1fbe 100644
--- a/deployment/Dockerfile.centos
+++ b/deployment/Dockerfile.centos
@@ -14,7 +14,8 @@ RUN yum update -y \
   && yum install -y epel-release \
   && yum install -y rpmdevtools git autoconf automake glibc-devel gcc-c++ make \
   && yum install https://rpm.nodesource.com/pub_20.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y \
-  && yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1
+  && yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1 \
+  && yum clean all
 
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.centos /build.sh
diff --git a/deployment/Dockerfile.debian b/deployment/Dockerfile.debian
index d42b812bf..68c62cf79 100644
--- a/deployment/Dockerfile.debian
+++ b/deployment/Dockerfile.debian
@@ -17,7 +17,8 @@ RUN apt-get update \
   && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
   && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
   && apt-get update \
-  && apt-get install -y nodejs
+  && apt-get install -y nodejs \
+  && rm -rf /var/lib/apt/lists/*
 
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.debian /build.sh
diff --git a/deployment/Dockerfile.docker b/deployment/Dockerfile.docker
index bd5a93996..46271bc9a 100644
--- a/deployment/Dockerfile.docker
+++ b/deployment/Dockerfile.docker
@@ -3,7 +3,7 @@ FROM node:20-alpine
 ARG SOURCE_DIR=/src
 ARG ARTIFACT_DIR=/jellyfin-web
 
-RUN apk add autoconf g++ make libpng-dev gifsicle alpine-sdk automake libtool make gcc musl-dev nasm python3
+RUN apk --no-cache add autoconf g++ make libpng-dev gifsicle alpine-sdk automake libtool make gcc musl-dev nasm python3
 
 WORKDIR ${SOURCE_DIR}
 COPY . .
diff --git a/deployment/Dockerfile.fedora b/deployment/Dockerfile.fedora
index 8c77fae0c..efcd602ce 100644
--- a/deployment/Dockerfile.fedora
+++ b/deployment/Dockerfile.fedora
@@ -11,8 +11,9 @@ ENV IS_DOCKER=YES
 
 # Prepare Fedora environment
 RUN dnf update -y \
-  && yum install https://rpm.nodesource.com/pub_20.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y \
-  && dnf install -y @buildsys-build rpmdevtools git dnf-plugins-core nodejs autoconf automake glibc-devel make --setopt=nodesource-nodejs.module_hotfixes=1
+  && dnf install https://rpm.nodesource.com/pub_20.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y \
+  && dnf install -y @buildsys-build rpmdevtools git dnf-plugins-core nodejs autoconf automake glibc-devel make --setopt=nodesource-nodejs.module_hotfixes=1 \
+  && dnf clean all
 
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.fedora /build.sh
diff --git a/deployment/Dockerfile.portable b/deployment/Dockerfile.portable
index e57052178..4bdbe80a7 100644
--- a/deployment/Dockerfile.portable
+++ b/deployment/Dockerfile.portable
@@ -16,7 +16,8 @@ RUN apt-get update \
   && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
   && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
   && apt-get update \
-  && apt-get install -y nodejs
+  && apt-get install -y nodejs \
+  && rm -rf /var/lib/apt/lists/*
 
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.portable /build.sh

From 70557d6c1ca3051688e6d3522a8bf9b33b11b799 Mon Sep 17 00:00:00 2001
From: Leo <leo-van@hotmail.com>
Date: Fri, 6 Oct 2023 03:21:32 +0000
Subject: [PATCH 09/45] Translated using Weblate (Chinese (Simplified))
 Translation: Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/zh_Hans/

---
 src/strings/zh-cn.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/strings/zh-cn.json b/src/strings/zh-cn.json
index 8a0f36db6..47986abc8 100644
--- a/src/strings/zh-cn.json
+++ b/src/strings/zh-cn.json
@@ -1773,5 +1773,8 @@
     "ForeignPartsOnly": "仅限强制开启/外语部分",
     "HearingImpairedShort": "听障/聋哑人士字幕",
     "UnknownError": "发生未知错误。",
-    "GoHome": "回家"
+    "GoHome": "回家",
+    "BackdropScreensaver": "背景屏保",
+    "LogoScreensaver": "徽标屏保",
+    "LabelIsHearingImpaired": "用于听障/聋哑人士"
 }

From 73af57b81e55a2b0094909577dafc9d9dfed7159 Mon Sep 17 00:00:00 2001
From: Brad Beattie <bradbeattie@gmail.com>
Date: Thu, 15 Dec 2022 18:55:41 -0800
Subject: [PATCH 10/45] Upping search limit

---
 src/components/search/SearchResults.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index f8e5a12fb..ebb5240b2 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -49,7 +49,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
     const getDefaultParameters = useCallback(() => ({
         ParentId: parentId,
         searchTerm: query,
-        Limit: 24,
+        Limit: 100,
         Fields: 'PrimaryImageAspectRatio,CanDelete,BasicSyncInfo,MediaSourceCount',
         Recursive: true,
         EnableTotalRecordCount: false,

From cf516e9debbf4d644259d3c658111417dd65ac5b Mon Sep 17 00:00:00 2001
From: Randy Torres <svsywxn@skiff.com>
Date: Sat, 7 Oct 2023 04:53:01 +0000
Subject: [PATCH 11/45] Translated using Weblate (Malay) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/ms/

---
 src/strings/ms.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/strings/ms.json b/src/strings/ms.json
index 6a000566e..d950d6ff6 100644
--- a/src/strings/ms.json
+++ b/src/strings/ms.json
@@ -251,5 +251,12 @@
     "AllowSegmentDeletionHelp": "Padam segmen lama setelah ia dihantar ke pelayan. Ini menghalang file transcode disimpan dalam disk. Ia akan berfungsi dengan penghad haju dihidupkan. Matikan tetapan ini jika anda mengalami isu dengan pemain video.",
     "LabelThrottleDelaySeconds": "Penghad laju setelah",
     "Settings": "Tetapan",
-    "SelectServer": "Pilih pelayan"
+    "SelectServer": "Pilih pelayan",
+    "ButtonBackspace": "pendikit",
+    "ButtonSpace": "Ruang",
+    "BackdropScreensaver": "Penyimpan skrin latar belakang",
+    "Cursive": "Sambung",
+    "DefaultSubtitlesHelp": "Sari kata dimuatkan berdasarkan bendera lalai dan paksa dalam metadata yang disematkan. Keutamaan bahasa diambil kira apabila terdapat beberapa pilihan.",
+    "LabelThrottleDelaySecondsHelp": "Masa dalam saat selepas mana transkoder akan dihadkan. Mesti cukup besar untuk klien mengekalkan penimbal yang sihat. Hanya berfungsi jika penghadan diaktifkan.",
+    "LabelSegmentKeepSeconds": "Masa untuk mengekalkan segmen"
 }

From 0587cda60823e8c7a65083978816ff9e6fba145e Mon Sep 17 00:00:00 2001
From: Luis Aceituno <lmaceituno92@gmail.com>
Date: Sat, 7 Oct 2023 14:53:14 +0000
Subject: [PATCH 12/45] Translated using Weblate (Spanish (Mexico))
 Translation: Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/es_MX/

---
 src/strings/es-mx.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/strings/es-mx.json b/src/strings/es-mx.json
index 3fb0abb6a..7431d0fdf 100644
--- a/src/strings/es-mx.json
+++ b/src/strings/es-mx.json
@@ -1264,7 +1264,7 @@
     "AskAdminToCreateLibrary": "Pide a un administrador crear una biblioteca.",
     "Artist": "Artista",
     "AllowFfmpegThrottlingHelp": "Cuando una transcodificación o remuxeado se adelanta lo suficiente de la posición de reproducción actual, se pausa el proceso para que consuma menos recursos. Esto es más útil cuando se mira sin buscar con frecuencia. Apaga esto si experimentas problemas de reproducción.",
-    "AllowFfmpegThrottling": "Regular transcodificaciones",
+    "AllowFfmpegThrottling": "Limitar transcodificaciones",
     "AlbumArtist": "Artista del álbum",
     "Album": "Album",
     "Yadif": "YADIF",
@@ -1756,10 +1756,10 @@
     "AllowSegmentDeletion": "Borrar segmentos",
     "HeaderEpisodesStatus": "Estatus de los Episodios",
     "AllowSegmentDeletionHelp": "Borrar los viejos segmentos después de que hayan sido enviados al cliente. Esto previene que se tenga almacenado la totalidad de la transcodificación en el disco. Esto funciona unicamente cuando se tenga habilitado el throttling. Apagar esta opción cuando se tengan problemas de reproducción.",
-    "LabelThrottleDelaySeconds": "Acelerar después",
+    "LabelThrottleDelaySeconds": "Limitar después de",
     "LabelThrottleDelaySecondsHelp": "Tiempo en segundos después de que la transcodificación entre en aceleración. Deben ser los suficientes para que el buffer del cliente siga operando. Unicamente funciona si la aceleración está habilitada.",
     "LabelSegmentKeepSeconds": "Tiempo para guardar segmentos",
-    "LabelSegmentKeepSecondsHelp": "Tiempo en segundos en los que los segmentos deben permanecer antes de que sean sobrescritos. Estos deben de ser mayores a los indicados en \"Acelerar despues de\". Esto funciona unicamente si esta habilitada la opción de eliminar el segmento.",
+    "LabelSegmentKeepSecondsHelp": "Tiempo en segundos en los que los segmentos deben permanecer antes de que sean sobrescritos. Estos deben de ser mayores a los indicados en \"Limitar después de\". Esto funciona unicamente si esta habilitada la opción de eliminar el segmento.",
     "AllowAv1Encoding": "Permitir encodificación en formato AV1",
     "GoHome": "Ir a Inicio",
     "UnknownError": "Un error desconocido ocurrió.",

From be2db1351ec6e4f89f2dba3abf3f434eda333992 Mon Sep 17 00:00:00 2001
From: Luis Aceituno <lmaceituno92@gmail.com>
Date: Sat, 7 Oct 2023 14:24:22 +0000
Subject: [PATCH 13/45] Translated using Weblate (Spanish) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/es/

---
 src/strings/es.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/strings/es.json b/src/strings/es.json
index ab3ac87d9..9c28914c1 100644
--- a/src/strings/es.json
+++ b/src/strings/es.json
@@ -1246,7 +1246,7 @@
     "LabelDroppedFrames": "Frames perdidos",
     "LabelCorruptedFrames": "Frames corruptos",
     "AskAdminToCreateLibrary": "Pídele a un administrador que cree una biblioteca.",
-    "AllowFfmpegThrottling": "Acelerar las conversiones",
+    "AllowFfmpegThrottling": "Limitar transcodificaciones",
     "ClientSettings": "Ajustes de cliente",
     "PreferEmbeddedEpisodeInfosOverFileNames": "Priorizar la información embebida sobre los nombres de archivos",
     "PreferEmbeddedEpisodeInfosOverFileNamesHelp": "Usar la información de episodio de los metadatos embebidos si está disponible.",

From c3c6ebef9591e767f8d928aa0af3e17f4818fa59 Mon Sep 17 00:00:00 2001
From: Luis Aceituno <lmaceituno92@gmail.com>
Date: Sat, 7 Oct 2023 15:05:37 +0000
Subject: [PATCH 14/45] Translated using Weblate (Spanish (Latin America))
 Translation: Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/es_419/

---
 src/strings/es_419.json | 61 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/strings/es_419.json b/src/strings/es_419.json
index 0a208c94e..682ad9b6d 100644
--- a/src/strings/es_419.json
+++ b/src/strings/es_419.json
@@ -1307,7 +1307,7 @@
     "AllowRemoteAccessHelp": "Si no se marca, se bloquearán todas las conexiones remotas.",
     "AllowRemoteAccess": "Permitir conexiones remotas a este servidor",
     "AllowFfmpegThrottlingHelp": "Cuando una transcodificación o remuxeado se adelanta lo suficiente de la posición de reproducción actual, se pausa el proceso para que consuma menos recursos. Esto es más útil cuando se mira sin buscar con frecuencia. Apaga esto si experimentas problemas de reproducción.",
-    "AllowFfmpegThrottling": "Regular transcodificaciones",
+    "AllowFfmpegThrottling": "Limitar transcodificaciones",
     "AllowOnTheFlySubtitleExtractionHelp": "Los subtítulos incrustados pueden extraerse de los videos y entregarse a los clientes en texto plano para ayudar a evitar la transcodificación de video. En algunos sistemas, esto puede tardar mucho tiempo y provocar que la reproducción de video se detenga durante el proceso de extracción. Deshabilite esta opción para que los subtítulos incrustados se graben con transcodificación de video cuando no estén soportados de forma nativa por el dispositivo cliente.",
     "AllowOnTheFlySubtitleExtraction": "Permitir la extracción de subtítulos sobre la marcha",
     "AllowMediaConversionHelp": "Permitir o denegar acceso a la función de convertir medios.",
@@ -1578,5 +1578,62 @@
     "LabelMaxDaysForNextUp": "Días máximos en «A continuación»",
     "LabelEnableAudioVbrHelp": "La tasa de bits variable ofrece mejor calidad a la tasa media de bits promedio, pero en algunos raros casos puede causar almacenamiento en búfer y problemas de compatibilidad.",
     "LabelEnableAudioVbr": "Habilitar codificación VBR de audio",
-    "HeaderPerformance": "Rendimiento"
+    "HeaderPerformance": "Rendimiento",
+    "HeaderEpisodesStatus": "Status de los Episodios",
+    "LabelBackdropScreensaverInterval": "Intervalo del Protector de Pantalla de Fondo",
+    "LabelBackdropScreensaverIntervalHelp": "Intervalo en segundos entre los diferentes fondos cuando se usa el protector de pantalla de fondo.",
+    "LabelEnableLUFSScanHelp": "Permite a los clientes normalizar la reproducción de audio para tener el mismo volumen en todas las pistas. Esto hará que los escaneos de biblioteca tomen más tiempo y utilicen más recursos.",
+    "LabelSyncPlaySettingsSpeedToSyncHelp": "Método de corrección de sincronización que consiste en acelerar la reproducción. La corrección de sincronización debe estar activada.",
+    "LabelSyncPlaySettingsSkipToSyncHelp": "Método de corrección de sincronización que consiste en saltar a la posición de reproducción estimada. La Corrección de Sincronización debe estar activada.",
+    "ListView": "Vista en Lista",
+    "MessageNoItemsAvailable": "No hay elementos disponibles actualmente.",
+    "Bold": "Negrita",
+    "Larger": "Más grande",
+    "LabelSyncPlaySettingsMinDelaySkipToSyncHelp": "Retraso mínimo (en milisegundos) después del cual SkipToSync intentará corregir la posición de reproducción.",
+    "Localization": "Localización",
+    "GoHome": "Ir a Inicio",
+    "LabelSyncPlaySettingsSpeedToSync": "Activar SpeedToSync",
+    "LabelDeveloper": "Desarrollador",
+    "LabelLevel": "Nivel",
+    "LabelDate": "Fecha",
+    "EnableCardLayout": "Mostrar CardBox visual",
+    "LabelMediaDetails": "Detalles de multimedia",
+    "LabelSyncPlaySettingsSkipToSync": "Activar SkipToSync",
+    "LabelSystem": "Sistema",
+    "LogLevel.Debug": "Depurar",
+    "LogLevel.Trace": "Rastreo",
+    "LogLevel.Warning": "Advertencia",
+    "LogLevel.Error": "Error",
+    "LogLevel.Critical": "Crítico",
+    "GridView": "Vista en Cuadrícula",
+    "GetThePlugin": "Obtener el Plugin",
+    "LabelSyncPlayNoGroups": "No hay grupos disponibles",
+    "LabelTextWeight": "Grosor del texto",
+    "LogLevel.None": "Ningún",
+    "LabelSyncPlaySettingsSpeedToSyncDuration": "Duración de SpeedToSync",
+    "LabelSyncPlaySettingsMinDelaySkipToSync": "Retraso mínimo de SkipToSync",
+    "EnableAudioNormalizationHelp": "La normalización de audio añadirá una ganancia constante para mantener la media en el nivel deseado (-18dB).",
+    "LabelEnableLUFSScan": "Activar escaneo LUFS",
+    "MenuOpen": "Abrir Menú",
+    "MenuClose": "Cerrar Menú",
+    "BackdropScreensaver": "Protector de Pantalla de Fondo",
+    "LabelSyncPlaySettingsMaxDelaySpeedToSyncHelp": "Retraso máximo de reproducción (en milisegundos) después del cual SkipToSync se usará en lugar de SpeedToSync.",
+    "LogoScreensaver": "Protector de Pantalla de Logo",
+    "MessageNoFavoritesAvailable": "No hay favoritos disponibles actualmente.",
+    "LabelSyncPlaySettingsSpeedToSyncDurationHelp": "Cantidad de milisegundos que SpeedToSync utilizará para corregir la posición de reproducción.",
+    "HeaderConfirmRepositoryInstallation": "Confirma la instalación del repositorio de plugins",
+    "EnableAudioNormalization": "Normalización de audio",
+    "LogLevel.Information": "Información",
+    "AllowCollectionManagement": "Permitir a este usuario gestionar colecciones",
+    "Lyricist": "Letrista",
+    "AllowSegmentDeletion": "Borrar segmentos",
+    "AllowSegmentDeletionHelp": "Borrar segmentos viejos que ya hayan sido enviados al cliente. Esto evita tener que guardar la totalidad del archivo transcodificado en el disco. Funciona solamente si la opción \"regular transcodificaciones\" también está activada. Si se experimentan problemas en la reproducción, desactivar esta opción.",
+    "LabelThrottleDelaySeconds": "Limitar después de",
+    "LabelThrottleDelaySecondsHelp": "Duración en segundos después de la cual la transcodificación será limitada. Debe ser suficiente para permitirle al cliente mantener un buffer adecuado. Solo funciona si la limitación de la transcodificación está activada.",
+    "LabelSegmentKeepSeconds": "Tiempo de retención de segmentos",
+    "LabelSegmentKeepSecondsHelp": "Duración en segundos que se retendrán los segmentos antes de ser sobreescritos. Debe ser mayor que \"Limitar después de\". Solo funciona si la opción \"Borrar segmentos\" está activada.",
+    "LabelParallelImageEncodingLimit": "Límite de codificaciones paralelas de imágenes",
+    "LabelParallelImageEncodingLimitHelp": "Cantidad máxima de codificaciones de imágenes que pueden ejecutarse en paralelo. Al establecer 0 se elegirá un límite basado en las especificaciones de su sistema.",
+    "MediaInfoTitle": "Título",
+    "HeaderGuestCast": "Estrellas Invitadas"
 }

From e5ad3c899e99ff34a3f06714e8399e90df9c8c1a Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Sun, 8 Oct 2023 23:43:31 -0400
Subject: [PATCH 15/45] Fix admin check in dashboard routes

---
 src/apps/dashboard/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/apps/dashboard/App.tsx b/src/apps/dashboard/App.tsx
index c5ab67929..640a60d1f 100644
--- a/src/apps/dashboard/App.tsx
+++ b/src/apps/dashboard/App.tsx
@@ -53,11 +53,11 @@ const DashboardApp = () => (
                     <ServerContentPage view='/web/configurationpage' />
                 } />
             </Route>
-
-            {/* Suppress warnings for unhandled routes */}
-            <Route path='*' element={null} />
         </Route>
 
+        {/* Suppress warnings for unhandled routes */}
+        <Route path='*' element={null} />
+
         {/* Redirects for old paths */}
         {REDIRECTS.map(toRedirectRoute)}
     </Routes>

From 50c3e04aacaf71a8291de8bb59e0e5a7709636f4 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Mon, 9 Oct 2023 10:17:54 -0400
Subject: [PATCH 16/45] Update CF Pages project name

---
 .github/workflows/job-messages.yml | 2 +-
 .github/workflows/publish.yml      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/job-messages.yml b/.github/workflows/job-messages.yml
index 0e47838ba..7a58ecce7 100644
--- a/.github/workflows/job-messages.yml
+++ b/.github/workflows/job-messages.yml
@@ -42,7 +42,7 @@ jobs:
         id: compose
         env:
           COMMIT: ${{ inputs.commit }}
-          PREVIEW_URL: ${{ inputs.preview_url != '' && (inputs.branch != 'master' && inputs.preview_url || format('https://jf-web.pages.dev ({0})', inputs.preview_url)) || 'Not available' }}
+          PREVIEW_URL: ${{ inputs.preview_url != '' && (inputs.branch != 'master' && inputs.preview_url || format('https://jellyfin-web.pages.dev ({0})', inputs.preview_url)) || 'Not available' }}
           DEPLOY_STATUS: ${{ inputs.in_progress && '🔄 Deploying...' || (inputs.preview_url != '' && '✅ Deployed!' || '❌ Failure. Check workflow logs for details') }}
           DEPLOYMENT_TYPE: ${{ inputs.branch != 'master' && '🔀 Preview' || '⚙️ Production' }}
           BUILD_WORKFLOW_RUN: ${{ !inputs.in_progress && format('**[View build logs](https://github.com/{0}/actions/runs/{1})**', 'jellyfin/jellyfin-web', inputs.build_workflow_run_id) || '' }}
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 2b7bbea71..1fcf65711 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -30,7 +30,7 @@ jobs:
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: jf-web
+          projectName: jellyfin-web
           directory: dist
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
 

From 6c5393d2d397d6e42ef346e3d49e5aaf19ac176c Mon Sep 17 00:00:00 2001
From: Stas Ivanov <ivstig@yandex.ru>
Date: Mon, 9 Oct 2023 21:50:57 +0000
Subject: [PATCH 17/45] Translated using Weblate (Russian) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/ru/

---
 src/strings/ru.json | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/strings/ru.json b/src/strings/ru.json
index 4b1cd2c2a..d584214bd 100644
--- a/src/strings/ru.json
+++ b/src/strings/ru.json
@@ -1,6 +1,6 @@
 {
     "Absolute": "Абсолютный",
-    "AccessRestrictedTryAgainLater": "В настоящее время доступ запрещён. Повторите попытку позже.",
+    "AccessRestrictedTryAgainLater": "В настоящее время доступ ограничен. Повторите попытку позже.",
     "Actor": "Актёр",
     "Add": "Добавить",
     "AddToCollection": "Добавить в коллекцию",
@@ -1763,5 +1763,8 @@
     "LabelSegmentKeepSeconds": "Время сохранения сегментов",
     "LogLevel.Error": "Ошибка",
     "LabelBackdropScreensaverInterval": "Интервал между фонами у заставки",
-    "LabelBackdropScreensaverIntervalHelp": "Время в секундах между разными фонами, когда используется заставка."
+    "LabelBackdropScreensaverIntervalHelp": "Время в секундах между разными фонами, когда используется заставка.",
+    "BackdropScreensaver": "Заставка",
+    "GoHome": "Домой",
+    "GridView": "Сеткой"
 }

From 1320f96c719c973f4b42ac7c78c51a4915d815e3 Mon Sep 17 00:00:00 2001
From: SaddFox <filip.rutar@gmail.com>
Date: Mon, 9 Oct 2023 20:13:19 +0000
Subject: [PATCH 18/45] Translated using Weblate (Slovenian) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/sl/

---
 src/strings/sl-si.json | 74 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/strings/sl-si.json b/src/strings/sl-si.json
index d583cf90d..34164f0f6 100644
--- a/src/strings/sl-si.json
+++ b/src/strings/sl-si.json
@@ -648,7 +648,7 @@
     "MessageNoMovieSuggestionsAvailable": "Trenutno ni na voljo nobenih predlogov za filme. Začnite gledati in ocenjevati vaše filme, ter se nato vrnite sem in si oglejte predloge.",
     "LabelSelectFolderGroups": "Samodejno združi vsebine iz spodnjih map v poglede kot so 'Filmi', 'Glasba' in 'TV'",
     "TitlePlayback": "Predvajanje",
-    "MessagePasswordResetForUsers": "Gesla naslednjih uporabnikov so bila ponastavljena. Zdaj se lahko prijavijo z Enostavnimi PIN kodami, ki so bile uporabljene za ponastavitev.",
+    "MessagePasswordResetForUsers": "Gesla naslednjih uporabnikov so bila ponastavljena. Zdaj se lahko prijavijo s PIN kodami, ki so bile uporabljene za ponastavitev.",
     "OptionHideUserFromLoginHelp": "Koristno za zasebne ali skrite skrbniške račune. Uporabnik se bo moral prijaviti ročno z vpisom svojega uporabniškega imena in gesla.",
     "OnlyForcedSubtitlesHelp": "Naložijo se zgolj podnapisi, ki so označeni kot prisiljeni.",
     "OptionEnableExternalContentInSuggestionsHelp": "Dovoli, da so spletni napovedniki in TV kanali v živo vključeni med priporočenimi vsebinami.",
@@ -810,7 +810,7 @@
     "OptionAutomaticallyGroupSeries": "Samodejno združi serije, ki so razdeljene po več mapah",
     "OptionAllowUserToManageServer": "Dovoli temu uporabniku upravljanje strežnika",
     "MessageTheFollowingLocationWillBeRemovedFromLibrary": "Naslednja mesta predstavnosti bodo odstranjena iz vaše knjižnice",
-    "MessagePluginInstallDisclaimer": "Dodatki ustvarjeni s strani članov skupnosti so odličen način za izboljšanje vaše izkušnje z dodatnimi funkcijami in prednostmi. Preden namestite dodatke se zavedajte, da imajo lahko ti različne vplive na vaš strežnik, kot na primer počasnejše preiskovanje knjižnic, dodatna obdelava podatkov v ozadju in zmanjšana stabilnost sistema.",
+    "MessagePluginInstallDisclaimer": "POZOR: Nameščanje dodatkov tretjih oseb predstavlja tveganje. Vsebujejo lahko nestabilno ali zlonamerno kodo, ki se lahko kadarkoli spremeni. Namestite zgolj dodatke avtorjev ki jim zaupate. Zavedajte se morebitnih stranskih učinkov, kot na primer komunikacija z zunanjimi storitvami, podaljšan čas pregledovanja knjižnice in dodatno procesiranje v ozadju.",
     "MessagePleaseWait": "Prosimo, počakajte. To lahko traja nekaj minut.",
     "MessagePleaseEnsureInternetMetadata": "Prosimo poskrbite, da je prenašanje spletnih metapodatkov omogočeno.",
     "MessageNothingHere": "Tu ni ničesar.",
@@ -1308,7 +1308,7 @@
     "QuickConnectDescription": "Za vpis s Hitro povezavo izberi 'Hitra povezava' na napravi preko katere se vpisuješ in vnesi kodo.",
     "QuickConnectDeactivated": "Hitra povezava je bila onemogočena pred dokončanjem vpisa",
     "QuickConnectAuthorizeFail": "Neznana koda za Hitro povezavo",
-    "QuickConnectAuthorizeSuccess": "Avtorizirano",
+    "QuickConnectAuthorizeSuccess": "Uspešno ste overili svojo napravo!",
     "QuickConnectAuthorizeCode": "Vnesi kodo {0} za vpis",
     "QuickConnectActivationSuccessful": "Aktivirano",
     "QuickConnect": "Hitra povezava",
@@ -1402,7 +1402,7 @@
     "LabelTonemappingAlgorithm": "Izberite algoritem za preslikavo barv",
     "LabelOpenclDeviceHelp": "To je naprava OpenCL, ki bo uporabljena za preslikavo barv. Na levi strani pike je številka platforme, desno je številka naprave na tej platformi. Privzeta vrednost je 0.0. Zahtevana je datoteka FFmpeg, ki vsebuje metodo strojnega pospeševanja OpenCL.",
     "LabelColorPrimaries": "Barvni prostor",
-    "AllowTonemappingHelp": "Preslikava barv lahko preslika dinamični razpon videa HDR v SDR, pri tem pa ohranja podrobnosti in barve, kar je zelo pomembno za predstavitev izvorne scene. Trenutno deluje zgolj z HDR10 in HLG videi. Zahteva ustrezne OpenCL ali CUDA knjižnice.",
+    "AllowTonemappingHelp": "Preslikava barv lahko preslika dinamični razpon videa iz HDR v SDR, pri tem pa ohranja podrobnosti in barve, kar je zelo pomembno za predstavitev izvorne scene. Trenutno deluje zgolj z HDR10 in HLG videi. Zahteva ustrezne OpenCL ali CUDA knjižnice.",
     "MediaInfoVideoRange": "Barvni razpon",
     "LabelVideoRange": "Barvni razpon",
     "LabelSonyAggregationFlags": "Sonyjeve agregacijske oznake",
@@ -1647,10 +1647,10 @@
     "LabelUserMaxActiveSessions": "Največje število hkratnih uporabniških sej",
     "LabelUDPPortRangeHelp": "Omeji Jellyfin na ta razpon vrat za UDP komunikacije. (Privzeto 1024 - 645535).<br/> Opomba: Nekatere funkcije zahtevajo fiksna vrata, ki so lahko izven tega razpona.",
     "LabelUDPPortRange": "Razpon komunikacij UDP",
-    "LabelVppTonemappingContrastHelp": "Uporabi povečanje kontrasta pri VPP preslikavi barv. Priporočena in privzeta vrednost je 0.",
+    "LabelVppTonemappingContrastHelp": "Uporabi povečanje kontrasta pri VPP preslikavi barv. Priporočeni in privzeti vrednosti sta 1.",
     "LabelVppTonemappingBrightness": "VPP preslikava barv povečanje svetlosti",
     "LabelVppTonemappingContrast": "VPP preslikava barv povečanje kontrasta",
-    "LabelVppTonemappingBrightnessHelp": "Uporabi povečanje svetlosti pri VPP preslikavi barv. Priporočena in privzeta vrednost je 0.",
+    "LabelVppTonemappingBrightnessHelp": "Uporabi povečanje svetlosti pri VPP preslikavi barv. Priporočeni in privzeti vrednosti sta 16 in 0.",
     "AllowVppTonemappingHelp": "Preslikava barv v celoti na podlagi gonilnikov Intel. Trenutno deluje zgolj na določeni strojni opremi z HDR10 videi. Ima prednost pred drugimi OpenCL implementacijami.",
     "TonemappingAlgorithmHelp": "Preslikavo barv lahko podrobno nastavite. Če teh možnosti ne poznate, pustite privzete vrednosti. Priporočena vrednost je 'BT.2390'.",
     "LabelTonemappingThresholdHelp": "Parametri preslikave barv so natančno nastavljeni za vsak prizor. Prag je uporabljen za zaznavanje ali se je prizor spremenil ali ne. Če je razlika med povprečno svetlostjo trenutne sličice in tekočim povprečjem večja od nastavljenega praga, se vrednosti za povprečno in najvišjo svetlost prizora znova izračunajo. Priporočena in privzeta vrednost je 0,8 in 0,2.",
@@ -1693,11 +1693,11 @@
     "PreferEmbeddedExtrasTitlesOverFileNames": "Raje uporabi vdelane naslove kot imena datotek",
     "SaveRecordingNFOHelp": "Shrani metapodatke v isto mapo.",
     "LabelDummyChapterDuration": "interval",
-    "LabelDummyChapterDurationHelp": "Interval ekstrakcije slike poglavja v sekundah.",
+    "LabelDummyChapterDurationHelp": "Interval med navideznimi poglavji. Nastavite na 0 za onemogočanje ustvarjanja navideznih poglavij. Sprememba ne bo imela vpliva na obstoječa navidezna poglavja.",
     "LabelDummyChapterCount": "Limit",
     "LabelDummyChapterCountHelp": "Največje število slik poglavij, ki bodo ekstrahirane za vsako medijsko datoteko.",
     "LabelChapterImageResolution": "Resolucija",
-    "LabelChapterImageResolutionHelp": "Ločljivost slik poglavij.",
+    "LabelChapterImageResolutionHelp": "Ločljivost slik poglavij. Spreminjanje ne bo vplivalo na obstoječa lažna poglavja.",
     "ResolutionMatchSource": "ujemanje z virom",
     "HeaderRecordingMetadataSaving": "Snemanje metapodatkov",
     "AllowCollectionManagement": "Dovoli uporabniku upravljanje zbirk",
@@ -1714,5 +1714,61 @@
     "LabelSegmentKeepSeconds": "Čas ohranitve segmentov",
     "AllowSegmentDeletionHelp": "Izbriši segmente, ki so če bili poslani odjemalcu. S tem se prepreči, da bi na disku bila shranjena celotna prekodirana datoteka. To deluje le, če je omogočeno zaviranje prekodiranja. Če se pojavijo težave pri predvajanju, onemogočite to možnost.",
     "LabelThrottleDelaySecondsHelp": "Čas v sekundah, po katerem se bo prekodirnik upočasnil. Mora biti dovolj, da odjemalec ohranja ustrezen medpomnilnik. Deluje le, če je zaviranje prekodiranja omogočeno.",
-    "LabelSegmentKeepSecondsHelp": "Čas v skundah, ko naj se segmenti ohranijo, preden se jih prepiše. Čas mora biti večji od \"Zaviraj po\". Deluje le, če je brisanje segmentov omogočeno."
+    "LabelSegmentKeepSecondsHelp": "Čas v skundah, ko naj se segmenti ohranijo, preden se jih prepiše. Čas mora biti večji od \"Zaviraj po\". Deluje le, če je brisanje segmentov omogočeno.",
+    "MessageRepositoryInstallDisclaimer": "POZOR: Nameščanje skladišča dodatkov tretjih oseb predstavlja tveganje. Lahko vsebuje nestabilno ali zlonamerno kodo, ki se lahko kadarkoli spremeni. Namestite zgolj skladišča avtorjev ki jim zaupate.",
+    "Studio": "Studio",
+    "TonemappingModeHelp": "Izberi način preslikave barv. Če opazite razbarvanje svetlih delov slike, poskusite uporabiti način RGB.",
+    "LabelIsHearingImpaired": "Za naglušne (SDH)",
+    "AllowAv1Encoding": "Dovoli kodiranje v AV1 format",
+    "BackdropScreensaver": "Ozadje ohranjevalnika zaslona",
+    "LogoScreensaver": "Ohranjevalnik zaslona z logotipom",
+    "Short": "Kratki film",
+    "PasswordRequiredForAdmin": "Administratorski računi zahtevajo geslo.",
+    "SaveRecordingImages": "Shrani posnetke slik EPG",
+    "SubtitleBlack": "Črna",
+    "SubtitleRed": "Rdeča",
+    "LabelSyncPlayNoGroups": "Nobena skupina ni na voljo",
+    "NotificationsMovedMessage": "Funkcionalnost obvestil se je premaknila v dodatek Webhook.",
+    "SecondarySubtitles": "Sekundarni podnapisi",
+    "LabelDeveloper": "Razvijalec",
+    "LabelEnableAudioVbrHelp": "Spremenljiva bitna hitrost omogoča boljše razmerje med kvaliteto zvoka in povprečno bitno hitrostjo vendar lahko povzroči težave z medpomnjenjem in kompatibilnostjo.",
+    "LogLevel.None": "Brez",
+    "ForeignPartsOnly": "Samo vsiljeni/tuji deli",
+    "MachineTranslated": "Strojno prevedeno",
+    "LabelDate": "Datum",
+    "LabelEnableLUFSScan": "Omogoči skeniranje LUFS",
+    "LabelEnableLUFSScanHelp": "Odjemalci lahko normalizirajo glasnost zvoka za enako glasnost med skladbami. Pregledovanje knjižnice bo počasnejše in bo porabilo več sistemskih virov.",
+    "LabelLevel": "Nivo",
+    "LabelSystem": "Sistem",
+    "LogLevel.Trace": "",
+    "LogLevel.Warning": "Opozorilo",
+    "LogLevel.Information": "Informacije",
+    "Select": "Izberi",
+    "LogLevel.Error": "Napaka",
+    "LogLevel.Critical": "Kritično",
+    "GoHome": "Domov",
+    "LabelMediaDetails": "Podrobnosti predstavnosti",
+    "SubtitleWhite": "Bela",
+    "UnknownError": "Prišlo je do neznane napake.",
+    "Unknown": "Neznano",
+    "LabelBackdropScreensaverInterval": "Interval ozadja ohranjevalnika zaslona",
+    "LabelBackdropScreensaverIntervalHelp": "Čas v sekundah med različnimi ozadji za ohranjevalnik zaslona.",
+    "Notifications": "Obvestila",
+    "LabelEnableAudioVbr": "Omogoči VBR kodiranje zvoka",
+    "ListView": "Pogled seznama",
+    "PleaseConfirmRepositoryInstallation": "S klikom na OK potrjujete, da ste prebrali zgornje opozorilo in želite nadaljevati z namestitvijo skladišča dodatkov.",
+    "MenuOpen": "Odpri meni",
+    "MenuClose": "Zapri meni",
+    "UserMenu": "Uporabniški meni",
+    "LabelTonemappingMode": "Način preslikave barv",
+    "LabelParallelImageEncodingLimit": "Omejitev vzporednega kodiranja slik",
+    "SubtitleYellow": "Rumena",
+    "SubtitleBlue": "Modra",
+    "SubtitleCyan": "Cian",
+    "SubtitleGray": "Siva",
+    "SubtitleGreen": "Zelena",
+    "SubtitleLightGray": "Svetlo siva",
+    "SubtitleMagenta": "Magenta",
+    "LabelParallelImageEncodingLimitHelp": "Največje dovoljeno število vzporednih kodiranj slik. Nastavite na 0 za samodejno omejitev glede na zmogljivost vašega sistema.",
+    "AiTranslated": "AI prevedeno"
 }

From 10db65500e7847b5f30d0d80b76ab64977e7ef39 Mon Sep 17 00:00:00 2001
From: krvi <karivika@hotmail.com>
Date: Mon, 9 Oct 2023 20:45:09 +0000
Subject: [PATCH 19/45] Translated using Weblate (Faroese) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/fo/

---
 src/strings/fo.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/strings/fo.json b/src/strings/fo.json
index 6532f3e13..c98afcf76 100644
--- a/src/strings/fo.json
+++ b/src/strings/fo.json
@@ -212,5 +212,8 @@
     "ValueMusicVideoCount": "{0} tónleika sjónbond",
     "ValueOneAlbum": "1 album",
     "ValueOneSong": "1 sangur",
-    "ValueSongCount": "{0} sangir"
+    "ValueSongCount": "{0} sangir",
+    "ButtonForgotPassword": "Gloymt loyniorð",
+    "ButtonSignIn": "Innrita",
+    "ButtonSignOut": "Útrita"
 }

From e0f723a13a7e0e759450908dd5697ffaccf6425c Mon Sep 17 00:00:00 2001
From: hoanghuy309 <hoanghuy309@gmail.com>
Date: Tue, 10 Oct 2023 02:11:39 +0000
Subject: [PATCH 20/45] Translated using Weblate (Vietnamese) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/vi/

---
 src/strings/vi.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/strings/vi.json b/src/strings/vi.json
index a53d197c4..693eb272a 100644
--- a/src/strings/vi.json
+++ b/src/strings/vi.json
@@ -1,6 +1,6 @@
 {
     "Add": "Thêm",
-    "All": "Tất cả",
+    "All": "Tất cả",
     "MessageBrowsePluginCatalog": "Duyệt danh mục plugin của chúng tôi để xem các plugin có sẵn.",
     "ButtonAddUser": "Thêm Người Dùng",
     "ButtonCancel": "Hủy bỏ",

From a318b1d395408bb81faac79908ebbf9e52ee51f4 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Tue, 10 Oct 2023 00:39:31 -0400
Subject: [PATCH 21/45] Fix PR publish in GH actions

---
 .github/workflows/build.yml   | 24 ++++++++++++++++++++++++
 .github/workflows/publish.yml |  2 ++
 2 files changed, 26 insertions(+)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index e6d71a240..0a94de426 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -39,3 +39,27 @@ jobs:
           name: jellyfin-web__prod
           path: |
             dist
+
+  pr_context:
+    name: Save PR context as artifact
+    if: ${{ always() && !cancelled() && github.event_name == 'pull_request' }}
+    runs-on: ubuntu-latest
+    needs:
+      - run-build-prod
+
+    steps:
+      - name: Save PR context
+        env:
+          PR_NUMBER: ${{ github.event.number }}
+          PR_SHA: ${{ github.sha }}
+        run: |
+          echo $PR_NUMBER > PR_number
+          echo $PR_SHA > PR_sha
+
+      - name: Upload PR number as artifact
+        uses: actions/upload-artifact@v3.1.3
+        with:
+          name: PR_context
+          path: |
+            PR_number
+            PR_sha
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 1fcf65711..96eaef368 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -1,3 +1,5 @@
+name: Publish
+
 on:
   workflow_run:
     workflows:

From bab1fd7bb9e126c1b179fad9f49f9b161715fb40 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Wed, 4 Oct 2023 19:33:09 +0300
Subject: [PATCH 22/45] Fix FilterMenu not saving simple filters

Regression 6341a71fec882726bdffa4ed3460a6cbcf252d6e
---
 src/components/filtermenu/filtermenu.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index d7e9c8765..324dca231 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -103,7 +103,7 @@ function onInputCommand(e) {
     }
 }
 function saveValues(context, settings, settingsKey, setfilters) {
-    let elems = context.querySelectorAll('.simpleFilter');
+    let elems;
 
     // Video type
     const videoTypes = [];
@@ -157,6 +157,8 @@ function saveValues(context, settings, settingsKey, setfilters) {
             GenreIds: genres.join(',')
         }));
     } else {
+        elems = context.querySelectorAll('.simpleFilter');
+
         for (let i = 0, length = elems.length; i < length; i++) {
             if (elems[i].tagName === 'INPUT') {
                 setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);

From b81342d23b11f28871a46a2752d53f8dde02ac77 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Wed, 4 Oct 2023 00:09:31 +0300
Subject: [PATCH 23/45] refactor: Move queries into loops

---
 src/components/filtermenu/filtermenu.js | 36 +++++++++----------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index 324dca231..aa6bd5abe 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -103,35 +103,27 @@ function onInputCommand(e) {
     }
 }
 function saveValues(context, settings, settingsKey, setfilters) {
-    let elems;
-
     // Video type
     const videoTypes = [];
-    elems = context.querySelectorAll('.chkVideoTypeFilter');
-
-    for (let i = 0, length = elems.length; i < length; i++) {
-        if (elems[i].checked) {
-            videoTypes.push(elems[i].getAttribute('data-filter'));
+    for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
+        if (elem.checked) {
+            videoTypes.push(elem.getAttribute('data-filter'));
         }
     }
 
     // Series status
     const seriesStatuses = [];
-    elems = context.querySelectorAll('.chkSeriesStatus');
-
-    for (let i = 0, length = elems.length; i < length; i++) {
-        if (elems[i].checked) {
-            seriesStatuses.push(elems[i].getAttribute('data-filter'));
+    for (const elem of context.querySelectorAll('.chkSeriesStatus')) {
+        if (elem.checked) {
+            seriesStatuses.push(elem.getAttribute('data-filter'));
         }
     }
 
     // Genres
     const genres = [];
-    elems = context.querySelectorAll('.chkGenreFilter');
-
-    for (let i = 0, length = elems.length; i < length; i++) {
-        if (elems[i].checked) {
-            genres.push(elems[i].getAttribute('data-filter'));
+    for (const elem of context.querySelectorAll('.chkGenreFilter')) {
+        if (elem.checked) {
+            genres.push(elem.getAttribute('data-filter'));
         }
     }
 
@@ -157,13 +149,11 @@ function saveValues(context, settings, settingsKey, setfilters) {
             GenreIds: genres.join(',')
         }));
     } else {
-        elems = context.querySelectorAll('.simpleFilter');
-
-        for (let i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].tagName === 'INPUT') {
-                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
+        for (const elem of context.querySelectorAll('.simpleFilter')) {
+            if (elem.tagName === 'INPUT') {
+                setBasicFilter(context, settingsKey + '-filter-' + elem.getAttribute('data-settingname'), elem);
             } else {
-                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
+                setBasicFilter(context, settingsKey + '-filter-' + elem.getAttribute('data-settingname'), elem.querySelector('input'));
             }
         }
 

From fc37f82e525b85fcbee922fef970388fcaf4dc1a Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Tue, 10 Oct 2023 09:40:55 +0300
Subject: [PATCH 24/45] refactor: Use forEach for portability

---
 src/components/filtermenu/filtermenu.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index aa6bd5abe..5c78a6f4a 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -105,27 +105,27 @@ function onInputCommand(e) {
 function saveValues(context, settings, settingsKey, setfilters) {
     // Video type
     const videoTypes = [];
-    for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
+    context.querySelectorAll('.chkVideoTypeFilter').forEach(elem => {
         if (elem.checked) {
             videoTypes.push(elem.getAttribute('data-filter'));
         }
-    }
+    });
 
     // Series status
     const seriesStatuses = [];
-    for (const elem of context.querySelectorAll('.chkSeriesStatus')) {
+    context.querySelectorAll('.chkSeriesStatus').forEach(elem => {
         if (elem.checked) {
             seriesStatuses.push(elem.getAttribute('data-filter'));
         }
-    }
+    });
 
     // Genres
     const genres = [];
-    for (const elem of context.querySelectorAll('.chkGenreFilter')) {
+    context.querySelectorAll('.chkGenreFilter').forEach(elem => {
         if (elem.checked) {
             genres.push(elem.getAttribute('data-filter'));
         }
-    }
+    });
 
     if (setfilters) {
         setfilters((prevState) => ({
@@ -149,13 +149,13 @@ function saveValues(context, settings, settingsKey, setfilters) {
             GenreIds: genres.join(',')
         }));
     } else {
-        for (const elem of context.querySelectorAll('.simpleFilter')) {
+        context.querySelectorAll('.simpleFilter').forEach(elem => {
             if (elem.tagName === 'INPUT') {
                 setBasicFilter(context, settingsKey + '-filter-' + elem.getAttribute('data-settingname'), elem);
             } else {
                 setBasicFilter(context, settingsKey + '-filter-' + elem.getAttribute('data-settingname'), elem.querySelector('input'));
             }
-        }
+        });
 
         userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
     }

From 54d9d90e849ae458dc9af88ccdc92b67fb98bd11 Mon Sep 17 00:00:00 2001
From: RNGIllSkillz <atrashrc@gmail.com>
Date: Tue, 10 Oct 2023 14:31:55 +0000
Subject: [PATCH 25/45] Translated using Weblate (Russian) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/ru/

---
 src/strings/ru.json | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/strings/ru.json b/src/strings/ru.json
index d584214bd..070ad5b79 100644
--- a/src/strings/ru.json
+++ b/src/strings/ru.json
@@ -1401,7 +1401,7 @@
     "QuickConnectDescription": "Чтобы войти в систему с помощью Быстрого подключения, нажмите кнопку «Быстрое подключение» на устройстве, с которого вы выполняете вход, и введите указанный ниже код.",
     "QuickConnectDeactivated": "Быстрое подключение было деактивировано до утверждения запроса на вход",
     "QuickConnectAuthorizeFail": "Неопознанный код Быстрого подключения",
-    "QuickConnectAuthorizeSuccess": "Запрос авторизован",
+    "QuickConnectAuthorizeSuccess": "Вы успешно авторизовали ваше устройство!",
     "QuickConnectAuthorizeCode": "Введите код {0} для входа",
     "QuickConnectActivationSuccessful": "Активировано успешно",
     "QuickConnect": "Быстрое подключение",
@@ -1424,7 +1424,7 @@
     "LabelTonemappingPeakHelp": "Этим значением перекрывается сигнальный/номинальный/эталонный пик. Полезно, когда встроенная информация о пиках в метаданных дисплея ненадёжна или при тонмаппинге из узкого диапазона в более широкий. Значения рекомендуемое и по умолчанию - 100 и 0.",
     "LabelTonemappingThresholdHelp": "Параметры алгоритма тонмаппинга подстраиваются для каждой сцены. А порог используется, чтобы определить, изменилась ли сцена или нет. Если дистанция между средней яркостью текущего кадра и текущим скользящим средним превышает пороговое значение, мы пересчитаем среднюю и пиковую яркость сцены. Значения рекомендуемое и по умолчанию - 0.8 и 0.2.",
     "TonemappingAlgorithmHelp": "Тонмаппинг можно подстроить. Если вы не уверены с этими параметрами, оставьте значения по умолчанию. Рекомендуемое значение - \"BT.2390\".",
-    "AllowTonemappingHelp": "Тонмаппинг может преобразовать динамический диапазон видео из HDR в SDR, сохраняя детали изображения и цвета, которые являются очень важной информацией для представления исходной сцены. В настоящее время работает только с 10-бит HDR10, HLGи DoVi видео. Для этого требуется соответствующая среда выполнения OpenCL или CUDA.",
+    "AllowTonemappingHelp": "Тонмаппинг может преобразовать динамический диапазон видео из HDR в SDR, сохраняя детали изображения и цвета, которые являются очень важной информацией для представления исходного видео. В настоящее время работает только с 10-бит HDR10, HLG и DoVi. Для этого требуется соответствующая среда выполнения OpenCL или CUDA.",
     "LabelOpenclDeviceHelp": "Это устройство OpenCL, которое используется для тонмаппинга. Слева от точки - номер платформы, а справа - это номер устройства на платформе. Значение по умолчанию - 0.0. Требуется файл приложения FFmpeg, содержащий метод аппаратного ускорения OpenCL.",
     "OptionAllowContentDownloadHelp": "Пользователи могут загружать медиафайлы и хранить их на своих устройствах. Это не то же самое, как функция синхронизации. Для правильной работы книжных медиатек это необходимо.",
     "HeaderDeleteDevices": "Удалить все устройства",
@@ -1742,7 +1742,7 @@
     "LogLevel.Critical": "Критично",
     "LogLevel.None": "Ничего",
     "HeaderEpisodesStatus": "Статус эпизодов",
-    "LabelEnableLUFSScanHelp": "Включите сканирование LUFS для музыки (это займет больше времени и ресурсов).",
+    "LabelEnableLUFSScanHelp": "Клиенты могут нормализировать воспроизведения звука, чтобы обеспечить одинаковую громкость в разных треках. Сканированния библеотек займет больше времени и ресурсов.",
     "LabelLevel": "Уровень",
     "LogLevel.Debug": "Отладка",
     "MessageRepositoryInstallDisclaimer": "ПРЕДУПРЕЖДЕНИЕ: Установка стороннего репозитория плагинов несет определенные риски. Он может содержать нестабильный или вредоносный код и может изменяться в любое время. Устанавливайте репозитории только от авторов, которым вы доверяете.",
@@ -1764,7 +1764,17 @@
     "LogLevel.Error": "Ошибка",
     "LabelBackdropScreensaverInterval": "Интервал между фонами у заставки",
     "LabelBackdropScreensaverIntervalHelp": "Время в секундах между разными фонами, когда используется заставка.",
-    "BackdropScreensaver": "Заставка",
+    "BackdropScreensaver": "Фоновая заставка",
     "GoHome": "Домой",
-    "GridView": "Сеткой"
+    "GridView": "Отображение сеткой",
+    "LabelIsHearingImpaired": "Для людей со слабым слухом (SDH)",
+    "AllowAv1Encoding": "Разрешить кодирование AV1 формата",
+    "LogoScreensaver": "Логотип заставки",
+    "HeaderGuestCast": "Приглашенные звезды",
+    "UnknownError": "Возникла не известная ошибка.",
+    "ListView": "Отображение списком",
+    "AiTranslated": "Переведено при помощи ИИ",
+    "MachineTranslated": "Машинный перевод",
+    "HearingImpairedShort": "HI/SDH",
+    "ForeignPartsOnly": "Только для принудительных и иностранных частей"
 }

From fbcd543a2629461004719d8c1811d749f299deb2 Mon Sep 17 00:00:00 2001
From: scampower3 <81431263+scampower3@users.noreply.github.com>
Date: Wed, 11 Oct 2023 01:49:41 +0800
Subject: [PATCH 26/45] Fix Same year appears in <year> - <year> format under
 card.

---
 src/components/cardbuilder/cardBuilder.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index ef44a1c33..6d33700ca 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -669,7 +669,7 @@ function getCardFooterText(item, apiClient, options, footerClass, progressHtml,
                     lines.push(globalize.translate('SeriesYearToPresent', productionYear || ''));
                 } else if (item.EndDate && item.ProductionYear) {
                     const endYear = datetime.toLocaleString(datetime.parseISO8601Date(item.EndDate).getFullYear(), { useGrouping: false });
-                    lines.push(productionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
+                    lines.push(productionYear + ((endYear === productionYear) ? '' : (' - ' + endYear)));
                 } else {
                     lines.push(productionYear || '');
                 }

From 21f2d7ccdf44057170f2760397864f88c96ae675 Mon Sep 17 00:00:00 2001
From: scampower3 <81431263+scampower3@users.noreply.github.com>
Date: Wed, 11 Oct 2023 01:50:43 +0800
Subject: [PATCH 27/45] Added myself to CONTRIBUTORS.md

---
 CONTRIBUTORS.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 920fd9288..41fb667ae 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -67,6 +67,7 @@
  - [sleepycatcoding](https://github.com/sleepycatcoding)
  - [TheMelmacian](https://github.com/TheMelmacian)
  - [tehciolo](https://github.com/tehciolo)
+ - [scampower3](https://github.com/scampower3)
 
 # Emby Contributors
 

From f173cf447d4d18df839be52e9c379ff985cca01a Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Tue, 10 Oct 2023 16:45:59 -0400
Subject: [PATCH 28/45] Add current branch to CF Pages publish job

---
 .github/workflows/publish.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 96eaef368..c0e690e73 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -33,6 +33,7 @@ jobs:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: jellyfin-web
+          branch: ${{ github.event.workflow_run.head_branch }}
           directory: dist
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
 

From 11c191d56b5744f54f9c7f9e607f8e90c9ff1265 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Tue, 10 Oct 2023 16:25:11 -0400
Subject: [PATCH 29/45] Fix libraries maybe not being displayed on tvs

---
 src/components/homesections/homesections.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
index 83b8ec551..708fcb04b 100644
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@@ -1,3 +1,4 @@
+import layoutManager from 'components/layoutManager';
 import globalize from 'scripts/globalize';
 import { DEFAULT_SECTIONS, HomeSectionType } from 'types/homeSectionType';
 import Dashboard from 'utils/dashboard';
@@ -33,6 +34,18 @@ function getAllSectionsToShow(userSettings, sectionCount) {
         sections.push(section);
     }
 
+    // Ensure libraries are visible in TV layout
+    if (
+        layoutManager.tv
+            && !sections.includes(HomeSectionType.SmallLibraryTiles)
+            && !sections.includes(HomeSectionType.LibraryButtons)
+    ) {
+        return [
+            HomeSectionType.SmallLibraryTiles,
+            ...sections
+        ];
+    }
+
     return sections;
 }
 
@@ -41,8 +54,10 @@ export function loadSections(elem, apiClient, user, userSettings) {
         let html = '';
 
         if (userViews.length) {
-            const sectionCount = 7;
-            for (let i = 0; i < sectionCount; i++) {
+            const userSectionCount = 7;
+            // TV layout can have an extra section to ensure libraries are visible
+            const totalSectionCount = layoutManager.tv ? userSectionCount + 1 : userSectionCount;
+            for (let i = 0; i < totalSectionCount; i++) {
                 html += '<div class="verticalSection section' + i + '"></div>';
             }
 
@@ -50,7 +65,7 @@ export function loadSections(elem, apiClient, user, userSettings) {
             elem.classList.add('homeSectionsContainer');
 
             const promises = [];
-            const sections = getAllSectionsToShow(userSettings, sectionCount);
+            const sections = getAllSectionsToShow(userSettings, userSectionCount);
             for (let i = 0; i < sections.length; i++) {
                 promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
             }

From c61df2eb9234fa829b2f5b263269bd138b9abfba Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 4 Oct 2023 23:14:14 +0300
Subject: [PATCH 30/45] Refactor: viewitemcontainer

---
 .../library/GenresItemsContainer.tsx          |   5 +-
 .../library/GenresSectionContainer.tsx        |   5 +-
 .../components/library}/ItemsContainer.tsx    |  14 +-
 .../components/library/ItemsView.tsx          | 272 ++++++++++++
 .../components/library/Pagination.tsx         |  34 +-
 .../library/RecommendationContainer.tsx       |   2 +-
 .../library/SuggestionsItemsContainer.tsx     |   3 +-
 .../library/SuggestionsSectionContainer.tsx   |   5 +-
 .../library/filter/FilterButton.tsx           |  13 +-
 src/apps/experimental/routes/home.tsx         |   2 +-
 .../routes/movies/CollectionsView.tsx         |  32 +-
 .../routes/movies/FavoritesView.tsx           |  28 +-
 .../experimental/routes/movies/MoviesView.tsx |  30 +-
 .../routes/movies/TrailersView.tsx            |  29 +-
 src/apps/experimental/routes/movies/index.tsx |   7 +-
 .../common/AlphaPickerContainer.tsx           |  59 ---
 src/components/common/Filter.tsx              |  65 ---
 src/components/common/NewCollection.tsx       |  42 --
 src/components/common/Pagination.tsx          |  97 -----
 src/components/common/SelectView.tsx          |  54 ---
 src/components/common/Shuffle.tsx             |  45 --
 src/components/common/Sort.tsx                |  58 ---
 src/components/common/ViewItemsContainer.tsx  | 411 ------------------
 src/hooks/useFetchItems.ts                    | 167 ++++++-
 src/types/cardOptions.ts                      |   3 +-
 src/types/interface.ts                        |  29 --
 src/types/library.ts                          |   2 +-
 src/utils/items.ts                            |   8 +-
 28 files changed, 520 insertions(+), 1001 deletions(-)
 rename src/{components/common => apps/experimental/components/library}/ItemsContainer.tsx (58%)
 create mode 100644 src/apps/experimental/components/library/ItemsView.tsx
 delete mode 100644 src/components/common/AlphaPickerContainer.tsx
 delete mode 100644 src/components/common/Filter.tsx
 delete mode 100644 src/components/common/NewCollection.tsx
 delete mode 100644 src/components/common/Pagination.tsx
 delete mode 100644 src/components/common/SelectView.tsx
 delete mode 100644 src/components/common/Shuffle.tsx
 delete mode 100644 src/components/common/Sort.tsx
 delete mode 100644 src/components/common/ViewItemsContainer.tsx
 delete mode 100644 src/types/interface.ts

diff --git a/src/apps/experimental/components/library/GenresItemsContainer.tsx b/src/apps/experimental/components/library/GenresItemsContainer.tsx
index 41fba412d..0348beb94 100644
--- a/src/apps/experimental/components/library/GenresItemsContainer.tsx
+++ b/src/apps/experimental/components/library/GenresItemsContainer.tsx
@@ -5,10 +5,11 @@ import globalize from 'scripts/globalize';
 import Loading from 'components/loading/LoadingComponent';
 import GenresSectionContainer from './GenresSectionContainer';
 import { CollectionType } from 'types/collectionType';
+import { ParentId } from 'types/library';
 
 interface GenresItemsContainerProps {
-    parentId?: string | null;
-    collectionType?: CollectionType;
+    parentId: ParentId;
+    collectionType: CollectionType;
     itemType: BaseItemKind;
 }
 
diff --git a/src/apps/experimental/components/library/GenresSectionContainer.tsx b/src/apps/experimental/components/library/GenresSectionContainer.tsx
index 74f57782b..ebfd20d33 100644
--- a/src/apps/experimental/components/library/GenresSectionContainer.tsx
+++ b/src/apps/experimental/components/library/GenresSectionContainer.tsx
@@ -12,10 +12,11 @@ import Loading from 'components/loading/LoadingComponent';
 import { appRouter } from 'components/router/appRouter';
 import SectionContainer from './SectionContainer';
 import { CollectionType } from 'types/collectionType';
+import { ParentId } from 'types/library';
 
 interface GenresSectionContainerProps {
-    parentId?: string | null;
-    collectionType?: CollectionType;
+    parentId: ParentId;
+    collectionType: CollectionType;
     itemType: BaseItemKind;
     genre: BaseItemDto;
 }
diff --git a/src/components/common/ItemsContainer.tsx b/src/apps/experimental/components/library/ItemsContainer.tsx
similarity index 58%
rename from src/components/common/ItemsContainer.tsx
rename to src/apps/experimental/components/library/ItemsContainer.tsx
index 6289c1d81..4c3b28c71 100644
--- a/src/components/common/ItemsContainer.tsx
+++ b/src/apps/experimental/components/library/ItemsContainer.tsx
@@ -1,16 +1,16 @@
 import React, { FC, useEffect, useRef } from 'react';
 
-import ItemsContainerElement from '../../elements/ItemsContainerElement';
-import imageLoader from '../images/imageLoader';
-import '../../elements/emby-itemscontainer/emby-itemscontainer';
-import { ViewQuerySettings } from '../../types/interface';
+import ItemsContainerElement from 'elements/ItemsContainerElement';
+import imageLoader from 'components/images/imageLoader';
+import 'elements/emby-itemscontainer/emby-itemscontainer';
+import { LibraryViewSettings, ViewMode } from 'types/library';
 
 interface ItemsContainerI {
-    viewQuerySettings: ViewQuerySettings;
+    libraryViewSettings: LibraryViewSettings;
     getItemsHtml: () => string
 }
 
-const ItemsContainer: FC<ItemsContainerI> = ({ viewQuerySettings, getItemsHtml }) => {
+const ItemsContainer: FC<ItemsContainerI> = ({ libraryViewSettings, getItemsHtml }) => {
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -19,7 +19,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ viewQuerySettings, getItemsHtml }
         imageLoader.lazyChildren(itemsContainer);
     }, [getItemsHtml]);
 
-    const cssClass = viewQuerySettings.imageType == 'list' ? 'vertical-list' : 'vertical-wrap';
+    const cssClass = libraryViewSettings.ViewMode === ViewMode.ListView ? 'vertical-list' : 'vertical-wrap';
 
     return (
         <div ref={element}>
diff --git a/src/apps/experimental/components/library/ItemsView.tsx b/src/apps/experimental/components/library/ItemsView.tsx
new file mode 100644
index 000000000..bdbb54fc7
--- /dev/null
+++ b/src/apps/experimental/components/library/ItemsView.tsx
@@ -0,0 +1,272 @@
+import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import { ImageType } from '@jellyfin/sdk/lib/generated-client';
+import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
+import React, { FC, useCallback } from 'react';
+import Box from '@mui/material/Box';
+import { useLocalStorage } from 'hooks/useLocalStorage';
+import { useGetItem, useGetItemsViewByType } from 'hooks/useFetchItems';
+import { getDefaultLibraryViewSettings, getSettingsKey } from 'utils/items';
+import Loading from 'components/loading/LoadingComponent';
+import listview from 'components/listview/listview';
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { playbackManager } from 'components/playback/playbackmanager';
+import globalize from 'scripts/globalize';
+import AlphabetPicker from './AlphabetPicker';
+import FilterButton from './filter/FilterButton';
+import ItemsContainer from './ItemsContainer';
+import NewCollectionButton from './NewCollectionButton';
+import Pagination from './Pagination';
+import PlayAllButton from './PlayAllButton';
+import QueueButton from './QueueButton';
+import ShuffleButton from './ShuffleButton';
+import SortButton from './SortButton';
+import GridListViewButton from './GridListViewButton';
+import { LibraryViewSettings, ParentId, ViewMode } from 'types/library';
+import { CollectionType } from 'types/collectionType';
+import { LibraryTab } from 'types/libraryTab';
+
+import { CardOptions } from 'types/cardOptions';
+
+interface ItemsViewProps {
+    viewType: LibraryTab;
+    parentId: ParentId;
+    itemType: BaseItemKind[];
+    collectionType?: CollectionType;
+    isBtnPlayAllEnabled?: boolean;
+    isBtnQueueEnabled?: boolean;
+    isBtnShuffleEnabled?: boolean;
+    isBtnSortEnabled?: boolean;
+    isBtnFilterEnabled?: boolean;
+    isBtnNewCollectionEnabled?: boolean;
+    isBtnGridListEnabled?: boolean;
+    isAlphabetPickerEnabled?: boolean;
+    noItemsMessage: string;
+}
+
+const ItemsView: FC<ItemsViewProps> = ({
+    viewType,
+    parentId,
+    collectionType,
+    isBtnPlayAllEnabled = false,
+    isBtnQueueEnabled = false,
+    isBtnShuffleEnabled = false,
+    isBtnSortEnabled = true,
+    isBtnFilterEnabled = true,
+    isBtnNewCollectionEnabled = false,
+    isBtnGridListEnabled = true,
+    isAlphabetPickerEnabled = true,
+    itemType,
+    noItemsMessage
+}) => {
+    const [libraryViewSettings, setLibraryViewSettings] =
+        useLocalStorage<LibraryViewSettings>(
+            getSettingsKey(viewType, parentId),
+            getDefaultLibraryViewSettings(viewType)
+        );
+
+    const {
+        isLoading,
+        data: itemsResult,
+        isPreviousData
+    } = useGetItemsViewByType(
+        viewType,
+        parentId,
+        itemType,
+        libraryViewSettings
+    );
+    const { data: item } = useGetItem(parentId);
+
+    const getCardOptions = useCallback(() => {
+        let shape;
+        let preferThumb;
+        let preferDisc;
+        let preferLogo;
+        let lines = libraryViewSettings.ShowTitle ? 2 : 0;
+
+        if (libraryViewSettings.ImageType === ImageType.Banner) {
+            shape = 'banner';
+        } else if (libraryViewSettings.ImageType === ImageType.Disc) {
+            shape = 'square';
+            preferDisc = true;
+        } else if (libraryViewSettings.ImageType === ImageType.Logo) {
+            shape = 'backdrop';
+            preferLogo = true;
+        } else if (libraryViewSettings.ImageType === ImageType.Thumb) {
+            shape = 'backdrop';
+            preferThumb = true;
+        } else {
+            shape = 'auto';
+        }
+
+        const cardOptions: CardOptions = {
+            shape: shape,
+            showTitle: libraryViewSettings.ShowTitle,
+            showYear: libraryViewSettings.ShowYear,
+            cardLayout: libraryViewSettings.CardLayout,
+            centerText: true,
+            context: collectionType,
+            coverImage: true,
+            preferThumb: preferThumb,
+            preferDisc: preferDisc,
+            preferLogo: preferLogo,
+            overlayPlayButton: false,
+            overlayMoreButton: true,
+            overlayText: !libraryViewSettings.ShowTitle
+        };
+
+        if (
+            viewType === LibraryTab.Songs
+            || viewType === LibraryTab.Albums
+            || viewType === LibraryTab.Episodes
+        ) {
+            cardOptions.showParentTitle = libraryViewSettings.ShowTitle;
+        } else if (viewType === LibraryTab.Artists) {
+            cardOptions.showYear = false;
+            lines = 1;
+        }
+
+        cardOptions.lines = lines;
+
+        return cardOptions;
+    }, [
+        libraryViewSettings.ShowTitle,
+        libraryViewSettings.ImageType,
+        libraryViewSettings.ShowYear,
+        libraryViewSettings.CardLayout,
+        collectionType,
+        viewType
+    ]);
+
+    const getItemsHtml = useCallback(() => {
+        let html = '';
+
+        if (libraryViewSettings.ViewMode === ViewMode.ListView) {
+            html = listview.getListViewHtml({
+                items: itemsResult?.Items ?? [],
+                context: collectionType
+            });
+        } else {
+            html = cardBuilder.getCardsHtml(
+                itemsResult?.Items ?? [],
+                getCardOptions()
+            );
+        }
+
+        if (!itemsResult?.Items?.length) {
+            html += '<div class="noItemsMessage centerMessage">';
+            html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
+            html += '<p>' + globalize.translate(noItemsMessage) + '</p>';
+            html += '</div>';
+        }
+
+        return html;
+    }, [
+        libraryViewSettings.ViewMode,
+        itemsResult?.Items,
+        collectionType,
+        getCardOptions,
+        noItemsMessage
+    ]);
+
+    const totalRecordCount = itemsResult?.TotalRecordCount ?? 0;
+    const items = itemsResult?.Items ?? [];
+    const hasFilters = Object.values(libraryViewSettings.Filters ?? {}).some(
+        (filter) => !!filter
+    );
+    const hasSortName = libraryViewSettings.SortBy.includes(
+        ItemSortBy.SortName
+    );
+
+    return (
+        <Box>
+            <Box className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
+                <Pagination
+                    totalRecordCount={totalRecordCount}
+                    libraryViewSettings={libraryViewSettings}
+                    isPreviousData={isPreviousData}
+                    setLibraryViewSettings={setLibraryViewSettings}
+                />
+
+                {isBtnPlayAllEnabled && (
+                    <PlayAllButton
+                        item={item}
+                        items={items}
+                        viewType={viewType}
+                        hasFilters={hasFilters}
+                        libraryViewSettings={libraryViewSettings}
+                    />
+                )}
+                {isBtnQueueEnabled
+                    && item
+                    && playbackManager.canQueue(item) && (
+                    <QueueButton
+                        item={item}
+                        items={items}
+                        hasFilters={hasFilters}
+                    />
+                )}
+                {isBtnShuffleEnabled && totalRecordCount > 1 && (
+                    <ShuffleButton
+                        item={item}
+                        items={items}
+                        viewType={viewType}
+                        hasFilters={hasFilters}
+                        libraryViewSettings={libraryViewSettings}
+                    />
+                )}
+                {isBtnSortEnabled && (
+                    <SortButton
+                        viewType={viewType}
+                        libraryViewSettings={libraryViewSettings}
+                        setLibraryViewSettings={setLibraryViewSettings}
+                    />
+                )}
+                {isBtnFilterEnabled && (
+                    <FilterButton
+                        parentId={parentId}
+                        itemType={itemType}
+                        viewType={viewType}
+                        hasFilters={hasFilters}
+                        libraryViewSettings={libraryViewSettings}
+                        setLibraryViewSettings={setLibraryViewSettings}
+                    />
+                )}
+                {isBtnNewCollectionEnabled && <NewCollectionButton />}
+                {isBtnGridListEnabled && (
+                    <GridListViewButton
+                        viewType={viewType}
+                        libraryViewSettings={libraryViewSettings}
+                        setLibraryViewSettings={setLibraryViewSettings}
+                    />
+                )}
+            </Box>
+
+            {isAlphabetPickerEnabled && hasSortName && (
+                <AlphabetPicker
+                    libraryViewSettings={libraryViewSettings}
+                    setLibraryViewSettings={setLibraryViewSettings}
+                />
+            )}
+
+            {isLoading ? (
+                <Loading />
+            ) : (
+                <ItemsContainer
+                    libraryViewSettings={libraryViewSettings}
+                    getItemsHtml={getItemsHtml}
+                />
+            )}
+
+            <Box className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
+                <Pagination
+                    totalRecordCount={totalRecordCount}
+                    libraryViewSettings={libraryViewSettings}
+                    isPreviousData={isPreviousData}
+                    setLibraryViewSettings={setLibraryViewSettings}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default ItemsView;
diff --git a/src/apps/experimental/components/library/Pagination.tsx b/src/apps/experimental/components/library/Pagination.tsx
index 3d1026254..1e6a2ab26 100644
--- a/src/apps/experimental/components/library/Pagination.tsx
+++ b/src/apps/experimental/components/library/Pagination.tsx
@@ -13,15 +13,17 @@ interface PaginationProps {
     libraryViewSettings: LibraryViewSettings;
     setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
     totalRecordCount: number;
+    isPreviousData: boolean
 }
 
 const Pagination: FC<PaginationProps> = ({
     libraryViewSettings,
     setLibraryViewSettings,
-    totalRecordCount
+    totalRecordCount,
+    isPreviousData
 }) => {
     const limit = userSettings.libraryPageSize(undefined);
-    const startIndex = libraryViewSettings.StartIndex || 0;
+    const startIndex = libraryViewSettings.StartIndex ?? 0;
     const recordsStart = totalRecordCount ? startIndex + 1 : 0;
     const recordsEnd = limit ?
         Math.min(startIndex + limit, totalRecordCount) :
@@ -29,23 +31,19 @@ const Pagination: FC<PaginationProps> = ({
     const showControls = limit > 0 && limit < totalRecordCount;
 
     const onNextPageClick = useCallback(() => {
-        if (limit > 0) {
-            const newIndex = startIndex + limit;
-            setLibraryViewSettings((prevState) => ({
-                ...prevState,
-                StartIndex: newIndex
-            }));
-        }
+        const newIndex = startIndex + limit;
+        setLibraryViewSettings((prevState) => ({
+            ...prevState,
+            StartIndex: newIndex
+        }));
     }, [limit, setLibraryViewSettings, startIndex]);
 
     const onPreviousPageClick = useCallback(() => {
-        if (limit > 0) {
-            const newIndex = Math.max(0, startIndex - limit);
-            setLibraryViewSettings((prevState) => ({
-                ...prevState,
-                StartIndex: newIndex
-            }));
-        }
+        const newIndex = Math.max(0, startIndex - limit);
+        setLibraryViewSettings((prevState) => ({
+            ...prevState,
+            StartIndex: newIndex
+        }));
     }, [limit, setLibraryViewSettings, startIndex]);
 
     return (
@@ -67,7 +65,7 @@ const Pagination: FC<PaginationProps> = ({
                         <IconButton
                             title={globalize.translate('Previous')}
                             className='paper-icon-button-light btnPreviousPage autoSize'
-                            disabled={startIndex == 0}
+                            disabled={startIndex == 0 || isPreviousData}
                             onClick={onPreviousPageClick}
                         >
                             <ArrowBackIcon />
@@ -76,7 +74,7 @@ const Pagination: FC<PaginationProps> = ({
                         <IconButton
                             title={globalize.translate('Next')}
                             className='paper-icon-button-light btnNextPage autoSize'
-                            disabled={startIndex + limit >= totalRecordCount }
+                            disabled={startIndex + limit >= totalRecordCount || isPreviousData }
                             onClick={onNextPageClick}
                         >
                             <ArrowForwardIcon />
diff --git a/src/apps/experimental/components/library/RecommendationContainer.tsx b/src/apps/experimental/components/library/RecommendationContainer.tsx
index 4ec8102f5..6c8ab5cc5 100644
--- a/src/apps/experimental/components/library/RecommendationContainer.tsx
+++ b/src/apps/experimental/components/library/RecommendationContainer.tsx
@@ -49,7 +49,7 @@ const RecommendationContainer: FC<RecommendationContainerProps> = ({
     return (
         <SectionContainer
             sectionTitle={escapeHTML(title)}
-            items={recommendation.Items || []}
+            items={recommendation.Items ?? []}
             cardOptions={{
                 shape: 'overflowPortrait',
                 showYear: true,
diff --git a/src/apps/experimental/components/library/SuggestionsItemsContainer.tsx b/src/apps/experimental/components/library/SuggestionsItemsContainer.tsx
index d985592a8..dcd5ff918 100644
--- a/src/apps/experimental/components/library/SuggestionsItemsContainer.tsx
+++ b/src/apps/experimental/components/library/SuggestionsItemsContainer.tsx
@@ -5,6 +5,7 @@ import React, { FC } from 'react';
 import * as userSettings from 'scripts/settings/userSettings';
 import SuggestionsSectionContainer from './SuggestionsSectionContainer';
 import { Sections, SectionsView, SectionsViewType } from 'types/suggestionsSections';
+import { ParentId } from 'types/library';
 
 const getSuggestionsSections = (): Sections[] => {
     return [
@@ -178,7 +179,7 @@ const getSuggestionsSections = (): Sections[] => {
 };
 
 interface SuggestionsItemsContainerProps {
-    parentId?: string | null;
+    parentId: ParentId;
     sectionsView: SectionsView[];
 }
 
diff --git a/src/apps/experimental/components/library/SuggestionsSectionContainer.tsx b/src/apps/experimental/components/library/SuggestionsSectionContainer.tsx
index 4c52d712e..7c09bf489 100644
--- a/src/apps/experimental/components/library/SuggestionsSectionContainer.tsx
+++ b/src/apps/experimental/components/library/SuggestionsSectionContainer.tsx
@@ -7,9 +7,10 @@ import { appRouter } from 'components/router/appRouter';
 import SectionContainer from './SectionContainer';
 
 import { Sections } from 'types/suggestionsSections';
+import { ParentId } from 'types/library';
 
 interface SuggestionsSectionContainerProps {
-    parentId?: string | null;
+    parentId: ParentId;
     section: Sections;
 }
 
@@ -37,7 +38,7 @@ const SuggestionsSectionContainer: FC<SuggestionsSectionContainerProps> = ({
     return (
         <SectionContainer
             sectionTitle={globalize.translate(section.name)}
-            items={items || []}
+            items={items ?? []}
             url={getRouteUrl()}
             cardOptions={{
                 ...section.cardOptions
diff --git a/src/apps/experimental/components/library/filter/FilterButton.tsx b/src/apps/experimental/components/library/filter/FilterButton.tsx
index fd0e54d54..22a9788f0 100644
--- a/src/apps/experimental/components/library/filter/FilterButton.tsx
+++ b/src/apps/experimental/components/library/filter/FilterButton.tsx
@@ -28,7 +28,7 @@ import FiltersTags from './FiltersTags';
 import FiltersVideoTypes from './FiltersVideoTypes';
 import FiltersYears from './FiltersYears';
 
-import { LibraryViewSettings } from 'types/library';
+import { LibraryViewSettings, ParentId } from 'types/library';
 import { LibraryTab } from 'types/libraryTab';
 
 const Accordion = styled((props: AccordionProps) => (
@@ -73,9 +73,10 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
 }));
 
 interface FilterButtonProps {
-    parentId: string | null | undefined;
-    itemType: BaseItemKind;
+    parentId: ParentId;
+    itemType: BaseItemKind[];
     viewType: LibraryTab;
+    hasFilters: boolean;
     libraryViewSettings: LibraryViewSettings;
     setLibraryViewSettings: React.Dispatch<
         React.SetStateAction<LibraryViewSettings>
@@ -86,6 +87,7 @@ const FilterButton: FC<FilterButtonProps> = ({
     parentId,
     itemType,
     viewType,
+    hasFilters,
     libraryViewSettings,
     setLibraryViewSettings
 }) => {
@@ -153,16 +155,13 @@ const FilterButton: FC<FilterButtonProps> = ({
         return viewType === LibraryTab.Episodes;
     };
 
-    const hasFilters =
-        Object.values(libraryViewSettings.Filters || {}).some((filter) => !!filter);
-
     return (
         <Box>
             <IconButton
                 title={globalize.translate('Filter')}
                 sx={{ ml: 2 }}
                 aria-describedby={id}
-                className='paper-icon-button-light btnShuffle autoSize'
+                className='paper-icon-button-light btnFilter autoSize'
                 onClick={handleClick}
             >
                 <Badge color='info' variant='dot' invisible={!hasFilters}>
diff --git a/src/apps/experimental/routes/home.tsx b/src/apps/experimental/routes/home.tsx
index 3ab9c8bed..837db942b 100644
--- a/src/apps/experimental/routes/home.tsx
+++ b/src/apps/experimental/routes/home.tsx
@@ -27,7 +27,7 @@ type ControllerProps = {
 
 const Home: FunctionComponent = () => {
     const [ searchParams ] = useSearchParams();
-    const initialTabIndex = parseInt(searchParams.get('tab') || '0', 10);
+    const initialTabIndex = parseInt(searchParams.get('tab') ?? '0', 10);
 
     const tabController = useRef<ControllerProps | null>();
     const tabControllers = useMemo<ControllerProps[]>(() => [], []);
diff --git a/src/apps/experimental/routes/movies/CollectionsView.tsx b/src/apps/experimental/routes/movies/CollectionsView.tsx
index ef574b916..82ce01556 100644
--- a/src/apps/experimental/routes/movies/CollectionsView.tsx
+++ b/src/apps/experimental/routes/movies/CollectionsView.tsx
@@ -1,30 +1,22 @@
-import React, { FC, useCallback } from 'react';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
 
-import ViewItemsContainer from 'components/common/ViewItemsContainer';
+import ItemsView from '../../components/library/ItemsView';
 import { LibraryViewProps } from 'types/library';
+import { CollectionType } from 'types/collectionType';
+import { LibraryTab } from 'types/libraryTab';
 
 const CollectionsView: FC<LibraryViewProps> = ({ parentId }) => {
-    const getBasekey = useCallback(() => {
-        return 'collections';
-    }, []);
-
-    const getItemTypes = useCallback(() => {
-        return ['BoxSet'];
-    }, []);
-
-    const getNoItemsMessage = useCallback(() => {
-        return 'MessageNoCollectionsAvailable';
-    }, []);
-
     return (
-        <ViewItemsContainer
-            topParentId={parentId}
+        <ItemsView
+            viewType={LibraryTab.Collections}
+            parentId={parentId}
+            collectionType={CollectionType.Movies}
             isBtnFilterEnabled={false}
             isBtnNewCollectionEnabled={true}
-            isAlphaPickerEnabled={false}
-            getBasekey={getBasekey}
-            getItemTypes={getItemTypes}
-            getNoItemsMessage={getNoItemsMessage}
+            isAlphabetPickerEnabled={false}
+            itemType={[BaseItemKind.BoxSet]}
+            noItemsMessage='MessageNoCollectionsAvailable'
         />
     );
 };
diff --git a/src/apps/experimental/routes/movies/FavoritesView.tsx b/src/apps/experimental/routes/movies/FavoritesView.tsx
index d22cad6e3..7bb89edb1 100644
--- a/src/apps/experimental/routes/movies/FavoritesView.tsx
+++ b/src/apps/experimental/routes/movies/FavoritesView.tsx
@@ -1,27 +1,17 @@
-import React, { FC, useCallback } from 'react';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
 
-import ViewItemsContainer from 'components/common/ViewItemsContainer';
+import ItemsView from '../../components/library/ItemsView';
 import { LibraryViewProps } from 'types/library';
+import { LibraryTab } from 'types/libraryTab';
 
 const FavoritesView: FC<LibraryViewProps> = ({ parentId }) => {
-    const getBasekey = useCallback(() => {
-        return 'favorites';
-    }, []);
-
-    const getItemTypes = useCallback(() => {
-        return ['Movie'];
-    }, []);
-
-    const getNoItemsMessage = useCallback(() => {
-        return 'MessageNoFavoritesAvailable';
-    }, []);
-
     return (
-        <ViewItemsContainer
-            topParentId={parentId}
-            getBasekey={getBasekey}
-            getItemTypes={getItemTypes}
-            getNoItemsMessage={getNoItemsMessage}
+        <ItemsView
+            viewType={LibraryTab.Favorites}
+            parentId={parentId}
+            itemType={[BaseItemKind.Movie]}
+            noItemsMessage='MessageNoFavoritesAvailable'
         />
     );
 };
diff --git a/src/apps/experimental/routes/movies/MoviesView.tsx b/src/apps/experimental/routes/movies/MoviesView.tsx
index 8796c9a71..b09f468db 100644
--- a/src/apps/experimental/routes/movies/MoviesView.tsx
+++ b/src/apps/experimental/routes/movies/MoviesView.tsx
@@ -1,28 +1,20 @@
-import React, { FC, useCallback } from 'react';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
 
-import ViewItemsContainer from 'components/common/ViewItemsContainer';
+import ItemsView from '../../components/library/ItemsView';
 import { LibraryViewProps } from 'types/library';
+import { CollectionType } from 'types/collectionType';
+import { LibraryTab } from 'types/libraryTab';
 
 const MoviesView: FC<LibraryViewProps> = ({ parentId }) => {
-    const getBasekey = useCallback(() => {
-        return 'movies';
-    }, []);
-
-    const getItemTypes = useCallback(() => {
-        return ['Movie'];
-    }, []);
-
-    const getNoItemsMessage = useCallback(() => {
-        return 'MessageNoItemsAvailable';
-    }, []);
-
     return (
-        <ViewItemsContainer
-            topParentId={parentId}
+        <ItemsView
+            viewType={LibraryTab.Movies}
+            parentId={parentId}
+            collectionType={CollectionType.Movies}
             isBtnShuffleEnabled={true}
-            getBasekey={getBasekey}
-            getItemTypes={getItemTypes}
-            getNoItemsMessage={getNoItemsMessage}
+            itemType={[BaseItemKind.Movie]}
+            noItemsMessage='MessageNoItemsAvailable'
         />
     );
 };
diff --git a/src/apps/experimental/routes/movies/TrailersView.tsx b/src/apps/experimental/routes/movies/TrailersView.tsx
index ff0ff0e73..6acfd1c8c 100644
--- a/src/apps/experimental/routes/movies/TrailersView.tsx
+++ b/src/apps/experimental/routes/movies/TrailersView.tsx
@@ -1,28 +1,17 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
 
-import React, { FC, useCallback } from 'react';
-
-import ViewItemsContainer from 'components/common/ViewItemsContainer';
+import ItemsView from '../../components/library/ItemsView';
 import { LibraryViewProps } from 'types/library';
+import { LibraryTab } from 'types/libraryTab';
 
 const TrailersView: FC<LibraryViewProps> = ({ parentId }) => {
-    const getBasekey = useCallback(() => {
-        return 'trailers';
-    }, []);
-
-    const getItemTypes = useCallback(() => {
-        return ['Trailer'];
-    }, []);
-
-    const getNoItemsMessage = useCallback(() => {
-        return 'MessageNoTrailersFound';
-    }, []);
-
     return (
-        <ViewItemsContainer
-            topParentId={parentId}
-            getBasekey={getBasekey}
-            getItemTypes={getItemTypes}
-            getNoItemsMessage={getNoItemsMessage}
+        <ItemsView
+            viewType={LibraryTab.Trailers}
+            parentId={parentId}
+            itemType={[BaseItemKind.Trailer]}
+            noItemsMessage='MessageNoTrailersFound'
         />
     );
 };
diff --git a/src/apps/experimental/routes/movies/index.tsx b/src/apps/experimental/routes/movies/index.tsx
index e1a30dfb5..8e74b7a3e 100644
--- a/src/apps/experimental/routes/movies/index.tsx
+++ b/src/apps/experimental/routes/movies/index.tsx
@@ -1,13 +1,8 @@
-import 'elements/emby-scroller/emby-scroller';
-import 'elements/emby-itemscontainer/emby-itemscontainer';
-import 'elements/emby-tabs/emby-tabs';
-import 'elements/emby-button/emby-button';
-
 import React, { FC } from 'react';
 import { useLocation, useSearchParams } from 'react-router-dom';
-import Page from 'components/Page';
 
 import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
+import Page from 'components/Page';
 import CollectionsView from './CollectionsView';
 import FavoritesView from './FavoritesView';
 import GenresView from './GenresView';
diff --git a/src/components/common/AlphaPickerContainer.tsx b/src/components/common/AlphaPickerContainer.tsx
deleted file mode 100644
index 6b7c9a071..000000000
--- a/src/components/common/AlphaPickerContainer.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-import AlphaPicker from '../alphaPicker/alphaPicker';
-import { ViewQuerySettings } from '../../types/interface';
-
-interface AlphaPickerContainerProps {
-    viewQuerySettings: ViewQuerySettings;
-    setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
-}
-
-const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewQuerySettings, setViewQuerySettings }) => {
-    const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
-    const element = useRef<HTMLDivElement>(null);
-
-    alphaPicker?.updateControls(viewQuerySettings);
-
-    const onAlphaPickerChange = useCallback((e) => {
-        const newValue = (e as CustomEvent).detail.value;
-        let updatedValue: React.SetStateAction<ViewQuerySettings>;
-        if (newValue === '#') {
-            updatedValue = {
-                NameLessThan: 'A',
-                NameStartsWith: undefined
-            };
-        } else {
-            updatedValue = {
-                NameLessThan: undefined,
-                NameStartsWith: newValue
-            };
-        }
-        setViewQuerySettings((prevState) => ({
-            ...prevState,
-            StartIndex: 0,
-            ...updatedValue
-        }));
-    }, [setViewQuerySettings]);
-
-    useEffect(() => {
-        const alphaPickerElement = element.current;
-
-        setAlphaPicker(new AlphaPicker({
-            element: alphaPickerElement,
-            valueChangeEvent: 'click'
-        }));
-
-        if (alphaPickerElement) {
-            alphaPickerElement.addEventListener('alphavaluechanged', onAlphaPickerChange);
-        }
-
-        return () => {
-            alphaPickerElement?.removeEventListener('alphavaluechanged', onAlphaPickerChange);
-        };
-    }, [onAlphaPickerChange]);
-
-    return (
-        <div ref={element} className='alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical alphabetPicker-right' />
-    );
-};
-
-export default AlphaPickerContainer;
diff --git a/src/components/common/Filter.tsx b/src/components/common/Filter.tsx
deleted file mode 100644
index c3ccdd62f..000000000
--- a/src/components/common/Filter.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
-import IconButtonElement from '../../elements/IconButtonElement';
-import { ViewQuerySettings } from '../../types/interface';
-
-interface FilterProps {
-    topParentId?: string | null;
-    getItemTypes: () => string[];
-    getFilterMenuOptions: () => Record<string, never>;
-    getVisibleFilters: () => string[];
-    viewQuerySettings: ViewQuerySettings;
-    setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
-}
-
-const Filter: FC<FilterProps> = ({
-    topParentId,
-    getItemTypes,
-    getVisibleFilters,
-    getFilterMenuOptions,
-    viewQuerySettings,
-    setViewQuerySettings
-}) => {
-    const element = useRef<HTMLDivElement>(null);
-
-    const showFilterMenu = useCallback(() => {
-        import('../filtermenu/filtermenu').then(({ default: FilterMenu }) => {
-            const filterMenu = new FilterMenu();
-            filterMenu.show({
-                settings: viewQuerySettings,
-                visibleSettings: getVisibleFilters(),
-                parentId: topParentId,
-                itemTypes: getItemTypes(),
-                serverId: window.ApiClient.serverId(),
-                filterMenuOptions: getFilterMenuOptions(),
-                setfilters: setViewQuerySettings
-            }).catch(() => {
-                // filter menu closed
-            });
-        }).catch(err => {
-            console.error('[Filter] failed to load filter menu', err);
-        });
-    }, [viewQuerySettings, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setViewQuerySettings]);
-
-    useEffect(() => {
-        const btnFilter = element.current?.querySelector('.btnFilter');
-
-        btnFilter?.addEventListener('click', showFilterMenu);
-
-        return () => {
-            btnFilter?.removeEventListener('click', showFilterMenu);
-        };
-    }, [showFilterMenu]);
-
-    return (
-        <div ref={element}>
-            <IconButtonElement
-                is='paper-icon-button-light'
-                className='btnFilter autoSize'
-                title='Filter'
-                icon='material-icons filter_list'
-            />
-        </div>
-    );
-};
-
-export default Filter;
diff --git a/src/components/common/NewCollection.tsx b/src/components/common/NewCollection.tsx
deleted file mode 100644
index 837fe85fd..000000000
--- a/src/components/common/NewCollection.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
-
-import IconButtonElement from '../../elements/IconButtonElement';
-
-const NewCollection: FC = () => {
-    const element = useRef<HTMLDivElement>(null);
-
-    const showCollectionEditor = useCallback(() => {
-        import('../collectionEditor/collectionEditor').then(({ default: CollectionEditor }) => {
-            const serverId = window.ApiClient.serverId();
-            const collectionEditor = new CollectionEditor();
-            collectionEditor.show({
-                items: [],
-                serverId: serverId
-            }).catch(() => {
-                // closed collection editor
-            });
-        }).catch(err => {
-            console.error('[NewCollection] failed to load collection editor', err);
-        });
-    }, []);
-
-    useEffect(() => {
-        const btnNewCollection = element.current?.querySelector('.btnNewCollection');
-        if (btnNewCollection) {
-            btnNewCollection.addEventListener('click', showCollectionEditor);
-        }
-    }, [showCollectionEditor]);
-
-    return (
-        <div ref={element}>
-            <IconButtonElement
-                is='paper-icon-button-light'
-                className='btnNewCollection autoSize'
-                title='Add'
-                icon='material-icons add'
-            />
-        </div>
-    );
-};
-
-export default NewCollection;
diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
deleted file mode 100644
index 3dd5a60ff..000000000
--- a/src/components/common/Pagination.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
-import React, { FC, useCallback, useEffect, useRef } from 'react';
-import IconButtonElement from '../../elements/IconButtonElement';
-import globalize from '../../scripts/globalize';
-import * as userSettings from '../../scripts/settings/userSettings';
-import { ViewQuerySettings } from '../../types/interface';
-
-interface PaginationProps {
-    viewQuerySettings: ViewQuerySettings;
-    setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
-    itemsResult?: BaseItemDtoQueryResult;
-}
-
-const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettings, itemsResult = {} }) => {
-    const limit = userSettings.libraryPageSize(undefined);
-    const totalRecordCount = itemsResult.TotalRecordCount || 0;
-    const startIndex = viewQuerySettings.StartIndex || 0;
-    const recordsStart = totalRecordCount ? startIndex + 1 : 0;
-    const recordsEnd = limit ? Math.min(startIndex + limit, totalRecordCount) : totalRecordCount;
-    const showControls = limit > 0 && limit < totalRecordCount;
-    const element = useRef<HTMLDivElement>(null);
-
-    const onNextPageClick = useCallback(() => {
-        if (limit > 0) {
-            const newIndex = startIndex + limit;
-            setViewQuerySettings((prevState) => ({
-                ...prevState,
-                StartIndex: newIndex
-            }));
-        }
-    }, [limit, setViewQuerySettings, startIndex]);
-
-    const onPreviousPageClick = useCallback(() => {
-        if (limit > 0) {
-            const newIndex = Math.max(0, startIndex - limit);
-            setViewQuerySettings((prevState) => ({
-                ...prevState,
-                StartIndex: newIndex
-            }));
-        }
-    }, [limit, setViewQuerySettings, startIndex]);
-
-    useEffect(() => {
-        const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement;
-        if (btnNextPage) {
-            if (startIndex + limit >= totalRecordCount) {
-                btnNextPage.disabled = true;
-            } else {
-                btnNextPage.disabled = false;
-            }
-            btnNextPage.addEventListener('click', onNextPageClick);
-        }
-
-        const btnPreviousPage = element.current?.querySelector('.btnPreviousPage') as HTMLButtonElement;
-        if (btnPreviousPage) {
-            if (startIndex) {
-                btnPreviousPage.disabled = false;
-            } else {
-                btnPreviousPage.disabled = true;
-            }
-            btnPreviousPage.addEventListener('click', onPreviousPageClick);
-        }
-
-        return () => {
-            btnNextPage?.removeEventListener('click', onNextPageClick);
-            btnPreviousPage?.removeEventListener('click', onPreviousPageClick);
-        };
-    }, [totalRecordCount, onNextPageClick, onPreviousPageClick, limit, startIndex]);
-
-    return (
-        <div ref={element}>
-            <div className='paging'>
-                <div className='listPaging' style={{ display: 'flex', alignItems: 'center' }}>
-                    <span>
-                        {globalize.translate('ListPaging', recordsStart, recordsEnd, totalRecordCount)}
-                    </span>
-                    {showControls && (
-                        <>
-                            <IconButtonElement
-                                is='paper-icon-button-light'
-                                className='btnPreviousPage autoSize'
-                                icon='material-icons arrow_back'
-                            />
-                            <IconButtonElement
-                                is='paper-icon-button-light'
-                                className='btnNextPage autoSize'
-                                icon='material-icons arrow_forward'
-                            />
-                        </>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Pagination;
diff --git a/src/components/common/SelectView.tsx b/src/components/common/SelectView.tsx
deleted file mode 100644
index bfb34555b..000000000
--- a/src/components/common/SelectView.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
-import IconButtonElement from '../../elements/IconButtonElement';
-import { ViewQuerySettings } from '../../types/interface';
-
-interface SelectViewProps {
-    getVisibleViewSettings: () => string[];
-    viewQuerySettings: ViewQuerySettings;
-    setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
-}
-
-const SelectView: FC<SelectViewProps> = ({
-    getVisibleViewSettings,
-    viewQuerySettings,
-    setViewQuerySettings
-}) => {
-    const element = useRef<HTMLDivElement>(null);
-
-    const showViewSettingsMenu = useCallback(() => {
-        import('../viewSettings/viewSettings').then(({ default: ViewSettings }) => {
-            const viewsettings = new ViewSettings();
-            viewsettings.show({
-                settings: viewQuerySettings,
-                visibleSettings: getVisibleViewSettings(),
-                setviewsettings: setViewQuerySettings
-            }).catch(() => {
-                // view settings closed
-            });
-        }).catch(err => {
-            console.error('[SelectView] failed to load view settings', err);
-        });
-    }, [getVisibleViewSettings, viewQuerySettings, setViewQuerySettings]);
-
-    useEffect(() => {
-        const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement;
-        btnSelectView?.addEventListener('click', showViewSettingsMenu);
-
-        return () => {
-            btnSelectView?.removeEventListener('click', showViewSettingsMenu);
-        };
-    }, [showViewSettingsMenu]);
-
-    return (
-        <div ref={element}>
-            <IconButtonElement
-                is='paper-icon-button-light'
-                className='btnSelectView autoSize'
-                title='ButtonSelectView'
-                icon='material-icons view_comfy'
-            />
-        </div>
-    );
-};
-
-export default SelectView;
diff --git a/src/components/common/Shuffle.tsx b/src/components/common/Shuffle.tsx
deleted file mode 100644
index 093dc7487..000000000
--- a/src/components/common/Shuffle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
-import React, { FC, useCallback, useEffect, useRef } from 'react';
-
-import { playbackManager } from '../playback/playbackmanager';
-import IconButtonElement from '../../elements/IconButtonElement';
-
-interface ShuffleProps {
-    itemsResult?: BaseItemDtoQueryResult;
-    topParentId: string | null;
-}
-
-const Shuffle: FC<ShuffleProps> = ({ itemsResult = {}, topParentId }) => {
-    const element = useRef<HTMLDivElement>(null);
-
-    const shuffle = useCallback(() => {
-        window.ApiClient.getItem(
-            window.ApiClient.getCurrentUserId(),
-            topParentId as string
-        ).then((item) => {
-            playbackManager.shuffle(item);
-        }).catch(err => {
-            console.error('[Shuffle] failed to fetch items', err);
-        });
-    }, [topParentId]);
-
-    useEffect(() => {
-        const btnShuffle = element.current?.querySelector('.btnShuffle');
-        if (btnShuffle) {
-            btnShuffle.addEventListener('click', shuffle);
-        }
-    }, [itemsResult.TotalRecordCount, shuffle]);
-
-    return (
-        <div ref={element}>
-            <IconButtonElement
-                is='paper-icon-button-light'
-                className='btnShuffle autoSize'
-                title='Shuffle'
-                icon='material-icons shuffle'
-            />
-        </div>
-    );
-};
-
-export default Shuffle;
diff --git a/src/components/common/Sort.tsx b/src/components/common/Sort.tsx
deleted file mode 100644
index db5cb8995..000000000
--- a/src/components/common/Sort.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
-import IconButtonElement from '../../elements/IconButtonElement';
-import { ViewQuerySettings } from '../../types/interface';
-
-interface SortProps {
-    getSortMenuOptions: () => {
-        name: string;
-        value: string;
-    }[];
-    viewQuerySettings: ViewQuerySettings;
-    setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
-}
-
-const Sort: FC<SortProps> = ({
-    getSortMenuOptions,
-    viewQuerySettings,
-    setViewQuerySettings
-}) => {
-    const element = useRef<HTMLDivElement>(null);
-
-    const showSortMenu = useCallback(() => {
-        import('../sortmenu/sortmenu').then(({ default: SortMenu }) => {
-            const sortMenu = new SortMenu();
-            sortMenu.show({
-                settings: viewQuerySettings,
-                sortOptions: getSortMenuOptions(),
-                setSortValues: setViewQuerySettings
-            }).catch(() => {
-                // sort menu closed
-            });
-        }).catch(err => {
-            console.error('[Sort] failed to load sort menu', err);
-        });
-    }, [getSortMenuOptions, viewQuerySettings, setViewQuerySettings]);
-
-    useEffect(() => {
-        const btnSort = element.current?.querySelector('.btnSort');
-
-        btnSort?.addEventListener('click', showSortMenu);
-
-        return () => {
-            btnSort?.removeEventListener('click', showSortMenu);
-        };
-    }, [showSortMenu]);
-
-    return (
-        <div ref={element}>
-            <IconButtonElement
-                is='paper-icon-button-light'
-                className='btnSort autoSize'
-                title='Sort'
-                icon='material-icons sort_by_alpha'
-            />
-        </div>
-    );
-};
-
-export default Sort;
diff --git a/src/components/common/ViewItemsContainer.tsx b/src/components/common/ViewItemsContainer.tsx
deleted file mode 100644
index 1ea5ef989..000000000
--- a/src/components/common/ViewItemsContainer.tsx
+++ /dev/null
@@ -1,411 +0,0 @@
-import { type BaseItemDtoQueryResult, ItemFields, ItemFilter } from '@jellyfin/sdk/lib/generated-client';
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-
-import loading from '../loading/loading';
-import * as userSettings from '../../scripts/settings/userSettings';
-import AlphaPickerContainer from './AlphaPickerContainer';
-import Filter from './Filter';
-import ItemsContainer from './ItemsContainer';
-import Pagination from './Pagination';
-import SelectView from './SelectView';
-import Shuffle from './Shuffle';
-import Sort from './Sort';
-import NewCollection from './NewCollection';
-import globalize from '../../scripts/globalize';
-import ServerConnections from '../ServerConnections';
-import { useLocalStorage } from '../../hooks/useLocalStorage';
-import listview from '../listview/listview';
-import cardBuilder from '../cardbuilder/cardBuilder';
-
-import { ViewQuerySettings } from '../../types/interface';
-import { CardOptions } from '../../types/cardOptions';
-
-interface ViewItemsContainerProps {
-    topParentId: string | null;
-    isBtnShuffleEnabled?: boolean;
-    isBtnFilterEnabled?: boolean;
-    isBtnNewCollectionEnabled?: boolean;
-    isAlphaPickerEnabled?: boolean;
-    getBasekey: () => string;
-    getItemTypes: () => string[];
-    getNoItemsMessage: () => string;
-}
-
-const getDefaultSortBy = () => {
-    return 'SortName';
-};
-
-const getFields = (viewQuerySettings: ViewQuerySettings) => {
-    const fields: ItemFields[] = [
-        ItemFields.BasicSyncInfo,
-        ItemFields.MediaSourceCount
-    ];
-
-    if (viewQuerySettings.imageType === 'primary') {
-        fields.push(ItemFields.PrimaryImageAspectRatio);
-    }
-
-    return fields.join(',');
-};
-
-const getFilters = (viewQuerySettings: ViewQuerySettings) => {
-    const filters: ItemFilter[] = [];
-
-    if (viewQuerySettings.IsPlayed) {
-        filters.push(ItemFilter.IsPlayed);
-    }
-
-    if (viewQuerySettings.IsUnplayed) {
-        filters.push(ItemFilter.IsUnplayed);
-    }
-
-    if (viewQuerySettings.IsFavorite) {
-        filters.push(ItemFilter.IsFavorite);
-    }
-
-    if (viewQuerySettings.IsResumable) {
-        filters.push(ItemFilter.IsResumable);
-    }
-
-    return filters;
-};
-
-const getVisibleViewSettings = () => {
-    return [
-        'showTitle',
-        'showYear',
-        'imageType',
-        'cardLayout'
-    ];
-};
-
-const getFilterMenuOptions = () => {
-    return {};
-};
-
-const getVisibleFilters = () => {
-    return [
-        'IsUnplayed',
-        'IsPlayed',
-        'IsFavorite',
-        'IsResumable',
-        'VideoType',
-        'HasSubtitles',
-        'HasTrailer',
-        'HasSpecialFeature',
-        'HasThemeSong',
-        'HasThemeVideo'
-    ];
-};
-
-const getSortMenuOptions = () => {
-    return [{
-        name: globalize.translate('Name'),
-        value: 'SortName,ProductionYear'
-    }, {
-        name: globalize.translate('OptionRandom'),
-        value: 'Random'
-    }, {
-        name: globalize.translate('OptionImdbRating'),
-        value: 'CommunityRating,SortName,ProductionYear'
-    }, {
-        name: globalize.translate('OptionCriticRating'),
-        value: 'CriticRating,SortName,ProductionYear'
-    }, {
-        name: globalize.translate('OptionDateAdded'),
-        value: 'DateCreated,SortName,ProductionYear'
-    }, {
-        name: globalize.translate('OptionDatePlayed'),
-        value: 'DatePlayed,SortName,ProductionYear'
-    }, {
-        name: globalize.translate('OptionParentalRating'),
-        value: 'OfficialRating,SortName,ProductionYear'
-    }, {
-        name: globalize.translate('OptionPlayCount'),
-        value: 'PlayCount,SortName,ProductionYear'
-    }, {
-        name: globalize.translate('OptionReleaseDate'),
-        value: 'PremiereDate,SortName,ProductionYear'
-    }, {
-        name: globalize.translate('Runtime'),
-        value: 'Runtime,SortName,ProductionYear'
-    }];
-};
-
-const defaultViewQuerySettings: ViewQuerySettings = {
-    showTitle: true,
-    showYear: true,
-    imageType: 'primary',
-    viewType: '',
-    cardLayout: false,
-    SortBy: getDefaultSortBy(),
-    SortOrder: 'Ascending',
-    IsPlayed: false,
-    IsUnplayed: false,
-    IsFavorite: false,
-    IsResumable: false,
-    Is4K: null,
-    IsHD: null,
-    IsSD: null,
-    Is3D: null,
-    VideoTypes: '',
-    SeriesStatus: '',
-    HasSubtitles: null,
-    HasTrailer: null,
-    HasSpecialFeature: null,
-    HasThemeSong: null,
-    HasThemeVideo: null,
-    GenreIds: '',
-    StartIndex: 0
-};
-
-const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
-    topParentId,
-    isBtnShuffleEnabled = false,
-    isBtnFilterEnabled = true,
-    isBtnNewCollectionEnabled = false,
-    isAlphaPickerEnabled = true,
-    getBasekey,
-    getItemTypes,
-    getNoItemsMessage
-}) => {
-    const getSettingsKey = useCallback(() => {
-        return `${topParentId} - ${getBasekey()}`;
-    }, [getBasekey, topParentId]);
-
-    const [isLoading, setisLoading] = useState(false);
-
-    const [viewQuerySettings, setViewQuerySettings] = useLocalStorage<ViewQuerySettings>(
-        `viewQuerySettings - ${getSettingsKey()}`,
-        defaultViewQuerySettings
-    );
-
-    const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
-
-    const element = useRef<HTMLDivElement>(null);
-
-    const getContext = useCallback(() => {
-        const itemType = getItemTypes().join(',');
-        if (itemType === 'Movie' || itemType === 'BoxSet') {
-            return 'movies';
-        }
-
-        return null;
-    }, [getItemTypes]);
-
-    const getCardOptions = useCallback(() => {
-        let shape;
-        let preferThumb;
-        let preferDisc;
-        let preferLogo;
-
-        if (viewQuerySettings.imageType === 'banner') {
-            shape = 'banner';
-        } else if (viewQuerySettings.imageType === 'disc') {
-            shape = 'square';
-            preferDisc = true;
-        } else if (viewQuerySettings.imageType === 'logo') {
-            shape = 'backdrop';
-            preferLogo = true;
-        } else if (viewQuerySettings.imageType === 'thumb') {
-            shape = 'backdrop';
-            preferThumb = true;
-        } else {
-            shape = 'autoVertical';
-        }
-
-        const cardOptions: CardOptions = {
-            shape: shape,
-            showTitle: viewQuerySettings.showTitle,
-            showYear: viewQuerySettings.showYear,
-            cardLayout: viewQuerySettings.cardLayout,
-            centerText: true,
-            context: getContext(),
-            coverImage: true,
-            preferThumb: preferThumb,
-            preferDisc: preferDisc,
-            preferLogo: preferLogo,
-            overlayPlayButton: false,
-            overlayMoreButton: true,
-            overlayText: !viewQuerySettings.showTitle
-        };
-
-        cardOptions.items = itemsResult.Items || [];
-
-        return cardOptions;
-    }, [
-        getContext,
-        itemsResult.Items,
-        viewQuerySettings.cardLayout,
-        viewQuerySettings.imageType,
-        viewQuerySettings.showTitle,
-        viewQuerySettings.showYear
-    ]);
-
-    const getItemsHtml = useCallback(() => {
-        let html = '';
-
-        if (viewQuerySettings.imageType === 'list') {
-            html = listview.getListViewHtml({
-                items: itemsResult.Items || [],
-                context: getContext()
-            });
-        } else {
-            html = cardBuilder.getCardsHtml(itemsResult.Items || [], getCardOptions());
-        }
-
-        if (!itemsResult.Items?.length) {
-            html += '<div class="noItemsMessage centerMessage">';
-            html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
-            html += '<p>' + globalize.translate(getNoItemsMessage()) + '</p>';
-            html += '</div>';
-        }
-
-        return html;
-    }, [getCardOptions, getContext, itemsResult.Items, getNoItemsMessage, viewQuerySettings.imageType]);
-
-    const getQuery = useCallback(() => {
-        const queryFilters = getFilters(viewQuerySettings);
-
-        let queryIsHD;
-
-        if (viewQuerySettings.IsHD) {
-            queryIsHD = true;
-        }
-
-        if (viewQuerySettings.IsSD) {
-            queryIsHD = false;
-        }
-
-        return {
-            SortBy: viewQuerySettings.SortBy,
-            SortOrder: viewQuerySettings.SortOrder,
-            IncludeItemTypes: getItemTypes().join(','),
-            Recursive: true,
-            Fields: getFields(viewQuerySettings),
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
-            Limit: userSettings.libraryPageSize(undefined) || undefined,
-            IsFavorite: getBasekey() === 'favorites' ? true : null,
-            VideoTypes: viewQuerySettings.VideoTypes,
-            GenreIds: viewQuerySettings.GenreIds,
-            Is4K: viewQuerySettings.Is4K ? true : null,
-            IsHD: queryIsHD,
-            Is3D: viewQuerySettings.Is3D ? true : null,
-            HasSubtitles: viewQuerySettings.HasSubtitles ? true : null,
-            HasTrailer: viewQuerySettings.HasTrailer ? true : null,
-            HasSpecialFeature: viewQuerySettings.HasSpecialFeature ? true : null,
-            HasThemeSong: viewQuerySettings.HasThemeSong ? true : null,
-            HasThemeVideo: viewQuerySettings.HasThemeVideo ? true : null,
-            Filters: queryFilters.length ? queryFilters.join(',') : null,
-            StartIndex: viewQuerySettings.StartIndex,
-            NameLessThan: viewQuerySettings.NameLessThan,
-            NameStartsWith: viewQuerySettings.NameStartsWith,
-            ParentId: topParentId
-        };
-    }, [
-        viewQuerySettings,
-        getItemTypes,
-        getBasekey,
-        topParentId
-    ]);
-
-    const fetchData = useCallback(() => {
-        loading.show();
-
-        const apiClient = ServerConnections.getApiClient(window.ApiClient.serverId());
-        return apiClient.getItems(
-            apiClient.getCurrentUserId(),
-            {
-                ...getQuery()
-            }
-        );
-    }, [getQuery]);
-
-    const reloadItems = useCallback(() => {
-        const page = element.current;
-
-        if (!page) {
-            console.error('Unexpected null reference');
-            return;
-        }
-        setisLoading(false);
-        fetchData().then((result) => {
-            setItemsResult(result);
-
-            window.scrollTo(0, 0);
-
-            import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
-                autoFocuser.autoFocus(page);
-            }).catch(err => {
-                console.error('[ViewItemsContainer] failed to load autofocuser', err);
-            });
-            loading.hide();
-            setisLoading(true);
-        }).catch(err => {
-            console.error('[ViewItemsContainer] failed to fetch data', err);
-        });
-    }, [fetchData]);
-
-    useEffect(() => {
-        reloadItems();
-    }, [reloadItems]);
-
-    return (
-        <div ref={element}>
-            <div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
-                <Pagination
-                    itemsResult= {itemsResult}
-                    viewQuerySettings={viewQuerySettings}
-                    setViewQuerySettings={setViewQuerySettings}
-                />
-
-                {isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
-
-                <SelectView
-                    getVisibleViewSettings={getVisibleViewSettings}
-                    viewQuerySettings={viewQuerySettings}
-                    setViewQuerySettings={setViewQuerySettings}
-                />
-
-                <Sort
-                    getSortMenuOptions={getSortMenuOptions}
-                    viewQuerySettings={viewQuerySettings}
-                    setViewQuerySettings={setViewQuerySettings}
-                />
-
-                {isBtnFilterEnabled && <Filter
-                    topParentId={topParentId}
-                    getItemTypes={getItemTypes}
-                    getVisibleFilters={getVisibleFilters}
-                    getFilterMenuOptions={getFilterMenuOptions}
-                    viewQuerySettings={viewQuerySettings}
-                    setViewQuerySettings={setViewQuerySettings}
-                />}
-
-                {isBtnNewCollectionEnabled && <NewCollection />}
-
-            </div>
-
-            {isAlphaPickerEnabled && <AlphaPickerContainer
-                viewQuerySettings={viewQuerySettings}
-                setViewQuerySettings={setViewQuerySettings}
-            />}
-
-            {isLoading && <ItemsContainer
-                viewQuerySettings={viewQuerySettings}
-                getItemsHtml={getItemsHtml}
-            />}
-
-            <div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
-                <Pagination
-                    itemsResult= {itemsResult}
-                    viewQuerySettings={viewQuerySettings}
-                    setViewQuerySettings={setViewQuerySettings}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default ViewItemsContainer;
diff --git a/src/hooks/useFetchItems.ts b/src/hooks/useFetchItems.ts
index c0ed89b85..6ddd77a12 100644
--- a/src/hooks/useFetchItems.ts
+++ b/src/hooks/useFetchItems.ts
@@ -1,12 +1,11 @@
 import type { ItemsApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client';
-import { AxiosRequestConfig } from 'axios';
-
-import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
 import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
 import { ItemFilter } from '@jellyfin/sdk/lib/generated-client/models/item-filter';
 import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
 import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
+import { getArtistsApi } from '@jellyfin/sdk/lib/utils/api/artists-api';
 import { getFilterApi } from '@jellyfin/sdk/lib/utils/api/filter-api';
 import { getGenresApi } from '@jellyfin/sdk/lib/utils/api/genres-api';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
@@ -14,11 +13,14 @@ import { getMoviesApi } from '@jellyfin/sdk/lib/utils/api/movies-api';
 import { getStudiosApi } from '@jellyfin/sdk/lib/utils/api/studios-api';
 import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
+import { AxiosRequestConfig } from 'axios';
 import { useQuery } from '@tanstack/react-query';
 
 import { JellyfinApiContext, useApi } from './useApi';
+import { getAlphaPickerQuery, getFieldsQuery, getFiltersQuery, getLimitQuery } from 'utils/items';
 import { Sections, SectionsViewType } from 'types/suggestionsSections';
-import { ParentId } from 'types/library';
+import { LibraryViewSettings, ParentId } from 'types/library';
+import { LibraryTab } from 'types/libraryTab';
 
 const fetchGetItem = async (
     currentApi: JellyfinApiContext,
@@ -291,7 +293,7 @@ export const useGetGenres = (itemType: BaseItemKind, parentId: ParentId) => {
 const fetchGetStudios = async (
     currentApi: JellyfinApiContext,
     parentId: ParentId,
-    itemType: BaseItemKind,
+    itemType: BaseItemKind[],
     options?: AxiosRequestConfig
 ) => {
     const { api, user } = currentApi;
@@ -299,7 +301,7 @@ const fetchGetStudios = async (
         const response = await getStudiosApi(api).getStudios(
             {
                 userId: user.Id,
-                includeItemTypes: [itemType],
+                includeItemTypes: itemType,
                 fields: [
                     ItemFields.DateCreated,
                     ItemFields.PrimaryImageAspectRatio
@@ -316,7 +318,7 @@ const fetchGetStudios = async (
     }
 };
 
-export const useGetStudios = (parentId: ParentId, itemType: BaseItemKind) => {
+export const useGetStudios = (parentId: ParentId, itemType: BaseItemKind[]) => {
     const currentApi = useApi();
     return useQuery({
         queryKey: ['Studios', parentId, itemType],
@@ -329,7 +331,7 @@ export const useGetStudios = (parentId: ParentId, itemType: BaseItemKind) => {
 const fetchGetQueryFiltersLegacy = async (
     currentApi: JellyfinApiContext,
     parentId: ParentId,
-    itemType: BaseItemKind,
+    itemType: BaseItemKind[],
     options?: AxiosRequestConfig
 ) => {
     const { api, user } = currentApi;
@@ -338,7 +340,7 @@ const fetchGetQueryFiltersLegacy = async (
             {
                 userId: user.Id,
                 parentId: parentId ?? undefined,
-                includeItemTypes: [itemType]
+                includeItemTypes: itemType
             },
             {
                 signal: options?.signal
@@ -350,7 +352,7 @@ const fetchGetQueryFiltersLegacy = async (
 
 export const useGetQueryFiltersLegacy = (
     parentId: ParentId,
-    itemType: BaseItemKind
+    itemType: BaseItemKind[]
 ) => {
     const currentApi = useApi();
     return useQuery({
@@ -362,3 +364,148 @@ export const useGetQueryFiltersLegacy = (
         enabled: !!parentId
     });
 };
+
+const fetchGetItemsViewByType = async (
+    currentApi: JellyfinApiContext,
+    viewType: LibraryTab,
+    parentId: ParentId,
+    itemType: BaseItemKind[],
+    libraryViewSettings: LibraryViewSettings,
+    options?: AxiosRequestConfig
+) => {
+    const { api, user } = currentApi;
+    if (api && user?.Id) {
+        let response;
+        switch (viewType) {
+            case LibraryTab.AlbumArtists: {
+                response = await getArtistsApi(api).getAlbumArtists(
+                    {
+                        userId: user.Id,
+                        parentId: parentId ?? undefined,
+                        enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop],
+                        ...getFieldsQuery(viewType, libraryViewSettings),
+                        ...getFiltersQuery(viewType, libraryViewSettings),
+                        ...getLimitQuery(),
+                        ...getAlphaPickerQuery(libraryViewSettings),
+                        sortBy: [libraryViewSettings.SortBy],
+                        sortOrder: [libraryViewSettings.SortOrder],
+                        includeItemTypes: itemType,
+                        startIndex: libraryViewSettings.StartIndex
+                    },
+                    {
+                        signal: options?.signal
+                    }
+                );
+                break;
+            }
+            case LibraryTab.Artists: {
+                response = await getArtistsApi(api).getArtists(
+                    {
+                        userId: user.Id,
+                        parentId: parentId ?? undefined,
+                        enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop],
+                        ...getFieldsQuery(viewType, libraryViewSettings),
+                        ...getFiltersQuery(viewType, libraryViewSettings),
+                        ...getLimitQuery(),
+                        ...getAlphaPickerQuery(libraryViewSettings),
+                        sortBy: [libraryViewSettings.SortBy],
+                        sortOrder: [libraryViewSettings.SortOrder],
+                        includeItemTypes: itemType,
+                        startIndex: libraryViewSettings.StartIndex
+                    },
+                    {
+                        signal: options?.signal
+                    }
+                );
+                break;
+            }
+            case LibraryTab.Networks:
+                response = await getStudiosApi(api).getStudios(
+                    {
+                        userId: user.Id,
+                        parentId: parentId ?? undefined,
+                        ...getFieldsQuery(viewType, libraryViewSettings),
+                        includeItemTypes: itemType,
+                        enableImageTypes: [ImageType.Thumb],
+                        startIndex: libraryViewSettings.StartIndex
+                    },
+                    {
+                        signal: options?.signal
+                    }
+                );
+                break;
+            default: {
+                response = await getItemsApi(api).getItems(
+                    {
+                        userId: user.Id,
+                        recursive: true,
+                        imageTypeLimit: 1,
+                        parentId: parentId ?? undefined,
+                        enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop],
+                        ...getFieldsQuery(viewType, libraryViewSettings),
+                        ...getFiltersQuery(viewType, libraryViewSettings),
+                        ...getLimitQuery(),
+                        ...getAlphaPickerQuery(libraryViewSettings),
+                        isFavorite: viewType === LibraryTab.Favorites ? true : undefined,
+                        sortBy: [libraryViewSettings.SortBy],
+                        sortOrder: [libraryViewSettings.SortOrder],
+                        includeItemTypes: itemType,
+                        startIndex: libraryViewSettings.StartIndex
+                    },
+                    {
+                        signal: options?.signal
+                    }
+                );
+                break;
+            }
+        }
+        return response.data;
+    }
+};
+
+export const useGetItemsViewByType = (
+    viewType: LibraryTab,
+    parentId: ParentId,
+    itemType: BaseItemKind[],
+    libraryViewSettings: LibraryViewSettings
+) => {
+    const currentApi = useApi();
+    return useQuery({
+        queryKey: [
+            'ItemsViewByType',
+            viewType,
+            parentId,
+            itemType,
+            libraryViewSettings
+        ],
+        queryFn: ({ signal }) =>
+            fetchGetItemsViewByType(
+                currentApi,
+                viewType,
+                parentId,
+                itemType,
+                libraryViewSettings,
+                { signal }
+            ),
+        refetchOnWindowFocus: false,
+        keepPreviousData : true,
+        enabled:
+            [
+                LibraryTab.Movies,
+                LibraryTab.Favorites,
+                LibraryTab.Collections,
+                LibraryTab.Trailers,
+                LibraryTab.Series,
+                LibraryTab.Episodes,
+                LibraryTab.Networks,
+                LibraryTab.Albums,
+                LibraryTab.AlbumArtists,
+                LibraryTab.Artists,
+                LibraryTab.Playlists,
+                LibraryTab.Songs,
+                LibraryTab.Books,
+                LibraryTab.Photos,
+                LibraryTab.Videos
+            ].includes(viewType) && !!parentId
+    });
+};
diff --git a/src/types/cardOptions.ts b/src/types/cardOptions.ts
index 7864ab315..658978293 100644
--- a/src/types/cardOptions.ts
+++ b/src/types/cardOptions.ts
@@ -1,4 +1,5 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { CollectionType } from './collectionType';
 
 export interface CardOptions {
     itemsContainer?: HTMLElement | null;
@@ -32,7 +33,7 @@ export interface CardOptions {
     showUnplayedIndicator?: boolean;
     showChildCountIndicator?: boolean;
     lines?: number;
-    context?: string | null;
+    context?: CollectionType;
     action?: string | null;
     defaultShape?: string;
     indexBy?: string;
diff --git a/src/types/interface.ts b/src/types/interface.ts
deleted file mode 100644
index c577f84e2..000000000
--- a/src/types/interface.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export interface ViewQuerySettings {
-    showTitle?: boolean;
-    showYear?: boolean;
-    imageType?: string;
-    viewType?: string;
-    cardLayout?: boolean;
-    SortBy?: string | null;
-    SortOrder?: string | null;
-    IsPlayed?: boolean | null;
-    IsUnplayed?: boolean | null;
-    IsFavorite?: boolean | null;
-    IsResumable?: boolean | null;
-    Is4K?: boolean | null;
-    IsHD?: boolean | null;
-    IsSD?: boolean | null;
-    Is3D?: boolean | null;
-    VideoTypes?: string | null;
-    SeriesStatus?: string | null;
-    HasSubtitles?: boolean | null;
-    HasTrailer?: boolean | null;
-    HasSpecialFeature?: boolean | null;
-    ParentIndexNumber?: boolean | null;
-    HasThemeSong?: boolean | null;
-    HasThemeVideo?: boolean | null;
-    GenreIds?: string | null;
-    NameLessThan?: string | null;
-    NameStartsWith?: string | null;
-    StartIndex?: number;
-}
diff --git a/src/types/library.ts b/src/types/library.ts
index 862ee3d6d..37d0781cb 100644
--- a/src/types/library.ts
+++ b/src/types/library.ts
@@ -8,7 +8,7 @@ import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
 export type ParentId = string | null | undefined;
 
 export interface LibraryViewProps {
-    parentId: string | null;
+    parentId: ParentId;
 }
 
 export enum FeatureFilters {
diff --git a/src/utils/items.ts b/src/utils/items.ts
index 08936a3fd..ce2efc8dc 100644
--- a/src/utils/items.ts
+++ b/src/utils/items.ts
@@ -107,7 +107,7 @@ export const getFieldsQuery = (
 
 export const getLimitQuery = () => {
     return {
-        limit: userSettings.libraryPageSize(undefined) || undefined
+        limit: userSettings.libraryPageSize(undefined) ?? undefined
     };
 };
 
@@ -144,12 +144,12 @@ export const getSettingsKey = (viewType: LibraryTab, parentId: ParentId) => {
     return `${viewType} - ${parentId}`;
 };
 
-export const getDefaultLibraryViewSettings = (): LibraryViewSettings => {
+export const getDefaultLibraryViewSettings = (viewType: LibraryTab): LibraryViewSettings => {
     return {
         ShowTitle: true,
         ShowYear: false,
-        ViewMode: ViewMode.GridView,
-        ImageType: ImageType.Primary,
+        ViewMode: viewType === LibraryTab.Songs ? ViewMode.ListView : ViewMode.GridView,
+        ImageType: viewType === LibraryTab.Networks ? ImageType.Thumb : ImageType.Primary,
         CardLayout: false,
         SortBy: ItemSortBy.SortName,
         SortOrder: SortOrder.Ascending,

From 8bf3a64cd72cda69ac6da685ddeb117b62e3c3e1 Mon Sep 17 00:00:00 2001
From: Jason Beetham <beefers331@gmail.com>
Date: Mon, 2 Oct 2023 22:42:05 -0600
Subject: [PATCH 31/45] Make the series and season Play button play the next
 episode

---
 src/components/playback/playbackmanager.js | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index 05117fd08..53b70ea44 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -1848,6 +1848,56 @@ class PlaybackManager {
                     SortBy: options.shuffle ? 'Random' : 'SortName',
                     MediaTypes: 'Audio'
                 });
+            } else if (firstItem.Type === 'Series' || firstItem.Type === 'Season') {
+                const apiClient = ServerConnections.getApiClient(firstItem.ServerId);
+
+                promise = apiClient.getEpisodes(firstItem.SeriesId || firstItem.Id, {
+                    IsVirtualUnaired: false,
+                    IsMissing: false,
+                    UserId: apiClient.getCurrentUserId(),
+                    Fields: 'Chapters'
+                }).then(function (episodesResult) {
+                    const originalResults = episodesResult.Items;
+                    const isSeries = firstItem.Type === 'Series';
+
+                    let foundItem = false;
+
+                    episodesResult.Items = episodesResult.Items.filter(function (e) {
+                        if (foundItem) {
+                            return true;
+                        }
+
+                        if (!e.UserData.Played && (isSeries || e.SeasonId === firstItem.Id)) {
+                            foundItem = true;
+                            return true;
+                        }
+
+                        return false;
+                    });
+
+                    if (episodesResult.Items.length === 0) {
+                        if (isSeries) {
+                            episodesResult.Items = originalResults;
+                        } else {
+                            episodesResult.Items = originalResults.filter(function (e) {
+                                if (foundItem) {
+                                    return true;
+                                }
+
+                                if (e.SeasonId === firstItem.Id) {
+                                    foundItem = true;
+                                    return true;
+                                }
+
+                                return false;
+                            });
+                        }
+                    }
+
+                    episodesResult.TotalRecordCount = episodesResult.Items.length;
+
+                    return episodesResult;
+                });
             } else if (firstItem.IsFolder && firstItem.CollectionType === 'homevideos') {
                 promise = getItemsForPlayback(serverId, mergePlaybackQueries({
                     ParentId: firstItem.Id,

From c470745176025fab44edd9d0dce09ce8565afa01 Mon Sep 17 00:00:00 2001
From: Jesse <jbourkespriggs@gmail.com>
Date: Wed, 11 Oct 2023 08:43:55 +0000
Subject: [PATCH 32/45] Translated using Weblate (English (United Kingdom))
 Translation: Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/en_GB/

---
 src/strings/en-gb.json | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/strings/en-gb.json b/src/strings/en-gb.json
index 372502349..3e19f5939 100644
--- a/src/strings/en-gb.json
+++ b/src/strings/en-gb.json
@@ -1732,7 +1732,7 @@
     "EnableAudioNormalizationHelp": "Audio normalisation will add a constant gain to keep the average at a desired level (-18dB).",
     "EnableAudioNormalization": "Audio Normalisation",
     "LabelEnableLUFSScan": "Enable LUFS scan",
-    "LabelEnableLUFSScanHelp": "Enable LUFS scan for music (This will take longer and more resources).",
+    "LabelEnableLUFSScanHelp": "Clients can normalise audio playback to get equal loudness across tracks. This will make library scans longer and take more resources.",
     "AllowCollectionManagement": "Allow this user to manage collections",
     "GetThePlugin": "Get the Plugin",
     "Notifications": "Notifications",
@@ -1773,5 +1773,8 @@
     "MachineTranslated": "Machine Translated",
     "ForeignPartsOnly": "Forced/Foreign parts only",
     "HearingImpairedShort": "HI/SDH",
-    "HeaderGuestCast": "Guest Stars"
+    "HeaderGuestCast": "Guest Stars",
+    "LabelIsHearingImpaired": "For hearing impaired (SDH)",
+    "BackdropScreensaver": "Backdrop Screensaver",
+    "LogoScreensaver": "Logo Screensaver"
 }

From 145324b853edffe349ca9ef50e1c811d9cbd9a6e Mon Sep 17 00:00:00 2001
From: Mohammadreza Firoozeh <mfiroozeh.private@protonmail.com>
Date: Wed, 11 Oct 2023 08:54:35 +0000
Subject: [PATCH 33/45] Translated using Weblate (Persian) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/fa/

---
 src/strings/fa.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/strings/fa.json b/src/strings/fa.json
index e54ba0d23..1bf713557 100644
--- a/src/strings/fa.json
+++ b/src/strings/fa.json
@@ -1602,5 +1602,8 @@
     "IgnoreDtsHelp": "غیر فعال کردن این گزینه ممکن است برخی اشکالات را رفع کند، مثل نبودن صدا بر روی کانال هایی که جریان صدا و تصویر جداگانه دارند.",
     "LabelDummyChapterDurationHelp": "وقفه استخراج تصاویر فصل به ثانیه.",
     "HeaderDummyChapter": "تصاویر فصل",
-    "EnableAudioNormalization": "معمول سازی صوت"
+    "EnableAudioNormalization": "معمول سازی صوت",
+    "AllowCollectionManagement": "به این کاربر اجازه مدیریت مجموعه را بده",
+    "AllowSegmentDeletion": "تکه ها را پاک کن",
+    "AllowSegmentDeletionHelp": "پاک کردن تکه های قدیمی را بعد از فرستادن به کلاینت. این کار از ذخیره کل فایل transcode شده بر روی هارد جلوگیری می‌ کند. این تنها زمانی کار می کند که throttling فعال باشد. درصورت مشکل در هنگام پخش این ویژگی را غیرفعال کنید."
 }

From 12c8fa3449cc6b8f86afd49ce3ef82716059b7e7 Mon Sep 17 00:00:00 2001
From: nextlooper42 <nextlooper42@protonmail.com>
Date: Wed, 11 Oct 2023 07:51:34 +0000
Subject: [PATCH 34/45] Translated using Weblate (Slovak) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/sk/

---
 src/strings/sk.json | 91 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 65 insertions(+), 26 deletions(-)

diff --git a/src/strings/sk.json b/src/strings/sk.json
index a4fea164a..33b31f3ce 100644
--- a/src/strings/sk.json
+++ b/src/strings/sk.json
@@ -662,7 +662,7 @@
     "TabLatest": "Najnovšie pridané",
     "TabMusic": "Hudba",
     "TabMyPlugins": "Moje zásuvné moduly",
-    "TabNetworks": "TV Siete",
+    "TabNetworks": "Stanice",
     "TabNfoSettings": "NFO nastavenia",
     "TabNotifications": "Upozornenia",
     "TabOther": "Ostatné",
@@ -953,7 +953,7 @@
     "GuideProviderSelectListings": "Výber zobrazenia",
     "GroupVersions": "Skupinové verzie",
     "FetchingData": "Načítavanie dodatočných dát",
-    "Extras": "Extras",
+    "Extras": "Bonusové materiály",
     "FastForward": "Rýchlo dopredu",
     "FFmpegSavePathNotFound": "Nepodarilo sa nám nájsť FFmpeg pomocou vami zadanej cesty. FFprobe je taktiež potrebná a musí existovať v rovnakom priečinku. Tieto komponenty sú za normálnych okolností zabalené spolu do toho istého priečinku. Prosím, overte zadanú cestu a skúste to znova.",
     "ErrorSavingTvProvider": "Nastala chyba pri ukladaní sprostredkovateľa TV vysielania. Prosím, uistite sa, že je prístupný a skúste to znova.",
@@ -1081,11 +1081,11 @@
     "MessagePluginInstallDisclaimer": "UPOZORNENIE: Inštalácia zásuvného modulu tretej strany má určité riziká. Modul môže obsahovať nestabilný alebo škodlivý kód a môže sa kedykoľvek zmeniť. Inštalujte zásuvné moduly len od autorov, ktorým dôverujete a majte na vedomí ich potenciálne následky, vrátane kontaktovania externých služieb, dlhšieho prehľadávanie knižníc alebo dodatočných procesov na pozadí.",
     "MessagePluginConfigurationRequiresLocalAccess": "Pre konfiguráciu tohoto zásuvného modulu sa prihláste priamo na lokálny server.",
     "MessagePlayAccessRestricted": "Prehrávanie tohoto obsahu je aktuálne obmedzené. Prosím, kontaktujte svojho administrátora servera pre viac informácií.",
-    "MessagePasswordResetForUsers": "Nasledujúci používatelia si nechali obnoviť heslo. Teraz sa môžu prihlásiť s PIN kódmi, ktoré použili k pri obnove hesla.",
+    "MessagePasswordResetForUsers": "Nasledujúcim používateľom boli resetované heslá. Teraz sa môžu prihlásiť pomocou kódov PIN, ktoré boli použité na resetovanie.",
     "MessageNoServersAvailable": "Žiadne servery neboli nájdené pomocou automatického objavovania serverov.",
     "MessageNoMovieSuggestionsAvailable": "V súčasnosti nie sú k dispozícií žiadne filmové návrhy. Začnite pozerať a hodnotiť vaše filmy, potom sa sem vráťte pre vaše odporúčania.",
     "MessageNoCollectionsAvailable": "Kolekcie vám umožnia užiť si vlastné zoskupenia filmov, seriálov a albumov. Kliknite na tlačítko '+' pre začatie vytvárania kolekcie.",
-    "MessageImageTypeNotSelected": "Prosím, vyberte typ obrázku z rozbaľovacieho menu.",
+    "MessageImageTypeNotSelected": "Z rozbaľovacej ponuky vyberte typ obrázka.",
     "MessageForgotPasswordInNetworkRequired": "Prosím, skúste to znova vo vašej domácej sieti pre zahájenie procesu obnovy hesla.",
     "MessageForgotPasswordFileCreated": "Nasledujúci súbor bol vytvorený na vašom serveri a obsahuje inštrukcie, ako postupovať",
     "MessageDownloadQueued": "Sťahovanie zaradené do fronty.",
@@ -1095,7 +1095,7 @@
     "MessageCreateAccountAt": "Vytvoriť účet v {0}",
     "MessageContactAdminToResetPassword": "Prosím, kontaktujte vášho systémového administrátora k obnoveniu hesla.",
     "MessageConfirmRevokeApiKey": "Ste si istý, že chcete odňať tento API kľúč? Aplikácie pripojené k tomuto serveru budú rázne ukončené.",
-    "Menu": "Menu",
+    "Menu": "Ponuka",
     "MediaIsBeingConverted": "Médium sa konvertuje do formátu, ktorý je kompatibilný so zariadením, kde sa médium prehráva.",
     "MediaInfoSampleRate": "Vzorkovacia frekvencia",
     "MediaInfoRefFrames": "Ref snímky",
@@ -1397,7 +1397,7 @@
     "SelectServer": "Vybrať server",
     "Restart": "Reštartovať",
     "ResetPassword": "Obnoviť heslo",
-    "QuickConnectAuthorizeSuccess": "Požiadavka autorizovaná",
+    "QuickConnectAuthorizeSuccess": "Úspešne ste overili vaše zariadenie!",
     "QuickConnectAuthorizeFail": "Neznámy kód pre Rýchle pripojenie",
     "QuickConnectAuthorizeCode": "Zadajte kód {0} pre prihlásenie",
     "QuickConnectActivationSuccessful": "Úspešne aktivované",
@@ -1447,7 +1447,7 @@
     "AspectRatioCover": "Obal",
     "VideoAudio": "Video Zvuk",
     "Video": "Video",
-    "AllowTonemappingHelp": "Tone-mapping can transform the dynamic range of a video from HDR to SDR while maintaining image details and colors, which are very important information for representing the original scene. Currently works only with 10bit HDR10, HLG and DoVi videos. This requires the corresponding OpenCL or CUDA runtime.",
+    "AllowTonemappingHelp": "Mapovanie tónov umožňuje zmeniť dynamický rozsah videa z HDR na SDR bez straty dôležitých informácií pôvodného obrazu, ako sú detaily a farby. Táto funkcia v súčasnosti funguje len pre videá, ktoré obsahujú 10-bitové HDR10, HLG alebo Dolby Vision. Funkcia vyžaduje OpenCL alebo CUDA.",
     "LabelTonemappingThresholdHelp": "Parametre algoritmu mapovania tónov sú prispôsobené jednotlivým scénam. A tento prah sa používa na zistenie, či sa scéna zmenila alebo nie. Pokiaľ rozdiel medzi súčasnou priemernou svetlosťou snímku a priebežným priemerom tento prah prekročí, bude priemerná a vrchná svetlosť scény prepočítaná. Doporučené a predvolené hodnoty sú 0.8 a 0.2.",
     "LabelUDPPortRangeHelp": "Obmedzí UDP pripojenie Jellyfinu na tento rozsah. (Predvolená hodnota je 1024 - 65535).<br/> Poznámka: Niektoré funkcie vyžadujú určité porty, ktoré sa môžu nachádzať mimo tohto rozsahu.",
     "Remuxing": "Remuxovanie",
@@ -1508,7 +1508,7 @@
     "DisablePlugin": "Zakázať",
     "EnablePlugin": "Povoliť",
     "Framerate": "Snímková frekvencia",
-    "DirectPlayHelp": "Zdrojový súbor je s klientom plne kompatibilný a relácia ho preto prijíma bez dodatočných modifikácií.",
+    "DirectPlayHelp": "Zdrojový súbor je úplne kompatibilný s týmto klientom a relácia prijíma súbor bez úprav.",
     "HeaderContinueReading": "Pokračovať v čítaní",
     "LabelSyncPlaySettingsDescription": "Zmeniť nastavenia SyncPlay",
     "LabelSlowResponseTime": "Čas v milisekundách, ktorý je považovaný za pomalú odozvu",
@@ -1679,7 +1679,7 @@
     "OptionDateShowAdded": "Dátum pridania seriálu",
     "OptionDateEpisodeAdded": "Dátum pridania epizódy",
     "IgnoreDtsHelp": "Vypnutím sa môžu vyriešiť niektoré problémy, napr. chýbajúci zvuk pri kanáloch so samostatnými zvukovými a video streamami.",
-    "IgnoreDts": "Ignorovať DTS (dekódovacia časová pečiatka)",
+    "IgnoreDts": "Ignorovať DTS (dekódovacia časová značka)",
     "Unreleased": "Zatiaľ nevydané",
     "EnableCardLayout": "Zobraziť vizuálny CardBox",
     "MessageNoItemsAvailable": "Momentálne nie sú k dispozícii žiadne položky.",
@@ -1694,11 +1694,11 @@
     "LabelDummyChapterCount": "Limit",
     "LabelDummyChapterCountHelp": "Maximálny počet obrázkov kapitol, ktoré budú extrahované pre každý mediálny súbor.",
     "LabelChapterImageResolution": "Rozlíšenie",
-    "LabelChapterImageResolutionHelp": "Rozlíšenie extrahovaných obrázkov kapitol. Zmena tohto nastavenia nemá žiaden vplyv na existujúce kapitoly.",
+    "LabelChapterImageResolutionHelp": "Rozlíšenie extrahovaných obrázkov kapitol. Zmena tohto nastavenia nebude mať žiadny vplyv na existujúce fiktívne kapitoly.",
     "ResolutionMatchSource": "Rovnaké ako zdroj",
     "SaveRecordingNFOHelp": "Uloží metadáta z EPG položiek sprievodcu spolu s médiami.",
     "SaveRecordingImages": "Uložiť obrázky EPG nahrávky",
-    "LabelDummyChapterDurationHelp": "Interval medzi kapitolami. Vytváranie kapitol je možné vypnúť nastavením na 0. Zmena tohto nastavenia nemá žiaden vplyv na existujúce kapitoly.",
+    "LabelDummyChapterDurationHelp": "Interval medzi fiktívnymi kapitolami. Nastavením na 0 vypnete generovanie fiktívnych kapitol. Zmena tejto hodnoty nebude mať žiadny vplyv na existujúce fiktívne kapitoly.",
     "SaveRecordingNFO": "Uložiť metadáta nahrávky zo sprievodcu EPG do NFO",
     "SaveRecordingImagesHelp": "Uloží obrázky z EPG položiek sprievodcu spolu s médiami.",
     "HeaderRecordingMetadataSaving": "Metadáta nahrávok",
@@ -1706,36 +1706,75 @@
     "LabelEnableAudioVbr": "Povoliť kódovanie zvuku VBR",
     "HeaderPerformance": "Výkon",
     "AllowCollectionManagement": "Povoliť tomuto používateľovi spravovať kolekcie",
-    "LabelParallelImageEncodingLimitHelp": "Maximálny počet kódovania obrázkov, ktoré môžu naraz bežať. Nastavením na 0 bude limit nastavení podľa parametrov systému.",
-    "TonemappingModeHelp": "Vyberte režim mapovania tónu. Ak narazíte na preexponované svetlé miesta, skúste prepnúť na režim RGB.",
+    "LabelParallelImageEncodingLimitHelp": "Maximálny počet kódovaní obrazu, ktoré môžu bežať paralelne. Nastavením tejto hodnoty na 0 sa zvolí limit na základe špecifikácie vášho systému.",
+    "TonemappingModeHelp": "Vyberte režim mapovania tónov. Ak sa vyskytnú preexponované svetlé miesta, skúste prepnúť na režim RGB.",
     "Featurette": "Stredne dlhý film",
     "Short": "Krátky film",
-    "PasswordRequiredForAdmin": "Administrátorské úcty musia mať nastavené heslo.",
-    "LabelTonemappingMode": "Režim mapovania tónu",
-    "SubtitleCyan": "Tyrkysová",
-    "SubtitleGray": "Sivá",
+    "PasswordRequiredForAdmin": "Pre administrátorské účty sa vyžaduje heslo.",
+    "LabelTonemappingMode": "Režim mapovania tónov",
+    "SubtitleCyan": "Azúrová",
+    "SubtitleGray": "Šedá",
     "Studio": "Štúdio",
     "SubtitleBlue": "Modrá",
     "SubtitleBlack": "Čierna",
     "SubtitleGreen": "Zelená",
-    "SubtitleLightGray": "Svetlo sivá",
+    "SubtitleLightGray": "Svetlo šedá",
     "SubtitleRed": "Červená",
     "SubtitleYellow": "Žltá",
     "SubtitleWhite": "Biela",
     "Select": "Vybrať",
-    "EnableAudioNormalization": "Normalizácia hlasitosti",
+    "EnableAudioNormalization": "Normalizácia zvuku",
     "GetThePlugin": "Získať zásuvný modul",
     "LabelParallelImageEncodingLimit": "Limit paralelného kódovania obrázkov",
     "Notifications": "Upozornenia",
     "NotificationsMovedMessage": "Funkcia upozornení bola presunutá do zásuvného modulu Webhook.",
-    "PreferEmbeddedExtrasTitlesOverFileNames": "Preferovať vložené názvy pred názvami súborov pre doplnky",
-    "PreferEmbeddedExtrasTitlesOverFileNamesHelp": "Doplnky väčšinou majú totožní vložení názov ako nadriadená položka. Zaškrtnutím ich môžete napriek uprednostniť.",
-    "SubtitleMagenta": "Fialová",
-    "LabelEnableAudioVbrHelp": "Premenlivý bitový tok ponúka lepší pomer medzi kvalitou a priemerným bitovým tokom, ale niekdy môže spôsobiť dodatočné načítavanie alebo problémy s kompatibilitou.",
+    "PreferEmbeddedExtrasTitlesOverFileNames": "Preferovať vložené názvy pred názvami súborov pre bonusové materiály",
+    "PreferEmbeddedExtrasTitlesOverFileNamesHelp": "Bonusové materiály majú často rovnaký vložený názov ako nadradená položka, zaškrtnite túto možnosť, aby ste aj tak použili vložené názvy.",
+    "SubtitleMagenta": "Magenta",
+    "LabelEnableAudioVbrHelp": "Variabilný dátový tok ponúka lepší pomer kvality a priemerného dátového toku, ale v niektorých zriedkavých prípadoch môže spôsobiť problémy s vyrovnávacou pamäťou a kompatibilitou.",
     "MenuClose": "Zatvoriť ponuku",
-    "UserMenu": "Užívateľská ponuka",
+    "UserMenu": "Používateľská ponuka",
     "LabelEnableLUFSScan": "Povoliť skenovanie LUFS",
-    "LabelEnableLUFSScanHelp": "Povoliť skenovanie LUFS pre hudbu (Predlžuje skenovanie a je náročnejšie na výkon).",
+    "LabelEnableLUFSScanHelp": "Klienti môžu normalizovať prehrávanie zvuku, aby sa dosiahla rovnaká hlasitosť všetkých stôp. (Predlžuje prehľadávanie knižnice a je náročnejšie na výkon).",
     "MenuOpen": "Otvoriť ponuku",
-    "AllowSegmentDeletion": "Zmazať oddiel"
+    "AllowSegmentDeletion": "Zmazať segmenty",
+    "LogoScreensaver": "Šetrič obrazovky s logom",
+    "AllowAv1Encoding": "Povoliť kódovanie do formátu AV1",
+    "BackdropScreensaver": "Šetrič obrazovky s pozadím",
+    "PleaseConfirmRepositoryInstallation": "Kliknutím na tlačidlo OK potvrďte, že ste si prečítali vyššie uvedené informácie a chcete pokračovať v inštalácii repozitára zásuvných modulov.",
+    "UnknownError": "Došlo k neznámej chybe.",
+    "LabelIsHearingImpaired": "Titulky pre nepočujúcich",
+    "LabelSyncPlayNoGroups": "Nie sú k dispozícii žiadne skupiny",
+    "HeaderGuestCast": "Hosťujúce hviezdy",
+    "LabelDate": "Dátum",
+    "LabelLevel": "Úroveň",
+    "MessageRepositoryInstallDisclaimer": "UPOZORNENIE: Inštalácia repozitárov zásuvných modulov tretích strán so sebou prináša určité riziká. Môžu obsahovať nestabilný alebo škodlivý kód a môžu sa kedykoľvek zmeniť. Inštalujte len repozitáre od autorov, ktorým dôverujete.",
+    "HeaderEpisodesStatus": "Stav epizód",
+    "LabelSystem": "Systém",
+    "LogLevel.Trace": "Stopa",
+    "LogLevel.Debug": "Debug",
+    "GoHome": "Prejsť na domovskú obrazovku",
+    "LabelBackdropScreensaverInterval": "Interval šetriča obrazovky s pozadím",
+    "LabelBackdropScreensaverIntervalHelp": "Čas v sekundách medzi rôznymi pozadiami pri použití šetriča obrazovky s pozadím.",
+    "LogLevel.Information": "Informácia",
+    "LabelDeveloper": "Vývojár",
+    "LabelMediaDetails": "Podrobnosti o médiách",
+    "GridView": "Zobrazenie v mriežke",
+    "ListView": "Zobrazenie v zozname",
+    "LogLevel.Warning": "Upozornenie",
+    "LogLevel.Error": "Chyba",
+    "LogLevel.Critical": "Kritická",
+    "LogLevel.None": "Žiadny",
+    "EnableAudioNormalizationHelp": "Normalizácia zvuku pridá konštantné zosilnenie, aby sa priemer hlasitosti udržal na požadovanej úrovni (-18 dB).",
+    "HeaderConfirmRepositoryInstallation": "Potvrdiť inštaláciu repozitára zásuvných modulov",
+    "Unknown": "Neznámy",
+    "AiTranslated": "Preložené pomocou AI",
+    "MachineTranslated": "Strojovo preložené",
+    "ForeignPartsOnly": "Iba vynútené",
+    "HearingImpairedShort": "Titulky pre nepočujúcich",
+    "LabelThrottleDelaySeconds": "Obmedziť po",
+    "LabelSegmentKeepSeconds": "Doba ponechania segmentov",
+    "LabelThrottleDelaySecondsHelp": "Čas v sekundách, po ktorom bude prekódovanie obmedzené. Musí byť dostatočne veľký, aby mal klient v rezerve dostatočné množstvo prehrávaného súboru. Funguje len vtedy, ak je povolená funkcia Obmedziť prekódovanie.",
+    "AllowSegmentDeletionHelp": "Odstránenie starých segmentov po ich odoslaní klientovi. Tým sa zabráni tomu, aby sa celý prekódovaný súbor musel ukladať na disk. Funguje len so zapnutou funkciou Obmedziť prekódovanie. Ak sa vyskytnú problémy s prehrávaním, vypnite túto funkciu.",
+    "LabelSegmentKeepSecondsHelp": "Čas v sekundách, počas ktorého budú segmenty uložené. Musí byť dlhší ako je čas určený v \"Obmedziť po\". Funguje len vtedy, ak je povolená funkcia Zmazania segmentov."
 }

From 2536ddf8be92b2b3b19235512e06fb3a35621d43 Mon Sep 17 00:00:00 2001
From: arminius-smh <armin@sprejz.de>
Date: Wed, 11 Oct 2023 16:30:30 +0200
Subject: [PATCH 35/45] Remove more package caches from docker images

---
 deployment/Dockerfile.centos   | 3 ++-
 deployment/Dockerfile.debian   | 2 +-
 deployment/Dockerfile.fedora   | 3 ++-
 deployment/Dockerfile.portable | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/deployment/Dockerfile.centos b/deployment/Dockerfile.centos
index 39a8b1fbe..146956fe8 100644
--- a/deployment/Dockerfile.centos
+++ b/deployment/Dockerfile.centos
@@ -15,7 +15,8 @@ RUN yum update -y \
   && yum install -y rpmdevtools git autoconf automake glibc-devel gcc-c++ make \
   && yum install https://rpm.nodesource.com/pub_20.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y \
   && yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1 \
-  && yum clean all
+  && yum clean all \
+  && rm -rf /var/cache/dnf
 
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.centos /build.sh
diff --git a/deployment/Dockerfile.debian b/deployment/Dockerfile.debian
index 68c62cf79..76a907e48 100644
--- a/deployment/Dockerfile.debian
+++ b/deployment/Dockerfile.debian
@@ -18,7 +18,7 @@ RUN apt-get update \
   && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
   && apt-get update \
   && apt-get install -y nodejs \
-  && rm -rf /var/lib/apt/lists/*
+  && rm -rf /var/lib/apt/lists/* /var/cache/apt/archives/*
 
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.debian /build.sh
diff --git a/deployment/Dockerfile.fedora b/deployment/Dockerfile.fedora
index efcd602ce..499377a2d 100644
--- a/deployment/Dockerfile.fedora
+++ b/deployment/Dockerfile.fedora
@@ -13,7 +13,8 @@ ENV IS_DOCKER=YES
 RUN dnf update -y \
   && dnf install https://rpm.nodesource.com/pub_20.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y \
   && dnf install -y @buildsys-build rpmdevtools git dnf-plugins-core nodejs autoconf automake glibc-devel make --setopt=nodesource-nodejs.module_hotfixes=1 \
-  && dnf clean all
+  && dnf clean all \
+  && rm -rf /var/cache/dnf
 
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.fedora /build.sh
diff --git a/deployment/Dockerfile.portable b/deployment/Dockerfile.portable
index 4bdbe80a7..c06dfcd15 100644
--- a/deployment/Dockerfile.portable
+++ b/deployment/Dockerfile.portable
@@ -17,7 +17,7 @@ RUN apt-get update \
   && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
   && apt-get update \
   && apt-get install -y nodejs \
-  && rm -rf /var/lib/apt/lists/*
+  && rm -rf /var/lib/apt/lists/* /var/cache/apt/archives/*
 
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.portable /build.sh

From 8725edb9e412b667fe25a992583fd1c7444200ac Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 11 Oct 2023 20:00:29 +0300
Subject: [PATCH 36/45] use logical OR ( || )

---
 src/utils/items.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/items.ts b/src/utils/items.ts
index ce2efc8dc..b80c8ed05 100644
--- a/src/utils/items.ts
+++ b/src/utils/items.ts
@@ -107,7 +107,7 @@ export const getFieldsQuery = (
 
 export const getLimitQuery = () => {
     return {
-        limit: userSettings.libraryPageSize(undefined) ?? undefined
+        limit: userSettings.libraryPageSize(undefined) || undefined
     };
 };
 

From 0a7ec2e27032c7bfff5a35f61bdaba5d0dd7885b Mon Sep 17 00:00:00 2001
From: Nyanmisaka <799610810@qq.com>
Date: Thu, 12 Oct 2023 06:35:53 +0000
Subject: [PATCH 37/45] Translated using Weblate (Chinese (Simplified))
 Translation: Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/zh_Hans/

---
 src/strings/zh-cn.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/strings/zh-cn.json b/src/strings/zh-cn.json
index 47986abc8..92a998c75 100644
--- a/src/strings/zh-cn.json
+++ b/src/strings/zh-cn.json
@@ -1353,7 +1353,7 @@
     "LabelOpenclDevice": "OpenCL 设备",
     "LabelOpenclDeviceHelp": "这是用于色调映射的 OpenCL 设备。 点左边是平台号，右边是平台上的设备号。 默认值为 0.0。 需要支持OpenCL 硬件加速的 FFmpeg 应用程序。",
     "EnableTonemapping": "启用色调映射",
-    "AllowTonemappingHelp": "色调映射可以将视频的动态范围从HDR转换为SDR，同时保持图像细节和颜色，这些都是表示原始场景的非常重要的信息。目前只适用于10bit HDR10、HLG和DoVi视频。这需要相应的OpenCL或CUDA运行库。",
+    "AllowTonemappingHelp": "色调映射可以将视频的动态范围从 HDR 变换成 SDR，同时保持图像细节与颜色等对于表现原始场景非常重要的信息。目前仅对 10bit HDR10，HLG 和 DoVi 视频生效。此项需要对应的 OpenCL 或 CUDA 运行库。",
     "LabelTonemappingAlgorithm": "选择要使用的色调映射算法",
     "TonemappingAlgorithmHelp": "色调映射可以微调。如果你不是很熟悉这些选项，保持默认即可。建议值为 'BT.2390'。",
     "LabelTonemappingRange": "色调映射范围",
@@ -1764,7 +1764,7 @@
     "HeaderEpisodesStatus": "剧集状态",
     "LabelBackdropScreensaverInterval": "屏幕保护程序间隔",
     "LabelBackdropScreensaverIntervalHelp": "不同屏幕保护切换的时间间隔秒数。",
-    "AllowAv1Encoding": "允许以AV1格式进行编码",
+    "AllowAv1Encoding": "允许以 AV1 格式进行编码",
     "HeaderGuestCast": "特邀嘉宾",
     "GridView": "网格视图",
     "ListView": "列表视图",

From 71e431d562b481f3c8868e6d96f5d8c9d0755d2f Mon Sep 17 00:00:00 2001
From: Sergiu B <sergiu.bumbac@gmail.com>
Date: Thu, 12 Oct 2023 13:51:40 +0000
Subject: [PATCH 38/45] Translated using Weblate (Romanian) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/ro/

---
 src/strings/ro.json | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/strings/ro.json b/src/strings/ro.json
index ecd87b94b..b7b658d5a 100644
--- a/src/strings/ro.json
+++ b/src/strings/ro.json
@@ -1698,5 +1698,36 @@
     "SubtitleGreen": "Verde",
     "SubtitleWhite": "Alb",
     "SubtitleYellow": "Galben",
-    "VideoRangeTypeNotSupported": "Tipul intervalului video nu este suportat"
+    "VideoRangeTypeNotSupported": "Tipul intervalului video nu este suportat",
+    "Unreleased": "Indisponibil momentan",
+    "LabelIsHearingImpaired": "Pentru deficiente de auz (SDH)",
+    "PasswordRequiredForAdmin": "O parola este necesara pentru conturile de administrator.",
+    "Studio": "Studio",
+    "LabelSyncPlayNoGroups": "Niciun grup disponibil",
+    "Notifications": "Notificari",
+    "LabelDate": "Data",
+    "LabelLevel": "Nivel",
+    "LabelSystem": "Sistem",
+    "LabelMediaDetails": "Detalii media",
+    "LogLevel.Information": "Informatie",
+    "Unknown": "Necunoscut",
+    "GoHome": "Catre Ecranul Principal",
+    "UnknownError": "A aparut o eroare neprevazuta.",
+    "LogLevel.Warning": "Avertisment",
+    "LogLevel.Error": "Eroare",
+    "LogLevel.Critical": "Critic",
+    "LabelDeveloper": "Dezvoltator",
+    "AllowCollectionManagement": "Permite acestui utilizator sa administreze colectiile",
+    "ListView": "Vizualizare ca lista",
+    "MenuOpen": "Deschideti Meniul",
+    "MenuClose": "Inchidere Meniu",
+    "UserMenu": "Meniu Utilizator",
+    "Select": "Selecteaza",
+    "EnableAudioNormalizationHelp": "Normalizarea audio va adauga o crestere constanta pentru a mentine media la un nivel dorit (-18 decibeli).",
+    "AiTranslated": "Tradus de catre IA",
+    "AllowSegmentDeletion": "Sterge segmentele",
+    "AllowSegmentDeletionHelp": "Sterge segmentele vechi dupa ce acestea au fost trimise catre client. Previne necesitatea de a stoca intregul fisier transcodificat pe disc. Va functiona doar cu throttling activat. Opriti aceasta optiune daca intampinati probleme de redare.",
+    "LabelThrottleDelaySeconds": "Limitare dupa",
+    "LabelSegmentKeepSeconds": "Timpul pentru a pastra segmentele",
+    "EnableAudioNormalization": "Normalizare audio"
 }

From c25a1589263a3dfbfbf37c308a53bfecfdef85b7 Mon Sep 17 00:00:00 2001
From: Ignio-dev <omertorch@gmail.com>
Date: Fri, 13 Oct 2023 07:16:40 +0000
Subject: [PATCH 39/45] Translated using Weblate (Hebrew) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/he/

---
 src/strings/he.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/strings/he.json b/src/strings/he.json
index 089bbe949..3f8f52377 100644
--- a/src/strings/he.json
+++ b/src/strings/he.json
@@ -1202,5 +1202,13 @@
     "LabelKodiMetadataEnableExtraThumbsHelp": "תמונות שהורדו יכולות להישמר לשדות extrafanart ו-extrathumbs בו זמנית לצורך התאמה מירבית לסקינים של קודי.",
     "LabelKodiMetadataEnableExtraThumbs": "העתק extrafanart לשדה extrathumbs",
     "LabelGroupMoviesIntoCollectionsHelp": "כל הסרטים באוסף יופיעו בתור פריט מקובץ אחד ברשימות סרטים.",
-    "LabelHomeScreenSectionValue": "איזור {0} בעמוד הבית"
+    "LabelHomeScreenSectionValue": "איזור {0} בעמוד הבית",
+    "LabelExtractChaptersDuringLibraryScan": "חלץ את תמונות הפרק תוך כדי סריקת הספריה",
+    "LabelBackdropScreensaverInterval": "interval שומר המסך של הרקע",
+    "LabelEnableLUFSScan": "הפעלת סריקת LUFS",
+    "LabelEnableAutomaticPortMapHelp": "בצע port forward בצורה אוטומטית מפורטים בראוטר אל פורטים לוקאליים על השרת באמצעות UPnP. ייתכן שזה לא יעבוד עם דגמי נתב מסוימים או עם קונפיגורציות רשת מסוימות. שינויים לא יחולו עד לאחר הפעלה מחדש של השרת.",
+    "BackdropScreensaver": "שומר המסך של הרקע",
+    "LabelExtractChaptersDuringLibraryScanHelp": "צור תמונות פרקים כאשר סרטונים מיובאים תוך כדי סריקת הספריה. אחרת, הם יחולצו תוך כדי המשימה המתוזמנת העוסקת בתמונות הפרק, מה שיאפשר לסריקת הספריה הרגילה להסתיים מהר יותר.",
+    "LabelThrottleDelaySecondsHelp": "כמות הזמן בשניות שלאחריה המקודד יגיע ל-throttle. חייב להיות גדול מספיק כדי שהלקוח ישמור על buffer גדול מספיק. עובד רק אם throttling מופעל.",
+    "HeaderGuestCast": "כוכבים אורחים"
 }

From 216e01aa55f49eae9c290e2da961f801cca74e15 Mon Sep 17 00:00:00 2001
From: pgk83 <mobileshop.hu@gmail.com>
Date: Fri, 13 Oct 2023 14:30:17 +0000
Subject: [PATCH 40/45] Translated using Weblate (Hungarian) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/hu/

---
 src/strings/hu.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/strings/hu.json b/src/strings/hu.json
index 506c533c4..7d3ca7e3c 100644
--- a/src/strings/hu.json
+++ b/src/strings/hu.json
@@ -1627,7 +1627,7 @@
     "AllowEmbeddedSubtitlesAllowImageOption": "Kép engedélyezése",
     "AllowEmbeddedSubtitlesAllowNoneOption": "Összes tiltása",
     "AllowEmbeddedSubtitlesAllowAllOption": "Összes engedélyezése",
-    "AllowEmbeddedSubtitlesHelp": "Tiltsa le a médiatárolókba csomagolt feliratokat. Teljes könyvtárfrissítést igényel.",
+    "AllowEmbeddedSubtitlesHelp": "Letiltja a médiatárolókba csomagolt feliratokat. Teljes könyvtárfrissítést igényel.",
     "AllowEmbeddedSubtitles": "Különféle típusú beágyazott feliratok letiltása",
     "ShowParentImages": "Sorozatképek megjelenítése",
     "NextUpRewatching": "Újranézés",
@@ -1767,5 +1767,6 @@
     "AllowAv1Encoding": "AV1 kódolás engedélyezése",
     "GridView": "Rács Nézet",
     "ListView": "Lista Nézet",
-    "MachineTranslated": "Gépi fordítás"
+    "MachineTranslated": "Gépi fordítás",
+    "AiTranslated": "Gépi fordítás"
 }

From ae48e2a00737fd5e1f21b2e64f92e56ffd530427 Mon Sep 17 00:00:00 2001
From: Oskari Lavinto <olavinto@protonmail.com>
Date: Sat, 14 Oct 2023 15:31:13 +0000
Subject: [PATCH 41/45] Translated using Weblate (Finnish) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/fi/

---
 src/strings/fi.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/strings/fi.json b/src/strings/fi.json
index 4ecc91506..a2ba7d3d4 100644
--- a/src/strings/fi.json
+++ b/src/strings/fi.json
@@ -1437,7 +1437,7 @@
     "QuickConnectNotActive": "Pikayhdistys ei ole tällä palvelimella käytössä",
     "QuickConnectNotAvailable": "Pyydä palvelimen ylläpitoa ottamaan Pikayhdistys käyttöön",
     "QuickConnectInvalidCode": "Virheellinen Pikayhdistyskoodi",
-    "QuickConnectDescription": "Kirjautuaksesi Pikayhdistyksellä, valitse 'Pikayhdistys'-painike laitteelta, josta yrität kirjautua ja syötä alla oleva koodi.",
+    "QuickConnectDescription": "Kirjautuaksesi Pikayhdistyksellä, valitse 'Pikayhdistys' laitteelta, josta yrität kirjautua ja syötä näytettävä koodi alle.",
     "QuickConnectDeactivated": "Pikayhdistys katkaistiin ennen kirjautumispyynnön hyväksyntää",
     "QuickConnectAuthorizeSuccess": "Laitteesi on todennettu!",
     "QuickConnectAuthorizeFail": "Tuntematon Pikayhdistyskoodi",

From 386eaa0a69b45dda47637d0e7bec70947cf78cbe Mon Sep 17 00:00:00 2001
From: cbe <cbe@users.noreply.github.com>
Date: Sun, 8 Oct 2023 18:00:24 +0200
Subject: [PATCH 42/45] Fix language/subtitle switcher when using gamepad

Raising the event code `13` (Enter) should be a lot more stable since `0`
is just the default and not assigned to any actual key [1]. This keycode
also has been standardized early enough to change it at this crucial part
of gamepad handling in my opinion.

[1] https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Fixes #3755
---
 src/scripts/gamepadtokey.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/gamepadtokey.js b/src/scripts/gamepadtokey.js
index cfd6e3790..d1bd355bc 100644
--- a/src/scripts/gamepadtokey.js
+++ b/src/scripts/gamepadtokey.js
@@ -38,7 +38,7 @@ const _GAMEPAD_LEFT_THUMBSTICK_UP_KEY = 'GamepadLeftThumbStickUp';
 const _GAMEPAD_LEFT_THUMBSTICK_DOWN_KEY = 'GamepadLeftThumbStickDown';
 const _GAMEPAD_LEFT_THUMBSTICK_LEFT_KEY = 'GamepadLeftThumbStickLeft';
 const _GAMEPAD_LEFT_THUMBSTICK_RIGHT_KEY = 'GamepadLeftThumbStickRight';
-const _GAMEPAD_A_KEYCODE = 0;
+const _GAMEPAD_A_KEYCODE = 13;
 const _GAMEPAD_B_KEYCODE = 27;
 const _GAMEPAD_DPAD_UP_KEYCODE = 38;
 const _GAMEPAD_DPAD_DOWN_KEYCODE = 40;

From 4ecbe4df64ae5d4eb3f948d5c8a6d1321be81e22 Mon Sep 17 00:00:00 2001
From: forkh <dev@forkh.dev>
Date: Sun, 15 Oct 2023 21:01:31 +0000
Subject: [PATCH 43/45] Translated using Weblate (Faroese) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/fo/

---
 src/strings/fo.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/strings/fo.json b/src/strings/fo.json
index c98afcf76..70b1846ba 100644
--- a/src/strings/fo.json
+++ b/src/strings/fo.json
@@ -215,5 +215,11 @@
     "ValueSongCount": "{0} sangir",
     "ButtonForgotPassword": "Gloymt loyniorð",
     "ButtonSignIn": "Innrita",
-    "ButtonSignOut": "Útrita"
+    "ButtonSignOut": "Útrita",
+    "Channels": "Rásir",
+    "Favorites": "Yndis",
+    "Folders": "Mappur",
+    "Collections": "Søvn",
+    "Default": "Sjálvgildi",
+    "Genres": "Greinar"
 }

From 5bc595dc877cef5b3e1e9c86d24d5c9fd7b61271 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96ssur=20Ingi=20J=C3=B3nsson?= <pm@ossur.xyz>
Date: Mon, 16 Oct 2023 13:33:18 +0000
Subject: [PATCH 44/45] Translated using Weblate (Icelandic) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/is/

---
 src/strings/is-is.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/strings/is-is.json b/src/strings/is-is.json
index f8c32a37f..d2507cdc6 100644
--- a/src/strings/is-is.json
+++ b/src/strings/is-is.json
@@ -22,7 +22,7 @@
     "TabNotifications": "Tilkynningar",
     "WelcomeToProject": "Velkomin/n í Jellyfin!",
     "Anytime": "Hvenær sem er",
-    "Genres": "Tegundir",
+    "Genres": "Stefnur",
     "ButtonAddImage": "Bæta við ljósmynd",
     "ButtonAddServer": "Bæta við þjón",
     "ButtonAddUser": "Bæta við notenda",
@@ -39,7 +39,7 @@
     "PasswordMatchError": "Lykilorð og ítrekun lykilorðs þarf að passa.",
     "PasswordResetConfirmation": "Ertu viss um að þú viljir endursetja lykilorðið þitt?",
     "PinCodeResetConfirmation": "Ertu viss um að þú viljir endursetja PIN kóðann þinn?",
-    "HeaderAlbumArtists": "Höfundur plötu",
+    "HeaderAlbumArtists": "Listamaður á umslagi",
     "HeaderContinueWatching": "Halda áfram að horfa",
     "Favorites": "Uppáhalds",
     "Play": "Spila",
@@ -70,7 +70,7 @@
     "AroundTime": "Um {0}",
     "Art": "List",
     "AllComplexFormats": "Öll flókin form (ASS, SSA, VobSub, PGS, SUB, IDX, …)",
-    "Artists": "Listamaður",
+    "Artists": "Listamenn",
     "AsManyAsPossible": "Eins margir og mögulegt er",
     "Ascending": "Í vaxandi röð",
     "AspectRatio": "Skjáhlutfall",
@@ -89,7 +89,7 @@
     "Yes": "Já",
     "People": "Fólk",
     "PerfectMatch": "Passar fullkomlega",
-    "Channels": "Stöðvar",
+    "Channels": "Rásir",
     "Collections": "Söfn",
     "OptionUnairedEpisode": "Ófrumsýndir þættir",
     "OptionWeekdays": "Vikudagar",
@@ -121,7 +121,7 @@
     "PlayNext": "Spila næsta",
     "PlayNextEpisodeAutomatically": "Spila næsta þátt sjálfkrafa",
     "Played": "Spilað",
-    "Photos": "Myndir",
+    "Photos": "Ljósmyndir",
     "Movies": "Kvikmyndir",
     "HeaderProfileInformation": "Upplýsingar um prófíl",
     "HeaderPassword": "Lykilorð",
@@ -205,9 +205,9 @@
     "AlwaysPlaySubtitlesHelp": "Allir textar sem samsvara við túngumáli valið verða alltaf hlaðnir óháð hljóðmáls túngumáli.",
     "AllowedRemoteAddressesHelp": "Kommu aðskilinn listi yfir ip tölur eða ip-númeramát fyrir net sem mega fjartengjas. Ef þetta er autt eru allar fjartengingar leyfðar.",
     "AllowHWTranscodingHelp": "Leyfa viðtæki að umbreyta straumi í rauntíma.Þetta getur minnkað álag á þjón.",
-    "ValueSpecialEpisodeName": "Sérstakt - {0}",
-    "Shows": "Sýningar",
-    "Playlists": "Spilunarlisti",
+    "ValueSpecialEpisodeName": "Sérstaktur - {0}",
+    "Shows": "Þættir",
+    "Playlists": "Efnisskrár",
     "ButtonScanAllLibraries": "Skanna Öll Gagnasöfn",
     "AllLibraries": "Öll gagnasöfn",
     "RefreshMetadata": "Endurhlaða lýsigögn",

From 15269291d601e6d6c2bbb8945e89a43b953ad6e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96ssur=20Ingi=20J=C3=B3nsson?= <pm@ossur.xyz>
Date: Mon, 16 Oct 2023 15:40:45 +0000
Subject: [PATCH 45/45] Translated using Weblate (Icelandic) Translation:
 Jellyfin/Jellyfin Web Translate-URL:
 https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/is/

---
 src/strings/is-is.json | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/strings/is-is.json b/src/strings/is-is.json
index d2507cdc6..2199e9c30 100644
--- a/src/strings/is-is.json
+++ b/src/strings/is-is.json
@@ -209,7 +209,7 @@
     "Shows": "Þættir",
     "Playlists": "Efnisskrár",
     "ButtonScanAllLibraries": "Skanna Öll Gagnasöfn",
-    "AllLibraries": "Öll gagnasöfn",
+    "AllLibraries": "Öll efnissöfn",
     "RefreshMetadata": "Endurhlaða lýsigögn",
     "Refresh": "Endurhlaða",
     "ReleaseDate": "Útgáfudagur",
@@ -472,11 +472,12 @@
     "EnablePlugin": "Virkja",
     "Bwdif": "BWDIF",
     "DisablePlugin": "Slökkva",
-    "EnableAutoCast": "Setja sem Sjálfgefið",
+    "EnableAutoCast": "Setja sem sjálfgefið",
     "EnableDetailsBanner": "Upplýsingar borði",
     "DeleteAll": "Eyða Öllu",
     "ButtonBackspace": "Backspace",
     "ButtonUseQuickConnect": "Nota hraðtengingu",
     "Digital": "Stafrænt",
-    "DownloadAll": "Sækja allt"
+    "DownloadAll": "Sækja allt",
+    "AllowCollectionManagement": "Leyfa þessum notanda að sýsla með söfn"
 }