diff --git a/src/view/components/AlphaPickerContainer.tsx b/src/components/common/AlphaPickerContainer.tsx similarity index 74% rename from src/view/components/AlphaPickerContainer.tsx rename to src/components/common/AlphaPickerContainer.tsx index 156ed7d854..a2d647a4d9 100644 --- a/src/view/components/AlphaPickerContainer.tsx +++ b/src/components/common/AlphaPickerContainer.tsx @@ -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>; + viewQuerySettings: ViewQuerySettings; + setViewQuerySettings: React.Dispatch>; } -const AlphaPickerContainer: FC = ({ viewSettings, setViewSettings }) => { +const AlphaPickerContainer: FC = ({ viewQuerySettings, setViewQuerySettings }) => { const [ alphaPicker, setAlphaPicker ] = useState(); const element = useRef(null); - alphaPicker?.updateControls(viewSettings); + alphaPicker?.updateControls(viewQuerySettings); const onAlphaPickerChange = useCallback((e) => { const newValue = (e as CustomEvent).detail.value; - let updatedValue: React.SetStateAction; + let updatedValue: React.SetStateAction; if (newValue === '#') { updatedValue = {NameLessThan: 'A'}; } else { updatedValue = {NameStartsWith: newValue}; } - setViewSettings((prevState) => ({ + setViewQuerySettings((prevState) => ({ ...prevState, StartIndex: 0, ...updatedValue })); - }, [setViewSettings]); + }, [setViewQuerySettings]); useEffect(() => { const alphaPickerElement = element.current; diff --git a/src/view/components/Filter.tsx b/src/components/common/Filter.tsx similarity index 74% rename from src/view/components/Filter.tsx rename to src/components/common/Filter.tsx index 465fb8d614..4db46e332b 100644 --- a/src/view/components/Filter.tsx +++ b/src/components/common/Filter.tsx @@ -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; getVisibleFilters: () => string[]; - viewSettings: ViewSettingsI; - setViewSettings: React.Dispatch>; + viewQuerySettings: ViewQuerySettings; + setViewQuerySettings: React.Dispatch>; } const Filter: FC = ({ @@ -16,25 +16,25 @@ const Filter: FC = ({ getItemTypes, getVisibleFilters, getFilterMenuOptions, - viewSettings, - setViewSettings + viewQuerySettings, + setViewQuerySettings }) => { const element = useRef(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'); diff --git a/src/view/components/GenresItemsContainer.tsx b/src/components/common/GenresItemsContainer.tsx similarity index 95% rename from src/view/components/GenresItemsContainer.tsx rename to src/components/common/GenresItemsContainer.tsx index 9f3e073eda..4c5d15ce90 100644 --- a/src/view/components/GenresItemsContainer.tsx +++ b/src/components/common/GenresItemsContainer.tsx @@ -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 { diff --git a/src/view/components/ItemsContainer.tsx b/src/components/common/ItemsContainer.tsx similarity index 68% rename from src/view/components/ItemsContainer.tsx rename to src/components/common/ItemsContainer.tsx index d4ef2a68f1..6289c1d811 100644 --- a/src/view/components/ItemsContainer.tsx +++ b/src/components/common/ItemsContainer.tsx @@ -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; - getItemsHtml: () => string + viewQuerySettings: ViewQuerySettings; + getItemsHtml: () => string } -const ItemsContainer: FC = ({ viewSettings, getItemsHtml }) => { +const ItemsContainer: FC = ({ viewQuerySettings, getItemsHtml }) => { const element = useRef(null); useEffect(() => { @@ -19,7 +19,7 @@ const ItemsContainer: FC = ({ 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 (
diff --git a/src/view/components/NewCollection.tsx b/src/components/common/NewCollection.tsx similarity index 91% rename from src/view/components/NewCollection.tsx rename to src/components/common/NewCollection.tsx index 28ade67fb6..4cf6e07365 100644 --- a/src/view/components/NewCollection.tsx +++ b/src/components/common/NewCollection.tsx @@ -6,7 +6,7 @@ const NewCollection: FC = () => { const element = useRef(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({ diff --git a/src/view/components/Pagination.tsx b/src/components/common/Pagination.tsx similarity index 85% rename from src/view/components/Pagination.tsx rename to src/components/common/Pagination.tsx index fcbdf8252c..02775f44cc 100644 --- a/src/view/components/Pagination.tsx +++ b/src/components/common/Pagination.tsx @@ -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>; + viewQuerySettings: ViewQuerySettings; + setViewQuerySettings: React.Dispatch>; itemsResult?: BaseItemDtoQueryResult; } -const Pagination: FC = ({ viewSettings, setViewSettings, itemsResult = {} }) => { +const Pagination: FC = ({ 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(null); @@ -22,22 +22,22 @@ const Pagination: FC = ({ 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; diff --git a/src/view/components/RecommendationContainer.tsx b/src/components/common/RecommendationContainer.tsx similarity index 100% rename from src/view/components/RecommendationContainer.tsx rename to src/components/common/RecommendationContainer.tsx diff --git a/src/view/components/SectionContainer.tsx b/src/components/common/SectionContainer.tsx similarity index 93% rename from src/view/components/SectionContainer.tsx rename to src/components/common/SectionContainer.tsx index 63cfae5253..13c29ee61e 100644 --- a/src/view/components/SectionContainer.tsx +++ b/src/components/common/SectionContainer.tsx @@ -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 = ({ diff --git a/src/view/components/SelectView.tsx b/src/components/common/SelectView.tsx similarity index 71% rename from src/view/components/SelectView.tsx rename to src/components/common/SelectView.tsx index a6bef12d35..7a65e48872 100644 --- a/src/view/components/SelectView.tsx +++ b/src/components/common/SelectView.tsx @@ -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>; + viewQuerySettings: ViewQuerySettings; + setViewQuerySettings: React.Dispatch>; } const SelectView: FC = ({ getVisibleViewSettings, - viewSettings, - setViewSettings + viewQuerySettings, + setViewQuerySettings }) => { const element = useRef(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; diff --git a/src/view/components/Shuffle.tsx b/src/components/common/Shuffle.tsx similarity index 94% rename from src/view/components/Shuffle.tsx rename to src/components/common/Shuffle.tsx index 6d1fb3d65d..7d5b06be4b 100644 --- a/src/view/components/Shuffle.tsx +++ b/src/components/common/Shuffle.tsx @@ -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 { diff --git a/src/view/components/Sort.tsx b/src/components/common/Sort.tsx similarity index 70% rename from src/view/components/Sort.tsx rename to src/components/common/Sort.tsx index c2e0d60303..c99b332858 100644 --- a/src/view/components/Sort.tsx +++ b/src/components/common/Sort.tsx @@ -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>; + viewQuerySettings: ViewQuerySettings; + setViewQuerySettings: React.Dispatch>; } const Sort: FC = ({ getSortMenuOptions, - viewSettings, - setViewSettings + viewQuerySettings, + setViewQuerySettings }) => { const element = useRef(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'); diff --git a/src/view/components/ViewItemsContainer.tsx b/src/components/common/ViewItemsContainer.tsx similarity index 67% rename from src/view/components/ViewItemsContainer.tsx rename to src/components/common/ViewItemsContainer.tsx index ca407523b4..f5e80b4b40 100644 --- a/src/view/components/ViewItemsContainer.tsx +++ b/src/components/common/ViewItemsContainer.tsx @@ -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 = ({ const [isLoading, setisLoading] = useState(false); - const [viewSettings, setViewSettings] = useLocalStorage( - `viewSettings - ${getSettingsKey()}`, - defaultViewSettingsValue + const [viewQuerySettings, setViewQuerySettings] = useLocalStorage( + `viewQuerySettings - ${getSettingsKey()}`, + defaultViewQuerySettings ); const [ itemsResult, setItemsResult ] = useState({}); @@ -162,26 +162,26 @@ const ViewItemsContainer: FC = ({ 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 = ({ 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 = ({ } 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 = ({ 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 = ({
{isBtnShuffleEnabled && } {isBtnFilterEnabled && = ({ getItemTypes={getItemTypes} getVisibleFilters={getVisibleFilters} getFilterMenuOptions={getFilterMenuOptions} - viewSettings={viewSettings} - setViewSettings={setViewSettings} + viewQuerySettings={viewQuerySettings} + setViewQuerySettings={setViewQuerySettings} />} {isBtnNewCollectionEnabled && } @@ -363,20 +394,20 @@ const ViewItemsContainer: FC = ({
{isAlphaPickerEnabled && } {isLoading && }
diff --git a/src/view/hook/useLocalStorage.tsx b/src/hooks/useLocalStorage.tsx similarity index 100% rename from src/view/hook/useLocalStorage.tsx rename to src/hooks/useLocalStorage.tsx diff --git a/src/routes/movies.tsx b/src/routes/movies.tsx index 3c4e4344b0..86569b539b 100644 --- a/src/routes/movies.tsx +++ b/src/routes/movies.tsx @@ -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)) { diff --git a/src/view/movies/CollectionsView.tsx b/src/routes/movies/CollectionsView.tsx similarity index 91% rename from src/view/movies/CollectionsView.tsx rename to src/routes/movies/CollectionsView.tsx index 81316ed074..8234ee8b7b 100644 --- a/src/view/movies/CollectionsView.tsx +++ b/src/routes/movies/CollectionsView.tsx @@ -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; diff --git a/src/view/movies/FavoritesView.tsx b/src/routes/movies/FavoritesView.tsx similarity index 90% rename from src/view/movies/FavoritesView.tsx rename to src/routes/movies/FavoritesView.tsx index d1619c3450..68b1d4fcc3 100644 --- a/src/view/movies/FavoritesView.tsx +++ b/src/routes/movies/FavoritesView.tsx @@ -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; diff --git a/src/view/movies/GenresView.tsx b/src/routes/movies/GenresView.tsx similarity index 91% rename from src/view/movies/GenresView.tsx rename to src/routes/movies/GenresView.tsx index 4f8cb1dfaa..f3d997c705 100644 --- a/src/view/movies/GenresView.tsx +++ b/src/routes/movies/GenresView.tsx @@ -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 = ({ topParentId }) => { return getSettingsKey() + '-view'; }, [getSettingsKey]); - let query = useMemo(() => ({ + let query = useMemo(() => ({ SortBy: 'SortName', SortOrder: 'Ascending', IncludeItemTypes: 'Movie', diff --git a/src/view/movies/MoviesView.tsx b/src/routes/movies/MoviesView.tsx similarity index 90% rename from src/view/movies/MoviesView.tsx rename to src/routes/movies/MoviesView.tsx index 30074ac310..660a108a3b 100644 --- a/src/view/movies/MoviesView.tsx +++ b/src/routes/movies/MoviesView.tsx @@ -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; diff --git a/src/view/movies/SuggestionsView.tsx b/src/routes/movies/SuggestionsView.tsx similarity index 97% rename from src/view/movies/SuggestionsView.tsx rename to src/routes/movies/SuggestionsView.tsx index befde0e832..577c723041 100644 --- a/src/view/movies/SuggestionsView.tsx +++ b/src/routes/movies/SuggestionsView.tsx @@ -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; diff --git a/src/view/movies/TrailersView.tsx b/src/routes/movies/TrailersView.tsx similarity index 90% rename from src/view/movies/TrailersView.tsx rename to src/routes/movies/TrailersView.tsx index 958d591ad6..43713684d1 100644 --- a/src/view/movies/TrailersView.tsx +++ b/src/routes/movies/TrailersView.tsx @@ -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; diff --git a/src/view/components/interface.ts b/src/types/interface.ts similarity index 96% rename from src/view/components/interface.ts rename to src/types/interface.ts index 5946d2517c..7afdbeab8c 100644 --- a/src/view/components/interface.ts +++ b/src/types/interface.ts @@ -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;