Adding support to play theme media in user specified order

[ItsAllAboutTheCode]

I am looking to discuss a feature request to be able add support to the Jellyfin web client to be able to select the order that theme media(music and videos) play when navigating a show or season. The link to that feature request is located at https://features.jellyfin.org/posts/2740/select-audio-from-the-theme-music-folder-at-random.

Jellyfin has support for playing theme media for a Series or Season folder as explained here. For theme videos it supports adding files located in a backdrop/ folder. into a play queue. For theme music it combines any songs that that are named theme.* as well as songs that are in a theme-music/ folder into an audio play queue.

Currently Jellyfin adds any theme-media in sort name order to the play queue. There is no way to alter the order when navigating a show.

I have a Pull Request out that allows the user to select the sort order in which they would like to add the theme media to the play queue at #5714.

The UI for it is that the option to select the sort order for the theme-media is hidden until the user either selects display options on whether they want to play theme-music or theme-videos.

theme-shuffle-settings.mp4

• My questions are is this a feature that the community would want?

• Also is the UI design for it the correct way to go about it?

1. Hide the UI to select the order to add theme-media to the play queue until the user selects the option, that they want to play music or videos?
   Or always show the UI for the for selecting the theme-media sort order?
2. Is the wording for the new UI options clear? Should it mention "the order to add theme media to the Play Order Queue", instead of mentioning terms like "Sort Order" or "Sort By"?

[ItsAllAboutTheCode]

To illustrate how the feature theme media order can be adjusted according to the Sort order options I have attached an image of a Show with a Season 01 folder, containing both a theme-music and a theme.mp3 file.
As well as video showing the play queue order when selecting the different sort options in the Jellyfin client.

output.mp4

[erikbucik]

I would advise against implementing this UI, it's very confusing.

All these options should be placed into a modal container, accessible by clicking one list button.

• The modal's first option should be a switch to enable the playback of media in the background while browsing, with two nested checkboxes for including music and videos. Or something similar.

• The next option would be the "Sort by" dropdown (with no description as the option is self-explanatory).

• And for the ascending/descending order, there are much better components than another dropdown for just two options.

Deciding on what the strings should say is a separate issue (UX Copywriting).

• "Background playback" - that's not clear enough...
  I'm thinking whether the description for the list item is even necessary...
• "Play theme media in the background"___________[off/on] or a checkbox
  • songs/music
  • videos
• "Sort queue by"
  • ascending/descending - could just use an arrow icon if it's clear enough?

^ More thought should definitely be put into this. + some mockups & prototypes drawn.

[ItsAllAboutTheCode]

Thanks for the feedback!
I will see if I can place the clickable button for Ordering the queue next to the Sort By dropdown.

I understand not wanting to have the background playback settings under the "Playback" menu because as you mentioned it is a passive user experience. Keeping the "Playback" as a menu for active triggering by the user makes sense.

I'll start on prototyping the changes in the experimental layout with the Modal MUI component.

[erikbucik]

Here are a couple options for the sort order dropdown UI:

1. each option duplicated (a bit much when you have many sorting options)
2. an arrow toggle button next to the dropdown
3. the order options are part of the dropdown (you need to confirm the choice before closing the dropdown)
4. an arrow before the sorting option (you have to click the option again to toggle ascending/descending order)

I personally don't really like that green checkbox next to the selected option.

Which one is the best? I'm not sure. Maybe the 2nd or 4th?

[ItsAllAboutTheCode]

I have created a prototype of the UI changes for the Experimental layout which uses a MUI Dialog component.
I went with the second approach of having an Icon Button with an arrow that sits next to the dropdown box.

I have also updated the styling of the legacy UI so that the arrow buttons fit the style a bit better. A video has been attached for both.

Please let me know what you think.

ExperimentalBackgroundPlaybackMenu.mp4

BackgroundPlaybackMenu_v2.mp4

[ItsAllAboutTheCode]

I went ahead and created another prototype for the Background playback settings using the MUI Popover component. The Popover component anchors the content next to the button that is pressed, so it is visually nearer to the element.

ExperimentalBackgroundPlaybackMenu_v2.mp4

The change can be demoed at https://6b58621a.jellyfin-web.pages.dev/

[ItsAllAboutTheCode]

Following up on this, Is there any more feedback on the UI changes for the background playback popover in experimental mode as well as the new menu in the classic UI?