use single state and local storage

jellyfin · Oct 26, 2022 · 6341a71 · 6341a71
1 parent f40c565
commit 6341a71
Show file tree

Hide file tree

Showing 15 changed files with 458 additions and 481 deletions.
diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
@@ -102,15 +102,8 @@ function onInputCommand(e) {
             break;
     }
 }
-function saveValues(context, settings, settingsKey) {
+function saveValues(context, settings, settingsKey, setfilters) {
     let 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]);
-        } else {
-            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
-        }
-    }
 
     // Video type
     const videoTypes = [];
@@ -121,7 +114,6 @@ function saveValues(context, settings, settingsKey) {
             videoTypes.push(elems[i].getAttribute('data-filter'));
         }
     }
-    userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
 
     // Series status
     const seriesStatuses = [];
@@ -132,7 +124,6 @@ function saveValues(context, settings, settingsKey) {
             seriesStatuses.push(elems[i].getAttribute('data-filter'));
         }
     }
-    userSettings.setFilter(`${settingsKey}-filter-SeriesStatus`, seriesStatuses.join(','));
 
     // Genres
     const genres = [];
@@ -143,7 +134,39 @@ function saveValues(context, settings, settingsKey) {
             genres.push(elems[i].getAttribute('data-filter'));
         }
     }
-    userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
+
+    if (setfilters) {
+        setfilters((prevState) => ({
+            ...prevState,
+            StartIndex: 0,
+            IsPlayed: context.querySelector('.chkPlayed').checked,
+            IsUnplayed: context.querySelector('.chkUnplayed').checked,
+            IsFavorite: context.querySelector('.chkFavorite').checked,
+            IsResumable: context.querySelector('.chkResumable').checked,
+            Is4K: context.querySelector('.chk4KFilter').checked,
+            IsHD: context.querySelector('.chkHDFilter').checked,
+            IsSD: context.querySelector('.chkSDFilter').checked,
+            Is3D: context.querySelector('.chk3DFilter').checked,
+            VideoTypes: videoTypes.join(','),
+            SeriesStatus: seriesStatuses.join(','),
+            HasSubtitles: context.querySelector('.chkSubtitle').checked,
+            HasTrailer: context.querySelector('.chkTrailer').checked,
+            HasSpecialFeature: context.querySelector('.chkSpecialFeature').checked,
+            HasThemeSong: context.querySelector('.chkThemeSong').checked,
+            HasThemeVideo: context.querySelector('.chkThemeVideo').checked,
+            GenreIds: genres.join(',')
+        }));
+    } else {
+        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]);
+            } else {
+                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
+            }
+        }
+
+        userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
+    }
 }
 function bindCheckboxInput(context, on) {
     const elems = context.querySelectorAll('.checkboxList-verticalwrap');
@@ -275,7 +298,7 @@ class FilterMenu {
 
                 if (submitted) {
                     //if (!options.onChange) {
-                    saveValues(dlg, options.settings, options.settingsKey);
+                    saveValues(dlg, options.settings, options.settingsKey, options.setfilters);
                     return resolve();
                     //}
                 }

diff --git a/src/components/filtermenu/filtermenu.template.html b/src/components/filtermenu/filtermenu.template.html
@@ -5,19 +5,19 @@
             <div class="verticalSection verticalSection-extrabottompadding basicFilterSection focuscontainer-x" style="margin-top:2em;">
                 <div class="checkboxList checkboxList-verticalwrap">
                     <label class="viewSetting simpleFilter" data-settingname="IsUnplayed">
-                        <input type="checkbox" is="emby-checkbox" />
+                        <input type="checkbox" is="emby-checkbox" class="chkUnplayed" />
                         <span>${Unplayed}</span>
                     </label>
                     <label class="viewSetting simpleFilter" data-settingname="IsPlayed">
-                        <input type="checkbox" is="emby-checkbox" />
+                        <input type="checkbox" is="emby-checkbox" class="chkPlayed" />
                         <span>${Played}</span>
                     </label>
                     <label class="viewSetting simpleFilter" data-settingname="IsFavorite">
-                        <input type="checkbox" is="emby-checkbox" />
+                        <input type="checkbox" is="emby-checkbox" class="chkFavorite" />
                         <span>${Favorite}</span>
                     </label>
                     <label class="viewSetting simpleFilter" data-settingname="IsResumable">
-                        <input type="checkbox" is="emby-checkbox" />
+                        <input type="checkbox" is="emby-checkbox" class="chkResumable" />
                         <span>${ContinueWatching}</span>
                     </label>
                 </div>
@@ -49,22 +49,22 @@ <h2 class="checkboxListLabel">${HeaderVideoType}</h2>
                 <div class="checkboxList checkboxList-verticalwrap">
 
                     <label>
-                        <input type="checkbox" is="emby-checkbox" class="simpleFilter" data-settingname="IsHD" />
+                        <input type="checkbox" is="emby-checkbox" class="simpleFilter chkHDFilter" data-settingname="IsHD" />
                         <span>HD</span>
                     </label>
 
                     <label>
-                        <input type="checkbox" is="emby-checkbox" class="simpleFilter" data-settingname="Is4K" />
+                        <input type="checkbox" is="emby-checkbox" class="simpleFilter chk4KFilter" data-settingname="Is4K" />
                         <span>4K</span>
                     </label>
 
                     <label>
-                        <input type="checkbox" is="emby-checkbox" class="simpleFilter" data-settingname="IsSD" />
+                        <input type="checkbox" is="emby-checkbox" class="simpleFilter chkSDFilter" data-settingname="IsSD" />
                         <span>SD</span>
                     </label>
 
                     <label>
-                        <input type="checkbox" is="emby-checkbox" class="simpleFilter" data-settingname="Is3D" />
+                        <input type="checkbox" is="emby-checkbox" class="simpleFilter chk3DFilter" data-settingname="Is3D" />
                         <span>3D</span>
                     </label>
                     <label>
@@ -82,23 +82,23 @@ <h2 class="checkboxListLabel">${HeaderVideoType}</h2>
                 <h2 class="checkboxListLabel">${Features}</h2>
                 <div class="checkboxList checkboxList-verticalwrap">
                     <label class="viewSetting simpleFilter" data-settingname="HasSubtitles">
-                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
+                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkSubtitle" />
                         <span>${Subtitles}</span>
                     </label>
                     <label class="viewSetting simpleFilter" data-settingname="HasTrailer">
-                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
+                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkTrailer" />
                         <span>${Trailers}</span>
                     </label>
                     <label class="viewSetting simpleFilter" data-settingname="HasSpecialFeature">
-                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
+                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkSpecialFeature" />
                         <span>${Extras}</span>
                     </label>
                     <label class="viewSetting simpleFilter" data-settingname="HasThemeSong">
-                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
+                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkThemeSong" />
                         <span>${ThemeSongs}</span>
                     </label>
                     <label class="viewSetting simpleFilter" data-settingname="HasThemeVideo">
-                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
+                        <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkThemeVideo" />
                         <span>${ThemeVideos}</span>
                     </label>
                 </div>

diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js
@@ -18,8 +18,8 @@ function onSubmit(e) {
 function initEditor(context, settings) {
     context.querySelector('form').addEventListener('submit', onSubmit);
 
-    context.querySelector('.selectSortOrder').value = settings.sortOrder;
-    context.querySelector('.selectSortBy').value = settings.sortBy;
+    context.querySelector('.selectSortOrder').value = settings.SortOrder;
+    context.querySelector('.selectSortBy').value = settings.SortBy;
 }
 
 function centerFocus(elem, horiz, on) {
@@ -37,9 +37,18 @@ function fillSortBy(context, options) {
     }).join('');
 }
 
-function saveValues(context, settingsKey) {
-    userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
-    userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
+function saveValues(context, settingsKey, setSortValues) {
+    if (setSortValues) {
+        setSortValues((prevState) => ({
+            ...prevState,
+            StartIndex: 0,
+            SortBy: context.querySelector('.selectSortBy').value,
+            SortOrder: context.querySelector('.selectSortOrder').value
+        }));
+    } else {
+        userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
+        userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
+    }
 }
 
 class SortMenu {
@@ -95,7 +104,7 @@ class SortMenu {
                 }
 
                 if (submitted) {
-                    saveValues(dlg, options.settingsKey);
+                    saveValues(dlg, options.settingsKey, options.setSortValues);
                     resolve();
                     return;
                 }

diff --git a/src/components/viewSettings/viewSettings.js b/src/components/viewSettings/viewSettings.js
@@ -29,13 +29,24 @@ function initEditor(context, settings) {
     context.querySelector('.selectImageType').value = settings.imageType || 'primary';
 }
 
-function saveValues(context, settings, settingsKey) {
-    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
-    for (const elem of elems) {
-        userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
-    }
+function saveValues(context, settings, settingsKey, setviewsettings) {
+    if (setviewsettings) {
+        setviewsettings((prevState) => ({
+            ...prevState,
+            StartIndex: 0,
+            imageType: context.querySelector('.selectImageType').value,
+            showTitle: context.querySelector('.chkShowTitle').checked || false,
+            showYear: context.querySelector('.chkShowYear').checked || false,
+            cardLayout: context.querySelector('.chkEnableCardLayout').checked || false
+        }));
+    } else {
+        const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+        for (const elem of elems) {
+            userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
+        }
 
-    userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
+        userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
+    }
 }
 
 function centerFocus(elem, horiz, on) {
@@ -126,7 +137,7 @@ class ViewSettings {
                 }
 
                 if (submitted) {
-                    saveValues(dlg, options.settings, options.settingsKey);
+                    saveValues(dlg, options.settings, options.settingsKey, options.setviewsettings);
                     return resolve();
                 }
 

diff --git a/src/components/viewSettings/viewSettings.template.html b/src/components/viewSettings/viewSettings.template.html
@@ -17,28 +17,28 @@
 
                 <div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide chkTitleContainer" data-settingname="showTitle">
                     <label>
-                        <input is="emby-checkbox" type="checkbox" />
+                        <input is="emby-checkbox" type="checkbox" class="chkShowTitle" />
                         <span>${ShowTitle}</span>
                     </label>
                 </div>
 
                 <div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide chkYearContainer" data-settingname="showYear">
                     <label>
-                        <input is="emby-checkbox" type="checkbox" />
+                        <input is="emby-checkbox" type="checkbox" class="chkShowYear" />
                         <span>${ShowYear}</span>
                     </label>
                 </div>
 
                 <div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide" data-settingname="groupBySeries">
                     <label>
-                        <input is="emby-checkbox" type="checkbox" />
+                        <input is="emby-checkbox" type="checkbox" class="chkGroupBySeries" />
                         <span>${GroupBySeries}</span>
                     </label>
                 </div>
 
                 <div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide chkCardLayoutContainer" data-settingname="cardLayout">
                     <label>
-                        <input is="emby-checkbox" type="checkbox" />
+                        <input is="emby-checkbox" type="checkbox" class="chkEnableCardLayout" />
                         <span>${EnableCardLayout}</span>
                     </label>
                 </div>

diff --git a/src/controllers/list.js b/src/controllers/list.js
@@ -76,8 +76,8 @@ import LibraryMenu from '../scripts/libraryMenu';
         const sortValues = instance.getSortValues();
 
         if (!query.SortBy) {
-            query.SortBy = sortValues.sortBy;
-            query.SortOrder = sortValues.sortOrder;
+            query.SortBy = sortValues.SortBy;
+            query.SortOrder = sortValues.SortOrder;
         }
 
         query.Fields = query.Fields ? query.Fields + ',PrimaryImageAspectRatio' : 'PrimaryImageAspectRatio';
@@ -202,7 +202,7 @@ import LibraryMenu from '../scripts/libraryMenu';
             const btnSortIcon = instance.btnSortIcon;
 
             if (btnSortIcon) {
-                setSortButtonIcon(btnSortIcon, values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
+                setSortButtonIcon(btnSortIcon, values.SortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
             }
         }
     }
@@ -963,8 +963,8 @@ class ItemsView {
     getSortValues() {
         const basekey = this.getSettingsKey();
         return {
-            sortBy: userSettings.getFilter(basekey + '-sortby') || this.getDefaultSortBy(),
-            sortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
+            SortBy: userSettings.getFilter(basekey + '-sortby') || this.getDefaultSortBy(),
+            SortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
         };
     }
 

diff --git a/src/view/components/AlphaPickerContainer.tsx b/src/view/components/AlphaPickerContainer.tsx
@@ -1,30 +1,32 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import AlphaPicker from '../../components/alphaPicker/alphaPicker';
-import { QueryI } from './interface';
+import { ViewSettingsI } from './interface';
 
 interface AlphaPickerContainerProps {
-    getQuery: () => QueryI;
-    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
+    viewSettings: ViewSettingsI
+    setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
 }
 
-const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ getQuery, setQuery }) => {
+const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewSettings, setViewSettings }) => {
     const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
     const element = useRef<HTMLDivElement>(null);
-    const query = getQuery();
 
-    alphaPicker?.updateControls(query);
+    alphaPicker?.updateControls(viewSettings);
 
     const onAlphaPickerChange = useCallback((e) => {
         const newValue = (e as CustomEvent).detail.value;
-        let updatedValue;
+        let updatedValue: React.SetStateAction<ViewSettingsI>;
         if (newValue === '#') {
             updatedValue = {NameLessThan: 'A'};
         } else {
             updatedValue = {NameStartsWith: newValue};
         }
-
-        setQuery({StartIndex: 0, ...updatedValue});
-    }, [setQuery]);
+        setViewSettings((prevState) => ({
+            ...prevState,
+            StartIndex: 0,
+            ...updatedValue
+        }));
+    }, [setViewSettings]);
 
     useEffect(() => {
         const alphaPickerElement = element.current;