{"ast":null,"code":"var _jsxFileName = \"/var/www/gavt/src/Route/SampleVolume.tsx\",\n _s = $RefreshSig$();\nimport React, { useState, useEffect, useRef } from 'react';\nimport { Button, Flex } from 'antd';\nimport { SettingOutlined } from '@ant-design/icons';\nimport { Col, Row, ConfigProvider } from 'antd';\nimport { CaretRightOutlined } from '@ant-design/icons';\nimport { Slider, Input } from 'antd';\nimport { Layout } 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 { 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 { Image } from 'antd';\nimport divide_1 from '../icon/Divider2-half.png';\nimport { QuestionOutlined } from '@ant-design/icons';\nimport { useTemString } from '../hooks/useTemString';\n// @ts-ignore\nimport pdfToText from 'react-pdftotext';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport ConstantVol from '../Canvas/ConstantVol';\nimport HeteronymVol from '../Canvas/HeteronymVol';\nimport StairVol from '../Canvas/StairVol';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nconst PlayIcon = createFromIconfontCN({\n scriptUrl: '//at.alicdn.com/t/c/font_4566050_zpduwnlv2t.js'\n});\nconst {\n TextArea\n} = Input;\nconst {\n Title,\n Paragraph,\n Text,\n Link\n} = Typography;\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 SampleVolume = ({\n genderName,\n gender,\n setGender,\n audioKey,\n audioSrc,\n fetchAudioData,\n handleIconClick,\n itemsAvatar\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, setCOLORS] = useState({\n realVoiceColor: '#d679de',\n targetVoiceColor: '#4669C8',\n closeVoiceColor: '#15dbcc'\n });\n const [COLORSMode, setCOLORSMode] = useState(\"de\");\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 [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 ref12 = useRef(null);\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 [syllableCount, setSyllableCount] = useState(\"none\");\n const [baseFilenames, setBaseFilenames] = useState([]);\n const [fileContent, setFileContent] = useState([]);\n const [selectedNum, setSelectedNum] = useState([\"2\"]);\n\n // \n\n const setPlaying = () => {\n setIsPlaying(true);\n };\n const setPlayingPause = () => {\n setIsPlaying(false);\n };\n const handleBeginTour = () => {\n setOpenTour(true);\n window.scrollTo(0, 0);\n };\n const onClose = () => {\n setOpenSetting(false);\n };\n const ClearTxt = () => {\n setFileContent([]);\n setMaxLyricCount(1);\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 const [historyMode, setHistoryMode] = useState(\"Mixed\");\n const [currentColorScheme, setCurrentColorScheme] = useState(\"blue\");\n const [LAMP_COLORS, setLAMP_COLORS] = useState(['rgb(3, 4, 242)',\n // low\n 'rgb(106, 0, 147)',\n // mid\n 'rgb(221, 0, 34)' // high\n ]);\n\n const LAMP_COLORSBLUE = ['rgb(3, 4, 242)',\n // low\n 'rgb(106, 0, 147)',\n // mid\n 'rgb(221, 0, 34)' // high\n ];\n\n const LAMP_COLORSGREEN = ['rgb(98, 187, 70)',\n // low\n 'rgb(255, 194, 14)',\n // mid\n 'rgb(241, 91, 64)' // high\n ];\n\n useEffect(() => {\n if (currentColorScheme === \"blue\") {\n setLAMP_COLORS(LAMP_COLORSBLUE);\n } else {\n setLAMP_COLORS(LAMP_COLORSGREEN);\n }\n }, [currentColorScheme]);\n const getLampColor = vol => {\n let temvol = vol + 130;\n if (temvol <= 50) return LAMP_COLORS[0];\n if (temvol <= 80) return LAMP_COLORS[1];\n return LAMP_COLORS[2];\n };\n const lampStyle = color => ({\n backgroundColor: color,\n opacity: color === getLampColor(volume) ? 1 : 0.2,\n width: '20px',\n height: '20px',\n borderRadius: '50%',\n margin: '5px'\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: 'Pitch Exercises',\n description: 'Switch between different exercises',\n placement: 'top',\n target: () => ref12.current\n }, {\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: 344,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Retry: Clear display and restart.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 345,\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: 346,\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: 347,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 343,\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: '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 setSelectedNum([\"2\"]);\n } else if (e.target.innerText === \"Stair\" || e.target.innerText === \"STAIR\") {\n setComponent(\"Stair\");\n setSelectedNum([\"3\"]);\n } else {\n setComponent(\"Heteronym\");\n setSelectedNum([\"4\"]);\n }\n setSyllableCount(\"none\");\n };\n const handleHistoryMode = e => {\n setHistoryMode(e.target.innerText);\n };\n const handleColorStyle = e => {\n const newColorScheme = e.target.innerText.includes(\"Blue-Red\") ? \"blue\" : \"green\";\n setCurrentColorScheme(newColorScheme);\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: 410,\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 setSelectedNum([\"5\"]);\n }\n setComponent(componentType);\n setGender(genderType);\n setSyllableCount(syllableCountType);\n setCurrentSelection(e.key + \"syllable \" + genderName);\n };\n const handlePlayLyricCountChange = newCount => {\n setPlayLyricCount(newCount);\n };\n const onChangeStair = e => {\n setTxtShow(e.target.value);\n console.log(e);\n };\n const onChangeStairSwitch = value => {\n setTxtShowSwitch(value ? 'hide' : 'show');\n setTxtShow(value ? 'true' : 'false');\n };\n const renderSelectedComponent = () => {\n switch (component) {\n case 'ConstantTxt':\n return /*#__PURE__*/_jsxDEV(ConstantVol, {\n LAMP_COLORS: LAMP_COLORS,\n historyMode: historyMode,\n volume: volume,\n ref: parentRef,\n initialRange: initialRange,\n divisor: divisor,\n ballPosition: ballPosition,\n isRetry: isRetry,\n setPlayingPause: setPlayingPause,\n setPlaying: setPlaying,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n size: size,\n config: config,\n isPlaying: isPlaying\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 454,\n columnNumber: 16\n }, this);\n case 'Stair':\n return /*#__PURE__*/_jsxDEV(StairVol, {\n LAMP_COLORS: LAMP_COLORS,\n historyMode: historyMode,\n volume: volume,\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: 456,\n columnNumber: 18\n }, this);\n case 'Heteronym':\n return /*#__PURE__*/_jsxDEV(HeteronymVol, {\n LAMP_COLORS: LAMP_COLORS,\n historyMode: historyMode,\n volume: volume,\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: 458,\n columnNumber: 18\n }, this);\n default:\n return /*#__PURE__*/_jsxDEV(\"span\", {\n children: \"Canvas: Picture\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 461,\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: 469,\n columnNumber: 77\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 469,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 468,\n columnNumber: 9\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: 486,\n columnNumber: 69\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 486,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 485,\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: 490,\n columnNumber: 76\n }, this) : /*#__PURE__*/_jsxDEV(CaretRightOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 490,\n columnNumber: 96\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 490,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 489,\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: 495,\n columnNumber: 65\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 495,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 494,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 466,\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: 514,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 513,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Upload PDF or .txt file to read during practice\",\n children: /*#__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: 519,\n columnNumber: 35\n }, this),\n children: \"Upload File\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 519,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 518,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 517,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Type/Paste text to read during parctice\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: () => setIsOpenTextbox(!isOpenTextbox),\n children: !isOpenTextbox ? \"Enter Text\" : \"Close Textbox\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 523,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 522,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 511,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 509,\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: 532,\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: 549,\n columnNumber: 21\n }, this);\n })\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 538,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 507,\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(Tooltip, {\n title: \"Show/Hide 5-syllable phrases to read\",\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: 563,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 562,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 559,\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: 570,\n columnNumber: 19\n }, this);\n }\n return null;\n })()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 558,\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: 587,\n columnNumber: 19\n }, this);\n }\n return null;\n })()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 582,\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: 601,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 599,\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: 607,\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 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\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 (\n /*#__PURE__*/\n //
\n _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: [/*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n marginTop: \"2vw\"\n },\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 ref: ref12,\n children: /*#__PURE__*/_jsxDEV(Space.Compact, {\n children: [/*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Switch to the Constant exercise\",\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: 718,\n columnNumber: 25\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 717,\n columnNumber: 23\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Switch to the Stair exercise\",\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: 724,\n columnNumber: 25\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 723,\n columnNumber: 23\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Switch to the Heteronyms exercise\",\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: 730,\n columnNumber: 25\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 729,\n columnNumber: 23\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 715,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 714,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 705,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 704,\n columnNumber: 13\n }, this), shortDescription(component), /*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n width: \"100%\"\n },\n children: renderSelectedComponent()\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 743,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n display: 'flex'\n },\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n style: lampStyle(LAMP_COLORS[0])\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 748,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n style: lampStyle(LAMP_COLORS[1])\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 749,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n style: lampStyle(LAMP_COLORS[2])\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 750,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 747,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 746,\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: 753,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(FloatButton, {\n style: {\n width: 60,\n height: 60,\n right: 15,\n bottom: 30,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n onClick: () => setOpenSetting(true),\n ref: ref3,\n shape: \"square\",\n description: \"SETTINGS\",\n icon: /*#__PURE__*/_jsxDEV(SettingOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 780,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 767,\n columnNumber: 14\n }, this), /*#__PURE__*/_jsxDEV(FloatButton, {\n style: {\n width: 60,\n height: 60,\n right: 100,\n bottom: 30,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n shape: \"square\",\n description: \"TOUR\",\n onClick: handleBeginTour,\n icon: /*#__PURE__*/_jsxDEV(QuestionOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 794,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 781,\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: 795,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 702,\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: \"# Coordinate Display Mode\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 806,\n columnNumber: 19\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: 808,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"notes\",\n children: \"Notes\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 809,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 807,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 805,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# History Mode Selection: \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 814,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 813,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(Button, {\n type: historyMode === 'Size' ? 'primary' : 'default',\n onClick: handleHistoryMode,\n children: \"Size\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 817,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n type: historyMode === 'Color' ? 'primary' : 'default',\n onClick: handleHistoryMode,\n children: \"Color\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 818,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n type: historyMode === 'Mixed' ? 'primary' : 'default',\n onClick: handleHistoryMode,\n children: \"Mixed\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 819,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n type: historyMode === 'None' ? 'primary' : 'default',\n onClick: handleHistoryMode,\n children: \"None\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 820,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 816,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Color Mode\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 824,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 823,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(Button, {\n onClick: handleColorStyle,\n type: currentColorScheme === \"blue\" ? 'primary' : 'default',\n children: \"Blue-Red\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 828,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: handleColorStyle,\n type: currentColorScheme === \"green\" ? 'primary' : 'default',\n children: \"Green-Red\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 829,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 827,\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: 833,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n range: true,\n step: 10,\n min: 50,\n max: 600,\n onChange: onChangeRange\n // tooltipPlacement={bottom}\n // tooltip ={{formatter: null}}\n ,\n tooltip: {\n formatter: formatterHz\n },\n marks: marksRange,\n defaultValue: [100, 300]\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 834,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 832,\n columnNumber: 17\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: 850,\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 // tooltip ={{formatter: null}}\n ,\n defaultValue: 0.5,\n marks: marksBallPos\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 851,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 849,\n columnNumber: 19\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: 867,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.1,\n min: 0,\n max: 1,\n onChange: onChangePosition\n // tooltip={{ formatter: formatterPos }}\n // tooltip ={{formatter: null}}\n ,\n tooltip: {\n // placement: 'bottom',\n formatter: formatterPos\n // open: tooltipVisible,\n },\n\n defaultValue: 0.5,\n marks: marksBallPos\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 868,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 866,\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: 887,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.05,\n min: 0,\n max: 1,\n onChange: onChangeSpeed\n // tooltip={{ formatter: formatterPos }}\n ,\n tooltip: {\n // placement: 'bottom',\n formatter: formatterPos\n },\n defaultValue: 0.3\n // tooltip ={{formatter: null}}\n // marks={marksBall}\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 888,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 886,\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: 906,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: false,\n onChange: EnableVoluneMode\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 907,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 905,\n columnNumber: 19\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\n defaultValue: 70,\n marks: marksVol\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 911,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 904,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 928,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: onClose,\n children: \"Close\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 929,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 803,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 802,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 700,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 698,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 697,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 696,\n columnNumber: 5\n }, this)\n\n //
\n );\n};\n_s(SampleVolume, \"fcXbC/k8I6FS52MrCqy3LeK1nJc=\", false, function () {\n return [useTemString, useLocation];\n});\n_c = SampleVolume;\nexport default SampleVolume;\nvar _c;\n$RefreshReg$(_c, \"SampleVolume\");","map":{"version":3,"names":["React","useState","useEffect","useRef","Button","Flex","SettingOutlined","Col","Row","ConfigProvider","CaretRightOutlined","Slider","Input","Layout","Drawer","Radio","RedoOutlined","PauseOutlined","StepForwardOutlined","StepBackwardOutlined","Tooltip","FloatButton","Space","Switch","UploadOutlined","message","Upload","hark","useLocation","Typography","Image","divide_1","QuestionOutlined","useTemString","pdfToText","createFromIconfontCN","ConstantVol","HeteronymVol","StairVol","jsxDEV","_jsxDEV","Fragment","_Fragment","PlayIcon","scriptUrl","TextArea","Title","Paragraph","Text","Link","Content","marksRange","marksBallPos","marksVol","SampleVolume","genderName","gender","setGender","audioKey","audioSrc","fetchAudioData","handleIconClick","itemsAvatar","_s","items_3","stairFilenames","heteronymFilenames","shortDescription","size","initialRange","setInitialRange","config","setConfig","SRATE","fxmin","fxlow","fxhigh","fxmax","COLORS","setCOLORS","realVoiceColor","targetVoiceColor","closeVoiceColor","COLORSMode","setCOLORSMode","openSetting","setOpenSetting","txtShow","setTxtShow","txtShowSwitch","setTxtShowSwitch","openTour","setOpenTour","isPlaying","setIsPlaying","isRetry","setIsRetry","enableVol","setEnableVol","isOpenTextbox","setIsOpenTextbox","showNextPre","setShowNextPre","showListen","setShowListen","location","ref12","ref1","ref2","ref3","parentRef","volume","setVolume","threshold","setThreshold","maxLyricCount","setMaxLyricCount","playLyricCount","setPlayLyricCount","divisor","setDivisor","ballPosition","setBallPosition","showNotesPar","setShowNotesPar","component","setComponent","currentSelection","setCurrentSelection","syllableCount","setSyllableCount","baseFilenames","setBaseFilenames","fileContent","setFileContent","selectedNum","setSelectedNum","setPlaying","setPlayingPause","handleBeginTour","window","scrollTo","onClose","ClearTxt","handleTextInput","e","content","target","value","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","onChange","info","status","success","changeOnEnter","key","shiftKey","historyMode","setHistoryMode","currentColorScheme","setCurrentColorScheme","LAMP_COLORS","setLAMP_COLORS","LAMP_COLORSBLUE","LAMP_COLORSGREEN","getLampColor","vol","temvol","lampStyle","color","backgroundColor","opacity","width","height","borderRadius","margin","navigator","mediaDevices","getUserMedia","audio","video","stream","harkInstance","on","stop","steps","title","description","placement","current","cover","style","textAlign","children","fileName","_jsxFileName","lineNumber","columnNumber","queryParams","URLSearchParams","search","init","get","handleStairAndConstantClick","innerText","handleHistoryMode","handleColorStyle","newColorScheme","includes","renderTruncatedFilenames","filenames","index","maxIndexToShow","shouldShow","isNearEnd","startIndex","showCondition","className","handleMenuClick","componentType","genderType","syllableCountType","tt","handlePlayLyricCountChange","newCount","onChangeStair","onChangeStairSwitch","renderSelectedComponent","ref","heteronymFile","MainButtons","justify","wrap","gap","onClick","shape","icon","onChangePrevious","onChangePause","onChangeNext","renderSelectedComponentLyric","Compact","maxCount","rows","placeholder","resize","onKeyDown","align","defaultChecked","checkedChildren","unCheckedChildren","onChangeRange","rangeValue","onChangePosition","positionValue","onChangeSpeed","speedValue","mappedValue","Math","round","onChangeHz","EnableVoluneMode","tem","onChangeThreshold","formatterdB","formatterHz","formatterPos","toFixed","span","vertical","marginTop","theme","token","colorPrimary","display","right","bottom","alignItems","justifyContent","preview","src","open","Group","defaultValue","buttonStyle","range","step","min","max","tooltip","formatter","marks","_c","$RefreshReg$"],"sources":["/var/www/gavt/src/Route/SampleVolume.tsx"],"sourcesContent":["import 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 { Breadcrumb, Layout, Menu, Dropdown, theme, Avatar } from 'antd';\nimport { Drawer, Cascader, 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 type { RadioChangeEvent } from 'antd';\nimport type { TourProps } from 'antd';\nimport ReactAudioPlayer from 'react-audio-player';\nimport type { SliderSingleProps } from 'antd';\nimport type { UploadProps } from 'antd';\nimport { UploadOutlined, ArrowLeftOutlined, RollbackOutlined } from '@ant-design/icons';\nimport { message, Upload } from 'antd';\nimport hark from 'hark';\nimport { useLocation } from 'react-router-dom';\nimport { Typography } from 'antd';\nimport type { CollapseProps } 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 { adjustCanvasScale, map, drawBackground, generateNotesAndFrequencies } from '../function/canvasDefault';\nimport { useTemString } from '../hooks/useTemString';\nimport { useCanvasHooks } from '../hooks/useCanvasHooks';\nimport type { MenuProps } from 'antd';\n// @ts-ignore\nimport pdfToText from 'react-pdftotext';\nimport useCanvasAdjustHeight from '../hooksUseEffect/useCanvasAdjustHeight';\nimport AudioPlayer from 'react-h5-audio-player';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport { useOptionsHooks } from '../hooks/useOptionsHooks';\nimport ConstantVol from '../Canvas/ConstantVol'\nimport HeteronymVol from '../Canvas/HeteronymVol'\nimport StairVol from '../Canvas/StairVol'\n\nconst PlayIcon = createFromIconfontCN({\n scriptUrl: '//at.alicdn.com/t/c/font_4566050_zpduwnlv2t.js',\n});\n\nconst { TextArea } = Input;\nconst { Title, Paragraph, Text, Link } = Typography;\ntype MenuTheme = 'show' | 'hide';\n\nconst { Content } = Layout;\n\nconst marksRange: SliderSingleProps['marks'] = {\n 50: '50Hz',\n 600: '600Hz'\n};\n\nconst marksBallPos: SliderSingleProps['marks'] = {\n 0: '0%',\n 1: '100%'\n};\nconst marksVol: SliderSingleProps['marks'] = {\n 50: '50dB',\n 90: '90dB'\n};\n\n\ninterface SampleProps {\n genderName: string;\n gender: string;\n setGender: (str: string) => void;\n audioKey: number;\n audioSrc: string;\n fetchAudioData: () => void;\n handleIconClick: (e: React.MouseEvent) => void;\n itemsAvatar: MenuProps['items'];\n}\nconst SampleVolume: React.FC = ({\n genderName, \n gender, \n setGender,\n audioKey,\n audioSrc,\n fetchAudioData,\n handleIconClick,\n itemsAvatar,\n\n}) => {\n\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, // This initial value will be updated by useEffect below\n fxhigh: 600 - 200, // This initial value will be updated by useEffect below\n fxmax: 600\n });\n const [COLORS, setCOLORS] = useState({\n realVoiceColor: '#d679de', \n targetVoiceColor: '#4669C8', \n closeVoiceColor: '#15dbcc', \n }\n);\nconst [COLORSMode,setCOLORSMode] = useState(\"de\");\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 [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 ref12 = useRef(null);\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 [syllableCount, setSyllableCount] = useState(\"none\");\n const [baseFilenames, setBaseFilenames] = useState([]);\n const [fileContent, setFileContent] = useState([]);\n const [selectedNum, setSelectedNum] = useState([\"2\"]);\n\n\n // \n\n\n\n\n\n const setPlaying = () => {\n setIsPlaying(true);\n };\n const setPlayingPause = () => {\n setIsPlaying(false);\n };\n const handleBeginTour = () => {\n setOpenTour(true);\n window.scrollTo(0, 0);\n };\n const onClose = () => {\n setOpenSetting(false);\n };\n const ClearTxt = () => {\n setFileContent([]);\n setMaxLyricCount(1);\n };\n\n // Constant Page upload and input\n const handleTextInput = (e: React.ChangeEvent) => {\n const content = e.target.value as string;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators)\n .map(s => s.trim())\n .filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }\n const props: UploadProps = {\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)\n .then((text: string) => {\n const separators = /[;,./\\n]/;\n const splitContent = text.split(separators)\n .map((s: string) => s.trim())\n .filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n })\n .catch((error: any) => { // 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: ProgressEvent) => {\n if (e.target?.result) {\n const content = e.target.result as string;\n // const separators = /[;,./]/;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators)\n .map(s => s.trim())\n .filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }\n };\n\n reader.readAsText(file);\n\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: any) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n console.log(\"Enter Key Pressed!\");\n handleTextInput(e);\n }\n }\n\n\n const [historyMode, setHistoryMode] = useState(\"Mixed\");\n \n const [currentColorScheme, setCurrentColorScheme] = useState(\"blue\");\n const [LAMP_COLORS, setLAMP_COLORS] = useState([\n 'rgb(3, 4, 242)', // low\n 'rgb(106, 0, 147)', // mid\n 'rgb(221, 0, 34)', // high\n ]);\n\n const LAMP_COLORSBLUE = [\n 'rgb(3, 4, 242)', // low\n 'rgb(106, 0, 147)', // mid\n 'rgb(221, 0, 34)', // high\n ];\n\n const LAMP_COLORSGREEN = [\n 'rgb(98, 187, 70)', // low\n 'rgb(255, 194, 14)', // mid\n 'rgb(241, 91, 64)', // high\n ];\n useEffect(() => {\n if (currentColorScheme === \"blue\") {\n setLAMP_COLORS(LAMP_COLORSBLUE);\n } else {\n setLAMP_COLORS(LAMP_COLORSGREEN);\n }\n }, [currentColorScheme]);\n\n\n const getLampColor = (vol: number) => {\n let temvol = vol + 130;\n if (temvol <= 50) return LAMP_COLORS[0];\n if (temvol <= 80) return LAMP_COLORS[1];\n return LAMP_COLORS[2];\n };\n const lampStyle = (color: string) => ({\n backgroundColor: color,\n opacity: color === getLampColor(volume) ? 1 : 0.2,\n width: '20px',\n height: '20px',\n borderRadius: '50%',\n margin: '5px',\n });\n\n // Volume\n useEffect(() => {\n navigator.mediaDevices.getUserMedia({ audio: true, video: false })\n .then(stream => {\n const harkInstance = hark(stream, {});\n \n harkInstance.on('volume_change', (volume, threshold) => {\n setVolume(volume);\n });\n \n return () => harkInstance.stop();\n })\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\n // Tour\n const steps: TourProps['steps'] = [\n {\n title: 'Pitch Exercises',\n description: 'Switch between different exercises',\n placement: 'top',\n target: () => ref12.current,\n },\n {\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 {\n title: 'Function Buttons',\n cover: (\n
    \n
  • Start/Stop: Begin or stop recording.
    • \n
  • Retry: Clear display and restart.
    • \n
  • Upload txt/pdf File (optional): Upload text or pdf for you (in .txt/.pdf format) to read while recording.
    • \n
  • Previous Next (if text uploaded): Switch between lines of text.
    • \n
\n ),\n target: () => ref2.current,\n },\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 as HTMLDivElement,\n },\n {\n title: 'Options menu',\n description: 'Adjust settings such as the pitch display range.',\n target: () => ref3.current,\n },\n\n ];\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: any) => {\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 setSelectedNum([\"2\"]);\n \n } else if (e.target.innerText === \"Stair\" || e.target.innerText === \"STAIR\") {\n setComponent(\"Stair\");\n setSelectedNum([\"3\"]);\n \n } else {\n setComponent(\"Heteronym\");\n setSelectedNum([\"4\"]);\n }\n setSyllableCount(\"none\");\n }\n\n const handleHistoryMode = (e: any) => {\n setHistoryMode(e.target.innerText);\n }\n const handleColorStyle = (e: any) => {\n const newColorScheme = e.target.innerText.includes(\"Blue-Red\") ? \"blue\" : \"green\";\n setCurrentColorScheme(newColorScheme);\n };\n const renderTruncatedFilenames = (filenames: string[]) => {\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\n return (\n showCondition && (\n
  • {text}
    • \n )\n );\n });\n };\n const handleMenuClick = (e: any) => {\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 setSelectedNum([\"5\"]);\n\n }\n\n setComponent(componentType);\n setGender(genderType);\n setSyllableCount(syllableCountType);\n\n setCurrentSelection(e.key + \"syllable \" + genderName);\n };\n const handlePlayLyricCountChange = (newCount: number) => {\n setPlayLyricCount(newCount);\n };\n\n\n const onChangeStair = (e: RadioChangeEvent) => {\n setTxtShow(e.target.value);\n console.log(e);\n };\n const onChangeStairSwitch = (value: boolean) => {\n setTxtShowSwitch(value ? 'hide' : 'show');\n setTxtShow(value ? 'true' : 'false');\n };\n\n const renderSelectedComponent = (): React.ReactNode => {\n switch (component) {\n case 'ConstantTxt':\n return ;\n case 'Stair':\n return ;\n case 'Heteronym':\n return ;\n \n default:\n return Canvas: Picture;\n }\n }\n const MainButtons = (): React.ReactNode => {\n return (\n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n <>\n {isOpenTextbox && fileContent.length === 0 && (\n