Browse Source

Update AudioFilePreview

Properly initialize WaveSurfer library.
pull/1/head
TheoryOfNekomata 1 year ago
parent
commit
4343d77241
2 changed files with 93 additions and 8 deletions
  1. +7
    -0
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
  2. +86
    -8
      packages/web-kitchensink-reactnext/src/packages/react-wavesurfer/WaveSurferCanvas/index.tsx

+ 7
- 0
packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx View File

@@ -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}


+ 86
- 8
packages/web-kitchensink-reactnext/src/packages/react-wavesurfer/WaveSurferCanvas/index.tsx View File

@@ -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>


Loading…
Cancel
Save