diff --git a/src/components/Article/AudioHeader/AudioHeader.module.scss b/src/components/Article/AudioHeader/AudioHeader.module.scss index 20502749..c3739655 100644 --- a/src/components/Article/AudioHeader/AudioHeader.module.scss +++ b/src/components/Article/AudioHeader/AudioHeader.module.scss @@ -55,6 +55,7 @@ object-fit: cover; width: 100%; height: 100%; + display: block; } .expand { diff --git a/src/components/Article/AudioPlayer/AudioPlayer.tsx b/src/components/Article/AudioPlayer/AudioPlayer.tsx index 63ae0e23..8f0951c5 100644 --- a/src/components/Article/AudioPlayer/AudioPlayer.tsx +++ b/src/components/Article/AudioPlayer/AudioPlayer.tsx @@ -3,7 +3,7 @@ import { PlayerHeader } from './PlayerHeader' import { PlayerPlaylist } from './PlayerPlaylist' import styles from './AudioPlayer.module.scss' import { MediaItem } from '../../../pages/types' -import { audioProxy } from '../../../utils/imageProxy' +import { imageProxy } from '../../../utils/imageProxy' export type Audio = { pic?: string @@ -23,7 +23,7 @@ type Props = { const prepareMedia = (media: Audio[]) => media.map((item, index) => ({ ...item, - url: audioProxy(item.url), + url: imageProxy(item.url), index: index, isCurrent: false, isPlaying: false diff --git a/src/components/Editor/AudioUploader/AudioUploader.tsx b/src/components/Editor/AudioUploader/AudioUploader.tsx index c1f9114c..2ba4ccf4 100644 --- a/src/components/Editor/AudioUploader/AudioUploader.tsx +++ b/src/components/Editor/AudioUploader/AudioUploader.tsx @@ -3,7 +3,7 @@ import styles from './AudioUploader.module.scss' import { DropArea } from '../../_shared/DropArea' import { useLocalize } from '../../../context/localize' import { createEffect, createSignal, on, Show } from 'solid-js' -import { MediaItem } from '../../../pages/types' +import { MediaItem, UploadedFile } from '../../../pages/types' import { composeMediaItems } from '../../../utils/composeMediaItems' import { AudioPlayer } from '../../Article/AudioPlayer' import { Buffer } from 'buffer' @@ -13,6 +13,11 @@ window.Buffer = Buffer type Props = { class?: string audio: MediaItem[] + baseFields?: { + artist?: string + date?: string + genre?: string + } onAudioChange: (index: number, value: MediaItem) => void onAudioAdd: (value: MediaItem[]) => void } @@ -34,7 +39,7 @@ export const AudioUploader = (props: Props) => { placeholder={t('Add audio')} description={t('You can download multiple tracks at once in .mp3, .wav or .flac formats')} fileType={'audio'} - onUpload={(value) => props.onAudioAdd(composeMediaItems(value))} + onUpload={(value) => props.onAudioAdd(composeMediaItems(value, props.baseFields))} /> ) diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index 22f01c06..0dafc0f1 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -1,4 +1,4 @@ -import { Accessor, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js' +import { Accessor, createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js' import { useLocalize } from '../../context/localize' import { clsx } from 'clsx' import { Title } from '@solidjs/meta' @@ -147,9 +147,19 @@ export const EditView = (props: Props) => { setForm('media', JSON.stringify(updated)) } + const [baseAudioFields, setBaseAudioFields] = createSignal({ + artist: '', + date: '', + genre: '' + }) + const handleBaseFieldsChange = (key, value) => { - const updated = mediaItems().map((media) => ({ ...media, [key]: value })) - setForm('media', JSON.stringify(updated)) + if (mediaItems().length > 0) { + const updated = mediaItems().map((media) => ({ ...media, [key]: value })) + setForm('media', JSON.stringify(updated)) + } else { + setBaseAudioFields({ ...baseAudioFields(), [key]: value }) + } } const articleTitle = () => { @@ -260,29 +270,31 @@ export const EditView = (props: Props) => { /> - - {t('min. 1400×1400 pix')} -
- {t('jpg, .png, max. 10 mb.')} - - } - isMultiply={false} - fileType={'image'} - onUpload={(val) => setForm('coverImageUrl', val[0].url)} + + + {t('min. 1400×1400 pix')} +
+ {t('jpg, .png, max. 10 mb.')} + + } + isMultiply={false} + fileType={'image'} + onUpload={(val) => setForm('coverImageUrl', val[0].url)} + /> + } + > +
- } - > -
+
@@ -326,6 +338,7 @@ export const EditView = (props: Props) => { handleAddMedia(value)} onAudioChange={handleMediaChange} /> diff --git a/src/utils/composeMediaItems.ts b/src/utils/composeMediaItems.ts index fcfcab38..67d52c4a 100644 --- a/src/utils/composeMediaItems.ts +++ b/src/utils/composeMediaItems.ts @@ -1,10 +1,13 @@ -export const composeMediaItems = (value) => { +import { UploadedFile } from '../pages/types' + +export const composeMediaItems = (value: UploadedFile[], optionalParams = {}) => { return value.map((fileData) => { return { url: fileData.url, source: '', title: fileData.originalFilename, - body: '' + body: '', + ...optionalParams } }) }