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/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]);