Make braces consistent across the app

src/app/app/page.tsx

@@ -40,12 +40,15 @@ export default function App() {
             const pitch = window.localStorage.getItem("pitch")
             const bgMusicVol = window.localStorage.getItem("bgMusicVol")
 
-            if (rate)
+            if (rate) {
                 setStepValue("rate", parseInt(rate))
-            if (pitch)
+            }
+            if (pitch) {
                 setStepValue("pitch", parseInt(pitch))
-            if (bgMusicVol)
+            }
+            if (bgMusicVol) {
                 setStepValue("bgMusicVol", parseInt(bgMusicVol))
+            }
         }
     }, [])
 

src/components/ArticleForm/index.tsx

@@ -29,19 +29,22 @@ export default function ArticleForm() {
 
     // Update articleToSpeak
     useEffect(() => {
-        if (tab === "fetch")
+        if (tab === "fetch") {
             setArticleStoreStringItem("articleToSpeak", fetchedArticle.article)
-        if (tab === "paste")
+        }
+        if (tab === "paste") {
             setArticleStoreStringItem("articleToSpeak", pastedArticle)
+        }
     }, [fetchedArticle, pastedArticle, tab])
 
     // Custom hook that detects and updates articleLanguageCode state variable, whenever articleToSpeak changes
     useDetectAndUpdateLanguage()
 
     // Reset default pasted text, if text area is empty in paste tab
     useEffect(() => {
-        if ((tab === "paste") && (pastedArticle === ""))
+        if ((tab === "paste") && (pastedArticle === "")) {
             setArticleStoreStringItem("pastedArticle", DEFAULT_PASTED_ARTICLE)
+        }
     }, [tab])
 
     // Show language toast whenever detected language changes
@@ -52,8 +55,9 @@ export default function ArticleForm() {
             setToastType("language-detected")
             setShowToast(true)
         }
-        else
+        else {
             setShowToast(false)
+        }
     }, [languageCodeOfArticleToSpeak])
 
     useSplitArticleToSentences()
@@ -62,16 +66,20 @@ export default function ArticleForm() {
     // Conditionally show or hide play button
     useEffect(() => {
         if (tab === "fetch") {
-            if ((fetchedArticle.title !== "") && (fetchedArticle.article !== "") && (!isPlayerOpen))
+            if ((fetchedArticle.title !== "") && (fetchedArticle.article !== "") && (!isPlayerOpen)) {
                 setShowPlayButton(true)
-            else
+            }
+            else {
                 setShowPlayButton(false)
+            }
         }
         if (tab === "paste") {
-            if ((pastedArticle !== "") && (!isPlayerOpen))
+            if ((pastedArticle !== "") && (!isPlayerOpen)) {
                 setShowPlayButton(true)
-            else
+            }
+            else {
                 setShowPlayButton(false)
+            }
         }
     }, [tab, articleToSpeak, isPlayerOpen])
 

src/components/Menu/index.tsx

@@ -17,8 +17,9 @@ export default function Menu({ className, classNameWhenOpen, classNameWhenClosed
 
     // TODO: If outside click is on dropdown, then the settings container does not close
     function detectOutsideClick(event: Event) {
-        if (!settingsRef.current.contains(event.target as Node) && isOpen)
+        if (!settingsRef.current.contains(event.target as Node) && isOpen) {
             setIsOpen(false)
+        }
     }
 
     useEffect(() => {

src/components/Player/PlayerControls.tsx

@@ -121,10 +121,12 @@ export default function PlayerControls() {
         }
         if (speechEndReasonRef.current === "sentence-complete") {
             // Prevent accessing item at (speakingSentenceIndex + 1), that does not exist in sentences
-            if ((speakingSentenceIndex + 1) < sentences.length)
+            if ((speakingSentenceIndex + 1) < sentences.length) {
                 setSpeakingSentenceIndex((speakingSentenceIndex + 1))
-            else
+            }
+            else {
                 setPlayerState("complete")
+            }
         }
     }
 
@@ -134,8 +136,9 @@ export default function PlayerControls() {
         const rawVoices = synthesisInterface.getVoices()
 
         for (const voice of rawVoices) {
-            if (voice.name === voiceToSpeakWith.name)
+            if (voice.name === voiceToSpeakWith.name) {
                 return voice
+            }
         }
 
         // Most likely, there is no voice available on the device, for the detected language
@@ -157,20 +160,23 @@ export default function PlayerControls() {
 
     // Keyboard press callback
     function handleKeyDown(event: KeyboardEvent) {
-        if (event.key === "Escape")
+        if (event.key === "Escape") {
             setIsPlayerOpen(false)
+        }
 
         // Using button click, since calling rewind(), playPause(), forward() functions mess up the state unpredictably. TODO: Need to figure out why this happens.
         // Button click also causes issues if the element is currently focussed.
-        if (event.key === "ArrowLeft")
+        if (event.key === "ArrowLeft") {
             rewindButton.current.click()
+        }
 
         if (event.code === "Space") {
             playPauseButton.current.click()
         }
 
-        if (event.key === "ArrowRight")
+        if (event.key === "ArrowRight") {
             forwardButton.current.click()
+        }
     }
 
     // Functions for buttons and keyboard event listeners

src/components/Player/SpeechSettings.tsx

@@ -5,8 +5,10 @@ import Button from "../Button";
 import Menu from "../Menu";
 import StepInput from "./StepInput";
 import { VoicesDropdown } from "./VoicesDropdown";
+import { useGenericStore } from "@/stores/useGenericStore";
 
 export default function SpeechSettings() {
+    const isMobileOrTablet = useGenericStore((state) => state.isMobileOrTablet)
     const rate = usePlayerStore((state) => state.rate)
     const pitch = usePlayerStore((state) => state.pitch)
     const bgMusicVol = usePlayerStore((state) => state.bgMusicVol)
@@ -25,11 +27,8 @@ export default function SpeechSettings() {
     }, [rate, pitch, bgMusicVol])
 
     // TODO: Add hot reload toast when values change, but only on first render
-    useEffect(() => {
-
-
-        // Toast clean up done by the useEffect in index.tsx to prevent set and clean up conflicts within components (that are trying to show toasts) of Player
-    }, [rate, pitch, bgMusicVol])
+    // useEffect(() => {
+    // }, [rate, pitch, bgMusicVol])
 
     return (
         <div>
@@ -81,8 +80,10 @@ export default function SpeechSettings() {
                 </div>
             </div>
 
-            <p className="lg:hidden text-center text-sm">On mobile devices, ensure selected voice is installed in your device text to speech settings</p>
-            <p className="hidden lg:block text-center text-sm">On desktop devices, use Google Chrome or Edge browser for more natural voices</p>
+            {isMobileOrTablet
+                ? <p className="text-center text-sm">On mobile devices, ensure selected voice is installed in your device text to speech settings</p>
+                : <p className="text-center text-sm">On desktop devices, use Google Chrome or Edge browser for more natural voices</p>
+            }
         </div>
     )
 }

src/components/Player/StepInput.tsx

@@ -39,8 +39,9 @@ export default function StepInput({ label, item, min, max, step, value }: StepIn
                     // min+step, to prevent going into negative values
                     isDisabled={value < (min + step)}
                     onClick={() => {
-                        if (value > (min))
+                        if (value > (min)) {
                             decrementStepValue(item, step)
+                        }
                     }}
                 >
                     <span className="material-icons text-primary-800">remove</span>
@@ -62,8 +63,9 @@ export default function StepInput({ label, item, min, max, step, value }: StepIn
                     className={`flex items-center`}
                     isDisabled={value >= (max)}
                     onClick={() => {
-                        if (value < (max))
+                        if (value < (max)) {
                             incrementStepValue(item, step)
+                        }
                     }}
                 >
                     <span className="material-icons  text-primary-800">add</span>

src/components/Player/VoicesDropdown.tsx

@@ -28,10 +28,12 @@ export function VoicesDropdown() {
         const tempVoicesOfOtherLanguages: Voice[] = []
 
         for (const voice of voices) {
-            if (voice.lang === languageCodeOfArticleToSpeak)
+            if (voice.lang === languageCodeOfArticleToSpeak) {
                 tempVoicesOfAutoDetectedLanguage.push(voice)
-            else
+            }
+            else {
                 tempVoicesOfOtherLanguages.push(voice)
+            }
         }
         setVoicesOfAutoDetectedLanguage(tempVoicesOfAutoDetectedLanguage)
         setVoicesOfOtherLanguages(tempVoicesOfOtherLanguages)

src/helpers/getLanguageName.ts

@@ -1,9 +1,11 @@
 import { LanguageCodeToLanguageMap } from "@/constants/languages";
 
 export function getLanguageName(languageCode: string) {
-    if (LanguageCodeToLanguageMap.hasOwnProperty(languageCode))
+    if (LanguageCodeToLanguageMap.hasOwnProperty(languageCode)) {
         // Assert that the  key is indeed present, since it is checked in the if statement above
         return LanguageCodeToLanguageMap[languageCode as keyof typeof LanguageCodeToLanguageMap]
-    else
+    }
+    else {
         return "unknown"
+    }
 }

src/helpers/getSpeakingTimeText.ts

@@ -6,14 +6,18 @@ export function getSpeakingTimeText(text: string) {
         const minTime = (Math.floor(words.length / 150))
         const maxTime = Math.floor(words.length / 110)
         if (minTime > 1) {
-            if (minTime === maxTime)
+            if (minTime === maxTime) {
                 return `~${maxTime} min`
-            else
+            }
+            else {
                 return `${minTime} - ${maxTime} min`
+            }
         }
-        else
+        else {
             return `<1 min`
+        }
     }
-    else
+    else {
         return `<1 min`
+    }
 }

src/helpers/handleArticle/useFetchArticle.ts

@@ -41,6 +41,5 @@ export function useFetchArticle() {
             setToastType("language-detected")
             setShowToast(false)
         }
-
     }, [tab])
 }

src/helpers/handleArticle/useSplitArticleToSentences.ts

@@ -33,8 +33,9 @@ export function useSplitArticleToSentences() {
 
             // Pick up the punctuation mark from the next item and append to currentSentence
             // For the last item, there will be no punctuation following it. Hence, the check to avoid accessing an element that does not exist.
-            if ((i + 1) < initialSentences.length)
+            if ((i + 1) < initialSentences.length) {
                 currentSentence += initialSentences[i + 1]
+            }
 
             // Trim leading and trailing whitespace
             currentSentence = currentSentence.trim()

src/helpers/setUpWebSpeech/useChooseBestVoice.ts

@@ -6,9 +6,9 @@ import { isLocalStorageSupported } from "../isLocalStorageSupported";
 // Choose best voice based on auto detected language and voice availability on the device.
 
 // At least one voice available for the auto detected language:
-// A If there is a user preferred voice for this language from a previous session and that voice is available, use that
-// B If not 2.1, if there are remote voices, use the first one
-// C If neither 2.1 or 2.2, fallback to use auto detected language's first default/non-default voice.
+// A. If there is a user preferred voice for this language from a previous session and that voice is available, use that
+// B. If not 2.1, if there are remote voices, use the first one
+// C. If neither 2.1 or 2.2, fallback to use auto detected language's first default/non-default voice.
 
 export function useChooseBestVoice() {
     const languageCodeOfArticleToSpeak = useArticleStore((state) => state.languageCodeOfArticleToSpeak)
@@ -24,16 +24,18 @@ export function useChooseBestVoice() {
         // Loop through populated voices
         for (const voice of voices) {
             // Pick up all voices of auto detected language
-            if (voice.lang === languageCodeOfArticleToSpeak)
+            if (voice.lang === languageCodeOfArticleToSpeak) {
                 voicesOfAutoDetectedLanguage.push(voice)
+            }
             // Pick up all default voices. Some device have more than one default voice for reasons unknown (may be one default per language?).
-            if (voice.default)
+            if (voice.default) {
                 defaultVoices.push(voice)
+            }
         }
 
         // At least one voice available for the auto detected language
         if (voicesOfAutoDetectedLanguage.length !== 0) {
-            // A Check if there is a user preferred voice for the auto detected language and if it is available
+            // A. check if there is a user preferred voice for the auto detected language and if it is available
             if (isLocalStorageSupported()) {
                 const voiceName = window.localStorage.getItem(`${languageCodeOfArticleToSpeak}`)
                 if (voiceName) {
@@ -47,7 +49,7 @@ export function useChooseBestVoice() {
                 }
             }
 
-            // B Check if there are any remote voices
+            // B. Check if there are any remote voices
             if (voiceToSpeakWith === undefined) {
                 // Pick up the first remote (non local) voice in voicesOfAutoDetectedLanguage
                 for (const voice of voicesOfAutoDetectedLanguage) {
@@ -57,7 +59,7 @@ export function useChooseBestVoice() {
                 }
             }
 
-            // C Fallback to auto detected language's first default/non-default voice
+            // C. Fallback to auto detected language's first default/non-default voice
             if (voiceToSpeakWith === undefined) {
                 // Set to the first voice of the auto detected language 
                 voiceToSpeakWith = voicesOfAutoDetectedLanguage[0]
@@ -72,17 +74,18 @@ export function useChooseBestVoice() {
         }
         // Dummy voice. When speaking, if this is the value of voiceToSpeakWith, don't provide a voice to speak with. Let the TTS engine decide what voice to use.
         else {
-            setVoiceToSpeakWith({
+            voiceToSpeakWith = {
                 default: false,
                 lang: "en",
                 langWithLocale: "en-US",
                 localService: true,
                 name: "Default voice",
                 value: "default-voice"
-            })
+            }
         }
 
-        if (voiceToSpeakWith)
+        if (voiceToSpeakWith) {
             setVoiceToSpeakWith(voiceToSpeakWith)
+        }
     }, [voices, languageCodeOfArticleToSpeak])
 }

src/helpers/shouldCaptureAnalytics.ts

@@ -4,11 +4,14 @@ export function shouldCaptureAnalytics() {
 
     if (hasParam) {
         // Drop analytics 
-        if (hasParam.includes("corrieredellacalabria.it"))
+        if (hasParam.includes("corrieredellacalabria.it")) {
             return false
-        else
+        }
+        else {
             return true
+        }
     }
-    else
+    else {
         return true
+    }
 }

src/helpers/useDetectAndUpdateLanguage.ts

@@ -19,13 +19,16 @@ export function useDetectAndUpdateLanguage() {
                 const detectedLanguages = identifier.findMostFrequentLanguages(articleToSpeak, 1)
                 identifier.dispose()
 
-                if (detectedLanguages.length > 0 && detectedLanguages[0].is_reliable)
+                if (detectedLanguages.length > 0 && detectedLanguages[0].is_reliable) {
                     setArticleLanguageCode(detectedLanguages[0].language)
-                else
+                }
+                else {
                     setArticleLanguageCode("en")
+                }
             })
         }
-        else
+        else {
             setArticleLanguageCode("en")
+        }
     }, [articleToSpeak])
 }