From 6341a71fec882726bdffa4ed3460a6cbcf252d6e Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Fri, 21 Oct 2022 21:47:54 +0300
Subject: [PATCH] use single state and local storage

---
 src/components/filtermenu/filtermenu.js       |  47 +-
 .../filtermenu/filtermenu.template.html       |  26 +-
 src/components/sortmenu/sortmenu.js           |  21 +-
 src/components/viewSettings/viewSettings.js   |  25 +-
 .../viewSettings/viewSettings.template.html   |   8 +-
 src/controllers/list.js                       |  10 +-
 src/view/components/AlphaPickerContainer.tsx  |  22 +-
 src/view/components/Filter.tsx                |  25 +-
 src/view/components/ItemsContainer.tsx        |  90 +---
 src/view/components/Pagination.tsx            |  24 +-
 src/view/components/SelectView.tsx            |  35 +-
 src/view/components/Sort.tsx                  |  31 +-
 src/view/components/ViewItemsContainer.tsx    | 487 +++++++++---------
 src/view/components/interface.ts              |  68 ++-
 src/view/hook/useLocalStorage.tsx             |  20 +
 15 files changed, 458 insertions(+), 481 deletions(-)
 create mode 100644 src/view/hook/useLocalStorage.tsx

diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index 12f535a18d2..d6b85256a98 100644
--- 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
index 1a5545baa34..cacc69cf43a 100644
--- 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
index 5a61caaacec..394ced6dcb4 100644
--- 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
index d6cbf2e92b9..8dfa589aa2c 100644
--- 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
index 5989b3f83ec..ddee9536baf 100644
--- 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
index 09d398451fa..22b31f0c7b4 100644
--- 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
index 2d5d385f5fb..156ed7d8548 100644
--- 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;
diff --git a/src/view/components/Filter.tsx b/src/view/components/Filter.tsx
index 366e61f4d20..465fb8d614e 100644
--- a/src/view/components/Filter.tsx
+++ b/src/view/components/Filter.tsx
@@ -1,27 +1,23 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
-import { FiltersI, QueryI } from './interface';
+import { ViewSettingsI } from './interface';
 
 interface FilterProps {
     topParentId?: string | null;
     getItemTypes: () => string[];
-    getFilters: () => FiltersI;
-    getSettingsKey: () => string;
     getFilterMenuOptions: () => Record<string, never>;
     getVisibleFilters: () => string[];
-    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
-    reloadItems: () => void;
+    viewSettings: ViewSettingsI;
+    setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
 }
 
 const Filter: FC<FilterProps> = ({
     topParentId,
     getItemTypes,
-    getSettingsKey,
-    getFilters,
     getVisibleFilters,
     getFilterMenuOptions,
-    setQuery,
-    reloadItems
+    viewSettings,
+    setViewSettings
 }) => {
     const element = useRef<HTMLDivElement>(null);
 
@@ -29,19 +25,16 @@ const Filter: FC<FilterProps> = ({
         import('../../components/filtermenu/filtermenu').then(({default: FilterMenu}) => {
             const filterMenu = new FilterMenu();
             filterMenu.show({
-                settingsKey: getSettingsKey(),
-                settings: getFilters(),
+                settings: viewSettings,
                 visibleSettings: getVisibleFilters(),
                 parentId: topParentId,
                 itemTypes: getItemTypes(),
                 serverId: window.ApiClient.serverId(),
-                filterMenuOptions: getFilterMenuOptions()
-            }).then(() => {
-                setQuery({StartIndex: 0});
-                reloadItems();
+                filterMenuOptions: getFilterMenuOptions(),
+                setfilters: setViewSettings
             });
         });
-    }, [getSettingsKey, getFilters, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setQuery, reloadItems]);
+    }, [viewSettings, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setViewSettings]);
 
     useEffect(() => {
         const btnFilter = element.current?.querySelector('.btnFilter');
diff --git a/src/view/components/ItemsContainer.tsx b/src/view/components/ItemsContainer.tsx
index c7d81aa2784..d4ef2a68f11 100644
--- a/src/view/components/ItemsContainer.tsx
+++ b/src/view/components/ItemsContainer.tsx
@@ -1,95 +1,17 @@
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import React, { FC, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 
 import ItemsContainerElement from '../../elements/ItemsContainerElement';
-import cardBuilder from '../../components/cardbuilder/cardBuilder';
-import listview from '../../components/listview/listview';
-import globalize from '../../scripts/globalize';
 import imageLoader from '../../components/images/imageLoader';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
-import { CardOptionsI } from './interface';
+import { ViewSettingsI } from './interface';
 
 interface ItemsContainerI {
-    getViewSettings: () => {
-        showTitle: string | boolean;
-        cardLayout: string | boolean;
-        showYear: string | boolean;
-        imageType: string;
-        viewType: string;
-    };
-    getContext: () => string | null;
-    items?: BaseItemDto[] | null;
-    noItemsMessage?: string;
+   viewSettings: ViewSettingsI;
+   getItemsHtml: () => string
 }
 
-const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, items = [], noItemsMessage }) => {
+const ItemsContainer: FC<ItemsContainerI> = ({ viewSettings, getItemsHtml }) => {
     const element = useRef<HTMLDivElement>(null);
-    const viewsettings = getViewSettings();
-
-    const getCardOptions = useCallback(() => {
-        let shape;
-        let preferThumb;
-        let preferDisc;
-        let preferLogo;
-
-        if (viewsettings.imageType === 'banner') {
-            shape = 'banner';
-        } else if (viewsettings.imageType === 'disc') {
-            shape = 'square';
-            preferDisc = true;
-        } else if (viewsettings.imageType === 'logo') {
-            shape = 'backdrop';
-            preferLogo = true;
-        } else if (viewsettings.imageType === 'thumb') {
-            shape = 'backdrop';
-            preferThumb = true;
-        } else {
-            shape = 'autoVertical';
-        }
-
-        const cardOptions: CardOptionsI = {
-            shape: shape,
-            showTitle: viewsettings.showTitle,
-            showYear: viewsettings.showYear,
-            cardLayout: viewsettings.cardLayout,
-            centerText: true,
-            context: getContext(),
-            coverImage: true,
-            preferThumb: preferThumb,
-            preferDisc: preferDisc,
-            preferLogo: preferLogo,
-            overlayPlayButton: false,
-            overlayMoreButton: true,
-            overlayText: !viewsettings.showTitle
-        };
-
-        cardOptions.items = items;
-
-        return cardOptions;
-    }, [getContext, items, viewsettings.cardLayout, viewsettings.imageType, viewsettings.showTitle, viewsettings.showYear]);
-
-    const getItemsHtml = useCallback(() => {
-        const settings = getViewSettings();
-
-        let html = '';
-
-        if (settings.imageType === 'list') {
-            html = listview.getListViewHtml({
-                items: items,
-                context: getContext()});
-        } else {
-            html = cardBuilder.getCardsHtml(items, getCardOptions());
-        }
-
-        if (!items?.length) {
-            html += '<div class="noItemsMessage centerMessage">';
-            html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
-            html += '<p>' + globalize.translate(noItemsMessage) + '</p>';
-            html += '</div>';
-        }
-
-        return html;
-    }, [getCardOptions, getContext, getViewSettings, items, noItemsMessage]);
 
     useEffect(() => {
         const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement;
@@ -97,7 +19,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, item
         imageLoader.lazyChildren(itemsContainer);
     }, [getItemsHtml]);
 
-    const cssClass = viewsettings.imageType == 'List' ? 'vertical-list' : 'vertical-wrap';
+    const cssClass = viewSettings.imageType == 'list' ? 'vertical-list' : 'vertical-wrap';
 
     return (
         <div ref={element}>
diff --git a/src/view/components/Pagination.tsx b/src/view/components/Pagination.tsx
index c85f74272ef..fcbdf8252c2 100644
--- a/src/view/components/Pagination.tsx
+++ b/src/view/components/Pagination.tsx
@@ -3,18 +3,18 @@ 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 { QueryI } from './interface';
+import { ViewSettingsI } from './interface';
 
 interface PaginationProps {
-    query: QueryI;
-    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
+    viewSettings: ViewSettingsI;
+    setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
     itemsResult?: BaseItemDtoQueryResult;
 }
 
-const Pagination: FC<PaginationProps> = ({ query, setQuery, itemsResult = {} }) => {
+const Pagination: FC<PaginationProps> = ({ viewSettings, setViewSettings, itemsResult = {} }) => {
     const limit = userSettings.libraryPageSize(undefined);
     const totalRecordCount = itemsResult.TotalRecordCount || 0;
-    const startIndex = query.StartIndex || 0;
+    const startIndex = viewSettings.StartIndex || 0;
     const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
     const showControls = limit < totalRecordCount;
     const element = useRef<HTMLDivElement>(null);
@@ -22,16 +22,22 @@ const Pagination: FC<PaginationProps> = ({ query, setQuery, itemsResult = {} })
     const onNextPageClick = useCallback(() => {
         if (limit > 0) {
             const newIndex = startIndex + limit;
-            setQuery({StartIndex: newIndex});
+            setViewSettings((prevState) => ({
+                ...prevState,
+                StartIndex: newIndex
+            }));
         }
-    }, [limit, setQuery, startIndex]);
+    }, [limit, setViewSettings, startIndex]);
 
     const onPreviousPageClick = useCallback(() => {
         if (limit > 0) {
             const newIndex = Math.max(0, startIndex - limit);
-            setQuery({StartIndex: newIndex});
+            setViewSettings((prevState) => ({
+                ...prevState,
+                StartIndex: newIndex
+            }));
         }
-    }, [limit, setQuery, startIndex]);
+    }, [limit, setViewSettings, startIndex]);
 
     useEffect(() => {
         const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement;
diff --git a/src/view/components/SelectView.tsx b/src/view/components/SelectView.tsx
index 164bc2da67c..a6bef12d35d 100644
--- a/src/view/components/SelectView.tsx
+++ b/src/view/components/SelectView.tsx
@@ -1,37 +1,30 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
-import { QueryI } from './interface';
+import { ViewSettingsI } from './interface';
 
 interface SelectViewProps {
-    getSettingsKey: () => string;
     getVisibleViewSettings: () => string[];
-    getViewSettings: () => {
-        showTitle: string | boolean;
-        cardLayout: string | boolean;
-        showYear: string | boolean;
-        imageType: string;
-        viewType: string;
-    };
-    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
-    reloadItems: () => void;
+    viewSettings: ViewSettingsI
+    setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
 }
 
-const SelectView: FC<SelectViewProps> = ({ setQuery, getSettingsKey, getVisibleViewSettings, getViewSettings, reloadItems }) => {
+const SelectView: FC<SelectViewProps> = ({
+    getVisibleViewSettings,
+    viewSettings,
+    setViewSettings
+}) => {
     const element = useRef<HTMLDivElement>(null);
 
     const showViewSettingsMenu = useCallback(() => {
         import('../../components/viewSettings/viewSettings').then(({default: ViewSettings}) => {
-            const viewSettings = new ViewSettings();
-            viewSettings.show({
-                settingsKey: getSettingsKey(),
-                settings: getViewSettings(),
-                visibleSettings: getVisibleViewSettings()
-            }).then(() => {
-                setQuery({StartIndex: 0});
-                reloadItems();
+            const viewsettings = new ViewSettings();
+            viewsettings.show({
+                settings: viewSettings,
+                visibleSettings: getVisibleViewSettings(),
+                setviewsettings: setViewSettings
             });
         });
-    }, [getSettingsKey, getViewSettings, getVisibleViewSettings, reloadItems, setQuery]);
+    }, [getVisibleViewSettings, viewSettings, setViewSettings]);
 
     useEffect(() => {
         const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement;
diff --git a/src/view/components/Sort.tsx b/src/view/components/Sort.tsx
index d48d0f05604..b1a029d6587 100644
--- a/src/view/components/Sort.tsx
+++ b/src/view/components/Sort.tsx
@@ -1,37 +1,34 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
-import { QueryI } from './interface';
+import { ViewSettingsI } from './interface';
 
 interface SortProps {
     getSortMenuOptions: () => {
         name: string;
         value: string;
-    }[]
-    getSortValues: () => {
-        sortBy: string;
-        sortOrder: string;
-    }
-    getSettingsKey: () => string;
-    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
-    reloadItems: () => void;
+    }[];
+    viewSettings: ViewSettingsI
+    setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
 }
 
-const Sort: FC<SortProps> = ({ getSortMenuOptions, getSortValues, getSettingsKey, setQuery, reloadItems }) => {
+const Sort: FC<SortProps> = ({
+    getSortMenuOptions,
+    viewSettings,
+    //setSortValues,
+    setViewSettings
+}) => {
     const element = useRef<HTMLDivElement>(null);
 
     const showSortMenu = useCallback(() => {
         import('../../components/sortmenu/sortmenu').then(({default: SortMenu}) => {
             const sortMenu = new SortMenu();
             sortMenu.show({
-                settingsKey: getSettingsKey(),
-                settings: getSortValues(),
-                sortOptions: getSortMenuOptions()
-            }).then(() => {
-                setQuery({StartIndex: 0});
-                reloadItems();
+                settings: viewSettings,
+                sortOptions: getSortMenuOptions(),
+                setSortValues: setViewSettings
             });
         });
-    }, [getSettingsKey, getSortMenuOptions, getSortValues, reloadItems, setQuery]);
+    }, [getSortMenuOptions, viewSettings, setViewSettings]);
 
     useEffect(() => {
         const btnSort = element.current?.querySelector('.btnSort');
diff --git a/src/view/components/ViewItemsContainer.tsx b/src/view/components/ViewItemsContainer.tsx
index e604c248b9c..7000c3b16e2 100644
--- a/src/view/components/ViewItemsContainer.tsx
+++ b/src/view/components/ViewItemsContainer.tsx
@@ -12,7 +12,11 @@ import Shuffle from './Shuffle';
 import Sort from './Sort';
 import NewCollection from './NewCollection';
 import globalize from '../../scripts/globalize';
-import { QueryI } from './interface';
+import { CardOptionsI, QueryI, ViewSettingsI } from './interface';
+import ServerConnections from '../../components/ServerConnections';
+import { useLocalStorage } from '../hook/useLocalStorage';
+import listview from '../../components/listview/listview';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
 
 interface ViewItemsContainerProps {
     topParentId: string | null;
@@ -25,6 +29,99 @@ interface ViewItemsContainerProps {
     getNoItemsMessage: () => string;
 }
 
+const getDefaultSortBy = () => {
+    return 'SortName';
+};
+
+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 defaultViewSettingsValue: ViewSettingsI = {
+    showTitle: true,
+    showYear: true,
+    imageType: 'primary',
+    viewType: '',
+    cardLayout: true,
+    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,
@@ -35,256 +132,174 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
     getItemTypes,
     getNoItemsMessage
 }) => {
-    const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
-    const [ query, setQuery ] = useState<QueryI>({
-        StartIndex: 0
-    });
-
-    const element = useRef<HTMLDivElement>(null);
-
     const getSettingsKey = useCallback(() => {
         return `${topParentId} - ${getBasekey()}`;
     }, [getBasekey, topParentId]);
 
-    const getVisibleViewSettings = useCallback(() => {
-        return [
-            'showTitle',
-            'showYear',
-            'imageType',
-            'cardLayout'
-        ];
-    }, []);
-
-    const getViewSettings = useCallback(() => {
-        const basekey = getSettingsKey();
-        return {
-            showTitle: userSettings.get(basekey + '-showTitle', false) !== 'false',
-            showYear: userSettings.get(basekey + '-showYear', false) !== 'false',
-            imageType: userSettings.get(basekey + '-imageType', false) || 'primary',
-            viewType: userSettings.get(basekey + '-viewType', false) || 'images',
-            cardLayout: userSettings.get(basekey + '-cardLayout', false) !== 'false'
-        };
-    }, [getSettingsKey]);
-
-    const getDefaultSortBy = useCallback(() => {
-        return 'SortName';
-    }, []);
+    const [isLoading, setisLoading] = useState(false);
 
-    const getSortValues = useCallback(() => {
-        const basekey = getSettingsKey();
+    const [viewSettings, setViewSettings] = useLocalStorage<ViewSettingsI>(
+        getSettingsKey() + 'viewSettings',
+        defaultViewSettingsValue
+    );
 
-        return {
-            sortBy: userSettings.getFilter(basekey + '-sortby') || getDefaultSortBy(),
-            sortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
-        };
-    }, [getDefaultSortBy, getSettingsKey]);
-
-    const getFilters = useCallback(() => {
-        const basekey = getSettingsKey();
-        return {
-            IsPlayed: userSettings.getFilter(basekey + '-filter-IsPlayed') === 'true',
-            IsUnplayed: userSettings.getFilter(basekey + '-filter-IsUnplayed') === 'true',
-            IsFavorite: userSettings.getFilter(basekey + '-filter-IsFavorite') === 'true',
-            IsResumable: userSettings.getFilter(basekey + '-filter-IsResumable') === 'true',
-            Is4K: userSettings.getFilter(basekey + '-filter-Is4K') === 'true',
-            IsHD: userSettings.getFilter(basekey + '-filter-IsHD') === 'true',
-            IsSD: userSettings.getFilter(basekey + '-filter-IsSD') === 'true',
-            Is3D: userSettings.getFilter(basekey + '-filter-Is3D') === 'true',
-            VideoTypes: userSettings.getFilter(basekey + '-filter-VideoTypes'),
-            SeriesStatus: userSettings.getFilter(basekey + '-filter-SeriesStatus'),
-            HasSubtitles: userSettings.getFilter(basekey + '-filter-HasSubtitles'),
-            HasTrailer: userSettings.getFilter(basekey + '-filter-HasTrailer'),
-            HasSpecialFeature: userSettings.getFilter(basekey + '-filter-HasSpecialFeature'),
-            HasThemeSong: userSettings.getFilter(basekey + '-filter-HasThemeSong'),
-            HasThemeVideo: userSettings.getFilter(basekey + '-filter-HasThemeVideo'),
-            GenreIds: userSettings.getFilter(basekey + '-filter-GenreIds')
-        };
-    }, [getSettingsKey]);
-
-    const getFilterMenuOptions = useCallback(() => {
-        return {};
-    }, []);
-
-    const getVisibleFilters = useCallback(() => {
-        return [
-            'IsUnplayed',
-            'IsPlayed',
-            'IsFavorite',
-            'IsResumable',
-            'VideoType',
-            'HasSubtitles',
-            'HasTrailer',
-            'HasSpecialFeature',
-            'HasThemeSong',
-            'HasThemeVideo'
-        ];
-    }, []);
+    const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
 
-    const getQuery = useCallback(() => {
-        let fields = 'BasicSyncInfo,MediaSourceCount';
-        const viewsettings = getViewSettings();
-        if (viewsettings.imageType === 'primary') {
-            fields += ',PrimaryImageAspectRatio';
-        }
+    const element = useRef<HTMLDivElement>(null);
 
-        if (viewsettings.showYear) {
-            fields += ',ProductionYear';
+    const getContext = useCallback(() => {
+        const itemType = getItemTypes().join(',');
+        if (itemType === 'Movie' || itemType === 'BoxSet') {
+            return 'movies';
         }
 
-        const options: QueryI = {
-            SortBy: getSortValues().sortBy,
-            SortOrder: getSortValues().sortOrder,
-            IncludeItemTypes: getItemTypes().join(','),
-            Recursive: true,
-            Fields: fields,
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
-            Limit: userSettings.libraryPageSize(undefined),
-            StartIndex: query.StartIndex,
-            NameLessThan: query.NameLessThan,
-            NameStartsWith: query.NameStartsWith,
-            ParentId: topParentId
-        };
+        return null;
+    }, [getItemTypes]);
 
-        if (getBasekey() === 'favorites') {
-            options.IsFavorite = true;
+    const getCardOptions = useCallback(() => {
+        let shape;
+        let preferThumb;
+        let preferDisc;
+        let preferLogo;
+
+        if (viewSettings.imageType === 'banner') {
+            shape = 'banner';
+        } else if (viewSettings.imageType === 'disc') {
+            shape = 'square';
+            preferDisc = true;
+        } else if (viewSettings.imageType === 'logo') {
+            shape = 'backdrop';
+            preferLogo = true;
+        } else if (viewSettings.imageType === 'thumb') {
+            shape = 'backdrop';
+            preferThumb = true;
+        } else {
+            shape = 'autoVertical';
         }
 
-        return options;
-    }, [getViewSettings, getSortValues, getItemTypes, query.StartIndex, query.NameLessThan, query.NameStartsWith, topParentId, getBasekey]);
-
-    const getQueryWithFilters = useCallback(() => {
-        const query = getQuery();
-        const queryFilters = [];
-        let hasFilters;
+        const cardOptions: CardOptionsI = {
+            shape: shape,
+            showTitle: viewSettings.showTitle,
+            showYear: viewSettings.showYear,
+            cardLayout: viewSettings.cardLayout,
+            centerText: true,
+            context: getContext(),
+            coverImage: true,
+            preferThumb: preferThumb,
+            preferDisc: preferDisc,
+            preferLogo: preferLogo,
+            overlayPlayButton: false,
+            overlayMoreButton: true,
+            overlayText: !viewSettings.showTitle
+        };
 
-        const filters = getFilters();
+        cardOptions.items = itemsResult.Items || [];
+        console.log('cardOptions', cardOptions);
+        return cardOptions;
+    }, [getContext, itemsResult.Items, viewSettings.cardLayout, viewSettings.imageType, viewSettings.showTitle, viewSettings.showYear]);
 
-        if (filters.IsPlayed) {
-            queryFilters.push('IsPlayed');
-            hasFilters = true;
-        }
+    const getItemsHtml = useCallback(() => {
+        let html = '';
 
-        if (filters.IsUnplayed) {
-            queryFilters.push('IsUnplayed');
-            hasFilters = true;
+        if (viewSettings.imageType === 'list') {
+            html = listview.getListViewHtml({
+                items: itemsResult.Items || [],
+                context: getContext()
+            });
+        } else {
+            html = cardBuilder.getCardsHtml(itemsResult.Items || [], getCardOptions());
         }
 
-        if (filters.IsFavorite) {
-            queryFilters.push('IsFavorite');
-            hasFilters = true;
+        if (!itemsResult.Items?.length) {
+            html += '<div class="noItemsMessage centerMessage">';
+            html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
+            html += '<p>' + globalize.translate(getNoItemsMessage()) + '</p>';
+            html += '</div>';
         }
 
-        if (filters.IsResumable) {
-            queryFilters.push('IsResumable');
-            hasFilters = true;
-        }
+        return html;
+    }, [getCardOptions, getContext, itemsResult.Items, getNoItemsMessage, viewSettings.imageType]);
 
-        if (filters.VideoTypes) {
-            hasFilters = true;
-            query.VideoTypes = filters.VideoTypes;
-        }
+    const getQuery = useCallback(() => {
+        let fields = 'BasicSyncInfo,MediaSourceCount';
 
-        if (filters.GenreIds) {
-            hasFilters = true;
-            query.GenreIds = filters.GenreIds;
+        if (viewSettings.imageType === 'primary') {
+            fields += ',PrimaryImageAspectRatio';
         }
 
-        if (filters.Is4K) {
-            query.Is4K = true;
-            hasFilters = true;
+        if (viewSettings.showYear) {
+            fields += ',ProductionYear';
         }
 
-        if (filters.IsHD) {
-            query.IsHD = true;
-            hasFilters = true;
-        }
+        const queryFilters: string[] = [];
 
-        if (filters.IsSD) {
-            query.IsHD = false;
-            hasFilters = true;
+        if (viewSettings.IsPlayed) {
+            queryFilters.push('IsPlayed');
         }
 
-        if (filters.Is3D) {
-            query.Is3D = true;
-            hasFilters = true;
+        if (viewSettings.IsUnplayed) {
+            queryFilters.push('IsUnplayed');
         }
 
-        if (filters.HasSubtitles) {
-            query.HasSubtitles = true;
-            hasFilters = true;
+        if (viewSettings.IsFavorite) {
+            queryFilters.push('IsFavorite');
         }
 
-        if (filters.HasTrailer) {
-            query.HasTrailer = true;
-            hasFilters = true;
+        if (viewSettings.IsResumable) {
+            queryFilters.push('IsResumable');
         }
 
-        if (filters.HasSpecialFeature) {
-            query.HasSpecialFeature = true;
-            hasFilters = true;
-        }
+        let queryIsHD;
 
-        if (filters.HasThemeSong) {
-            query.HasThemeSong = true;
-            hasFilters = true;
+        if (viewSettings.IsHD) {
+            queryIsHD = true;
         }
 
-        if (filters.HasThemeVideo) {
-            query.HasThemeVideo = true;
-            hasFilters = true;
+        if (viewSettings.IsSD) {
+            queryIsHD = false;
         }
 
-        query.Filters = queryFilters.length ? queryFilters.join(',') : null;
-
-        return {
-            query: query,
-            hasFilters: hasFilters
+        const options: QueryI = {
+            SortBy: viewSettings.SortBy,
+            SortOrder: viewSettings.SortOrder,
+            IncludeItemTypes: getItemTypes().join(','),
+            Recursive: true,
+            Fields: fields,
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
+            Limit: userSettings.libraryPageSize(undefined),
+            IsFavorite: getBasekey() === 'favorites' ? true : null,
+            VideoTypes: viewSettings.VideoTypes,
+            GenreIds: viewSettings.GenreIds,
+            Is4K: viewSettings.Is4K ? true : null,
+            IsHD: queryIsHD,
+            Is3D: viewSettings.Is3D ? true : null,
+            HasSubtitles: viewSettings.HasSubtitles ? true : null,
+            HasTrailer: viewSettings.HasTrailer ? true : null,
+            HasSpecialFeature: viewSettings.HasSpecialFeature ? true : null,
+            HasThemeSong: viewSettings.HasThemeSong ? true : null,
+            HasThemeVideo: viewSettings.HasThemeVideo ? true : null,
+            Filters: queryFilters.length ? queryFilters.join(',') : null,
+            StartIndex: viewSettings.StartIndex,
+            NameLessThan: viewSettings.NameLessThan,
+            NameStartsWith: viewSettings.NameStartsWith,
+            ParentId: topParentId
         };
-    }, [getQuery, getFilters]);
-
-    const getSortMenuOptions = useCallback(() => {
-        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'
-        }];
-    }, []);
+        console.log('options', options);
+        return options;
+    }, [viewSettings.imageType, viewSettings.showYear, viewSettings.IsPlayed, viewSettings.IsUnplayed, viewSettings.IsFavorite, viewSettings.IsResumable, viewSettings.IsHD, viewSettings.IsSD, viewSettings.SortBy, viewSettings.SortOrder, viewSettings.VideoTypes, viewSettings.GenreIds, viewSettings.Is4K, viewSettings.Is3D, viewSettings.HasSubtitles, viewSettings.HasTrailer, viewSettings.HasSpecialFeature, viewSettings.HasThemeSong, viewSettings.HasThemeVideo, viewSettings.StartIndex, viewSettings.NameLessThan, viewSettings.NameStartsWith, getItemTypes, getBasekey, topParentId]);
 
-    const getContext = useCallback(() => {
-        const itemType = getItemTypes().join(',');
-        if (itemType === 'Movie' || itemType === 'BoxSet') {
-            return 'movies';
-        }
+    const fetchData = useCallback(() => {
+        loading.show();
 
-        return null;
-    }, [getItemTypes]);
+        const apiClient = ServerConnections.getApiClient(window.ApiClient.serverId());
+        return apiClient.getItems(
+            apiClient.getCurrentUserId(),
+            {
+                ...getQuery()
+            }
+        );
+    }, [getQuery]);
 
     const reloadItems = useCallback(() => {
         const page = element.current;
@@ -293,19 +308,19 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
             console.error('Unexpected null reference');
             return;
         }
-        loading.show();
-        const query = getQueryWithFilters().query;
-        window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
+        setisLoading(false);
+        fetchData().then((result) => {
             setItemsResult(result);
-            window.scrollTo(0, 0);
 
-            loading.hide();
+            window.scrollTo(0, 0);
 
             import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
                 autoFocuser.autoFocus(page);
             });
+            loading.hide();
+            setisLoading(true);
         });
-    }, [getQueryWithFilters]);
+    }, [fetchData]);
 
     useEffect(() => {
         reloadItems();
@@ -316,37 +331,31 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
             <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}
-                    query={query}
-                    setQuery={setQuery}
+                    viewSettings={viewSettings}
+                    setViewSettings={setViewSettings}
                 />
 
                 {isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
 
-                {<SelectView
-                    getSettingsKey={getSettingsKey}
+                <SelectView
                     getVisibleViewSettings={getVisibleViewSettings}
-                    getViewSettings={getViewSettings}
-                    setQuery={setQuery}
-                    reloadItems={reloadItems}
-                />}
+                    viewSettings={viewSettings}
+                    setViewSettings={setViewSettings}
+                />
 
                 <Sort
                     getSortMenuOptions={getSortMenuOptions}
-                    getSortValues={getSortValues}
-                    getSettingsKey={getSettingsKey}
-                    setQuery={setQuery}
-                    reloadItems={reloadItems}
+                    viewSettings={viewSettings}
+                    setViewSettings={setViewSettings}
                 />
 
                 {isBtnFilterEnabled && <Filter
                     topParentId={topParentId}
-                    getFilters={getFilters}
-                    getSettingsKey={getSettingsKey}
                     getItemTypes={getItemTypes}
                     getVisibleFilters={getVisibleFilters}
                     getFilterMenuOptions={getFilterMenuOptions}
-                    setQuery={setQuery}
-                    reloadItems={reloadItems}
+                    viewSettings={viewSettings}
+                    setViewSettings={setViewSettings}
                 />}
 
                 {isBtnNewCollectionEnabled && <NewCollection />}
@@ -354,22 +363,20 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
             </div>
 
             {isAlphaPickerEnabled && <AlphaPickerContainer
-                getQuery={getQuery}
-                setQuery={setQuery}
+                viewSettings={viewSettings}
+                setViewSettings={setViewSettings}
             />}
 
-            <ItemsContainer
-                getViewSettings={getViewSettings}
-                getContext={getContext}
-                items={itemsResult?.Items}
-                noItemsMessage={getNoItemsMessage()}
-            />
+            {isLoading && <ItemsContainer
+                viewSettings={viewSettings}
+                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}
-                    query={query}
-                    setQuery={setQuery}
+                    viewSettings={viewSettings}
+                    setViewSettings={setViewSettings}
                 />
             </div>
         </div>
diff --git a/src/view/components/interface.ts b/src/view/components/interface.ts
index dc971d07759..5946d2517cd 100644
--- a/src/view/components/interface.ts
+++ b/src/view/components/interface.ts
@@ -1,54 +1,48 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 
-export interface QueryI {
-    SortBy?: string;
-    SortOrder?: string;
+export interface QueryI extends ViewSettingsI {
     IncludeItemTypes?: string;
     Recursive?: boolean;
-    Fields?: string;
+    Fields?: string | null;
     ImageTypeLimit?: number;
     EnableTotalRecordCount?: boolean;
     EnableImageTypes?: string;
     StartIndex?: number;
     ParentId?: string | null;
-    IsFavorite?: boolean;
-    IsMissing?: boolean;
+    IsMissing?: boolean | null;
     Limit?:number;
-    NameStartsWithOrGreater?: string;
-    NameLessThan?: string;
-    NameStartsWith?: string | null;
-    VideoTypes?: string;
-    GenreIds?: string;
-    Is4K?: boolean;
-    IsHD?: boolean;
-    Is3D?: boolean;
-    HasSubtitles?: boolean;
-    HasTrailer?: boolean;
-    HasSpecialFeature?: boolean;
-    HasThemeSong?: boolean;
-    HasThemeVideo?: boolean;
     Filters?: string | null;
 }
 
-export interface FiltersI {
-    IsPlayed: boolean;
-    IsUnplayed: boolean;
-    IsFavorite: boolean;
-    IsResumable: boolean;
-    Is4K: boolean;
-    IsHD: boolean;
-    IsSD: boolean;
-    Is3D: boolean;
-    VideoTypes: string;
-    SeriesStatus: string;
-    HasSubtitles: string;
-    HasTrailer: string;
-    HasSpecialFeature: string;
-    HasThemeSong: string;
-    HasThemeVideo: string;
-    GenreIds: string;
+export interface ViewSettingsI {
+    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;
 }
-
 export interface CardOptionsI {
     itemsContainer?: HTMLElement | null;
     parentContainer?: HTMLElement | null;
diff --git a/src/view/hook/useLocalStorage.tsx b/src/view/hook/useLocalStorage.tsx
new file mode 100644
index 00000000000..779147039c6
--- /dev/null
+++ b/src/view/hook/useLocalStorage.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T | (() => T)) {
+    const [value, setValue] = useState<T>(() => {
+        const storedValues = localStorage.getItem(key);
+        if (storedValues != null) return JSON.parse(storedValues);
+
+        if (typeof initialValue === 'function') {
+            return (initialValue as () => T)();
+        } else {
+            return initialValue;
+        }
+    });
+
+    useEffect(() => {
+        localStorage.setItem(key, JSON.stringify(value));
+    }, [key, value]);
+
+    return [value, setValue] as [typeof value, typeof setValue];
+}