Peertube: Custom CSS not working correctly

[XenonFiber]

• PeerTube version or URL:
  beta.9
• Browser name/version:
  Firefox 61 x64

• NodeJS version:
  v8.11.2

• What is the expected behaviour?
  The custom CSS should work as seamlessly as the default style and not require refreshing the page for some elements.

• What do you see instead?
  https://dialup.express/videos/watch/7f83cbf6-090e-4083-a5e2-c755ed736099

Here's my CSS: https://pastebin.com/Y43iYKTp

[msdos621]

I am not a contributor just an admin on an instance add my opinion
To the best of my knowledge it looks like custom css and custom js is loaded from an api call after the page has already loaded causes a noticeable repaint when doing heavy css customization. This seems to be by design and I'm not sure how to fix it. It would be nice to have a more robust theme option.

[XenonFiber]

@usbsnowcrash Thank you!

[XenonFiber]

Just realized that some of the elements not loading until a second refresh is almost definitely a bug. Reopening, just disregard the first part of the video.

[rigelk]

In any case, we should think of a better way to customize CSS/JS.

[Chocobozzz]

Hi,

See the help tooltip near the CSS textarea:

"
Prepend with #custom-css to override styles. Example:

#custom-css .logged-in-email {
  color: red;
}

"

If you prepend with #custom-css, you don't need [_ngcontent-c13] stuff that are automatically generated by Angular (so they could change).

[rezonant]

Ahh, I missed that when I glanced into the CSS. This explains the behavior observed in this issue fully. Angular allocates those _ngcontent-cX and _nghost-cX numbers arbitrarily, it may not even be consistent from load to load.

So putting that aside, there's still a gap between the page loading and application of custom CSS. The only way to avoid that gap is to either inject the custom stylesheet onto the client index.html (easy way) or use server-side rendering (hard way).

Since the PeerTube server handles serving up the client files, this could be done somewhere in the client router
https://github.com/Chocobozzz/PeerTube/blob/602a81a2137afcb5ca12341329199fbea2f08bd8/server/controllers/client.ts#L72

Such a change would let us remove the custom CSS loading done here:
https://github.com/Chocobozzz/PeerTube/blob/602a81a2137afcb5ca12341329199fbea2f08bd8/client/src/app/app.component.ts#L97

[Chocobozzz]

@rezonant This is a good idea. Maybe you could create another issue?

[rezonant]

Covered in https://github.com/Chocobozzz/PeerTube/issues/791