shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): change person details page to show appears in titles as list view

Browse Source
This commit is contained in:
sct
2020-12-12 12:39:05 +00:00
parent de01e13dda
commit 7f2be51a7e
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/PersonDetails/index.tsx
View File

@@ -5,7 +5,6 @@ import type { PersonDetail } from '../../../server/models/Person';
import type { PersonCombinedCreditsResponse } from '../../../server/interfaces/api/personInterfaces'; import type { PersonCombinedCreditsResponse } from '../../../server/interfaces/api/personInterfaces';
import Error from '../../pages/_error'; import Error from '../../pages/_error';
import LoadingSpinner from '../Common/LoadingSpinner'; import LoadingSpinner from '../Common/LoadingSpinner';
import Slider from '../Slider';
import TitleCard from '../TitleCard'; import TitleCard from '../TitleCard';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { LanguageContext } from '../../context/LanguageContext'; import { LanguageContext } from '../../context/LanguageContext';
@@ -54,6 +53,8 @@ const PersonDetails: React.FC = () => {
return 1; return 1;
}); });
const isLoading = !combinedCredits && !errorCombinedCredits;
return ( return (
<> <>
<div className="flex mt-8 mb-8 flex-col md:flex-row items-center md:items-start"> <div className="flex mt-8 mb-8 flex-col md:flex-row items-center md:items-start">
@@ -81,13 +82,13 @@ const PersonDetails: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
<Slider <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
isEmpty={!sortedCast} {sortedCast?.map((media) => {
isLoading={!combinedCredits && !errorCombinedCredits}
sliderKey={`person-${data.id}-slider-cast`}
items={sortedCast?.map((media) => {
return ( return (
<div key={`slider-cast-item-${media.id}`} className="flex flex-col"> <li
key={`list-cast-item-${media.id}`}
className="col-span-1 flex flex-col text-center items-center"
>
<TitleCard <TitleCard
id={media.id} id={media.id}
title={media.mediaType === 'movie' ? media.title : media.name} title={media.mediaType === 'movie' ? media.title : media.name}
@@ -101,6 +102,7 @@ const PersonDetails: React.FC = () => {
summary={media.overview} summary={media.overview}
mediaType={media.mediaType as 'movie' | 'tv'} mediaType={media.mediaType as 'movie' | 'tv'}
status={media.mediaInfo?.status} status={media.mediaInfo?.status}
canExpand
/> />
{media.character && ( {media.character && (
<div className="mt-2 text-gray-300 text-xs truncate w-36 sm:w-36 md:w-44 text-center"> <div className="mt-2 text-gray-300 text-xs truncate w-36 sm:w-36 md:w-44 text-center">
@@ -109,10 +111,19 @@ const PersonDetails: React.FC = () => {
})} })}
</div> </div>
)} )}
</div> </li>
); );
})} })}
/> {isLoading &&
[...Array(20)].map((_item, i) => (
<li
key={`placeholder-${i}`}
className="col-span-1 flex flex-col text-center items-center"
>
<TitleCard.Placeholder canExpand />
</li>
))}
</ul>
</> </>
); );
}; };