mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-02 20:58:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add movie/series genre list pages (#1194)

Browse Source
This commit is contained in:
TheCatLady
2021-03-15 23:37:35 -04:00
committed by GitHub
parent b767a58b01
commit 6f1a31de47
17 changed files with 199 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Discover/MovieGenreList/index.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React, { useContext } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import useSWR from 'swr';
import GenreCard from '../../GenreCard';
import { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
import { LanguageContext } from '../../../context/LanguageContext';
import { genreColorMap } from '../constants';
import PageTitle from '../../Common/PageTitle';
import Header from '../../Common/Header';
import LoadingSpinner from '../../Common/LoadingSpinner';
import Error from '../../../pages/_error';
const messages = defineMessages({
moviegenres: 'Movie Genres',
});
const MovieGenreList: React.FC = () => {
const { locale } = useContext(LanguageContext);
const intl = useIntl();
const { data, error } = useSWR<GenreSliderItem[]>(
`/api/v1/discover/genreslider/movie?language=${locale}`
);
if (!data && !error) {
return <LoadingSpinner />;
}
if (!data) {
return <Error statusCode={404} />;
}
return (
<>
<PageTitle title={intl.formatMessage(messages.moviegenres)} />
<div className="mt-1 mb-5">
<Header>{intl.formatMessage(messages.moviegenres)}</Header>
</div>
<ul className="cards-horizontal">
{data.map((genre, index) => (
<li key={`genre-${genre.id}-${index}`}>
<GenreCard
name={genre.name}
image={`https://www.themoviedb.org/t/p/w1280_filter(duotone,${
genreColorMap[genre.id] ?? genreColorMap[0]
})${genre.backdrops[4]}`}
url={`/discover/movies/genre/${genre.id}`}
canExpand
/>
</li>
))}
</ul>
</>
);
};
export default MovieGenreList;

23
src/components/Discover/MovieGenreSlider/index.tsx
View File

@@ -6,6 +6,7 @@ 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',
@@ -25,9 +26,25 @@ const MovieGenreSlider: React.FC = () => {
return (
<>
<div className="slider-header">
<div className="slider-title">
<span>{intl.formatMessage(messages.moviegenres)}</span>
</div>
<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"

56
src/components/Discover/TvGenreList/index.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React, { useContext } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import useSWR from 'swr';
import GenreCard from '../../GenreCard';
import { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
import { LanguageContext } from '../../../context/LanguageContext';
import { genreColorMap } from '../constants';
import PageTitle from '../../Common/PageTitle';
import Header from '../../Common/Header';
import LoadingSpinner from '../../Common/LoadingSpinner';
import Error from '../../../pages/_error';
const messages = defineMessages({
seriesgenres: 'Series Genres',
});
const TvGenreList: React.FC = () => {
const { locale } = useContext(LanguageContext);
const intl = useIntl();
const { data, error } = useSWR<GenreSliderItem[]>(
`/api/v1/discover/genreslider/tv?language=${locale}`
);
if (!data && !error) {
return <LoadingSpinner />;
}
if (!data) {
return <Error statusCode={404} />;
}
return (
<>
<PageTitle title={intl.formatMessage(messages.seriesgenres)} />
<div className="mt-1 mb-5">
<Header>{intl.formatMessage(messages.seriesgenres)}</Header>
</div>
<ul className="cards-horizontal">
{data.map((genre, index) => (
<li key={`genre-${genre.id}-${index}`}>
<GenreCard
name={genre.name}
image={`https://www.themoviedb.org/t/p/w1280_filter(duotone,${
genreColorMap[genre.id] ?? genreColorMap[0]
})${genre.backdrops[4]}`}
url={`/discover/tv/genre/${genre.id}`}
canExpand
/>
</li>
))}
</ul>
</>
);
};
export default TvGenreList;

23
src/components/Discover/TvGenreSlider/index.tsx
View File

@@ -6,6 +6,7 @@ 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({
tvgenres: 'Series Genres',
@@ -25,9 +26,25 @@ const TvGenreSlider: React.FC = () => {
return (
<>
<div className="slider-header">
<div className="slider-title">
<span>{intl.formatMessage(messages.tvgenres)}</span>
</div>
<Link href="/discover/tv/genres">
<a className="slider-title">
<span>{intl.formatMessage(messages.tvgenres)}</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="tv-genres"