update test & add peaks example

katspaugh · Jun 22, 2024 · 49fb7a8 · 49fb7a8
1 parent e79c0f5
commit 49fb7a8
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ docs
 node_modules
 yarn-error.log
 .env
-examples/app.js
+examples/app.js
+examples/peaks/app.js
diff --git a/examples/peaks/app.tsx b/examples/peaks/app.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import type WaveSurfer from 'wavesurfer.js'
+import WavesurferPlayer from '../../dist/index.js'
+import peaksDataAudio from './audio.json';
+import peaksDataStereo from './stereo.json';
+
+console.log('mounting React wavesurfer');
+
+const medias = [
+  {
+    url: '../audio.wav',
+    peaks: [peaksDataAudio.data],
+    duration: peaksDataAudio.length
+  },
+  {
+    url: '../stereo.mp3',
+    peaks: [peaksDataStereo.data],
+    duration: peaksDataStereo.length
+  }
+]
+
+const randomColor = () =>
+  `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`
+
+const App = () => {
+  const [mediaIndex, setMediaIndex] = useState(0)
+  const [waveColor, setWaveColor] = useState(randomColor)
+  const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  // Swap the audio URL
+  const onUrlChange = () => {
+    setIsPlaying(false)
+    setMediaIndex((index) => (index + 1) % medias.length)
+  }
+
+  // Play/pause the audio
+  const onPlayPause = () => {
+    setIsPlaying((playing) => {
+      if (wavesurfer?.isPlaying() !== !playing) {
+        wavesurfer?.playPause()
+        return !playing
+      }
+      return playing
+    })
+  }
+
+  // Randomize the wave color
+  const onColorChange = () => {
+    //setWaveColor(randomColor) // slow -- re-render
+    wavesurfer?.setOptions({ waveColor: randomColor() }) // fast -- no re-render
+  }
+
+  const media = medias[mediaIndex]
+
+  return (
+    <>
+      <WavesurferPlayer
+        height={100}
+        waveColor={waveColor}
+        url={media.url}
+        peaks={media.peaks}
+        duration={media.duration}
+        onPause={() => setIsPlaying(false)}
+        onPlay={() => setIsPlaying(true)}
+        onReady={(ws) => setWavesurfer(ws)}
+      />
+
+      <div style={{ margin: '1em 0', display: 'flex', gap: '1em' }}>
+        <button onClick={onUrlChange}>Change audio</button>
+
+        <button onClick={onColorChange}>Randomize color</button>
+
+        <button onClick={onPlayPause} style={{ minWidth: '5em' }}>
+          {isPlaying ? 'Pause' : 'Play'}
+        </button>
+      </div>
+    </>
+  )
+}
+
+// Create a React root and render the app
+const root = createRoot(document.getElementById('app')!)
+root.render(<App />)
diff --git a/examples/peaks/audio.json b/examples/peaks/audio.json
@@ -0,0 +1 @@
+{"version":2,"channels":1,"sample_rate":16000,"samples_per_pixel":16000,"bits":8,"length":27,"data":[-63,57,-73,58,-61,47,-63,69,-55,58,-67,81,-74,81,-52,63,-63,71,-73,68,-75,72,-69,64,-67,66,-57,58,-49,56,-63,68,-69,62,-59,53,-54,58,-58,48,-70,68,-49,53,-51,51,-47,51,-55,43,-31,31,-6,6]}
diff --git a/examples/peaks/index.html b/examples/peaks/index.html
@@ -0,0 +1,11 @@
+<DOCTYPE html>
+<html>
+  <head>
+    <title>React component for wavesufer.js</title>
+  </head>
+
+  <body>
+    <div id="app" style="max-width: 900px; margin: auto"></div>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>
diff --git a/examples/peaks/stereo.json b/examples/peaks/stereo.json
@@ -0,0 +1 @@
+{"version":2,"channels":1,"sample_rate":48000,"samples_per_pixel":48000,"bits":8,"length":175,"data":[-7,7,-9,10,-26,25,-29,27,-37,37,-41,41,-39,39,-40,40,-41,43,-39,41,-37,37,-40,39,-36,37,-42,43,-37,37,-40,39,-36,34,-39,39,-42,41,-42,43,-35,34,-40,40,-39,39,-38,38,-29,34,-39,40,-39,39,-38,38,-35,33,-41,41,-38,38,-37,37,-36,36,-39,38,-40,39,-39,38,-36,36,-38,38,-37,37,-38,37,-37,38,-37,37,-38,38,-38,37,-37,37,-41,40,-36,38,-37,37,-38,35,-38,38,-40,39,-40,40,-36,35,-37,37,-36,37,-37,38,-27,31,-33,33,-37,37,-37,37,-35,37,-37,37,-37,37,-37,37,-37,36,-32,33,-38,39,-37,39,-36,36,-37,36,-35,35,-37,38,-34,34,-35,35,-36,36,-37,36,-34,34,-36,36,-37,37,-36,36,-35,35,-35,34,-37,38,-37,39,-36,35,-35,34,-35,36,-36,37,-36,37,-35,35,-35,35,-36,35,-35,36,-37,37,-35,36,-36,36,-34,34,-35,35,-36,37,-36,37,-34,35,-35,36,-34,34,-36,36,-35,35,-35,35,-34,35,-36,35,-35,36,-36,36,-35,35,-36,36,-35,34,-35,34,-36,37,-34,35,-33,35,-35,35,-33,34,-35,36,-36,36,-35,35,-34,35,-34,34,-35,35,-36,35,-35,35,-34,34,-35,35,-35,34,-36,34,-36,34,-34,34,-34,34,-34,34,-36,34,-35,35,-34,35,-34,34,-33,33,-34,34,-35,34,-33,35,-29,29,-34,34,-34,34,-35,35,-35,35,-34,33,-34,34,-34,34,-32,30,-33,29,-34,34,-34,34,-34,34,-33,33,-34,34,-26,24,-34,34,-29,33,-34,34,-34,34,-23,27,-21,28,-21,21,-22,22,-29,31,-18,17,-12,13,-11,8,-2,3,-2,5,-3,1,0,0]}
diff --git a/examples/rollup.config.js b/examples/rollup.config.js
@@ -1,6 +1,7 @@
 import typescript from '@rollup/plugin-typescript'
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
+import json from '@rollup/plugin-json'
 import injectProcessEnv from 'rollup-plugin-inject-process-env'
 
 export default [
@@ -12,4 +13,12 @@ export default [
     },
     plugins: [typescript(), commonjs(), resolve(), injectProcessEnv({ NODE_ENV: '' })],
   },
+  {
+    input: 'peaks/app.tsx',
+    output: {
+      file: 'peaks/app.js',
+      format: 'esm',
+    },
+    plugins: [typescript(), commonjs(), resolve(), json(), injectProcessEnv({ NODE_ENV: '' })],
+  }
 ]
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -15,6 +15,7 @@
     "strict": true,
     "jsx": "react-jsx",
     "skipLibCheck": true,
+    "resolveJsonModule": true,
     "removeComments": false
   }
 }
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.2",

diff --git a/src/index.tsx b/src/index.tsx
@@ -193,7 +193,7 @@ function useWavesurferLoad(
  */
 const WavesurferPlayer = memo((props: WavesurferProps): ReactElement => {
   const containerRef = useRef<HTMLDivElement | null>(null)
-  const [{ url, peaks, duration, ...options}, events] = useWavesurferProps(props)
+  const [{ url, peaks, duration, ...options }, events] = useWavesurferProps(props)
   const wavesurfer = useWavesurferInstance(containerRef, options)
   useWavesurferEvents(wavesurfer, events)
   useWavesurferLoad(wavesurfer, url, peaks, duration)

diff --git a/tests/index.test.js b/tests/index.test.js
@@ -38,14 +38,14 @@ describe('@wavesurfer/react tests', () => {
   })
 
   it('should render wavesurfer with events', (done) => {
-    const props = { url: 'test.mp3', waveColor: 'purple' }
+    const { url, peaks, duration, ...props } = { url: 'test.mp3', waveColor: 'purple' }
 
     const onReady = (wavesurfer) => {
       expect(wavesurfer).toBeInstanceOf(WaveSurfer)
       done()
     }
 
-    render(React.createElement(WavesurferPlayer, { ...props, onReady }))
+    render(React.createElement(WavesurferPlayer, { url, peaks, duration, ...props, onReady }))
 
     expect(WaveSurfer.create).toHaveBeenCalledWith({
       ...props,

diff --git a/yarn.lock b/yarn.lock
@@ -641,6 +641,13 @@
     is-reference "1.2.1"
     magic-string "^0.30.3"
 
+"@rollup/plugin-json@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-6.1.0.tgz#fbe784e29682e9bb6dee28ea75a1a83702e7b805"
+  integrity sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==
+  dependencies:
+    "@rollup/pluginutils" "^5.1.0"
+
 "@rollup/plugin-node-resolve@^15.2.3":
   version "15.2.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz#e5e0b059bd85ca57489492f295ce88c2d4b0daf9"
@@ -670,7 +677,7 @@
     "@rollup/pluginutils" "^5.0.1"
     resolve "^1.22.1"
 
-"@rollup/pluginutils@^5.0.1":
+"@rollup/pluginutils@^5.0.1", "@rollup/pluginutils@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
   integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==