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) => {
+    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,6 +270,7 @@ export const EditView = (props: Props) => {
                         />
                       </Show>
                     </div>
+                    <Show when={props.shout.layout === 'audio'}>
                       <Show
                         when={form.coverImageUrl}
                         fallback={
@@ -284,6 +295,7 @@ export const EditView = (props: Props) => {
                           style={{ 'background-image': `url(${imageProxy(form.coverImageUrl)})` }}
                         />
                       </Show>
+                    </Show>
                   </div>
 
                   <Show when={props.shout.layout === 'image'}>
@@ -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
     }
   })
 }