Update experimental layout library controls

[thornbill]

Changes

• Updates the UI of the library controls in the experimental layout

Movies Before

Movies After

Music Before

Music After

Issues
N/A

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	3e2e2cf
Status	✅ Deployed!
Preview URL	https://d6261702.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs

[enter-a-random-username]

• Shuffle for songs is gone
• Shuffle jumps in after Play all. Do they have different conditions?
• Also why is first button labeled e.g. Play All, next Time Shuffle, if we have no Play all

[thornbill]

• Shuffle for songs is gone
  • It seems that it was never enabled in the experimental layout, but now it is.
• Shuffle jumps in after Play all. Do they have different conditions?
  • Shuffle is only shown if more than one item is displayed. I've updated it so none of those buttons are displayed until the items are fetched.
• Also why is first button labeled e.g. Play All, next Time Shuffle, if we have no Play all
  • It was a design decision I made. It's nice to have text on the main action, but it might be a bit much on all of them and it definitely wouldn't fit on mobile. 🤷‍♂️

[enter-a-random-username]

It was a design decision I made. It's nice to have text on the main action, but it might be a bit much on all of them and it definitely wouldn't fit on mobile. 🤷‍♂️

I just noticed it and it was inconsistent. Personally I don't like it, but not something I would go out of my way changing it. I often use filter to find something (and those are a nightmare at the moment - different topic). I sometimes use Plau all/shuffle for music, but movie or series to start randomly I feel lucky is not my thing. Maybe go to random to find something.

I would save the space. A lot of options in future e.g. saved filters or something like that. Or continue last movie/episode. Easy way to just jump back in, if I find nothing while browsing.

[xtreemze]

I appreciate the work done on the experimental layout for the library controls and wanted to provide some observations and suggestions:

Right Alignment: I really like the right alignment; it gives the interface a cleaner and more organized look.

Text and Solid Blue Background: The addition of text and the solid blue background feels visually overwhelming. It occupies too much space and draws unnecessary attention. In my opinion, the icons themselves are already intuitive and effectively convey their functionality without the need for additional text or highlighting.

Random Sorting and Pagination: The current implementation of random sorting renders pagination ineffective. It would be more user-friendly if the random order of items could persist throughout the session. For example:

When navigating to page 2 and then returning to page 1, I would expect the items on page 1 to remain in the same order as when I left it.

At present, the items get randomized on each page load, which disrupts the user's experience and makes pagination less useful. Furthermore, it is irrelevant whether the sorting of random items is ascending or descending. So conditionally removing that option would be cleaner when Randomization is active.

Mini player: the now playing mini player tends to take up space at the bottom, which covers the last library items on the page. I would suggest adding some empty space to accomodate the mini player and allow for the final row of library items to be visible in their entirety and to provide access to the pagination controls.

Margin on the right: When the alphabetical shortcuts are disabled on the right side, there is some empty space left over which seems strange when it suits no purpose. It would seem logical to remove that placeholder if the current view disables the Alphabetical shortcuts.

[enter-a-random-username]

I noticed on mobile - the space for paging is scares (depending on item count and resolution).

Demo with higher values and some older shittier/low-res devices are even worse

If you go to pages and paging has normally maybe 24/48/72/100/120 or so (depends on preference). Let's go with low 24 (2/3/4/6/8 word for a full row)

ceil(11000/24) are 459 pages so it can show 444 of 459. No need for an item count and would save a lot of space. If you use paging (and not the search) you properly want to know how many pages are left on current setting e.g. page 430 of 459

With even more

If you have no life → even higher value

With current text

PS: I used rotten fruit setting, because mini sounded small as preset

Edit - My current patch

            <Box>
                {globalize.translate(
                    'ListPagingSmall',
                    Math.ceil(recordsStart / limit),
                    Math.ceil(totalRecordCount / limit)
                )}
            </Box>

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[thornbill]

I've made some adjustments so pagination gets a full row on mobile. I have no data to back this up, but I suspect Jellyfin users would prefer seeing the item count over page numbers. 😅

[enter-a-random-username]

I've made some adjustments so pagination gets a full row on mobile. I have no data to back this up, but I suspect Jellyfin users would prefer seeing the item count over page numbers. 😅

If there is no layout issue - good with me.
Tow things that annoy me the most:

• No first/last page button. I need to change the sorting or reopen the library....
• Reset all filter. Opening the tags takes 10 seconds or more and finding the selected item has not even a highlight on the group. So you just f*cked on a filtered library. Or sort the selected items to the top or show the m. Different options, but UX could be improved a lot.

One more thing I do not understand. You disable the Display selector for a lot of devices, but experimental works on so many devices. A warning would be enough, and you will get more mobile testing and so on. I removed that .add('hide').

Edit:
I will test it soon. Have a few conflicts with my patch stack. I run on CSS Grid and changed a lot of other things. Native lazy loading via attribute instead of JS...

[enter-a-random-username]

Personal changes at the moment

• Removed min-width: 64px; - looks strange on mobile with center button, additionally to the padding
• Put both on one side for one-handed mobile navigation.
• Added Last/First

    const onFirstPageClick = useCallback(() => {
        setLibraryViewSettings((prevState) => ({
            ...prevState,
            StartIndex: 0
        }));
    }, [setLibraryViewSettings]);

    const onLastPageClick = useCallback(() => {
        const newIndex = (Math.ceil(totalRecordCount / limit) - 1) * limit;
        setLibraryViewSettings((prevState) => ({
            ...prevState,
            StartIndex: newIndex
        }));
    }, [setLibraryViewSettings, totalRecordCount, limit]);

(Changed the Icons because Last Page had a different style)

Mobile - on handed navigation

(using css order)