use sortmenu instead of libraryBrowse .showSortMenu

2024-11-15 18:08:17 -07:00 · 2022-10-03 01:23:59 +03:00 · 2022-10-03 01:23:59 +03:00 · df4de415b2
commit df4de415b2
parent de4a359c98
7 changed files with 113 additions and 167 deletions
--- a/src/view/components/ItemsContainer.tsx
+++ b/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();

--- a/src/view/components/Sort.tsx
+++ b/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;
-    }[];
-    query: QueryI;
+        value: string;
+    }[]
+    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', (e) => {
-                libraryBrowser.showSortMenu({
-                    items: getSortMenuOptions(),
-                    callback: () => {
-                        query.StartIndex = 0;
-                        userSettings.saveQuerySettings(getSettingsKey(), query);
-                        reloadItems();
-                    },
-                    query: query,
-                    button: e.target
-                });
-            });
-        }
-    }, [getSortMenuOptions, query, reloadItems, getSettingsKey]);
+        btnSort?.addEventListener('click', showSortMenu);
+
+        return () => {
+            btnSort?.removeEventListener('click', showSortMenu);
+        };
+    }, [showSortMenu]);

    return (
        <div ref={element}>
--- a/src/view/components/ViewItemsContainer.tsx
+++ b/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>(() => ({
-        SortBy: 'SortName,ProductionYear',
-        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]);
+    const getDefaultSortBy = useCallback(() => {
+        return 'SortName';
+    }, []);

-    if (getBasekey() === 'favorites') {
-        query.IsFavorite = true;
-    }
+    const getSortValues = useCallback(() => {
+        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} />
-                <Sort getSortMenuOptions={getSortMenuOptions} query={query} getSettingsKey={getSettingsKey} reloadItems={reloadItems} />
+                <SelectView getCurrentViewStyle={getCurrentViewStyle} getViewSettings={getViewSettings} query={getQuery()} 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>
    );
--- a/src/view/movies/CollectionsView.tsx
+++ b/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}
        />
    );
--- a/src/view/movies/FavoritesView.tsx
+++ b/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}
        />
    );
--- a/src/view/movies/MoviesView.tsx
+++ b/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}
        />
    );
--- a/src/view/movies/TrailersView.tsx
+++ b/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}
        />
    );