feat(frontend/api): tv details page

server/api/themoviedb.ts

@@ -238,6 +238,10 @@ export interface TmdbTvDetails {
   type: string;
   vote_average: number;
   vote_count: number;
+  credits: {
+    cast: TmdbCreditCast[];
+    crew: TmdbCreditCrew[];
+  };
 }
 
 class TheMovieDb {
@@ -304,7 +308,7 @@ class TheMovieDb {
   }): Promise<TmdbTvDetails> => {
     try {
       const response = await this.axios.get<TmdbTvDetails>(`/tv/${tvId}`, {
-        params: { language },
+        params: { language, append_to_response: 'credits' },
       });
 
       return response.data;
@@ -365,6 +369,60 @@ class TheMovieDb {
     }
   }
 
+  public async getTvRecommendations({
+    tvId,
+    page = 1,
+    language = 'en-US',
+  }: {
+    tvId: number;
+    page?: number;
+    language?: string;
+  }): Promise<TmdbSearchTvResponse> {
+    try {
+      const response = await this.axios.get<TmdbSearchTvResponse>(
+        `/tv/${tvId}/recommendations`,
+        {
+          params: {
+            page,
+            language,
+          },
+        }
+      );
+
+      return response.data;
+    } catch (e) {
+      throw new Error(
+        `[TMDB] Failed to fetch tv recommendations: ${e.message}`
+      );
+    }
+  }
+
+  public async getTvSimilar({
+    tvId,
+    page = 1,
+    language = 'en-US',
+  }: {
+    tvId: number;
+    page?: number;
+    language?: string;
+  }): Promise<TmdbSearchTvResponse> {
+    try {
+      const response = await this.axios.get<TmdbSearchTvResponse>(
+        `/tv/${tvId}/similar`,
+        {
+          params: {
+            page,
+            language,
+          },
+        }
+      );
+
+      return response.data;
+    } catch (e) {
+      throw new Error(`[TMDB] Failed to fetch tv similar: ${e.message}`);
+    }
+  }
+
   public getDiscoverMovies = async ({
     sortBy = 'popularity.desc',
     page = 1,

server/models/Movie.ts

@@ -1,31 +1,13 @@
-import {
+import { TmdbMovieDetails } from '../api/themoviedb';
-  TmdbMovieDetails,
-  TmdbCreditCast,
-  TmdbCreditCrew,
-} from '../api/themoviedb';
 import { MediaRequest } from '../entity/MediaRequest';
-import { ProductionCompany, Genre } from './common';
+import {
-
+  ProductionCompany,
-export interface Cast {
+  Genre,
-  id: number;
+  Cast,
-  castId: number;
+  Crew,
-  character: string;
+  mapCast,
-  creditId: string;
+  mapCrew,
-  gender?: number;
+} from './common';
-  name: string;
-  order: number;
-  profilePath?: string;
-}
-
-export interface Crew {
-  id: number;
-  creditId: string;
-  department: string;
-  gender?: number;
-  job: string;
-  name: string;
-  profilePath?: string;
-}
 
 export interface MovieDetails {
   id: number;
@@ -65,27 +47,6 @@ export interface MovieDetails {
   request?: MediaRequest;
 }
 
-const mapCast = (person: TmdbCreditCast): Cast => ({
-  castId: person.cast_id,
-  character: person.character,
-  creditId: person.credit_id,
-  id: person.id,
-  name: person.name,
-  order: person.order,
-  gender: person.gender,
-  profilePath: person.profile_path,
-});
-
-const mapCrew = (person: TmdbCreditCrew): Crew => ({
-  creditId: person.credit_id,
-  department: person.department,
-  id: person.id,
-  job: person.job,
-  name: person.name,
-  gender: person.gender,
-  profilePath: person.profile_path,
-});
-
 export const mapMovieDetails = (
   movie: TmdbMovieDetails,
   request?: MediaRequest

server/models/Tv.ts

@@ -1,4 +1,11 @@
-import { Genre, ProductionCompany } from './common';
+import {
+  Genre,
+  ProductionCompany,
+  Cast,
+  Crew,
+  mapCast,
+  mapCrew,
+} from './common';
 import { MediaRequest } from '../entity/MediaRequest';
 import {
   TmdbTvEpisodeDetails,
@@ -64,6 +71,10 @@ export interface TvDetails {
   type: string;
   voteAverage: number;
   voteCount: number;
+  credits: {
+    cast: Cast[];
+    crew: Crew[];
+  };
   request?: MediaRequest;
 }
 
@@ -140,5 +151,9 @@ export const mapTvDetails = (
     ? mapEpisodeDetails(show.next_episode_to_air)
     : undefined,
   posterPath: show.poster_path,
+  credits: {
+    cast: show.credits.cast.map(mapCast),
+    crew: show.credits.crew.map(mapCrew),
+  },
   request,
 });

server/models/common.ts

@@ -1,3 +1,5 @@
+import { TmdbCreditCast, TmdbCreditCrew } from '../api/themoviedb';
+
 export interface ProductionCompany {
   id: number;
   logoPath?: string;
@@ -9,3 +11,45 @@ export interface Genre {
   id: number;
   name: string;
 }
+
+export interface Cast {
+  id: number;
+  castId: number;
+  character: string;
+  creditId: string;
+  gender?: number;
+  name: string;
+  order: number;
+  profilePath?: string;
+}
+
+export interface Crew {
+  id: number;
+  creditId: string;
+  department: string;
+  gender?: number;
+  job: string;
+  name: string;
+  profilePath?: string;
+}
+
+export const mapCast = (person: TmdbCreditCast): Cast => ({
+  castId: person.cast_id,
+  character: person.character,
+  creditId: person.credit_id,
+  id: person.id,
+  name: person.name,
+  order: person.order,
+  gender: person.gender,
+  profilePath: person.profile_path,
+});
+
+export const mapCrew = (person: TmdbCreditCrew): Crew => ({
+  creditId: person.credit_id,
+  department: person.department,
+  id: person.id,
+  job: person.job,
+  name: person.name,
+  gender: person.gender,
+  profilePath: person.profile_path,
+});

server/overseerr-api.yml

@@ -562,6 +562,17 @@ components:
           type: number
         voteCount:
           type: number
+        credits:
+          type: object
+          properties:
+            cast:
+              type: array
+              items:
+                $ref: '#/components/schemas/Cast'
+            crew:
+              type: array
+              items:
+                $ref: '#/components/schemas/Crew'
         request:
           $ref: '#/components/schemas/MediaRequest'
     MediaRequest:
@@ -1415,6 +1426,11 @@ paths:
           schema:
             type: number
             example: 76479
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
       responses:
         '200':
           description: TV details
@@ -1422,6 +1438,96 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/TvDetails'
+  /tv/{tvId}/recommendations:
+    get:
+      summary: Request recommended tv series
+      description: Returns list of recommended tv series based on provided tv ID in JSON format
+      tags:
+        - tv
+      parameters:
+        - in: path
+          name: tvId
+          required: true
+          schema:
+            type: number
+            example: 76479
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: List of tv series
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/TvResult'
+  /tv/{tvId}/similar:
+    get:
+      summary: Request similar tv series
+      description: Returns list of similar tv series based on provided movie ID in JSON format
+      tags:
+        - tv
+      parameters:
+        - in: path
+          name: tvId
+          required: true
+          schema:
+            type: number
+            example: 76479
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: List of tv series
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/TvResult'
 
 security:
   - cookieAuth: []

server/routes/tv.ts

@@ -2,17 +2,73 @@ import { Router } from 'express';
 import TheMovieDb from '../api/themoviedb';
 import { MediaRequest } from '../entity/MediaRequest';
 import { mapTvDetails } from '../models/Tv';
+import { mapTvResult } from '../models/Search';
 
 const tvRoutes = Router();
 
 tvRoutes.get('/:id', async (req, res) => {
   const tmdb = new TheMovieDb();
 
-  const tv = await tmdb.getTvShow({ tvId: Number(req.params.id) });
+  const tv = await tmdb.getTvShow({
+    tvId: Number(req.params.id),
+    language: req.query.language as string,
+  });
 
   const request = await MediaRequest.getRequest(tv.id);
 
   return res.status(200).json(mapTvDetails(tv, request));
 });
 
+tvRoutes.get('/:id/recommendations', async (req, res) => {
+  const tmdb = new TheMovieDb();
+
+  const results = await tmdb.getTvRecommendations({
+    tvId: Number(req.params.id),
+    page: Number(req.query.page),
+    language: req.query.language as string,
+  });
+
+  const requests = await MediaRequest.getRelatedRequests(
+    results.results.map((result) => result.id)
+  );
+
+  return res.status(200).json({
+    page: results.page,
+    totalPages: results.total_pages,
+    totalResults: results.total_results,
+    results: results.results.map((result) =>
+      mapTvResult(
+        result,
+        requests.find((req) => req.mediaId === result.id)
+      )
+    ),
+  });
+});
+
+tvRoutes.get('/:id/similar', async (req, res) => {
+  const tmdb = new TheMovieDb();
+
+  const results = await tmdb.getTvSimilar({
+    tvId: Number(req.params.id),
+    page: Number(req.query.page),
+    language: req.query.language as string,
+  });
+
+  const requests = await MediaRequest.getRelatedRequests(
+    results.results.map((result) => result.id)
+  );
+
+  return res.status(200).json({
+    page: results.page,
+    totalPages: results.total_pages,
+    totalResults: results.total_results,
+    results: results.results.map((result) =>
+      mapTvResult(
+        result,
+        requests.find((req) => req.mediaId === result.id)
+      )
+    ),
+  });
+});
+
 export default tvRoutes;

src/components/TvDetails/TvRecommendations.tsx

@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+import { useSWRInfinite } from 'swr';
+import type { TvResult } from '../../../server/models/Search';
+import ListView from '../Common/ListView';
+import { useRouter } from 'next/router';
+import { LanguageContext } from '../../context/LanguageContext';
+
+interface SearchResult {
+  page: number;
+  totalResults: number;
+  totalPages: number;
+  results: TvResult[];
+}
+
+const TvRecommendations: React.FC = () => {
+  const { locale } = useContext(LanguageContext);
+  const router = useRouter();
+  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
+    (pageIndex: number, previousPageData: SearchResult | null) => {
+      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
+        return null;
+      }
+
+      return `/api/v1/tv/${router.query.tvId}/recommendations?page=${
+        pageIndex + 1
+      }&language=${locale}`;
+    },
+    {
+      initialSize: 3,
+    }
+  );
+
+  const isLoadingInitialData = !data && !error;
+  const isLoadingMore =
+    isLoadingInitialData ||
+    (size > 0 && data && typeof data[size - 1] === 'undefined');
+
+  const fetchMore = () => {
+    setSize(size + 1);
+  };
+
+  if (error) {
+    return <div>{error}</div>;
+  }
+
+  const titles = data?.reduce((a, v) => [...a, ...v.results], [] as TvResult[]);
+
+  return (
+    <>
+      <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
+        <div className="flex-1 min-w-0">
+          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
+            Recommendations
+          </h2>
+        </div>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default TvRecommendations;

src/components/TvDetails/TvSimilar.tsx

@@ -0,0 +1,72 @@
+import React, { useContext } from 'react';
+import { useSWRInfinite } from 'swr';
+import { MovieResult } from '../../../server/models/Search';
+import ListView from '../Common/ListView';
+import { useRouter } from 'next/router';
+import { LanguageContext } from '../../context/LanguageContext';
+
+interface SearchResult {
+  page: number;
+  totalResults: number;
+  totalPages: number;
+  results: MovieResult[];
+}
+
+const TvSimilar: React.FC = () => {
+  const router = useRouter();
+  const { locale } = useContext(LanguageContext);
+  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
+    (pageIndex: number, previousPageData: SearchResult | null) => {
+      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
+        return null;
+      }
+
+      return `/api/v1/tv/${router.query.tvId}/similar?page=${
+        pageIndex + 1
+      }&language=${locale}`;
+    },
+    {
+      initialSize: 3,
+    }
+  );
+
+  const isLoadingInitialData = !data && !error;
+  const isLoadingMore =
+    isLoadingInitialData ||
+    (size > 0 && data && typeof data[size - 1] === 'undefined');
+
+  const fetchMore = () => {
+    setSize(size + 1);
+  };
+
+  if (error) {
+    return <div>{error}</div>;
+  }
+
+  const titles = data?.reduce(
+    (a, v) => [...a, ...v.results],
+    [] as MovieResult[]
+  );
+
+  return (
+    <>
+      <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
+        <div className="flex-1 min-w-0">
+          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
+            Similar Series
+          </h2>
+        </div>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default TvSimilar;

src/components/TvDetails/index.tsx

@@ -0,0 +1,465 @@
+import React, { useState, useContext } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import { useRouter } from 'next/router';
+import { useToasts } from 'react-toast-notifications';
+import Button from '../Common/Button';
+import MovieRequestModal from '../RequestModal/MovieRequestModal';
+import type { MediaRequest } from '../../../server/entity/MediaRequest';
+import axios from 'axios';
+import type { TvResult } from '../../../server/models/Search';
+import Link from 'next/link';
+import Slider from '../Slider';
+import TitleCard from '../TitleCard';
+import PersonCard from '../PersonCard';
+import { LanguageContext } from '../../context/LanguageContext';
+import LoadingSpinner from '../Common/LoadingSpinner';
+import { useUser, Permission } from '../../hooks/useUser';
+import PendingRequest from '../PendingRequest';
+import { TvDetails as TvDetailsType } from '../../../server/models/Tv';
+
+const messages = defineMessages({
+  userrating: 'User Rating',
+  status: 'Status',
+  originallanguage: 'Original Language',
+  overview: 'Overview',
+  cast: 'Cast',
+  recommendations: 'Recommendations',
+  similar: 'Similar Series',
+  cancelrequest: 'Cancel Request',
+  available: 'Available',
+  unavailable: 'Unavailable',
+  request: 'Request',
+  pending: 'Pending',
+  overviewunavailable: 'Overview unavailable',
+});
+
+interface TvDetailsProps {
+  tv?: TvDetailsType;
+}
+
+interface SearchResult {
+  page: number;
+  totalResults: number;
+  totalPages: number;
+  results: TvResult[];
+}
+
+enum MediaRequestStatus {
+  PENDING = 1,
+  APPROVED,
+  DECLINED,
+  AVAILABLE,
+}
+
+const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
+  const { user, hasPermission } = useUser();
+  const router = useRouter();
+  const intl = useIntl();
+  const { locale } = useContext(LanguageContext);
+  const { addToast } = useToasts();
+  const [showRequestModal, setShowRequestModal] = useState(false);
+  const [showCancelModal, setShowCancelModal] = useState(false);
+  const { data, error, revalidate } = useSWR<TvDetailsType>(
+    `/api/v1/tv/${router.query.tvId}?language=${locale}`,
+    {
+      initialData: tv,
+    }
+  );
+  const { data: recommended, error: recommendedError } = useSWR<SearchResult>(
+    `/api/v1/tv/${router.query.tvId}/recommendations?language=${locale}`
+  );
+  const { data: similar, error: similarError } = useSWR<SearchResult>(
+    `/api/v1/tv/${router.query.tvId}/similar?language=${locale}`
+  );
+
+  const request = async () => {
+    const response = await axios.post<MediaRequest>('/api/v1/request', {
+      mediaId: data?.id,
+      mediaType: 'movie',
+    });
+
+    if (response.data) {
+      revalidate();
+      addToast(
+        <span>
+          <strong>{data?.name}</strong> succesfully requested!
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+    }
+  };
+
+  const cancelRequest = async () => {
+    const response = await axios.delete<MediaRequest>(
+      `/api/v1/request/${data?.request?.id}`
+    );
+
+    if (response.data.id) {
+      revalidate();
+    }
+  };
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <div>Broken?</div>;
+  }
+
+  return (
+    <div
+      className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "
+      style={{
+        height: 493,
+        backgroundImage: `linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
+      }}
+    >
+      <MovieRequestModal
+        type="request"
+        visible={showRequestModal}
+        title={data.name}
+        onCancel={() => setShowRequestModal(false)}
+        onOk={() => request()}
+      />
+      <MovieRequestModal
+        type="cancel"
+        visible={showCancelModal}
+        title={data.name}
+        onCancel={() => setShowCancelModal(false)}
+        onOk={() => cancelRequest()}
+      />
+      <div className="flex flex-col items-center md:flex-row md:items-end pt-4">
+        <div className="mr-4 flex-shrink-0">
+          <img
+            src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
+            alt=""
+            className="rounded md:rounded-lg shadow md:shadow-2xl w-32 md:w-52"
+          />
+        </div>
+        <div className="text-white flex flex-col mr-4 mt-4 md:mt-0 text-center md:text-left">
+          <span className="md:text-2xl md:leading-none">
+            {data.firstAirDate.slice(0, 4)}
+          </span>
+          <h1 className="text-2xl md:text-4xl">{data.name}</h1>
+          <span className="text-xs md:text-base mt-1 md:mt-0">
+            {data.genres.map((g) => g.name).join(', ')}
+          </span>
+        </div>
+        <div className="flex-1 flex justify-end mt-4 md:mt-0">
+          {!data.request && (
+            <Button
+              buttonType="primary"
+              onClick={() => setShowRequestModal(true)}
+            >
+              <svg
+                className="w-4 mr-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                />
+              </svg>
+              <FormattedMessage {...messages.request} />
+            </Button>
+          )}
+          {data.request?.status === MediaRequestStatus.PENDING && (
+            <Button
+              buttonType="warning"
+              onClick={() => {
+                if (data.request?.requestedBy.id === user?.id)
+                  setShowCancelModal(true);
+              }}
+            >
+              <svg
+                className="w-4 mr-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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                />
+              </svg>
+              {data.request?.requestedBy.id === user?.id
+                ? intl.formatMessage(messages.cancelrequest)
+                : intl.formatMessage(messages.pending)}
+            </Button>
+          )}
+          {data.request?.status === MediaRequestStatus.APPROVED && (
+            <Button buttonType="danger">
+              <svg
+                className="w-5 mr-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <FormattedMessage {...messages.unavailable} />
+            </Button>
+          )}
+          {data.request?.status === MediaRequestStatus.AVAILABLE && (
+            <Button buttonType="success">
+              <svg
+                className="w-5 mr-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M5 13l4 4L19 7"
+                />
+              </svg>
+              <FormattedMessage {...messages.available} />
+            </Button>
+          )}
+          <Button buttonType="danger" className="ml-2">
+            <svg
+              className="w-5"
+              style={{ height: 20 }}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </Button>
+          {hasPermission(Permission.MANAGE_REQUESTS) && (
+            <Button buttonType="default" className="ml-2">
+              <svg
+                className="w-5"
+                style={{ height: 20 }}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
+              </svg>
+            </Button>
+          )}
+        </div>
+      </div>
+      <div className="flex pt-8 text-white flex-col md:flex-row pb-4">
+        <div className="flex-1 md:mr-8">
+          {data.request?.status === MediaRequestStatus.PENDING &&
+            hasPermission(Permission.MANAGE_REQUESTS) && (
+              <PendingRequest
+                request={data.request}
+                onUpdate={() => revalidate()}
+              />
+            )}
+          <h2 className="text-xl md:text-2xl">
+            <FormattedMessage {...messages.overview} />
+          </h2>
+          <p className="pt-2 text-sm md:text-base">
+            {data.overview
+              ? data.overview
+              : intl.formatMessage(messages.overviewunavailable)}
+          </p>
+        </div>
+        <div className="w-full md:w-80 mt-8 md:mt-0">
+          <div className="bg-cool-gray-900 rounded-lg shadow border border-cool-gray-800">
+            {data.voteCount > 0 && (
+              <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+                <span className="text-sm">
+                  <FormattedMessage {...messages.userrating} />
+                </span>
+                <span className="flex-1 text-right text-cool-gray-400 text-sm">
+                  {data.voteAverage}/10
+                </span>
+              </div>
+            )}
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+              <span className="text-sm">
+                <FormattedMessage {...messages.status} />
+              </span>
+              <span className="flex-1 text-right text-cool-gray-400 text-sm">
+                {data.status}
+              </span>
+            </div>
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+              <span className="text-sm">
+                <FormattedMessage {...messages.originallanguage} />
+              </span>
+              <span className="flex-1 text-right text-cool-gray-400 text-sm">
+                {data.originalLanguage}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+        <div className="flex-1 min-w-0">
+          <Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>
+                <FormattedMessage {...messages.cast} />
+              </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>
+      </div>
+      <Slider
+        sliderKey="cast"
+        isLoading={!data && !error}
+        isEmpty={false}
+        items={data?.credits.cast.slice(0, 20).map((person) => (
+          <PersonCard
+            key={`cast-item-${person.id}`}
+            name={person.name}
+            subName={person.character}
+            profilePath={person.profilePath}
+          />
+        ))}
+      />
+      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+        <div className="flex-1 min-w-0">
+          <Link
+            href="/tv/[tvId]/recommendations"
+            as={`/tv/${data.id}/recommendations`}
+          >
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>
+                <FormattedMessage {...messages.recommendations} />
+              </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>
+      </div>
+      <Slider
+        sliderKey="recommendations"
+        isLoading={!recommended && !recommendedError}
+        isEmpty={false}
+        items={recommended?.results.map((title) => (
+          <TitleCard
+            key={`recommended-${title.id}`}
+            id={title.id}
+            image={title.posterPath}
+            status={title.request?.status}
+            summary={title.overview}
+            title={title.name}
+            userScore={title.voteAverage}
+            year={title.firstAirDate}
+            mediaType={title.mediaType}
+            requestId={title.request?.id}
+          />
+        ))}
+      />
+      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+        <div className="flex-1 min-w-0">
+          <Link href="/tv/[tvId]/similar" as={`/tv/${data.id}/similar`}>
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>
+                <FormattedMessage {...messages.similar} />
+              </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>
+      </div>
+      <Slider
+        sliderKey="similar"
+        isLoading={!similar && !similarError}
+        isEmpty={false}
+        items={similar?.results.map((title) => (
+          <TitleCard
+            key={`recommended-${title.id}`}
+            id={title.id}
+            image={title.posterPath}
+            status={title.request?.status}
+            summary={title.overview}
+            title={title.name}
+            userScore={title.voteAverage}
+            year={title.firstAirDate}
+            mediaType={title.mediaType}
+            requestId={title.request?.id}
+          />
+        ))}
+      />
+      <div className="pb-8" />
+    </div>
+  );
+};
+
+export default TvDetails;

src/pages/tv/[tvId]/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { NextPage } from 'next';
+import axios from 'axios';
+import { parseCookies } from 'nookies';
+import TvDetails from '../../../components/TvDetails';
+import type { TvDetails as TvDetailsType } from '../../../../server/models/Tv';
+
+interface TvPageProps {
+  tv?: TvDetailsType;
+}
+
+const TvPage: NextPage<TvPageProps> = ({ tv }) => {
+  return <TvDetails tv={tv} />;
+};
+
+TvPage.getInitialProps = async (ctx) => {
+  if (ctx.req) {
+    const cookies = parseCookies(ctx);
+    const response = await axios.get<TvDetailsType>(
+      `http://localhost:${process.env.PORT || 3000}/api/v1/tv/${
+        ctx.query.tvId
+      }${cookies.locale ? `?language=${cookies.locale}` : ''}`,
+      {
+        headers: ctx.req?.headers?.cookie
+          ? { cookie: ctx.req.headers.cookie }
+          : undefined,
+      }
+    );
+
+    return {
+      tv: response.data,
+    };
+  }
+
+  return {};
+};
+
+export default TvPage;

src/pages/tv/[tvId]/recommendations.tsx

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

src/pages/tv/[tvId]/similar.tsx

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