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

Fix: don't reset scroll on setOptions #3372

Merged
merged 1 commit into from
Dec 3, 2023
Merged

Fix: don't reset scroll on setOptions #3372

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions src/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class Renderer extends EventEmitter<RendererEvents> {
private progressWrapper: HTMLElement
private cursor: HTMLElement
private timeouts: Array<{ timeout?: ReturnType<typeof setTimeout> }> = []
private isScrolling = false
private isScrollable = false
private audioData: AudioBuffer | null = null
private resizeObserver: ResizeObserver | null = null
private isDragging = false
Expand Down Expand Up @@ -526,7 +526,6 @@ class Renderer extends EventEmitter<RendererEvents> {
// Clear the canvases
this.canvasWrapper.innerHTML = ''
this.progressWrapper.innerHTML = ''
this.wrapper.style.width = ''

// Width
if (this.options.width != null) {
Expand All @@ -540,16 +539,16 @@ class Renderer extends EventEmitter<RendererEvents> {
const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0))

// Whether the container should scroll
this.isScrolling = scrollWidth > parentWidth
const useParentWidth = this.options.fillParent && !this.isScrolling
this.isScrollable = scrollWidth > parentWidth
const useParentWidth = this.options.fillParent && !this.isScrollable
// Width of the waveform in pixels
const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio

// Set the width of the wrapper
this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`

// Set additional styles
this.scrollContainer.style.overflowX = this.isScrolling ? 'auto' : 'hidden'
this.scrollContainer.style.overflowX = this.isScrollable ? 'auto' : 'hidden'
this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar)
this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`
this.cursor.style.width = `${this.options.cursorWidth}px`
Expand Down Expand Up @@ -578,14 +577,17 @@ class Renderer extends EventEmitter<RendererEvents> {
if (!this.audioData) return

// Remember the current cursor position
const { scrollWidth } = this.scrollContainer
const oldCursorPosition = this.progressWrapper.clientWidth

// Set the new zoom level and re-render the waveform
// Re-render the waveform
this.render(this.audioData)

// Adjust the scroll position so that the cursor stays in the same place
const newCursortPosition = this.progressWrapper.clientWidth
this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition
if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {
const newCursorPosition = this.progressWrapper.clientWidth
this.scrollContainer.scrollLeft += newCursorPosition - oldCursorPosition
}
}

zoom(minPxPerSec: number) {
Expand Down Expand Up @@ -638,7 +640,7 @@ class Renderer extends EventEmitter<RendererEvents> {
this.cursor.style.left = `${percents}%`
this.cursor.style.marginLeft = Math.round(percents) === 100 ? `-${this.options.cursorWidth}px` : ''

if (this.isScrolling && this.options.autoScroll) {
if (this.isScrollable && this.options.autoScroll) {
this.scrollIntoView(progress, isPlaying)
}
}
Expand Down