= ({ 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';
}, []);