diff --git a/src/elements/ItemsContainerElement.tsx b/src/elements/ItemsContainerElement.tsx index 44ea3de2df..0e4fb7b6de 100644 --- a/src/elements/ItemsContainerElement.tsx +++ b/src/elements/ItemsContainerElement.tsx @@ -1,24 +1,21 @@ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; -const createElement = ({ id, className }: IProps) => ({ +const createElement = ({ className }: IProps) => ({ __html: `
` }); -type IProps = { - id?: string; +interface IProps { className?: string; } -const ItemsContainerElement: FunctionComponent = ({ id, className }: IProps) => { +const ItemsContainerElement: FC = ({ className }) => { return (
diff --git a/src/elements/ItemsScrollerContainerElement.tsx b/src/elements/ItemsScrollerContainerElement.tsx index 438944c26c..01f823ae69 100644 --- a/src/elements/ItemsScrollerContainerElement.tsx +++ b/src/elements/ItemsScrollerContainerElement.tsx @@ -1,31 +1,29 @@ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; -const createScroller = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, id, className }: IProps) => ({ +const createScroller = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, className }: IProps) => ({ __html: `
-
-
+
+
` }); -type IProps = { +interface IProps { scrollerclassName?: string; dataHorizontal?: string; dataMousewheel?: string; dataCenterfocus?: string; - id?: string; className?: string; } -const ItemsScrollerContainerElement: FunctionComponent = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, id, className }: IProps) => { +const ItemsScrollerContainerElement: FC = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, className }) => { return (
= ({ scrollerclas dataHorizontal: dataHorizontal ? `data-horizontal="${dataHorizontal}"` : '', dataMousewheel: dataMousewheel ? `data-mousewheel="${dataMousewheel}"` : '', dataCenterfocus: dataCenterfocus ? `data-centerfocus="${dataCenterfocus}"` : '', - id: id ? `id='${id}'` : '', className: className })} /> diff --git a/src/routes/movies.tsx b/src/routes/movies.tsx index bf9686c0dd..3c4e4344b0 100644 --- a/src/routes/movies.tsx +++ b/src/routes/movies.tsx @@ -3,7 +3,7 @@ import '../elements/emby-itemscontainer/emby-itemscontainer'; import '../elements/emby-tabs/emby-tabs'; import '../elements/emby-button/emby-button'; -import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'; +import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; import * as mainTabsManager from '../components/maintabsmanager'; @@ -37,28 +37,28 @@ const getDefaultTabIndex = (folderId: string | null) => { } }; -const Movies: FunctionComponent = () => { +const getTabs = () => { + return [{ + name: globalize.translate('Movies') + }, { + name: globalize.translate('Suggestions') + }, { + name: globalize.translate('Trailers') + }, { + name: globalize.translate('Favorites') + }, { + name: globalize.translate('Collections') + }, { + name: globalize.translate('Genres') + }]; +}; + +const Movies: FC = () => { const [ searchParams ] = useSearchParams(); const currentTabIndex = parseInt(searchParams.get('tab') || getDefaultTabIndex(searchParams.get('topParentId')).toString()); const [ selectedIndex, setSelectedIndex ] = useState(currentTabIndex); const element = useRef(null); - const getTabs = () => { - return [{ - name: globalize.translate('Movies') - }, { - name: globalize.translate('Suggestions') - }, { - name: globalize.translate('Trailers') - }, { - name: globalize.translate('Favorites') - }, { - name: globalize.translate('Collections') - }, { - name: globalize.translate('Genres') - }]; - }; - const getTabComponent = (index: number) => { if (index == null) { throw new Error('index cannot be null'); @@ -106,7 +106,7 @@ const Movies: FunctionComponent = () => { console.error('Unexpected null reference'); return; } - mainTabsManager.setTabs(element.current, selectedIndex, getTabs, undefined, undefined, onTabChange); + mainTabsManager.setTabs(page, selectedIndex, getTabs, undefined, undefined, onTabChange); if (!page.getAttribute('data-title')) { const parentId = searchParams.get('topParentId'); diff --git a/src/view/components/Filter.tsx b/src/view/components/Filter.tsx index 8e0dfd5548..248b6c9fbe 100644 --- a/src/view/components/Filter.tsx +++ b/src/view/components/Filter.tsx @@ -1,15 +1,15 @@ -import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'; +import React, { FC, useCallback, useEffect, useRef } from 'react'; import { Events } from 'jellyfin-apiclient'; import IconButtonElement from '../../elements/IconButtonElement'; -import { IQuery } from './type'; +import { QueryI } from './interface'; -type FilterProps = { - query: IQuery; +interface FilterI { + query: QueryI; getFilterMode: () => string | null; reloadItems: () => void; } -const Filter: FunctionComponent = ({ query, getFilterMode, reloadItems }: FilterProps) => { +const Filter: FC = ({ query, getFilterMode, reloadItems }) => { const element = useRef(null); const showFilterMenu = useCallback(() => { diff --git a/src/view/components/GenresItemsContainer.tsx b/src/view/components/GenresItemsContainer.tsx index 9abccbee01..1b90e49e70 100644 --- a/src/view/components/GenresItemsContainer.tsx +++ b/src/view/components/GenresItemsContainer.tsx @@ -3,7 +3,7 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer'; import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client'; import escapeHTML from 'escape-html'; -import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'; +import React, { FC, useCallback, useEffect, useRef } from 'react'; import { appRouter } from '../../components/appRouter'; import cardBuilder from '../../components/cardbuilder/cardBuilder'; @@ -11,13 +11,13 @@ import layoutManager from '../../components/layoutManager'; import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver'; import globalize from '../../scripts/globalize'; -type GenresItemsContainerProps = { +interface GenresItemsContainerI { topParentId?: string | null; getCurrentViewStyle: () => string; itemsResult?: BaseItemDtoQueryResult; } -const GenresItemsContainer: FunctionComponent = ({ topParentId, getCurrentViewStyle, itemsResult = {} }: GenresItemsContainerProps) => { +const GenresItemsContainer: FC = ({ topParentId, getCurrentViewStyle, itemsResult = {} }) => { const element = useRef(null); const enableScrollX = useCallback(() => { diff --git a/src/view/components/ItemsContainer.tsx b/src/view/components/ItemsContainer.tsx index 6a6b24d034..84354aafc4 100644 --- a/src/view/components/ItemsContainer.tsx +++ b/src/view/components/ItemsContainer.tsx @@ -7,11 +7,11 @@ import listview from '../../components/listview/listview'; import globalize from '../../scripts/globalize'; import imageLoader from '../../components/images/imageLoader'; import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import { IQuery } from './type'; +import { QueryI } from './interface'; type ItemsContainerProps = { getCurrentViewStyle: () => string; - query: IQuery; + query: QueryI; getContext: () => string | null; items?: BaseItemDto[] | null; noItemsMessage?: string; diff --git a/src/view/components/NewCollection.tsx b/src/view/components/NewCollection.tsx index d773295714..28ade67fb6 100644 --- a/src/view/components/NewCollection.tsx +++ b/src/view/components/NewCollection.tsx @@ -1,8 +1,8 @@ -import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'; +import React, { FC, useCallback, useEffect, useRef } from 'react'; import IconButtonElement from '../../elements/IconButtonElement'; -const NewCollection: FunctionComponent = () => { +const NewCollection: FC = () => { const element = useRef(null); const showCollectionEditor = useCallback(() => { diff --git a/src/view/components/Pagination.tsx b/src/view/components/Pagination.tsx index 81d8d67705..37eb168ea3 100644 --- a/src/view/components/Pagination.tsx +++ b/src/view/components/Pagination.tsx @@ -1,16 +1,16 @@ import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client'; -import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'; +import React, { FC, useCallback, useEffect, useRef } from 'react'; import IconButtonElement from '../../elements/IconButtonElement'; import globalize from '../../scripts/globalize'; -import { IQuery } from './type'; +import { QueryI } from './interface'; -type PaginationProps = { - query: IQuery; +interface PaginationI { + query: QueryI; itemsResult?: BaseItemDtoQueryResult; reloadItems: () => void; } -const Pagination: FunctionComponent = ({ query, itemsResult = {}, reloadItems }: PaginationProps) => { +const Pagination: FC = ({ query, itemsResult = {}, reloadItems }) => { const startIndex = query.StartIndex; const limit = query.Limit; const totalRecordCount = itemsResult.TotalRecordCount || 0; diff --git a/src/view/components/RecommendationContainer.tsx b/src/view/components/RecommendationContainer.tsx index 75756a8a1f..836e2126fb 100644 --- a/src/view/components/RecommendationContainer.tsx +++ b/src/view/components/RecommendationContainer.tsx @@ -1,17 +1,17 @@ import { RecommendationDto } from '@thornbill/jellyfin-sdk/dist/generated-client'; -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; import globalize from '../../scripts/globalize'; import escapeHTML from 'escape-html'; import SectionContainer from './SectionContainer'; -type RecommendationContainerProps = { +interface RecommendationContainerI { getPortraitShape: () => string; enableScrollX: () => boolean; recommendation?: RecommendationDto; } -const RecommendationContainer: FunctionComponent = ({ getPortraitShape, enableScrollX, recommendation = {} }: RecommendationContainerProps) => { +const RecommendationContainer: FC = ({ getPortraitShape, enableScrollX, recommendation = {} }) => { let title = ''; switch (recommendation.RecommendationType) { diff --git a/src/view/components/SectionContainer.tsx b/src/view/components/SectionContainer.tsx index 2268fe292c..eb9daacb1f 100644 --- a/src/view/components/SectionContainer.tsx +++ b/src/view/components/SectionContainer.tsx @@ -1,26 +1,26 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer'; import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client'; -import React, { FunctionComponent, useEffect, useRef } from 'react'; +import React, { FC, useEffect, useRef } from 'react'; import cardBuilder from '../../components/cardbuilder/cardBuilder'; import ItemsContainerElement from '../../elements/ItemsContainerElement'; import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement'; -import { ICardOptions } from './type'; +import { CardOptionsI } from './interface'; -type SectionContainerProps = { +interface SectionContainerI { sectionTitle: string; enableScrollX: () => boolean; items?: BaseItemDto[]; - cardOptions?: ICardOptions; + cardOptions?: CardOptionsI; } -const SectionContainer: FunctionComponent = ({ +const SectionContainer: FC = ({ sectionTitle, enableScrollX, items = [], cardOptions = {} -}: SectionContainerProps) => { +}) => { const element = useRef(null); useEffect(() => { diff --git a/src/view/components/SelectView.tsx b/src/view/components/SelectView.tsx index c1f2633c54..4a308c11db 100644 --- a/src/view/components/SelectView.tsx +++ b/src/view/components/SelectView.tsx @@ -1,18 +1,18 @@ -import React, { FunctionComponent, useEffect, useRef } from 'react'; +import React, { FC, useEffect, useRef } from 'react'; import IconButtonElement from '../../elements/IconButtonElement'; import libraryBrowser from '../../scripts/libraryBrowser'; import * as userSettings from '../../scripts/settings/userSettings'; -import { IQuery } from './type'; +import { QueryI } from './interface'; -type SelectViewProps = { +interface SelectViewI { getCurrentViewStyle: () => string; - query: IQuery; + query: QueryI; getViewSettings: () => string; reloadItems: () => void; } -const SelectView: FunctionComponent = ({ getCurrentViewStyle, getViewSettings, query, reloadItems }: SelectViewProps) => { +const SelectView: FC = ({ getCurrentViewStyle, getViewSettings, query, reloadItems }) => { const element = useRef(null); useEffect(() => { diff --git a/src/view/components/Shuffle.tsx b/src/view/components/Shuffle.tsx index 3ff64253f2..35da1f7f9f 100644 --- a/src/view/components/Shuffle.tsx +++ b/src/view/components/Shuffle.tsx @@ -1,15 +1,15 @@ import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client'; -import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'; +import React, { FC, useCallback, useEffect, useRef } from 'react'; import { playbackManager } from '../../components/playback/playbackmanager'; import IconButtonElement from '../../elements/IconButtonElement'; -type ShuffleProps = { +interface ShuffleI { itemsResult?: BaseItemDtoQueryResult; topParentId: string | null; } -const Shuffle: FunctionComponent = ({ itemsResult = {}, topParentId }: ShuffleProps) => { +const Shuffle: FC = ({ itemsResult = {}, topParentId }) => { const element = useRef(null); const shuffle = useCallback(() => { diff --git a/src/view/components/Sort.tsx b/src/view/components/Sort.tsx index 47f1553079..770b466dfe 100644 --- a/src/view/components/Sort.tsx +++ b/src/view/components/Sort.tsx @@ -1,20 +1,20 @@ -import React, { FunctionComponent, useEffect, useRef } from 'react'; +import React, { FC, useEffect, useRef } from 'react'; import IconButtonElement from '../../elements/IconButtonElement'; import libraryBrowser from '../../scripts/libraryBrowser'; import * as userSettings from '../../scripts/settings/userSettings'; -import { IQuery } from './type'; +import { QueryI } from './interface'; -type SortProps = { +interface SortI { getSortMenuOptions: () => { name: string; id: string; }[]; - query: IQuery; + query: QueryI; getSettingsKey: () => string; reloadItems: () => void; } -const Sort: FunctionComponent = ({ getSortMenuOptions, query, getSettingsKey, reloadItems }: SortProps) => { +const Sort: FC = ({ getSortMenuOptions, query, getSettingsKey, reloadItems }) => { const element = useRef(null); useEffect(() => { diff --git a/src/view/components/ViewItemsContainer.tsx b/src/view/components/ViewItemsContainer.tsx index 974f2c4fc8..50c97c30ea 100644 --- a/src/view/components/ViewItemsContainer.tsx +++ b/src/view/components/ViewItemsContainer.tsx @@ -1,5 +1,5 @@ import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client'; -import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import loading from '../../components/loading/loading'; import * as userSettings from '../../scripts/settings/userSettings'; @@ -10,10 +10,10 @@ import Pagination from './Pagination'; import SelectView from './SelectView'; import Shuffle from './Shuffle'; import Sort from './Sort'; -import { IQuery } from './type'; +import { QueryI } from './interface'; import NewCollection from './NewCollection'; -type IProps = { +interface ViewItemsContainerI { topParentId: string | null; isBtnShuffleEnabled?: boolean; isBtnFilterEnabled?: boolean; @@ -29,7 +29,7 @@ type IProps = { getNoItemsMessage: () => string; } -const ViewItemsContainer: FunctionComponent = ({ +const ViewItemsContainer: FC = ({ topParentId, isBtnShuffleEnabled = false, isBtnFilterEnabled = true, @@ -40,7 +40,7 @@ const ViewItemsContainer: FunctionComponent = ({ getItemTypes, getSortMenuOptions, getNoItemsMessage -}: IProps) => { +}) => { const [ itemsResult, setItemsResult ] = useState({}); const element = useRef(null); @@ -53,7 +53,7 @@ const ViewItemsContainer: FunctionComponent = ({ return `${getSettingsKey()} -view`; }, [getSettingsKey]); - let query = useMemo(() => ({ + let query = useMemo(() => ({ SortBy: 'SortName,ProductionYear', SortOrder: 'Ascending', IncludeItemTypes: getItemTypes(), diff --git a/src/view/components/type.ts b/src/view/components/interface.ts similarity index 96% rename from src/view/components/type.ts rename to src/view/components/interface.ts index bcec021110..bb68ff8dd3 100644 --- a/src/view/components/type.ts +++ b/src/view/components/interface.ts @@ -1,4 +1,4 @@ -export type IQuery = { +export type QueryI = { SortBy?: string; SortOrder?: string; IncludeItemTypes?: string; @@ -16,7 +16,7 @@ export type IQuery = { NameStartsWith?: string; } -export type ICardOptions = { +export type CardOptionsI = { itemsContainer?: HTMLElement; parentContainer?: HTMLElement; allowBottomPadding?: boolean; diff --git a/src/view/movies/CollectionsView.tsx b/src/view/movies/CollectionsView.tsx index 17bd14cf52..dd4000c056 100644 --- a/src/view/movies/CollectionsView.tsx +++ b/src/view/movies/CollectionsView.tsx @@ -1,13 +1,13 @@ -import React, { FunctionComponent, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import globalize from '../../scripts/globalize'; import ViewItemsContainer from '../components/ViewItemsContainer'; -type IProps = { +interface CollectionsViewI { topParentId: string | null; } -const CollectionsView: FunctionComponent = ({ topParentId }: IProps) => { +const CollectionsView: FC = ({ topParentId }) => { const getBasekey = useCallback(() => { return 'collections'; }, []); diff --git a/src/view/movies/FavoritesView.tsx b/src/view/movies/FavoritesView.tsx index 8ec222af75..3e203a5444 100644 --- a/src/view/movies/FavoritesView.tsx +++ b/src/view/movies/FavoritesView.tsx @@ -1,13 +1,13 @@ -import React, { FunctionComponent, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import globalize from '../../scripts/globalize'; import ViewItemsContainer from '../components/ViewItemsContainer'; -type IProps = { +interface FavoritesViewI { topParentId: string | null; } -const FavoritesView: FunctionComponent = ({ topParentId }: IProps) => { +const FavoritesView: FC = ({ topParentId }) => { const getBasekey = useCallback(() => { return 'favorites'; }, []); diff --git a/src/view/movies/GenresView.tsx b/src/view/movies/GenresView.tsx index b75dc9e96a..b61b97b76f 100644 --- a/src/view/movies/GenresView.tsx +++ b/src/view/movies/GenresView.tsx @@ -1,16 +1,16 @@ import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client'; -import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import loading from '../../components/loading/loading'; import * as userSettings from '../../scripts/settings/userSettings'; import GenresItemsContainer from '../components/GenresItemsContainer'; -import { IQuery } from '../components/type'; +import { QueryI } from '../components/interface'; -type IProps = { +interface GenresViewI { topParentId: string | null; } -const GenresView: FunctionComponent = ({ topParentId }: IProps) => { +const GenresView: FC = ({ topParentId }) => { const [ itemsResult, setItemsResult ] = useState({}); const element = useRef(null); @@ -22,7 +22,7 @@ const GenresView: FunctionComponent = ({ topParentId }: IProps) => { 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/view/movies/MoviesView.tsx index 3dd2b3caff..bd92b9d627 100644 --- a/src/view/movies/MoviesView.tsx +++ b/src/view/movies/MoviesView.tsx @@ -1,13 +1,13 @@ -import React, { FunctionComponent, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import globalize from '../../scripts/globalize'; import ViewItemsContainer from '../components/ViewItemsContainer'; -type IProps = { +interface MoviesViewI { topParentId: string | null; } -const MoviesView: FunctionComponent = ({ topParentId }: IProps) => { +const MoviesView: FC = ({ topParentId }) => { const getBasekey = useCallback(() => { return 'movies'; }, []); diff --git a/src/view/movies/SuggestionsView.tsx b/src/view/movies/SuggestionsView.tsx index 1d9e778251..5bd73f0ae4 100644 --- a/src/view/movies/SuggestionsView.tsx +++ b/src/view/movies/SuggestionsView.tsx @@ -8,11 +8,11 @@ import globalize from '../../scripts/globalize'; import RecommendationContainer from '../components/RecommendationContainer'; import SectionContainer from '../components/SectionContainer'; -type IProps = { +interface SuggestionsViewI { topParentId: string | null; } -const SuggestionsView: FunctionComponent = (props: IProps) => { +const SuggestionsView: FunctionComponent = ({topParentId}) => { const [ latestItems, setLatestItems ] = useState([]); const [ resumeResult, setResumeResult ] = useState({}); const [ recommendations, setRecommendations ] = useState([]); @@ -102,12 +102,12 @@ const SuggestionsView: FunctionComponent = (props: IProps) => { }, [autoFocus]); const loadSuggestionsTab = useCallback((view) => { - const parentId = props.topParentId; + const parentId = topParentId; const userId = window.ApiClient.getCurrentUserId(); loadResume(view, userId, parentId); loadLatest(view, userId, parentId); loadSuggestions(view, userId); - }, [loadLatest, loadResume, loadSuggestions, props.topParentId]); + }, [loadLatest, loadResume, loadSuggestions, topParentId]); useEffect(() => { const page = element.current; diff --git a/src/view/movies/TrailersView.tsx b/src/view/movies/TrailersView.tsx index 9cce2ebe41..8ed076e987 100644 --- a/src/view/movies/TrailersView.tsx +++ b/src/view/movies/TrailersView.tsx @@ -1,14 +1,14 @@ -import React, { FunctionComponent, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import globalize from '../../scripts/globalize'; import ViewItemsContainer from '../components/ViewItemsContainer'; -type IProps = { +interface TrailersViewI { topParentId: string | null; } -const TrailersView: FunctionComponent = ({ topParentId }: IProps) => { +const TrailersView: FC = ({ topParentId }) => { const getBasekey = useCallback(() => { return 'trailers'; }, []);