|
|
|
import React, { useContext } from 'react';
|
|
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import useSWR from 'swr';
|
|
|
|
import GenreCard from '../../GenreCard';
|
|
|
|
import Slider from '../../Slider';
|
|
|
|
import { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
|
|
|
|
import { LanguageContext } from '../../../context/LanguageContext';
|
|
|
|
import { genreColorMap } from '../constants';
|
|
|
|
import Link from 'next/link';
|
|
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
|
moviegenres: 'Movie Genres',
|
|
|
|
});
|
|
|
|
|
|
|
|
const MovieGenreSlider: React.FC = () => {
|
|
|
|
const { locale } = useContext(LanguageContext);
|
|
|
|
const intl = useIntl();
|
|
|
|
const { data, error } = useSWR<GenreSliderItem[]>(
|
|
|
|
`/api/v1/discover/genreslider/movie?language=${locale}`,
|
|
|
|
{
|
|
|
|
refreshInterval: 0,
|
|
|
|
revalidateOnFocus: false,
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="slider-header">
|
|
|
|
<Link href="/discover/movies/genres">
|
|
|
|
<a className="slider-title">
|
|
|
|
<span>{intl.formatMessage(messages.moviegenres)}</span>
|
|
|
|
<svg
|
|
|
|
className="w-6 h-6 ml-2"
|
|
|
|
fill="none"
|
|
|
|
stroke="currentColor"
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
>
|
|
|
|
<path
|
|
|
|
strokeLinecap="round"
|
|
|
|
strokeLinejoin="round"
|
|
|
|
strokeWidth={2}
|
|
|
|
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
|
|
/>
|
|
|
|
</svg>
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
<Slider
|
|
|
|
sliderKey="movie-genres"
|
|
|
|
isLoading={!data && !error}
|
|
|
|
isEmpty={false}
|
|
|
|
items={(data ?? []).map((genre, index) => (
|
|
|
|
<GenreCard
|
|
|
|
key={`genre-${genre.id}-${index}`}
|
|
|
|
name={genre.name}
|
|
|
|
image={`https://image.tmdb.org/t/p/w1280_filter(duotone,${
|
|
|
|
genreColorMap[genre.id] ?? genreColorMap[0]
|
|
|
|
})${genre.backdrops[4]}`}
|
|
|
|
url={`/discover/movies/genre/${genre.id}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
placeholder={<GenreCard.Placeholder />}
|
|
|
|
emptyMessage=""
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default React.memo(MovieGenreSlider);
|