You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.5 KiB
65 lines
1.5 KiB
import React from 'react';
|
|
import { useInView } from 'react-intersection-observer';
|
|
import useSWR from 'swr';
|
|
import TitleCard from '.';
|
|
import type { MovieDetails } from '../../../server/models/Movie';
|
|
import type { TvDetails } from '../../../server/models/Tv';
|
|
|
|
interface TmdbTitleCardProps {
|
|
tmdbId: number;
|
|
type: 'movie' | 'tv';
|
|
}
|
|
|
|
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
|
|
return (movie as MovieDetails).title !== undefined;
|
|
};
|
|
|
|
const TmdbTitleCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
|
|
const { ref, inView } = useInView({
|
|
triggerOnce: true,
|
|
});
|
|
const url =
|
|
type === 'movie' ? `/api/v1/movie/${tmdbId}` : `/api/v1/tv/${tmdbId}`;
|
|
const { data: title, error } = useSWR<MovieDetails | TvDetails>(
|
|
inView ? `${url}` : null
|
|
);
|
|
|
|
if (!title && !error) {
|
|
return (
|
|
<div ref={ref}>
|
|
<TitleCard.Placeholder />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!title) {
|
|
return <TitleCard.Placeholder />;
|
|
}
|
|
|
|
return isMovie(title) ? (
|
|
<TitleCard
|
|
id={title.id}
|
|
image={title.posterPath}
|
|
status={title.mediaInfo?.status}
|
|
summary={title.overview}
|
|
title={title.title}
|
|
userScore={title.voteAverage}
|
|
year={title.releaseDate}
|
|
mediaType={'movie'}
|
|
/>
|
|
) : (
|
|
<TitleCard
|
|
id={title.id}
|
|
image={title.posterPath}
|
|
status={title.mediaInfo?.status}
|
|
summary={title.overview}
|
|
title={title.name}
|
|
userScore={title.voteAverage}
|
|
year={title.firstAirDate}
|
|
mediaType={'tv'}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default TmdbTitleCard;
|