koval-ui/dist/src/lib/TextToSpeech/useSpeechSynth.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"useSpeechSynth.cjs","sources":["../../../../src/lib/TextToSpeech/useSpeechSynth.ts"],"sourcesContent":["import type {MutableRefObject} from 'react';\nimport {useCallback, useEffect, useState, useRef} from 'react';\n\nimport type {LanguageCodes} from '@/internal/locale';\n\nexport type Props = {\n    language: keyof typeof LanguageCodes;\n    ref: MutableRefObject<HTMLDivElement | null>;\n    onSpeak: (event: SpeechSynthesisEvent) => void;\n    onPause: (event: SpeechSynthesisEvent) => void;\n    onEnd: (event: SpeechSynthesisEvent) => void;\n};\n\nexport const useSpeechSynth = ({language, ref, onEnd, onPause, onSpeak}: Props) => {\n    const [utterance, setUtterance] = useState<SpeechSynthesisUtterance>();\n\n    const synth = useRef<SpeechSynthesis>();\n\n    useEffect(() => {\n        synth.current = window.speechSynthesis;\n        return () => {\n            synth.current?.cancel();\n        };\n    }, []);\n\n    const [isSpeaking, setSpeaking] = useState(false);\n\n    useEffect(() => {\n        const nextUtterance = new SpeechSynthesisUtterance(ref.current?.innerText);\n        nextUtterance.lang = language;\n        nextUtterance.addEventListener('end', event => {\n            onEnd(event);\n            setUtterance(nextUtterance);\n            setSpeaking(false);\n        });\n        nextUtterance.addEventListener('resume', event => {\n            onSpeak(event);\n            setSpeaking(true);\n        });\n        nextUtterance.addEventListener('start', event => {\n            onSpeak(event);\n            setSpeaking(true);\n        });\n        nextUtterance.addEventListener('pause', event => {\n            onPause(event);\n            setSpeaking(false);\n        });\n        setUtterance(nextUtterance);\n    }, [language, ref]);\n\n    const speak = useCallback(() => {\n        if (synth.current?.paused === true) {\n            synth.current?.resume();\n        } else {\n            utterance && synth.current?.speak(utterance);\n        }\n    }, [utterance]);\n\n    const restart = useCallback(() => {\n        synth.current?.cancel();\n        utterance && synth.current?.speak(utterance);\n    }, [utterance]);\n\n    const pause = useCallback(() => {\n        synth.current?.pause();\n    }, []);\n\n    return {speak, pause, isSpeaking, restart};\n};\n"],"names":["useSpeechSynth","language","ref","onEnd","onPause","onSpeak","utterance","setUtterance","useState","synth","useRef","useEffect","isSpeaking","setSpeaking","nextUtterance","event","speak","useCallback","restart","pause"],"mappings":"sHAaaA,EAAiB,CAAC,CAAC,SAAAC,EAAU,IAAAC,EAAK,MAAAC,EAAO,QAAAC,EAAS,QAAAC,KAAoB,CAC/E,KAAM,CAACC,EAAWC,CAAY,EAAIC,WAAA,EAE5BC,EAAQC,EAAAA,OAAA,EAEdC,EAAAA,UAAU,KACNF,EAAM,QAAU,OAAO,gBAChB,IAAM,CACTA,EAAM,SAAS,OAAA,CACnB,GACD,CAAA,CAAE,EAEL,KAAM,CAACG,EAAYC,CAAW,EAAIL,EAAAA,SAAS,EAAK,EAEhDG,EAAAA,UAAU,IAAM,CACZ,MAAMG,EAAgB,IAAI,yBAAyBZ,EAAI,SAAS,SAAS,EACzEY,EAAc,KAAOb,EACrBa,EAAc,iBAAiB,MAAOC,GAAS,CAC3CZ,EAAMY,CAAK,EACXR,EAAaO,CAAa,EAC1BD,EAAY,EAAK,CACrB,CAAC,EACDC,EAAc,iBAAiB,SAAUC,GAAS,CAC9CV,EAAQU,CAAK,EACbF,EAAY,EAAI,CACpB,CAAC,EACDC,EAAc,iBAAiB,QAASC,GAAS,CAC7CV,EAAQU,CAAK,EACbF,EAAY,EAAI,CACpB,CAAC,EACDC,EAAc,iBAAiB,QAASC,GAAS,CAC7CX,EAAQW,CAAK,EACbF,EAAY,EAAK,CACrB,CAAC,EACDN,EAAaO,CAAa,CAC9B,EAAG,CAACb,EAAUC,CAAG,CAAC,EAElB,MAAMc,EAAQC,EAAAA,YAAY,IAAM,CACxBR,EAAM,SAAS,SAAW,GAC1BA,EAAM,SAAS,OAAA,EAEfH,GAAaG,EAAM,SAAS,MAAMH,CAAS,CAEnD,EAAG,CAACA,CAAS,CAAC,EAERY,EAAUD,EAAAA,YAAY,IAAM,CAC9BR,EAAM,SAAS,OAAA,EACfH,GAAaG,EAAM,SAAS,MAAMH,CAAS,CAC/C,EAAG,CAACA,CAAS,CAAC,EAERa,EAAQF,EAAAA,YAAY,IAAM,CAC5BR,EAAM,SAAS,MAAA,CACnB,EAAG,CAAA,CAAE,EAEL,MAAO,CAAC,MAAAO,EAAO,MAAAG,EAAO,WAAAP,EAAY,QAAAM,CAAA,CACtC"}