fix(#2526): fix request for sound

src/components/AudioPlayer/hooks.tsx

@@ -1,20 +1,32 @@
 import { useEffect, useState } from 'react'
+import { getSound } from 'requests/getSound'
+import { readToken } from 'helpers'
 
-export const useAudioPlayer = (url: string) => {
-  const [audio] = useState(new Audio(url))
+export const useAudioPlayer = (id: number | string) => {
+  const [audio, setAudio] = useState<HTMLAudioElement>()
   const [playing, setPlaying] = useState(false)
 
-  const toggle = () => setPlaying(!playing)
+  const toggle = () => {
+    setPlaying(!playing)
+  }
+
+  useEffect(() => {
+    getSound(id).then(({ asset }) => {
+      setAudio(new Audio(`${asset}?access_token=${readToken()}`))
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id])
 
   useEffect(() => {
+    if (!audio) return
     playing ? audio.play() : audio.pause()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playing])
+  }, [playing, audio])
 
   useEffect(() => {
-    audio.addEventListener('ended', () => setPlaying(false))
+    audio?.addEventListener('ended', () => setPlaying(false))
     return () => {
-      audio.removeEventListener('ended', () => setPlaying(false))
+      audio?.removeEventListener('ended', () => setPlaying(false))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

src/components/AudioPlayer/index.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react'
 import { Icon } from 'features/Icon'
 
 import { ScAudioContainer } from './styled'
@@ -5,15 +6,15 @@ import { ScAudioContainer } from './styled'
 import { useAudioPlayer } from './hooks'
 
 type AudioPropsType = {
-  url: string,
+  id: number | string,
 }
 
-export const AudioPlayer = ({ url }: AudioPropsType) => {
-  const { playing, toggle } = useAudioPlayer(url)
+export const AudioPlayer = memo(({ id }: AudioPropsType) => {
+  const { playing, toggle } = useAudioPlayer(id)
 
   return (
     <ScAudioContainer onClick={toggle} playing={playing}>
       <Icon refIcon='Sound' />
     </ScAudioContainer>
   )
-}
+})

src/features/Combobox/index.tsx

@@ -122,7 +122,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
                   {option?.src
                     ? (
                       <ScAudioWrap key={option.id}>
-                        <AudioPlayer url={option?.src ?? ''} />
+                        <AudioPlayer id={option?.id ?? ''} />
                       </ScAudioWrap>
                     ) : ''}
                 </ListOption>

src/features/Combobox/types.tsx

@@ -8,6 +8,7 @@ import type { CustomStyles } from 'features/Common'
 
 export type Option = {
   id: number | string,
+  lexic?: string | number,
   name: string,
   src?: string,
 }

src/pages/HighlightsPage/components/FormHighlights/hooks.tsx

@@ -75,70 +75,70 @@ const sounds = [
     name: 'No',
   },
   {
-    id: 19469,
+    id: 1,
     lexic: 19469,
     name: 'Main theme',
     src: '/sounds/background_track.mp3',
   },
   {
-    id: 19470,
+    id: 2,
     lexic: 19470,
     name: 'First music',
     src: 'sounds/1.mp3',
   },
   {
-    id: 19471,
+    id: 3,
     lexic: 19471,
     name: 'Basement by Monako',
     src: '/sounds/basement by monako Artlist.mp3',
   },
   {
-    id: 19472,
+    id: 4,
     lexic: 19472,
     name: 'Buss-it by Yarin Primak',
     src: '/sounds/buss-it---instrumental-version by yarin-primak Artlist.mp3',
   },
   {
-    id: 19473,
+    id: 5,
     lexic: 19473,
     name: "Can't stop me now by Brightout",
     src:
       '/sounds/cant-stop-me-now-instrumental-brightout-musicbed-licensed.mp3',
   },
   {
-    id: 19474,
+    id: 6,
     lexic: 19474,
     name: 'Follow me by ShyGhy',
     src: '/sounds/follow-me-shyghy-musicbed-licensed.mp3',
   },
   {
-    id: 19475,
+    id: 7,
     lexic: 19475,
     name: 'Gravity by Stanley Gurvich',
     src: '/sounds/gravity by stanley-gurvich Artlist.mp3',
   },
   {
-    id: 19476,
+    id: 8,
     lexic: 19476,
     name: 'Light it up by Bloom & the Bliss',
     src:
       '/sounds/light-it-up-instrumental-bloom-the-bliss-musicbed-licensed.mp3',
   },
   {
-    id: 19477,
+    id: 9,
     lexic: 19477,
     name: 'Living future memories by Generdyn',
     src: '/sounds/living-future-memories-generdyn-musicbed-licensed.mp3',
   },
   {
-    id: 19478,
+    id: 10,
     lexic: 19478,
     name: 'Look at me now by Paper kings',
     src:
       '/sounds/look-at-me-now-instrumental-paper-kings-musicbed-licensed.mp3',
   },
   {
-    id: 19479,
+    id: 11,
     lexic: 19479,
     name: 'Unbroken by Roary',
     src: '/sounds/unbroken-roary-musicbed-licensed.mp3',

src/pages/HighlightsPage/components/FormHighlights/index.tsx

@@ -117,7 +117,6 @@ export const FormHighlights = ({ price }: PriceInfoType) => {
           />
           <Input
             disabled={!sport}
-            defaultValue='2'
             value={duration?.toString() || ''}
             labelLexic='maximal_duration'
             labelWidth={labelWidth}

src/requests/getSound.tsx

@@ -5,7 +5,7 @@ type ResponseSound = {
   asset: string,
 }
 
-export const getSound = async (id: number): Promise<ResponseSound> => {
+export const getSound = async (id: number | string): Promise<ResponseSound> => {
   const config = {
     method: 'GET',
   }