feat(mobile): ✨ Green box when playing and possible to stop

Fixes #2241

Signed-off-by: Yunus Andréasson <yunus@edenmind.com>

mobile/components/play-sound.js

@@ -1,13 +1,30 @@
 import * as React from 'react'
 import { Audio } from 'expo-av'
 import PropTypes from 'prop-types'
-import { AnswerButton } from './answer-button.js'
+import { Button, Text, useTheme } from 'react-native-paper'
+import { useSharedStyles } from '../styles/common.js'
+import { useState } from 'react'
+import { capitalizeFirstLetter } from '../services/utility-service.js'
 
 // eslint-disable-next-line putout/destructuring-as-function-argument
 export default function PlaySound({ audioFileNames, buttonText }) {
   const [sound, setSound] = React.useState()
+  const theme = useTheme()
+  const sharedStyle = useSharedStyles(theme)
+  const [color, setColor] = useState(theme.colors.elevation.level5)
+  const [isPlaying, setIsPlaying] = useState(false)
 
   const playAllSounds = async () => {
+    // Check if sound is playing
+    if (sound?._loaded) {
+      await sound.stopAsync()
+      await sound.unloadAsync()
+      setSound()
+      setColor(theme.colors.elevation.level5)
+      setIsPlaying(false) // Update isPlaying state when sound is stopped manually
+      return
+    }
+
     if (Array.isArray(audioFileNames)) {
       for (const audioFileName of audioFileNames) {
         await playSound(audioFileName)
@@ -34,9 +51,13 @@ export default function PlaySound({ audioFileNames, buttonText }) {
         interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX
       },
       (status) => {
-        if (status.didJustFinish) {
-          sound.unloadAsync()
+        if (!status.didJustFinish) {
+          return
         }
+
+        sound.unloadAsync()
+        setColor(theme.colors.elevation.level5)
+        setIsPlaying(false) // Update isPlaying state when sound stops
       }
     )
 
@@ -47,6 +68,8 @@ export default function PlaySound({ audioFileNames, buttonText }) {
       playsInSilentModeIOS: true
     })
 
+    setColor(theme.colors.primary)
+    setIsPlaying(true) // Update isPlaying state when sound starts
     await sound.playAsync()
   }
 
@@ -58,7 +81,13 @@ export default function PlaySound({ audioFileNames, buttonText }) {
       : undefined
   }, [sound])
 
-  return <AnswerButton onPress={playAllSounds} text={buttonText} haptic={true} />
+  return (
+    <Button onPress={playAllSounds} style={{ ...sharedStyle.buttonAnswer, borderColor: color }}>
+      <Text style={{ ...sharedStyle.answerText, fontSize: buttonText.length > 25 ? 20 : 23 }}>
+        {isPlaying ? 'Stop' : capitalizeFirstLetter(buttonText)}
+      </Text>
+    </Button>
+  )
 }
 
 PlaySound.propTypes = {

mobile/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1445.2.350",
+  "version": "1445.2.351",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],