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

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

2
src/components/Common/ListView/index.tsx
View File

@@ -37,7 +37,7 @@ const ListView: React.FC<ListViewProps> = ({
{intl.formatMessage(messages.noresults)}
</div>
)}
<ul className="cardList">
<ul className="cards-vertical">
{items?.map((title, index) => {
let titleCard: React.ReactNode;

2
src/components/CompanyCard/index.tsx
View File

@@ -13,7 +13,7 @@ const CompanyCard: React.FC<CompanyCardProps> = ({ image, url, name }) => {
return (
<Link href={url}>
<a
className={`relative flex items-center justify-center h-32 w-64 sm:h-36 sm:w-72 p-8 shadow transition ease-in-out duration-300 cursor-pointer transform-gpu ring-1 ${
className={`relative flex items-center justify-center h-32 w-56 sm:h-36 sm:w-72 p-8 shadow transition ease-in-out duration-300 cursor-pointer transform-gpu ring-1 ${
isHovered
? 'bg-gray-700 scale-105 ring-gray-500'
: 'bg-gray-800 scale-100 ring-gray-700'

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;

21
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">
<Link href="/discover/movies/genres">
<a className="slider-title">
<span>{intl.formatMessage(messages.moviegenres)}</span>
</div>
<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;

21
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">
<Link href="/discover/tv/genres">
<a className="slider-title">
<span>{intl.formatMessage(messages.tvgenres)}</span>
</div>
<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"

12
src/components/GenreCard/index.tsx
View File

@@ -6,15 +6,23 @@ interface GenreCardProps {
name: string;
image: string;
url: string;
canExpand?: boolean;
}
const GenreCard: React.FC<GenreCardProps> = ({ image, url, name }) => {
const GenreCard: React.FC<GenreCardProps> = ({
image,
url,
name,
canExpand = false,
}) => {
const [isHovered, setHovered] = useState(false);
return (
<Link href={url}>
<a
className={`relative flex items-center justify-center h-32 w-56 sm:h-40 sm:w-72 p-8 shadow transition ease-in-out duration-300 cursor-pointer transform-gpu ring-1 ${
className={`relative flex items-center justify-center h-32 sm:h-36 ${
canExpand ? 'w-full' : 'w-56 sm:w-72'
} p-8 shadow transition ease-in-out duration-300 cursor-pointer transform-gpu ring-1 ${
isHovered
? 'bg-gray-700 scale-105 ring-gray-500 bg-opacity-100'
: 'bg-gray-800 scale-100 ring-gray-700 bg-opacity-80'

2
src/components/MovieDetails/MovieCast/index.tsx
View File

@@ -45,7 +45,7 @@ const MovieCast: React.FC = () => {
{intl.formatMessage(messages.fullcast)}
</Header>
</div>
<ul className="cardList">
<ul className="cards-vertical">
{data?.credits.cast.map((person, index) => {
return (
<li key={`cast-${person.id}-${index}`}>

2
src/components/MovieDetails/MovieCrew/index.tsx
View File

@@ -45,7 +45,7 @@ const MovieCrew: React.FC = () => {
{intl.formatMessage(messages.fullcrew)}
</Header>
</div>
<ul className="cardList">
<ul className="cards-vertical">
{data?.credits.crew.map((person, index) => {
return (
<li key={`crew-${person.id}-${index}`}>

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

@@ -90,7 +90,7 @@ const PersonDetails: React.FC = () => {
<span>{intl.formatMessage(messages.appearsin)}</span>
</div>
</div>
<ul className="cardList">
<ul className="cards-vertical">
{sortedCast?.map((media, index) => {
return (
<li key={`list-cast-item-${media.id}-${index}`}>
@@ -130,7 +130,7 @@ const PersonDetails: React.FC = () => {
<span>{intl.formatMessage(messages.crewmember)}</span>
</div>
</div>
<ul className="cardList">
<ul className="cards-vertical">
{sortedCrew?.map((media, index) => {
return (
<li key={`list-crew-item-${media.id}-${index}`}>

3
src/components/TitleCard/index.tsx
View File

@@ -81,12 +81,13 @@ const TitleCard: React.FC<TitleCardProps> = ({
onCancel={closeModal}
/>
<div
className={`transition duration-300 transform-gpu scale-100 outline-none cursor-default titleCard rounded-xl ring-1 ${
className={`transition duration-300 transform-gpu scale-100 outline-none cursor-default relative bg-gray-800 bg-cover rounded-xl ring-1 ${
showDetail
? 'scale-105 shadow-lg ring-gray-500'
: 'shadow ring-gray-700'
}`}
style={{
paddingBottom: '150%',
backgroundImage: image
? `url(//image.tmdb.org/t/p/w300_and_h450_face${image})`
: `url('/images/overseerr_poster_not_found_logo_top.png')`,

2
src/components/TvDetails/TvCast/index.tsx
View File

@@ -47,7 +47,7 @@ const TvCast: React.FC = () => {
{intl.formatMessage(messages.fullseriescast)}
</Header>
</div>
<ul className="cardList">
<ul className="cards-vertical">
{data?.credits.cast.map((person) => {
return (
<li key={person.id}>

2
src/components/TvDetails/TvCrew/index.tsx
View File

@@ -47,7 +47,7 @@ const TvCrew: React.FC = () => {
{intl.formatMessage(messages.fullseriescrew)}
</Header>
</div>
<ul className="cardList">
<ul className="cards-vertical">
{data?.credits.crew.map((person, index) => {
return (
<li key={`crew-${person.id}-${index}`}>

2
src/i18n/locale/en.json
View File

@@ -20,9 +20,11 @@
"components.Discover.DiscoverStudio.studioMovies": "{studio} Movies",
"components.Discover.DiscoverTvGenre.genreSeries": "{genre} Series",
"components.Discover.DiscoverTvLanguage.languageSeries": "{language} Series",
"components.Discover.MovieGenreList.moviegenres": "Movie Genres",
"components.Discover.MovieGenreSlider.moviegenres": "Movie Genres",
"components.Discover.NetworkSlider.networks": "Networks",
"components.Discover.StudioSlider.studios": "Studios",
"components.Discover.TvGenreList.seriesgenres": "Series Genres",
"components.Discover.TvGenreSlider.tvgenres": "Series Genres",
"components.Discover.discover": "Discover",
"components.Discover.discovermovies": "Popular Movies",

9
src/pages/discover/movies/genres.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
import { NextPage } from 'next';
import MovieGenreList from '../../../components/Discover/MovieGenreList';
const MovieGenresPage: NextPage = () => {
return <MovieGenreList />;
};
export default MovieGenresPage;

9
src/pages/discover/tv/genres.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
import { NextPage } from 'next';
import TvGenreList from '../../../components/Discover/TvGenreList';
const TvGenresPage: NextPage = () => {
return <TvGenreList />;
};
export default TvGenresPage;

15
src/styles/globals.css
View File

@@ -16,18 +16,17 @@ body {
background: #f19a30;
}
ul.cardList {
ul.cards-vertical,
ul.cards-horizontal {
@apply grid gap-4;
}
ul.cards-vertical {
grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
}
ul.cardList > li {
@apply flex flex-col items-center col-span-1 text-center;
}
.titleCard {
@apply relative bg-gray-800 bg-cover;
padding-bottom: 150%;
ul.cards-horizontal {
grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}
.slider-header {