Upgrade ConnectHelpAlertFragment to Jetpack Compose

[pascalwei]

Change the XML implementation of ConnectHelpAlertFragment to Jetpack Compose and integrate Material TV as a basis for better theming options in the future.

This is just a trial balloon activity to see if a switch to the new Material design is welcomed or not.

Before:

After:

[nielsvanvelzen]

This looks really good (better then my 1-1 rewrite in master...nielsvanvelzen:jellyfin-androidtv:compose-connect-help-alert). Unfortunately there's one major problem, we can't use compose yet for anything interactive as there are still focus issues. Additionally I'm not sure if I want to use tv-material or create our own theme. We've had extremely bad experience with using the androidx.leanback libraries.

From my regular testing the focus issues are solved in the current beta for compose-ui. We don't use alpha/beta releases of the androidx libraries in our app though (except for tvprovider as google stopped updating that library). I'm expecting the new compose-ui version to release as stable in the coming months, we can probably merge this at that point in time.

[pascalwei]

Thanks!

I realized the focus was off when I first placed the button. But with FocusRequester I was able work around that issue.

On this specific screen the button doesn't need to be there, we could make the screen non-interactive. In fact if you want to adhere to the design principles, there should be no button on the screen. The "OK" button serves the only purpose to go back, and there's a dedicated button on tv remotes to go back.

I'm unsure what exactly you refer to with "create our own theme". The tv-material library just applies a baseline Material design optimized for tv on the UI elements. Of course we may implement our own theme with a custom typeface, button shapes, colors etc. on top of that.

I don't know what kind of bad experience you had with leanback, but I imagine when you had issues other people had those as well. Maybe it was the early days for Google developing a tv interface and they didn't know how to do x or y best.

After having issues I get that you might be frustrated, but reinventing the wheel because the provided one isn't perfect here or there comes with a huge amount of work. I would give the new generation a shot.

[nielsvanvelzen]

After playing around with the androidx.tv.material library in my playground app, I've decided we can use it for now. In #3611 I migrated the existing code to use it too.

Additionally, I think it's fine to remove the "ok" button if we replace it with a guide on how to close. Similar to how our expandable text popup works (see bottom-left):

A lot of our users are not too familiar with smart-tv remotes so providing a small hint to press the back button will help them.

[pascalwei]

Sure, when our users expect a button we should include one. I don't think there is a significant difference between a guide button in the lower left and a normal button though, as we have the space below the text anyways. I added the previous button back in another commit.

Thank you for taking a look at the library as well. I'll see what else I can port over to Compose.

[github-advanced-security]

detekt found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.

[nielsvanvelzen]

We've now updated to compose 1.7 and all focus related issues I encountered before are resolved. This means we should be able to go forward with this pull request! Can you rebase the pull request and revert the custom theme? That one can be added later.

[pascalwei]

Thank you for the heads-up. Without the focus requester on the button it still didn't work to go back in one click, so I left it in there for now. I've removed the theme as you requested, however keep in mind that tv-material3 doesn't share the android-material3 or leanback themes, meaning until we add our own theme it will be inconsistent full white:

[nielsvanvelzen]

The initial commits hardcoded the colors to use using colorResource(), which is fine to use for now.

[nielsvanvelzen]

I made some additional changes to the formatting and extracted the composable out of the class definition. Additionally I fixed an issue where the focus effect was not applied to the button because of the .focusable() call (button is already focusable by default and it must be specified before the focus requester).

Thanks for the work on this one!