Skip to content

Update experimental layout library controls #6777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

thornbill
Copy link
Member

Changes

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

Movies Before
Screenshot 2025-04-16 at 14-13-07 Jellyfin Edge

Movies After
Screenshot 2025-04-16 at 14-07-03 Music Videos

Music Before
Screenshot 2025-04-16 at 14-12-45 Jellyfin Edge

Music After
Screenshot 2025-04-16 at 14-07-43 Music Videos

Issues
N/A

@thornbill thornbill added enhancement Improve existing functionality or small fixes ui & ux This PR or issue mainly concerns UI & UX labels Apr 16, 2025
@thornbill thornbill added this to the v10.11.0 milestone Apr 16, 2025
@thornbill thornbill requested a review from a team as a code owner April 16, 2025 18:15
@jellyfin-bot
Copy link
Collaborator

jellyfin-bot commented Apr 16, 2025

Cloudflare Pages deployment

Latest commit f749ae3
Status ✅ Deployed!
Preview URL https://396a60fe.jellyfin-web.pages.dev
Type 🔀 Preview

View build logs

@enter-a-random-username
Copy link
Contributor

enter-a-random-username commented Apr 16, 2025

  • 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
Copy link
Member Author

  • 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
Copy link
Contributor

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
Copy link

xtreemze commented Apr 29, 2025

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
Copy link
Contributor

enter-a-random-username commented Apr 29, 2025

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
image

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
image

With even more
image

If you have no life → even higher value

image

With current text
image

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Improve existing functionality or small fixes ui & ux This PR or issue mainly concerns UI & UX
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants