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 React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import AlphaPicker from '../../components/alphaPicker/alphaPicker'; import AlphaPicker from '../alphaPicker/alphaPicker';
import { ViewSettingsI } from './interface'; import { ViewQuerySettings } from '../../types/interface';
interface AlphaPickerContainerProps { interface AlphaPickerContainerProps {
viewSettings: ViewSettingsI viewQuerySettings: ViewQuerySettings;
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>; setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
} }
const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewSettings, setViewSettings }) => { const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewQuerySettings, setViewQuerySettings }) => {
const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>(); const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
alphaPicker?.updateControls(viewSettings); alphaPicker?.updateControls(viewQuerySettings);
const onAlphaPickerChange = useCallback((e) => { const onAlphaPickerChange = useCallback((e) => {
const newValue = (e as CustomEvent).detail.value; const newValue = (e as CustomEvent).detail.value;
let updatedValue: React.SetStateAction<ViewSettingsI>; let updatedValue: React.SetStateAction<ViewQuerySettings>;
if (newValue === '#') { if (newValue === '#') {
updatedValue = {NameLessThan: 'A'}; updatedValue = {NameLessThan: 'A'};
} else { } else {
updatedValue = {NameStartsWith: newValue}; updatedValue = {NameStartsWith: newValue};
} }
setViewSettings((prevState) => ({ setViewQuerySettings((prevState) => ({
...prevState, ...prevState,
StartIndex: 0, StartIndex: 0,
...updatedValue ...updatedValue
})); }));
}, [setViewSettings]); }, [setViewQuerySettings]);
useEffect(() => { useEffect(() => {
const alphaPickerElement = element.current; 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 React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement'; import IconButtonElement from '../../elements/IconButtonElement';
import { ViewSettingsI } from './interface'; import { ViewQuerySettings } from '../../types/interface';
interface FilterProps { interface FilterProps {
topParentId?: string | null; topParentId?: string | null;
getItemTypes: () => string[]; getItemTypes: () => string[];
getFilterMenuOptions: () => Record<string, never>; getFilterMenuOptions: () => Record<string, never>;
getVisibleFilters: () => string[]; getVisibleFilters: () => string[];
viewSettings: ViewSettingsI; viewQuerySettings: ViewQuerySettings;
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>; setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
} }
const Filter: FC<FilterProps> = ({ const Filter: FC<FilterProps> = ({
@ -16,25 +16,25 @@ const Filter: FC<FilterProps> = ({
getItemTypes, getItemTypes,
getVisibleFilters, getVisibleFilters,
getFilterMenuOptions, getFilterMenuOptions,
viewSettings, viewQuerySettings,
setViewSettings setViewQuerySettings
}) => { }) => {
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
const showFilterMenu = useCallback(() => { const showFilterMenu = useCallback(() => {
import('../../components/filtermenu/filtermenu').then(({default: FilterMenu}) => { import('../filtermenu/filtermenu').then(({default: FilterMenu}) => {
const filterMenu = new FilterMenu(); const filterMenu = new FilterMenu();
filterMenu.show({ filterMenu.show({
settings: viewSettings, settings: viewQuerySettings,
visibleSettings: getVisibleFilters(), visibleSettings: getVisibleFilters(),
parentId: topParentId, parentId: topParentId,
itemTypes: getItemTypes(), itemTypes: getItemTypes(),
serverId: window.ApiClient.serverId(), serverId: window.ApiClient.serverId(),
filterMenuOptions: getFilterMenuOptions(), filterMenuOptions: getFilterMenuOptions(),
setfilters: setViewSettings setfilters: setViewQuerySettings
}); });
}); });
}, [viewSettings, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setViewSettings]); }, [viewQuerySettings, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setViewQuerySettings]);
useEffect(() => { useEffect(() => {
const btnFilter = element.current?.querySelector('.btnFilter'); 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 escapeHTML from 'escape-html';
import React, { FC, useCallback, useEffect, useRef } from 'react'; import React, { FC, useCallback, useEffect, useRef } from 'react';
import { appRouter } from '../../components/appRouter'; import { appRouter } from '../appRouter';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import cardBuilder from '../cardbuilder/cardBuilder';
import layoutManager from '../../components/layoutManager'; import layoutManager from '../layoutManager';
import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver'; import lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
interface GenresItemsContainerProps { interface GenresItemsContainerProps {

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

@ -1,16 +1,16 @@
import React, { FC, useEffect, useRef } from 'react'; import React, { FC, useEffect, useRef } from 'react';
import ItemsContainerElement from '../../elements/ItemsContainerElement'; import ItemsContainerElement from '../../elements/ItemsContainerElement';
import imageLoader from '../../components/images/imageLoader'; import imageLoader from '../images/imageLoader';
import '../../elements/emby-itemscontainer/emby-itemscontainer'; import '../../elements/emby-itemscontainer/emby-itemscontainer';
import { ViewSettingsI } from './interface'; import { ViewQuerySettings } from '../../types/interface';
interface ItemsContainerI { interface ItemsContainerI {
viewSettings: ViewSettingsI; viewQuerySettings: ViewQuerySettings;
getItemsHtml: () => string getItemsHtml: () => string
} }
const ItemsContainer: FC<ItemsContainerI> = ({ viewSettings, getItemsHtml }) => { const ItemsContainer: FC<ItemsContainerI> = ({ viewQuerySettings, getItemsHtml }) => {
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -19,7 +19,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ viewSettings, getItemsHtml }) =>
imageLoader.lazyChildren(itemsContainer); imageLoader.lazyChildren(itemsContainer);
}, [getItemsHtml]); }, [getItemsHtml]);
const cssClass = viewSettings.imageType == 'list' ? 'vertical-list' : 'vertical-wrap'; const cssClass = viewQuerySettings.imageType == 'list' ? 'vertical-list' : 'vertical-wrap';
return ( return (
<div ref={element}> <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 element = useRef<HTMLDivElement>(null);
const showCollectionEditor = useCallback(() => { const showCollectionEditor = useCallback(() => {
import('../../components/collectionEditor/collectionEditor').then(({default: CollectionEditor}) => { import('../collectionEditor/collectionEditor').then(({default: CollectionEditor}) => {
const serverId = window.ApiClient.serverId(); const serverId = window.ApiClient.serverId();
const collectionEditor = new CollectionEditor(); const collectionEditor = new CollectionEditor();
collectionEditor.show({ 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 IconButtonElement from '../../elements/IconButtonElement';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
import * as userSettings from '../../scripts/settings/userSettings'; import * as userSettings from '../../scripts/settings/userSettings';
import { ViewSettingsI } from './interface'; import { ViewQuerySettings } from '../../types/interface';
interface PaginationProps { interface PaginationProps {
viewSettings: ViewSettingsI; viewQuerySettings: ViewQuerySettings;
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>; setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
itemsResult?: BaseItemDtoQueryResult; itemsResult?: BaseItemDtoQueryResult;
} }
const Pagination: FC<PaginationProps> = ({ viewSettings, setViewSettings, itemsResult = {} }) => { const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettings, itemsResult = {} }) => {
const limit = userSettings.libraryPageSize(undefined); const limit = userSettings.libraryPageSize(undefined);
const totalRecordCount = itemsResult.TotalRecordCount || 0; const totalRecordCount = itemsResult.TotalRecordCount || 0;
const startIndex = viewSettings.StartIndex || 0; const startIndex = viewQuerySettings.StartIndex || 0;
const recordsEnd = Math.min(startIndex + limit, totalRecordCount); const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
const showControls = limit < totalRecordCount; const showControls = limit < totalRecordCount;
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
@ -22,22 +22,22 @@ const Pagination: FC<PaginationProps> = ({ viewSettings, setViewSettings, itemsR
const onNextPageClick = useCallback(() => { const onNextPageClick = useCallback(() => {
if (limit > 0) { if (limit > 0) {
const newIndex = startIndex + limit; const newIndex = startIndex + limit;
setViewSettings((prevState) => ({ setViewQuerySettings((prevState) => ({
...prevState, ...prevState,
StartIndex: newIndex StartIndex: newIndex
})); }));
} }
}, [limit, setViewSettings, startIndex]); }, [limit, setViewQuerySettings, startIndex]);
const onPreviousPageClick = useCallback(() => { const onPreviousPageClick = useCallback(() => {
if (limit > 0) { if (limit > 0) {
const newIndex = Math.max(0, startIndex - limit); const newIndex = Math.max(0, startIndex - limit);
setViewSettings((prevState) => ({ setViewQuerySettings((prevState) => ({
...prevState, ...prevState,
StartIndex: newIndex StartIndex: newIndex
})); }));
} }
}, [limit, setViewSettings, startIndex]); }, [limit, setViewQuerySettings, startIndex]);
useEffect(() => { useEffect(() => {
const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement; 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 type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useEffect, useRef } from 'react'; import React, { FC, useEffect, useRef } from 'react';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import cardBuilder from '../cardbuilder/cardBuilder';
import ItemsContainerElement from '../../elements/ItemsContainerElement'; import ItemsContainerElement from '../../elements/ItemsContainerElement';
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement'; import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
import { CardOptionsI } from './interface'; import { CardOptions } from '../../types/interface';
interface SectionContainerProps { interface SectionContainerProps {
sectionTitle: string; sectionTitle: string;
enableScrollX: () => boolean; enableScrollX: () => boolean;
items?: BaseItemDto[]; items?: BaseItemDto[];
cardOptions?: CardOptionsI; cardOptions?: CardOptions;
} }
const SectionContainer: FC<SectionContainerProps> = ({ 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 React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement'; import IconButtonElement from '../../elements/IconButtonElement';
import { ViewSettingsI } from './interface'; import { ViewQuerySettings } from '../../types/interface';
interface SelectViewProps { interface SelectViewProps {
getVisibleViewSettings: () => string[]; getVisibleViewSettings: () => string[];
viewSettings: ViewSettingsI viewQuerySettings: ViewQuerySettings;
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>; setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
} }
const SelectView: FC<SelectViewProps> = ({ const SelectView: FC<SelectViewProps> = ({
getVisibleViewSettings, getVisibleViewSettings,
viewSettings, viewQuerySettings,
setViewSettings setViewQuerySettings
}) => { }) => {
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
const showViewSettingsMenu = useCallback(() => { const showViewSettingsMenu = useCallback(() => {
import('../../components/viewSettings/viewSettings').then(({default: ViewSettings}) => { import('../viewSettings/viewSettings').then(({default: ViewSettings}) => {
const viewsettings = new ViewSettings(); const viewsettings = new ViewSettings();
viewsettings.show({ viewsettings.show({
settings: viewSettings, settings: viewQuerySettings,
visibleSettings: getVisibleViewSettings(), visibleSettings: getVisibleViewSettings(),
setviewsettings: setViewSettings setviewsettings: setViewQuerySettings
}); });
}); });
}, [getVisibleViewSettings, viewSettings, setViewSettings]); }, [getVisibleViewSettings, viewQuerySettings, setViewQuerySettings]);
useEffect(() => { useEffect(() => {
const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement; 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 type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef } from 'react'; import React, { FC, useCallback, useEffect, useRef } from 'react';
import { playbackManager } from '../../components/playback/playbackmanager'; import { playbackManager } from '../playback/playbackmanager';
import IconButtonElement from '../../elements/IconButtonElement'; import IconButtonElement from '../../elements/IconButtonElement';
interface ShuffleProps { 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 React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement'; import IconButtonElement from '../../elements/IconButtonElement';
import { ViewSettingsI } from './interface'; import { ViewQuerySettings } from '../../types/interface';
interface SortProps { interface SortProps {
getSortMenuOptions: () => { getSortMenuOptions: () => {
name: string; name: string;
value: string; value: string;
}[]; }[];
viewSettings: ViewSettingsI viewQuerySettings: ViewQuerySettings;
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>; setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
} }
const Sort: FC<SortProps> = ({ const Sort: FC<SortProps> = ({
getSortMenuOptions, getSortMenuOptions,
viewSettings, viewQuerySettings,
setViewSettings setViewQuerySettings
}) => { }) => {
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
const showSortMenu = useCallback(() => { const showSortMenu = useCallback(() => {
import('../../components/sortmenu/sortmenu').then(({default: SortMenu}) => { import('../sortmenu/sortmenu').then(({default: SortMenu}) => {
const sortMenu = new SortMenu(); const sortMenu = new SortMenu();
sortMenu.show({ sortMenu.show({
settings: viewSettings, settings: viewQuerySettings,
sortOptions: getSortMenuOptions(), sortOptions: getSortMenuOptions(),
setSortValues: setViewSettings setSortValues: setViewQuerySettings
}); });
}); });
}, [getSortMenuOptions, viewSettings, setViewSettings]); }, [getSortMenuOptions, viewQuerySettings, setViewQuerySettings]);
useEffect(() => { useEffect(() => {
const btnSort = element.current?.querySelector('.btnSort'); 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 type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; 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 * as userSettings from '../../scripts/settings/userSettings';
import AlphaPickerContainer from './AlphaPickerContainer'; import AlphaPickerContainer from './AlphaPickerContainer';
import Filter from './Filter'; import Filter from './Filter';
@ -12,11 +12,11 @@ import Shuffle from './Shuffle';
import Sort from './Sort'; import Sort from './Sort';
import NewCollection from './NewCollection'; import NewCollection from './NewCollection';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
import { CardOptionsI, QueryI, ViewSettingsI } from './interface'; import { CardOptions, ViewQuerySettings } from '../../types/interface';
import ServerConnections from '../../components/ServerConnections'; import ServerConnections from '../ServerConnections';
import { useLocalStorage } from '../hook/useLocalStorage'; import { useLocalStorage } from '../../hooks/useLocalStorage';
import listview from '../../components/listview/listview'; import listview from '../listview/listview';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import cardBuilder from '../cardbuilder/cardBuilder';
interface ViewItemsContainerProps { interface ViewItemsContainerProps {
topParentId: string | null; topParentId: string | null;
@ -95,12 +95,12 @@ const getSortMenuOptions = () => {
}]; }];
}; };
const defaultViewSettingsValue: ViewSettingsI = { const defaultViewQuerySettings: ViewQuerySettings = {
showTitle: true, showTitle: true,
showYear: true, showYear: true,
imageType: 'primary', imageType: 'primary',
viewType: '', viewType: '',
cardLayout: true, cardLayout: false,
SortBy: getDefaultSortBy(), SortBy: getDefaultSortBy(),
SortOrder: 'Ascending', SortOrder: 'Ascending',
IsPlayed: false, IsPlayed: false,
@ -138,9 +138,9 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
const [isLoading, setisLoading] = useState(false); const [isLoading, setisLoading] = useState(false);
const [viewSettings, setViewSettings] = useLocalStorage<ViewSettingsI>( const [viewQuerySettings, setViewQuerySettings] = useLocalStorage<ViewQuerySettings>(
`viewSettings - ${getSettingsKey()}`, `viewQuerySettings - ${getSettingsKey()}`,
defaultViewSettingsValue defaultViewQuerySettings
); );
const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({}); const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
@ -162,26 +162,26 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
let preferDisc; let preferDisc;
let preferLogo; let preferLogo;
if (viewSettings.imageType === 'banner') { if (viewQuerySettings.imageType === 'banner') {
shape = 'banner'; shape = 'banner';
} else if (viewSettings.imageType === 'disc') { } else if (viewQuerySettings.imageType === 'disc') {
shape = 'square'; shape = 'square';
preferDisc = true; preferDisc = true;
} else if (viewSettings.imageType === 'logo') { } else if (viewQuerySettings.imageType === 'logo') {
shape = 'backdrop'; shape = 'backdrop';
preferLogo = true; preferLogo = true;
} else if (viewSettings.imageType === 'thumb') { } else if (viewQuerySettings.imageType === 'thumb') {
shape = 'backdrop'; shape = 'backdrop';
preferThumb = true; preferThumb = true;
} else { } else {
shape = 'autoVertical'; shape = 'autoVertical';
} }
const cardOptions: CardOptionsI = { const cardOptions: CardOptions = {
shape: shape, shape: shape,
showTitle: viewSettings.showTitle, showTitle: viewQuerySettings.showTitle,
showYear: viewSettings.showYear, showYear: viewQuerySettings.showYear,
cardLayout: viewSettings.cardLayout, cardLayout: viewQuerySettings.cardLayout,
centerText: true, centerText: true,
context: getContext(), context: getContext(),
coverImage: true, coverImage: true,
@ -190,18 +190,25 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
preferLogo: preferLogo, preferLogo: preferLogo,
overlayPlayButton: false, overlayPlayButton: false,
overlayMoreButton: true, overlayMoreButton: true,
overlayText: !viewSettings.showTitle overlayText: !viewQuerySettings.showTitle
}; };
cardOptions.items = itemsResult.Items || []; cardOptions.items = itemsResult.Items || [];
return cardOptions; 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(() => { const getItemsHtml = useCallback(() => {
let html = ''; let html = '';
if (viewSettings.imageType === 'list') { if (viewQuerySettings.imageType === 'list') {
html = listview.getListViewHtml({ html = listview.getListViewHtml({
items: itemsResult.Items || [], items: itemsResult.Items || [],
context: getContext() context: getContext()
@ -218,50 +225,50 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
} }
return html; return html;
}, [getCardOptions, getContext, itemsResult.Items, getNoItemsMessage, viewSettings.imageType]); }, [getCardOptions, getContext, itemsResult.Items, getNoItemsMessage, viewQuerySettings.imageType]);
const getQuery = useCallback(() => { const getQuery = useCallback(() => {
let fields = 'BasicSyncInfo,MediaSourceCount'; let fields = 'BasicSyncInfo,MediaSourceCount';
if (viewSettings.imageType === 'primary') { if (viewQuerySettings.imageType === 'primary') {
fields += ',PrimaryImageAspectRatio'; fields += ',PrimaryImageAspectRatio';
} }
if (viewSettings.showYear) { if (viewQuerySettings.showYear) {
fields += ',ProductionYear'; fields += ',ProductionYear';
} }
const queryFilters: string[] = []; const queryFilters: string[] = [];
if (viewSettings.IsPlayed) { if (viewQuerySettings.IsPlayed) {
queryFilters.push('IsPlayed'); queryFilters.push('IsPlayed');
} }
if (viewSettings.IsUnplayed) { if (viewQuerySettings.IsUnplayed) {
queryFilters.push('IsUnplayed'); queryFilters.push('IsUnplayed');
} }
if (viewSettings.IsFavorite) { if (viewQuerySettings.IsFavorite) {
queryFilters.push('IsFavorite'); queryFilters.push('IsFavorite');
} }
if (viewSettings.IsResumable) { if (viewQuerySettings.IsResumable) {
queryFilters.push('IsResumable'); queryFilters.push('IsResumable');
} }
let queryIsHD; let queryIsHD;
if (viewSettings.IsHD) { if (viewQuerySettings.IsHD) {
queryIsHD = true; queryIsHD = true;
} }
if (viewSettings.IsSD) { if (viewQuerySettings.IsSD) {
queryIsHD = false; queryIsHD = false;
} }
const options: QueryI = { return {
SortBy: viewSettings.SortBy, SortBy: viewQuerySettings.SortBy,
SortOrder: viewSettings.SortOrder, SortOrder: viewQuerySettings.SortOrder,
IncludeItemTypes: getItemTypes().join(','), IncludeItemTypes: getItemTypes().join(','),
Recursive: true, Recursive: true,
Fields: fields, Fields: fields,
@ -269,25 +276,49 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo', EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
Limit: userSettings.libraryPageSize(undefined), Limit: userSettings.libraryPageSize(undefined),
IsFavorite: getBasekey() === 'favorites' ? true : null, IsFavorite: getBasekey() === 'favorites' ? true : null,
VideoTypes: viewSettings.VideoTypes, VideoTypes: viewQuerySettings.VideoTypes,
GenreIds: viewSettings.GenreIds, GenreIds: viewQuerySettings.GenreIds,
Is4K: viewSettings.Is4K ? true : null, Is4K: viewQuerySettings.Is4K ? true : null,
IsHD: queryIsHD, IsHD: queryIsHD,
Is3D: viewSettings.Is3D ? true : null, Is3D: viewQuerySettings.Is3D ? true : null,
HasSubtitles: viewSettings.HasSubtitles ? true : null, HasSubtitles: viewQuerySettings.HasSubtitles ? true : null,
HasTrailer: viewSettings.HasTrailer ? true : null, HasTrailer: viewQuerySettings.HasTrailer ? true : null,
HasSpecialFeature: viewSettings.HasSpecialFeature ? true : null, HasSpecialFeature: viewQuerySettings.HasSpecialFeature ? true : null,
HasThemeSong: viewSettings.HasThemeSong ? true : null, HasThemeSong: viewQuerySettings.HasThemeSong ? true : null,
HasThemeVideo: viewSettings.HasThemeVideo ? true : null, HasThemeVideo: viewQuerySettings.HasThemeVideo ? true : null,
Filters: queryFilters.length ? queryFilters.join(',') : null, Filters: queryFilters.length ? queryFilters.join(',') : null,
StartIndex: viewSettings.StartIndex, StartIndex: viewQuerySettings.StartIndex,
NameLessThan: viewSettings.NameLessThan, NameLessThan: viewQuerySettings.NameLessThan,
NameStartsWith: viewSettings.NameStartsWith, NameStartsWith: viewQuerySettings.NameStartsWith,
ParentId: topParentId ParentId: topParentId
}; };
}, [
return options; viewQuerySettings.imageType,
}, [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.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(() => { const fetchData = useCallback(() => {
loading.show(); 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'> <div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
<Pagination <Pagination
itemsResult= {itemsResult} itemsResult= {itemsResult}
viewSettings={viewSettings} viewQuerySettings={viewQuerySettings}
setViewSettings={setViewSettings} setViewQuerySettings={setViewQuerySettings}
/> />
{isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />} {isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
<SelectView <SelectView
getVisibleViewSettings={getVisibleViewSettings} getVisibleViewSettings={getVisibleViewSettings}
viewSettings={viewSettings} viewQuerySettings={viewQuerySettings}
setViewSettings={setViewSettings} setViewQuerySettings={setViewQuerySettings}
/> />
<Sort <Sort
getSortMenuOptions={getSortMenuOptions} getSortMenuOptions={getSortMenuOptions}
viewSettings={viewSettings} viewQuerySettings={viewQuerySettings}
setViewSettings={setViewSettings} setViewQuerySettings={setViewQuerySettings}
/> />
{isBtnFilterEnabled && <Filter {isBtnFilterEnabled && <Filter
@ -354,8 +385,8 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
getItemTypes={getItemTypes} getItemTypes={getItemTypes}
getVisibleFilters={getVisibleFilters} getVisibleFilters={getVisibleFilters}
getFilterMenuOptions={getFilterMenuOptions} getFilterMenuOptions={getFilterMenuOptions}
viewSettings={viewSettings} viewQuerySettings={viewQuerySettings}
setViewSettings={setViewSettings} setViewQuerySettings={setViewQuerySettings}
/>} />}
{isBtnNewCollectionEnabled && <NewCollection />} {isBtnNewCollectionEnabled && <NewCollection />}
@ -363,20 +394,20 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
</div> </div>
{isAlphaPickerEnabled && <AlphaPickerContainer {isAlphaPickerEnabled && <AlphaPickerContainer
viewSettings={viewSettings} viewQuerySettings={viewQuerySettings}
setViewSettings={setViewSettings} setViewQuerySettings={setViewQuerySettings}
/>} />}
{isLoading && <ItemsContainer {isLoading && <ItemsContainer
viewSettings={viewSettings} viewQuerySettings={viewQuerySettings}
getItemsHtml={getItemsHtml} getItemsHtml={getItemsHtml}
/>} />}
<div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'> <div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
<Pagination <Pagination
itemsResult= {itemsResult} itemsResult= {itemsResult}
viewSettings={viewSettings} viewQuerySettings={viewQuerySettings}
setViewSettings={setViewSettings} setViewQuerySettings={setViewQuerySettings}
/> />
</div> </div>
</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 globalize from '../scripts/globalize';
import libraryMenu from '../scripts/libraryMenu'; import libraryMenu from '../scripts/libraryMenu';
import * as userSettings from '../scripts/settings/userSettings'; import * as userSettings from '../scripts/settings/userSettings';
import CollectionsView from '../view/movies/CollectionsView'; import CollectionsView from './movies/CollectionsView';
import FavoritesView from '../view/movies/FavoritesView'; import FavoritesView from './movies/FavoritesView';
import GenresView from '../view/movies/GenresView'; import GenresView from './movies/GenresView';
import MoviesView from '../view/movies/MoviesView'; import MoviesView from './movies/MoviesView';
import SuggestionsView from '../view/movies/SuggestionsView'; import SuggestionsView from './movies/SuggestionsView';
import TrailersView from '../view/movies/TrailersView'; import TrailersView from './movies/TrailersView';
const getDefaultTabIndex = (folderId: string | null) => { const getDefaultTabIndex = (folderId: string | null) => {
switch (userSettings.get('landing-' + folderId, false)) { 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 React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../components/ViewItemsContainer'; import ViewItemsContainer from '../../components/common/ViewItemsContainer';
interface CollectionsViewI { interface CollectionsViewI {
topParentId: string | null; 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 React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../components/ViewItemsContainer'; import ViewItemsContainer from '../../components/common/ViewItemsContainer';
interface FavoritesViewI { interface FavoritesViewI {
topParentId: string | null; 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 loading from '../../components/loading/loading';
import * as userSettings from '../../scripts/settings/userSettings'; import * as userSettings from '../../scripts/settings/userSettings';
import GenresItemsContainer from '../components/GenresItemsContainer'; import GenresItemsContainer from '../../components/common/GenresItemsContainer';
import { QueryI } from '../components/interface'; import { Query } from '../../types/interface';
interface GenresViewI { interface GenresViewI {
topParentId: string | null; topParentId: string | null;
@ -22,7 +22,7 @@ const GenresView: FC<GenresViewI> = ({ topParentId }) => {
return getSettingsKey() + '-view'; return getSettingsKey() + '-view';
}, [getSettingsKey]); }, [getSettingsKey]);
let query = useMemo<QueryI>(() => ({ let query = useMemo<Query>(() => ({
SortBy: 'SortName', SortBy: 'SortName',
SortOrder: 'Ascending', SortOrder: 'Ascending',
IncludeItemTypes: 'Movie', 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 React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../components/ViewItemsContainer'; import ViewItemsContainer from '../../components/common/ViewItemsContainer';
interface MoviesViewI { interface MoviesViewI {
topParentId: string | null; 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 loading from '../../components/loading/loading';
import dom from '../../scripts/dom'; import dom from '../../scripts/dom';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
import RecommendationContainer from '../components/RecommendationContainer'; import RecommendationContainer from '../../components/common/RecommendationContainer';
import SectionContainer from '../components/SectionContainer'; import SectionContainer from '../../components/common/SectionContainer';
interface SuggestionsViewI { interface SuggestionsViewI {
topParentId: string | null; 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 React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../components/ViewItemsContainer'; import ViewItemsContainer from '../../components/common/ViewItemsContainer';
interface TrailersViewI { interface TrailersViewI {
topParentId: string | null; 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'; import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
export interface QueryI extends ViewSettingsI { export interface Query extends ViewQuerySettings {
IncludeItemTypes?: string; IncludeItemTypes?: string;
Recursive?: boolean; Recursive?: boolean;
Fields?: string | null; Fields?: string | null;
@ -14,7 +14,7 @@ export interface QueryI extends ViewSettingsI {
Filters?: string | null; Filters?: string | null;
} }
export interface ViewSettingsI { export interface ViewQuerySettings {
showTitle?: boolean; showTitle?: boolean;
showYear?: boolean; showYear?: boolean;
imageType?: string; imageType?: string;
@ -43,7 +43,8 @@ export interface ViewSettingsI {
NameStartsWith?: string | null; NameStartsWith?: string | null;
StartIndex?: number; StartIndex?: number;
} }
export interface CardOptionsI {
export interface CardOptions {
itemsContainer?: HTMLElement | null; itemsContainer?: HTMLElement | null;
parentContainer?: HTMLElement | null; parentContainer?: HTMLElement | null;
items?: BaseItemDto[] | null; items?: BaseItemDto[] | null;