milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

apply suggestion

Browse source
This commit is contained in:
grafixeyehero 2022-10-14 02:07:54 +03:00
parent 1ac97c878a
commit f40c565e4a
12 changed files with 70 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/view/components/AlphaPickerContainer.tsx
View file

@ -1,14 +1,13 @@
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import AlphaPicker from '../../components/alphaPicker/alphaPicker';
import { AlphaPickerValueI, QueryI } from './interface';
import { QueryI } from './interface';
interface AlphaPickerContainerI {
getQuery: () => QueryI
setAlphaPickerValue: React.Dispatch<AlphaPickerValueI>;
setStartIndex: React.Dispatch<React.SetStateAction<number>>;
interface AlphaPickerContainerProps {
getQuery: () => QueryI;
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
}
const AlphaPickerContainer: FC<AlphaPickerContainerI> = ({ getQuery, setAlphaPickerValue, setStartIndex }) => {
const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ getQuery, setQuery }) => {
const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
const element = useRef<HTMLDivElement>(null);
const query = getQuery();
@ -23,9 +22,9 @@ const AlphaPickerContainer: FC<AlphaPickerContainerI> = ({ getQuery, setAlphaPic
} else {
updatedValue = {NameStartsWith: newValue};
}
setAlphaPickerValue(updatedValue);
setStartIndex(0);
}, [setStartIndex, setAlphaPickerValue]);
setQuery({StartIndex: 0, ...updatedValue});
}, [setQuery]);
useEffect(() => {
const alphaPickerElement = element.current;

11
src/view/components/Filter.tsx
View file

@ -1,24 +1,26 @@
import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import { FiltersI } from './interface';
import { FiltersI, QueryI } from './interface';
interface FilterI {
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;
}
const Filter: FC<FilterI> = ({
const Filter: FC<FilterProps> = ({
topParentId,
getItemTypes,
getSettingsKey,
getFilters,
getVisibleFilters,
getFilterMenuOptions,
setQuery,
reloadItems
}) => {
const element = useRef<HTMLDivElement>(null);
@ -35,10 +37,11 @@ const Filter: FC<FilterI> = ({
serverId: window.ApiClient.serverId(),
filterMenuOptions: getFilterMenuOptions()
}).then(() => {
setQuery({StartIndex: 0});
reloadItems();
});
});
}, [getSettingsKey, getFilters, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, reloadItems]);
}, [getSettingsKey, getFilters, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setQuery, reloadItems]);
useEffect(() => {
const btnFilter = element.current?.querySelector('.btnFilter');

4
src/view/components/GenresItemsContainer.tsx
View file

@ -11,13 +11,13 @@ import layoutManager from '../../components/layoutManager';
import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver';
import globalize from '../../scripts/globalize';
interface GenresItemsContainerI {
interface GenresItemsContainerProps {
topParentId?: string | null;
getCurrentViewStyle: () => string;
itemsResult?: BaseItemDtoQueryResult;
}
const GenresItemsContainer: FC<GenresItemsContainerI> = ({ topParentId, getCurrentViewStyle, itemsResult = {} }) => {
const GenresItemsContainer: FC<GenresItemsContainerProps> = ({ topParentId, getCurrentViewStyle, itemsResult = {} }) => {
const element = useRef<HTMLDivElement>(null);
const enableScrollX = useCallback(() => {

6
src/view/components/ItemsContainer.tsx
View file

@ -50,7 +50,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, item
const cardOptions: CardOptionsI = {
shape: shape,
showTitle: viewsettings.showTitle,
showYear: viewsettings.showTitle,
showYear: viewsettings.showYear,
cardLayout: viewsettings.cardLayout,
centerText: true,
context: getContext(),
@ -66,7 +66,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, item
cardOptions.items = items;
return cardOptions;
}, [getContext, items, viewsettings.cardLayout, viewsettings.imageType, viewsettings.showTitle]);
}, [getContext, items, viewsettings.cardLayout, viewsettings.imageType, viewsettings.showTitle, viewsettings.showYear]);
const getItemsHtml = useCallback(() => {
const settings = getViewSettings();
@ -82,8 +82,6 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, item
}
if (!items?.length) {
html = '';
html += '<div class="noItemsMessage centerMessage">';
html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
html += '<p>' + globalize.translate(noItemsMessage) + '</p>';

18
src/view/components/Pagination.tsx
View file

@ -3,16 +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';
interface PaginationI {
startIndex: number
setStartIndex: React.Dispatch<React.SetStateAction<number>>;
interface PaginationProps {
query: QueryI;
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
itemsResult?: BaseItemDtoQueryResult;
}
const Pagination: FC<PaginationI> = ({ startIndex, setStartIndex, itemsResult = {} }) => {
const Pagination: FC<PaginationProps> = ({ query, setQuery, itemsResult = {} }) => {
const limit = userSettings.libraryPageSize(undefined);
const totalRecordCount = itemsResult.TotalRecordCount || 0;
const startIndex = query.StartIndex || 0;
const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
const showControls = limit < totalRecordCount;
const element = useRef<HTMLDivElement>(null);
@ -20,16 +22,16 @@ const Pagination: FC<PaginationI> = ({ startIndex, setStartIndex, itemsResult =
const onNextPageClick = useCallback(() => {
if (limit > 0) {
const newIndex = startIndex + limit;
setStartIndex(newIndex);
setQuery({StartIndex: newIndex});
}
}, [limit, setStartIndex, startIndex]);
}, [limit, setQuery, startIndex]);
const onPreviousPageClick = useCallback(() => {
if (limit > 0) {
const newIndex = Math.max(0, startIndex - limit);
setStartIndex(newIndex);
setQuery({StartIndex: newIndex});
}
}, [limit, setStartIndex, startIndex]);
}, [limit, setQuery, startIndex]);
useEffect(() => {
const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement;

4
src/view/components/RecommendationContainer.tsx
View file

@ -5,13 +5,13 @@ import globalize from '../../scripts/globalize';
import escapeHTML from 'escape-html';
import SectionContainer from './SectionContainer';
interface RecommendationContainerI {
interface RecommendationContainerProps {
getPortraitShape: () => string;
enableScrollX: () => boolean;
recommendation?: RecommendationDto;
}
const RecommendationContainer: FC<RecommendationContainerI> = ({ getPortraitShape, enableScrollX, recommendation = {} }) => {
const RecommendationContainer: FC<RecommendationContainerProps> = ({ getPortraitShape, enableScrollX, recommendation = {} }) => {
let title = '';
switch (recommendation.RecommendationType) {

4
src/view/components/SectionContainer.tsx
View file

@ -8,14 +8,14 @@ import ItemsContainerElement from '../../elements/ItemsContainerElement';
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
import { CardOptionsI } from './interface';
interface SectionContainerI {
interface SectionContainerProps {
sectionTitle: string;
enableScrollX: () => boolean;
items?: BaseItemDto[];
cardOptions?: CardOptionsI;
}
const SectionContainer: FC<SectionContainerI> = ({
const SectionContainer: FC<SectionContainerProps> = ({
sectionTitle,
enableScrollX,
items = [],

9
src/view/components/SelectView.tsx
View file

@ -1,7 +1,8 @@
import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import { QueryI } from './interface';
interface SelectViewI {
interface SelectViewProps {
getSettingsKey: () => string;
getVisibleViewSettings: () => string[];
getViewSettings: () => {
@ -11,10 +12,11 @@ interface SelectViewI {
imageType: string;
viewType: string;
};
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
reloadItems: () => void;
}
const SelectView: FC<SelectViewI> = ({ getSettingsKey, getVisibleViewSettings, getViewSettings, reloadItems }) => {
const SelectView: FC<SelectViewProps> = ({ setQuery, getSettingsKey, getVisibleViewSettings, getViewSettings, reloadItems }) => {
const element = useRef<HTMLDivElement>(null);
const showViewSettingsMenu = useCallback(() => {
@ -25,10 +27,11 @@ const SelectView: FC<SelectViewI> = ({ getSettingsKey, getVisibleViewSettings, g
settings: getViewSettings(),
visibleSettings: getVisibleViewSettings()
}).then(() => {
setQuery({StartIndex: 0});
reloadItems();
});
});
}, [getSettingsKey, getViewSettings, getVisibleViewSettings, reloadItems]);
}, [getSettingsKey, getViewSettings, getVisibleViewSettings, reloadItems, setQuery]);
useEffect(() => {
const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement;

4
src/view/components/Shuffle.tsx
View file

@ -4,12 +4,12 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
import { playbackManager } from '../../components/playback/playbackmanager';
import IconButtonElement from '../../elements/IconButtonElement';
interface ShuffleI {
interface ShuffleProps {
itemsResult?: BaseItemDtoQueryResult;
topParentId: string | null;
}
const Shuffle: FC<ShuffleI> = ({ itemsResult = {}, topParentId }) => {
const Shuffle: FC<ShuffleProps> = ({ itemsResult = {}, topParentId }) => {
const element = useRef<HTMLDivElement>(null);
const shuffle = useCallback(() => {

9
src/view/components/Sort.tsx
View file

@ -1,7 +1,8 @@
import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import { QueryI } from './interface';
interface SortI {
interface SortProps {
getSortMenuOptions: () => {
name: string;
value: string;
@ -11,10 +12,11 @@ interface SortI {
sortOrder: string;
}
getSettingsKey: () => string;
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
reloadItems: () => void;
}
const Sort: FC<SortI> = ({ getSortMenuOptions, getSortValues, getSettingsKey, reloadItems }) => {
const Sort: FC<SortProps> = ({ getSortMenuOptions, getSortValues, getSettingsKey, setQuery, reloadItems }) => {
const element = useRef<HTMLDivElement>(null);
const showSortMenu = useCallback(() => {
@ -25,10 +27,11 @@ const Sort: FC<SortI> = ({ getSortMenuOptions, getSortValues, getSettingsKey, re
settings: getSortValues(),
sortOptions: getSortMenuOptions()
}).then(() => {
setQuery({StartIndex: 0});
reloadItems();
});
});
}, [getSettingsKey, getSortMenuOptions, getSortValues, reloadItems]);
}, [getSettingsKey, getSortMenuOptions, getSortValues, reloadItems, setQuery]);
useEffect(() => {
const btnSort = element.current?.querySelector('.btnSort');

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

@ -1,5 +1,5 @@
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/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,10 +12,9 @@ import Shuffle from './Shuffle';
import Sort from './Sort';
import NewCollection from './NewCollection';
import globalize from '../../scripts/globalize';
import layoutManager from '../../components/layoutManager';
import { AlphaPickerValueI, QueryI } from './interface';
import { QueryI } from './interface';
interface ViewItemsContainerI {
interface ViewItemsContainerProps {
topParentId: string | null;
isBtnShuffleEnabled?: boolean;
isBtnFilterEnabled?: boolean;
@ -26,7 +25,7 @@ interface ViewItemsContainerI {
getNoItemsMessage: () => string;
}
const ViewItemsContainer: FC<ViewItemsContainerI> = ({
const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
topParentId,
isBtnShuffleEnabled = false,
isBtnFilterEnabled = true,
@ -37,15 +36,12 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
getNoItemsMessage
}) => {
const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
const [ startIndex, setStartIndex ] = useState<number>(0);
const [ alphaPickerValue, setAlphaPickerValue ] = useState<AlphaPickerValueI>({});
const [ query, setQuery ] = useState<QueryI>({
StartIndex: 0
});
const element = useRef<HTMLDivElement>(null);
const queryAlphaPickerValue = useMemo(() => ({
...alphaPickerValue
}), [alphaPickerValue]);
const getSettingsKey = useCallback(() => {
return `${topParentId} - ${getBasekey()}`;
}, [getBasekey, topParentId]);
@ -135,7 +131,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
fields += ',ProductionYear';
}
const query: QueryI = {
const options: QueryI = {
SortBy: getSortValues().sortBy,
SortOrder: getSortValues().sortOrder,
IncludeItemTypes: getItemTypes().join(','),
@ -144,18 +140,18 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
Limit: userSettings.libraryPageSize(undefined),
StartIndex: startIndex,
StartIndex: query.StartIndex,
NameLessThan: query.NameLessThan,
NameStartsWith: query.NameStartsWith,
ParentId: topParentId
};
if (getBasekey() === 'favorites') {
query.IsFavorite = true;
options.IsFavorite = true;
}
const queryInfo: QueryI = Object.assign(query, queryAlphaPickerValue || {});
return queryInfo;
}, [getViewSettings, getSortValues, getItemTypes, startIndex, topParentId, getBasekey, queryAlphaPickerValue]);
return options;
}, [getViewSettings, getSortValues, getItemTypes, query.StartIndex, query.NameLessThan, query.NameStartsWith, topParentId, getBasekey]);
const getQueryWithFilters = useCallback(() => {
const query = getQuery();
@ -320,8 +316,8 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
<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}
startIndex={startIndex}
setStartIndex={setStartIndex}
query={query}
setQuery={setQuery}
/>
{isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
@ -330,6 +326,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
getSettingsKey={getSettingsKey}
getVisibleViewSettings={getVisibleViewSettings}
getViewSettings={getViewSettings}
setQuery={setQuery}
reloadItems={reloadItems}
/>}
@ -337,6 +334,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
getSortMenuOptions={getSortMenuOptions}
getSortValues={getSortValues}
getSettingsKey={getSettingsKey}
setQuery={setQuery}
reloadItems={reloadItems}
/>
@ -347,6 +345,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
getItemTypes={getItemTypes}
getVisibleFilters={getVisibleFilters}
getFilterMenuOptions={getFilterMenuOptions}
setQuery={setQuery}
reloadItems={reloadItems}
/>}
@ -356,8 +355,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
{isAlphaPickerEnabled && <AlphaPickerContainer
getQuery={getQuery}
setAlphaPickerValue={setAlphaPickerValue}
setStartIndex={setStartIndex}
setQuery={setQuery}
/>}
<ItemsContainer
@ -370,8 +368,8 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
<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}
startIndex={startIndex}
setStartIndex={setStartIndex}
query={query}
setQuery={setQuery}
/>
</div>
</div>

6
src/view/components/interface.ts
View file

@ -1,9 +1,5 @@
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
export interface AlphaPickerValueI {
NameLessThan?: string;
NameStartsWith?: string | null;
}
export interface QueryI {
SortBy?: string;
SortOrder?: string;
@ -17,7 +13,7 @@ export interface QueryI {
ParentId?: string | null;
IsFavorite?: boolean;
IsMissing?: boolean;
Limit:number;
Limit?:number;
NameStartsWithOrGreater?: string;
NameLessThan?: string;
NameStartsWith?: string | null;