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"