From 2ffa73944a0a4150965648bb209237f450a35633 Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <avdekterev@gmail.com>
Date: Wed, 29 Jun 2022 15:56:25 +0700
Subject: [PATCH] feat(#2526): add select sound with playing

---
 src/components/AudioPlayer/hooks.tsx          | 23 +++++++++++++++++++
 src/components/AudioPlayer/index.tsx          | 19 +++++++++++++++
 src/components/AudioPlayer/styled.tsx         |  4 ++++
 src/features/Combobox/index.tsx               | 14 ++++++++++-
 src/features/Combobox/styled.tsx              |  4 ++++
 src/features/Combobox/types.tsx               |  1 +
 .../components/FormHighlights/hooks.tsx       | 19 +--------------
 7 files changed, 65 insertions(+), 19 deletions(-)
 create mode 100644 src/components/AudioPlayer/hooks.tsx
 create mode 100644 src/components/AudioPlayer/index.tsx
 create mode 100644 src/components/AudioPlayer/styled.tsx

diff --git a/src/components/AudioPlayer/hooks.tsx b/src/components/AudioPlayer/hooks.tsx
new file mode 100644
index 00000000..bfec775c
--- /dev/null
+++ b/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 }
+}
diff --git a/src/components/AudioPlayer/index.tsx b/src/components/AudioPlayer/index.tsx
new file mode 100644
index 00000000..c9ce80ce
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/AudioPlayer/styled.tsx b/src/components/AudioPlayer/styled.tsx
new file mode 100644
index 00000000..a317d5b2
--- /dev/null
+++ b/src/components/AudioPlayer/styled.tsx
@@ -0,0 +1,4 @@
+import styled from 'styled-components/macro'
+
+export const ScAudioContainer = styled.div`
+`
diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx
index 39c08961..679b0f27 100644
--- a/src/features/Combobox/index.tsx
+++ b/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>
diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx
index 087eebf5..80056dc0 100644
--- a/src/features/Combobox/styled.tsx
+++ b/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;
+`
diff --git a/src/features/Combobox/types.tsx b/src/features/Combobox/types.tsx
index c2953ad7..930f7e6f 100644
--- a/src/features/Combobox/types.tsx
+++ b/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>, (
diff --git a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
index 5f93492d..577f635d 100644
--- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
+++ b/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,