Update AudioFilePreview

Properly initialize WaveSurfer library.

packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx

@@ -87,6 +87,13 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                   onEnded={reset}
                   onTimeUpdate={updateSeekFromPlayback}
                   data-testid="preview"
+                  barWidth={2}
+                  barGap={2}
+                  waveColor="rgb(199 138 179)"
+                  progressColor="rgb(238 238 238)"
+                  cursorWidth={2}
+                  cursorColor="rgb(255 153 0)"
+                  interact
                 >
                   <source
                     src={augmentedFile.metadata.previewUrl}

packages/web-kitchensink-reactnext/src/packages/react-wavesurfer/WaveSurferCanvas/index.tsx

@@ -1,13 +1,39 @@
 import * as React from 'react';
+import {WaveSurferOptions} from 'wavesurfer.js';
+import clsx from 'clsx';
 
 type WaveSurferCanvasDerivedComponent = HTMLAudioElement;
 
-export interface WaveSurferCanvasProps extends React.HTMLProps<WaveSurferCanvasDerivedComponent> {}
+export interface WaveSurferCanvasProps
+  extends React.HTMLProps<WaveSurferCanvasDerivedComponent>,
+    Omit<WaveSurferOptions, 'height' | 'media' | 'container' | 'fillParent' | 'url' | 'autoplay' | 'renderFunction'> {}
 
 export const WaveSurferCanvas = React.forwardRef<WaveSurferCanvasDerivedComponent, WaveSurferCanvasProps>(({
   className,
   children,
   controls,
+  waveColor,
+  progressColor,
+  cursorColor,
+  cursorWidth,
+  barWidth,
+  barGap,
+  barRadius,
+  barHeight,
+  barAlign,
+  minPxPerSec,
+  peaks,
+  duration,
+  autoPlay,
+  interact,
+  hideScrollbar,
+  audioRate,
+  autoScroll,
+  autoCenter,
+  sampleRate,
+  splitChannels,
+  normalize,
+  plugins,
   ...etcProps
 }, forwardedRef) => {
   const [isPlaying, setIsPlaying] = React.useState(false);
@@ -45,13 +71,34 @@ export const WaveSurferCanvas = React.forwardRef<WaveSurferCanvasDerivedComponen
       const { default: WaveSurfer } = await import('wavesurfer.js');
       const waveSurferInstance = WaveSurfer.create({
         container: containerRef.current,
-        barWidth: 2,
-        barGap: 2,
         height: containerRef.current.clientHeight,
         fillParent: true,
-        media,
-      } as any);
-      waveSurferInstance.load(ref.current.currentSrc);
+        autoplay: autoPlay,
+        waveColor,
+        progressColor,
+        cursorColor,
+        barWidth,
+        barGap,
+        barRadius,
+        barHeight,
+        barAlign,
+        minPxPerSec,
+        peaks,
+        duration,
+        interact,
+        hideScrollbar,
+        audioRate,
+        autoScroll,
+        autoCenter,
+        sampleRate,
+        splitChannels,
+        normalize,
+        plugins,
+        cursorWidth,
+        media: media ?? undefined,
+      });
+      await waveSurferInstance.load(ref.current.currentSrc);
+      waveSurferInstance.setTime(ref.current.currentTime);
       waveSurferInstance.on('ready', () => {
         if (!container) {
           return;
@@ -67,18 +114,49 @@ export const WaveSurferCanvas = React.forwardRef<WaveSurferCanvasDerivedComponen
       if (waveSurferCurrent) {
         (waveSurferCurrent as unknown as Record<string, Function>).destroy();
       }
+      if (container) {
+        container.innerHTML = '';
+      }
     };
-  }, [ref]);
+  }, [
+    ref,
+    autoPlay,
+    waveColor,
+    progressColor,
+    cursorColor,
+    barWidth,
+    barGap,
+    barRadius,
+    barHeight,
+    barAlign,
+    minPxPerSec,
+    peaks,
+    duration,
+    interact,
+    hideScrollbar,
+    audioRate,
+    autoScroll,
+    autoCenter,
+    sampleRate,
+    splitChannels,
+    normalize,
+    plugins,
+    cursorWidth,
+  ]);
 
   return (
     <div
-      className="relative h-full w-full flex flex-col"
+      className={clsx(
+        'relative h-full w-full flex flex-col',
+        className,
+      )}
     >
       <audio
         {...etcProps}
         controls={controls}
         className={className}
         ref={ref}
+        autoPlay={autoPlay}
       >
         {children}
       </audio>