feat(#2526): add select sound with playing

src/components/AudioPlayer/hooks.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+
+export const useAudioPlayer = (url: string) => {
+  const [audio] = useState(new Audio(url))
+  const [playing, setPlaying] = useState(false)
+
+  const toggle = () => setPlaying(!playing)
+
+  useEffect(() => {
+    playing ? audio.play() : audio.pause()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playing])
+
+  useEffect(() => {
+    audio.addEventListener('ended', () => setPlaying(false))
+    return () => {
+      audio.removeEventListener('ended', () => setPlaying(false))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return { playing, toggle }
+}

src/components/AudioPlayer/index.tsx

@@ -0,0 +1,19 @@
+import { Icon } from 'features/Icon'
+
+import { ScAudioContainer } from './styled'
+
+import { useAudioPlayer } from './hooks'
+
+type AudioPropsType = {
+  url: string,
+}
+
+export const AudioPlayer = ({ url }: AudioPropsType) => {
+  const { toggle } = useAudioPlayer(url)
+
+  return (
+    <ScAudioContainer onClick={toggle}>
+      <Icon refIcon='Sound' />
+    </ScAudioContainer>
+  )
+}

src/components/AudioPlayer/styled.tsx

@@ -0,0 +1,4 @@
+import styled from 'styled-components/macro'
+
+export const ScAudioContainer = styled.div`
+`

src/features/Combobox/index.tsx

@@ -7,6 +7,8 @@ import { useLexicsStore } from 'features/LexicsStore'
 
 import { PAGES } from 'config'
 
+import { AudioPlayer } from 'components/AudioPlayer'
+
 import { T9n } from 'features/T9n'
 import { Icon } from 'features/Icon'
 import { OutsideClick } from 'features/OutsideClick'
@@ -26,6 +28,7 @@ import {
   PopOver,
   ListOption,
   WrapperIcon,
+  ScAudioWrap,
 } from './styled'
 
 import { Arrow } from './components/Arrow'
@@ -107,12 +110,21 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
             <PopOver ref={popoverRef}>
               {map(options, (option, i) => (
                 <ListOption
-                  onClick={(e) => onOptionSelect(option.name, e)}
+                  onClick={
+                    (e) => ((e.target as Element)?.id ? onOptionSelect(option.name, e) : '')
+                  }
                   aria-selected={index === i}
                   isHighlighted={index === i}
                   key={option.id}
+                  id={option.id.toString()}
                 >
                   {option.name}
+                  {option?.src
+                    ? (
+                      <ScAudioWrap>
+                        <AudioPlayer url={option?.src ?? ''} />
+                      </ScAudioWrap>
+                    ) : ''}
                 </ListOption>
               ))}
             </PopOver>

src/features/Combobox/styled.tsx

@@ -58,3 +58,7 @@ export const WrapperIcon = styled.div`
   transform: translateY(-50%);
 
 `
+
+export const ScAudioWrap = styled.div`
+  margin-left: 20px;
+`

src/features/Combobox/types.tsx

@@ -9,6 +9,7 @@ import type { CustomStyles } from 'features/Common'
 export type Option = {
   id: number | string,
   name: string,
+  src?: string,
 }
 
 export type Props<T> = Pick<InputHTMLAttributes<HTMLInputElement>, (

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

@@ -67,14 +67,7 @@ const sounds = [
   {
     id: 1,
     name: 'Sound 1',
-  },
-  {
-    id: 2,
-    name: 'Sound 2',
-  },
-  {
-    id: 3,
-    name: 'Sound 3',
+    src: '/sounds/background_track.mp3',
   },
 ]
 
@@ -159,16 +152,6 @@ export const useHighlightsForm = () => {
     }
   }
 
-  const onChangeSummary = (e: ChangeEvent<HTMLInputElement>) => {
-    const regex = /[0-5]/.test(e.target.value)
-    if ((regex && e.target.value.length <= 1) || e.target.value === '') {
-      setFormState((state) => ({
-        ...state,
-        summaryDuration: e.target.value,
-      }))
-    }
-  }
-
   const onChangeTeam = (e: ChangeEvent<HTMLInputElement>) => {
     setFormState((state: FormType) => ({
       ...state,