Merge branch 'main' into feat-part-attributes

.github/workflows/release.yml

@@ -25,7 +25,7 @@ jobs:
           if [ $NEW_VERSION != $OLD_VERSION ]; then
             echo "New version $NEW_VERSION detected"
             echo "version=$NEW_VERSION" >> $GITHUB_OUTPUT
-            git log "$OLD_VERSION"..HEAD --pretty=format:"* %s" > TEMP_CHANGELOG.md
+            git log "$OLD_VERSION"..HEAD --pretty=format:"* %s by %ae" | sed -E 's/by [0-9]+\+(.+)@users.noreply.github.com/by @\1/g' | sed -E 's/ by @?katspaugh.*//g' > TEMP_CHANGELOG.md
           else
             echo "Version $OLD_VERSION hasn't changed, skipping the release"
           fi

cypress/e2e/basic.cy.js

@@ -25,6 +25,25 @@ describe('WaveSurfer basic tests', () => {
     cy.window().its('wavesurfer').should('be.an', 'object')
   })
 
+  it('should emit a redrawcomplete event', () => {
+    cy.window().then((win) => {
+      const { wavesurfer } = win
+      expect(wavesurfer.getDuration().toFixed(2)).to.equal('21.77')
+
+      wavesurfer.options.minPxPerSec = 200
+      wavesurfer.load('../../examples/audio/audio.wav')
+
+      return new Promise((resolve) => {
+        wavesurfer.once('redrawcomplete', () => {
+          wavesurfer.zoom(100)
+          wavesurfer.once('redrawcomplete', () => {
+            resolve()
+          })
+        })
+      })
+    })
+  })
+
   it('should load an audio file without errors', () => {
     cy.window().then((win) => {
       expect(win.wavesurfer.getDuration().toFixed(2)).to.equal('21.77')

examples/events.js

@@ -26,9 +26,14 @@ wavesurfer.on('ready', (duration) => {
   console.log('Ready', duration + 's')
 })
 
-/** When a waveform is drawn */
-wavesurfer.on('redraw', () => {
-  console.log('Redraw')
+/** When visible waveform is drawn */
+wavesurfer.on('redrawcomplete', () => {
+  console.log('Redraw began')
+})
+
+/** When all audio channel chunks of the waveform have drawn */
+wavesurfer.on('redrawcomplete', () => {
+  console.log('Redraw complete')
 })
 
 /** When the audio starts playing */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.6.3",
+  "version": "7.7.0",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Audio waveform player",

src/dom.ts

@@ -31,12 +31,12 @@ function renderNode(tagName: string, content: TreeNode): HTMLElement | SVGElemen
   return element
 }
 
-function render(tagName: string, content: TreeNode & { xmlns: string }, container?: Node): SVGElement
-function render(tagName: string, content?: TreeNode, container?: Node): HTMLElement
-function render(tagName: string, content?: TreeNode, container?: Node): HTMLElement | SVGElement {
+export function createElement(tagName: string, content: TreeNode & { xmlns: string }, container?: Node): SVGElement
+export function createElement(tagName: string, content?: TreeNode, container?: Node): HTMLElement
+export function createElement(tagName: string, content?: TreeNode, container?: Node): HTMLElement | SVGElement {
   const el = renderNode(tagName, content || {})
   container?.appendChild(el)
   return el
 }
 
-export default render
+export default createElement

src/player.ts

@@ -91,7 +91,8 @@ class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
   }
 
   /** Start playing the audio */
-  public play(): Promise<void> {
+  public async play(): Promise<void> {
+    if (!this.media.src) return
     return this.media.play()
   }
 
@@ -145,6 +146,11 @@ class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
     return this.media.playbackRate
   }
 
+  /** Check if the audio is seeking */
+  public isSeeking(): boolean {
+    return this.media.seeking
+  }
+
   /** Set the playback speed, pass an optional false to NOT preserve the pitch */
   public setPlaybackRate(rate: number, preservePitch?: boolean) {
     // preservePitch is true by default in most browsers

src/plugins/envelope.ts

@@ -5,7 +5,7 @@
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
 import { makeDraggable } from '../draggable.js'
 import EventEmitter from '../event-emitter.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type EnvelopePoint = {
   id?: string
@@ -66,7 +66,7 @@ class Polyline extends EventEmitter<{
     const height = wrapper.clientHeight
 
     // SVG element
-    const svg = render(
+    const svg = createElement(
       'svg',
       {
         xmlns: 'http://www.w3.org/2000/svg',
@@ -88,7 +88,7 @@ class Polyline extends EventEmitter<{
     this.svg = svg
 
     // A polyline representing the envelope
-    const polyline = render(
+    const polyline = createElement(
       'polyline',
       {
         xmlns: 'http://www.w3.org/2000/svg',
@@ -173,7 +173,7 @@ class Polyline extends EventEmitter<{
   private createCircle(x: number, y: number) {
     const size = this.options.dragPointSize
     const radius = size / 2
-    return render(
+    return createElement(
       'ellipse',
       {
         xmlns: 'http://www.w3.org/2000/svg',

src/plugins/hover.ts

@@ -3,7 +3,7 @@
  */
 
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type HoverPluginOptions = {
   lineColor?: string
@@ -33,8 +33,8 @@ class HoverPlugin extends BasePlugin<HoverPluginEvents, HoverPluginOptions> {
     this.options = Object.assign({}, defaultOptions, options)
 
     // Create the plugin elements
-    this.wrapper = render('div', { part: 'hover' })
-    this.label = render('span', { part: 'hover-label' }, this.wrapper)
+    this.wrapper = createElement('div', { part: 'hover' })
+    this.label = createElement('span', { part: 'hover-label' }, this.wrapper)
   }
 
   public static create(options?: HoverPluginOptions) {

src/plugins/minimap.ts

@@ -4,7 +4,7 @@
 
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
 import WaveSurfer, { type WaveSurferOptions } from '../wavesurfer.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type MinimapPluginOptions = {
   overlayColor?: string
@@ -63,7 +63,7 @@ class MinimapPlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions
   }
 
   private initMinimapWrapper(): HTMLElement {
-    return render('div', {
+    return createElement('div', {
       part: 'minimap',
       style: {
         position: 'relative',
@@ -72,9 +72,10 @@ class MinimapPlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions
   }
 
   private initOverlay(): HTMLElement {
-    return render(
+    return createElement(
       'div',
       {
+        part: 'minimap-overlay',
         style: {
           position: 'absolute',
           zIndex: '2',

src/plugins/regions.ts

@@ -7,7 +7,7 @@
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
 import { makeDraggable } from '../draggable.js'
 import EventEmitter from '../event-emitter.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type RegionsPluginOptions = undefined
 
@@ -25,7 +25,7 @@ export type RegionEvents = {
   /** Before the region is removed */
   remove: []
   /** When the region's parameters are being updated */
-  update: []
+  update: [side?: 'start' | 'end']
   /** When dragging or resizing is finished */
   'update-end': []
   /** On play */
@@ -120,7 +120,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       wordBreak: 'keep-all',
     }
 
-    const leftHandle = render(
+    const leftHandle = createElement(
       'div',
       {
         part: 'region-handle region-handle-left',
@@ -134,7 +134,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       element,
     )
 
-    const rightHandle = render(
+    const rightHandle = createElement(
       'div',
       {
         part: 'region-handle region-handle-right',
@@ -188,7 +188,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       elementTop = elementHeight * this.channelIdx
     }
 
-    const element = render('div', {
+    const element = createElement('div', {
       style: {
         position: 'absolute',
         top: `${elementTop}%`,
@@ -219,7 +219,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
   }
 
   private toggleCursor(toggle: boolean) {
-    if (!this.drag) return
+    if (!this.drag || !this.element?.style) return
     this.element.style.cursor = toggle ? 'grabbing' : 'grab'
   }
 
@@ -270,7 +270,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       this.end = newEnd
 
       this.renderPosition()
-      this.emit('update')
+      this.emit('update', side)
     }
   }
 
@@ -319,7 +319,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
     }
     if (typeof content === 'string') {
       const isMarker = this.start === this.end
-      this.content = render('div', {
+      this.content = createElement('div', {
         style: {
           padding: `0.2em ${isMarker ? 0.2 : 0.4}em`,
           display: 'inline-block',
@@ -439,7 +439,7 @@ class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions
   }
 
   private initRegionsContainer(): HTMLElement {
-    return render('div', {
+    return createElement('div', {
       style: {
         position: 'absolute',
         top: '0',
@@ -502,8 +502,11 @@ class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions
     this.regions.push(region)
 
     const regionSubscriptions = [
-      region.on('update', () => {
-        this.adjustScroll(region)
+      region.on('update', (side) => {
+        // Undefined side indicates that we are dragging not resizing
+        if (!side) {
+          this.adjustScroll(region)
+        }
       }),
 
       region.on('update-end', () => {

src/plugins/spectrogram.ts

@@ -215,7 +215,7 @@ function FFT(bufferSize: number, sampleRate: number, windowFunc: string, alpha:
  * Spectrogram plugin for wavesurfer.
  */
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type SpectrogramPluginOptions = {
   /** Selector of element or element in which to render */
@@ -347,7 +347,7 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
   }
 
   private createWrapper() {
-    this.wrapper = render('div', {
+    this.wrapper = createElement('div', {
       style: {
         display: 'block',
         position: 'relative',
@@ -357,7 +357,7 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
 
     // if labels are active
     if (this.options.labels) {
-      this.labelsEl = render(
+      this.labelsEl = createElement(
         'canvas',
         {
           part: 'spec-labels',
@@ -376,7 +376,7 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
   }
 
   private createCanvas() {
-    this.canvas = render(
+    this.canvas = createElement(
       'canvas',
       {
         style: {

src/plugins/timeline.ts

@@ -3,7 +3,7 @@
  */
 
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type TimelinePluginOptions = {
   /** The height of the timeline in pixels, defaults to 20 */
@@ -104,7 +104,7 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
   }
 
   private initTimelineWrapper(): HTMLElement {
-    return render('div', { part: 'timeline-wrapper', style: { pointerEvents: 'none' } })
+    return createElement('div', { part: 'timeline-wrapper', style: { pointerEvents: 'none' } })
   }
 
   // Return how many seconds should be between each notch
@@ -153,7 +153,7 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
     const secondaryLabelSpacing = this.options.secondaryLabelSpacing
     const isTop = this.options.insertPosition === 'beforebegin'
 
-    const timeline = render('div', {
+    const timeline = createElement('div', {
       style: {
         height: `${this.options.height}px`,
         overflow: 'hidden',
@@ -181,7 +181,7 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
       Object.assign(timeline.style, this.options.style)
     }
 
-    const notchEl = render('div', {
+    const notchEl = createElement('div', {
       style: {
         width: '0',
         height: '50%',