mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

use sortmenu instead of libraryBrowse .showSortMenu

Browse source
This commit is contained in:
grafixeyehero 2022-10-03 01:23:59 +03:00
parent de4a359c98
commit df4de415b2
7 changed files with 113 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

113
src/view/components/ViewItemsContainer.tsx
View file

@ -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>
);