feat: list streaming providers on movie/TV detail pages (#1778)

* feat: list streaming providers on movie/TV detail pages

* fix(ui): add margin to media fact value

server/models/Movie.ts

@@ -3,18 +3,20 @@ import type {
   TmdbMovieReleaseResult,
   TmdbProductionCompany,
 } from '../api/themoviedb/interfaces';
+import Media from '../entity/Media';
 import {
-  ProductionCompany,
-  Genre,
   Cast,
   Crew,
+  ExternalIds,
+  Genre,
   mapCast,
   mapCrew,
-  ExternalIds,
   mapExternalIds,
   mapVideos,
+  mapWatchProviders,
+  ProductionCompany,
+  WatchProviders,
 } from './common';
-import Media from '../entity/Media';
 
 export interface Video {
   url?: string;
@@ -78,6 +80,7 @@ export interface MovieDetails {
   mediaInfo?: Media;
   externalIds: ExternalIds;
   plexUrl?: string;
+  watchProviders?: WatchProviders[];
 }
 
 export const mapProductionCompany = (
@@ -136,4 +139,5 @@ export const mapMovieDetails = (
     : undefined,
   externalIds: mapExternalIds(movie.external_ids),
   mediaInfo: media,
+  watchProviders: mapWatchProviders(movie['watch/providers']?.results ?? {}),
 });

server/models/Tv.ts

@@ -1,25 +1,27 @@
-import {
-  Genre,
-  ProductionCompany,
-  Cast,
-  Crew,
-  mapAggregateCast,
-  mapCrew,
-  ExternalIds,
-  mapExternalIds,
-  Keyword,
-  mapVideos,
-  TvNetwork,
-} from './common';
 import type {
-  TmdbTvEpisodeResult,
-  TmdbTvSeasonResult,
-  TmdbTvDetails,
-  TmdbSeasonWithEpisodes,
-  TmdbTvRatingResult,
   TmdbNetwork,
+  TmdbSeasonWithEpisodes,
+  TmdbTvDetails,
+  TmdbTvEpisodeResult,
+  TmdbTvRatingResult,
+  TmdbTvSeasonResult,
 } from '../api/themoviedb/interfaces';
 import type Media from '../entity/Media';
+import {
+  Cast,
+  Crew,
+  ExternalIds,
+  Genre,
+  Keyword,
+  mapAggregateCast,
+  mapCrew,
+  mapExternalIds,
+  mapVideos,
+  mapWatchProviders,
+  ProductionCompany,
+  TvNetwork,
+  WatchProviders,
+} from './common';
 import { Video } from './Movie';
 
 interface Episode {
@@ -102,6 +104,7 @@ export interface TvDetails {
   externalIds: ExternalIds;
   keywords: Keyword[];
   mediaInfo?: Media;
+  watchProviders?: WatchProviders[];
 }
 
 const mapEpisodeResult = (episode: TmdbTvEpisodeResult): Episode => ({
@@ -213,4 +216,5 @@ export const mapTvDetails = (
     name: keyword.name,
   })),
   mediaInfo: media,
+  watchProviders: mapWatchProviders(show['watch/providers']?.results ?? {}),
 });

server/models/common.ts

@@ -1,12 +1,13 @@
 import type {
-  TmdbCreditCast,
   TmdbAggregateCreditCast,
+  TmdbCreditCast,
   TmdbCreditCrew,
   TmdbExternalIds,
   TmdbVideo,
   TmdbVideoResult,
+  TmdbWatchProviderDetails,
+  TmdbWatchProviders,
 } from '../api/themoviedb/interfaces';
-
 import { Video } from '../models/Movie';
 
 export interface ProductionCompany {
@@ -70,6 +71,20 @@ export interface ExternalIds {
   twitterId?: string;
 }
 
+export interface WatchProviders {
+  iso_3166_1: string;
+  link?: string;
+  buy?: WatchProviderDetails[];
+  flatrate?: WatchProviderDetails[];
+}
+
+export interface WatchProviderDetails {
+  displayPriority?: number;
+  logoPath?: string;
+  id: number;
+  name: string;
+}
+
 export const mapCast = (person: TmdbCreditCast): Cast => ({
   castId: person.cast_id,
   character: person.character,
@@ -124,7 +139,33 @@ export const mapVideos = (videoResult: TmdbVideoResult): Video[] =>
     url: siteUrlCreator(site, key),
   }));
 
+export const mapWatchProviders = (watchProvidersResult: {
+  [iso_3166_1: string]: TmdbWatchProviders;
+}): WatchProviders[] =>
+  Object.entries(watchProvidersResult).map(
+    ([iso_3166_1, provider]) =>
+      ({
+        iso_3166_1,
+        link: provider.link,
+        buy: mapWatchProviderDetails(provider.buy ?? []),
+        flatrate: mapWatchProviderDetails(provider.flatrate ?? []),
+      } as WatchProviders)
+  );
+
+export const mapWatchProviderDetails = (
+  watchProviderDetails: TmdbWatchProviderDetails[]
+): WatchProviderDetails[] =>
+  watchProviderDetails.map(
+    (provider) =>
+      ({
+        displayPriority: provider.display_priority,
+        logoPath: provider.logo_path,
+        id: provider.provider_id,
+        name: provider.provider_name,
+      } as WatchProviderDetails)
+  );
+
 const siteUrlCreator = (site: Video['site'], key: string): string =>
   ({
-    YouTube: `https://www.youtube.com/watch?v=${key}/`,
+    YouTube: `https://www.youtube.com/watch?v=${key}`,
   }[site]);