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

src/components/Common/ListView/index.tsx

@@ -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;
 

src/components/CompanyCard/index.tsx

@@ -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'

src/components/Discover/MovieGenreList/index.tsx

@@ -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;

src/components/Discover/MovieGenreSlider/index.tsx

@@ -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">
-          <span>{intl.formatMessage(messages.moviegenres)}</span>
+          <a className="slider-title">
-        </div>
+            <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"

src/components/Discover/TvGenreList/index.tsx

@@ -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;

src/components/Discover/TvGenreSlider/index.tsx

@@ -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">
-          <span>{intl.formatMessage(messages.tvgenres)}</span>
+          <a className="slider-title">
-        </div>
+            <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"

src/components/GenreCard/index.tsx

@@ -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'

src/components/MovieDetails/MovieCast/index.tsx

@@ -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}`}>

src/components/MovieDetails/MovieCrew/index.tsx

@@ -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}`}>

src/components/PersonDetails/index.tsx

@@ -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}`}>

src/components/TitleCard/index.tsx

@@ -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')`,

src/components/TvDetails/TvCast/index.tsx

@@ -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}>

src/components/TvDetails/TvCrew/index.tsx

@@ -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}`}>

src/i18n/locale/en.json

@@ -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",

src/pages/discover/movies/genres.tsx

@@ -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;

src/pages/discover/tv/genres.tsx

@@ -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;

src/styles/globals.css

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