Jellyfin-web: Visually distinguish between fully watched series and series with unwatched episodes.

[Redsandro]

Right now, fully watched series have a blue check mark and series with new episodes have a blue number:

I keep getting that small moment of excitement thinking there is a new episode, and upon closer inspection it's just the same blue circle with a check mark. I've ignored this for a while but I can't get used to it. I guess there are two groups of people: Those sensitive to textual communication (number versus check mark) and those sensitive to visual communication for lack of a better word (like red versus green in traffic lights).

Can we make the circle with a checkbox have a different color, like green?

[Artiume]

My concern for making green the default is for those who are color blind (deuteranomalous). I think a better idea is to introduce community css for allowing customization and provide the css templates on the JF website.

That being said, this exact request is being made here
https://github.com/jellyfin/jellyfin-web/pull/707

Edit: Didnt realize that was your PR lol

[DMouse10462]

Judging from a lot of the comments in #707, it seems we have a few goals to accomplish:

• More clearly distinguish between fully watched and in-progress series (aka this issue)
• Maintain distinction between fully watched and completely unwatched series
• Keep a consistent shape in the upper-right corner? 1
• Accessibility concerns: Aim for high visual contrast and recognizability over subtlety

Ideas presented in #707 that countered the commit included changing the indicator shape, creating either a square or a rotated "flag", which raised concerns of being too subtle or degrading the legibility of the content of the indicator respectively.

---

I suggested using a progressbar along the bottom of the video similar to those already found when browsing a video or individual episodes and moving the numeric indicator to the lower-left as a sort of "tag" indicator that pops out of the progressbar. This not only creates a large visual distinction but provides a quicker means of giving value to the indicated number by visualizing it as a part of a whole. Attached is a new image demonstrating my idea in the Jellyfin interface:

[nvllsvm]

The custom CSS feature _should_ work for those wanting this now. However, it seems to be partially broken. https://github.com/jellyfin/jellyfin-web/issues/742

[grantwest]

I think @DMouse10462 pretty much nailed it, but I don't see the value in keeping a consistent shape in the upper right corner. Consistency is directly opposed to the other goals of being distinguishable. Consistency for consistencies sake, especially in this scenario where it provides little to no aesthetic benefit, might be a mistake. Just my 2 cents.

[stale[bot]]

Issues go stale after 90d of inactivity. Mark the issue as fresh by adding a comment or commit. Stale issues close after an additional 14d of inactivity. If this issue is safe to close now please do so. If you have any questions you can reach us on Matrix or Social Media.

[DMouse10462]

This is still relevant, and I still show interest in this. I may take some time to look at a solution, but for the time being can this issue maybe be re-tagged as "enhancement" (to scare away the stale bot) and "ui & ux"? Since this is more of a UI design change, I would argue that this is more of a usability enhancement than a "bug."

[MrTimscampi]

Please redirect feature requests and suggestions to https://features.jellyfin.org/