From f026540ac0c6a0c90b4a9a39609dac18e82907e3 Mon Sep 17 00:00:00 2001 From: yakshaG Date: Wed, 24 Jul 2024 09:29:29 +0530 Subject: [PATCH] Make braces consistent across the app --- src/app/app/page.tsx | 9 ++++--- src/components/ArticleForm/index.tsx | 24 ++++++++++++------ src/components/Menu/index.tsx | 3 ++- src/components/Player/PlayerControls.tsx | 18 ++++++++----- src/components/Player/SpeechSettings.tsx | 15 +++++------ src/components/Player/StepInput.tsx | 6 +++-- src/components/Player/VoicesDropdown.tsx | 6 +++-- src/helpers/getLanguageName.ts | 6 +++-- src/helpers/getSpeakingTimeText.ts | 12 ++++++--- src/helpers/handleArticle/useFetchArticle.ts | 1 - .../useSplitArticleToSentences.ts | 3 ++- .../setUpWebSpeech/useChooseBestVoice.ts | 25 +++++++++++-------- src/helpers/shouldCaptureAnalytics.ts | 9 ++++--- src/helpers/useDetectAndUpdateLanguage.ts | 9 ++++--- src/helpers/useIsFrequentListener.ts | 3 ++- src/helpers/usePlayerKeyBoardShortcuts.ts | 3 ++- 16 files changed, 96 insertions(+), 56 deletions(-) diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx index b35de69..b5eb8ca 100644 --- a/src/app/app/page.tsx +++ b/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)) + } } }, []) diff --git a/src/components/ArticleForm/index.tsx b/src/components/ArticleForm/index.tsx index b4bc1b5..f0cefcb 100644 --- a/src/components/ArticleForm/index.tsx +++ b/src/components/ArticleForm/index.tsx @@ -29,10 +29,12 @@ 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 @@ -40,8 +42,9 @@ export default function ArticleForm() { // 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]) diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 25a3751..b06a82f 100644 --- a/src/components/Menu/index.tsx +++ b/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(() => { diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx index 48f05bc..f1e0e18 100644 --- a/src/components/Player/PlayerControls.tsx +++ b/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 diff --git a/src/components/Player/SpeechSettings.tsx b/src/components/Player/SpeechSettings.tsx index dd0be39..6d3e1c0 100644 --- a/src/components/Player/SpeechSettings.tsx +++ b/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 (
@@ -81,8 +80,10 @@ export default function SpeechSettings() {
-

On mobile devices, ensure selected voice is installed in your device text to speech settings

-

On desktop devices, use Google Chrome or Edge browser for more natural voices

+ {isMobileOrTablet + ?

On mobile devices, ensure selected voice is installed in your device text to speech settings

+ :

On desktop devices, use Google Chrome or Edge browser for more natural voices

+ } ) } diff --git a/src/components/Player/StepInput.tsx b/src/components/Player/StepInput.tsx index 63efd71..203863e 100644 --- a/src/components/Player/StepInput.tsx +++ b/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) + } }} > remove @@ -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) + } }} > add diff --git a/src/components/Player/VoicesDropdown.tsx b/src/components/Player/VoicesDropdown.tsx index bfc8776..25d737a 100644 --- a/src/components/Player/VoicesDropdown.tsx +++ b/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) diff --git a/src/helpers/getLanguageName.ts b/src/helpers/getLanguageName.ts index f82e91f..ce014f7 100644 --- a/src/helpers/getLanguageName.ts +++ b/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" + } } \ No newline at end of file diff --git a/src/helpers/getSpeakingTimeText.ts b/src/helpers/getSpeakingTimeText.ts index c38a732..d0d0cfb 100644 --- a/src/helpers/getSpeakingTimeText.ts +++ b/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` + } } \ No newline at end of file diff --git a/src/helpers/handleArticle/useFetchArticle.ts b/src/helpers/handleArticle/useFetchArticle.ts index 67d7180..b2a1283 100644 --- a/src/helpers/handleArticle/useFetchArticle.ts +++ b/src/helpers/handleArticle/useFetchArticle.ts @@ -41,6 +41,5 @@ export function useFetchArticle() { setToastType("language-detected") setShowToast(false) } - }, [tab]) } \ No newline at end of file diff --git a/src/helpers/handleArticle/useSplitArticleToSentences.ts b/src/helpers/handleArticle/useSplitArticleToSentences.ts index 6f82b83..dc3b4af 100644 --- a/src/helpers/handleArticle/useSplitArticleToSentences.ts +++ b/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() diff --git a/src/helpers/setUpWebSpeech/useChooseBestVoice.ts b/src/helpers/setUpWebSpeech/useChooseBestVoice.ts index cf4d372..c1e593c 100644 --- a/src/helpers/setUpWebSpeech/useChooseBestVoice.ts +++ b/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]) } \ No newline at end of file diff --git a/src/helpers/shouldCaptureAnalytics.ts b/src/helpers/shouldCaptureAnalytics.ts index 3a44faf..c0c2408 100644 --- a/src/helpers/shouldCaptureAnalytics.ts +++ b/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 + } } \ No newline at end of file diff --git a/src/helpers/useDetectAndUpdateLanguage.ts b/src/helpers/useDetectAndUpdateLanguage.ts index 11bb195..cd33acd 100644 --- a/src/helpers/useDetectAndUpdateLanguage.ts +++ b/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]) } \ No newline at end of file diff --git a/src/helpers/useIsFrequentListener.ts b/src/helpers/useIsFrequentListener.ts index 67ddcc9..be53d6a 100644 --- a/src/helpers/useIsFrequentListener.ts +++ b/src/helpers/useIsFrequentListener.ts @@ -18,8 +18,9 @@ export function useIsFrequentListener() { if ((listenCount > FREQUENT_LISTENER_THRESHOLD)) setIsFrequentListener(true) } - else + else { window.localStorage.setItem("listenCount", "1") + } } }, []) } \ No newline at end of file diff --git a/src/helpers/usePlayerKeyBoardShortcuts.ts b/src/helpers/usePlayerKeyBoardShortcuts.ts index 039d208..cfd29db 100644 --- a/src/helpers/usePlayerKeyBoardShortcuts.ts +++ b/src/helpers/usePlayerKeyBoardShortcuts.ts @@ -6,8 +6,9 @@ export function usePlayerKeyBoardShortcuts() { const setIsPlayerOpen = useGenericStore((state) => state.setIsPlayerOpen) function closePlayer(event: KeyboardEvent) { - if (event.key === "Escape") + if (event.key === "Escape") { setIsPlayerOpen(false) + } } useEffect(() => {