proxy audio (#121)

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

@@ -49,7 +49,7 @@
     width: 200px;
     height: 200px;
     transition: all 0.2s ease-in-out;
-    background: var(--placeholder-color-semi) url('icons/create-music.svg') no-repeat 50% 50%;
+    background: var(--placeholder-color-semi) url('../../icons/create-music.svg') no-repeat 50% 50%;
 
     .image {
       object-fit: cover;

src/components/Article/AudioPlayer/AudioPlayer.tsx

@@ -3,6 +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'
 
 export type Audio = {
   pic?: string
@@ -22,6 +23,7 @@ type Props = {
 const prepareMedia = (media: Audio[]) =>
   media.map((item, index) => ({
     ...item,
+    url: audioProxy(item.url),
     index: index,
     isCurrent: false,
     isPlaying: false
@@ -67,7 +69,6 @@ export const AudioPlayer = (props: Props) => {
           isCurrent: index === 0
         }))
       )
-
       return tracks()[0]
     })()
 

src/components/Article/AudioPlayer/PlayerPlaylist.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, For, Show } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
 import { SharePopup, getShareUrl } from '../SharePopup'
 import { getDescription } from '../../../utils/meta'
 import { useLocalize } from '../../../context/localize'

src/components/Views/Edit.tsx

@@ -230,18 +230,20 @@ export const EditView = (props: Props) => {
                             type="text"
                             placeholder={t('Artist...')}
                             class={styles.additionalInput}
-                            value={mediaItems()[0]?.artist || t('Artist')}
+                            value={mediaItems()[0]?.artist || ''}
                             onChange={(event) => handleBaseFieldsChange('artist', event.target.value)}
                           />
                           <input
                             class={styles.additionalInput}
                             placeholder={t('Release date...')}
+                            value={mediaItems()[0]?.date || ''}
                             onChange={(event) => handleBaseFieldsChange('date', event.target.value)}
                           />
                           <input
                             type="text"
                             placeholder={t('Genre...')}
                             class={styles.additionalInput}
+                            value={mediaItems()[0]?.genre || ''}
                             onChange={(event) => handleBaseFieldsChange('genre', event.target.value)}
                           />
                         </div>

src/utils/imageProxy.ts

@@ -2,3 +2,7 @@ import { isDev } from './config'
 export const imageProxy = (url: string) => {
   return `${isDev ? 'https://new.discours.io' : ''}/api/image?url=${encodeURI(url)}`
 }
+
+export const audioProxy = (url: string) => {
+  return `${isDev ? 'https://new.discours.io' : ''}/api/audio?url=${encodeURI(url)}`
+}