playPause

Signed-off-by: ale <ale@manalejandro.com>

src/App.js

@@ -13,6 +13,7 @@ const App = () => {
     [title, setTitle] = useState('Stream Radio'),
     [currentListeners, setCurrentListeners] = useState(0),
     [maxListeners, setMaxListeners] = useState(0),
+    [playPause, setPlayPause] = useState(false),
     audioElmRef = useRef(null),
     once = useRef(false),
     audioAnalyzer = () => {
@@ -29,16 +30,24 @@ const App = () => {
       }
       setAnalyzerData({ analyzer, bufferLength, dataArray })
     },
-    play = useCallback(async () => {
+    play = () => {
       if (audioElmRef.current) {
-        await audioElmRef.current.play()
+        audioElmRef.current.play().then(() => {
+          setPlayPause(true)
+        }).catch(err => {
+          console.error('Error playing audio: ' + err.message)
+        })
       }
-    }, [audioElmRef]),
+    },
-    pause = useCallback(async () => {
+    pause = () => {
       if (audioElmRef.current) {
-        await audioElmRef.current.pause()
+        audioElmRef.current.pause().then(() => {
+          setPlayPause(false)
+        }).catch(err => {
+          console.error('Error pausing audio: ' + err.message)
+        })
       }
-    }, [audioElmRef]),
+    },
     loadData = () => {
       fetch('/stream.json').then(response => response.json()).then(json => {
         setJson(json)
@@ -112,7 +121,7 @@ const App = () => {
       <h4><p className="bounce"><a href={link} target="_blank" title={title} alt={title}>{bounce}</a></p></h4>
       <div>
         <h2>Audio Controls</h2>
-        {audioElmRef.current?.paused ?
+        {!playPause ?
           <button onClick={play}>Play ⏯️</button> :
           <button onClick={pause}>Pause ⏯️</button>
         }