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

src/components/MovieDetails/index.tsx

@@ -77,6 +77,7 @@ const messages = defineMessages({
   mark4kavailable: 'Mark as Available in 4K',
   showmore: 'Show More',
   showless: 'Show Less',
+  streamingproviders: 'Currently Streaming On',
 });
 
 interface MovieDetailsProps {
@@ -220,6 +221,10 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     );
   }
 
+  const streamingProviders =
+    data?.watchProviders?.find((provider) => provider.iso_3166_1 === region)
+      ?.flatrate ?? [];
+
   return (
     <div
       className="media-page"
@@ -675,6 +680,20 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 </span>
               </div>
             )}
+            {!!streamingProviders.length && (
+              <div className="media-fact">
+                <span>{intl.formatMessage(messages.streamingproviders)}</span>
+                <span className="media-fact-value">
+                  {streamingProviders.map((p) => {
+                    return (
+                      <span className="block" key={`provider-${p.id}`}>
+                        {p.name}
+                      </span>
+                    );
+                  })}
+                </span>
+              </div>
+            )}
             <div className="media-fact">
               <ExternalLinkBlock
                 mediaType="movie"

src/components/TvDetails/index.tsx

@@ -80,6 +80,7 @@ const messages = defineMessages({
   seasons: '{seasonCount, plural, one {# Season} other {# Seasons}}',
   episodeRuntime: 'Episode Runtime',
   episodeRuntimeMinutes: '{runtime} minutes',
+  streamingproviders: 'Currently Streaming On',
 });
 
 interface TvDetailsProps {
@@ -235,6 +236,10 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
       ) ?? []
     ).length;
 
+  const streamingProviders =
+    data?.watchProviders?.find((provider) => provider.iso_3166_1 === region)
+      ?.flatrate ?? [];
+
   return (
     <div
       className="media-page"
@@ -663,6 +668,20 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 </span>
               </div>
             )}
+            {!!streamingProviders.length && (
+              <div className="media-fact">
+                <span>{intl.formatMessage(messages.streamingproviders)}</span>
+                <span className="media-fact-value">
+                  {streamingProviders.map((p) => {
+                    return (
+                      <span className="block" key={`provider-${p.id}`}>
+                        {p.name}
+                      </span>
+                    );
+                  })}
+                </span>
+              </div>
+            )}
             <div className="media-fact">
               <ExternalLinkBlock
                 mediaType="tv"

src/i18n/locale/en.json

@@ -86,6 +86,7 @@
   "components.MovieDetails.showless": "Show Less",
   "components.MovieDetails.showmore": "Show More",
   "components.MovieDetails.similar": "Similar Titles",
+  "components.MovieDetails.streamingproviders": "Currently Streaming On",
   "components.MovieDetails.studio": "{studioCount, plural, one {Studio} other {Studios}}",
   "components.MovieDetails.viewfullcrew": "View Full Crew",
   "components.MovieDetails.watchtrailer": "Watch Trailer",
@@ -700,6 +701,7 @@
   "components.TvDetails.seasons": "{seasonCount, plural, one {# Season} other {# Seasons}}",
   "components.TvDetails.showtype": "Series Type",
   "components.TvDetails.similar": "Similar Series",
+  "components.TvDetails.streamingproviders": "Currently Streaming On",
   "components.TvDetails.viewfullcrew": "View Full Crew",
   "components.TvDetails.watchtrailer": "Watch Trailer",
   "components.UserList.accounttype": "Type",

src/styles/globals.css

@@ -178,7 +178,7 @@ a.crew-name,
 }
 
 .media-fact-value {
-  @apply text-sm font-normal text-right text-gray-400;
+  @apply ml-2 text-sm font-normal text-right text-gray-400;
 }
 
 .media-ratings {