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

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

{"version":3,"file":"TextToSpeech.cjs","sources":["../../../../src/lib/TextToSpeech/TextToSpeech.tsx"],"sourcesContent":["import type {ReactNode} from 'react';\nimport {useCallback, useId, forwardRef, useRef} from 'react';\nimport classNames from 'classnames';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {LanguageCodes} from '@/internal/locale';\nimport {IconPlay, IconPause, IconRepeat} from '@/internal/Icons';\n\nimport classes from './TextToSpeech.module.css';\nimport {useSpeechSynth} from './useSpeechSynth.ts';\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        children?: ReactNode;\n        /**\n         * Provide a string with a BCP 47 language tag or an Intl.Locale instance,\n         * or an array of such locale identifiers. Defaults to user setting\n         * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#locales\n         */\n        language?: keyof typeof LanguageCodes;\n        /**\n         * Provide a text label for play action\n         */\n        playLabel?: string;\n        /**\n         * Provide a text label for pause action\n         */\n        pauseLabel?: string;\n        /**\n         * Provide a text label for restart action\n         */\n        restartLabel?: string;\n        /**\n         * Callback when a user starts speech\n         */\n        onSpeak?: (event: SpeechSynthesisEvent) => void;\n        /**\n         * Callback when a user pauses speech\n         */\n        onPause?: (event: SpeechSynthesisEvent) => void;\n        /**\n         * Callback when a text fragment is finished reading\n         */\n        onEnd?: (event: SpeechSynthesisEvent) => void;\n    };\n\nexport const TextToSpeech = forwardRef<HTMLDivElement, Props>(\n    (\n        {\n            children,\n            className,\n            language = 'en',\n            playLabel = 'Read the text',\n            pauseLabel = 'Pause reading',\n            restartLabel = 'Restart reading',\n            onSpeak = () => {},\n            onPause = () => {},\n            onEnd = () => {},\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const wrapperRef = useRef<HTMLDivElement>(null);\n\n        const {speak, pause, isSpeaking, restart} = useSpeechSynth({\n            language,\n            ref: wrapperRef,\n            onSpeak,\n            onEnd,\n            onPause,\n        });\n\n        const labelId = useId();\n\n        const handleClick = useCallback(() => {\n            !isSpeaking ? speak() : pause();\n        }, [isSpeaking, pause, speak]);\n\n        const Icon = isSpeaking ? IconPause : IconPlay;\n\n        return (\n            <div {...nativeProps} className={classNames(classes.wrapper, className)} ref={ref}>\n                <div className={classNames(classes.controls, {[classes.speaking]: isSpeaking})}>\n                    <button\n                        onClick={handleClick}\n                        className={classes.button}\n                        aria-describedby={labelId}>\n                        <Icon className={classes.icon} />\n                    </button>\n                    <div className={classes.label} id={labelId}>\n                        {!isSpeaking ? playLabel : pauseLabel}\n                    </div>\n                    {isSpeaking && (\n                        <button\n                            aria-description={restartLabel}\n                            onClick={restart}\n                            className={classNames(classes.button, classes.restart)}>\n                            <IconRepeat className={classes.icon} />\n                        </button>\n                    )}\n                </div>\n                <div ref={wrapperRef}>{children}</div>\n            </div>\n        );\n    }\n);\n\nTextToSpeech.displayName = 'TextToSpeech';\n"],"names":["TextToSpeech","forwardRef","children","className","language","playLabel","pauseLabel","restartLabel","onSpeak","onPause","onEnd","nativeProps","ref","wrapperRef","useRef","speak","pause","isSpeaking","restart","useSpeechSynth","labelId","useId","handleClick","useCallback","Icon","IconPause","IconPlay","jsxs","classNames","classes","jsx","IconRepeat"],"mappings":"0YA8CaA,EAAeC,EAAAA,WACxB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,SAAAC,EAAW,KACX,UAAAC,EAAY,gBACZ,WAAAC,EAAa,gBACb,aAAAC,EAAe,kBACf,QAAAC,EAAU,IAAM,CAAC,EACjB,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,EAAQ,IAAM,CAAC,EACf,GAAGC,CAAA,EAEPC,IACC,CACD,MAAMC,EAAaC,EAAAA,OAAuB,IAAI,EAExC,CAAC,MAAAC,EAAO,MAAAC,EAAO,WAAAC,EAAY,QAAAC,CAAA,EAAWC,EAAAA,eAAe,CACvD,SAAAf,EACA,IAAKS,EACL,QAAAL,EACA,MAAAE,EACA,QAAAD,CAAA,CACH,EAEKW,EAAUC,EAAAA,MAAA,EAEVC,EAAcC,EAAAA,YAAY,IAAM,CACjCN,EAAuBD,EAAA,EAAVD,EAAA,CAClB,EAAG,CAACE,EAAYD,EAAOD,CAAK,CAAC,EAEvBS,EAAOP,EAAaQ,EAAAA,UAAYC,EAAAA,SAEtC,OACIC,OAAC,MAAA,CAAK,GAAGhB,EAAa,UAAWiB,EAAWC,EAAAA,QAAQ,QAAS1B,CAAS,EAAG,IAAAS,EACrE,SAAA,CAAAe,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAWC,EAAAA,QAAQ,SAAU,CAAC,CAACA,EAAAA,QAAQ,QAAQ,EAAGZ,CAAA,CAAW,EACzE,SAAA,CAAAa,EAAAA,IAAC,SAAA,CACG,QAASR,EACT,UAAWO,EAAAA,QAAQ,OACnB,mBAAkBT,EAClB,SAAAU,EAAAA,IAACN,EAAA,CAAK,UAAWK,EAAAA,QAAQ,IAAA,CAAM,CAAA,CAAA,EAEnCC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAQ,MAAO,GAAIT,EAC9B,SAACH,EAAyBX,EAAZD,CAAY,CAC/B,EACCY,GACGa,EAAAA,IAAC,SAAA,CACG,mBAAkBvB,EAClB,QAASW,EACT,UAAWU,EAAWC,EAAAA,QAAQ,OAAQA,EAAAA,QAAQ,OAAO,EACrD,SAAAC,EAAAA,IAACC,EAAAA,WAAA,CAAW,UAAWF,EAAAA,QAAQ,IAAA,CAAM,CAAA,CAAA,CACzC,EAER,EACAC,EAAAA,IAAC,MAAA,CAAI,IAAKjB,EAAa,SAAAX,CAAA,CAAS,CAAA,EACpC,CAER,CACJ,EAEAF,EAAa,YAAc"}