mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge remote-tracking branch 'upstream/master' into dashboard-activity
This commit is contained in:
Bill Thornton
commit
76597a021a
66 changed files with 2129 additions and 707 deletions
|
|
@ -1,9 +1,9 @@
|
|||
import React, { FC, useCallback } from 'react';
|
||||
|
||||
import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
|
||||
import { LibraryViewProps } from '../../../../types/interface';
|
||||
import ViewItemsContainer from 'components/common/ViewItemsContainer';
|
||||
import { LibraryViewProps } from 'types/library';
|
||||
|
||||
const CollectionsView: FC<LibraryViewProps> = ({ topParentId }) => {
|
||||
const CollectionsView: FC<LibraryViewProps> = ({ parentId }) => {
|
||||
const getBasekey = useCallback(() => {
|
||||
return 'collections';
|
||||
}, []);
|
||||
|
|
@ -18,7 +18,7 @@ const CollectionsView: FC<LibraryViewProps> = ({ topParentId }) => {
|
|||
|
||||
return (
|
||||
<ViewItemsContainer
|
||||
topParentId={topParentId}
|
||||
topParentId={parentId}
|
||||
isBtnFilterEnabled={false}
|
||||
isBtnNewCollectionEnabled={true}
|
||||
isAlphaPickerEnabled={false}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { FC, useCallback } from 'react';
|
||||
|
||||
import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
|
||||
import { LibraryViewProps } from '../../../../types/interface';
|
||||
import ViewItemsContainer from 'components/common/ViewItemsContainer';
|
||||
import { LibraryViewProps } from 'types/library';
|
||||
|
||||
const FavoritesView: FC<LibraryViewProps> = ({ topParentId }) => {
|
||||
const FavoritesView: FC<LibraryViewProps> = ({ parentId }) => {
|
||||
const getBasekey = useCallback(() => {
|
||||
return 'favorites';
|
||||
}, []);
|
||||
|
|
@ -18,7 +18,7 @@ const FavoritesView: FC<LibraryViewProps> = ({ topParentId }) => {
|
|||
|
||||
return (
|
||||
<ViewItemsContainer
|
||||
topParentId={topParentId}
|
||||
topParentId={parentId}
|
||||
getBasekey={getBasekey}
|
||||
getItemTypes={getItemTypes}
|
||||
getNoItemsMessage={getNoItemsMessage}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,15 @@
|
|||
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
|
||||
import React, { FC, useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import loading from '../../../../components/loading/loading';
|
||||
import GenresItemsContainer from '../../../../components/common/GenresItemsContainer';
|
||||
import { LibraryViewProps } from '../../../../types/interface';
|
||||
|
||||
const GenresView: FC<LibraryViewProps> = ({ topParentId }) => {
|
||||
const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
|
||||
|
||||
const reloadItems = useCallback(() => {
|
||||
loading.show();
|
||||
window.ApiClient.getGenres(
|
||||
window.ApiClient.getCurrentUserId(),
|
||||
{
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Movie',
|
||||
Recursive: true,
|
||||
EnableTotalRecordCount: false,
|
||||
ParentId: topParentId
|
||||
}
|
||||
).then((result) => {
|
||||
setItemsResult(result);
|
||||
loading.hide();
|
||||
}).catch(err => {
|
||||
console.error('[GenresView] failed to fetch genres', err);
|
||||
});
|
||||
}, [topParentId]);
|
||||
|
||||
useEffect(() => {
|
||||
reloadItems();
|
||||
}, [reloadItems]);
|
||||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import React, { FC } from 'react';
|
||||
import GenresItemsContainer from '../../components/library/GenresItemsContainer';
|
||||
import { LibraryViewProps } from 'types/library';
|
||||
import { CollectionType } from 'types/collectionType';
|
||||
|
||||
const GenresView: FC<LibraryViewProps> = ({ parentId }) => {
|
||||
return (
|
||||
<GenresItemsContainer
|
||||
topParentId={topParentId}
|
||||
itemsResult={itemsResult}
|
||||
parentId={parentId}
|
||||
collectionType={CollectionType.Movies}
|
||||
itemType={BaseItemKind.Movie}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { FC, useCallback } from 'react';
|
||||
|
||||
import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
|
||||
import { LibraryViewProps } from '../../../../types/interface';
|
||||
import ViewItemsContainer from 'components/common/ViewItemsContainer';
|
||||
import { LibraryViewProps } from 'types/library';
|
||||
|
||||
const MoviesView: FC<LibraryViewProps> = ({ topParentId }) => {
|
||||
const MoviesView: FC<LibraryViewProps> = ({ parentId }) => {
|
||||
const getBasekey = useCallback(() => {
|
||||
return 'movies';
|
||||
}, []);
|
||||
|
|
@ -18,7 +18,7 @@ const MoviesView: FC<LibraryViewProps> = ({ topParentId }) => {
|
|||
|
||||
return (
|
||||
<ViewItemsContainer
|
||||
topParentId={topParentId}
|
||||
topParentId={parentId}
|
||||
isBtnShuffleEnabled={true}
|
||||
getBasekey={getBasekey}
|
||||
getItemTypes={getItemTypes}
|
||||
|
|
|
|||
|
|
@ -1,160 +1,51 @@
|
|||
import type { BaseItemDto, BaseItemDtoQueryResult, RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
|
||||
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import React, { FC } from 'react';
|
||||
import { useGetMovieRecommendations } from 'hooks/useFetchItems';
|
||||
import globalize from 'scripts/globalize';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import RecommendationContainer from '../../components/library/RecommendationContainer';
|
||||
import SuggestionsItemsContainer from '../../components/library/SuggestionsItemsContainer';
|
||||
|
||||
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/common/RecommendationContainer';
|
||||
import SectionContainer from '../../../../components/common/SectionContainer';
|
||||
import { LibraryViewProps } from '../../../../types/interface';
|
||||
import { LibraryViewProps } from 'types/library';
|
||||
import { SectionsView } from 'types/suggestionsSections';
|
||||
|
||||
const SuggestionsView: FC<LibraryViewProps> = ({ topParentId }) => {
|
||||
const [ latestItems, setLatestItems ] = useState<BaseItemDto[]>([]);
|
||||
const [ resumeResult, setResumeResult ] = useState<BaseItemDtoQueryResult>({});
|
||||
const [ recommendations, setRecommendations ] = useState<RecommendationDto[]>([]);
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
const SuggestionsView: FC<LibraryViewProps> = ({ parentId }) => {
|
||||
const {
|
||||
isLoading,
|
||||
data: movieRecommendationsItems
|
||||
} = useGetMovieRecommendations(parentId);
|
||||
|
||||
const enableScrollX = useCallback(() => {
|
||||
return !layoutManager.desktop;
|
||||
}, []);
|
||||
|
||||
const getPortraitShape = useCallback(() => {
|
||||
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
||||
}, [enableScrollX]);
|
||||
|
||||
const getThumbShape = useCallback(() => {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}, [enableScrollX]);
|
||||
|
||||
const autoFocus = useCallback((page) => {
|
||||
import('../../../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
}).catch(err => {
|
||||
console.error('[SuggestionsView] failed to load data', err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const loadResume = useCallback((page, userId, parentId) => {
|
||||
loading.show();
|
||||
const screenWidth = dom.getWindowSize().innerWidth;
|
||||
const options = {
|
||||
SortBy: 'DatePlayed',
|
||||
SortOrder: 'Descending',
|
||||
IncludeItemTypes: 'Movie',
|
||||
Filters: 'IsResumable',
|
||||
Limit: screenWidth >= 1600 ? 5 : 3,
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
CollapseBoxSetItems: false,
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
window.ApiClient.getItems(userId, options).then(result => {
|
||||
setResumeResult(result);
|
||||
|
||||
loading.hide();
|
||||
autoFocus(page);
|
||||
}).catch(err => {
|
||||
console.error('[SuggestionsView] failed to fetch items', err);
|
||||
});
|
||||
}, [autoFocus]);
|
||||
|
||||
const loadLatest = useCallback((page: HTMLDivElement, userId: string, parentId: string | null) => {
|
||||
const options = {
|
||||
IncludeItemTypes: 'Movie',
|
||||
Limit: 18,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
window.ApiClient.getJSON(window.ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(items => {
|
||||
setLatestItems(items);
|
||||
|
||||
autoFocus(page);
|
||||
}).catch(err => {
|
||||
console.error('[SuggestionsView] failed to fetch latest items', err);
|
||||
});
|
||||
}, [autoFocus]);
|
||||
|
||||
const loadSuggestions = useCallback((page, userId) => {
|
||||
const screenWidth = dom.getWindowSize().innerWidth;
|
||||
let itemLimit = 5;
|
||||
if (screenWidth >= 1600) {
|
||||
itemLimit = 8;
|
||||
} else if (screenWidth >= 1200) {
|
||||
itemLimit = 6;
|
||||
}
|
||||
const url = window.ApiClient.getUrl('Movies/Recommendations', {
|
||||
userId: userId,
|
||||
categoryLimit: 6,
|
||||
ItemLimit: itemLimit,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb'
|
||||
});
|
||||
window.ApiClient.getJSON(url).then(result => {
|
||||
setRecommendations(result);
|
||||
|
||||
autoFocus(page);
|
||||
}).catch(err => {
|
||||
console.error('[SuggestionsView] failed to fetch recommendations', err);
|
||||
});
|
||||
}, [autoFocus]);
|
||||
|
||||
const loadSuggestionsTab = useCallback((view) => {
|
||||
const parentId = topParentId;
|
||||
const userId = window.ApiClient.getCurrentUserId();
|
||||
loadResume(view, userId, parentId);
|
||||
loadLatest(view, userId, parentId);
|
||||
loadSuggestions(view, userId);
|
||||
}, [loadLatest, loadResume, loadSuggestions, topParentId]);
|
||||
|
||||
useEffect(() => {
|
||||
const page = element.current;
|
||||
|
||||
if (!page) {
|
||||
console.error('Unexpected null reference');
|
||||
return;
|
||||
}
|
||||
|
||||
loadSuggestionsTab(page);
|
||||
}, [loadSuggestionsTab]);
|
||||
if (isLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={element}>
|
||||
<SectionContainer
|
||||
sectionTitle={globalize.translate('HeaderContinueWatching')}
|
||||
enableScrollX={enableScrollX}
|
||||
items={resumeResult.Items || []}
|
||||
cardOptions={{
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
showYear: true
|
||||
}}
|
||||
<>
|
||||
<SuggestionsItemsContainer
|
||||
parentId={parentId}
|
||||
sectionsView={[SectionsView.ContinueWatchingMovies, SectionsView.LatestMovies]}
|
||||
/>
|
||||
|
||||
<SectionContainer
|
||||
sectionTitle={globalize.translate('HeaderLatestMovies')}
|
||||
enableScrollX={enableScrollX}
|
||||
items={latestItems}
|
||||
cardOptions={{
|
||||
shape: getPortraitShape(),
|
||||
showYear: true
|
||||
}}
|
||||
/>
|
||||
|
||||
{!recommendations.length ? <div className='noItemsMessage centerMessage'>
|
||||
<h1>{globalize.translate('MessageNothingHere')}</h1>
|
||||
<p>{globalize.translate('MessageNoMovieSuggestionsAvailable')}</p>
|
||||
</div> : recommendations.map(recommendation => {
|
||||
return <RecommendationContainer key={recommendation.CategoryId} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />;
|
||||
})}
|
||||
</div>
|
||||
{!movieRecommendationsItems?.length ? (
|
||||
<div className='noItemsMessage centerMessage'>
|
||||
<h1>{globalize.translate('MessageNothingHere')}</h1>
|
||||
<p>
|
||||
{globalize.translate(
|
||||
'MessageNoMovieSuggestionsAvailable'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
movieRecommendationsItems.map((recommendation, index) => {
|
||||
return (
|
||||
<RecommendationContainer
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
key={`${recommendation.CategoryId}-${index}`} // use a unique id return value may have duplicate id
|
||||
recommendation={recommendation}
|
||||
/>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
|
||||
import React, { FC, useCallback } from 'react';
|
||||
|
||||
import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
|
||||
import { LibraryViewProps } from '../../../../types/interface';
|
||||
import ViewItemsContainer from 'components/common/ViewItemsContainer';
|
||||
import { LibraryViewProps } from 'types/library';
|
||||
|
||||
const TrailersView: FC<LibraryViewProps> = ({ topParentId }) => {
|
||||
const TrailersView: FC<LibraryViewProps> = ({ parentId }) => {
|
||||
const getBasekey = useCallback(() => {
|
||||
return 'trailers';
|
||||
}, []);
|
||||
|
|
@ -19,7 +19,7 @@ const TrailersView: FC<LibraryViewProps> = ({ topParentId }) => {
|
|||
|
||||
return (
|
||||
<ViewItemsContainer
|
||||
topParentId={topParentId}
|
||||
topParentId={parentId}
|
||||
getBasekey={getBasekey}
|
||||
getItemTypes={getItemTypes}
|
||||
getNoItemsMessage={getNoItemsMessage}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,27 @@
|
|||
import '../../../../elements/emby-scroller/emby-scroller';
|
||||
import '../../../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||
import '../../../../elements/emby-tabs/emby-tabs';
|
||||
import '../../../../elements/emby-button/emby-button';
|
||||
import 'elements/emby-scroller/emby-scroller';
|
||||
import 'elements/emby-itemscontainer/emby-itemscontainer';
|
||||
import 'elements/emby-tabs/emby-tabs';
|
||||
import 'elements/emby-button/emby-button';
|
||||
|
||||
import React, { FC, useEffect, useRef } from 'react';
|
||||
import React, { FC } from 'react';
|
||||
import { useLocation, useSearchParams } from 'react-router-dom';
|
||||
import Page from 'components/Page';
|
||||
|
||||
import Page from '../../../../components/Page';
|
||||
import globalize from '../../../../scripts/globalize';
|
||||
import libraryMenu from '../../../../scripts/libraryMenu';
|
||||
import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
|
||||
import CollectionsView from './CollectionsView';
|
||||
import FavoritesView from './FavoritesView';
|
||||
import GenresView from './GenresView';
|
||||
import MoviesView from './MoviesView';
|
||||
import SuggestionsView from './SuggestionsView';
|
||||
import TrailersView from './TrailersView';
|
||||
import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
|
||||
|
||||
const Movies: FC = () => {
|
||||
const location = useLocation();
|
||||
const [ searchParams ] = useSearchParams();
|
||||
const searchParamsParentId = searchParams.get('topParentId');
|
||||
const searchParamsTab = searchParams.get('tab');
|
||||
const currentTabIndex = searchParamsTab !== null ? parseInt(searchParamsTab, 10) :
|
||||
getDefaultTabIndex(location.pathname, searchParams.get('topParentId'));
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
getDefaultTabIndex(location.pathname, searchParamsParentId);
|
||||
|
||||
const getTabComponent = (index: number) => {
|
||||
if (index == null) {
|
||||
|
|
@ -32,72 +30,41 @@ const Movies: FC = () => {
|
|||
|
||||
let component;
|
||||
switch (index) {
|
||||
case 0:
|
||||
component = <MoviesView topParentId={searchParams.get('topParentId')} />;
|
||||
break;
|
||||
|
||||
case 1:
|
||||
component = <SuggestionsView topParentId={searchParams.get('topParentId')} />;
|
||||
component = <SuggestionsView parentId={searchParamsParentId} />;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
component = <TrailersView topParentId={searchParams.get('topParentId')} />;
|
||||
component = <TrailersView parentId={searchParamsParentId} />;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
component = <FavoritesView topParentId={searchParams.get('topParentId')} />;
|
||||
component = <FavoritesView parentId={searchParamsParentId} />;
|
||||
break;
|
||||
|
||||
case 4:
|
||||
component = <CollectionsView topParentId={searchParams.get('topParentId')} />;
|
||||
component = <CollectionsView parentId={searchParamsParentId} />;
|
||||
break;
|
||||
|
||||
case 5:
|
||||
component = <GenresView topParentId={searchParams.get('topParentId')} />;
|
||||
component = <GenresView parentId={searchParamsParentId} />;
|
||||
break;
|
||||
default:
|
||||
component = <MoviesView parentId={searchParamsParentId} />;
|
||||
}
|
||||
|
||||
return component;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const page = element.current;
|
||||
|
||||
if (!page) {
|
||||
console.error('Unexpected null reference');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!page.getAttribute('data-title')) {
|
||||
const parentId = searchParams.get('topParentId');
|
||||
|
||||
if (parentId) {
|
||||
window.ApiClient.getItem(window.ApiClient.getCurrentUserId(), parentId).then((item) => {
|
||||
page.setAttribute('data-title', item.Name as string);
|
||||
libraryMenu.setTitle(item.Name);
|
||||
}).catch(err => {
|
||||
console.error('[movies] failed to fetch library', err);
|
||||
page.setAttribute('data-title', globalize.translate('Movies'));
|
||||
libraryMenu.setTitle(globalize.translate('Movies'));
|
||||
});
|
||||
} else {
|
||||
page.setAttribute('data-title', globalize.translate('Movies'));
|
||||
libraryMenu.setTitle(globalize.translate('Movies'));
|
||||
}
|
||||
}
|
||||
}, [ searchParams ]);
|
||||
|
||||
return (
|
||||
<div ref={element}>
|
||||
<Page
|
||||
id='moviesPage'
|
||||
className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
|
||||
backDropType='movie'
|
||||
>
|
||||
{getTabComponent(currentTabIndex)}
|
||||
<Page
|
||||
id='moviesPage'
|
||||
className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
|
||||
backDropType='movie'
|
||||
>
|
||||
{getTabComponent(currentTabIndex)}
|
||||
|
||||
</Page>
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue