2023-07-14 13:06:21 +00:00
|
|
|
import { clsx } from 'clsx'
|
|
|
|
import styles from './AudioUploader.module.scss'
|
|
|
|
import { DropArea } from '../../_shared/DropArea'
|
|
|
|
import { useLocalize } from '../../../context/localize'
|
2023-07-18 19:11:00 +00:00
|
|
|
import { Show } from 'solid-js'
|
|
|
|
import { MediaItem } from '../../../pages/types'
|
2023-07-14 13:06:21 +00:00
|
|
|
import { composeMediaItems } from '../../../utils/composeMediaItems'
|
|
|
|
import { AudioPlayer } from '../../Article/AudioPlayer'
|
|
|
|
import { Buffer } from 'buffer'
|
|
|
|
|
|
|
|
window.Buffer = Buffer
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
class?: string
|
|
|
|
audio: MediaItem[]
|
2023-07-15 21:51:38 +00:00
|
|
|
baseFields?: {
|
|
|
|
artist?: string
|
|
|
|
date?: string
|
|
|
|
genre?: string
|
|
|
|
}
|
2023-07-14 13:06:21 +00:00
|
|
|
onAudioChange: (index: number, value: MediaItem) => void
|
|
|
|
onAudioAdd: (value: MediaItem[]) => void
|
2023-07-18 19:11:00 +00:00
|
|
|
onAudioSorted: (value: MediaItem[]) => void
|
2023-07-14 13:06:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export const AudioUploader = (props: Props) => {
|
|
|
|
const { t } = useLocalize()
|
|
|
|
|
2023-07-18 11:26:32 +00:00
|
|
|
const handleMediaItemFieldChange = (index: number, field: keyof MediaItem, value) => {
|
2023-07-14 13:06:21 +00:00
|
|
|
props.onAudioChange(index, { ...props.audio[index], [field]: value })
|
|
|
|
}
|
|
|
|
|
2023-07-18 19:11:00 +00:00
|
|
|
const handleChangeIndex = (direction: 'up' | 'down', index: number) => {
|
|
|
|
const media = [...props.audio]
|
|
|
|
if (direction === 'up' && index > 0) {
|
|
|
|
const copy = media.splice(index, 1)[0]
|
|
|
|
media.splice(index - 1, 0, copy)
|
|
|
|
} else if (direction === 'down' && index < media.length - 1) {
|
|
|
|
const copy = media.splice(index, 1)[0]
|
|
|
|
media.splice(index + 1, 0, copy)
|
|
|
|
}
|
|
|
|
props.onAudioSorted(media)
|
|
|
|
}
|
|
|
|
|
2023-07-14 13:06:21 +00:00
|
|
|
return (
|
|
|
|
<div class={clsx(styles.AudioUploader, props.class)}>
|
|
|
|
<Show when={props.audio.length > 0}>
|
2023-07-18 11:26:32 +00:00
|
|
|
<AudioPlayer
|
|
|
|
editorMode={true}
|
|
|
|
media={props.audio}
|
|
|
|
onMediaItemFieldChange={handleMediaItemFieldChange}
|
2023-07-18 19:11:00 +00:00
|
|
|
onChangeMediaIndex={handleChangeIndex}
|
2023-07-18 11:26:32 +00:00
|
|
|
/>
|
2023-07-14 13:06:21 +00:00
|
|
|
</Show>
|
|
|
|
<DropArea
|
|
|
|
isMultiply={true}
|
|
|
|
placeholder={t('Add audio')}
|
|
|
|
description={t('You can download multiple tracks at once in .mp3, .wav or .flac formats')}
|
|
|
|
fileType={'audio'}
|
2023-07-15 21:51:38 +00:00
|
|
|
onUpload={(value) => props.onAudioAdd(composeMediaItems(value, props.baseFields))}
|
2023-07-14 13:06:21 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|