Library Filter by / Jump to Letter

[JPKribs]

Describe the feature you'd like

While scrolling through a library, it would be a nice addition to include the ability to jump directly to a letter in the scroll or filter by only that letter. This currently exists in Jellyfin-Web and Jellyfin-Roku as a filter/view. Please see the screenshot for context:

Additional context

I haven't seen any requests for this so I thought I would just make an issue for it. This could fall under https://github.com/jellyfin/Swiftfin/issues/333 so please let me know if this is a duplicate!

[raubreywhite]

Yes please 😊

[JPKribs]

I actually took this as an opportunity to start helping out with the project! I'm not 100% done just yet but I just wanted to include a screenshot of this and say (to anyone else interested in this feature) I'll be done soon!

I ended up going the filter-on-letter method as it seemed less resource intensive than pulling in library items to determine a scroll-to position. Screenshots below:

Unfiltered:

Filtered:

Filtered with no results:

[LePips]

I'm glad that you are working on this and welcome your first contribution! However, I am wary about this on all platforms. I have setup the entire filtering/ordering/etc. interface to be through the pill buttons along the top for iOS. For the entire English alphabet to be displayed, it looks like another vertical scroll view will be used and that probably isn't the best interaction along with the collection view, regardless of screen size.

Additionally, the underlying CollectionView layout for these library views needs to be fixed and I think that in combination with this new scroll view it will be difficult to account for. See: #557.

For tvOS, I've only briefly thought about how I would make the filtering layout. The focus engine is a nightmare to work with, and with this I don't expect the interaction to be good either. The same CollectionView layout isn't much of an issue on tvOS.

So, mainly due to SwiftUI gripes that I have, the view itself may be an issue but I very much welcome the improvement. Regardless, I want this to be toggle-able option in CustomizeViewsSettings.

[JPKribs]

I'm glad that you are working on this and welcome your first contribution! However, I am wary about this on all platforms. I have setup the entire filtering/ordering/etc. interface to be through the pill buttons along the top for iOS. For the entire English alphabet to be displayed, it looks like another vertical scroll view will be used and that probably isn't the best interaction along with the collection view, regardless of screen size.

Additionally, the underlying CollectionView layout for these library views needs to be fixed and I think that in combination with this new scroll view it will be difficult to account for. See: #557.

For tvOS, I've only briefly thought about how I would make the filtering layout. The focus engine is a nightmare to work with, and with this I don't expect the interaction to be good either. The same CollectionView layout isn't much of an issue on tvOS.

So, mainly due to SwiftUI gripes that I have, the view itself may be an issue but I very much welcome the improvement. Regardless, I want this to be toggle-able option in CustomizeViewsSettings.

Understood, @LePips. Originally was looking to do this using a pill button as well but I thought mirroring Jellyfin-Web made more sense from a UX perspective. That being said, the work isn't too difficult to move around now that I have a better feel for Swift. Proceeding on this, do you think this should mirror how the Genre Filter looks?

The alternative idea I had was the filter pill buttons on top with another HStack row underneath that contains all of the filter letters. That being said, the second option cuts into the "usable" library view screen area a little more.

As for tvOS, I added this filtering on the pagingLibraryView using the additional Items API parameter nameStartsWith. Leaving that set to "" ignores the parameter. Does that make sense for this? But, the location of the filter work performed on iOS is translatable to tvOS without much work. I can always hold off on hooking into those view filters for tvOS until the existing filters are added. For reference, at this time this is what that tvOS view looks like using a static (non-scrolling) .overlay:

My only outstanding issue on tvOS, funnily enough, is the focus... for the life of me, I can't get it to re-focus back on the active filter letter after applying. You press the letter to filter and it should keep focus on that letter. Sometimes it re-focuses back to the top of the lettered scrollbar and sometimes it jumps to the first item in the View. No rhyme or reason to it.

[LePips]

do you think this should mirror how the Genre Filter looks?

I would just put this under the existing Filters pill with a new selection of Letters. There

another HStack row

Correct, we will always just have one row for these filters.

API parameter nameStartsWith. Leaving that set to "" ignores the parameter. Does that make sense for this?

I don't personally know since I haven't used that parameter. If it works, then that seems correct.

tvOS focus issues

Yes, tvOS focus with SwiftUI is terrible to work with. No other developer that I know uses tvOS + SwiftUI because of it. You can try to use my FocusGuide solution however that is just a workaround and doesn't work all the time.

I have an idea for an alternate design that can help with this, but I can't really describe it without some mockups.

[JPKribs]

My thought was to clean up the letter bar idea so it didn't scroll. Tested to fit verical iPhones even as small as iPhone mini / SE. I tried to match the iPhone default Contacts app:

Additionally, I've implemented the same logic via the Pill Buttons:

If it makes sense to you, I was going to add a customization setting for "Letter Bar", "Letter Filter", or "None". Names subject to change.

Otherwise, if you have a a preferred implementation I'd be happy to adjust!