Increase amount of home sections from 7 to 10

jellyfin · Sep 21, 2024 · a269dcb · a269dcb
1 parent 2d5b0ea
commit a269dcb
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js
@@ -20,7 +20,7 @@ import toast from '../toast/toast';
 import template from './homeScreenSettings.template.html';
 import { LibraryTab } from '../../types/libraryTab.ts';
 
-const numConfigurableSections = 7;
+const numConfigurableSections = 10;
 
 function renderViews(page, user, result) {
     let folderHtml = '';
@@ -204,15 +204,15 @@ function renderViewOrder(context, user, result) {
 }
 
 function updateHomeSectionValues(context, userSettings) {
-    for (let i = 1; i <= 7; i++) {
+    for (let i = 1; i <= numConfigurableSections; i++) {
         const select = context.querySelector(`#selectHomeSection${i}`);
         const defaultValue = homeSections.getDefaultSection(i - 1);
 
-        const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]');
+        const option = select.querySelector(`option[value="${defaultValue}"]`) || select.querySelector('option[value=""]');
 
         const userValue = userSettings.get(`homesection${i - 1}`);
 
-        option.value = '';
+        if (option) option.value = '';
 
         if (userValue === defaultValue || !userValue) {
             select.value = '';
@@ -390,6 +390,9 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     userSettingsInstance.set('homesection4', context.querySelector('#selectHomeSection5').value);
     userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value);
     userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value);
+    userSettingsInstance.set('homesection7', context.querySelector('#selectHomeSection8').value);
+    userSettingsInstance.set('homesection8', context.querySelector('#selectHomeSection9').value);
+    userSettingsInstance.set('homesection9', context.querySelector('#selectHomeSection10').value);
 
     const selectLandings = context.querySelectorAll('.selectLanding');
     for (i = 0, length = selectLandings.length; i < length; i++) {

diff --git a/src/components/homeScreenSettings/homeScreenSettings.template.html b/src/components/homeScreenSettings/homeScreenSettings.template.html
@@ -115,6 +115,48 @@ <h2 class="sectionTitle">${Home}</h2>
                 <option value="none">${None}</option>
             </select>
         </div>
+        <div class="selectContainer">
+            <select is="emby-select" id="selectHomeSection8" label="{section8label}">
+                <option value="smalllibrarytiles">${HeaderMyMedia}</option>
+                <option value="librarybuttons">${HeaderMyMediaSmall}</option>
+                <option value="activerecordings">${HeaderActiveRecordings}</option>
+                <option value="resume">${HeaderContinueWatching}</option>
+                <option value="resumeaudio">${HeaderContinueListening}</option>
+                <option value="resumebook">${HeaderContinueReading}</option>
+                <option value="latestmedia">${HeaderLatestMedia}</option>
+                <option value="nextup">${NextUp}</option>
+                <option value="livetv">${LiveTV}</option>
+                <option value="none">${None}</option>
+            </select>
+        </div>
+        <div class="selectContainer">
+            <select is="emby-select" id="selectHomeSection9" label="{section9label}">
+                <option value="smalllibrarytiles">${HeaderMyMedia}</option>
+                <option value="librarybuttons">${HeaderMyMediaSmall}</option>
+                <option value="activerecordings">${HeaderActiveRecordings}</option>
+                <option value="resume">${HeaderContinueWatching}</option>
+                <option value="resumeaudio">${HeaderContinueListening}</option>
+                <option value="resumebook">${HeaderContinueReading}</option>
+                <option value="latestmedia">${HeaderLatestMedia}</option>
+                <option value="nextup">${NextUp}</option>
+                <option value="livetv">${LiveTV}</option>
+                <option value="none">${None}</option>
+            </select>
+        </div>
+        <div class="selectContainer">
+            <select is="emby-select" id="selectHomeSection10" label="{section10label}">
+                <option value="smalllibrarytiles">${HeaderMyMedia}</option>
+                <option value="librarybuttons">${HeaderMyMediaSmall}</option>
+                <option value="activerecordings">${HeaderActiveRecordings}</option>
+                <option value="resume">${HeaderContinueWatching}</option>
+                <option value="resumeaudio">${HeaderContinueListening}</option>
+                <option value="resumebook">${HeaderContinueReading}</option>
+                <option value="latestmedia">${HeaderLatestMedia}</option>
+                <option value="nextup">${NextUp}</option>
+                <option value="livetv">${LiveTV}</option>
+                <option value="none">${None}</option>
+            </select>
+        </div>
     </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">

diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
@@ -61,7 +61,7 @@ export function loadSections(elem, apiClient, user, userSettings) {
             let html = '';
 
             if (userViews.length) {
-                const userSectionCount = 7;
+                const userSectionCount = 10;
                 // 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++) {