Playback manager & minimized players

[heyhippari]

Here are some first thoughts on potential changes to come for the player component. Discussion is, as always, encouraged in order to get this to a more concrete plan before implementation starts.

Instead of a dedicated page, the player component should live in the default layout, in order to be available everywhere. Visibility would be controlled by a Vuex store (the playback manager, maybe).

When visible, if it's a video, the component would show the player component as a pop-up in the bottom left or fullscreen (whatever is set in the settings, maybe).

Size would be controlled by a bound class on the media component (Such as media--floating and media--fullscreen for example). Toggling full screen essentially toggles both the actual fullscreen API and switches the class around.

Music would be handled in a slightly different way, as the player's UI should live in the app's footer part. However, the player itself can live there and just not have anything shown (State would be handled through the Playback Manager store in all cases).

Playlist for music would be handled though a vue-router route change. Hiding the playlist would basically go back to the previous route (Same behavior as the arrow in the app bar).

Playlist for video would be a Netflix-like "Next episodes" menu with a small description and such

Some playback state would mirrored to the URL (current item, etc), to be able to refresh or close the window, then restart playback. The exact amount of info is still to determine.

[ferferga]

My idea for Music was to have a full screen player aside from the miniplayer, just like we have on Web at the moment. I'm a fan of watching album covers shine as well :)

My idea was to have something like the YouTube Music full-screen music UI, which is the only good thing it has, but much more streamlined.

At the right playlist section as YTM, which we can also use for adding a tabs-like design where we can add support for switching between pages, lyrics, remote control, album artist info or whatever we want.

At the left, the currently playing song's album cover with a carousel-like style for upcoming/previous tracks, just like iTunes and most Cast targeted applications. Something like this:

In my mental concept, non-playing tracks are darkened and not as relevant as they're on those designs though.

For mobile and TV layouts, I would add an "Up Next" section below the playback controls with the name of the following track, so users don't have to pull the queue.

Aside from my ideas for music, I also wanted to get content preloading on old web. Never started working on it but now that I'm in love with this client and I have the chance to collaborate in the roots of it it's the time to do it!

My idea was to use something like https://www.npmjs.com/package/preload-it in PlaybackManager. Whenever user skips a track, PlaybackManager can call a preload_item function that will fetch part of the data for the next few items in queue, so they load instantly. That function can also be invoked outside PlaybackManager itself so, if I open the details page of a movie, PlaybackManager would already start preparing the movie behind the scenes so it's instantly loaded when I hit play.

If we combine preload-it with howler.js caching and capabilities I think we can get an experience near to commercial streaming services, at least for music.

Also, all I stated about preload should get an user or library setting at some point, as preloading can be taxing by making a lot of requests, aside from using more data. But I think we should get it in our first implementation of the PlaybackManager in Vue and we can add the customization later, so we have a chance to experiment and tweak if it really makes a change in the way the client feels.

[jcdick1]

Is the thought to have the carousel idea be implemented in other media areas of the web UI? Or exclusively for music? If only for music, it might seem an odd inconsistency in the app UI as a whole. Though it might actually make for a interesting method of navigating the video media types as well. It might require some heavier use of an alphanumeric navigation, as seen on the right side of the current web UI to avoid having to "flip" through all posters, however.

[heyhippari]

Is the thought to have the carousel idea be implemented in other media areas of the web UI? Or exclusively for music?

Imo, it should be only for a full screen display of currently playing audio (Music, audiobooks or any other audio file). Using a coverflow for navigating a library doesn't make sense, there are better, faster way to present that info.

The goal here would be to have an equivalent of the full screen button for video, which would show the currently played track and the ones right next to it in the playlist.

For what it's worth, I'm more partial to the "flat" coverflow from Spotify's TV UI than the classic Apple one. So I'd rather go with this:

[xtreemze]

This layout idea is great for varied playlists and I see it's already implemented in the Vue 3 client. Love the high rez album art front and center! 😍 However, I think this can be refined further for playback of whole albums.

In this case, we have the same cover art throughout. So, if we can determine that the playlist consists of songs from a single album, then it would be more entertaining to see an artist backdrop slideshow. The album art layout and slider would be brought back momentarily for a couple of seconds on track switch. Furthermore, the album title, and release year would be good to have, or at least have the option to show/hide it so we can use these with custom CSS configurations. As far as the audio engine, gapless playback is a must for album playback, and crossfading would be nicer for mixed playlists or track skipping.

On fullscreen view, the controls other than the seek bar become irrelevant when there's no input after some time. So it would be good to have an option to have those fade away after 10 seconds or so of inactivity, so there's less visual clutter when a user isn't interacting with the display. Same goes for the back button.

And for some experimental features:
The seekbar goes, it would be awesome to have a toned-down minimalistic version of what Soundcloud does with audio, and even better if we could save amplitude values over time array to the audio metadata the first time they run to make this more efficient. This could then be used by the audio engine to determine when to crossfade to a new song if not in album playback mode.

As a more power hungry experience but guaranteeing variety throughout the song: the canvas backdrop could also have the option of having a translucent audio spectrum in real-time. I managed to set this up for a radio station some years ago, with a live stream.

Furthermore, Jellyfin is able to pick up logos for artists. It would also be nice to display this briefly.

So to sum up, since a song takes a good 2-3 minutes, we can use time to show relevant artist/album visuals that Jellyfin can fetch or render in real-time to enrich the listening experience.