{"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 } 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 Header,\n Content\n} = Layout;\nconst {\n Title,\n Paragraph,\n Text,\n Link\n} = Typography;\nconst highlightedStyle = {\n color: 'rgb(75, 216, 43)',\n fontSize: '25px'\n};\nconst style = {\n display: 'relative',\n height: 300\n};\nconst marksRange = {\n 50: '50Hz',\n 600: '600Hz'\n};\nconst marksBall = {\n 0: 'Slowest',\n 1: 'Fastest'\n};\nconst marksBallPos = {\n 0: '0%',\n 1: '100%'\n};\nconst marksVol = {\n 50: '50dB',\n 90: '90dB'\n};\nconst items_3 = [{\n key: 'part-3-1',\n label: /*#__PURE__*/_jsxDEV(Typography.Title, {\n id: \"part-3-1\",\n level: 4,\n style: {\n margin: 0\n },\n children: \"Setting\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 76,\n columnNumber: 12\n }, this),\n children: /*#__PURE__*/_jsxDEV(_Fragment, {\n children: [/*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"The possible settings are:\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 79,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(\"strong\", {\n children: \"Model selection\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 83,\n columnNumber: 18\n }, this), \": Lets you pick between several prerecorded voices to serve as a target \\\"avatar\\\". These are currently used only in the Syllables exercise.\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 83,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 82,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(\"strong\", {\n children: \"Exercise selection\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 86,\n columnNumber: 18\n }, this), \": Lets you pick between Constant, Stair, and Syllable exercises.\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 86,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 85,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(\"strong\", {\n children: \"Coordinate Display Mode\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 89,\n columnNumber: 18\n }, this), \": changes the pitch display between hertz and musical notes. You can also change this by clicking the vertical scale on the graph itself.\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 89,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 88,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(\"strong\", {\n children: \"Pitch display range\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 92,\n columnNumber: 18\n }, this), \": Changes the scale of the pitch graph. The blue part represents the current scale, and the white balls on the left and right can be dragged with your mouse to change the minimum or maximum of the scale. By default, it shows 100-300 Hz, but the maximum range is 50-600 Hz.\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 92,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 91,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(\"strong\", {\n children: \"Pitch Indicator position (Only appears in the Constant exercise)\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 95,\n columnNumber: 18\n }, this), \": Changes where the \\\"current pitch\\\" Pitch indicator appears in the graph.\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 95,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 94,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(\"strong\", {\n children: \"Pitch Indicator speed\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 98,\n columnNumber: 18\n }, this), \": Changes the speed with which the \\\"current pitch\\\" indicator ball moves across the screen.\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 98,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 97,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(\"strong\", {\n children: \"Auto-Start when Voice Detected\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 101,\n columnNumber: 18\n }, this), \": If this is enabled and the pitch module is paused, it will automatically start tracking pitch when the module detects sound on your microphone. If this is disabled, you must manually start it after pausing it.\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 101,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 100,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 81,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 80,\n columnNumber: 9\n }, this)]\n }, void 0, true)\n}, {\n key: 'part-3-2',\n label: /*#__PURE__*/_jsxDEV(Typography.Title, {\n id: \"part-3-2\",\n level: 4,\n style: {\n margin: 0\n },\n children: \"Constant xercise\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 110,\n columnNumber: 12\n }, this),\n children: /*#__PURE__*/_jsxDEV(_Fragment, {\n children: [/*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"The Constant exercise is the most basic exercise. When you talk, it shows your current pitch with a large black dot and the last few seconds of your pitch with small red dots. If you stop talking, the graph keeps moving but does not show new red dots.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 113,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"On the right side of the graph, you can see a vertical slider. Moving this slider up and down creates a constant pitch target that is shown as a horizontal dark blue line across the screen. You can try to match this target. If your pitch is close enough to the target, the target line changes from blue to yellow. You can change the target as you exercise if you want.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 116,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"If you want something to read while you practice matching a target pitch, you can use the Upload txt file button below the graph to upload a .txt file with text of your choosing. In the .txt file, a semicolon should indicate a new line . While reading, you can then move between lines using the Forward/Backward buttons underneath the text. Other file formats are not currently supported but are planned for future releases.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 119,\n columnNumber: 9\n }, this)]\n }, void 0, true)\n}, {\n key: 'part-3-3',\n label: /*#__PURE__*/_jsxDEV(Typography.Title, {\n id: \"part-3-3\",\n level: 4,\n style: {\n margin: 0\n },\n children: \"Stair Exercise\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 127,\n columnNumber: 12\n }, this),\n children: /*#__PURE__*/_jsxDEV(_Fragment, {\n children: [/*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"When you talk, the Staircase exercise shows your current pitch with a large black dot and the last few seconds of your pitch with small red dots. If you stop talking, the graph keeps moving but does not show new red dots. This is the same as in the Constant exercise.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 130,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"A dark blue line shows a sequence of pitches for you to match within a few seconds. You can change the location of these 'target' pitches using the light blue vertical slider to the right of the graph \\u2013 drag the bottom white ball up/down to move the lowest target or drag the top white ball to move the highest target.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 133,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"Pressing the Play button starts moving the current pitch indicator. Press it when you are ready to try matching the pitches. You can pause at any time, and once the indicator gets to the end, you can press Play again to restart. As you speak, the dark blue target pitch curve will change to yellow if your pitch is close to it.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 136,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"If you would like to have some sounds to make while matching the target pitches, the Show/Hide buttons below the graph display a 5-syllable phrase. The full phrase is shown below the Show/Hide buttons, and each individual syllable is shown on one of the target pitch lines. The Forward/Backward buttons let you move to the next/previous phrase, and the Retry button resets the current phrase. You don't have to use this function, it's just if you want to have something to say.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 139,\n columnNumber: 9\n }, this)]\n }, void 0, true)\n}, {\n key: 'part-3-4',\n label: /*#__PURE__*/_jsxDEV(Typography.Title, {\n id: \"part-3-4\",\n level: 4,\n style: {\n margin: 0\n },\n children: \"Syllables Exercise\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 147,\n columnNumber: 12\n }, this),\n children: /*#__PURE__*/_jsxDEV(_Fragment, {\n children: [/*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"To use the Syllables exercise, you must first select an avatar in the Options menu. Once you have done that, the Syllables exercise shows pitch curves from that recorded avatar while speaking 2-, 3-, 4-, or 5-syllable phrases in dark blue. As in the other two exercises, the graph shows your current pitch with a large black dot and the last few seconds of your pitch with small red dots. If you stop talking, the graph keeps moving but does not show new red dots.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 150,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"The goal of the exercise is to match the avatar's pitch curve as you say the same phrase. The target phrase is shown below the graph in green. Pressing the Play button starts moving the current pitch indicator. Press it when you are ready to try matching the curve. You can pause at any time, and once the indicator gets to the end, you can press Play again to restart the same phrase. As you speak, the dark blue target pitch curve will change to yellow if your pitch is close to it.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 153,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"Once the phrase finishes, you can press the Retry button to try matching it again, or press Forward/Backward to move to the next or previous phrase. The next two phrases are shown in grey below the current phrase.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 156,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"If you want to hear the phrase spoken by your selected avatar, press the Listen button. The dark blue curve will change to yellow as the phrase is played to indicate the timing.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 159,\n columnNumber: 9\n }, this)]\n }, void 0, true)\n}, {\n key: 'part-3-5',\n label: /*#__PURE__*/_jsxDEV(Typography.Title, {\n id: \"part-3-5\",\n level: 4,\n style: {\n margin: 0\n },\n children: \"Suggestions\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 167,\n columnNumber: 12\n }, this),\n children: /*#__PURE__*/_jsxDEV(_Fragment, {\n children: [/*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"If you have limited ability to control your pitch, we recommend starting with the Constant exercise. Measure your current pitch and set the target pitch (with the slider on the right) to somewhere above your regular pitch. The \\\"stereotypical\\\" value for female pitch is about 200 Hz. Make sustained sounds (for example, \\\"aaaaaaaaaaa\\\") and try to consistently match the target pitch. Once you can consistently match the target pitch with all five vowels (a, e, i, o, u), try speaking longer phrases at the target pitch.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 170,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"When you feel comfortable matching the target pitch in the Constant exercise for short periods of time, add the Staircase exercise to your practice rotation. You can start by hiding the target text and just matching the target pitches with a sustained vowel sound (for example, \\\"aaaaa\\\" moving up and down in pitch). Once you can do that with all five vowel sounds, turn the target text on and try speaking the phrases. Once you can do that, you may also try the Syllables exercise, though you do not necessarily need to do the Syllables exercise \\u2013 the Constant and Staircase will give you the fundamentals.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 173,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(Paragraph, {\n children: \"If this is all of your voice practice, do it for 10-15 minutes two times a day. It will help you learn pitch control, though you should keep in mind that pitch is not the only component of transgender voice. You will want to move on to other components of voice as well.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 176,\n columnNumber: 9\n }, this)]\n }, void 0, true)\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 const [open, setOpen] = useState(false);\n const [txtShow, setTxtShow] = useState(\"true\");\n const [txtShowSwitch, setTxtShowSwitch] = useState('show');\n const size = [400, 1400];\n const location = useLocation();\n const [initialRange, setInitialRange] = useState([100, 300]);\n // const [initialRange, setInitialRange] = useCookieState('initialRange',[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: '#00008B', // blue\n targetVoiceColor: '#4669C8',\n closeVoiceColor: '#15dbcc' // yellow\n // closeVoiceColor: '14DCCD',\n };\n const [maxLyricCount, setMaxLyricCount] = useState(2);\n const [isPlaying, setIsPlaying] = useState(true);\n const [isRetry, setIsRetry] = useState(false);\n const setPlaying = () => {\n setIsPlaying(true);\n };\n const setPlayingPause = () => {\n setIsPlaying(false);\n };\n const handleRetry = () => {\n setIsRetry(!isRetry);\n };\n const ref1 = useRef(null);\n const ref2 = useRef(null);\n const ref3 = useRef(null);\n const [volume, setVolume] = useState(0);\n const [divisor, setDivisor] = useState(10);\n const [openTour, setOpenTour] = useState(false);\n const [isFixed, setIsFixed] = useState(true);\n const [showNotesPar, setShowNotesPar] = useState(false);\n const [component, setComponent] = useState(\"ConstantTxt\");\n const [ballPosition, setBallPosition] = useState(0.5);\n const [currentSelection, setCurrentSelection] = useState('Constant'); //The initial state is empty\n const [enableVol, setEnableVol] = useState(false);\n const [playLyricCount, setPlayLyricCount] = useState(0);\n const [gender, setGender] = useState(\"none\");\n const [genderName, setGenderName] = useState(\"none\");\n const [syllableCount, setSyllableCount] = useState(\"none\");\n const [baseFilenames, setBaseFilenames] = useState([]);\n const {\n stairFilenames,\n heteronymFilenames\n } = useTemString();\n // tes A\n const [a, setA] = useState(0);\n const audioPlayer = useRef(null);\n const [isListen, setIsListen] = useState(1);\n const [inputValue, setInputValue] = useState('');\n const [threshold, setThreshold] = useState(70);\n const [displayText, setDisplayText] = useState('Input Txt');\n const [audioSrcFromChild, setAudioSrcFromChild] = useState('');\n const [fileContent, setFileContent] = useState([]);\n const [showNextPre, setShowNextPre] = useState(false);\n const [showListen, setShowListen] = useState(false);\n const [enablePre, setEnablePre] = useState(false);\n const [enableNext, setEnableNext] = useState(true);\n const [selectedItem, setSelectedItem] = useState('Settings');\n const parentRef = useRef(null);\n const [tooltipVisible, setTooltipVisible] = useState(false);\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: 290,\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: 297,\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: 299,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"notes\",\n children: \"Notes\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 300,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 298,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 302,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 296,\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: 306,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n range: true,\n step: 10,\n min: 50,\n max: 600,\n onChange: onChangeRange\n // tooltipPlacement={bottom}\n ,\n tooltip: {\n // placement: 'bottom',\n formatter: formatterHz\n // open: tooltipVisible,\n }\n // tooltip={{ formatter: formatterHz}}\n ,\n marks: marksRange,\n defaultValue: [100, 300]\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 307,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 305,\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: 327,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.1,\n min: 0,\n max: 1,\n onChange: onChangePosition\n // tooltip={{ formatter: formatterPos }}\n ,\n tooltip: {\n // placement: 'bottom',\n formatter: formatterPos\n // open: tooltipVisible,\n },\n defaultValue: 0.5,\n marks: marksBallPos\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 328,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 326,\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: 347,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.1,\n min: 0,\n max: 1,\n onChange: onChangePosition\n // tooltip={{ formatter: formatterPos }}\n ,\n tooltip: {\n // placement: 'bottom',\n formatter: formatterPos\n // open: tooltipVisible,\n },\n defaultValue: 0.5,\n marks: marksBallPos\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 348,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 346,\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: 366,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.05,\n min: 0,\n max: 1,\n onChange: onChangeSpeed\n // tooltip={{ formatter: formatterPos }}\n // tooltip={{\n // placement: 'bottom',\n // formatter: formatterPos,\n // open: tooltipVisible,\n // }}\n ,\n defaultValue: 0.3,\n tooltip: {\n formatter: null\n }\n // marks={marksBall}\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 367,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 365,\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: 386,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: false,\n onChange: EnableVoluneMode\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 387,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 385,\n columnNumber: 15\n }, this), enableVol && /*#__PURE__*/_jsxDEV(Slider, {\n step: 1,\n min: 50,\n max: 90,\n onChange: onChangeThreshold,\n tooltip: {\n // placement: 'bottom',\n formatter: formatterdB\n // open: tooltipVisible,\n },\n defaultValue: 70,\n marks: marksVol\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 391,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 384,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 408,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: onClose,\n children: \"Close\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 409,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 293,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 292,\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: 414,\n columnNumber: 16\n }, this);\n default:\n return null;\n }\n };\n const handleChangeInputDevice = value => {\n console.log(`selected ${value}`);\n };\n const onClickMenu = e => {\n setSelectedItem(e.key);\n };\n // const drawerRef = useRef(null);\n const handleAfterOpenChange = open => {\n if (open) {\n setTooltipVisible(true);\n scrollDrawerContent();\n } else {\n setTooltipVisible(false);\n }\n };\n const scrollDrawerContent = () => {\n const drawerElement = document.querySelector('.ant-drawer-body');\n const scrollOffset = 13;\n if (drawerElement) {\n drawerElement.scrollTop = scrollOffset;\n }\n };\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 handleBeginTour = () => {\n // Open the tour\n setOpenTour(true);\n window.scrollTo(0, 0);\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 const handleInputChange = e => {\n setInputValue(e.target.value);\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 const handleSubmit = () => {\n setDisplayText(inputValue);\n };\n const handleAudioSrc = newAudioSrc => {\n setAudioSrcFromChild(newAudioSrc);\n };\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 // description: 'Save your changes.',\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: 556,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Retry: Clear display and restart.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 557,\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: 558,\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: 559,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 555,\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 const saveGender = e => {\n const [genderType, genderNameType] = e.key.split('-');\n setGender(genderType);\n setGenderName(genderNameType);\n console.log('genderName', genderName);\n };\n const handleStairAndConstantClick = e => {\n setPlayLyricCount(0);\n setCurrentSelection(e.target.innerText);\n if (e.target.innerText === \"Constant\") {\n setComponent(\"ConstantTxt\");\n } else if (e.target.innerText === \"Stair\") {\n setComponent(\"Stair\");\n } else {\n setComponent(e.target.innerText);\n }\n setSyllableCount(\"none\");\n };\n const renderTruncatedFilenames = filenames => {\n return filenames.map((text, index) => {\n const maxIndexToShow = playLyricCount + 2 >= filenames.length ? filenames.length - 1 : playLyricCount + 2;\n const shouldShow = index >= playLyricCount && index <= maxIndexToShow;\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: 607,\n columnNumber: 11\n }, this);\n });\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 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 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 showDrawer = () => {\n setOpen(true);\n };\n\n // const onChangeStair = (e: RadioChangeEvent) => {\n // console.log(e.target.value);\n // setTxtShow(e.target.value);\n // };\n\n const onChangeStairSwitch = value => {\n setTxtShowSwitch(value ? 'hide' : 'show');\n setTxtShow(value ? 'true' : 'false');\n };\n\n // useEffect(() => {\n // setTxtShow(txtShowSwitch? 'true' : 'false');\n // },[txtShowSwitch]);\n\n const ClearTxt = () => {\n setFileContent([]);\n setMaxLyricCount(1);\n setInputValue(''); // Clear the input value as well\n };\n const onClose = () => {\n setOpen(false);\n };\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 // console.log('Volume:', volume, 'Threshold:', 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 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: 805,\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: 807,\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: 809,\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: 811,\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: 813,\n columnNumber: 16\n }, this);\n }\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: /*#__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: 828,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 827,\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: 833,\n columnNumber: 33\n }, this),\n children: \"Upload Text/pdf File\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 833,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 832,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 825,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 824,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(_Fragment, {\n children: fileContent.length === 0 && /*#__PURE__*/_jsxDEV(TextArea, {\n rows: 4,\n placeholder: \"Enter Text Entry (optional}\",\n style: {\n height: 120,\n resize: 'none'\n },\n onKeyDown: changeOnEnter\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 840,\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: 854,\n columnNumber: 21\n }, this);\n })\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 843,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 822,\n columnNumber: 11\n }, this);\n case 'Stair':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [/*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: true,\n checkedChildren: \"show\",\n unCheckedChildren: \"hide\",\n onChange: onChangeStairSwitch\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 865,\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: 874,\n columnNumber: 19\n }, this);\n }\n return null;\n })()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 863,\n columnNumber: 11\n }, this);\n case 'Heteronym':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [/*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: true,\n checkedChildren: \"show\",\n unCheckedChildren: \"hide\",\n onChange: onChangeStairSwitch\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 887,\n columnNumber: 13\n }, this), (() => {\n if (txtShow === 'true') {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n children: renderTruncatedFilenames(heteronymFilenames)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 896,\n columnNumber: 19\n }, this);\n }\n return null;\n })()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 886,\n columnNumber: 11\n }, this);\n case 'Fixed':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: renderTruncatedFilenames(baseFilenames)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 909,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 908,\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: 915,\n columnNumber: 16\n }, this);\n }\n };\n const handleCancelModal = () => {\n setIsModalOpen(false);\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 const onChangeRange = rangeValue => {\n console.log(rangeValue[1]);\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 // Pause function\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 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 const formatterSpd = value => {\n if (value === undefined) {\n return '0';\n }\n const mappedValue = (value - 5) * (50 / 15);\n return `${mappedValue.toFixed(0)}`;\n };\n return /*#__PURE__*/_jsxDEV(Row, {\n children: /*#__PURE__*/_jsxDEV(Col, {\n span: 24,\n children: /*#__PURE__*/_jsxDEV(Layout, {\n className: \"layout\",\n children: /*#__PURE__*/_jsxDEV(Content, {\n children: [/*#__PURE__*/_jsxDEV(Flex, {\n style: {\n maxWidth: \"100vw\"\n },\n align: \"center\",\n justify: \"center\",\n gap: \"middle\",\n vertical: true,\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"currentSelection blueFont\",\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [currentSelection, \" Exercise\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1025,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1024,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: renderSelectedComponent()\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1027,\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(), /*#__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: handleRetry,\n shape: \"circle\",\n icon: /*#__PURE__*/_jsxDEV(RedoOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1039,\n columnNumber: 72\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1039,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1038,\n columnNumber: 19\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: 1041,\n columnNumber: 19\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: 1048,\n columnNumber: 105\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1048,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1047,\n columnNumber: 21\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: 1055,\n columnNumber: 79\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1055,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1054,\n columnNumber: 21\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: 1059,\n columnNumber: 86\n }, this) : /*#__PURE__*/_jsxDEV(CaretRightOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1059,\n columnNumber: 106\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1059,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1058,\n columnNumber: 19\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: 1064,\n columnNumber: 75\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1064,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1063,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1036,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1033,\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: showDrawer,\n ref: ref3,\n icon: /*#__PURE__*/_jsxDEV(SettingOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1079,\n columnNumber: 58\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1072,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1071,\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 ref: ref3,\n icon: /*#__PURE__*/_jsxDEV(QuestionOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1090,\n columnNumber: 63\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1083,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1082,\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: 1094,\n columnNumber: 15\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: 1105,\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: 1108,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1100,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1023,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Modal, {\n title: \"Settings\",\n open: isModalOpen,\n className: \"AvatarModal\",\n onCancel: handleCancelModal,\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: 1122,\n columnNumber: 41\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1122,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"p\", {\n children: \"Jane Smith\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1123,\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: 1125,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1121,\n columnNumber: 15\n }, this), renderContent()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1114,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Drawer, {\n title: \"Options\",\n placement: \"right\",\n onClose: onClose,\n open: open,\n afterOpenChange: handleAfterOpenChange,\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: 1140,\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: 1142,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1141,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1139,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Exercise Selection: \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1147,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1146,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(Button, {\n onClick: handleStairAndConstantClick,\n children: \"Constant\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1151,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: handleStairAndConstantClick,\n children: \"Stair\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1153,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: handleStairAndConstantClick,\n children: \" Heteronym \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1155,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Dropdown, {\n menu: {\n items: itemsSyllable\n },\n placement: \"bottom\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n children: syllableCount === \"none\" ? 'Human Curve' : syllableCount + ' syllable'\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1158,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1157,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1149,\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: 1164,\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: 1166,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"notes\",\n children: \"Notes\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1167,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1165,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1169,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1163,\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: 1173,\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: 1174,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1172,\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: 1189,\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: 1190,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1188,\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: 1205,\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: 1206,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1204,\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: 1218,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: false,\n onChange: EnableVoluneMode\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1219,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1217,\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: 1223,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1216,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1237,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: onClose,\n children: \"Close\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1238,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1138,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1137,\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: 1241,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1021,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1019,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1018,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1017,\n columnNumber: 5\n }, this)\n\n // \n ;\n};\n_s(Sample, \"Semkbqw3pPfEayStg5ePtUH77ZM=\", false, function () {\n return [useLocation, useTemString];\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","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","Header","Content","Title","Paragraph","Text","Link","highlightedStyle","color","fontSize","style","display","height","marksRange","marksBall","marksBallPos","marksVol","items_3","key","label","id","level","margin","children","fileName","_jsxFileName","lineNumber","columnNumber","itemsMenu","Sample","isModalOpen","setIsModalOpen","showModal","handleCancel","_s","open","setOpen","txtShow","setTxtShow","txtShowSwitch","setTxtShowSwitch","size","location","initialRange","setInitialRange","config","setConfig","SRATE","fxmin","fxlow","fxhigh","fxmax","COLORS","realVoiceColor","targetVoiceColor","closeVoiceColor","maxLyricCount","setMaxLyricCount","isPlaying","setIsPlaying","isRetry","setIsRetry","setPlaying","setPlayingPause","handleRetry","ref1","ref2","ref3","volume","setVolume","divisor","setDivisor","openTour","setOpenTour","isFixed","setIsFixed","showNotesPar","setShowNotesPar","component","setComponent","ballPosition","setBallPosition","currentSelection","setCurrentSelection","enableVol","setEnableVol","playLyricCount","setPlayLyricCount","gender","setGender","genderName","setGenderName","syllableCount","setSyllableCount","baseFilenames","setBaseFilenames","stairFilenames","heteronymFilenames","a","setA","audioPlayer","isListen","setIsListen","inputValue","setInputValue","threshold","setThreshold","displayText","setDisplayText","audioSrcFromChild","setAudioSrcFromChild","fileContent","setFileContent","showNextPre","setShowNextPre","showListen","setShowListen","enablePre","setEnablePre","enableNext","setEnableNext","selectedItem","setSelectedItem","parentRef","tooltipVisible","setTooltipVisible","renderContent","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","onClose","handleChangeInputDevice","console","log","onClickMenu","e","handleAfterOpenChange","scrollDrawerContent","drawerElement","document","querySelector","scrollOffset","scrollTop","handleTextInput","content","target","separators","splitContent","split","map","s","trim","filter","Boolean","length","handleBeginTour","window","scrollTo","queryParams","URLSearchParams","search","init","get","handleInputChange","props","name","accept","beforeUpload","file","type","error","then","text","catch","reader","FileReader","onload","_e$target","result","readAsText","info","status","success","changeOnEnter","shiftKey","handleSubmit","handleAudioSrc","newAudioSrc","steps","title","description","placement","current","cover","textAlign","saveGender","genderType","genderNameType","handleStairAndConstantClick","innerText","renderTruncatedFilenames","filenames","index","maxIndexToShow","shouldShow","isNearEnd","startIndex","showCondition","className","handleMenuClick","componentType","syllableCountType","tt","playAudio","audioEl","play","handlePlayLyricCountChange","newCount","itemsMale","itemsFemale","itemsAvatar","itemsSyllable","showDrawer","onChangeStairSwitch","ClearTxt","navigator","mediaDevices","getUserMedia","audio","video","stream","harkInstance","on","stop","renderSelectedComponent","ref","onAudioSrcChange","onPlayLyricCountChange","heteronymFile","renderSelectedComponentLyric","Compact","maxCount","icon","rows","placeholder","resize","onKeyDown","checkedChildren","unCheckedChildren","handleCancelModal","rangeValue","positionValue","speedValue","mappedValue","Math","round","onChangePause","onChangePrevious","tem","onChangeNext","toFixed","formatterSpd","undefined","span","maxWidth","align","justify","wrap","shape","src","disabled","width","right","alignItems","justifyContent","preview","paddingLeft","paddingRight","defaultActiveKey","ghost","items","onCancel","footer","disabledOverflow","mode","selectedKeys","afterOpenChange","menu","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, Segmented } from 'antd';\r\nimport { SettingOutlined, CustomerServiceOutlined } from '@ant-design/icons';\r\nimport { Col, Row, Tour } 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 type { MenuProps } from 'antd';\r\n// @ts-ignore\r\nimport pdfToText from 'react-pdftotext';\r\nimport useCanvasAdjustHeight from '../hooksUseEffect/useCanvasAdjustHeight';\r\n\r\n\r\nconst { TextArea } = Input;\r\n\r\ntype MenuTheme = 'show' | 'hide'\r\n\r\n\r\nconst { Header, Content } = Layout;\r\nconst { Title, Paragraph, Text, Link } = Typography;\r\n\r\nconst highlightedStyle = {\r\n color: 'rgb(75, 216, 43)',\r\n fontSize: '25px'\r\n};\r\nconst style: React.CSSProperties = {\r\n display: 'relative',\r\n height: 300,\r\n};\r\nconst marksRange: SliderSingleProps['marks'] = {\r\n 50: '50Hz',\r\n 600: '600Hz'\r\n};\r\nconst marksBall: SliderSingleProps['marks'] = {\r\n 0: 'Slowest',\r\n 1: 'Fastest'\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\nconst items_3: CollapseProps['items'] = [\r\n {\r\n key: 'part-3-1',\r\n label: Setting,\r\n children: (\r\n <>\r\n The possible settings are:\r\n \r\n
    \r\n
  • \r\n

    Model selection: Lets you pick between several prerecorded voices to serve as a target \"avatar\". These are currently used only in the Syllables exercise.

    \r\n
    • \r\n
  • \r\n

    Exercise selection: Lets you pick between Constant, Stair, and Syllable exercises.

    \r\n
    • \r\n
  • \r\n

    Coordinate Display Mode: changes the pitch display between hertz and musical notes. You can also change this by clicking the vertical scale on the graph itself.

    \r\n
    • \r\n
  • \r\n

    Pitch display range: Changes the scale of the pitch graph. The blue part represents the current scale, and the white balls on the left and right can be dragged with your mouse to change the minimum or maximum of the scale. By default, it shows 100-300 Hz, but the maximum range is 50-600 Hz.

    \r\n
    • \r\n
  • \r\n

    Pitch Indicator position (Only appears in the Constant exercise): Changes where the \"current pitch\" Pitch indicator appears in the graph.

    \r\n
    • \r\n
  • \r\n

    Pitch Indicator speed: Changes the speed with which the \"current pitch\" indicator ball moves across the screen.

    \r\n
    • \r\n
  • \r\n

    Auto-Start when Voice Detected: If this is enabled and the pitch module is paused, it will automatically start tracking pitch when the module detects sound on your microphone. If this is disabled, you must manually start it after pausing it.

    \r\n
    • \r\n
\r\n \r\n \r\n ),\r\n },\r\n {\r\n key: 'part-3-2',\r\n label: Constant xercise,\r\n children: (\r\n <>\r\n \r\n The Constant exercise is the most basic exercise. When you talk, it shows your current pitch with a large black dot and the last few seconds of your pitch with small red dots. If you stop talking, the graph keeps moving but does not show new red dots.\r\n \r\n \r\n On the right side of the graph, you can see a vertical slider. Moving this slider up and down creates a constant pitch target that is shown as a horizontal dark blue line across the screen. You can try to match this target. If your pitch is close enough to the target, the target line changes from blue to yellow. You can change the target as you exercise if you want.\r\n \r\n \r\n If you want something to read while you practice matching a target pitch, you can use the Upload txt file button below the graph to upload a .txt file with text of your choosing. In the .txt file, a semicolon should indicate a new line . While reading, you can then move between lines using the Forward/Backward buttons underneath the text. Other file formats are not currently supported but are planned for future releases.\r\n \r\n \r\n ),\r\n },\r\n {\r\n key: 'part-3-3',\r\n label: Stair Exercise,\r\n children: (\r\n <>\r\n \r\n When you talk, the Staircase exercise shows your current pitch with a large black dot and the last few seconds of your pitch with small red dots. If you stop talking, the graph keeps moving but does not show new red dots. This is the same as in the Constant exercise.\r\n \r\n \r\n A dark blue line shows a sequence of pitches for you to match within a few seconds. You can change the location of these 'target' pitches using the light blue vertical slider to the right of the graph – drag the bottom white ball up/down to move the lowest target or drag the top white ball to move the highest target.\r\n \r\n \r\n Pressing the Play button starts moving the current pitch indicator. Press it when you are ready to try matching the pitches. You can pause at any time, and once the indicator gets to the end, you can press Play again to restart. As you speak, the dark blue target pitch curve will change to yellow if your pitch is close to it.\r\n \r\n \r\n If you would like to have some sounds to make while matching the target pitches, the Show/Hide buttons below the graph display a 5-syllable phrase. The full phrase is shown below the Show/Hide buttons, and each individual syllable is shown on one of the target pitch lines. The Forward/Backward buttons let you move to the next/previous phrase, and the Retry button resets the current phrase. You don't have to use this function, it's just if you want to have something to say.\r\n \r\n \r\n ),\r\n },\r\n {\r\n key: 'part-3-4',\r\n label: Syllables Exercise,\r\n children: (\r\n <>\r\n \r\n To use the Syllables exercise, you must first select an avatar in the Options menu. Once you have done that, the Syllables exercise shows pitch curves from that recorded avatar while speaking 2-, 3-, 4-, or 5-syllable phrases in dark blue. As in the other two exercises, the graph shows your current pitch with a large black dot and the last few seconds of your pitch with small red dots. If you stop talking, the graph keeps moving but does not show new red dots.\r\n \r\n \r\n The goal of the exercise is to match the avatar's pitch curve as you say the same phrase. The target phrase is shown below the graph in green. Pressing the Play button starts moving the current pitch indicator. Press it when you are ready to try matching the curve. You can pause at any time, and once the indicator gets to the end, you can press Play again to restart the same phrase. As you speak, the dark blue target pitch curve will change to yellow if your pitch is close to it.\r\n \r\n \r\n Once the phrase finishes, you can press the Retry button to try matching it again, or press Forward/Backward to move to the next or previous phrase. The next two phrases are shown in grey below the current phrase.\r\n \r\n \r\n If you want to hear the phrase spoken by your selected avatar, press the Listen button. The dark blue curve will change to yellow as the phrase is played to indicate the timing.\r\n \r\n \r\n ),\r\n },\r\n {\r\n key: 'part-3-5',\r\n label: Suggestions,\r\n children: (\r\n <>\r\n \r\n If you have limited ability to control your pitch, we recommend starting with the Constant exercise. Measure your current pitch and set the target pitch (with the slider on the right) to somewhere above your regular pitch. The \"stereotypical\" value for female pitch is about 200 Hz. Make sustained sounds (for example, \"aaaaaaaaaaa\") and try to consistently match the target pitch. Once you can consistently match the target pitch with all five vowels (a, e, i, o, u), try speaking longer phrases at the target pitch.\r\n \r\n \r\n When you feel comfortable matching the target pitch in the Constant exercise for short periods of time, add the Staircase exercise to your practice rotation. You can start by hiding the target text and just matching the target pitches with a sustained vowel sound (for example, \"aaaaa\" moving up and down in pitch). Once you can do that with all five vowel sounds, turn the target text on and try speaking the phrases. Once you can do that, you may also try the Syllables exercise, though you do not necessarily need to do the Syllables exercise – the Constant and Staircase will give you the fundamentals.\r\n \r\n \r\n If this is all of your voice practice, do it for 10-15 minutes two times a day. It will help you learn pitch control, though you should keep in mind that pitch is not the only component of transgender voice. You will want to move on to other components of voice as well.\r\n \r\n \r\n ),\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\ntype MenuItem = Required['items'][number];\r\n\r\n\r\nconst Sample: React.FC = ({ isModalOpen, setIsModalOpen, showModal, handleCancel }) => {\r\n const [open, setOpen] = useState(false);\r\n const [txtShow, setTxtShow] = useState(\"true\");\r\n const [txtShowSwitch, setTxtShowSwitch] = useState('show');\r\n const size = [400, 1400];\r\n const location = useLocation();\r\n const [initialRange, setInitialRange] = useState([100, 300]);\r\n // const [initialRange, setInitialRange] = useCookieState('initialRange',[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: '#00008B', // blue\r\n targetVoiceColor: '#4669C8',\r\n closeVoiceColor: '#15dbcc', // yellow\r\n // closeVoiceColor: '14DCCD',\r\n };\r\n\r\n const [maxLyricCount, setMaxLyricCount] = useState(2);\r\n const [isPlaying, setIsPlaying] = useState(true);\r\n const [isRetry, setIsRetry] = useState(false);\r\n const setPlaying = () => {\r\n setIsPlaying(true);\r\n };\r\n const setPlayingPause = () => {\r\n setIsPlaying(false);\r\n };\r\n const handleRetry = () => {\r\n setIsRetry(!isRetry);\r\n };\r\n\r\n const ref1 = useRef(null);\r\n const ref2 = useRef(null);\r\n\r\n const ref3 = useRef(null);\r\n const [volume, setVolume] = useState(0);\r\n const [divisor, setDivisor] = useState(10);\r\n const [openTour, setOpenTour] = useState(false);\r\n const [isFixed, setIsFixed] = useState(true);\r\n const [showNotesPar, setShowNotesPar] = useState(false);\r\n const [component, setComponent] = useState(\"ConstantTxt\");\r\n const [ballPosition, setBallPosition] = useState(0.5);\r\n const [currentSelection, setCurrentSelection] = useState('Constant'); //The initial state is empty\r\n const [enableVol, setEnableVol] = useState(false);\r\n const [playLyricCount, setPlayLyricCount] = useState(0);\r\n const [gender, setGender] = useState(\"none\");\r\n const [genderName, setGenderName] = useState(\"none\");\r\n const [syllableCount, setSyllableCount] = useState(\"none\");\r\n const [baseFilenames, setBaseFilenames] = useState([]);\r\n\r\n const {\r\n stairFilenames,\r\n heteronymFilenames,\r\n } = useTemString();\r\n // tes A\r\n const [a, setA] = useState(0);\r\n\r\n const audioPlayer = useRef(null);\r\n const [isListen, setIsListen] = useState(1);\r\n const [inputValue, setInputValue] = useState('');\r\n const [threshold, setThreshold] = useState(70);\r\n const [displayText, setDisplayText] = useState('Input Txt');\r\n const [audioSrcFromChild, setAudioSrcFromChild] = useState('');\r\n const [fileContent, setFileContent] = useState([]);\r\n const [showNextPre, setShowNextPre] = useState(false);\r\n const [showListen, setShowListen] = useState(false);\r\n const [enablePre, setEnablePre] = useState(false);\r\n const [enableNext, setEnableNext] = useState(true);\r\n const [selectedItem, setSelectedItem] = useState('Settings');\r\n\r\n\r\n const parentRef = useRef(null);\r\n\r\n const [tooltipVisible, setTooltipVisible] = useState(false);\r\n\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\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 const handleChangeInputDevice = (value: string) => {\r\n console.log(`selected ${value}`);\r\n };\r\n\r\n const onClickMenu: MenuProps['onClick'] = (e) => {\r\n setSelectedItem(e.key);\r\n };\r\n // const drawerRef = useRef(null);\r\n const handleAfterOpenChange = (open: boolean) => {\r\n if (open) {\r\n setTooltipVisible(true);\r\n scrollDrawerContent();\r\n } else {\r\n setTooltipVisible(false);\r\n }\r\n };\r\n const scrollDrawerContent = () => {\r\n const drawerElement = document.querySelector('.ant-drawer-body');\r\n const scrollOffset = 13;\r\n\r\n if (drawerElement) {\r\n drawerElement.scrollTop = scrollOffset;\r\n }\r\n };\r\n\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 handleBeginTour = () => {\r\n // Open the tour\r\n setOpenTour(true);\r\n window.scrollTo(0, 0);\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\r\n\r\n const handleInputChange = (e: React.ChangeEvent) => {\r\n setInputValue(e.target.value);\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\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 const handleSubmit = () => {\r\n setDisplayText(inputValue);\r\n };\r\n\r\n const handleAudioSrc = (newAudioSrc: string) => {\r\n setAudioSrcFromChild(newAudioSrc);\r\n };\r\n\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 // description: 'Save your changes.',\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\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('genderName', genderName)\r\n }\r\n const handleStairAndConstantClick = (e: any) => {\r\n setPlayLyricCount(0);\r\n setCurrentSelection(e.target.innerText);\r\n if (e.target.innerText === \"Constant\") {\r\n setComponent(\"ConstantTxt\");\r\n } else if (e.target.innerText === \"Stair\") {\r\n setComponent(\"Stair\");\r\n } else {\r\n setComponent(e.target.innerText);\r\n }\r\n\r\n setSyllableCount(\"none\");\r\n }\r\n const renderTruncatedFilenames = (filenames: string[]) => {\r\n return filenames.map((text, index) => {\r\n const maxIndexToShow = playLyricCount + 2 >= filenames.length ? filenames.length - 1 : playLyricCount + 2;\r\n const shouldShow = index >= playLyricCount && index <= maxIndexToShow;\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\r\n return (\r\n showCondition && (\r\n
  • {text}
    • \r\n )\r\n );\r\n });\r\n };\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\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 const handlePlayLyricCountChange = (newCount: number) => {\r\n setPlayLyricCount(newCount);\r\n };\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\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\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\r\n const showDrawer = () => {\r\n setOpen(true);\r\n };\r\n\r\n\r\n // const onChangeStair = (e: RadioChangeEvent) => {\r\n // console.log(e.target.value);\r\n // setTxtShow(e.target.value);\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\r\n // useEffect(() => {\r\n // setTxtShow(txtShowSwitch? 'true' : 'false');\r\n // },[txtShowSwitch]);\r\n\r\n const ClearTxt = () => {\r\n setFileContent([]);\r\n setMaxLyricCount(1);\r\n setInputValue(''); // Clear the input value as well\r\n };\r\n const onClose = () => {\r\n setOpen(false);\r\n };\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 // console.log('Volume:', volume, 'Threshold:', 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\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 const renderSelectedComponent = (): React.ReactNode => {\r\n\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\r\n const renderSelectedComponentLyric = (): React.ReactNode => {\r\n switch (component) {\r\n\r\n case 'ConstantTxt':\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 {fileContent.length === 0 && (\r\n