feat(mobile): ✨ only test on relevant words

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

mobile/hooks/use-audio-player.js

@@ -92,7 +92,7 @@ export const useAudioPlayer = () => {
         await audioSound.playAsync()
       }
     } catch (error) {
-      console.log('Error playing sound:', audioFileName)
+      console.error('Error playing sound:', audioFileName)
       console.error('Error playing:', error)
     }
   }
@@ -106,7 +106,7 @@ export const useAudioPlayer = () => {
       setSound(null)
       setIsSoundLoaded(false)
     } catch (error) {
-      console.log('Error stopping sound (stringified):', JSON.stringify(error))
+      console.error('Error stopping sound (stringified):', JSON.stringify(error))
     }
   }
 

mobile/hooks/use-practice-logic.js

@@ -27,7 +27,7 @@ function useTextPracticeLogic() {
   const [isReadingComplete, setIsReadingComplete] = useState(false)
 
   const { playSound } = useAudioPlayer()
-  const { shouldPlayPracticeWord } = useSelector(audioSelector)
+  const { shouldPlayReading, shouldPlayListening } = useSelector(audioSelector)
 
   const dispatch = useDispatch()
 
@@ -41,7 +41,7 @@ function useTextPracticeLogic() {
 
     // Play the audio for the current word
     const wordFilename = sentencesInText?.[currentSentence]?.wordFilename[currentWord]
-    if (wordFilename && shouldPlayPracticeWord) {
+    if (wordFilename && (shouldPlayListening || shouldPlayReading)) {
       const audioURL = HOST.audio + wordFilename
       playSound(audioURL)
     }
@@ -64,7 +64,7 @@ function useTextPracticeLogic() {
         setCurrentArabicWord(currentArabicWordData)
       }
     }
-  }, [currentWord, currentSentence, sentencesInText, textLoading, shouldPlayPracticeWord])
+  }, [currentWord, currentSentence, sentencesInText, textLoading, shouldPlayReading, shouldPlayListening])
 
   const handleReset = () => {
     setCurrentSentence(0)
@@ -183,13 +183,13 @@ function useTextPracticeLogic() {
       }
 
       if (isLastWordInSentence) {
+        setIsReadingComplete(true)
+
         dispatch({
           payload: false,
-          type: 'SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS'
+          type: 'SET_AUDIO_SHOULD_PLAY_READING'
         })
 
-        setIsReadingComplete(true)
-
         if (isListeningComplete) {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
         }

mobile/hooks/use-vocabulary-logic.js

@@ -8,12 +8,14 @@ import { HOST } from '../constants/urls.js'
 import { generateUniqueRandomNumbers } from '../services/utility-service.js'
 
 const wordsSelector = (state) => state.words
+const audioSelector = (state) => state.audio
 
 const useVocabularyLogic = (currentWord, handleSetCurrentWord, handleSetCurrentWordIndex) => {
   const { words } = useSelector(wordsSelector)
   const { playSound } = useAudioPlayer()
   const [isLastWordInVocabulary, setIsLastWordInVocabulary] = useState(false)
   const [isVocabularyComplete, setIsVocabularyComplete] = useState(false)
+  const { shouldPlayVocabulary } = useSelector(audioSelector)
 
   const [buttonPositions, setButtonPositions] = useState(generateUniqueRandomNumbers())
 
@@ -26,11 +28,11 @@ const useVocabularyLogic = (currentWord, handleSetCurrentWord, handleSetCurrentW
   }, [])
 
   useEffect(() => {
-    if (localWords[currentWord]) {
+    if (localWords[currentWord] && shouldPlayVocabulary) {
       const audioURL = `${HOST.audio}${localWords[currentWord].filename}`
       playSound(audioURL)
     }
-  }, [currentWord])
+  }, [currentWord, shouldPlayVocabulary])
 
   useEffect(() => {
     if (isLastWordInVocabulary) {

mobile/package.json

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

mobile/redux/actions.js

@@ -7,7 +7,9 @@ export const RESET_WORDS = createAction('RESET_WORDS')
 export const SET_ARABIC_FONT_NAME = createAction('SET_ARABIC_FONT_NAME')
 export const SET_ARABIC_FONT_SIZE = createAction('SET_ARABIC_FONT_SIZE')
 export const SET_AUDIO = createAction('SET_AUDIO')
-export const SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS = createAction('SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS')
+export const SET_AUDIO_SHOULD_PLAY_READING = createAction('SET_AUDIO_SHOULD_PLAY_READING')
+export const SET_AUDIO_SHOULD_PLAY_VOCABULARY = createAction('SET_AUDIO_SHOULD_PLAY_VOCABULARY')
+export const SET_AUDIO_SHOULD_PLAY_LISTENING = createAction('SET_AUDIO_SHOULD_PLAY_LISTENING')
 export const SET_ENG = createAction('SET_ENG')
 export const SET_CATEGORIES = createAction('SET_CATEGORIES')
 export const SET_DARK_MODE = createAction('SET_DARK_MODE')

mobile/redux/reducers.js

@@ -4,7 +4,9 @@ import * as actions from './actions.js'
 
 const initialStateAudio = {
   shouldPlay: true,
-  shouldPlayPracticeWord: false
+  shouldPlayListening: false,
+  shouldPlayReading: false,
+  shouldPlayVocabulary: false
 }
 const initialStateCategories = { categories: [] }
 const initialStateText = { text: {} }
@@ -30,9 +32,14 @@ const audioReducer = createReducer(initialStateAudio, (builder) => {
     .addCase(actions.SET_AUDIO, (state, action) => {
       state.shouldPlay = action.payload
     })
-    .addCase(actions.SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS, (state, action) => {
-      console.log('setting should play practice words to', action.payload)
-      state.shouldPlayPracticeWord = action.payload
+    .addCase(actions.SET_AUDIO_SHOULD_PLAY_READING, (state, action) => {
+      state.shouldPlayReading = action.payload
+    })
+    .addCase(actions.SET_AUDIO_SHOULD_PLAY_VOCABULARY, (state, action) => {
+      state.shouldPlayVocabulary = action.payload
+    })
+    .addCase(actions.SET_AUDIO_SHOULD_PLAY_LISTENING, (state, action) => {
+      state.shouldPlayListening = action.payload
     })
 })
 

mobile/screens/text-practice-listening.js

@@ -12,8 +12,7 @@ export const PracticeListening = ({
   handleReset,
   setIsListeningComplete,
   showRepeat,
-  setShowRepeat,
-  dispatch
+  setShowRepeat
 }) => (
   <View style={{ flex: 1 }}>
     <View style={{ flex: 1 }}>
@@ -36,10 +35,6 @@ export const PracticeListening = ({
             onPress={() => {
               setIsListeningComplete(true)
               setShowRepeat(false)
-              dispatch({
-                payload: true,
-                type: 'SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS'
-              })
             }}
             text="CONTINUE"
           />
@@ -51,7 +46,6 @@ export const PracticeListening = ({
 
 PracticeListening.propTypes = {
   currentSentence: PropTypes.number.isRequired,
-  dispatch: PropTypes.func.isRequired,
   handleReset: PropTypes.func.isRequired,
   isLastSentence: PropTypes.bool.isRequired,
   setIsListeningComplete: PropTypes.func.isRequired,

mobile/screens/text-practice-setup.js

@@ -34,7 +34,9 @@ export default function TextPracticeSetup() {
     setPracticeOrPreviewVisible(false)
     setIsPlaying(false)
     dispatch({ payload: false, type: 'SET_AUDIO' })
-    dispatch({ payload: false, type: 'SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS' })
+    dispatch({ payload: false, type: 'SET_AUDIO_SHOULD_PLAY_READING' })
+    dispatch({ payload: false, type: 'SET_AUDIO_SHOULD_PLAY_VOCABULARY' })
+    dispatch({ payload: false, type: 'SET_AUDIO_SHOULD_PLAY_LISTENING' })
   }
 
   // Start the practice and open the modal with practice content

mobile/screens/text-practice.js

@@ -56,6 +56,7 @@ const TextPractice = ({ checkedListening, checkedReading, checkedVocabulary }) =
       setProgressionIndex((prevIndex) => prevIndex + 1)
       return
     }
+
     // Reset to the first exercise type
     setProgressionIndex(0)
 
@@ -75,24 +76,46 @@ const TextPractice = ({ checkedListening, checkedReading, checkedVocabulary }) =
   const progress = sentencesInText.length > 1 ? currentSentence / (sentencesInText.length - 1) : 0
 
   useEffect(() => {
-    if (isListeningComplete || isReadingComplete || isVocabularyComplete) {
-      progressToNextExercise()
+    addAllWordsFromCurrentSentence()
+
+    // Determine if listening should play
+    function shouldPlayListening() {
+      const isListeningSelectedAndIncomplete = checkedListening && !isListeningComplete
+      const isReadingNotAConcern = !checkedReading || isReadingComplete
+
+      return isListeningSelectedAndIncomplete && isReadingNotAConcern
     }
-  }, [isListeningComplete, isReadingComplete, isVocabularyComplete])
 
-  useEffect(() => {
-    // hack to make sure the audio plays if only reading is selected
-    if (checkedReading && !checkedListening && !checkedVocabulary) {
-      dispatch({ payload: true, type: 'SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS' })
+    // Determine if practice words should play
+    function shouldPlayReadingWords() {
+      const isReadingSelectedAndIncomplete = checkedReading && !isReadingComplete
+      const isListeningNotAConcern = !checkedListening || isListeningComplete
+
+      return isReadingSelectedAndIncomplete && isListeningNotAConcern
     }
 
-    // hack to make sure the audio doesn't play if only reading and listening are selected
-    if (checkedReading && checkedListening && !checkedVocabulary) {
-      dispatch({ payload: false, type: 'SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS' })
+    // Determine if vocabulary should play
+    function shouldPlayVocabularyAudio() {
+      return checkedVocabulary && !isVocabularyComplete
     }
 
-    addAllWordsFromCurrentSentence()
-  }, [currentSentence])
+    // Dispatch actions based on the audio that should be played
+    dispatch({ payload: shouldPlayListening(), type: 'SET_AUDIO_SHOULD_PLAY_LISTENING' })
+    dispatch({ payload: shouldPlayReadingWords(), type: 'SET_AUDIO_SHOULD_PLAY_READING' })
+    dispatch({ payload: shouldPlayVocabularyAudio(), type: 'SET_AUDIO_SHOULD_PLAY_VOCABULARY' })
+
+    // Progresses to the next exercise if any of the exercises are complete
+    if (isListeningComplete || isReadingComplete || isVocabularyComplete) {
+      progressToNextExercise()
+    }
+  }, [
+    isListeningComplete,
+    isReadingComplete,
+    isVocabularyComplete,
+    checkedReading,
+    checkedVocabulary,
+    checkedListening
+  ])
 
   const onWordPressed = useCallback(
     (wordId, wordArabic) => {