feat(title-card): display ratings on media cards#3154
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughAdds a delayed-loading TitleCardRatings React component and i18n strings, and refactors the movie ratings route to fetch RottenTomatoes and IMDb concurrently, combining settled results via a new helper that returns provider ratings and an allProvidersFailed flag. ChangesTitle Card Ratings Display
sequenceDiagram
participant UI as TitleCard
participant RatingsAPI as /movies/:id/ratingscombined
participant RTService as RottenTomatoesService
participant IMDbService as IMDbService
UI->>RatingsAPI: request combined ratings
RatingsAPI->>RTService: fetch RT
RatingsAPI->>IMDbService: conditional fetch IMDb (if imdb_id)
RTService-->>RatingsAPI: settled result
IMDbService-->>RatingsAPI: settled result
RatingsAPI->>RatingsAPI: combineMovieRatingResults(rtResult, imdbResult, imdbAttempted)
RatingsAPI-->>UI: 200 { ratings } or 404/500
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/TitleCard/TitleCardRatings.tsx`:
- Around line 72-78: The logic for hasRtCriticsScore incorrectly suppresses
critics when an audience score exists; remove the "!hasRtAudienceScore" gating
so hasRtCriticsScore independently checks RT data (i.e., verify typeof
rtRating?.criticsScore === 'number' && rtRating.criticsRating !== undefined)
while keeping hasRtAudienceScore as is, so both badges can be rendered when both
audience and critics ratings are present.
- Around line 70-80: The ratings logic in TitleCardRatings.tsx is not gated to
only 'movie' or 'tv', so collection (and other) mediaTypes can incorrectly show
TMDB/RT badges; update the component to only compute and allow badges when
mediaType === 'movie' || mediaType === 'tv' by adding a media-type guard (either
an early return/null render for other types or wrap the computed flags like
rtRating, imdbRating, hasRtAudienceScore, hasRtCriticsScore, hasImdbScore,
hasTmdbScore with a condition checking (mediaType === 'movie' || mediaType ===
'tv')); ensure you reference the existing symbols rtRating, imdbRating,
hasRtAudienceScore, hasRtCriticsScore, hasImdbScore, hasTmdbScore and apply the
guard so collections cannot light up TMDB/RT badges.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b34d20c8-b089-4644-a38a-967b56d3fc3d
📒 Files selected for processing (5)
server/api/ratings.tsserver/routes/movie.tssrc/components/TitleCard/TitleCardRatings.tsxsrc/components/TitleCard/index.tsxsrc/i18n/locale/en.json
| userScore={userScore} | ||
| visible={showDetail} | ||
| /> | ||
| {(mediaType === 'movie' || mediaType === 'tv') && ( |
There was a problem hiding this comment.
For me, the rating card should only appear if there is a userScore not because it's a TV or movie.
There was a problem hiding this comment.
Got it. I will render the ratings row when userScore is available and keep the external provider requests conditional on the media type.
| interface TitleCardRatingsProps { | ||
| id: number; | ||
| mediaType: MediaType; | ||
| mediaType: Extract<MediaType, 'movie' | 'tv'>; |
There was a problem hiding this comment.
Same here it should be handled as you did below with mediaType === 'xxxx' when making a request to the provider
There was a problem hiding this comment.
Makes sense. I will restore the general MediaType here and keep the movie/TV checks only on the relevant provider requests.
| <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), |
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?
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.
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.
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.
|
|
||
| const messages = defineMessages('components.TitleCard.TitleCardRatings', { | ||
| ratings: 'Ratings', | ||
| rottenTomatoesAudienceScore: 'Rotten Tomatoes Audience Score: {score}%', |
There was a problem hiding this comment.
Why use the score inside the aria-label ?
There was a problem hiding this comment.
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.
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.
You are right, the visible score is already announced. I will remove the parent aria-label and add visually hidden provider text before the visible value instead, so the score is only announced once while still having provider context.
|
@u61d are you doing all your contributions with AI? Or some AI agent? |
3 participants
Description
Displays ratings on movie and series cards when the card details are shown.
Rotten Tomatoes and IMDb ratings load after a card is briefly opened, while the existing TMDB score is available immediately. The layout remains compact on smaller screens.
How Has This Been Tested?
git diff --checkScreenshots / Logs (if applicable)
Checklist:
pnpm buildpnpm i18n:extractSummary by CodeRabbit
New Features
Improvements