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

[PR #4386] [CLOSED] Add clickable seek-to-time links for timestamps in descriptions #4235

New Issue
Closed
opened 2026-04-25 00:18:56 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:18:56 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4386
Author: @AemonCao
Created: 6/7/2025
Status: ❌ Closed

Base: master ← Head: feat/shownotes-links

📝 Commits (3)

  • 5e73e67 Optimize ViewEpisode, add timestamp link function to play a specific time.
  • 07432cc Optimize time string conversion and add processing for invalid time
  • d947fbf Fixed the time string conversion call in the linkifyTimestamps method to ensure the this context is correctly referenced

📊 Changes

1 file changed (+49 additions, -2 deletions)

View changed files

📝 client/components/modals/podcast/ViewEpisode.vue (+49 -2)

📄 Description

Brief summary

This PR introduces a new feature that automatically detects timestamps (e.g., 59:23 or 01:03:55) in an item's description and converts them into clickable links. When a user clicks on one of these links, the player will seek to that specific time in the audio.

This enhances the user experience by allowing creators to easily reference parts of the audio in the description, and listeners to jump directly to those points of interest.

Which issue is fixed?

In-depth Description

  1. A new computed property, processedDescription, uses a regular expression to find all timestamp patterns in the item's HTML description.
  2. Each found timestamp is wrapped in an <a> tag with a data-time-seconds attribute containing the time converted to total seconds.
  3. An event delegation pattern is used on the description container (@click="handleDescriptionClick"). This avoids attaching numerous event listeners and efficiently captures clicks on the dynamically generated links.
  4. When a timestamp link is clicked, the handler extracts the time in seconds from the data attribute and calls the existing timestampClick method to seek the player.

How have you tested this?

Screenshots

Before

39:14-53:42 My favorite part

image

After

<a href="#">39:14</a>-<a href="#">53:42</a> My favorite part (Clicking "39:14" seeks the audio to 39 minutes and 14 seconds).

image

https://github.com/user-attachments/assets/d2b034f7-327d-410f-ac09-d65fe13caf98

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/4386 **Author:** [@AemonCao](https://github.com/AemonCao) **Created:** 6/7/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `feat/shownotes-links` --- ### 📝 Commits (3) - [`5e73e67`](https://github.com/advplyr/audiobookshelf/commit/5e73e6745c095a165df8f6c00d60a8299bbc9cdb) Optimize ViewEpisode, add timestamp link function to play a specific time. - [`07432cc`](https://github.com/advplyr/audiobookshelf/commit/07432cc26c260d592744d1079ddb270a07d5bc05) Optimize time string conversion and add processing for invalid time - [`d947fbf`](https://github.com/advplyr/audiobookshelf/commit/d947fbfe3b97b921d21f2165ac4ad959cc746b1a) Fixed the time string conversion call in the linkifyTimestamps method to ensure the this context is correctly referenced ### 📊 Changes **1 file changed** (+49 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `client/components/modals/podcast/ViewEpisode.vue` (+49 -2) </details> ### 📄 Description ## Brief summary This PR introduces a new feature that automatically detects timestamps (e.g., `59:23` or `01:03:55`) in an item's description and converts them into clickable links. When a user clicks on one of these links, the player will seek to that specific time in the audio. This enhances the user experience by allowing creators to easily reference parts of the audio in the description, and listeners to jump directly to those points of interest. ## Which issue is fixed? <!-- Which issue number does this PR fix? Ex: "Fixes #1234" --> ## In-depth Description 1. A new computed property, `processedDescription`, uses a regular expression to find all timestamp patterns in the item's HTML description. 2. Each found timestamp is wrapped in an `<a>` tag with a `data-time-seconds` attribute containing the time converted to total seconds. 3. An event delegation pattern is used on the description container (`@click="handleDescriptionClick"`). This avoids attaching numerous event listeners and efficiently captures clicks on the dynamically generated links. 4. When a timestamp link is clicked, the handler extracts the time in seconds from the `data` attribute and calls the existing `timestampClick` method to seek the player. ## How have you tested this? <!-- Please describe in detail with reproducible steps how you tested your changes. --> ## Screenshots ### Before `39:14-53:42 My favorite part` ![image](https://github.com/user-attachments/assets/af9eab41-c42e-466d-8ade-46262e039694) ### After `<a href="#">39:14</a>-<a href="#">53:42</a> My favorite part` (Clicking "39:14" seeks the audio to 39 minutes and 14 seconds). ![image](https://github.com/user-attachments/assets/ff7ec9da-e0fc-41d4-b93b-fe3c1b0f4203) https://github.com/user-attachments/assets/d2b034f7-327d-410f-ac09-d65fe13caf98 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:18:56 +02:00
adam closed this issue 2026-04-25 00:18:56 +02:00
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 pull-request
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#4235
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?