mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-10 00:28:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace streaming providers' names with their equivalent logos (#932)

Browse Source 
* 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>
This commit is contained in:
Joaquin Olivero
2025-01-08 14:23:30 -03:00
committed by GitHub
parent f84d752bca
commit 1755877e66
2 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/MovieDetails/index.tsx
View File

@@ -1063,14 +1063,25 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
</div> </div>
)} )}
{!!streamingProviders.length && ( {!!streamingProviders.length && (
<div className="media-fact"> <div className="media-fact flex-col gap-1">
<span>{intl.formatMessage(messages.streamingproviders)}</span> <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) => { {streamingProviders.map((p) => {
return ( return (
<span className="block" key={`provider-${p.id}`}> <Tooltip content={p.name}>
{p.name} <span
</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> </span>

21
src/components/TvDetails/index.tsx
View File

@@ -1243,14 +1243,25 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
</div> </div>
)} )}
{!!streamingProviders.length && ( {!!streamingProviders.length && (
<div className="media-fact"> <div className="media-fact flex-col gap-1">
<span>{intl.formatMessage(messages.streamingproviders)}</span> <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) => { {streamingProviders.map((p) => {
return ( return (
<span className="block" key={`provider-${p.id}`}> <Tooltip content={p.name}>
{p.name} <span
</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> </span>