User Custom CSS that is shared across clients

[DallinKooyman]

Fider Link: https://features.jellyfin.org/posts/3803/save-custom-css-to-the-user

Problem

As a user I want the CSS to be consistent on all devices so that I can have a consistent experience on all my clients (Web browsers, Phone Apps, TVs, etc).

Details

Right now, if I add custom CSS for a user on my web browser, that CSS is only applied to that web browser. If I want that same custom CSS on a different web browser or app, I have to manually add it to each of my clients. When I want to make a tweak, I have to update each client's Custom CSS which can be tedious (especially on TVs).

Notes

This is not the same as server custom CSS. This CSS would be for the user. User A uses a black themed custom CSS where User wants a blue themed custom CSS.

I would love to implement this feature and have already started making code changes but understand if this doesn't fit the design of the project

Solutions

1. Custom CSS is saved to Custom Display Preferences (Recommended)

In the UserSettings the customCss function can be saved to a new userSetting attribute userCustomCSS that
passes in true in order to save the custom CSS to the server for that user (see the set function). Having a new field to save to allows users to choose which clients this custom css is used on. There will be a new button under the Custom CSS that will save the custom CSS to the user. Then the use just needs to click the "Enable User Custom CSS" button enable the user custom css.

(excuse the typos)


(I am also open to changing the wording of any strings to be more accurate or more clear)

Some quick testing shows that this works as a solution. I tested by building my changes locally and running the server. The custom css was added and applied to another web browser and my LG TV.

if useUserCustomCSS is a boolean indicating if I want to use the custom CSS saved to the user:

customCss(val) {
  if (val !== undefined) {
    return this.set('customCss', val.toString(), this.useUserCustomCSS());
  }
  return this.get('customCss', this.useUserCustomCSS());
}

Pros:

• Easy to implement
• Uses the existing structure
• Only need to make changes in the web client
• No need to update the Server SQLite DB
• Only Adjust the web-client code
• I already made the code changes lol

Cons:

• Passing in a different value to the method seems to not be in line with the design since it would be relying on another attribute

2. Custom CSS is saved to the User Settings

Since these are user specific changes, the Custom CSS would be saved to the User entry in the Server SQLite DB. This would enforce the user aspect of the feature. That would also require the SQLite DB to be updated to have a column call "User Custom CSS" via a migration.

This solution is essentially the same as solution 1 but saved in a different spot. I feel that this is the incorrect spot as most display settings are saved here.

Again users could toggle this feature on a per client bias (see solution 1, paragraph 2)

Pros:

• Information is saved to the User Profile
• The attribute displayMissingEpisodes is already implemented this way and provides a guide on how to implement

Cons:

• Would need to update the entire flow of savings UserConfiguration to the server to allow for customCSS to be saved and load
• Updating the SQLite DB has risks (Potentially mitigated by use the migration flow mentioned here

Questions

From me:

1. I have only recently been looking into how the code is structured and I am not sure of design practices that we are trying to keep with the code. Is there a reason we are keeping the custom CSS on a per client basis? Are there some clients can't use custom CSS? That wouldn't be a problem for this feature as they would just ignore the field (I think).
2. How do I add a new string? I know that we have the language files but I want to make sure I add them in a spot so they can be translated later. Right now I think it should be changed in en-us.json but I want to check since there is no "main" string file that I can see
3. How do I raise an issue on this repo? I can only raise bug issues and not feature requests

[DallinKooyman]

#7668
Made a Pull request with the changes so people can test