use sortmenu instead of libraryBrowse .showSortMenu

src/view/components/ItemsContainer.tsx

@@ -1,5 +1,5 @@
 import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
-import React, { FunctionComponent, useEffect, useRef } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 
 import ItemsContainerElement from '../../elements/ItemsContainerElement';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
@@ -9,7 +9,7 @@ import imageLoader from '../../components/images/imageLoader';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import { QueryI } from './interface';
 
-type ItemsContainerProps = {
+interface ItemsContainerI {
     getCurrentViewStyle: () => string;
     query: QueryI;
     getContext: () => string | null;
@@ -17,7 +17,7 @@ type ItemsContainerProps = {
     noItemsMessage?: string;
 }
 
-const ItemsContainer: FunctionComponent<ItemsContainerProps> = ({ getCurrentViewStyle, query, getContext, items = [], noItemsMessage }: ItemsContainerProps) => {
+const ItemsContainer: FC<ItemsContainerI> = ({ getCurrentViewStyle, query, getContext, items = [], noItemsMessage }) => {
     const element = useRef<HTMLDivElement>(null);
     const viewStyle = getCurrentViewStyle();
 

src/view/components/Sort.tsx

@@ -1,40 +1,44 @@
-import React, { FC, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
-import libraryBrowser from '../../scripts/libraryBrowser';
-import * as userSettings from '../../scripts/settings/userSettings';
-import { QueryI } from './interface';
 
 interface SortI {
     getSortMenuOptions: () => {
         name: string;
-        id: string;
+        value: string;
-    }[];
+    }[]
-    query: QueryI;
+    getSortValues: () => {
+        sortBy: string;
+        sortOrder: string;
+    }
     getSettingsKey: () => string;
     reloadItems: () => void;
 }
 
-const Sort: FC<SortI> = ({ getSortMenuOptions, query, getSettingsKey, reloadItems }) => {
+const Sort: FC<SortI> = ({ getSortMenuOptions, getSortValues, getSettingsKey, reloadItems }) => {
     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(() => {
+                reloadItems();
+            });
+        });
+    }, [getSettingsKey, getSortMenuOptions, getSortValues, reloadItems]);
+
     useEffect(() => {
         const btnSort = element.current?.querySelector('.btnSort');
 
-        if (btnSort) {
+        btnSort?.addEventListener('click', showSortMenu);
-            btnSort.addEventListener('click', (e) => {
+
-                libraryBrowser.showSortMenu({
+        return () => {
-                    items: getSortMenuOptions(),
+            btnSort?.removeEventListener('click', showSortMenu);
-                    callback: () => {
+        };
-                        query.StartIndex = 0;
+    }, [showSortMenu]);
-                        userSettings.saveQuerySettings(getSettingsKey(), query);
-                        reloadItems();
-                    },
-                    query: query,
-                    button: e.target
-                });
-            });
-        }
-    }, [getSortMenuOptions, query, reloadItems, getSettingsKey]);
 
     return (
         <div ref={element}>

src/view/components/ViewItemsContainer.tsx

@@ -1,5 +1,5 @@
 import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 
 import loading from '../../components/loading/loading';
 import * as userSettings from '../../scripts/settings/userSettings';
@@ -12,6 +12,7 @@ import Shuffle from './Shuffle';
 import Sort from './Sort';
 import { QueryI } from './interface';
 import NewCollection from './NewCollection';
+import globalize from '../../scripts/globalize';
 
 interface ViewItemsContainerI {
     topParentId: string | null;
@@ -22,10 +23,6 @@ interface ViewItemsContainerI {
     getBasekey: () => string;
     getFilterMode: () => string;
     getItemTypes: () => string;
-    getSortMenuOptions: () => {
-        name: string;
-        id: string;
-    }[];
     getNoItemsMessage: () => string;
 }
 
@@ -38,7 +35,6 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
     getBasekey,
     getFilterMode,
     getItemTypes,
-    getSortMenuOptions,
     getNoItemsMessage
 }) => {
     const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
@@ -53,24 +49,74 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
         return `${getSettingsKey()} -view`;
     }, [getSettingsKey]);
 
-    let query = useMemo<QueryI>(() => ({
+    const getDefaultSortBy = useCallback(() => {
-        SortBy: 'SortName,ProductionYear',
+        return 'SortName';
-        SortOrder: 'Ascending',
+    }, []);
-        IncludeItemTypes: getItemTypes(),
-        Recursive: true,
-        Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
-        ImageTypeLimit: 1,
-        EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
-        Limit: userSettings.libraryPageSize(undefined),
-        StartIndex: 0,
-        ParentId: topParentId
-    }), [getItemTypes, topParentId]);
 
-    if (getBasekey() === 'favorites') {
+    const getSortValues = useCallback(() => {
-        query.IsFavorite = true;
+        const basekey = getSettingsKey();
-    }
 
-    query = userSettings.loadQuerySettings(getSettingsKey(), query);
+        return {
+            sortBy: userSettings.getFilter(basekey + '-sortby') || getDefaultSortBy(),
+            sortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
+        };
+    }, [getDefaultSortBy, getSettingsKey]);
+
+    const getQuery = useCallback(() => {
+        const query: QueryI = {
+            SortBy: getSortValues().sortBy,
+            SortOrder: getSortValues().sortOrder,
+            IncludeItemTypes: getItemTypes(),
+            Recursive: true,
+            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
+            Limit: userSettings.libraryPageSize(undefined),
+            StartIndex: 0,
+            ParentId: topParentId
+        };
+
+        if (getBasekey() === 'favorites') {
+            query.IsFavorite = true;
+        }
+
+        userSettings.loadQuerySettings(getSettingsKey(), query);
+        return query;
+    }, [getSortValues, getItemTypes, topParentId, getBasekey, getSettingsKey]);
+
+    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'
+        }];
+    }, []);
 
     const getCurrentViewStyle = useCallback(() => {
         return userSettings.get(getViewSettings(), false) || 'Poster';
@@ -93,6 +139,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
             return;
         }
         loading.show();
+        const query = getQuery();
         window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
             setItemsResult(result);
             window.scrollTo(0, 0);
@@ -103,7 +150,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
                 autoFocuser.autoFocus(page);
             });
         });
-    }, [query]);
+    }, [getQuery]);
 
     useEffect(() => {
         reloadItems();
@@ -112,30 +159,36 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
     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} query={query} reloadItems={reloadItems} />
+                <Pagination itemsResult= {itemsResult} query={getQuery()} reloadItems={reloadItems} />
 
                 {isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
-                <SelectView getCurrentViewStyle={getCurrentViewStyle} getViewSettings={getViewSettings} query={query} reloadItems={reloadItems} />
+                <SelectView getCurrentViewStyle={getCurrentViewStyle} getViewSettings={getViewSettings} query={getQuery()} reloadItems={reloadItems} />
-                <Sort getSortMenuOptions={getSortMenuOptions} query={query} getSettingsKey={getSettingsKey} reloadItems={reloadItems} />
 
-                {isBtnFilterEnabled && <Filter query={query} getFilterMode={getFilterMode} reloadItems={reloadItems} />}
+                <Sort
+                    getSortMenuOptions={getSortMenuOptions}
+                    getSortValues={getSortValues}
+                    getSettingsKey={getSettingsKey}
+                    reloadItems={reloadItems}
+                />
+
+                {isBtnFilterEnabled && <Filter query={getQuery()} getFilterMode={getFilterMode} reloadItems={reloadItems} />}
 
                 {isBtnNewCollectionEnabled && <NewCollection />}
 
             </div>
 
-            {isAlphaPickerEnabled && <AlphaPickerContainer query={query} reloadItems={reloadItems} />}
+            {isAlphaPickerEnabled && <AlphaPickerContainer query={getQuery()} reloadItems={reloadItems} />}
 
             <ItemsContainer
                 getCurrentViewStyle={getCurrentViewStyle}
-                query={query}
+                query={getQuery()}
                 getContext={getContext}
                 items={itemsResult?.Items}
                 noItemsMessage={getNoItemsMessage()}
             />
 
             <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} reloadItems={reloadItems} />
+                <Pagination itemsResult= {itemsResult} query={getQuery()} reloadItems={reloadItems} />
             </div>
         </div>
     );

src/view/movies/CollectionsView.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useCallback } from 'react';
 
-import globalize from '../../scripts/globalize';
 import ViewItemsContainer from '../components/ViewItemsContainer';
 
 interface CollectionsViewI {
@@ -24,16 +23,6 @@ const CollectionsView: FC<CollectionsViewI> = ({ topParentId }) => {
         return 'MessageNoCollectionsAvailable';
     }, []);
 
-    const getSortMenuOptions = useCallback(() => {
-        return [{
-            name: globalize.translate('Name'),
-            id: 'SortName'
-        }, {
-            name: globalize.translate('OptionDateAdded'),
-            id: 'DateCreated,SortName'
-        }];
-    }, []);
-
     return (
         <ViewItemsContainer
             topParentId={topParentId}
@@ -43,7 +32,6 @@ const CollectionsView: FC<CollectionsViewI> = ({ topParentId }) => {
             getBasekey={getBasekey}
             getFilterMode={getFilterMode}
             getItemTypes={getItemTypes}
-            getSortMenuOptions={getSortMenuOptions}
             getNoItemsMessage={getNoItemsMessage}
         />
     );

src/view/movies/FavoritesView.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useCallback } from 'react';
 
-import globalize from '../../scripts/globalize';
 import ViewItemsContainer from '../components/ViewItemsContainer';
 
 interface FavoritesViewI {
@@ -24,47 +23,12 @@ const FavoritesView: FC<FavoritesViewI> = ({ topParentId }) => {
         return 'MessageNoFavoritesAvailable';
     }, []);
 
-    const getSortMenuOptions = useCallback(() => {
-        return [{
-            name: globalize.translate('Name'),
-            id: 'SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionRandom'),
-            id: 'Random'
-        }, {
-            name: globalize.translate('OptionImdbRating'),
-            id: 'CommunityRating,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionCriticRating'),
-            id: 'CriticRating,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionDateAdded'),
-            id: 'DateCreated,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionDatePlayed'),
-            id: 'DatePlayed,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionParentalRating'),
-            id: 'OfficialRating,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionPlayCount'),
-            id: 'PlayCount,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionReleaseDate'),
-            id: 'PremiereDate,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('Runtime'),
-            id: 'Runtime,SortName,ProductionYear'
-        }];
-    }, []);
-
     return (
         <ViewItemsContainer
             topParentId={topParentId}
             getBasekey={getBasekey}
             getFilterMode={getFilterMode}
             getItemTypes={getItemTypes}
-            getSortMenuOptions={getSortMenuOptions}
             getNoItemsMessage={getNoItemsMessage}
         />
     );

src/view/movies/MoviesView.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback } from 'react';
-import globalize from '../../scripts/globalize';
 
 import ViewItemsContainer from '../components/ViewItemsContainer';
 
@@ -24,40 +23,6 @@ const MoviesView: FC<MoviesViewI> = ({ topParentId }) => {
         return 'MessageNoItemsAvailable';
     }, []);
 
-    const getSortMenuOptions = useCallback(() => {
-        return [{
-            name: globalize.translate('Name'),
-            id: 'SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionRandom'),
-            id: 'Random'
-        }, {
-            name: globalize.translate('OptionImdbRating'),
-            id: 'CommunityRating,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionCriticRating'),
-            id: 'CriticRating,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionDateAdded'),
-            id: 'DateCreated,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionDatePlayed'),
-            id: 'DatePlayed,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionParentalRating'),
-            id: 'OfficialRating,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionPlayCount'),
-            id: 'PlayCount,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('OptionReleaseDate'),
-            id: 'PremiereDate,SortName,ProductionYear'
-        }, {
-            name: globalize.translate('Runtime'),
-            id: 'Runtime,SortName,ProductionYear'
-        }];
-    }, []);
-
     return (
         <ViewItemsContainer
             topParentId={topParentId}
@@ -65,7 +30,6 @@ const MoviesView: FC<MoviesViewI> = ({ topParentId }) => {
             getBasekey={getBasekey}
             getFilterMode={getFilterMode}
             getItemTypes={getItemTypes}
-            getSortMenuOptions={getSortMenuOptions}
             getNoItemsMessage={getNoItemsMessage}
         />
     );

src/view/movies/TrailersView.tsx

@@ -1,7 +1,6 @@
 
 import React, { FC, useCallback } from 'react';
 
-import globalize from '../../scripts/globalize';
 import ViewItemsContainer from '../components/ViewItemsContainer';
 
 interface TrailersViewI {
@@ -25,38 +24,12 @@ const TrailersView: FC<TrailersViewI> = ({ topParentId }) => {
         return 'MessageNoTrailersFound';
     }, []);
 
-    const getSortMenuOptions = useCallback(() => {
-        return [{
-            name: globalize.translate('Name'),
-            id: 'SortName'
-        }, {
-            name: globalize.translate('OptionImdbRating'),
-            id: 'CommunityRating,SortName'
-        }, {
-            name: globalize.translate('OptionDateAdded'),
-            id: 'DateCreated,SortName'
-        }, {
-            name: globalize.translate('OptionDatePlayed'),
-            id: 'DatePlayed,SortName'
-        }, {
-            name: globalize.translate('OptionParentalRating'),
-            id: 'OfficialRating,SortName'
-        }, {
-            name: globalize.translate('OptionPlayCount'),
-            id: 'PlayCount,SortName'
-        }, {
-            name: globalize.translate('OptionReleaseDate'),
-            id: 'PremiereDate,SortName'
-        }];
-    }, []);
-
     return (
         <ViewItemsContainer
             topParentId={topParentId}
             getBasekey={getBasekey}
             getFilterMode={getFilterMode}
             getItemTypes={getItemTypes}
-            getSortMenuOptions={getSortMenuOptions}
             getNoItemsMessage={getNoItemsMessage}
         />
     );