Modify GUI to support roku safe zones

[anthonylavado]

Describe the bug

From Reddit:

Thanks for making this happen.

Is there an overscan adjustment setting? One TV we have cuts a lot off the edges of the screen. Some of the jellyfin logo and time are missing.

To Reproduce
None at the moment. Requested more information.

Expected behavior
The screen content should be in the safe area and it get cut off.

Logs
N/A

Screenshots

Additional context
Perhaps there are layout guidelines we can follow?

[cewert]

This only happens for certain TV's I believe (older ones). Roku OS doesn't give users a way to adjust overscan (Amazon Fires OS on the other hand does).

So basically, Roku has abandoned support for older TVs and left it up to the devs to support them.

https://community.roku.com/t5/Roku-Device-Features-Settings-Updates/overscan-compensation/td-p/508839
https://community.roku.com/t5/Roku-Device-Features-Settings-Updates/Overscan/td-p/467743

[anthonylavado]

It looks like it might be solvable just by tweaking the layout a bit. Two reports say that this happens with 1080p screens - one using the Roku Streaming Stick+ and the other with a Roku Ultra.

I'll take the JF Streaming Stick+ and hook it up to my 1080p screen to test with.

Edit: Looked at some of those links. Why is it so bad? Ugh.

[cewert]

There's two things users could try to fix this:

1. Disable overscan on their TV (using the buttons on the TV or the original TV remote)
2. If possible, plug the roku into a different HDMI port. There might be a port dedicated for PC or gaming etc. that might disable overscaning.

To see if this stuff is even possible or for exact instructions users should consult their TV's manual.

[cewert]

As far as the app, I think we'd have to rewrite all the GUI to be dynamic based on user screen size.

Basically reverting #70 and #74 and possibly redoing some of the GUI (having multiple versions based on screen size similar to mobile web dev) because overscan changes the resolution and not every TV uses the same resolution

[jystadj]

I am seeing the overscan issue with a Roku 3 on a Toshiba running 1080p. Just slightly off screen.

I think the Toshiba is about 4 years old? Not positive on that.

[cewert]

@jystadj have you tried to disable overscan on your TV? searching the model number online can usually get you the manual. For some TVs it's a toggle you can turn on and off but if your TV forces overscan then I don't think the app is going to look right no matter what you do until we fix the code

[jystadj]

@cewert I left my self a task to try that and possibly try to use a "computer" flagged HDMI input on the TV to see if it corrected it when I read through this earlier. I'll report back when I have had a chance to try those. Tied up in a meeting right now. :)

I have a couple of other Roku channel tests in my task list too, I'll probably get them in the next hour or so.

[jystadj]

@cewert Ok, finally got a chance to test it. Killing off overscan on the TV cleared this up for me. Just wanted to log the info here for consistency.

[SenorSmartyPants]

I tried messing with overscan years ago on this TV and from what I remember there was no adjustment or setting related to overscan. No other Roku apps have this issue.

[cewert]

#74 (comment)

@anthonylavado had it right the whole time... whoops!

We just need to sacrifice 10-20% of the screen to the Roku gods and everything will work just fine.

[TeutonJon78]

I'm running my Roku at 1080p and had the same problem with edges missing on my 4k TV. I can confirm that switching from 16:9 to 1:1 (no overscan) displayed the full screen properly.

[DraZtiK]

Just wanted to see if the others with this overscan issue are similar, not only my Jellyfin app gui on the Roku is stretched outside the borders but when playing a 720P movie in the app is also stretch. My Roku home screen is not stretched outside of view. Are others seeing the videos playing fine (not stretched)?

[neilsb]

when playing a 720P movie in the app is also stretch.

Does the same happen when playing videos in any other apps, or is this just the Jellyfin app?

[anthonylavado]

The PR for the safe zone fix is in the latest version (1.3.0). All, please try it and let us know if it works for you.

[DraZtiK]

The PR for the safe zone fix is in the latest version (1.3.0). All, please try it and let us know if it works for you.

Main screen now fits and is not stretched outside view but, looks like fix was only applied to main screen? The options panel is still outside of viewwhen selected as is the movies details page is still stretched.

[neilsb]

Sorry, I may have been unclear. It's currently been applied to the home screen and the new Item Grid screen (currently used for Movies & TV Shows).

The plan is to revisit all the screens and give them an updated look, but can probably put something in place for the rest of the screens quickly to ensure they all appear within the safe zones.

Regarding the playing of videos, are you able to test the same video on JellyFin and another application? Just at the moment I am struggling to see how other apps could have the video all be displayed within the "safe zone" without leaving a black border round those that don't have overscanning problems.

[DraZtiK]

Sorry, I may have been unclear. It's currently been applied to the home screen and the new Item Grid screen (currently used for Movies & TV Shows).

All good! progress is good and we thank you!

Regarding the playing of videos, are you able to test the same video on JellyFin and another application? Just at the moment I am struggling to see how other apps could have the video all be displayed within the "safe zone" without leaving a black border round those that don't have overscanning problems.

So you are correct in that other apps are also displaying it stretched! I tried another app and it too was stretched outside of view in the video.