feat(title-card): display ratings on media cards #3154
+246
−15
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| import RTAudFresh from '@app/assets/rt_aud_fresh.svg'; | ||
| import RTAudRotten from '@app/assets/rt_aud_rotten.svg'; | ||
| import RTFresh from '@app/assets/rt_fresh.svg'; | ||
| import RTRotten from '@app/assets/rt_rotten.svg'; | ||
| import ImdbLogo from '@app/assets/services/imdb.svg'; | ||
| import TmdbLogo from '@app/assets/services/tmdb.svg'; | ||
| import defineMessages from '@app/utils/defineMessages'; | ||
| import type { RTRating } from '@server/api/rating/rottentomatoes'; | ||
| import type { RatingResponse } from '@server/api/ratings'; | ||
| import type { MediaType } from '@server/models/Search'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { useIntl } from 'react-intl'; | ||
| import useSWR from 'swr'; | ||
|
|
||
| interface TitleCardRatingsProps { | ||
| id: number; | ||
| mediaType: MediaType; | ||
| userScore?: number; | ||
| visible: boolean; | ||
| } | ||
|
|
||
| const RATINGS_REQUEST_DELAY_MS = 300; | ||
|
|
||
| const messages = defineMessages('components.TitleCard.TitleCardRatings', { | ||
| ratings: 'Ratings', | ||
| rottenTomatoesAudienceScore: 'Rotten Tomatoes Audience Score: {score}%', | ||
| rottenTomatoesCriticsScore: 'Rotten Tomatoes Critics Score: {score}%', | ||
| imdbUserScore: 'IMDb User Score: {score}', | ||
| tmdbUserScore: 'TMDB User Score: {score}%', | ||
| }); | ||
|
|
||
| const TitleCardRatings = ({ | ||
| id, | ||
| mediaType, | ||
| userScore, | ||
| visible, | ||
| }: TitleCardRatingsProps) => { | ||
| const intl = useIntl(); | ||
| const [ratingsRequested, setRatingsRequested] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| if (!visible || ratingsRequested) { | ||
| return; | ||
| } | ||
|
|
||
| const timeout = setTimeout(() => { | ||
| setRatingsRequested(true); | ||
| }, RATINGS_REQUEST_DELAY_MS); | ||
|
|
||
| return () => clearTimeout(timeout); | ||
| }, [ratingsRequested, visible]); | ||
|
|
||
| const { data: movieRatings } = useSWR<RatingResponse>( | ||
| ratingsRequested && mediaType === 'movie' | ||
| ? `/api/v1/movie/${id}/ratingscombined` | ||
| : null, | ||
| { | ||
| revalidateOnFocus: false, | ||
| shouldRetryOnError: false, | ||
| } | ||
| ); | ||
| const { data: tvRatings } = useSWR<RTRating>( | ||
| ratingsRequested && mediaType === 'tv' ? `/api/v1/tv/${id}/ratings` : null, | ||
| { | ||
| revalidateOnFocus: false, | ||
| shouldRetryOnError: false, | ||
| } | ||
| ); | ||
|
|
||
| const rtRating = | ||
| mediaType === 'movie' | ||
| ? movieRatings?.rt | ||
| : mediaType === 'tv' | ||
| ? tvRatings | ||
| : undefined; | ||
| const imdbRating = movieRatings?.imdb; | ||
| const hasRtAudienceScore = | ||
| typeof rtRating?.audienceScore === 'number' && | ||
| rtRating.audienceRating !== undefined; | ||
| const hasRtCriticsScore = | ||
| !hasRtAudienceScore && | ||
| typeof rtRating?.criticsScore === 'number' && | ||
| rtRating.criticsRating !== undefined; | ||
|
u61d marked this conversation as resolved.
|
||
| const hasImdbScore = typeof imdbRating?.criticsScore === 'number'; | ||
| const hasTmdbScore = typeof userScore === 'number' && userScore > 0; | ||
|
|
||
| if ( | ||
| !hasRtAudienceScore && | ||
| !hasRtCriticsScore && | ||
| !hasImdbScore && | ||
| !hasTmdbScore | ||
| ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className="mt-1 flex min-h-4 min-w-0 items-center gap-1 whitespace-nowrap text-[10px] font-medium md:gap-2 md:text-xs" | ||
| aria-label={intl.formatMessage(messages.ratings)} | ||
| > | ||
| {hasRtAudienceScore && ( | ||
| <span | ||
| className="flex min-w-0 items-center gap-0.5 md:gap-1" | ||
| aria-label={intl.formatMessage(messages.rottenTomatoesAudienceScore, { | ||
| score: rtRating.audienceScore, | ||
| })} | ||
| > | ||
| {rtRating.audienceRating === 'Spilled' ? ( | ||
| <RTAudRotten | ||
| className="h-3.5 w-3.5 shrink-0 md:h-4 md:w-4" | ||
| aria-hidden="true" | ||
| /> | ||
| ) : ( | ||
| <RTAudFresh | ||
| className="h-3.5 w-3.5 shrink-0 md:h-4 md:w-4" | ||
| aria-hidden="true" | ||
| /> | ||
| )} | ||
| <span>{rtRating.audienceScore}%</span> | ||
| </span> | ||
| )} | ||
| {hasRtCriticsScore && ( | ||
| <span | ||
| className="flex min-w-0 items-center gap-0.5 md:gap-1" | ||
| aria-label={intl.formatMessage(messages.rottenTomatoesCriticsScore, { | ||
| score: rtRating.criticsScore, | ||
| })} | ||
| > | ||
| {rtRating.criticsRating === 'Rotten' ? ( | ||
| <RTRotten | ||
| className="h-3.5 w-3.5 shrink-0 md:h-4 md:w-4" | ||
| aria-hidden="true" | ||
| /> | ||
| ) : ( | ||
| <RTFresh | ||
| className="h-3.5 w-3.5 shrink-0 md:h-4 md:w-4" | ||
| aria-hidden="true" | ||
| /> | ||
| )} | ||
| <span>{rtRating.criticsScore}%</span> | ||
| </span> | ||
| )} | ||
| {hasImdbScore && ( | ||
| <span | ||
| className="flex min-w-0 items-center gap-0.5 md:gap-1" | ||
| aria-label={intl.formatMessage(messages.imdbUserScore, { | ||
| score: imdbRating.criticsScore, | ||
| })} | ||
| > | ||
| <ImdbLogo | ||
| className="h-2.5 w-4 shrink-0 md:h-3 md:w-5" | ||
| aria-hidden="true" | ||
| /> | ||
| <span>{imdbRating.criticsScore}</span> | ||
| </span> | ||
| )} | ||
| {hasTmdbScore && ( | ||
| <span | ||
| className="flex min-w-0 items-center gap-0.5 md:gap-1" | ||
| aria-label={intl.formatMessage(messages.tmdbUserScore, { | ||
| score: Math.round(userScore * 10), | ||
|
Member
There was a problem hiding this comment. Should we keep the original rating scale (I prefer this, as users will see the same value as on the external website) or standardize everything to a 0–100% scale?
Member
There was a problem hiding this comment. We keep the original rating scale. We just display the score from the websites, we're not customizing / modifying it on Seerr.
Contributor
Author
There was a problem hiding this comment. Understood. I will keep the original provider scales and display the TMDB score on its 0-10 scale.
Contributor
Author
There was a problem hiding this comment. Correction after checking the provider display: TMDB presents its User Score as a percentage, including in the approved Design A examples. I will therefore keep RT and TMDB as percentages and IMDb on its 0-10 scale. |
||
| })} | ||
| > | ||
| <TmdbLogo | ||
| className="h-3.5 w-4 shrink-0 md:h-4 md:w-5" | ||
| aria-hidden="true" | ||
| /> | ||
| <span>{Math.round(userScore * 10)}%</span> | ||
| </span> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default TitleCardRatings; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why use the score inside the aria-label ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The provider logos are hidden from assistive technologies, so the score in the label lets a screen reader announce the provider and its value together. Without it, the visible number would not have useful context.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, but the note is already inside the tag that’s why I’m asking. It seems a bit redundant 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You are right, the visible score is already announced. I will remove the parent
aria-labeland add visually hidden provider text before the visible value instead, so the score is only announced once while still having provider context.