Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix: Retrieve scrollWidth from Wavesurfer wrapper in TimelinePlugin #3743

Merged
merged 1 commit into from
Jun 15, 2024
Merged

Fix: Retrieve scrollWidth from Wavesurfer wrapper in TimelinePlugin #3743

merged 1 commit into from
Jun 15, 2024

Conversation

alexanderleecii
Copy link
Contributor

Short description

In this PR, the width used to calculate pxPerSec in TimelinePlugin is retrieved from the scrollWidth of the Wavesurfer wrapper, for cases where the timeline wrapper itself is not a child of the wavesurfer wrapper. This enables timelines and waveform to stay visually in sync when zooming.

Resolves #3742

Implementation details

Used this.wavesurfer.getWrapper() to access the scrollWidth property when possible, otherwise default to this.timelineWrapper.scrollWidth.

How to test it

  1. Create a Wavesurfer instance, with e.g. "#waveform" as a container
  2. Create a TimelinePlugin instance, with e.g. "#timeline" as a container
  3. Call .zoom(zoomLevel) on the Wavesurfer instance to change the zoom level of the waveform

=> The timeline will rerender properly and follow the current zoom level of the waveform

import WaveSurfer from 'wavesurfer.js'
import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'

// Create an instance of TimelinePlugin
const timeline = TimelinePlugin.create({
  container: '#timeline',
})

// Create an instance of WaveSurfer
const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  minPxPerSec: 100,
  plugins: [timeline],
})

/*
<html>
  <label>
    Zoom: <input type="range" min="10" max="1000" value="100" />
  </label>

  <div id="timeline"></div>
  <div id="waveform"></div>
  <p>
    📖 <a href="https://wavesurfer.xyz/docs/classes/plugins_timeline.TimelinePlugin">Timeline plugin docs</a>
  </p>
</html>
*/

// Update the zoom level on slider change
wavesurfer.once('decode', () => {
  const slider = document.querySelector('input[type="range"]')

  slider.addEventListener('input', (e) => {
    const minPxPerSec = e.target.valueAsNumber
    wavesurfer.zoom(minPxPerSec)
  })
})

Screenshots

Recording.2024-06-14.181951.mp4

Checklist

  • This PR is covered by e2e tests
  • It introduces no breaking API changes
@alexanderleecii
TimelinePlugin: try to retrieve wrapper scrollWidth value from wavesu…
761575d 
…rfer wrapper when computing pxPerSec in initTimeline()
katspaugh
katspaugh approved these changes Jun 14, 2024
View reviewed changes
Copy link
Owner

@katspaugh katspaugh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!
@katspaugh katspaugh merged commit 90c6cd4 into katspaugh:main Jun 15, 2024
2 checks passed
@alexanderleecii alexanderleecii deleted the feature/alco/timeline-plugin-container-width branch June 16, 2024 10:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants
@alexanderleecii @katspaugh