Hotfix/player hotfixies (#122)

* proxy audio
* optionalParams in composeMediaItems

src/components/Article/AudioHeader/AudioHeader.module.scss

@@ -55,6 +55,7 @@
       object-fit: cover;
       width: 100%;
       height: 100%;
+      display: block;
     }
 
     .expand {

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

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))}
       />
     </div>
   )

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) => {
                         />
                       </Show>
                     </div>
-                    <Show
-                      when={form.coverImageUrl}
-                      fallback={
-                        <DropArea
-                          isSquare={true}
-                          placeholder={t('Add cover')}
-                          description={
-                            <>
-                              {t('min. 1400×1400 pix')}
-                              <br />
-                              {t('jpg, .png, max. 10 mb.')}
-                            </>
-                          }
-                          isMultiply={false}
-                          fileType={'image'}
-                          onUpload={(val) => setForm('coverImageUrl', val[0].url)}
+                    <Show when={props.shout.layout === 'audio'}>
+                      <Show
+                        when={form.coverImageUrl}
+                        fallback={
+                          <DropArea
+                            isSquare={true}
+                            placeholder={t('Add cover')}
+                            description={
+                              <>
+                                {t('min. 1400×1400 pix')}
+                                <br />
+                                {t('jpg, .png, max. 10 mb.')}
+                              </>
+                            }
+                            isMultiply={false}
+                            fileType={'image'}
+                            onUpload={(val) => setForm('coverImageUrl', val[0].url)}
+                          />
+                        }
+                      >
+                        <div
+                          class={styles.cover}
+                          style={{ 'background-image': `url(${imageProxy(form.coverImageUrl)})` }}
                         />
-                      }
-                    >
-                      <div
-                        class={styles.cover}
-                        style={{ 'background-image': `url(${imageProxy(form.coverImageUrl)})` }}
-                      />
+                      </Show>
                     </Show>
                   </div>
 
@@ -326,6 +338,7 @@ export const EditView = (props: Props) => {
                   <Show when={props.shout.layout === 'audio'}>
                     <AudioUploader
                       audio={mediaItems()}
+                      baseFields={baseAudioFields()}
                       onAudioAdd={(value) => handleAddMedia(value)}
                       onAudioChange={handleMediaChange}
                     />

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