Skip to content

Move playback position in voice messages by holding down cursor and dragging #7309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

jaspass04
Copy link

First time contributor checklist:

Contributor checklist:

  • Our contribution is not related to translations.
  • Our commits are in nice logical chunks with good commit messages
  • Our changes are rebased on the latest main branch
  • A npm run ready run passes successfully (more about tests here)
  • Our changes are ready to be shipped to users

Voice Message Waveform Playback Position Dragging

Overview

This pull request implements the solution to the feature request of issue #7218 offering a waveform dragging functionality for voice messages in Signal Desktop, allowing users to seek through audio playback by dragging directly on the waveform visualization.

Before our implementation:

current-signal-voice-playback-.not-working.mov

After our implementation:

signal-voice-playback-working.mov

Features

  • Implemented drag detection and handling in the WaveformScrubber component
  • Added continuous position seeking during mouse drag operations
  • Preserved playback state during and after dragging operations
  • Temporarily muted audio during dragging for better user experience

Technical Implementation

  • The implementation focuses on providing a smooth user experience by:
  1. Detecting mouse down events on the waveform
  2. Preserving the current playback state (playing/paused)
  3. Temporarily muting audio during dragging to prevent jarring audio feedback
  4. Setting the current playback position as the user drags
  5. Restoring the previous playback state upon drag completion

Testing

Comprehensive tests have been added to verify:

  • Waveform drag detection functionality
  • Accurate position updates during dragging

User Experience Improvements

This enhancement provides a more intuitive way to navigate voice messages, particularly for longer recordings where precise positioning is important. Users can now:

  • Quickly jump to specific sections of voice messages
  • Preview content by scrubbing through the audio
  • More easily review important parts of a voice message

The implementation follows established patterns for audio scrubbing found in popular media players, making the interaction familiar and intuitive for users.

- Allows users to click and drag on the waveform to seek within voice messages.
- Pauses playback during drag and resumes it if the audio was playing before.
- Prevents multiple listeners and potential memory leaks by guarding drag state.
- Added unit tests for testing the interaction between waveform dragging and voice message playback.
@jaspass04 jaspass04 changed the title #7218 Move playback position in voice messages by holding down cursor and dragging Move playback position in voice messages by holding down cursor and dragging Apr 29, 2025
@ayumi-signal ayumi-signal self-assigned this Apr 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants