Feat: custom fetch params (katspaugh#2938)

.gitignore

@@ -5,4 +5,5 @@ node_modules
 yarn-error.log
 public/docs
 cypress/screenshots
-cypress/downloads
+cypress/downloads
+cypress/videos

README.md

@@ -160,8 +160,13 @@ This command will open http://localhost:9090 in your browser with live reload, a
 ## Tests
 
 The tests are written in the Cypress framework. They are a mix of e2e and visual regression tests.
-To run the test suite locally:
 
+To run the test suite locally, first build the project:
+```
+yarn build
+```
+
+Then launch the tests:
 ```
 yarn cypress
 ```

cypress/e2e/options.cy.js

@@ -455,4 +455,72 @@ describe('WaveSurfer', () => {
       })
     })
   })
+
+  it('should use a custom rendering function', () => {
+    cy.window().then((win) => {
+      return new Promise((resolve) => {
+        win.wavesurfer = win.WaveSurfer.create({
+          container: id,
+          url: '../../examples/audio/demo.wav',
+          renderFunction: (channels, ctx) => {
+            const { width, height } = ctx.canvas
+            const scale = channels[0].length / width
+            const step = 10
+
+            ctx.translate(0, height / 2)
+            ctx.strokeStyle = ctx.fillStyle
+            ctx.beginPath()
+
+            for (let i = 0; i < width; i += step * 2) {
+              const index = Math.floor(i * scale)
+              const value = Math.abs(channels[0][index])
+              let x = i
+              let y = value * height
+
+              ctx.moveTo(x, 0)
+              ctx.lineTo(x, y)
+              ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true)
+              ctx.lineTo(x + step, 0)
+
+              x = x + step
+              y = -y
+              ctx.moveTo(x, 0)
+              ctx.lineTo(x, y)
+              ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false)
+              ctx.lineTo(x + step, 0)
+            }
+
+            ctx.stroke()
+            ctx.closePath()
+          },
+        })
+
+        win.wavesurfer.once('ready', () => {
+          cy.get(id).matchImageSnapshot('custom-render')
+          resolve()
+        })
+      })
+    })
+  })
+
+  it('should pass custom parameters to fetch', () => {
+    cy.window().then((win) => {
+      return new Promise((resolve) => {
+        win.wavesurfer = win.WaveSurfer.create({
+          container: id,
+          url: '../../examples/audio/demo.wav',
+          fetchParams: {
+            headers: {
+              'X-Custom-Header': 'foo',
+            },
+          },
+        })
+
+        win.wavesurfer.once('ready', () => {
+          cy.get(id).matchImageSnapshot('fetch-options')
+          resolve()
+        })
+      })
+    })
+  })
 })

package.json

@@ -42,7 +42,7 @@
     "build:dev": "tsc -w --target ESNext",
     "build:umd": "webpack",
     "build:umd:plugins": "webpack --config webpack.config.plugins.js",
-    "build": "tsc && npm run build:umd && npm run build:umd:plugins",
+    "build": "rm -rf dist && tsc && npm run build:umd && npm run build:umd:plugins",
     "deploy": "yarn build && yarn docs",
     "prepublishOnly": "npm run build",
     "docs": "typedoc src/wavesurfer.ts src/plugins/*.ts --out docs",

src/fetcher.ts

@@ -1,13 +1,8 @@
-async function fetchArrayBuffer(url: string): Promise<ArrayBuffer> {
-  return fetch(url).then((response) => response.arrayBuffer())
-}
-
-async function fetchBlob(url: string): Promise<Blob> {
-  return fetch(url).then((response) => response.blob())
+async function fetchBlob(url: string, init?: RequestInit): Promise<Blob> {
+  return fetch(url, init).then((response) => response.blob())
 }
 
 const Fetcher = {
-  fetchArrayBuffer,
   fetchBlob,
 }
 

src/wavesurfer.ts

@@ -62,6 +62,8 @@ export type WaveSurferOptions = {
   plugins?: GenericPlugin[]
   /** Custom render function */
   renderFunction?: (peaks: Array<Float32Array | number[]>, ctx: CanvasRenderingContext2D) => void
+  /** Options to pass to the fetch method */
+  fetchParams?: RequestInit
 }
 
 const defaultOptions = {
@@ -286,7 +288,7 @@ class WaveSurfer extends Player<WaveSurferEvents> {
     this.emit('load', url)
 
     // Fetch the entire audio as a blob if pre-decoded data is not provided
-    const blob = channelData ? undefined : await Fetcher.fetchBlob(url)
+    const blob = channelData ? undefined : await Fetcher.fetchBlob(url, this.options.fetchParams)
 
     // Set the mediaelement source to the URL
     this.setSrc(url, blob)