This is pretty much a re-post of something I put up on the Plex forums, but I wanted to archive it here for reference. So if you have any comments or questions, please add to the original thread!
Server Version#: Last few years of updates through current stable build.
Player Version#: Last few years of updates through current stable build.
TL;DR: The orange play icon in the middle of the screen when paused causes burn-in on OLEDs.
Solution at the bottom if you’re using your own server and not opposed to manipulating CSS.
I need to preface this by saying that I love the Plex web player. I primarily use that to consume my media, and it puts browsing/playing from multi-billion dollar companies’ web interfaces to shame. e.g. Netflix, Hulu, Amazon, and even the horrid YouTube TV’s web UIs/UXs are absolute crap compared to Plex.
Just to be clear, this post is in regards to the web interface, and I’m using an HTPC (but not the Plex HTPC app) connected to a smart TV, but I never use the TV’s OS for anything. The issue is browser agnostic, and common to FF, Chrome, and Chromium variants.
There is one tiny change that I suppose seems insignificant in the grand scheme of things which I would love to see made: The removal of the play button in the middle of the screen when paused.
It causes hardware damage.
At first, I just thought it was a nuisance. Occasionally I’d like to take a “screen shot” real casually to send in a text or group chat, and the play icon was always in the way. But not a big enough deal to bring it up.
I know there are browser extensions that’ll kill certain HTML elements, and that’s definitely a solution worth pursuing. Unfortunately, I didn’t bother looking into that until it became a major issue, after the damage was done:
That’s a 5 year old Sony XBR-55A1E. It must be a “feature” of that panel, but for whatever reason only the red channel suffered from burn-in. On a full-field green or blue image it looks absolutely smooth.
You can see the image is overall uneven and the red OLEDs suffered generalized burn. However, that’s more recent. I started noticing the play icon about a year ago appearing on any image that contained red (including whites/greys; so pretty much everywhere) before the panel really degraded.
The thing is, I always knew OLEDs are susceptible to burn-in, so I’ve had that PC set with a 1-minute screensaver timeout since day one. The TV also had pixel shift enabled. I guess pause time just adds up.
I replaced that TV this week with the most recent Sony OLED (A95K), and really want to avoid burning that one for as long as possible.
As for a sorta fix:
The button’s CSS classes change when the player controls bar’s position/visibility changes.
Above is an inspector snippet of the relevant containers when the bar is visible at the bottom of the screen. You’ll see the highlighted `button` element’s classes change.
And that shows the same snippet when the bar is minimized/not visible.
The `button` element is a container for the actual play icon graphic, which is the `svg` element (whose child `path` defines the geometry of the graphic). So the relevant visible portion of these snippets is really just the `svg`. I don’t want to mess with the `button` because it may be used to actuate play/pause when clicking arbitrary points on the screen. (Maybe?)
That CSS comes from the “main” stylesheet file here (the file may have a slightly different name, as might your Plug-ins directory — you can always grep for the relevant snippet):
/usr/lib/plexmediaserver/Resources/Plug-ins-6d72b0cf6/WebClient.bundle/Contents/Resources/main-179-4311b1e69996afdff1f5-plex-4.87.2.25887-d04a1ad.css
(The parts of the path in bold/italics are going to change depending upon which version/release of Plex Media Server you’re running. Of course, if you’re using Windows the path will start differently. However, the part of the path from the first “/Resources” onwards should be the same regardless, so just find your Plex directory and go from there… and with, uh, backslashes.)
Adding the following should cause the play button to disappear along with the control bar:
.PlayPauseOverlay-hiddenCursor-GpErBJ > svg {
display: none;
}
The CSS is minified, but I just searched for “GpErBJ” in that file, and added that snippet without any whitespace:
.PlayPauseOverlay-hiddenCursor-GpErBJ>svg{display: none;}
I can’t guarantee that won’t break anything else, but it seems pretty safe?
If you’re attempting this, copy that file somewhere else first as a backup in case things get royally screwed up.
In cursory testing, this seems to work as intended. There appears to be no change to the UI/UX other than the disappearance of the play button when the control bar disappears. But of course I haven’t QA’d the whole thing, so it may have farther reaching consequences.
It would be beyond awesome if that change (or a functionally similar one) were merged into the codebase because presumably it’ll be overwritten every time I upgrade my server. And users on `app.plex.tv` won’t be able to manipulate the CSS anyhow.
Hope this helps someone!
