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 #4732] [CLOSED] feat(player): enhanced volume button with smooth fade (linear/ease-in/ease-out) #4332

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

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4732
Author: @WangliZhang77
Created: 10/9/2025
Status: ❌ Closed

Base: master ← Head: feature/volume-button

📝 Commits (2)

  • 6e7ba0e modified
  • 7ed2b35 feat(player): add enhanced volume button with smooth fade control

📊 Changes

4 files changed (+571 additions, -83 deletions)

View changed files

📝 client/components/player/PlayerUi.vue (+158 -78)
➕ client/components/widgets/VolumeFade.vue (+284 -0)
📝 package-lock.json (+127 -4)
📝 package.json (+2 -1)

📄 Description

Motivation

The default player toggles volume abruptly, which can cause clicks/pops and lacks an accessible long-press affordance to quickly fade out.

What’s included

  • New volume button component for the player:
    • Single click: smooth mute/unmute (no abrupt jumps)
    • Long press: fade to 0 then auto-pause
    • Fade modes: Linear, Ease-In, Ease-Out
    • Remembers last non-zero volume on unmute
    • UI feedback: shows current volume percentage and active mode
    • Keyboard accessible (Enter/Space) with clear title attribute

Implementation

  • Self-contained Vue component that tween-updates HTMLAudioElement.volume via requestAnimationFrame with pluggable easing.
  • Props for duration, default volume, and mode; cleans up timers on unmount.
  • UI-agnostic (Tailwind classes optional). Can map to Howler’s fade if desired.

Files touched

  • client/components/widgets/VolumeFade.vue (new)

Testing

  • Manual cross-browser check (Chromium/Firefox): consistent fade timing and state restore.
  • Verified no regressions to core playback logic.

UX/Accessibility

  • Reduces audible artifacts on volume changes.
  • Adds keyboard support and descriptive tooltip.
  • Low-risk, opt-in component.

Screenshots/GIF

  • (optional) Please see attached GIF demonstrating click fade and long-press fade-to-pause.

Future work (optional)

  • Expose mode/duration in settings.
  • Add small slider for precise volume; e2e test case.

🔄 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/4732 **Author:** [@WangliZhang77](https://github.com/WangliZhang77) **Created:** 10/9/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `feature/volume-button` --- ### 📝 Commits (2) - [`6e7ba0e`](https://github.com/advplyr/audiobookshelf/commit/6e7ba0e51c05d82263830937e6eb0b57f22fea72) modified - [`7ed2b35`](https://github.com/advplyr/audiobookshelf/commit/7ed2b35d6634b4fca00627583b81c9f077df2a97) feat(player): add enhanced volume button with smooth fade control ### 📊 Changes **4 files changed** (+571 additions, -83 deletions) <details> <summary>View changed files</summary> 📝 `client/components/player/PlayerUi.vue` (+158 -78) ➕ `client/components/widgets/VolumeFade.vue` (+284 -0) 📝 `package-lock.json` (+127 -4) 📝 `package.json` (+2 -1) </details> ### 📄 Description ## Motivation The default player toggles volume abruptly, which can cause clicks/pops and lacks an accessible long-press affordance to quickly fade out. ## What’s included - New volume button component for the player: - Single click: smooth mute/unmute (no abrupt jumps) - Long press: fade to 0 then auto-pause - Fade modes: Linear, Ease-In, Ease-Out - Remembers last non-zero volume on unmute - UI feedback: shows current volume percentage and active mode - Keyboard accessible (Enter/Space) with clear title attribute ## Implementation - Self-contained Vue component that tween-updates `HTMLAudioElement.volume` via `requestAnimationFrame` with pluggable easing. - Props for duration, default volume, and mode; cleans up timers on unmount. - UI-agnostic (Tailwind classes optional). Can map to Howler’s `fade` if desired. ## Files touched - `client/components/widgets/VolumeFade.vue` (new) ## Testing - Manual cross-browser check (Chromium/Firefox): consistent fade timing and state restore. - Verified no regressions to core playback logic. ## UX/Accessibility - Reduces audible artifacts on volume changes. - Adds keyboard support and descriptive tooltip. - Low-risk, opt-in component. ## Screenshots/GIF - (optional) Please see attached GIF demonstrating click fade and long-press fade-to-pause. ## Future work (optional) - Expose mode/duration in settings. - Add small slider for precise volume; e2e test case. --- <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:19:19 +02:00
adam closed this issue 2026-04-25 00:19:19 +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#4332
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?