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/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"