feat: YouTube Movie/TV Trailers (#454)

* feat: Get Youtube trailers from TMDB API and show on Movie/TV details page

* docs(overseerr-api.yml): remove youtube trailer URL (unused) from OAS

server/api/themoviedb.ts

@@ -197,6 +197,23 @@ export interface TmdbMovieDetails {
     backdrop_path?: string;
   };
   external_ids: TmdbExternalIds;
+  videos: TmdbVideoResult;
+}
+
+export interface TmdbVideo {
+  id: string;
+  key: string;
+  name: string;
+  site: 'YouTube';
+  size: number;
+  type:
+    | 'Clip'
+    | 'Teaser'
+    | 'Trailer'
+    | 'Featurette'
+    | 'Opening Credits'
+    | 'Behind the Scenes'
+    | 'Bloopers';
 }
 
 export interface TmdbTvEpisodeResult {
@@ -284,6 +301,11 @@ export interface TmdbTvDetails {
   keywords: {
     results: TmdbKeyword[];
   };
+  videos: TmdbVideoResult;
+}
+
+export interface TmdbVideoResult {
+  results: TmdbVideo[];
 }
 
 export interface TmdbKeyword {
@@ -453,7 +475,10 @@ class TheMovieDb {
       const response = await this.axios.get<TmdbMovieDetails>(
         `/movie/${movieId}`,
         {
-          params: { language, append_to_response: 'credits,external_ids' },
+          params: {
+            language,
+            append_to_response: 'credits,external_ids,videos',
+          },
         }
       );
 
@@ -474,7 +499,7 @@ class TheMovieDb {
       const response = await this.axios.get<TmdbTvDetails>(`/tv/${tvId}`, {
         params: {
           language,
-          append_to_response: 'credits,external_ids,keywords',
+          append_to_response: 'credits,external_ids,keywords,videos',
         },
       });
 

server/models/Movie.ts

@@ -8,9 +8,26 @@ import {
   mapCrew,
   ExternalIds,
   mapExternalIds,
+  mapVideos,
 } from './common';
 import Media from '../entity/Media';
 
+export interface Video {
+  url?: string;
+  site: 'YouTube';
+  key: string;
+  name: string;
+  size: number;
+  type:
+    | 'Clip'
+    | 'Teaser'
+    | 'Trailer'
+    | 'Featurette'
+    | 'Opening Credits'
+    | 'Behind the Scenes'
+    | 'Bloopers';
+}
+
 export interface MovieDetails {
   id: number;
   imdbId?: string;
@@ -23,6 +40,7 @@ export interface MovieDetails {
   originalTitle: string;
   overview?: string;
   popularity: number;
+  relatedVideos?: Video[];
   posterPath?: string;
   productionCompanies: ProductionCompany[];
   productionCountries: {
@@ -64,6 +82,7 @@ export const mapMovieDetails = (
   adult: movie.adult,
   budget: movie.budget,
   genres: movie.genres,
+  relatedVideos: mapVideos(movie.videos),
   originalLanguage: movie.original_language,
   originalTitle: movie.original_title,
   popularity: movie.popularity,

server/models/Tv.ts

@@ -8,6 +8,7 @@ import {
   ExternalIds,
   mapExternalIds,
   Keyword,
+  mapVideos,
 } from './common';
 import {
   TmdbTvEpisodeResult,
@@ -16,6 +17,7 @@ import {
   TmdbSeasonWithEpisodes,
 } from '../api/themoviedb';
 import type Media from '../entity/Media';
+import { Video } from './Movie';
 
 interface Episode {
   id: number;
@@ -67,6 +69,7 @@ export interface TvDetails {
   genres: Genre[];
   homepage: string;
   inProduction: boolean;
+  relatedVideos?: Video[];
   languages: string[];
   lastAirDate: string;
   lastEpisodeToAir?: Episode;
@@ -145,6 +148,7 @@ export const mapTvDetails = (
     id: genre.id,
     name: genre.name,
   })),
+  relatedVideos: mapVideos(show.videos),
   homepage: show.homepage,
   id: show.id,
   inProduction: show.in_production,

server/models/common.ts

@@ -2,8 +2,12 @@ import {
   TmdbCreditCast,
   TmdbCreditCrew,
   TmdbExternalIds,
+  TmdbVideo,
+  TmdbVideoResult,
 } from '../api/themoviedb';
 
+import { Video } from '../models/Movie';
+
 export interface ProductionCompany {
   id: number;
   logoPath?: string;
@@ -84,3 +88,18 @@ export const mapExternalIds = (eids: TmdbExternalIds): ExternalIds => ({
   tvrageId: eids.tvrage_id,
   twitterId: eids.twitter_id,
 });
+
+export const mapVideos = (videoResult: TmdbVideoResult): Video[] =>
+  videoResult?.results.map(({ key, name, size, type, site }: TmdbVideo) => ({
+    site,
+    key,
+    name,
+    size,
+    type,
+    url: siteUrlCreator(site, key),
+  }));
+
+const siteUrlCreator = (site: Video['site'], key: string): string =>
+  ({
+    YouTube: `https://www.youtube.com/watch?v=${key}/`,
+  }[site]);

server/routes/movie.ts

@@ -4,6 +4,7 @@ import { mapMovieDetails } from '../models/Movie';
 import { mapMovieResult } from '../models/Search';
 import Media from '../entity/Media';
 import RottenTomatoes from '../api/rottentomatoes';
+import logger from '../logger';
 
 const movieRoutes = Router();
 
@@ -11,15 +12,19 @@ movieRoutes.get('/:id', async (req, res, next) => {
   const tmdb = new TheMovieDb();
 
   try {
-    const movie = await tmdb.getMovie({
+    const tmdbMovie = await tmdb.getMovie({
       movieId: Number(req.params.id),
       language: req.query.language as string,
     });
 
-    const media = await Media.getMedia(movie.id);
+    const media = await Media.getMedia(tmdbMovie.id);
 
-    return res.status(200).json(mapMovieDetails(movie, media));
+    return res.status(200).json(mapMovieDetails(tmdbMovie, media));
   } catch (e) {
+    logger.error('Something went wrong getting movie', {
+      label: 'Movie',
+      message: e.message,
+    });
     return next({ status: 404, message: 'Movie does not exist' });
   }
 });