Feat/Up Next Design Idea

[Perseusdehond]

Hello there again, it's been a little while.
After having seen the great work on the feat/up next feature implementation #346 by AlfHou I wanted to give redesigning this a try. The reason for this is that I don’t really like the design of the current web up next display. This is why I designed 3 different up next displays which you could be able to choose in the settings which one you would like. You could also automatically change the display based on the device/screen size you are watching on. (Explanation down below)

So for the first design I’ve got my inspiration of how Disney+ show it. This display is meant for a bigger screen only so not for phones for example. What will happen is that at the end of an episode, you would return to the mini player and it would show you a big poster of the next episode. Then it would show you the logo (if you have one and otherwise just the name of the series) with underneath the season, episode number and name of the episode. It would also show you how long the content is and when it ends. At last is would show you 2 lines of what the episode is about (3 would become to much and I think a little bit of a summary is nice to show if you have all this space available).
Now comes the biggest difference that will save a lot of space and feels more modern imo. This is that the Next Episode button starts the next episode right away, but it also shows you how long you’ve left before this starts. This is mostly the same to how Netflix does it. It is way cleaner, gives the users the same information they had before and only uses one button of space which is great for feeling less clunky and more modern. The color of the buttons and what fills it are the colors that would also be used for the upcoming up next implementation and I liked to keep it this way.
Then you would also have an see all episodes button which would return you to the current season (This button isn’t necessary because in theory you can do the same with the back button. You could also replace this with for example a mini selector for the language and subtitles etc. something like the one I designed in my series redesign).
Then I also made a back button in the top left so the episode would keep playing in the mini player, but you can just browse through your media if you want to. To go back to your currently playing episode you can just make the mini-player bigger again by how it works currently.

If this big design gets implemented for series, I think I would also like to see this implementation for movies. So it would show you the information, but instead of next episode you would have play and a watch trailer button for example. It would show you the most recommended movie to watch like say a sequel or the movie that is currently to the most left in the more like this row on a movie item page.

As I can understand that not everyone would want such up next design when they are playing an episode, they can also choose for a smaller design which would still use the new Next Episode button which saves again a lot of space. Then it would show you a picture of the next episode but a smaller one with the title in the top right and the duration of the episode in the top left. This duration could switch to the time when it ends after a certain time like what was discussed on Matrix so both information is shown. At last it would also show you a hide button. In this design I made use of 3 floating panels as I see them more fitting personally for a modern design. This would give you a bit less information that you had before, but I think it looks visually way more pleasing. While still giving you the most important information about the next episode. (This design is still meant for bigger screens and also say tablets etc.)

Then the last design is more tailored to mobile devices, even though this can also be used on bigger screens if you say so in settings. This design is pretty similar to Netflix. It doesn’t show you a whole lot about the next episode, but I don’t think it is necessary for people to know how it is called and how long the duration is. As I personally like how Netflix does it and on a smaller screen it would obstruct the episode the least. Then again, if you are watching a series than the episodes will probably be pretty similar in length and you get the name of the next episode as soon as it plays.

I hope I have explained myself good enough. I think this design looks way more modern and shows you the most important information in a nice and clean way. There isn’t necessarily anything horribly wrong with what’s currently in JF web, but I still think that this client can use a redesign.

I hope you guys like it ;)

[NebelNidas]

Big Screen v1 would be a very good design if it only showed up during outros. But since Jellyfin currently has no way of distinguishing outros/credits from the actual content, we risk minimizing the last 30 seconds of actual movie/episode content, which would be rather annoying.

So for Jellyfin in particular, I think Big Screen v2 is the better approach 👍

[Perseusdehond]

v2 would be more like how it is now, but I myself would like v1 as well, as almost all of my content has outros. So it doesn't bother me ;)
I think an option to choose between Big Screen v1 and v2 would be the best.

[sfkpmr]

Yes for options. There will be different opinions for most things, and being locked in because of different views on design would be disappointing. There's enough of that in Plex.

[Extarys]

I agree with @sfkpmr

IMO the 1st one I love, but if it appears too early it'll be a frustration, so +1 for options. The 2nd one is awesome too, FYI I just prefer the 1st one as it's more immersive.