Suggestion for better readibility

[shauncampbell]

Currently, when looking at the contents of a collection there is quite a lot going on. I'll use TV series an example here but the same applies to Movies too. There are currently 10 pieces of album artwork displayed on the screen at any given time as well as a textual description of what they are.

If you look at other Roku apps (netflix, amazon prime video, cravetv) they display around 6-8 pieces of album artwork across and either have a secondary view to display the name or don't display it at all.

My suggestion is to decrease the amount of information on the screen, to make things a bit easier to read. I've had an initial go at changing the brightscript and have come up with something that I think looks a bit nicer.

I've gone with reducing the grid to have 6 items along. I've gotten rid of the white selection indicator mainly because it made the screen look a bit more busy. Instead i've replace dit with a blue bar underneath the focused item. I've also re-used the title bar to display the title of the series as you navigate through. There is sufficient space underneath the titlebar but before the grid starts which could be utilised for the focused series name but I didn't try this out as I think it would make that part of the screen look too busy.

I've left the paging in, though its a little clunky - I can't think of a better way of browsing the whole library at once without loading everything immediately which would probably slow everything down. Perhaps a secondary suggestion would be to have a secondary view when you enter the tv collection, breaking things down by genre and allowing you to view all things within a genre. That way you could pull everything back within a genre for example and set the page limit quite high. I don't know if the jellyfin API supports this though, I haven't looked into it.

I can raise a PR if you're interested in the changes i've made. I haven't done so just yet since what i've done so far has been based on stumbling around BrightScript niaively, but if you're interested in the changes I can do so.

[neilsb]

Brightscript is certainly an interesting beast. If you've already done the hard work, and are willing to do so, then raising a PR (even in draft mode) is generally a great option, as it allows other developers to try out the changes on the big screen.

I agree that, presently, the standard collections have too many items shown. We're a little all over the place on that, as if you have Manual Collections set up we're only showing 5 across on them.

For the paging, I think we're able to tell where the cursor is on the screen so we should be able to load on demand the next page when the user gets to the 2nd or 3rd bottom row. I think it is worth looking at changing from the multiple RowLists we current use, to a MarkupGrid which should make the process easier. Although this is a reasonable bit of work can be done in another ticket.

I'm not sure what the general thoughts on removing the title from the displayed items will be. I quite like it, and it certainly makes it look clean. However, the other services mentioned are ones that have paid staff to curate the content, how it is displayed, and what images are displayed with each. Jellyfin ultimately relies on user to do this, making use of third party services to identify the media and pull down the images. But things like TheTVDb can have less than ideal primary images for some things that don't make it easily identifiable. Another notable difference is that users can upload their own videos which will not have artwork by default. So a collection full of home videos would result in a screen full of random scenes from a video, with no hint as to what the title was until you moved the cursor over it. Will be interesting to see what people's thoughts are. :)

[shauncampbell]

I'll send that over later today - probably need to clean it up a little first.

I was thinking that this kinda view would be specific to TV and perhaps Movies where we would likely have a lot of distinctive album art. I left the name in the overhang specifically because I know that tvDB sometimes returns artwork in foreign languages or completely unrelated to the actual thing you're tagging.

Perhaps its something we could extract into its own view and make it an option to turn on/off?

I don't know too much about the Markup grid but detecting when the user is on the second row and loading the next two / 4 is pretty easy. I've added an event for itemFocus to do the underline part and updating the overhang text. So that same event could use the coordinates to trigger a reload of the data.

The curation part is interesting, I was thinking something more akin to the Genre's tab on the jellyfin webapp. I'm not sure how you would sort them within the categories though. I'd probably say date added would be most helpful but not necessarily most intuitive.

[cewert]

I agree with everything neilsb said

Also, removing the title leaves no way for the user to know which library they're viewing, the overlay title would be blank while loading the list of shows (and would be the only screen that does so), and removing all the title text decreases readability IMO (instead of a cut off title, now I get nothing)

If the goal is readability, I think the issue/PR should stay focused on that i.e. Resizing the rows, images, and title text to make it easier to read. Removing the white selector and pager should each be their own issue/PR to be discussed since they don't effect readability

[cewert]

The scrollinglabel node would give us a way to improve readability in situations where we have long titles and run out of room

Edit: Forgot to mention I like the two rows with 6 columns. If we shortened the poster size by like 30px or so that would be enough for the title text and would greatly improve readability since we went from 10 columns to 6

[shauncampbell]

That makes sense, let me see how that looks. Probably helps me with cleaning up my changes to split it into separate PRs rather than the sledgehammer approach I took initially. I'll push the sizing changes later tonight.

I think possibly if we keep the text, but then do something to make the focused one stand out and the other ones kinda less prominent it won't look as busy. We could either do that by making the unfocused text slightly less white and the focused text a bit more prominent?

[cewert]

Sounds good

I think reducing the columns from 10 to 6 is going to help a lot with the business so I'm not sure the focused text needs to be changed. I think we should reevaluate once the title text is below the posters. If we do change the way things are highlighted, we would need to apply that to the whole app for consistency and not just the tv series page. other pages may face different problems, like the home page having two rows of text, having wide posters etc.

[shauncampbell]

This is the result if I include the text. I've switched over to a scrolling label and I'm looking at making that animate on focus (the default behaviour is to just scroll constantly, and not in sync which looks terrible). It looks better but perhaps it could be an option to not have the text if you don't want it, but allow it to prevent the situations we discussed?

[cewert]

Yea I think that looks pretty good. Maybe play with the font size to try and get more title in. Making it bold might help if it's not already.

Animate on focus sounds like a great idea to me. Looks like you might be able to set the scrolling label repeatCount field to zero on init() and then use a task node or even just a timer node? (i'm not sure if you could pull this off in the render thread) to change the repeatCount back to whatever you wanted.

So basically a separate theme for the app? I'm open to it for sure. I'd just be concerned about the crappier roku devices handling the bloat long term and also maintaining and testing them both.

What about having a separate "landing" page and then having a link to view your whole library? I believe that's how the emby app does it. The landing page is more netflix-ish like what you're talking about with no text with buttons at the top to view the whole library, genres, folder list view etc. and then the library view is like the one with text you're working on now.

[shauncampbell]

The animation part is the bit thats being tricky. I have it responding to on-focus but the animation is very delayed. I think you might have pointed out whats wrong. I've had a couple of goes at it now and seems like theres quite a huge delay when you change the repeatCount. I've played with the scroll speed too but that gets rid of the elipsis entirely and doesn't respond any quicker. I'll look into the task or timer node stuff now though. Could be just that the rendering thread only checks the changes periodically.

[shauncampbell]

Submitted a PR, but i've stuck with the standard label for the moment. Scrolling label seems to have a built in 3s timer which resets when you change the settings. So there would be a 3 second delay on-focus which i think would get quite annoying. The extra space available now should help improve things a little. I'll think more about how we might be able to better show long text and submit that in a different PR.

[neilsb]

I had a look into the scrolling label for some the collection stuff, and yeah there is a delay when the repeat count is set. This seems to be set by Roku and there doesn't appear to be any way to influence it. Plex uses the scrolling label, and has the same delay. I think it's just something we have to live with for now.

[shauncampbell]

I'll have a look at the changes this weekend - I've not forgotten :) One thing i noticed on other apps does is that one of them (i forget which one) doesn't show the text unless you've selected something. And then it takes up more space than what you have under the artwork so that it can display the full name. This works well until you get to the last item and then it looks a bit silly.

I'm still thinking perhaps we could have a bigger label somewhere else on the screen to show the title but im not sure where that could go right now. But if i get some inspiration i'll put that in another pR.