import * as React from 'react'; import {augmentAudioFile} from 'packages/web-kitchensink-reactnext/src/utils/blob'; import theme from 'packages/web-kitchensink-reactnext/src/styles/theme'; import {useMediaControls} from '../../hooks/interactive'; import {useFileMetadata, useFileUrl} from 'src/index'; import clsx from 'clsx'; import {SpectrogramCanvas, WaveformCanvas} from 'packages/web-kitchensink-reactnext/src/packages/react-wavesurfer'; import {useClientSide} from 'packages/react-utils'; export type AudioMiniFilePreviewDerivedElement = HTMLAudioElement; export interface AudioMiniFilePreviewProps = Partial> extends Omit, 'controls'> { file?: F; disabled?: boolean; enhanced?: boolean; } export const AudioMiniFilePreview = React.forwardRef(({ file, style, className, enhanced: enhancedProp = false, disabled = false, ...etcProps }, forwardedRef) => { const { fileWithUrl } = useFileUrl({ file, }); const { fileWithMetadata, error } = useFileMetadata({ file: fileWithUrl, augmentFunction: augmentAudioFile, }); const { mediaControllerRef, refreshControls, reset, updateSeekFromPlayback, isPlaying, isSeeking, currentTimeDisplay = 0, seekTimeDisplay = 0, durationDisplay = 0, isSeekTimeCountingDown, adjustVolume, volumeRef, handleAction, filenameRef, seekRef, startSeek, endSeek, setSeek, visualizationId, formId, } = useMediaControls({ controllerRef: forwardedRef, visualizationMode: 'waveform', }); const { clientSide } = useClientSide({ clientSide: enhancedProp }); if (!fileWithMetadata) { return null; } const finalSeekTimeDisplay = isSeekTimeCountingDown ? (durationDisplay - seekTimeDisplay) : seekTimeDisplay; const finalCurrentTimeDisplay = isSeekTimeCountingDown ? (durationDisplay - currentTimeDisplay) : currentTimeDisplay; return (
{ typeof fileWithMetadata.url === 'string' && (
{clientSide && ( <>
Math.floor(Number(c) / 2)).join(' ')})`} interact // waveColor={`rgb(${theme.primary})`} // barHeight={4} // minPxPerSec={20000} // hideScrollbar // autoCenter // autoScroll />
)}
) }
); }); AudioMiniFilePreview.displayName = 'AudioMiniFilePreview';