mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-03-02 22:46:55 -05:00
[Enhancement]: Alphabetic navigation of alphabetically sorted lists #2271
Labels
No labels
authentication
awaiting release
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
starred/audiobookshelf-advplyr#2271
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @pwinnski on GitHub (Sep 23, 2024).
Type of Enhancement
Web Interface/Frontend
Describe the Feature/Enhancement
When presented with a list that is sorted alphabetically, typing a letter should scroll to the first item starting with that letter.
Why would this be helpful?
A list with hundreds or thousands of items may take a long time to scroll, and depending on caching, it may not be clear where to stop scrolling. A Series listing is just unlabeled rectangles on a cache miss:


And the same is true of a Library listing:
If I can press 'R' to jump to the first book title or author name (depending on sort) or series name that starts with a 'R', that would speed things up considerably.
Future Implementation (Screenshot)
There doesn't need to be any visual change to the UI at all. Pressing 'R' (for example) would scroll to here:

Because 'Rains, The' is the first series that "starts" with R.
Audiobookshelf Server Version
v2.13.4
Current Implementation (Screenshot)
Pressing any letter key leaves me at the top of the list.

@DDriggs00 commented on GitHub (Sep 23, 2024):
The typical implementation of this is to add a vertical bar on the right, next to the scroll bar with clickable letters on it. Clicking a letter either opens up a filtered view or scrolls to the desired location.
@pwinnski commented on GitHub (Sep 23, 2024):
Indeed, while there does not need to be a visual change to the UI, this is an example from another program:

@nichwall commented on GitHub (Sep 23, 2024):
I'm not able to find the feature request at the moment, but this has the same issue as the alphabetical scroll bar feature request, where the client also does not know where to jump to. The client knows how many total items are in the library/filter, but does not know the breakdown of those items until the page is requested for getting the item information and cover images.
@pwinnski commented on GitHub (Sep 23, 2024):
That does make this a more complicated request then, because it would need to start with being able to get offsets by letter or something similar. Hmmm.
@pwinnski commented on GitHub (Sep 26, 2024):
Re-stating the issue: with a library of 6000+ audiobooks, scrolling through a name-sorted list is currently slow to the point of unusable. If I use the scrollbar to jump down quite a bit in search of books with a title beginning with T, I can drag the scrollbar, let go, and then wait to see how far I've missed, and will have to navigate more to get to the section I'm seeking.
I just tried this: The log contains quite a few "Cache miss" lines and shows queries for pages 1, 2, 4, 5, 3, 6, 7, 22, 41, 23, 42, 112, 113, 117, 115, 114, 105, 106, 104, and 103, in that order. These lines start at :58:17.008 and end at :59:40.551, 83 seconds from first query to last. Again, only after all of these complete can I even see how close I got to where I was seeking, at which point I have to scroll again.
Delays of 20+ seconds are commonplace, but delays long enough to brew a coffee are extreme!
Without any consideration of how to work within the current ApiCacheManager framework, if I were writing API code for this function alone, I would think there should be a way to return the relevant page of results by calculating the offset. For example:
In this case, the
54is from my daily log, and seems to be based on my display being set to four rows of nine, so it's set to six rows of nine, one before and one after my displayed rows. Let that be{page_size}and the letter someone has typed or clicked be{letter}and you get:On a completely-cold container, I've seen that take 6-7 seconds, but it's normally less than one-tenth of a second.
I know things get more complex when you have to filter for explicit content and allowed tags, and I just realized I'm not even limiting to a single library here, but that general approach would be ideal, IF ABS were set up to use direct queries like that. Instead everything goes through Sequelize, and next I'll look into how that works, and what queries are actually being done.
@pwinnski commented on GitHub (Sep 26, 2024):
To limit to a single library, replace:
with
And also in the OFFSET clause, replace:
with