diff --git a/public/sounds/1.mp3 b/public/sounds/1.mp3 deleted file mode 100644 index 04a59c93..00000000 Binary files a/public/sounds/1.mp3 and /dev/null differ diff --git a/public/sounds/background_track.mp3 b/public/sounds/background_track.mp3 deleted file mode 100644 index 906873b1..00000000 Binary files a/public/sounds/background_track.mp3 and /dev/null differ diff --git a/public/sounds/basement by monako Artlist.mp3 b/public/sounds/basement by monako Artlist.mp3 deleted file mode 100644 index 582737ff..00000000 Binary files a/public/sounds/basement by monako Artlist.mp3 and /dev/null differ diff --git a/public/sounds/buss-it---instrumental-version by yarin-primak Artlist.mp3 b/public/sounds/buss-it---instrumental-version by yarin-primak Artlist.mp3 deleted file mode 100644 index af34dc67..00000000 Binary files a/public/sounds/buss-it---instrumental-version by yarin-primak Artlist.mp3 and /dev/null differ diff --git a/public/sounds/cant-stop-me-now-instrumental-brightout-musicbed-licensed.mp3 b/public/sounds/cant-stop-me-now-instrumental-brightout-musicbed-licensed.mp3 deleted file mode 100644 index b2e2193b..00000000 Binary files a/public/sounds/cant-stop-me-now-instrumental-brightout-musicbed-licensed.mp3 and /dev/null differ diff --git a/public/sounds/follow-me-shyghy-musicbed-licensed.mp3 b/public/sounds/follow-me-shyghy-musicbed-licensed.mp3 deleted file mode 100644 index 30b9fbba..00000000 Binary files a/public/sounds/follow-me-shyghy-musicbed-licensed.mp3 and /dev/null differ diff --git a/public/sounds/gravity by stanley-gurvich Artlist.mp3 b/public/sounds/gravity by stanley-gurvich Artlist.mp3 deleted file mode 100644 index 5fe457a9..00000000 Binary files a/public/sounds/gravity by stanley-gurvich Artlist.mp3 and /dev/null differ diff --git a/public/sounds/light-it-up-instrumental-bloom-the-bliss-musicbed-licensed.mp3 b/public/sounds/light-it-up-instrumental-bloom-the-bliss-musicbed-licensed.mp3 deleted file mode 100644 index b25dbef6..00000000 Binary files a/public/sounds/light-it-up-instrumental-bloom-the-bliss-musicbed-licensed.mp3 and /dev/null differ diff --git a/public/sounds/living-future-memories-generdyn-musicbed-licensed.mp3 b/public/sounds/living-future-memories-generdyn-musicbed-licensed.mp3 deleted file mode 100644 index d464529f..00000000 Binary files a/public/sounds/living-future-memories-generdyn-musicbed-licensed.mp3 and /dev/null differ diff --git a/public/sounds/look-at-me-now-instrumental-paper-kings-musicbed-licensed.mp3 b/public/sounds/look-at-me-now-instrumental-paper-kings-musicbed-licensed.mp3 deleted file mode 100644 index de57fbc2..00000000 Binary files a/public/sounds/look-at-me-now-instrumental-paper-kings-musicbed-licensed.mp3 and /dev/null differ diff --git a/public/sounds/unbroken-roary-musicbed-licensed.mp3 b/public/sounds/unbroken-roary-musicbed-licensed.mp3 deleted file mode 100644 index de16b506..00000000 Binary files a/public/sounds/unbroken-roary-musicbed-licensed.mp3 and /dev/null differ diff --git a/src/components/AudioPlayer/hooks.tsx b/src/components/AudioPlayer/hooks.tsx index bfec775c..8ef7b642 100644 --- a/src/components/AudioPlayer/hooks.tsx +++ b/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() 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 }, []) diff --git a/src/components/AudioPlayer/index.tsx b/src/components/AudioPlayer/index.tsx index 72741001..f3b40aef 100644 --- a/src/components/AudioPlayer/index.tsx +++ b/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 ( ) -} +}) diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx index 3836aa75..ffe6c2b3 100644 --- a/src/features/Combobox/index.tsx +++ b/src/features/Combobox/index.tsx @@ -122,7 +122,7 @@ export const Combobox = (props: Props) => { {option?.src ? ( - + ) : ''} diff --git a/src/features/Combobox/types.tsx b/src/features/Combobox/types.tsx index 930f7e6f..5819d8f9 100644 --- a/src/features/Combobox/types.tsx +++ b/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, } diff --git a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx index 4b31e3e3..f502dd6d 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx +++ b/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', diff --git a/src/pages/HighlightsPage/components/FormHighlights/index.tsx b/src/pages/HighlightsPage/components/FormHighlights/index.tsx index fd6ec2b8..9b2b89ee 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/index.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/index.tsx @@ -117,7 +117,6 @@ export const FormHighlights = ({ price }: PriceInfoType) => { /> => { +export const getSound = async (id: number | string): Promise => { const config = { method: 'GET', }