From 1755877e667502bc2b27dacad26fd7b21c172b87 Mon Sep 17 00:00:00 2001
From: Joaquin Olivero <66050823+JoaquinOlivero@users.noreply.github.com>
Date: Wed, 8 Jan 2025 14:23:30 -0300
Subject: [PATCH] refactor: replace streaming providers' names with their
 equivalent logos (#932)

* refactor: replace streaming providers' name with their corresponding logo

re #919

* refactor: change default image opacity and the on hover opacity as well to match the overall ui/ux

---------

Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>
---
 src/components/MovieDetails/index.tsx | 21 ++++++++++++++++-----
 src/components/TvDetails/index.tsx    | 21 ++++++++++++++++-----
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 51036905e..19f7ea863 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -1063,14 +1063,25 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
               </div>
             )}
             {!!streamingProviders.length && (
-              <div className="media-fact">
+              <div className="media-fact flex-col gap-1">
                 <span>{intl.formatMessage(messages.streamingproviders)}</span>
-                <span className="media-fact-value">
+                <span className="media-fact-value flex flex-row flex-wrap gap-5">
                   {streamingProviders.map((p) => {
                     return (
-                      <span className="block" key={`provider-${p.id}`}>
-                        {p.name}
-                      </span>
+                      <Tooltip content={p.name}>
+                        <span
+                          className="opacity-50 transition duration-300 hover:opacity-100"
+                          key={`provider-${p.id}`}
+                        >
+                          <CachedImage
+                            src={'https://image.tmdb.org/t/p/w45/' + p.logoPath}
+                            alt={p.name}
+                            width={32}
+                            height={32}
+                            className="rounded-md"
+                          />
+                        </span>
+                      </Tooltip>
                     );
                   })}
                 </span>
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 528e07a7d..08812e0f0 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -1243,14 +1243,25 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
               </div>
             )}
             {!!streamingProviders.length && (
-              <div className="media-fact">
+              <div className="media-fact flex-col gap-1">
                 <span>{intl.formatMessage(messages.streamingproviders)}</span>
-                <span className="media-fact-value">
+                <span className="media-fact-value flex flex-row flex-wrap gap-5">
                   {streamingProviders.map((p) => {
                     return (
-                      <span className="block" key={`provider-${p.id}`}>
-                        {p.name}
-                      </span>
+                      <Tooltip content={p.name}>
+                        <span
+                          className="opacity-50 transition duration-300 hover:opacity-100"
+                          key={`provider-${p.id}`}
+                        >
+                          <CachedImage
+                            src={'https://image.tmdb.org/t/p/w45/' + p.logoPath}
+                            alt={p.name}
+                            width={32}
+                            height={32}
+                            className="rounded-md"
+                          />
+                        </span>
+                      </Tooltip>
                     );
                   })}
                 </span>