Item Card component displays Critic|Community ratings from setting #6919

shoecar · 2025-06-03T21:44:19Z

Changes
Two major changes:

New cardRatings display setting
Item cards display Critic and/or/neither Community based on cardRatings value

Screenshots
New "Display > Item Card" setting type with "Item Card Ratings Display" setting:

This controls which of CriticRating/CommunityRating should be displayed (defaulting to None).

Here is what it looks like with All selected:

You can see no CriticRating is shown for shows as that data is not available. Moves have both CriticRating and CommunityRating so they are shown together.

Issues
3330/rating-on-posters
discussions/6911

…ting

jellyfin-bot · 2025-06-03T21:44:30Z

Cloudflare Pages deployment

Latest commit	`dbbade5`
Status	✅ Deployed!
Preview URL	https://78f43513.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs

github-actions

ESLint doesn't pass. Please fix all ESLint issues.

src/components/cardbuilder/cardBuilder.js

github-actions

ESLint doesn't pass. Please fix all ESLint issues.

shoecar · 2025-06-04T01:33:02Z

src/scripts/settings/userSettings.js

@@ -321,6 +321,19 @@ export class UserSettings {
        return this.get('customCss', false);
    }

+    /**


I know /scripts are marked as deprecated, but from what I can tell updating this file is required when adding a display setting.

I'm open to different approaches but I think its important to have a setting. Both to allow for default behavior of still not showing card ratings, and the extra options I added.

It's adding new files that would be an issue, so it's fine.

shoecar · 2025-06-04T01:35:20Z

src/components/displaySettings/displaySettings.template.html

+    <h2 class="sectionTitle">
+        ${ItemCard}
+    </h2>


I did not think any of the other sections fit well enough. Seeing "Item Details" existed I thought "Item Card" was a consistently themed section.
I think "Item Card" is distinct enough and a broad enough design space to justify its own section.

src/components/cardbuilder/cardBuilder.js

shoecar · 2025-06-10T04:17:22Z

@thornbill I see you're very active in this repo, could you take a look at this PR?

Would also appreciate if you could add feature label as I'm not able to.

Thanks

github-actions

ESLint doesn't pass. Please fix all ESLint issues.

src/components/cardbuilder/cardBuilder.js

CONTRIBUTORS.md

src/components/cardbuilder/cardBuilder.js

jellyfin-bot · 2025-06-11T23:41:09Z

This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.

sonarqubecloud · 2025-06-11T23:45:52Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

shoecar · 2025-06-29T05:04:07Z

@viown I addressed your comments, could you approve this? I'd really like to get it in.
If you're not good with unilaterally approving a UI change like this is there a way I can reach out to others to get more feedback?

added Item Card component displays Critic|Community ratings from setting jellyfin#6919

viown

Sorry for the delay, although do note that it can take a while to get reviews and PRs in due to the low number of contributors on the web team (as denoted by the backlog of PRs at the moment 😅).

I personally think that that the setting can just be a simple checkbox to show none or all, but maybe someone else can chip in on that.

viown · 2025-06-30T12:09:19Z

src/scripts/settings/userSettings.js

+            return this.set('cardRatings', val.toString(), false);
+        }
+
+        return this.get('cardRatings', false);


Suggested change

return this.get('cardRatings', false);

return this.get('cardRatings', false) || 'none';

viown · 2025-06-30T12:22:07Z

src/components/cardbuilder/card.scss

+
+.cardRating {
+    display: flex;
+    align-items: center;


Suggested change

align-items: center;

align-items: center;

color: #fff;

The inherited color can make the ratings text hard to read on lighter themes

viown · 2025-06-30T12:29:20Z

src/components/cardbuilder/cardBuilder.js

+        const backgroundImageClass = item.CriticRating >= 60 ? 'cardRatingFresh' : 'cardRatingRotten';
+        cardRatingHtml += `<div class="cardRating"><span class="cardRatingIcon cardCriticRating ${backgroundImageClass}"></span><span>${item.CriticRating}</span></div>`;
+    }
+    if (item.CommunityRating && ['community', 'all'].includes(ratingsSetting)) {


I think we can put community ratings first? Same order as in the item details page.

shoecar · 2025-06-30T19:18:13Z

Sorry for the delay, although do note that it can take a while to get reviews and PRs in due to the low number of contributors on the web team (as denoted by the backlog of PRs at the moment 😅).

I personally think that that the setting can just be a simple checkbox to show none or all, but maybe someone else can chip in on that.

@viown yeah no worries, I mostly wanted to make sure it didn't fall through the cracks! I appreciate you leaving feedback, I'll be more patient

theguymadmax · 2025-07-01T03:17:57Z

This is a nice feature, and I can absolutely see users wanting the option to display just one or the other.

Hello-World-Traveler · 2025-07-09T20:57:47Z

Could this be added to the server so clients can take full advantage of this new feature?

shoecar · 2025-07-09T23:28:26Z

Could this be added to the server so clients can take full advantage of this new feature?

@Hello-World-Traveler I'm not sure what you're asking. This is fully a frontend/client side feature that will work as long as the server is passing critic/community rating data.
To get this live the PR needs an approval, to be merged, and then should be present in the next release (I'm not sure what the release cadence is, but doesn't seem super frequent).

If you had something else in mind I didn't address let me know, thanks

Hello-World-Traveler · 2025-07-10T01:49:48Z

@shoecar This new feature will only work for web clients not on Android or Apple apps that doesn't not use web client?

shoecar · 2025-07-10T03:27:24Z

@shoecar This new feature will only work for web clients not on Android or Apple apps that doesn't not use web client?

ah yeah, just for the web app. This functionality would need to be ported over to other repos like jellyfin-android and jellyfin-expo (iOS App).
I have not looked into those repos but if there is interest I could look into doing that work too.

Hello-World-Traveler · 2025-07-10T04:38:23Z

I think it should be a core jellyfin feature. It's a good idea to add ratings to the item cards.

There would be a lot of interest for this in all clients as it's useful information.

viown · 2025-07-10T07:06:17Z

ah yeah, just for the web app. This functionality would need to be ported over to other repos like jellyfin-android and jellyfin-expo (iOS App).

Both of those integrate the web client as their frontend, so no further changes would be needed there.

FYI, @shoecar you have some unaddressed review feedback, in case you missed it.

Item Card component displays Critic and/or/neither Community from set…

eea6dcf

…ting

shoecar requested a review from a team as a code owner June 3, 2025 21:44

shoecar changed the title ~~Item Card component displays Critic and/or/neither Community from setting~~ Item Card component displays Critic|Community ratings from setting Jun 3, 2025

github-actions bot requested changes Jun 3, 2025

View reviewed changes

shoecar deployed to Preview June 3, 2025 21:47 — with GitHub Actions View deployment

cardBuilder#getRatingHtml use single quotes

a22a8a2

coderabbitai bot approved these changes Jun 3, 2025

View reviewed changes

github-actions bot requested changes Jun 3, 2025

View reviewed changes

shoecar deployed to Preview June 3, 2025 23:58 — with GitHub Actions View deployment

fix lint issues

6cab06c

shoecar deployed to Preview June 4, 2025 00:05 — with GitHub Actions View deployment

shoecar added 2 commits June 3, 2025 18:27

style changes

8073994

update CONTRIBUTORS

446f9bc

shoecar commented Jun 4, 2025

View reviewed changes

shoecar had a problem deploying to Preview June 4, 2025 01:34 — with GitHub Actions Failure

shoecar commented Jun 4, 2025

View reviewed changes

src/components/cardbuilder/cardBuilder.js Outdated Show resolved Hide resolved

Merge branch 'master' into item-card-displays-ratings-with-setting

d824b23

shoecar deployed to Preview June 4, 2025 19:50 — with GitHub Actions View deployment

simplify styles and prevent indicators overlap when rtl

dfb1d53

github-actions bot requested changes Jun 10, 2025

View reviewed changes

src/components/cardbuilder/cardBuilder.js Outdated Show resolved Hide resolved

shoecar deployed to Preview June 10, 2025 23:48 — with GitHub Actions View deployment

fix lint and styles use em over px

678c1d7

shoecar deployed to Preview June 10, 2025 23:59 — with GitHub Actions View deployment

viown added the feature New feature or request label Jun 10, 2025

viown reviewed Jun 11, 2025

View reviewed changes

CONTRIBUTORS.md Outdated Show resolved Hide resolved

src/components/cardbuilder/cardBuilder.js Show resolved Hide resolved

move shoecar to Jellyfin Contributors

b4d8298

jellyfin-bot added the merge conflict Conflicts prevent merging label Jun 11, 2025

shoecar had a problem deploying to Preview June 11, 2025 23:44 — with GitHub Actions Error

Merge branch 'master' into item-card-displays-ratings-with-setting

dbbade5

jellyfin-bot removed the merge conflict Conflicts prevent merging label Jun 11, 2025

shoecar deployed to Preview June 11, 2025 23:48 — with GitHub Actions View deployment

shoecar requested a review from viown June 17, 2025 16:55

soultaco83 added a commit to soultaco83/jellyfin-web-unstable that referenced this pull request Jun 29, 2025

Update Reset to Upstream and Merge PRs.yml

7fcf6ed

added Item Card component displays Critic|Community ratings from setting jellyfin#6919

viown reviewed Jun 30, 2025

View reviewed changes

Hello-World-Traveler mentioned this pull request Jul 3, 2025

Item Card component displays Critic|Community ratings from setting jellyfin/jellyfin-androidtv#4767

Open

2 tasks

	return this.get('cardRatings', false);
	return this.get('cardRatings', false) \|\| 'none';

Uh oh!

Item Card component displays Critic|Community ratings from setting #6919

Are you sure you want to change the base?

Item Card component displays Critic|Community ratings from setting #6919

Uh oh!

Conversation

shoecar commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jellyfin-bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Cloudflare Pages deployment

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

shoecar Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

viown Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

shoecar Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

shoecar commented Jun 10, 2025

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jellyfin-bot commented Jun 11, 2025

Uh oh!

sonarqubecloud bot commented Jun 11, 2025

Quality Gate passed

Uh oh!

shoecar commented Jun 29, 2025

Uh oh!

viown left a comment

Choose a reason for hiding this comment

Uh oh!

viown Jun 30, 2025

Choose a reason for hiding this comment

Uh oh!

viown Jun 30, 2025

Choose a reason for hiding this comment

Uh oh!

viown Jun 30, 2025

Choose a reason for hiding this comment

Uh oh!

shoecar commented Jun 30, 2025

Uh oh!

theguymadmax commented Jul 1, 2025

Uh oh!

Hello-World-Traveler commented Jul 9, 2025

Uh oh!

shoecar commented Jul 9, 2025

Uh oh!

Hello-World-Traveler commented Jul 10, 2025

Uh oh!

shoecar commented Jul 10, 2025

Uh oh!

Hello-World-Traveler commented Jul 10, 2025

Uh oh!

shoecar commented Jun 3, 2025 •

edited

Loading

jellyfin-bot commented Jun 3, 2025 •

edited

Loading