starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[Enhancement]: "Clips" feature for settings bookmarks and adding notes #2065

New Issue
Open
opened 2026-04-25 00:03:08 +02:00 by adam · 2 comments
adam commented 2026-04-25 00:03:08 +02:00
Owner
Copy Link
Copy Source

Originally created by @ZLoth on GitHub (Jun 19, 2024).

Type of Enhancement

Web Interface/Frontend

Describe the Feature/Enhancement

Audible has a "clips" feature when you can tap on the screen to bookmark a particular section of the book. The option is also present to add a note and adjust the start/end of that particular bookmark... helpful when you are driving and can add the notes afterward. This should extend to the app as well as the server. Notes can then later be downloaded or reviewed without interrupting your current process unless you want to start from that section of the book.

Why would this be helpful?

If one is listening to an audiobook as part of a class assignment, highlighting sections would be helpful for post-book review. Also, notable quotes.

Future Implementation (Screenshot)

Not applicable. Use audible screen shots as an example.

Audiobookshelf Server Version

2.10.1

Current Implementation (Screenshot)

Audible screen when pressing the clips button:

Screenshot_20240619-082232

Audible screen when editing clip:
Screenshot_20240619-082253

Clips listing:
Screenshot_20240619-083714

Originally created by @ZLoth on GitHub (Jun 19, 2024). ### Type of Enhancement Web Interface/Frontend ### Describe the Feature/Enhancement Audible has a "clips" feature when you can tap on the screen to bookmark a particular section of the book. The option is also present to add a note and adjust the start/end of that particular bookmark... helpful when you are driving and can add the notes afterward. This should extend to the app as well as the server. Notes can then later be downloaded or reviewed without interrupting your current process unless you want to start from that section of the book. ### Why would this be helpful? If one is listening to an audiobook as part of a class assignment, highlighting sections would be helpful for post-book review. Also, notable quotes. ### Future Implementation (Screenshot) Not applicable. Use audible screen shots as an example. ### Audiobookshelf Server Version 2.10.1 ### Current Implementation (Screenshot) Audible screen when pressing the clips button: ![Screenshot_20240619-082232](https://github.com/advplyr/audiobookshelf-app/assets/6700159/2c710cc7-015c-482d-a8c7-ae6d9e957a5d) Audible screen when editing clip: ![Screenshot_20240619-082253](https://github.com/advplyr/audiobookshelf-app/assets/6700159/cf14cfa4-6e36-4175-b1f7-d89035105128) Clips listing: ![Screenshot_20240619-083714](https://github.com/advplyr/audiobookshelf-app/assets/6700159/2d997761-d19c-47f8-b86e-1a6bae7455da)
adam added the enhancement label 2026-04-25 00:03:08 +02:00
adam commented 2026-04-25 00:03:09 +02:00
Author
Owner
Copy Link
Copy Source

@advplyr commented on GitHub (Jun 19, 2024):

Related #2943 and https://github.com/advplyr/audiobookshelf-app/issues/641

@advplyr commented on GitHub (Jun 19, 2024): Related #2943 and https://github.com/advplyr/audiobookshelf-app/issues/641
adam commented 2026-04-25 00:03:09 +02:00
Author
Owner
Copy Link
Copy Source

@fonix232 commented on GitHub (Nov 26, 2025):

So uh... I was a little bored and ended up doing a thing:

Image

What it does so far:

  • Added button to playback menu bar (scissor icon)
  • Upon pressing the button, playback is paused, and a "new clip" modal is opened
  • "New clip" modal also lists existing clips above (for editing or replaying)
  • "New clip" modal selects the 10 seconds surrounding the playhead position (2s before, 8s after)
  • Handles on each side of the selected range can be moved to finetune the selection
  • Time entry fields below can be used to manually finetune, down to the second (maybe millisecond display/selection would also be useful?)
  • Upon saving, the dialog closes (not the best UX at the moment)
  • Play/stop button fully functional and uses a separate playback element, so it doesn't touch the main playback component at all (playhead stays where it is).
  • Playback of the selected region is highlighted with green (as seen on the screenshot)

Clips are stored in a new database table (to reduce the strain of loading the user object, which currently has all the bookmarks in it), making it perform quite well. Each clipping is linked to a user (via ID) and libraryItem (via ID).

Migration path for existing bookmarks (with the default 10s timeframe starting from bookmark timestamp) is also present.

TODOs:

  • Improve UX by a lot - tons of ideas here, but first, I need to:
  • Refactor the current code as this was half vibe-coded in a four hour caffeine-fuelled hyperfocus session and the code is about as clean as a teen boy's bedroom
  • Upon saving a clip, the audio segment should be automatically exported (clipped by using ffmpeg), in a format with wide platform support (so, probably MP3), using the clip ID as filename, in a pre-defined path (this will need to be added to the configuration options too, maybe?)
  • The range selector really needs to be rewritten from scratch with the new requirements I discovered during development that sort of just got hacked into it
  • i18n needs to be smoothed out - the LLM I used was quite adamant on using it in certain places then completely dropped that behaviour later so it's a pick-n-mix of string literals vs using the i18n strings table.
  • Potentially, a new sidebar tab for clippings for easy access, reducing the in-player clipping modal to current clip only
  • A new sub-section dropdown in the book details page, next to the Chapters/Audio Tracks/Library files ones, for listing all clippings (including extracted files, with file size etc.) that belong to the specific book, to provide a more concise experience (most ABS client apps seem to have a "Bookmarks" tab in the book detail view, I was thinking of a similar experience), allowing the user to delete, edit, or download clips
  • Re: clip downloads, a good file name format would be awesome (I was thinking, following standard Arr templating language, {Clip_Title}_[{Book_Name}.{Author_Name}].{extension})
  • Some nice animations
  • Transcription (once it is generally added to ABS)

Feedback regarding the UI (especially the range selector, I hate that it doesn't match the design but that's a quick fix really with the colours) would be most welcome. Behaviour I was trying to stick as close to what's discussed here (plus my own notes from #4858), but then again my JS game is weak so there will be guaranteed side effects.

@fonix232 commented on GitHub (Nov 26, 2025): So uh... I was a little bored and ended up doing a thing: <img width="2367" height="1328" alt="Image" src="https://github.com/user-attachments/assets/a2915872-6b1d-40a0-9d2f-9af951b0f360" /> What it does so far: - Added button to playback menu bar (scissor icon) - Upon pressing the button, playback is paused, and a "new clip" modal is opened - "New clip" modal also lists existing clips above (for editing or replaying) - "New clip" modal selects the 10 seconds surrounding the playhead position (2s before, 8s after) - Handles on each side of the selected range can be moved to finetune the selection - Time entry fields below can be used to manually finetune, down to the second (maybe millisecond display/selection would also be useful?) - Upon saving, the dialog closes (not the best UX at the moment) - Play/stop button fully functional and uses a separate playback element, so it doesn't touch the main playback component at all (playhead stays where it is). - Playback of the selected region is highlighted with green (as seen on the screenshot) Clips are stored in a new database table (to reduce the strain of loading the user object, which currently has all the bookmarks in it), making it perform quite well. Each clipping is linked to a user (via ID) and libraryItem (via ID). Migration path for existing bookmarks (with the default 10s timeframe starting from bookmark timestamp) is also present. TODOs: - Improve UX by a lot - tons of ideas here, but first, I need to: - Refactor the current code as this was half vibe-coded in a four hour caffeine-fuelled hyperfocus session and the code is about as clean as a teen boy's bedroom - Upon saving a clip, the audio segment should be automatically exported (clipped by using ffmpeg), in a format with wide platform support (so, probably MP3), using the clip ID as filename, in a pre-defined path (this will need to be added to the configuration options too, maybe?) - The range selector really needs to be rewritten from scratch with the new requirements I discovered during development that sort of just got hacked into it - i18n needs to be smoothed out - the LLM I used was quite adamant on using it in certain places then completely dropped that behaviour later so it's a pick-n-mix of string literals vs using the i18n strings table. - Potentially, a new sidebar tab for clippings for easy access, reducing the in-player clipping modal to current clip only - A new sub-section dropdown in the book details page, next to the Chapters/Audio Tracks/Library files ones, for listing all clippings (including extracted files, with file size etc.) that belong to the specific book, to provide a more concise experience (most ABS client apps seem to have a "Bookmarks" tab in the book detail view, I was thinking of a similar experience), allowing the user to delete, edit, or download clips - Re: clip downloads, a good file name format would be awesome (I was thinking, following standard Arr templating language, `{Clip_Title}_[{Book_Name}.{Author_Name}].{extension}`) - Some nice animations - Transcription (once it is generally added to ABS) Feedback regarding the UI (especially the range selector, I hate that it doesn't match the design but that's a quick fix really with the colours) would be most welcome. Behaviour I was trying to stick as close to what's discussed here (plus my own notes from #4858), but then again my JS game is weak so there _will_ be guaranteed side effects.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#2065
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?