{"ast":null,"code":"var _jsxFileName = \"D:\\\\Project\\\\UC_Trains_Voice\\\\react-demo\\\\src\\\\Route\\\\Sample.tsx\",\n _s = $RefreshSig$();\nimport React, { useState, useEffect, useRef } from 'react';\nimport { Button, Flex } from 'antd';\nimport { SettingOutlined, CustomerServiceOutlined } from '@ant-design/icons';\nimport { Col, Row, Tour, ConfigProvider } from 'antd';\nimport { CaretRightOutlined } from '@ant-design/icons';\nimport { Slider, Input } from 'antd';\nimport { Layout, Menu, Dropdown, Avatar } from 'antd';\nimport { Drawer, Radio } from 'antd';\nimport { RedoOutlined, PauseOutlined, StepForwardOutlined, StepBackwardOutlined } from '@ant-design/icons';\nimport { Tooltip, FloatButton, Space, Switch } from 'antd';\nimport '../CSS/sample.css';\nimport { Modal } from 'antd';\nimport ConstantTxt from '../Canvas/ConstantTxt';\nimport Fixed from '../Canvas/Fixed';\nimport Stair from '../Canvas/Stair';\nimport Heteronym from '../Canvas/Heteronym';\nimport ReactAudioPlayer from 'react-audio-player';\nimport { UploadOutlined } from '@ant-design/icons';\nimport { message, Upload } from 'antd';\nimport hark from 'hark';\nimport { useLocation } from 'react-router-dom';\nimport { Typography } from 'antd';\nimport { Collapse } from 'antd';\nimport { Image } from 'antd';\nimport divide_1 from '../icon/Divider2-half.png';\nimport { UserOutlined } from '@ant-design/icons';\nimport { QuestionOutlined } from '@ant-design/icons';\nimport { useTemString } from '../hooks/useTemString';\n// @ts-ignore\nimport pdfToText from 'react-pdftotext';\nimport { jsxDEV as _jsxDEV, Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nconst {\n TextArea\n} = Input;\nconst {\n Title,\n Paragraph,\n Text,\n Link\n} = Typography;\n// const fontSizePara = 17;\n// const fontAlign = \"justify\";\n// const paragraphStyle:React.CSSProperties = {\n// textAlign: fontAlign, \n// fontSize: fontSizePara,\n// fontFamily: \"'Roboto', 'sans-serif'\",\n// };\n\nconst {\n Content\n} = Layout;\nconst marksRange = {\n 50: '50Hz',\n 600: '600Hz'\n};\nconst marksBallPos = {\n 0: '0%',\n 1: '100%'\n};\nconst marksVol = {\n 50: '50dB',\n 90: '90dB'\n};\nconst itemsMenu = [{\n label: 'Profile',\n key: 'Profile'\n}, {\n label: 'Settings',\n key: 'Settings'\n}, {\n label: 'Other',\n key: 'Other'\n}];\nconst Sample = ({\n isModalOpen,\n setIsModalOpen,\n showModal,\n handleCancel\n}) => {\n _s();\n // strings\n const {\n items_3,\n stairFilenames,\n heteronymFilenames,\n shortDescription\n } = useTemString();\n\n // Canvas values\n const size = [400, 1400];\n const [initialRange, setInitialRange] = useState([100, 300]);\n const [config, setConfig] = useState({\n SRATE: 48000,\n fxmin: 50,\n fxlow: 50 + 50,\n // This initial value will be updated by useEffect below\n fxhigh: 600 - 200,\n // This initial value will be updated by useEffect below\n fxmax: 600\n });\n const COLORS = {\n realVoiceColor: '#d679de',\n // red\n targetVoiceColor: '#4669C8',\n // blue\n closeVoiceColor: '#15dbcc' // yellow\n };\n\n // open/close \n const [openSetting, setOpenSetting] = useState(false);\n const [txtShow, setTxtShow] = useState(\"true\");\n const [txtShowSwitch, setTxtShowSwitch] = useState('show');\n const [openTour, setOpenTour] = useState(false);\n const [isPlaying, setIsPlaying] = useState(true);\n const [isRetry, setIsRetry] = useState(false);\n const [isListen, setIsListen] = useState(1);\n const [enableVol, setEnableVol] = useState(false);\n const [isOpenTextbox, setIsOpenTextbox] = useState(false);\n const [showNextPre, setShowNextPre] = useState(false);\n const [showListen, setShowListen] = useState(false);\n\n // special vatiables\n const location = useLocation();\n const ref1 = useRef(null);\n const ref2 = useRef(null);\n const ref3 = useRef(null);\n const parentRef = useRef(null);\n\n // initial Value\n const [volume, setVolume] = useState(0);\n const [threshold, setThreshold] = useState(70);\n const [maxLyricCount, setMaxLyricCount] = useState(2);\n const [playLyricCount, setPlayLyricCount] = useState(0);\n const [divisor, setDivisor] = useState(10);\n const [ballPosition, setBallPosition] = useState(0.5);\n\n // Hz/Notes\n const [showNotesPar, setShowNotesPar] = useState(false);\n\n // selected choice\n const [component, setComponent] = useState(\"ConstantTxt\");\n const [currentSelection, setCurrentSelection] = useState('Constant');\n const [gender, setGender] = useState(\"Female\");\n const [genderName, setGenderName] = useState(\"Fem01\");\n const [syllableCount, setSyllableCount] = useState(\"none\");\n const [baseFilenames, setBaseFilenames] = useState([]);\n const [fileContent, setFileContent] = useState([]);\n\n // auido\n const audioPlayer = useRef(null);\n const [audioSrcFromChild, setAudioSrcFromChild] = useState('');\n\n // profile (Need to rebuild)\n const [selectedItem, setSelectedItem] = useState('Settings');\n\n // \n const setPlaying = () => {\n setIsPlaying(true);\n };\n const setPlayingPause = () => {\n setIsPlaying(false);\n };\n const handleBeginTour = () => {\n setOpenTour(true);\n };\n const onClickMenu = e => {\n setSelectedItem(e.key);\n };\n const onClose = () => {\n setOpenSetting(false);\n };\n const ClearTxt = () => {\n setFileContent([]);\n setMaxLyricCount(1);\n };\n // render profile page\n const renderContent = () => {\n switch (selectedItem) {\n case 'Profile':\n return /*#__PURE__*/_jsxDEV(\"p\", {\n children: \"profile\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 187,\n columnNumber: 16\n }, this);\n case 'Settings':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n children: /*#__PURE__*/_jsxDEV(Flex, {\n vertical: true,\n gap: \"middle\",\n children: [/*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Coordinate Display Mode\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 192,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Radio.Group, {\n onChange: onChangeHz,\n defaultValue: \"notes\",\n buttonStyle: \"solid\",\n children: [/*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"hz\",\n children: \" Hz \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 194,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"notes\",\n children: \"Notes\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 195,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 193,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 197,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 191,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Display Range\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 201,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n range: true,\n step: 10,\n min: 50,\n max: 600,\n onChange: onChangeRange,\n tooltip: {\n formatter: formatterHz\n },\n marks: marksRange,\n defaultValue: [100, 300]\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 202,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 200,\n columnNumber: 13\n }, this), component !== \"Fixed\" && component !== \"Stair\" && /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Indicator Horizontal Position\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 218,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.1,\n min: 0,\n max: 1,\n onChange: onChangePosition,\n tooltip: {\n formatter: formatterPos\n },\n defaultValue: 0.5,\n marks: marksBallPos\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 219,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 217,\n columnNumber: 15\n }, this), component !== \"Fixed\" && component !== \"Stair\" && component !== \"Heteronym\" && /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Indicator Horizontal Position\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 235,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.1,\n min: 0,\n max: 1,\n onChange: onChangePosition,\n tooltip: {\n formatter: formatterPos\n },\n defaultValue: 0.5,\n marks: marksBallPos\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 236,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 234,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Indicator Speed\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 251,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.05,\n min: 0,\n max: 1,\n onChange: onChangeSpeed,\n defaultValue: 0.3,\n tooltip: {\n formatter: null\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 252,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 250,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Auto-Start When Voice Detected\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 264,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: false,\n onChange: EnableVoluneMode\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 265,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 263,\n columnNumber: 15\n }, this), enableVol && /*#__PURE__*/_jsxDEV(Slider, {\n step: 1,\n min: 50,\n max: 90,\n onChange: onChangeThreshold,\n tooltip: {\n formatter: formatterdB\n },\n defaultValue: 70,\n marks: marksVol\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 269,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 262,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 284,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: onClose,\n children: \"Close\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 285,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 190,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 189,\n columnNumber: 17\n }, this);\n case 'Other':\n return /*#__PURE__*/_jsxDEV(\"p\", {\n children: \"other\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 290,\n columnNumber: 16\n }, this);\n default:\n return null;\n }\n };\n\n // Constant Page upload and input\n const handleTextInput = e => {\n const content = e.target.value;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators).map(s => s.trim()).filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n };\n const props = {\n name: 'file',\n accept: '.txt, .pdf',\n beforeUpload: file => {\n if (file.type !== 'text/plain' && file.type !== 'application/pdf') {\n message.error(`${file.name} is not a valid text/pdf file.`);\n return false;\n }\n if (file.type === 'application/pdf') {\n pdfToText(file).then(text => {\n const separators = /[;,./\\n]/;\n const splitContent = text.split(separators).map(s => s.trim()).filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }).catch(error => {\n // Explicitly specify the type of 'error' parameter as 'any'\n message.error('Error reading PDF file:', error);\n });\n return false;\n }\n if (file.type === 'text/plain') {\n const reader = new FileReader();\n reader.onload = e => {\n var _e$target;\n if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.result) {\n const content = e.target.result;\n // const separators = /[;,./]/;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators).map(s => s.trim()).filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }\n };\n reader.readAsText(file);\n return false;\n }\n },\n onChange(info) {\n if (info.file.status === 'done') {\n message.success(`${info.file.name} file read successfully`);\n } else if (info.file.status === 'error') {\n message.error(`${info.file.name} file read failed.`);\n }\n }\n };\n const changeOnEnter = e => {\n if (e.key === 'Enter' && !e.shiftKey) {\n console.log(\"Enter Key Pressed!\");\n handleTextInput(e);\n }\n };\n\n // audio\n const handleAudioSrc = newAudioSrc => {\n setAudioSrcFromChild(newAudioSrc);\n };\n const playAudio = () => {\n if (audioPlayer.current && audioPlayer.current.audioEl.current) {\n audioPlayer.current.audioEl.current.play().then(() => {\n setIsListen(isListen + 1);\n }).catch(error => {\n console.error('Fail play audios: ', error);\n });\n }\n };\n\n // Volume\n useEffect(() => {\n navigator.mediaDevices.getUserMedia({\n audio: true,\n video: false\n }).then(stream => {\n const harkInstance = hark(stream, {});\n harkInstance.on('volume_change', (volume, threshold) => {\n setVolume(volume);\n });\n return () => harkInstance.stop();\n }).catch(error => {\n console.error('Error accessing the microphone', error);\n });\n }, []);\n useEffect(() => {\n if (volume > threshold - 100 && enableVol) {\n setIsPlaying(true);\n }\n }, [volume]);\n\n // Tour\n const steps = [{\n title: 'Canvas Display',\n description: 'Visualize your voice pitch and target pitch curve in real-time.',\n placement: 'top',\n target: () => ref1.current\n }, {\n title: 'Function Buttons',\n cover: /*#__PURE__*/_jsxDEV(\"ul\", {\n style: {\n textAlign: 'left'\n },\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Start/Stop: Begin or stop recording.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 421,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Retry: Clear display and restart.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 422,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Upload txt/pdf File (optional): Upload text or pdf for you (in .txt/.pdf format) to read while recording.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 423,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Previous Next (if text uploaded): Switch between lines of text.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 424,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 420,\n columnNumber: 9\n }, this),\n target: () => ref2.current\n }, {\n title: 'Slider',\n description: 'Use this slides to change the target pitch value that you want to aim for.',\n target: () => parentRef.current\n }, {\n title: 'Options menu',\n description: 'Switch between different exercises and adjust settings such as the pitch display range.',\n target: () => ref3.current\n }];\n useEffect(() => {\n const queryParams = new URLSearchParams(location.search);\n const init = queryParams.get('init');\n if (init === 'true') {\n handleBeginTour();\n }\n }, [location]);\n\n // Options of different Exercise \n const handleStairAndConstantClick = e => {\n setPlayLyricCount(0);\n setCurrentSelection(e.target.innerText);\n console.log(e.target.innerText);\n if (e.target.innerText === \"Constant\" || e.target.innerText === \"CONSTANT\") {\n setComponent(\"ConstantTxt\");\n } else if (e.target.innerText === \"Stair\" || e.target.innerText === \"STAIR\") {\n setComponent(\"Stair\");\n } else {\n setComponent(\"Heteronym\");\n }\n setSyllableCount(\"none\");\n };\n const saveGender = e => {\n const [genderType, genderNameType] = e.key.split('-');\n setGender(genderType);\n setGenderName(genderNameType);\n console.log(genderType);\n console.log('genderName', genderName);\n };\n const handleMenuClick = e => {\n setPlayLyricCount(0);\n const [componentType, genderType, syllableCountType] = e.key.split('-');\n if (componentType == \"Constant\") {\n setCurrentSelection(\"Constant\");\n } else if (componentType == \"ConstantTxt\") {\n setCurrentSelection(\"Constant\");\n } else if (componentType == \"Stair\") {\n setCurrentSelection(\"Staircase\");\n } else {\n let tt = \"Syllables \" + syllableCountType;\n setCurrentSelection(tt);\n }\n setComponent(componentType);\n setGender(genderType);\n setSyllableCount(syllableCountType);\n setCurrentSelection(e.key + \"syllable \" + genderName);\n };\n const renderTruncatedFilenames = filenames => {\n return filenames.map((text, index) => {\n const isNearEnd = filenames.length - playLyricCount <= 2;\n const startIndex = isNearEnd ? filenames.length - 3 : playLyricCount;\n const showCondition = index >= startIndex && index <= startIndex + 2;\n return showCondition && /*#__PURE__*/_jsxDEV(\"li\", {\n className: playLyricCount === index ? 'highlighted' : '',\n children: text\n }, index, false, {\n fileName: _jsxFileName,\n lineNumber: 497,\n columnNumber: 11\n }, this);\n });\n };\n const handlePlayLyricCountChange = newCount => {\n setPlayLyricCount(newCount);\n };\n const itemsMale = [{\n key: 'male',\n label: \"Male01\",\n onClick: saveGender\n }];\n const itemsFemale = [{\n key: 'Female-Fem01',\n label: \"Fem01\",\n onClick: saveGender\n }, {\n key: 'Female-Fem02',\n label: \"Fem02\",\n onClick: saveGender\n }, {\n key: 'Female-Fem03',\n label: \"Fem03\",\n onClick: saveGender\n }, {\n key: 'Female-Fem04',\n label: \"Fem04\",\n onClick: saveGender\n }, {\n key: 'Female-Fem05',\n label: \"Fem05\",\n onClick: saveGender\n }, {\n key: 'Female-Fem06',\n label: \"Fem06\",\n onClick: saveGender\n }, {\n key: 'Female-Fem07',\n label: \"Fem07\",\n onClick: saveGender\n }];\n const itemsAvatar = [{\n key: '1',\n label: 'Male',\n children: [...itemsMale]\n }, {\n key: '2',\n label: 'Female',\n children: [...itemsFemale]\n }];\n\n /**\r\n * Defines the items for the syllable menu based on the gender.\r\n * If the gender is 'none', it only includes a single item prompting the user to select an avatar.\r\n * Otherwise, it includes multiple items representing the number of syllables, with corresponding click handlers.\r\n */\n const itemsSyllable = gender === 'none' ? [{\n key: 'SelectAvatar',\n label: 'Please select avatar'\n }] : [{\n key: `Fixed-${gender}-2`,\n label: \"2 syllables\",\n onClick: handleMenuClick\n }, {\n key: `Fixed-${gender}-3`,\n label: \"3 syllables\",\n onClick: handleMenuClick\n }, {\n key: `Fixed-${gender}-4`,\n label: \"4 syllables\",\n onClick: handleMenuClick\n }, {\n key: `Fixed-${gender}-5`,\n label: \"5 syllables\",\n onClick: handleMenuClick\n }];\n const onChangeStairSwitch = value => {\n setTxtShowSwitch(value ? 'hide' : 'show');\n setTxtShow(value ? 'true' : 'false');\n };\n const renderSelectedComponent = () => {\n switch (component) {\n // case 'Constant':\n // return ;\n case 'ConstantTxt':\n return /*#__PURE__*/_jsxDEV(ConstantTxt, {\n ref: parentRef,\n initialRange: initialRange,\n divisor: divisor,\n ballPosition: ballPosition,\n isRetry: isRetry,\n setPlayingPause: setPlayingPause,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n size: size,\n config: config,\n isPlaying: isPlaying\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 607,\n columnNumber: 16\n }, this);\n case 'Stair':\n return /*#__PURE__*/_jsxDEV(Stair, {\n setShowNotesPar: setShowNotesPar,\n setMaxLyricCount: setMaxLyricCount,\n initialRange: initialRange,\n divisor: divisor,\n txtShow: txtShow,\n playLyricCount: playLyricCount,\n setPlayingPause: setPlayingPause,\n isRetry: isRetry,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n size: size,\n config: config,\n isPlaying: isPlaying\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 609,\n columnNumber: 16\n }, this);\n case 'Fixed':\n return /*#__PURE__*/_jsxDEV(Fixed, {\n setMaxLyricCount: setMaxLyricCount,\n setIsListen: setIsListen,\n isListen: isListen,\n initialRange: initialRange,\n divisor: divisor,\n setPlayingPause: setPlayingPause,\n isRetry: isRetry,\n onAudioSrcChange: handleAudioSrc,\n setBaseFilenames: setBaseFilenames,\n onPlayLyricCountChange: handlePlayLyricCountChange,\n syllableCount: syllableCount,\n gender: gender,\n genderName: genderName,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n playLyricCount: playLyricCount,\n size: size,\n config: config,\n isPlaying: isPlaying\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 611,\n columnNumber: 16\n }, this);\n case 'Heteronym':\n return /*#__PURE__*/_jsxDEV(Heteronym, {\n setMaxLyricCount: setMaxLyricCount,\n initialRange: initialRange,\n divisor: divisor,\n txtShow: txtShow,\n playLyricCount: playLyricCount,\n setPlayingPause: setPlayingPause,\n isRetry: isRetry,\n setPlaying: setPlaying,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n size: size,\n config: config,\n isPlaying: isPlaying,\n heteronymFile: heteronymFilenames\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 613,\n columnNumber: 16\n }, this);\n default:\n return /*#__PURE__*/_jsxDEV(\"span\", {\n children: \"Canvas: Picture\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 615,\n columnNumber: 16\n }, this);\n }\n };\n const MainButtons = () => {\n return /*#__PURE__*/_jsxDEV(Flex, {\n justify: \"center\",\n wrap: \"wrap\",\n gap: \"small\",\n children: [/*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Retry\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: () => setIsRetry(!isRetry),\n shape: \"circle\",\n icon: /*#__PURE__*/_jsxDEV(RedoOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 623,\n columnNumber: 77\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 623,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 622,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(ReactAudioPlayer, {\n className: \"audio-player-hidden\",\n src: audioSrcFromChild,\n ref: audioPlayer\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 625,\n columnNumber: 9\n }, this), showListen && /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Listen\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n disabled: component !== \"Fixed\",\n shape: \"circle\",\n onClick: playAudio,\n icon: /*#__PURE__*/_jsxDEV(CustomerServiceOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 632,\n columnNumber: 95\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 632,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 631,\n columnNumber: 11\n }, this), showNextPre && /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Previous\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n shape: \"circle\",\n onClick: onChangePrevious,\n icon: /*#__PURE__*/_jsxDEV(StepBackwardOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 639,\n columnNumber: 69\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 639,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 638,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: isPlaying ? \"Pause\" : \"Play\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: onChangePause,\n shape: \"circle\",\n icon: isPlaying ? /*#__PURE__*/_jsxDEV(PauseOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 643,\n columnNumber: 76\n }, this) : /*#__PURE__*/_jsxDEV(CaretRightOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 643,\n columnNumber: 96\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 643,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 642,\n columnNumber: 9\n }, this), showNextPre && /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Next\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n shape: \"circle\",\n onClick: onChangeNext,\n icon: /*#__PURE__*/_jsxDEV(StepForwardOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 648,\n columnNumber: 65\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 648,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 647,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 620,\n columnNumber: 7\n }, this);\n };\n const renderSelectedComponentLyric = () => {\n switch (component) {\n case 'ConstantTxt':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [/*#__PURE__*/_jsxDEV(Space, {\n size: \"middle\",\n children: [MainButtons(), /*#__PURE__*/_jsxDEV(Space.Compact, {\n children: [/*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Clear existing files and upload new ones\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: ClearTxt,\n children: \"Clear text\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 667,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 666,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Upload, {\n maxCount: 1,\n ...props,\n children: /*#__PURE__*/_jsxDEV(Button, {\n icon: /*#__PURE__*/_jsxDEV(UploadOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 671,\n columnNumber: 33\n }, this),\n children: \"Upload Text/pdf File\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 671,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 670,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Open the Textbox and enter or paste your text\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: () => setIsOpenTextbox(!isOpenTextbox),\n children: !isOpenTextbox ? \"Open Textbox\" : \"Close Textbox\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 676,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 675,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 664,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 662,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(_Fragment, {\n children: isOpenTextbox && fileContent.length === 0 && /*#__PURE__*/_jsxDEV(TextArea, {\n rows: 4,\n placeholder: \"Enter or paste Text Entry\",\n style: {\n height: 40,\n resize: 'none'\n },\n onKeyDown: changeOnEnter\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 685,\n columnNumber: 17\n }, this)\n }, void 0, false), /*#__PURE__*/_jsxDEV(\"ul\", {\n children: fileContent.map((text, index) => {\n const maxIndexToShow = playLyricCount + 2 >= fileContent.length ? fileContent.length - 1 : playLyricCount + 2;\n const shouldShow = index >= playLyricCount && index <= maxIndexToShow;\n const isNearEnd = fileContent.length - playLyricCount <= 2;\n const startIndex = isNearEnd ? fileContent.length - 3 : playLyricCount;\n const showCondition = index >= startIndex && index <= startIndex + 2;\n return showCondition && /*#__PURE__*/_jsxDEV(\"li\", {\n className: playLyricCount === index ? 'highlighted' : '',\n children: text\n }, index, false, {\n fileName: _jsxFileName,\n lineNumber: 702,\n columnNumber: 21\n }, this);\n })\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 691,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 660,\n columnNumber: 11\n }, this);\n case 'Stair':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [/*#__PURE__*/_jsxDEV(Flex, {\n align: \"center\",\n gap: \"middle\",\n children: [MainButtons(), /*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: true,\n checkedChildren: \"show\",\n unCheckedChildren: \"hide\",\n onChange: onChangeStairSwitch\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 714,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 712,\n columnNumber: 13\n }, this), (() => {\n if (txtShow === 'true') {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n children: renderTruncatedFilenames(stairFilenames)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 720,\n columnNumber: 19\n }, this);\n }\n return null;\n })()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 711,\n columnNumber: 11\n }, this);\n case 'Heteronym':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [MainButtons(), (() => {\n if (txtShow === 'true') {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n children: renderTruncatedFilenames(heteronymFilenames)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 737,\n columnNumber: 19\n }, this);\n }\n return null;\n })()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 732,\n columnNumber: 11\n }, this);\n case 'Fixed':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [MainButtons(), /*#__PURE__*/_jsxDEV(\"ul\", {\n children: renderTruncatedFilenames(baseFilenames)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 751,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 749,\n columnNumber: 11\n }, this);\n default:\n return /*#__PURE__*/_jsxDEV(\"span\", {\n children: \"Canvas: Picture\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 757,\n columnNumber: 16\n }, this);\n }\n };\n useEffect(() => {\n if (component == \"ConstantTxt\" && fileContent.length === 0) {\n setShowNextPre(false);\n setShowListen(false);\n } else if (component == \"ConstantTxt\" && fileContent.length != 0) {\n setShowNextPre(true);\n setShowListen(false);\n } else if (component == \"Fixed\") {\n setShowNextPre(true);\n setShowListen(true);\n } else if (component == \"Stair\") {\n setShowNextPre(true);\n setShowListen(false);\n } else if (component == \"Heteronym\") {\n setShowNextPre(true);\n setShowListen(false);\n } else {\n setShowNextPre(true);\n setShowListen(false);\n }\n }, [component, fileContent]);\n\n // Options Changing functions\n const onChangeRange = rangeValue => {\n setInitialRange([rangeValue[0], rangeValue[1]]);\n };\n const onChangePosition = positionValue => {\n setBallPosition(positionValue);\n };\n const onChangeSpeed = speedValue => {\n const mappedValue = Math.round(speedValue * 20 + 4);\n setDivisor(mappedValue);\n };\n const onChangeHz = ({\n target: {\n value\n }\n }) => {\n console.log(value);\n if (value === 'hz') {\n setShowNotesPar(false);\n } else {\n setShowNotesPar(true);\n }\n };\n const EnableVoluneMode = e => {\n console.log(e);\n if (e) {\n setEnableVol(true);\n } else {\n setEnableVol(false);\n }\n };\n\n // Button functions\n const onChangePause = () => {\n setIsPlaying(!isPlaying);\n };\n const onChangePrevious = () => {\n const tem = playLyricCount;\n if (tem <= 0) {\n setPlayLyricCount(0);\n } else {\n setPlayLyricCount(tem - 1);\n }\n };\n const onChangeNext = () => {\n const tem = playLyricCount;\n console.log(playLyricCount);\n if (tem >= maxLyricCount) {\n setPlayLyricCount(maxLyricCount);\n } else {\n setPlayLyricCount(tem + 1);\n }\n };\n\n // tooltips\n const onChangeThreshold = e => {\n setThreshold(e);\n };\n const formatterdB = value => `${value} dB`;\n const formatterHz = value => `${value} Hz`;\n const formatterPos = value => `${value ? (value * 100).toFixed(0) : '0'}%`;\n return /*#__PURE__*/_jsxDEV(Row, {\n children: /*#__PURE__*/_jsxDEV(Col, {\n span: 24,\n children: /*#__PURE__*/_jsxDEV(Layout, {\n className: \"layoutSample\",\n children: /*#__PURE__*/_jsxDEV(Content, {\n children: [/*#__PURE__*/_jsxDEV(Flex, {\n align: \"center\",\n justify: \"center\",\n gap: \"middle\",\n vertical: true,\n children: [shortDescription(component), /*#__PURE__*/_jsxDEV(\"div\", {\n children: /*#__PURE__*/_jsxDEV(ConfigProvider, {\n theme: {\n token: {\n colorPrimary: \"rgb(132, 118, 171)\",\n borderRadius: 0\n }\n },\n children: /*#__PURE__*/_jsxDEV(Space, {\n size: \"middle\",\n children: /*#__PURE__*/_jsxDEV(Space.Compact, {\n children: [/*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n type: component === \"ConstantTxt\" ? \"primary\" : \"default\",\n onClick: handleStairAndConstantClick,\n children: \"CONSTANT\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 872,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 871,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n type: component === \"Stair\" ? \"primary\" : \"default\",\n onClick: handleStairAndConstantClick,\n children: \"STAIR\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 878,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 877,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n type: component === \"Heteronym\" ? \"primary\" : \"default\",\n onClick: handleStairAndConstantClick,\n children: \"HETERONYMS\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 884,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 883,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Dropdown, {\n menu: {\n items: itemsSyllable\n },\n placement: \"bottom\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n type: component === \"Fixed\" ? \"primary\" : \"default\",\n children: syllableCount === \"none\" ? 'HUMAN CURVE' : syllableCount + ' SYLLABLE'\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 890,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 889,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 869,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 868,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 859,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 858,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n width: \"100%\"\n },\n children: renderSelectedComponent()\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 901,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Flex, {\n vertical: true,\n justify: \"center\",\n wrap: \"wrap\",\n gap: \"small\",\n ref: ref2,\n children: renderSelectedComponentLyric()\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 906,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Setting\",\n children: /*#__PURE__*/_jsxDEV(FloatButton, {\n style: {\n width: 50,\n height: 50,\n right: 15,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n onClick: () => setOpenSetting(true),\n ref: ref3,\n icon: /*#__PURE__*/_jsxDEV(SettingOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 917,\n columnNumber: 74\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 910,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 909,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Tour\",\n children: /*#__PURE__*/_jsxDEV(FloatButton, {\n style: {\n width: 50,\n height: 50,\n right: 90,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n onClick: handleBeginTour,\n icon: /*#__PURE__*/_jsxDEV(QuestionOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 928,\n columnNumber: 52\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 921,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 920,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Image, {\n preview: false,\n src: divide_1,\n style: {\n width: '100%'\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 931,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(Typography, {\n style: {\n width: \"100%\",\n paddingLeft: \"30px\",\n paddingRight: \"40px\"\n },\n children: [/*#__PURE__*/_jsxDEV(Typography.Title, {\n id: \"part-1\",\n level: 2,\n style: {\n margin: 0\n },\n children: \"How to use\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 940,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Collapse, {\n defaultActiveKey: ['2'],\n ghost: true,\n items: items_3\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 943,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 936,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 849,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Modal, {\n title: \"Settings\",\n open: isModalOpen,\n className: \"AvatarModal\",\n onCancel: () => setIsModalOpen(false),\n footer: null,\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n textAlign: 'center'\n },\n children: [/*#__PURE__*/_jsxDEV(Avatar, {\n size: 64,\n icon: /*#__PURE__*/_jsxDEV(UserOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 955,\n columnNumber: 41\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 955,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"p\", {\n children: \"Jane Smith\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 956,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Menu, {\n disabledOverflow: true,\n onClick: onClickMenu,\n style: {\n justifyContent: \"center\"\n },\n mode: \"horizontal\",\n selectedKeys: [selectedItem],\n items: itemsMenu\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 958,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 954,\n columnNumber: 15\n }, this), renderContent()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 947,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Drawer, {\n title: \"Options\",\n placement: \"right\",\n onClose: () => setOpenSetting(false),\n open: openSetting,\n width: 430,\n children: /*#__PURE__*/_jsxDEV(Flex, {\n vertical: true,\n gap: \"middle\",\n children: [/*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Model Selection: \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 973,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Dropdown, {\n menu: {\n items: itemsAvatar,\n selectable: true\n },\n placement: \"bottom\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n children: genderName === \"none\" ? \"Model Voice\" : gender === \"Female\" ? genderName : 'Male01'\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 975,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 974,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 972,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Coordinate Display Mode\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 997,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Radio.Group, {\n onChange: onChangeHz,\n value: showNotesPar ? 'notes' : 'hz',\n defaultValue: \"notes\",\n buttonStyle: \"solid\",\n children: [/*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"hz\",\n children: \" Hz \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 999,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"notes\",\n children: \"Notes\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1000,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 998,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1002,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 996,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Display Range\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1006,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n range: true,\n step: 10,\n min: 50,\n max: 600,\n onChange: onChangeRange,\n tooltip: {\n formatter: formatterHz\n },\n marks: marksRange,\n defaultValue: [100, 300]\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1007,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1005,\n columnNumber: 17\n }, this), component !== \"Fixed\" && component !== \"Stair\" && component !== \"Heteronym\" && /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Indicator Horizontal Position\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1022,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.1,\n min: 0,\n max: 1,\n onChange: onChangePosition,\n tooltip: {\n formatter: formatterPos\n },\n defaultValue: 0.5,\n marks: marksBallPos\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1023,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1021,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Indicator Speed\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1038,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.05,\n min: 0,\n max: 1,\n onChange: onChangeSpeed,\n defaultValue: 0.3,\n tooltip: {\n formatter: null\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1039,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1037,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Auto-Start When Voice Detected\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1051,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: false,\n onChange: EnableVoluneMode\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1052,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1050,\n columnNumber: 19\n }, this), enableVol && /*#__PURE__*/_jsxDEV(Slider, {\n step: 1,\n min: 50,\n max: 90,\n onChange: onChangeThreshold,\n tooltip: {\n formatter: formatterdB\n },\n defaultValue: 70,\n marks: marksVol\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1056,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1049,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1070,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: onClose,\n children: \"Close\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1071,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 971,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 970,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Tour, {\n open: openTour,\n onClose: () => setOpenTour(false),\n steps: steps\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1074,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 847,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 845,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 844,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 843,\n columnNumber: 5\n }, this)\n\n // \n ;\n};\n_s(Sample, \"+9zO5kuGVbx0oqDXilnqHxToAMc=\", false, function () {\n return [useTemString, useLocation];\n});\n_c = Sample;\nexport default Sample;\nvar _c;\n$RefreshReg$(_c, \"Sample\");","map":{"version":3,"names":["React","useState","useEffect","useRef","Button","Flex","SettingOutlined","CustomerServiceOutlined","Col","Row","Tour","ConfigProvider","CaretRightOutlined","Slider","Input","Layout","Menu","Dropdown","Avatar","Drawer","Radio","RedoOutlined","PauseOutlined","StepForwardOutlined","StepBackwardOutlined","Tooltip","FloatButton","Space","Switch","Modal","ConstantTxt","Fixed","Stair","Heteronym","ReactAudioPlayer","UploadOutlined","message","Upload","hark","useLocation","Typography","Collapse","Image","divide_1","UserOutlined","QuestionOutlined","useTemString","pdfToText","jsxDEV","_jsxDEV","Fragment","_Fragment","TextArea","Title","Paragraph","Text","Link","Content","marksRange","marksBallPos","marksVol","itemsMenu","label","key","Sample","isModalOpen","setIsModalOpen","showModal","handleCancel","_s","items_3","stairFilenames","heteronymFilenames","shortDescription","size","initialRange","setInitialRange","config","setConfig","SRATE","fxmin","fxlow","fxhigh","fxmax","COLORS","realVoiceColor","targetVoiceColor","closeVoiceColor","openSetting","setOpenSetting","txtShow","setTxtShow","txtShowSwitch","setTxtShowSwitch","openTour","setOpenTour","isPlaying","setIsPlaying","isRetry","setIsRetry","isListen","setIsListen","enableVol","setEnableVol","isOpenTextbox","setIsOpenTextbox","showNextPre","setShowNextPre","showListen","setShowListen","location","ref1","ref2","ref3","parentRef","volume","setVolume","threshold","setThreshold","maxLyricCount","setMaxLyricCount","playLyricCount","setPlayLyricCount","divisor","setDivisor","ballPosition","setBallPosition","showNotesPar","setShowNotesPar","component","setComponent","currentSelection","setCurrentSelection","gender","setGender","genderName","setGenderName","syllableCount","setSyllableCount","baseFilenames","setBaseFilenames","fileContent","setFileContent","audioPlayer","audioSrcFromChild","setAudioSrcFromChild","selectedItem","setSelectedItem","setPlaying","setPlayingPause","handleBeginTour","onClickMenu","e","onClose","ClearTxt","renderContent","children","fileName","_jsxFileName","lineNumber","columnNumber","vertical","gap","Group","onChange","onChangeHz","defaultValue","buttonStyle","value","range","step","min","max","onChangeRange","tooltip","formatter","formatterHz","marks","onChangePosition","formatterPos","onChangeSpeed","defaultChecked","EnableVoluneMode","onChangeThreshold","formatterdB","onClick","handleTextInput","content","target","separators","splitContent","split","map","s","trim","filter","Boolean","console","log","length","props","name","accept","beforeUpload","file","type","error","then","text","catch","reader","FileReader","onload","_e$target","result","readAsText","info","status","success","changeOnEnter","shiftKey","handleAudioSrc","newAudioSrc","playAudio","current","audioEl","play","navigator","mediaDevices","getUserMedia","audio","video","stream","harkInstance","on","stop","steps","title","description","placement","cover","style","textAlign","queryParams","URLSearchParams","search","init","get","handleStairAndConstantClick","innerText","saveGender","genderType","genderNameType","handleMenuClick","componentType","syllableCountType","tt","renderTruncatedFilenames","filenames","index","isNearEnd","startIndex","showCondition","className","handlePlayLyricCountChange","newCount","itemsMale","itemsFemale","itemsAvatar","itemsSyllable","onChangeStairSwitch","renderSelectedComponent","ref","onAudioSrcChange","onPlayLyricCountChange","heteronymFile","MainButtons","justify","wrap","shape","icon","src","disabled","onChangePrevious","onChangePause","onChangeNext","renderSelectedComponentLyric","Compact","maxCount","rows","placeholder","height","resize","onKeyDown","maxIndexToShow","shouldShow","align","checkedChildren","unCheckedChildren","rangeValue","positionValue","speedValue","mappedValue","Math","round","tem","toFixed","span","theme","token","colorPrimary","borderRadius","menu","items","width","right","display","alignItems","justifyContent","preview","paddingLeft","paddingRight","id","level","margin","defaultActiveKey","ghost","open","onCancel","footer","disabledOverflow","mode","selectedKeys","selectable","_c","$RefreshReg$"],"sources":["D:/Project/UC_Trains_Voice/react-demo/src/Route/Sample.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\r\nimport { Button, Flex, } from 'antd';\r\nimport { SettingOutlined, CustomerServiceOutlined } from '@ant-design/icons';\r\nimport { Col, Row, Tour, ConfigProvider } from 'antd';\r\nimport { CaretRightOutlined } from '@ant-design/icons';\r\nimport { Slider, Input } from 'antd';\r\nimport { Breadcrumb, Layout, Menu, Dropdown, theme, Avatar } from 'antd';\r\nimport { Drawer, Cascader, Radio } from 'antd';\r\nimport { RedoOutlined, PauseOutlined, StepForwardOutlined, StepBackwardOutlined } from '@ant-design/icons';\r\nimport { Tooltip, FloatButton, Space, Switch } from 'antd';\r\nimport '../CSS/sample.css';\r\nimport { Modal } from 'antd';\r\nimport ConstantTxt from '../Canvas/ConstantTxt'\r\nimport Fixed from '../Canvas/Fixed'\r\nimport Stair from '../Canvas/Stair'\r\nimport Heteronym from '../Canvas/Heteronym'\r\nimport type { RadioChangeEvent } from 'antd';\r\nimport type { TourProps } from 'antd';\r\nimport ReactAudioPlayer from 'react-audio-player';\r\nimport type { SliderSingleProps } from 'antd';\r\nimport type { UploadProps } from 'antd';\r\nimport { UploadOutlined, ArrowLeftOutlined, RollbackOutlined } from '@ant-design/icons';\r\nimport { message, Upload } from 'antd';\r\nimport hark from 'hark';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { Typography } from 'antd';\r\nimport type { CollapseProps } from 'antd';\r\nimport { Collapse } from 'antd';\r\nimport { Image } from 'antd';\r\nimport divide_1 from '../icon/Divider2-half.png'\r\nimport { UserOutlined } from '@ant-design/icons';\r\nimport { QuestionOutlined } from '@ant-design/icons';\r\nimport { adjustCanvasScale, map, drawBackground, generateNotesAndFrequencies } from '../function/canvasDefault';\r\nimport { useTemString } from '../hooks/useTemString';\r\nimport { useCanvasHooks } from '../hooks/useCanvasHooks';\r\nimport type { MenuProps } from 'antd';\r\n// @ts-ignore\r\nimport pdfToText from 'react-pdftotext';\r\nimport useCanvasAdjustHeight from '../hooksUseEffect/useCanvasAdjustHeight';\r\n\r\nconst { TextArea } = Input;\r\nconst { Title, Paragraph, Text, Link } = Typography;\r\ntype MenuTheme = 'show' | 'hide';\r\n// const fontSizePara = 17;\r\n// const fontAlign = \"justify\";\r\n// const paragraphStyle:React.CSSProperties = {\r\n// textAlign: fontAlign, \r\n// fontSize: fontSizePara,\r\n// fontFamily: \"'Roboto', 'sans-serif'\",\r\n// };\r\n\r\n\r\nconst { Content } = Layout;\r\n\r\nconst marksRange: SliderSingleProps['marks'] = {\r\n 50: '50Hz',\r\n 600: '600Hz'\r\n};\r\n\r\nconst marksBallPos: SliderSingleProps['marks'] = {\r\n 0: '0%',\r\n 1: '100%'\r\n};\r\nconst marksVol: SliderSingleProps['marks'] = {\r\n 50: '50dB',\r\n 90: '90dB'\r\n};\r\n\r\nconst itemsMenu: MenuProps['items'] = [\r\n {\r\n label: 'Profile',\r\n key: 'Profile',\r\n },\r\n {\r\n label: 'Settings',\r\n key: 'Settings',\r\n },\r\n {\r\n label: 'Other',\r\n key: 'Other',\r\n },\r\n];\r\ninterface SampleProps {\r\n isModalOpen: boolean;\r\n showModal: () => void;\r\n handleCancel: () => void;\r\n setIsModalOpen: (boolean: boolean) => void;\r\n}\r\n\r\nconst Sample: React.FC = ({ isModalOpen, setIsModalOpen, showModal, handleCancel }) => {\r\n\r\n // strings\r\n const {\r\n items_3,\r\n stairFilenames,\r\n heteronymFilenames,\r\n shortDescription,\r\n } = useTemString();\r\n\r\n // Canvas values\r\n const size = [400, 1400];\r\n const [initialRange, setInitialRange] = useState([100, 300]);\r\n const [config, setConfig] = useState({\r\n SRATE: 48000,\r\n fxmin: 50,\r\n fxlow: 50 + 50, // This initial value will be updated by useEffect below\r\n fxhigh: 600 - 200, // This initial value will be updated by useEffect below\r\n fxmax: 600\r\n });\r\n const COLORS = {\r\n realVoiceColor: '#d679de', // red\r\n targetVoiceColor: '#4669C8', // blue\r\n closeVoiceColor: '#15dbcc', // yellow\r\n };\r\n\r\n // open/close \r\n const [openSetting, setOpenSetting] = useState(false);\r\n const [txtShow, setTxtShow] = useState(\"true\");\r\n const [txtShowSwitch, setTxtShowSwitch] = useState('show');\r\n const [openTour, setOpenTour] = useState(false);\r\n const [isPlaying, setIsPlaying] = useState(true);\r\n const [isRetry, setIsRetry] = useState(false);\r\n const [isListen, setIsListen] = useState(1);\r\n const [enableVol, setEnableVol] = useState(false);\r\n const [isOpenTextbox, setIsOpenTextbox] = useState(false);\r\n const [showNextPre, setShowNextPre] = useState(false);\r\n const [showListen, setShowListen] = useState(false);\r\n\r\n // special vatiables\r\n const location = useLocation();\r\n const ref1 = useRef(null);\r\n const ref2 = useRef(null);\r\n const ref3 = useRef(null);\r\n const parentRef = useRef(null);\r\n\r\n // initial Value\r\n const [volume, setVolume] = useState(0);\r\n const [threshold, setThreshold] = useState(70);\r\n const [maxLyricCount, setMaxLyricCount] = useState(2);\r\n const [playLyricCount, setPlayLyricCount] = useState(0);\r\n const [divisor, setDivisor] = useState(10);\r\n const [ballPosition, setBallPosition] = useState(0.5);\r\n\r\n // Hz/Notes\r\n const [showNotesPar, setShowNotesPar] = useState(false);\r\n\r\n // selected choice\r\n const [component, setComponent] = useState(\"ConstantTxt\");\r\n const [currentSelection, setCurrentSelection] = useState('Constant');\r\n const [gender, setGender] = useState(\"Female\");\r\n const [genderName, setGenderName] = useState(\"Fem01\");\r\n const [syllableCount, setSyllableCount] = useState(\"none\");\r\n const [baseFilenames, setBaseFilenames] = useState([]);\r\n const [fileContent, setFileContent] = useState([]);\r\n\r\n // auido\r\n const audioPlayer = useRef(null);\r\n const [audioSrcFromChild, setAudioSrcFromChild] = useState('');\r\n\r\n // profile (Need to rebuild)\r\n const [selectedItem, setSelectedItem] = useState('Settings');\r\n\r\n // \r\n const setPlaying = () => {\r\n setIsPlaying(true);\r\n };\r\n const setPlayingPause = () => {\r\n setIsPlaying(false);\r\n };\r\n const handleBeginTour = () => {\r\n setOpenTour(true);\r\n };\r\n const onClickMenu: MenuProps['onClick'] = (e) => {\r\n setSelectedItem(e.key);\r\n };\r\n const onClose = () => {\r\n setOpenSetting(false);\r\n };\r\n const ClearTxt = () => {\r\n setFileContent([]);\r\n setMaxLyricCount(1);\r\n };\r\n // render profile page\r\n const renderContent = () => {\r\n switch (selectedItem) {\r\n case 'Profile':\r\n return

profile

;\r\n case 'Settings':\r\n return (
\r\n \r\n \r\n

# Coordinate Display Mode

\r\n \r\n Hz \r\n Notes\r\n \r\n
\r\n \r\n\r\n
\r\n

# Pitch Display Range

\r\n \r\n
\r\n\r\n\r\n {component !== \"Fixed\" && component !== \"Stair\" && (\r\n
\r\n

# Pitch Indicator Horizontal Position

\r\n \r\n
\r\n )}\r\n\r\n {component !== \"Fixed\" && component !== \"Stair\" && component !== \"Heteronym\" && (\r\n
\r\n

# Pitch Indicator Horizontal Position

\r\n \r\n
\r\n )}\r\n\r\n
\r\n

# Pitch Indicator Speed

\r\n \r\n
\r\n\r\n
\r\n \r\n

# Auto-Start When Voice Detected

\r\n \r\n \r\n\r\n {enableVol &&\r\n \r\n }\r\n
\r\n\r\n
\r\n \r\n \r\n\r\n
)\r\n case 'Other':\r\n return

other

;\r\n default:\r\n return null;\r\n }\r\n };\r\n\r\n // Constant Page upload and input\r\n const handleTextInput = (e: React.ChangeEvent) => {\r\n const content = e.target.value as string;\r\n const separators = /[;,./\\n]/;\r\n const splitContent = content.split(separators)\r\n .map(s => s.trim())\r\n .filter(Boolean);\r\n console.log(splitContent);\r\n setFileContent(splitContent);\r\n setMaxLyricCount(splitContent.length - 1);\r\n setPlayLyricCount(0);\r\n }\r\n const props: UploadProps = {\r\n name: 'file',\r\n accept: '.txt, .pdf',\r\n beforeUpload: (file) => {\r\n if (file.type !== 'text/plain' && file.type !== 'application/pdf') {\r\n message.error(`${file.name} is not a valid text/pdf file.`);\r\n return false;\r\n }\r\n if (file.type === 'application/pdf') {\r\n pdfToText(file)\r\n .then((text: string) => {\r\n const separators = /[;,./\\n]/;\r\n const splitContent = text.split(separators)\r\n .map((s: string) => s.trim())\r\n .filter(Boolean);\r\n console.log(splitContent);\r\n setFileContent(splitContent);\r\n setMaxLyricCount(splitContent.length - 1);\r\n setPlayLyricCount(0);\r\n })\r\n .catch((error: any) => { // Explicitly specify the type of 'error' parameter as 'any'\r\n message.error('Error reading PDF file:', error);\r\n });\r\n return false;\r\n }\r\n if (file.type === 'text/plain') {\r\n const reader = new FileReader();\r\n reader.onload = (e: ProgressEvent) => {\r\n if (e.target?.result) {\r\n const content = e.target.result as string;\r\n // const separators = /[;,./]/;\r\n const separators = /[;,./\\n]/;\r\n const splitContent = content.split(separators)\r\n .map(s => s.trim())\r\n .filter(Boolean);\r\n console.log(splitContent);\r\n setFileContent(splitContent);\r\n setMaxLyricCount(splitContent.length - 1);\r\n setPlayLyricCount(0);\r\n }\r\n };\r\n\r\n reader.readAsText(file);\r\n\r\n return false;\r\n }\r\n },\r\n onChange(info) {\r\n if (info.file.status === 'done') {\r\n message.success(`${info.file.name} file read successfully`);\r\n } else if (info.file.status === 'error') {\r\n message.error(`${info.file.name} file read failed.`);\r\n }\r\n },\r\n };\r\n const changeOnEnter = (e: any) => {\r\n if (e.key === 'Enter' && !e.shiftKey) {\r\n console.log(\"Enter Key Pressed!\");\r\n handleTextInput(e);\r\n }\r\n }\r\n\r\n // audio\r\n const handleAudioSrc = (newAudioSrc: string) => {\r\n setAudioSrcFromChild(newAudioSrc);\r\n };\r\n const playAudio = () => {\r\n if (audioPlayer.current && audioPlayer.current.audioEl.current) {\r\n audioPlayer.current.audioEl.current.play()\r\n .then(() => {\r\n setIsListen(isListen + 1);\r\n })\r\n .catch(error => {\r\n console.error('Fail play audios: ', error);\r\n });\r\n }\r\n\r\n };\r\n\r\n // Volume\r\n useEffect(() => {\r\n navigator.mediaDevices.getUserMedia({ audio: true, video: false })\r\n .then(stream => {\r\n const harkInstance = hark(stream, {});\r\n\r\n harkInstance.on('volume_change', (volume, threshold) => {\r\n setVolume(volume);\r\n });\r\n\r\n return () => harkInstance.stop();\r\n })\r\n .catch(error => {\r\n console.error('Error accessing the microphone', error);\r\n });\r\n }, []);\r\n useEffect(() => {\r\n if (volume > threshold - 100 && enableVol) {\r\n setIsPlaying(true);\r\n }\r\n }, [volume]);\r\n\r\n // Tour\r\n const steps: TourProps['steps'] = [\r\n {\r\n title: 'Canvas Display',\r\n description: 'Visualize your voice pitch and target pitch curve in real-time.',\r\n placement: 'top',\r\n target: () => ref1.current,\r\n },\r\n {\r\n title: 'Function Buttons',\r\n cover: (\r\n
    \r\n
  • Start/Stop: Begin or stop recording.
    • \r\n
  • Retry: Clear display and restart.
    • \r\n
  • Upload txt/pdf File (optional): Upload text or pdf for you (in .txt/.pdf format) to read while recording.
    • \r\n
  • Previous Next (if text uploaded): Switch between lines of text.
    • \r\n
\r\n ),\r\n target: () => ref2.current,\r\n },\r\n {\r\n title: 'Slider',\r\n description: 'Use this slides to change the target pitch value that you want to aim for.',\r\n target: () => parentRef.current as HTMLDivElement,\r\n },\r\n {\r\n title: 'Options menu',\r\n description: 'Switch between different exercises and adjust settings such as the pitch display range.',\r\n target: () => ref3.current,\r\n },\r\n\r\n ];\r\n useEffect(() => {\r\n const queryParams = new URLSearchParams(location.search);\r\n const init = queryParams.get('init');\r\n if (init === 'true') {\r\n handleBeginTour();\r\n }\r\n }, [location]);\r\n\r\n // Options of different Exercise \r\n const handleStairAndConstantClick = (e: any) => {\r\n setPlayLyricCount(0);\r\n setCurrentSelection(e.target.innerText);\r\n console.log(e.target.innerText);\r\n if (e.target.innerText === \"Constant\" || e.target.innerText === \"CONSTANT\" ) {\r\n setComponent(\"ConstantTxt\");\r\n } else if (e.target.innerText === \"Stair\"|| e.target.innerText === \"STAIR\" ) {\r\n setComponent(\"Stair\");\r\n } else {\r\n setComponent(\"Heteronym\");\r\n }\r\n setSyllableCount(\"none\");\r\n }\r\n const saveGender = (e: any) => {\r\n const [genderType, genderNameType] = e.key.split('-');\r\n setGender(genderType);\r\n setGenderName(genderNameType);\r\n console.log(genderType);\r\n console.log('genderName', genderName)\r\n }\r\n const handleMenuClick = (e: any) => {\r\n setPlayLyricCount(0);\r\n const [componentType, genderType, syllableCountType] = e.key.split('-');\r\n if (componentType == \"Constant\") {\r\n setCurrentSelection(\"Constant\");\r\n } else if (componentType == \"ConstantTxt\") {\r\n setCurrentSelection(\"Constant\");\r\n } else if (componentType == \"Stair\") {\r\n setCurrentSelection(\"Staircase\");\r\n } else {\r\n let tt = \"Syllables \" + syllableCountType\r\n setCurrentSelection(tt);\r\n }\r\n\r\n setComponent(componentType);\r\n setGender(genderType);\r\n setSyllableCount(syllableCountType);\r\n\r\n setCurrentSelection(e.key + \"syllable \" + genderName);\r\n };\r\n const renderTruncatedFilenames = (filenames: string[]) => {\r\n return filenames.map((text, index) => {\r\n const isNearEnd = filenames.length - playLyricCount <= 2;\r\n const startIndex = isNearEnd ? filenames.length - 3 : playLyricCount;\r\n const showCondition = index >= startIndex && index <= startIndex + 2;\r\n return (\r\n showCondition && (\r\n
  • {text}
    • \r\n )\r\n );\r\n });\r\n };\r\n const handlePlayLyricCountChange = (newCount: number) => {\r\n setPlayLyricCount(newCount);\r\n };\r\n const itemsMale: MenuProps['items'] = [\r\n {\r\n key: 'male',\r\n label: \"Male01\",\r\n onClick: saveGender,\r\n },\r\n ];\r\n const itemsFemale: MenuProps['items'] = [\r\n {\r\n key: 'Female-Fem01',\r\n label: \"Fem01\",\r\n onClick: saveGender,\r\n },\r\n {\r\n key: 'Female-Fem02',\r\n label: \"Fem02\",\r\n onClick: saveGender,\r\n },\r\n {\r\n key: 'Female-Fem03',\r\n label: \"Fem03\",\r\n onClick: saveGender,\r\n },\r\n {\r\n key: 'Female-Fem04',\r\n label: \"Fem04\",\r\n onClick: saveGender,\r\n },\r\n {\r\n key: 'Female-Fem05',\r\n label: \"Fem05\",\r\n onClick: saveGender,\r\n },\r\n {\r\n key: 'Female-Fem06',\r\n label: \"Fem06\",\r\n onClick: saveGender,\r\n },\r\n {\r\n key: 'Female-Fem07',\r\n label: \"Fem07\",\r\n onClick: saveGender,\r\n },\r\n ];\r\n const itemsAvatar: MenuProps['items'] = [\r\n {\r\n key: '1',\r\n label: 'Male',\r\n children: [\r\n ...itemsMale\r\n ],\r\n },\r\n {\r\n key: '2',\r\n label: 'Female',\r\n children: [\r\n ...itemsFemale\r\n ],\r\n },\r\n ];\r\n\r\n /**\r\n * Defines the items for the syllable menu based on the gender.\r\n * If the gender is 'none', it only includes a single item prompting the user to select an avatar.\r\n * Otherwise, it includes multiple items representing the number of syllables, with corresponding click handlers.\r\n */\r\n const itemsSyllable: MenuProps['items'] = gender === 'none' ? [\r\n {\r\n key: 'SelectAvatar',\r\n label: 'Please select avatar',\r\n },\r\n ] : [\r\n {\r\n key: `Fixed-${gender}-2`,\r\n label: \"2 syllables\",\r\n onClick: handleMenuClick,\r\n },\r\n {\r\n key: `Fixed-${gender}-3`,\r\n label: \"3 syllables\",\r\n onClick: handleMenuClick,\r\n },\r\n {\r\n key: `Fixed-${gender}-4`,\r\n label: \"4 syllables\",\r\n onClick: handleMenuClick,\r\n },\r\n {\r\n key: `Fixed-${gender}-5`,\r\n label: \"5 syllables\",\r\n onClick: handleMenuClick,\r\n },\r\n ];\r\n const onChangeStairSwitch = (value: boolean) => {\r\n setTxtShowSwitch(value ? 'hide' : 'show');\r\n setTxtShow(value ? 'true' : 'false');\r\n };\r\n const renderSelectedComponent = (): React.ReactNode => {\r\n switch (component) {\r\n // case 'Constant':\r\n // return ;\r\n case 'ConstantTxt':\r\n return ;\r\n case 'Stair':\r\n return ;\r\n case 'Fixed':\r\n return ;\r\n case 'Heteronym':\r\n return ;\r\n default:\r\n return Canvas: Picture;\r\n }\r\n }\r\n const MainButtons = (): React.ReactNode => {\r\n return (\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n <>\r\n {isOpenTextbox && fileContent.length === 0 && (\r\n