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

apply suggestion

Browse source
This commit is contained in:
grafixeyehero 2022-10-27 00:59:46 +03:00
parent 7805e86f70
commit d7e48d30b6
21 changed files with 172 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/view/components/AlphaPickerContainer.tsx → src/components/common/AlphaPickerContainer.tsx
View file

@ -1,32 +1,32 @@
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import AlphaPicker from '../../components/alphaPicker/alphaPicker';
import { ViewSettingsI } from './interface';
import AlphaPicker from '../alphaPicker/alphaPicker';
import { ViewQuerySettings } from '../../types/interface';
interface AlphaPickerContainerProps {
viewSettings: ViewSettingsI
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
viewQuerySettings: ViewQuerySettings;
setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
}
const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewSettings, setViewSettings }) => {
const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewQuerySettings, setViewQuerySettings }) => {
const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
const element = useRef<HTMLDivElement>(null);
alphaPicker?.updateControls(viewSettings);
alphaPicker?.updateControls(viewQuerySettings);
const onAlphaPickerChange = useCallback((e) => {
const newValue = (e as CustomEvent).detail.value;
let updatedValue: React.SetStateAction<ViewSettingsI>;
let updatedValue: React.SetStateAction<ViewQuerySettings>;
if (newValue === '#') {
updatedValue = {NameLessThan: 'A'};
} else {
updatedValue = {NameStartsWith: newValue};
}
setViewSettings((prevState) => ({
setViewQuerySettings((prevState) => ({
...prevState,
StartIndex: 0,
...updatedValue
}));
}, [setViewSettings]);
}, [setViewQuerySettings]);
useEffect(() => {
const alphaPickerElement = element.current;

18
src/view/components/Filter.tsx → src/components/common/Filter.tsx
View file

@ -1,14 +1,14 @@
import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import { ViewSettingsI } from './interface';
import { ViewQuerySettings } from '../../types/interface';
interface FilterProps {
topParentId?: string | null;
getItemTypes: () => string[];
getFilterMenuOptions: () => Record<string, never>;
getVisibleFilters: () => string[];
viewSettings: ViewSettingsI;
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
viewQuerySettings: ViewQuerySettings;
setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
}
const Filter: FC<FilterProps> = ({
@ -16,25 +16,25 @@ const Filter: FC<FilterProps> = ({
getItemTypes,
getVisibleFilters,
getFilterMenuOptions,
viewSettings,
setViewSettings
viewQuerySettings,
setViewQuerySettings
}) => {
const element = useRef<HTMLDivElement>(null);
const showFilterMenu = useCallback(() => {
import('../../components/filtermenu/filtermenu').then(({default: FilterMenu}) => {
import('../filtermenu/filtermenu').then(({default: FilterMenu}) => {
const filterMenu = new FilterMenu();
filterMenu.show({
settings: viewSettings,
settings: viewQuerySettings,
visibleSettings: getVisibleFilters(),
parentId: topParentId,
itemTypes: getItemTypes(),
serverId: window.ApiClient.serverId(),
filterMenuOptions: getFilterMenuOptions(),
setfilters: setViewSettings
setfilters: setViewQuerySettings
});
});
}, [viewSettings, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setViewSettings]);
}, [viewQuerySettings, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setViewQuerySettings]);
useEffect(() => {
const btnFilter = element.current?.querySelector('.btnFilter');

8
src/view/components/GenresItemsContainer.tsx → src/components/common/GenresItemsContainer.tsx
View file

@ -5,10 +5,10 @@ import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client'
import escapeHTML from 'escape-html';
import React, { FC, useCallback, useEffect, useRef } from 'react';
import { appRouter } from '../../components/appRouter';
import cardBuilder from '../../components/cardbuilder/cardBuilder';
import layoutManager from '../../components/layoutManager';
import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver';
import { appRouter } from '../appRouter';
import cardBuilder from '../cardbuilder/cardBuilder';
import layoutManager from '../layoutManager';
import lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
import globalize from '../../scripts/globalize';
interface GenresItemsContainerProps {

10
src/view/components/ItemsContainer.tsx → src/components/common/ItemsContainer.tsx
View file

@ -1,16 +1,16 @@
import React, { FC, useEffect, useRef } from 'react';
import ItemsContainerElement from '../../elements/ItemsContainerElement';
import imageLoader from '../../components/images/imageLoader';
import imageLoader from '../images/imageLoader';
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import { ViewSettingsI } from './interface';
import { ViewQuerySettings } from '../../types/interface';
interface ItemsContainerI {
viewSettings: ViewSettingsI;
viewQuerySettings: ViewQuerySettings;
getItemsHtml: () => string
}
const ItemsContainer: FC<ItemsContainerI> = ({ viewSettings, getItemsHtml }) => {
const ItemsContainer: FC<ItemsContainerI> = ({ viewQuerySettings, getItemsHtml }) => {
const element = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -19,7 +19,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ viewSettings, getItemsHtml }) =>
imageLoader.lazyChildren(itemsContainer);
}, [getItemsHtml]);
const cssClass = viewSettings.imageType == 'list' ? 'vertical-list' : 'vertical-wrap';
const cssClass = viewQuerySettings.imageType == 'list' ? 'vertical-list' : 'vertical-wrap';
return (
<div ref={element}>

2
src/view/components/NewCollection.tsx → src/components/common/NewCollection.tsx
View file

@ -6,7 +6,7 @@ const NewCollection: FC = () => {
const element = useRef<HTMLDivElement>(null);
const showCollectionEditor = useCallback(() => {
import('../../components/collectionEditor/collectionEditor').then(({default: CollectionEditor}) => {
import('../collectionEditor/collectionEditor').then(({default: CollectionEditor}) => {
const serverId = window.ApiClient.serverId();
const collectionEditor = new CollectionEditor();
collectionEditor.show({

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

@ -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 { ViewSettingsI } from './interface';
import { ViewQuerySettings } from '../../types/interface';
interface PaginationProps {
viewSettings: ViewSettingsI;
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
viewQuerySettings: ViewQuerySettings;
setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
itemsResult?: BaseItemDtoQueryResult;
}
const Pagination: FC<PaginationProps> = ({ viewSettings, setViewSettings, itemsResult = {} }) => {
const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettings, itemsResult = {} }) => {
const limit = userSettings.libraryPageSize(undefined);
const totalRecordCount = itemsResult.TotalRecordCount || 0;
const startIndex = viewSettings.StartIndex || 0;
const startIndex = viewQuerySettings.StartIndex || 0;
const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
const showControls = limit < totalRecordCount;
const element = useRef<HTMLDivElement>(null);
@ -22,22 +22,22 @@ const Pagination: FC<PaginationProps> = ({ viewSettings, setViewSettings, itemsR
const onNextPageClick = useCallback(() => {
if (limit > 0) {
const newIndex = startIndex + limit;
setViewSettings((prevState) => ({
setViewQuerySettings((prevState) => ({
...prevState,
StartIndex: newIndex
}));
}
}, [limit, setViewSettings, startIndex]);
}, [limit, setViewQuerySettings, startIndex]);
const onPreviousPageClick = useCallback(() => {
if (limit > 0) {
const newIndex = Math.max(0, startIndex - limit);
setViewSettings((prevState) => ({
setViewQuerySettings((prevState) => ({
...prevState,
StartIndex: newIndex
}));
}
}, [limit, setViewSettings, startIndex]);
}, [limit, setViewQuerySettings, startIndex]);
useEffect(() => {
const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement;

0
src/view/components/RecommendationContainer.tsx → src/components/common/RecommendationContainer.tsx
View file

6
src/view/components/SectionContainer.tsx → src/components/common/SectionContainer.tsx
View file

@ -3,16 +3,16 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useEffect, useRef } from 'react';
import cardBuilder from '../../components/cardbuilder/cardBuilder';
import cardBuilder from '../cardbuilder/cardBuilder';
import ItemsContainerElement from '../../elements/ItemsContainerElement';
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
import { CardOptionsI } from './interface';
import { CardOptions } from '../../types/interface';
interface SectionContainerProps {
sectionTitle: string;
enableScrollX: () => boolean;
items?: BaseItemDto[];
cardOptions?: CardOptionsI;
cardOptions?: CardOptions;
}
const SectionContainer: FC<SectionContainerProps> = ({

18
src/view/components/SelectView.tsx → src/components/common/SelectView.tsx
View file

@ -1,30 +1,30 @@
import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import { ViewSettingsI } from './interface';
import { ViewQuerySettings } from '../../types/interface';
interface SelectViewProps {
getVisibleViewSettings: () => string[];
viewSettings: ViewSettingsI
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
viewQuerySettings: ViewQuerySettings;
setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
}
const SelectView: FC<SelectViewProps> = ({
getVisibleViewSettings,
viewSettings,
setViewSettings
viewQuerySettings,
setViewQuerySettings
}) => {
const element = useRef<HTMLDivElement>(null);
const showViewSettingsMenu = useCallback(() => {
import('../../components/viewSettings/viewSettings').then(({default: ViewSettings}) => {
import('../viewSettings/viewSettings').then(({default: ViewSettings}) => {
const viewsettings = new ViewSettings();
viewsettings.show({
settings: viewSettings,
settings: viewQuerySettings,
visibleSettings: getVisibleViewSettings(),
setviewsettings: setViewSettings
setviewsettings: setViewQuerySettings
});
});
}, [getVisibleViewSettings, viewSettings, setViewSettings]);
}, [getVisibleViewSettings, viewQuerySettings, setViewQuerySettings]);
useEffect(() => {
const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement;

2
src/view/components/Shuffle.tsx → src/components/common/Shuffle.tsx
View file

@ -1,7 +1,7 @@
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef } from 'react';
import { playbackManager } from '../../components/playback/playbackmanager';
import { playbackManager } from '../playback/playbackmanager';
import IconButtonElement from '../../elements/IconButtonElement';
interface ShuffleProps {

18
src/view/components/Sort.tsx → src/components/common/Sort.tsx
View file

@ -1,33 +1,33 @@
import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import { ViewSettingsI } from './interface';
import { ViewQuerySettings } from '../../types/interface';
interface SortProps {
getSortMenuOptions: () => {
name: string;
value: string;
}[];
viewSettings: ViewSettingsI
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
viewQuerySettings: ViewQuerySettings;
setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
}
const Sort: FC<SortProps> = ({
getSortMenuOptions,
viewSettings,
setViewSettings
viewQuerySettings,
setViewQuerySettings
}) => {
const element = useRef<HTMLDivElement>(null);
const showSortMenu = useCallback(() => {
import('../../components/sortmenu/sortmenu').then(({default: SortMenu}) => {
import('../sortmenu/sortmenu').then(({default: SortMenu}) => {
const sortMenu = new SortMenu();
sortMenu.show({
settings: viewSettings,
settings: viewQuerySettings,
sortOptions: getSortMenuOptions(),
setSortValues: setViewSettings
setSortValues: setViewQuerySettings
});
});
}, [getSortMenuOptions, viewSettings, setViewSettings]);
}, [getSortMenuOptions, viewQuerySettings, setViewQuerySettings]);
useEffect(() => {
const btnSort = element.current?.querySelector('.btnSort');

155
src/view/components/ViewItemsContainer.tsx → src/components/common/ViewItemsContainer.tsx
View file

@ -1,7 +1,7 @@
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import loading from '../../components/loading/loading';
import loading from '../loading/loading';
import * as userSettings from '../../scripts/settings/userSettings';
import AlphaPickerContainer from './AlphaPickerContainer';
import Filter from './Filter';
@ -12,11 +12,11 @@ import Shuffle from './Shuffle';
import Sort from './Sort';
import NewCollection from './NewCollection';
import globalize from '../../scripts/globalize';
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';
import { CardOptions, ViewQuerySettings } from '../../types/interface';
import ServerConnections from '../ServerConnections';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import listview from '../listview/listview';
import cardBuilder from '../cardbuilder/cardBuilder';
interface ViewItemsContainerProps {
topParentId: string | null;
@ -95,12 +95,12 @@ const getSortMenuOptions = () => {
}];
};
const defaultViewSettingsValue: ViewSettingsI = {
const defaultViewQuerySettings: ViewQuerySettings = {
showTitle: true,
showYear: true,
imageType: 'primary',
viewType: '',
cardLayout: true,
cardLayout: false,
SortBy: getDefaultSortBy(),
SortOrder: 'Ascending',
IsPlayed: false,
@ -138,9 +138,9 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
const [isLoading, setisLoading] = useState(false);
const [viewSettings, setViewSettings] = useLocalStorage<ViewSettingsI>(
`viewSettings - ${getSettingsKey()}`,
defaultViewSettingsValue
const [viewQuerySettings, setViewQuerySettings] = useLocalStorage<ViewQuerySettings>(
`viewQuerySettings - ${getSettingsKey()}`,
defaultViewQuerySettings
);
const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
@ -162,26 +162,26 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
let preferDisc;
let preferLogo;
if (viewSettings.imageType === 'banner') {
if (viewQuerySettings.imageType === 'banner') {
shape = 'banner';
} else if (viewSettings.imageType === 'disc') {
} else if (viewQuerySettings.imageType === 'disc') {
shape = 'square';
preferDisc = true;
} else if (viewSettings.imageType === 'logo') {
} else if (viewQuerySettings.imageType === 'logo') {
shape = 'backdrop';
preferLogo = true;
} else if (viewSettings.imageType === 'thumb') {
} else if (viewQuerySettings.imageType === 'thumb') {
shape = 'backdrop';
preferThumb = true;
} else {
shape = 'autoVertical';
}
const cardOptions: CardOptionsI = {
const cardOptions: CardOptions = {
shape: shape,
showTitle: viewSettings.showTitle,
showYear: viewSettings.showYear,
cardLayout: viewSettings.cardLayout,
showTitle: viewQuerySettings.showTitle,
showYear: viewQuerySettings.showYear,
cardLayout: viewQuerySettings.cardLayout,
centerText: true,
context: getContext(),
coverImage: true,
@ -190,18 +190,25 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
preferLogo: preferLogo,
overlayPlayButton: false,
overlayMoreButton: true,
overlayText: !viewSettings.showTitle
overlayText: !viewQuerySettings.showTitle
};
cardOptions.items = itemsResult.Items || [];
return cardOptions;
}, [getContext, itemsResult.Items, viewSettings.cardLayout, viewSettings.imageType, viewSettings.showTitle, viewSettings.showYear]);
}, [
getContext,
itemsResult.Items,
viewQuerySettings.cardLayout,
viewQuerySettings.imageType,
viewQuerySettings.showTitle,
viewQuerySettings.showYear
]);
const getItemsHtml = useCallback(() => {
let html = '';
if (viewSettings.imageType === 'list') {
if (viewQuerySettings.imageType === 'list') {
html = listview.getListViewHtml({
items: itemsResult.Items || [],
context: getContext()
@ -218,50 +225,50 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
}
return html;
}, [getCardOptions, getContext, itemsResult.Items, getNoItemsMessage, viewSettings.imageType]);
}, [getCardOptions, getContext, itemsResult.Items, getNoItemsMessage, viewQuerySettings.imageType]);
const getQuery = useCallback(() => {
let fields = 'BasicSyncInfo,MediaSourceCount';
if (viewSettings.imageType === 'primary') {
if (viewQuerySettings.imageType === 'primary') {
fields += ',PrimaryImageAspectRatio';
}
if (viewSettings.showYear) {
if (viewQuerySettings.showYear) {
fields += ',ProductionYear';
}
const queryFilters: string[] = [];
if (viewSettings.IsPlayed) {
if (viewQuerySettings.IsPlayed) {
queryFilters.push('IsPlayed');
}
if (viewSettings.IsUnplayed) {
if (viewQuerySettings.IsUnplayed) {
queryFilters.push('IsUnplayed');
}
if (viewSettings.IsFavorite) {
if (viewQuerySettings.IsFavorite) {
queryFilters.push('IsFavorite');
}
if (viewSettings.IsResumable) {
if (viewQuerySettings.IsResumable) {
queryFilters.push('IsResumable');
}
let queryIsHD;
if (viewSettings.IsHD) {
if (viewQuerySettings.IsHD) {
queryIsHD = true;
}
if (viewSettings.IsSD) {
if (viewQuerySettings.IsSD) {
queryIsHD = false;
}
const options: QueryI = {
SortBy: viewSettings.SortBy,
SortOrder: viewSettings.SortOrder,
return {
SortBy: viewQuerySettings.SortBy,
SortOrder: viewQuerySettings.SortOrder,
IncludeItemTypes: getItemTypes().join(','),
Recursive: true,
Fields: fields,
@ -269,25 +276,49 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
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,
VideoTypes: viewQuerySettings.VideoTypes,
GenreIds: viewQuerySettings.GenreIds,
Is4K: viewQuerySettings.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,
Is3D: viewQuerySettings.Is3D ? true : null,
HasSubtitles: viewQuerySettings.HasSubtitles ? true : null,
HasTrailer: viewQuerySettings.HasTrailer ? true : null,
HasSpecialFeature: viewQuerySettings.HasSpecialFeature ? true : null,
HasThemeSong: viewQuerySettings.HasThemeSong ? true : null,
HasThemeVideo: viewQuerySettings.HasThemeVideo ? true : null,
Filters: queryFilters.length ? queryFilters.join(',') : null,
StartIndex: viewSettings.StartIndex,
NameLessThan: viewSettings.NameLessThan,
NameStartsWith: viewSettings.NameStartsWith,
StartIndex: viewQuerySettings.StartIndex,
NameLessThan: viewQuerySettings.NameLessThan,
NameStartsWith: viewQuerySettings.NameStartsWith,
ParentId: topParentId
};
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]);
}, [
viewQuerySettings.imageType,
viewQuerySettings.showYear,
viewQuerySettings.IsPlayed,
viewQuerySettings.IsUnplayed,
viewQuerySettings.IsFavorite,
viewQuerySettings.IsResumable,
viewQuerySettings.IsHD,
viewQuerySettings.IsSD,
viewQuerySettings.SortBy,
viewQuerySettings.SortOrder,
viewQuerySettings.VideoTypes,
viewQuerySettings.GenreIds,
viewQuerySettings.Is4K,
viewQuerySettings.Is3D,
viewQuerySettings.HasSubtitles,
viewQuerySettings.HasTrailer,
viewQuerySettings.HasSpecialFeature,
viewQuerySettings.HasThemeSong,
viewQuerySettings.HasThemeVideo,
viewQuerySettings.StartIndex,
viewQuerySettings.NameLessThan,
viewQuerySettings.NameStartsWith,
getItemTypes,
getBasekey,
topParentId
]);
const fetchData = useCallback(() => {
loading.show();
@ -331,22 +362,22 @@ 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}
viewSettings={viewSettings}
setViewSettings={setViewSettings}
viewQuerySettings={viewQuerySettings}
setViewQuerySettings={setViewQuerySettings}
/>
{isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
<SelectView
getVisibleViewSettings={getVisibleViewSettings}
viewSettings={viewSettings}
setViewSettings={setViewSettings}
viewQuerySettings={viewQuerySettings}
setViewQuerySettings={setViewQuerySettings}
/>
<Sort
getSortMenuOptions={getSortMenuOptions}
viewSettings={viewSettings}
setViewSettings={setViewSettings}
viewQuerySettings={viewQuerySettings}
setViewQuerySettings={setViewQuerySettings}
/>
{isBtnFilterEnabled && <Filter
@ -354,8 +385,8 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
getItemTypes={getItemTypes}
getVisibleFilters={getVisibleFilters}
getFilterMenuOptions={getFilterMenuOptions}
viewSettings={viewSettings}
setViewSettings={setViewSettings}
viewQuerySettings={viewQuerySettings}
setViewQuerySettings={setViewQuerySettings}
/>}
{isBtnNewCollectionEnabled && <NewCollection />}
@ -363,20 +394,20 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
</div>
{isAlphaPickerEnabled && <AlphaPickerContainer
viewSettings={viewSettings}
setViewSettings={setViewSettings}
viewQuerySettings={viewQuerySettings}
setViewQuerySettings={setViewQuerySettings}
/>}
{isLoading && <ItemsContainer
viewSettings={viewSettings}
viewQuerySettings={viewQuerySettings}
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}
viewSettings={viewSettings}
setViewSettings={setViewSettings}
viewQuerySettings={viewQuerySettings}
setViewQuerySettings={setViewQuerySettings}
/>
</div>
</div>

0
src/view/hook/useLocalStorage.tsx → src/hooks/useLocalStorage.tsx
View file

12
src/routes/movies.tsx
View file

@ -11,12 +11,12 @@ import Page from '../components/Page';
import globalize from '../scripts/globalize';
import libraryMenu from '../scripts/libraryMenu';
import * as userSettings from '../scripts/settings/userSettings';
import CollectionsView from '../view/movies/CollectionsView';
import FavoritesView from '../view/movies/FavoritesView';
import GenresView from '../view/movies/GenresView';
import MoviesView from '../view/movies/MoviesView';
import SuggestionsView from '../view/movies/SuggestionsView';
import TrailersView from '../view/movies/TrailersView';
import CollectionsView from './movies/CollectionsView';
import FavoritesView from './movies/FavoritesView';
import GenresView from './movies/GenresView';
import MoviesView from './movies/MoviesView';
import SuggestionsView from './movies/SuggestionsView';
import TrailersView from './movies/TrailersView';
const getDefaultTabIndex = (folderId: string | null) => {
switch (userSettings.get('landing-' + folderId, false)) {

2
src/view/movies/CollectionsView.tsx → src/routes/movies/CollectionsView.tsx
View file

@ -1,6 +1,6 @@
import React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../components/ViewItemsContainer';
import ViewItemsContainer from '../../components/common/ViewItemsContainer';
interface CollectionsViewI {
topParentId: string | null;

2
src/view/movies/FavoritesView.tsx → src/routes/movies/FavoritesView.tsx
View file

@ -1,6 +1,6 @@
import React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../components/ViewItemsContainer';
import ViewItemsContainer from '../../components/common/ViewItemsContainer';
interface FavoritesViewI {
topParentId: string | null;

6
src/view/movies/GenresView.tsx → src/routes/movies/GenresView.tsx
View file

@ -3,8 +3,8 @@ import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 're
import loading from '../../components/loading/loading';
import * as userSettings from '../../scripts/settings/userSettings';
import GenresItemsContainer from '../components/GenresItemsContainer';
import { QueryI } from '../components/interface';
import GenresItemsContainer from '../../components/common/GenresItemsContainer';
import { Query } from '../../types/interface';
interface GenresViewI {
topParentId: string | null;
@ -22,7 +22,7 @@ const GenresView: FC<GenresViewI> = ({ topParentId }) => {
return getSettingsKey() + '-view';
}, [getSettingsKey]);
let query = useMemo<QueryI>(() => ({
let query = useMemo<Query>(() => ({
SortBy: 'SortName',
SortOrder: 'Ascending',
IncludeItemTypes: 'Movie',

2
src/view/movies/MoviesView.tsx → src/routes/movies/MoviesView.tsx
View file

@ -1,6 +1,6 @@
import React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../components/ViewItemsContainer';
import ViewItemsContainer from '../../components/common/ViewItemsContainer';
interface MoviesViewI {
topParentId: string | null;

4
src/view/movies/SuggestionsView.tsx → src/routes/movies/SuggestionsView.tsx
View file

@ -5,8 +5,8 @@ import layoutManager from '../../components/layoutManager';
import loading from '../../components/loading/loading';
import dom from '../../scripts/dom';
import globalize from '../../scripts/globalize';
import RecommendationContainer from '../components/RecommendationContainer';
import SectionContainer from '../components/SectionContainer';
import RecommendationContainer from '../../components/common/RecommendationContainer';
import SectionContainer from '../../components/common/SectionContainer';
interface SuggestionsViewI {
topParentId: string | null;

2
src/view/movies/TrailersView.tsx → src/routes/movies/TrailersView.tsx
View file

@ -1,7 +1,7 @@
import React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../components/ViewItemsContainer';
import ViewItemsContainer from '../../components/common/ViewItemsContainer';
interface TrailersViewI {
topParentId: string | null;

7
src/view/components/interface.ts → src/types/interface.ts
View file

@ -1,6 +1,6 @@
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
export interface QueryI extends ViewSettingsI {
export interface Query extends ViewQuerySettings {
IncludeItemTypes?: string;
Recursive?: boolean;
Fields?: string | null;
@ -14,7 +14,7 @@ export interface QueryI extends ViewSettingsI {
Filters?: string | null;
}
export interface ViewSettingsI {
export interface ViewQuerySettings {
showTitle?: boolean;
showYear?: boolean;
imageType?: string;
@ -43,7 +43,8 @@ export interface ViewSettingsI {
NameStartsWith?: string | null;
StartIndex?: number;
}
export interface CardOptionsI {
export interface CardOptions {
itemsContainer?: HTMLElement | null;
parentContainer?: HTMLElement | null;
items?: BaseItemDto[] | null;