diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index a1212545..70058401 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -103,7 +103,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ GuiStateProvider: () => (/* binding */ GuiStateProvider),\n/* harmony export */ OpenAdvancedSettingCheckbox: () => (/* binding */ OpenAdvancedSettingCheckbox),\n/* harmony export */ OpenAdvancedSettingDialogCheckbox: () => (/* binding */ OpenAdvancedSettingDialogCheckbox),\n/* harmony export */ OpenConverterSettingCheckbox: () => (/* binding */ OpenConverterSettingCheckbox),\n/* harmony export */ OpenDeviceSettingCheckbox: () => (/* binding */ OpenDeviceSettingCheckbox),\n/* harmony export */ OpenGetClientInformationDialogCheckbox: () => (/* binding */ OpenGetClientInformationDialogCheckbox),\n/* harmony export */ OpenGetServerInformationDialogCheckbox: () => (/* binding */ OpenGetServerInformationDialogCheckbox),\n/* harmony export */ OpenLabCheckbox: () => (/* binding */ OpenLabCheckbox),\n/* harmony export */ OpenLicenseDialogCheckbox: () => (/* binding */ OpenLicenseDialogCheckbox),\n/* harmony export */ OpenMergeLabDialogCheckbox: () => (/* binding */ OpenMergeLabDialogCheckbox),\n/* harmony export */ OpenModelSettingCheckbox: () => (/* binding */ OpenModelSettingCheckbox),\n/* harmony export */ OpenModelSlotManagerDialogCheckbox: () => (/* binding */ OpenModelSlotManagerDialogCheckbox),\n/* harmony export */ OpenQualityControlCheckbox: () => (/* binding */ OpenQualityControlCheckbox),\n/* harmony export */ OpenServerControlCheckbox: () => (/* binding */ OpenServerControlCheckbox),\n/* harmony export */ OpenShowLicenseDialogCheckbox: () => (/* binding */ OpenShowLicenseDialogCheckbox),\n/* harmony export */ OpenSpeakerSettingCheckbox: () => (/* binding */ OpenSpeakerSettingCheckbox),\n/* harmony export */ OpenStartingNoticeDialogCheckbox: () => (/* binding */ OpenStartingNoticeDialogCheckbox),\n/* harmony export */ OpenTextInputDialogCheckbox: () => (/* binding */ OpenTextInputDialogCheckbox),\n/* harmony export */ OpenWaitingDialogCheckbox: () => (/* binding */ OpenWaitingDialogCheckbox),\n/* harmony export */ useGuiState: () => (/* binding */ useGuiState)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n/* harmony import */ var _hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/useStateControlCheckbox */ \"./src/hooks/useStateControlCheckbox.tsx\");\n\n\n\n\n\n\nvar OpenServerControlCheckbox = \"open-server-control-checkbox\";\nvar OpenModelSettingCheckbox = \"open-model-setting-checkbox\";\nvar OpenDeviceSettingCheckbox = \"open-device-setting-checkbox\";\nvar OpenQualityControlCheckbox = \"open-quality-control-checkbox\";\nvar OpenSpeakerSettingCheckbox = \"open-speaker-setting-checkbox\";\nvar OpenConverterSettingCheckbox = \"open-converter-setting-checkbox\";\nvar OpenAdvancedSettingCheckbox = \"open-advanced-setting-checkbox\";\nvar OpenLabCheckbox = \"open-lab-checkbox\";\nvar OpenLicenseDialogCheckbox = \"open-license-dialog-checkbox\";\nvar OpenWaitingDialogCheckbox = \"open-waiting-dialog-checkbox\";\nvar OpenStartingNoticeDialogCheckbox = \"open-starting-notice-dialog-checkbox\";\nvar OpenModelSlotManagerDialogCheckbox = \"open-model-slot-manager-dialog-checkbox\";\nvar OpenMergeLabDialogCheckbox = \"open-merge-lab-dialog-checkbox\";\nvar OpenAdvancedSettingDialogCheckbox = \"open-advanced-setting-dialog-checkbox\";\nvar OpenGetServerInformationDialogCheckbox = \"open-get-server-information-dialog-checkbox\";\nvar OpenGetClientInformationDialogCheckbox = \"open-get-client-information-dialog-checkbox\";\nvar OpenTextInputDialogCheckbox = \"open-text-input-dialog-checkbox\";\nvar OpenShowLicenseDialogCheckbox = \"open-show-license-dialog-checkbox\";\nvar GuiStateContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createContext(null);\nvar useGuiState = function useGuiState() {\n var state = (0,react__WEBPACK_IMPORTED_MODULE_3__.useContext)(GuiStateContext);\n if (!state) {\n throw new Error(\"useGuiState must be used within GuiStateProvider\");\n }\n return state;\n};\nvar GuiStateProvider = function GuiStateProvider(_ref) {\n var children = _ref.children;\n var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_4__.useAppRoot)(),\n appGuiSettingState = _useAppRoot.appGuiSettingState;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState, 2),\n isConverting = _useState2[0],\n setIsConverting = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState3, 2),\n isAnalyzing = _useState4[0],\n setIsAnalyzing = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),\n _useState6 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState5, 2),\n modelSlotNum = _useState6[0],\n setModelSlotNum = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState8 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState7, 2),\n showPyTorchModelUpload = _useState8[0],\n setShowPyTorchModelUpload = _useState8[1];\n var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState10 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState9, 2),\n inputAudioDeviceInfo = _useState10[0],\n setInputAudioDeviceInfo = _useState10[1];\n var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState12 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState11, 2),\n outputAudioDeviceInfo = _useState12[0],\n setOutputAudioDeviceInfo = _useState12[1];\n var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"none\"),\n _useState14 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState13, 2),\n audioInputForGUI = _useState14[0],\n setAudioInputForGUI = _useState14[1];\n var _useState15 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"none\"),\n _useState16 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState15, 2),\n audioOutputForGUI = _useState16[0],\n setAudioOutputForGUI = _useState16[1];\n var _useState17 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState18 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState17, 2),\n fileInputEchoback = _useState18[0],\n setFileInputEchoback = _useState18[1]; //最初のmuteが有効になるように。undefined <-- ??? falseしておけばよさそう。undefinedだとwarningがでる。\n var _useState19 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"default\"),\n _useState20 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState19, 2),\n audioOutputForAnalyzer = _useState20[0],\n setAudioOutputForAnalyzer = _useState20[1];\n var _useState21 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(null),\n _useState22 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState21, 2),\n textInputResolve = _useState22[0],\n setTextInputResolve = _useState22[1];\n var reloadDeviceInfo = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee() {\n var ms, mediaDeviceInfos, audioInputs, audioOutputs;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.prev = 0;\n _context.next = 3;\n return navigator.mediaDevices.getUserMedia({\n video: false,\n audio: true\n });\n case 3:\n ms = _context.sent;\n ms.getTracks().forEach(function (x) {\n x.stop();\n });\n _context.next = 10;\n break;\n case 7:\n _context.prev = 7;\n _context.t0 = _context[\"catch\"](0);\n console.warn(\"Enumerate device error::\", _context.t0);\n case 10:\n _context.next = 12;\n return navigator.mediaDevices.enumerateDevices();\n case 12:\n mediaDeviceInfos = _context.sent;\n audioInputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audioinput\";\n });\n audioInputs.push({\n deviceId: \"none\",\n groupId: \"none\",\n kind: \"audioinput\",\n label: \"none\",\n toJSON: function toJSON() {}\n });\n audioInputs.push({\n deviceId: \"file\",\n groupId: \"file\",\n kind: \"audioinput\",\n label: \"file\",\n toJSON: function toJSON() {}\n });\n audioOutputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audiooutput\";\n });\n audioOutputs.push({\n deviceId: \"none\",\n groupId: \"none\",\n kind: \"audiooutput\",\n label: \"none\",\n toJSON: function toJSON() {}\n });\n // audioOutputs.push({\n // deviceId: \"record\",\n // groupId: \"record\",\n // kind: \"audiooutput\",\n // label: \"record\",\n // toJSON: () => { }\n // })\n return _context.abrupt(\"return\", [audioInputs, audioOutputs]);\n case 19:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[0, 7]]);\n }));\n return function reloadDeviceInfo() {\n return _ref2.apply(this, arguments);\n };\n }();\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n var audioInitialize = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee2() {\n var audioInfo;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return reloadDeviceInfo();\n case 2:\n audioInfo = _context2.sent;\n setInputAudioDeviceInfo(audioInfo[0]);\n setOutputAudioDeviceInfo(audioInfo[1]);\n case 5:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function audioInitialize() {\n return _ref3.apply(this, arguments);\n };\n }();\n audioInitialize();\n }, []);\n\n // (1) Controller Switch\n var openServerControlCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenServerControlCheckbox);\n var openModelSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenModelSettingCheckbox);\n var openDeviceSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenDeviceSettingCheckbox);\n var openQualityControlCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenQualityControlCheckbox);\n var openSpeakerSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenSpeakerSettingCheckbox);\n var openConverterSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenConverterSettingCheckbox);\n var openAdvancedSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenAdvancedSettingCheckbox);\n var openLabCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenLabCheckbox);\n var showWaitingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenWaitingDialogCheckbox);\n var showStartingNoticeCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenStartingNoticeDialogCheckbox);\n var showModelSlotManagerCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenModelSlotManagerDialogCheckbox);\n var showMergeLabCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenMergeLabDialogCheckbox);\n var showAdvancedSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenAdvancedSettingDialogCheckbox);\n var showGetServerInformationCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenGetServerInformationDialogCheckbox);\n var showGetClientInformationCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenGetClientInformationDialogCheckbox);\n var showTextInputCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenTextInputDialogCheckbox);\n var showLicenseCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenShowLicenseDialogCheckbox);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n openServerControlCheckbox.updateState(true);\n openModelSettingCheckbox.updateState(false);\n openDeviceSettingCheckbox.updateState(true);\n openSpeakerSettingCheckbox.updateState(true);\n openConverterSettingCheckbox.updateState(true);\n openQualityControlCheckbox.updateState(false);\n openLabCheckbox.updateState(false);\n openAdvancedSettingCheckbox.updateState(false);\n showWaitingCheckbox.updateState(false);\n showStartingNoticeCheckbox.updateState(false);\n showModelSlotManagerCheckbox.updateState(false);\n showMergeLabCheckbox.updateState(false);\n showAdvancedSettingCheckbox.updateState(false);\n showGetServerInformationCheckbox.updateState(false);\n showGetClientInformationCheckbox.updateState(false);\n showTextInputCheckbox.updateState(false);\n showLicenseCheckbox.updateState(false);\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n var show = function show() {\n var _document$getElementB, _document$getElementB2;\n // const lang = window.navigator.language\n // const edition = appGuiSettingState.edition\n // console.log(\"appGuiSettingState.edition\", appGuiSettingState.edition, lang)\n // if ((edition == \"onnxdirectML-cuda\" || edition == \"\") && lang == \"ja\") {\n // return\n // }\n\n (_document$getElementB = document.getElementById(\"dialog\")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.classList.add(\"dialog-container-show\");\n showStartingNoticeCheckbox.updateState(true);\n (_document$getElementB2 = document.getElementById(\"dialog2\")) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.classList.add(\"dialog-container-show\");\n };\n setTimeout(show);\n }, [appGuiSettingState.edition]);\n var providerValue = {\n stateControls: {\n openServerControlCheckbox: openServerControlCheckbox,\n openModelSettingCheckbox: openModelSettingCheckbox,\n openDeviceSettingCheckbox: openDeviceSettingCheckbox,\n openQualityControlCheckbox: openQualityControlCheckbox,\n openSpeakerSettingCheckbox: openSpeakerSettingCheckbox,\n openConverterSettingCheckbox: openConverterSettingCheckbox,\n openAdvancedSettingCheckbox: openAdvancedSettingCheckbox,\n openLabCheckbox: openLabCheckbox,\n showWaitingCheckbox: showWaitingCheckbox,\n showStartingNoticeCheckbox: showStartingNoticeCheckbox,\n showModelSlotManagerCheckbox: showModelSlotManagerCheckbox,\n showMergeLabCheckbox: showMergeLabCheckbox,\n showAdvancedSettingCheckbox: showAdvancedSettingCheckbox,\n showGetServerInformationCheckbox: showGetServerInformationCheckbox,\n showGetClientInformationCheckbox: showGetClientInformationCheckbox,\n showTextInputCheckbox: showTextInputCheckbox,\n showLicenseCheckbox: showLicenseCheckbox\n },\n isConverting: isConverting,\n setIsConverting: setIsConverting,\n isAnalyzing: isAnalyzing,\n setIsAnalyzing: setIsAnalyzing,\n showPyTorchModelUpload: showPyTorchModelUpload,\n setShowPyTorchModelUpload: setShowPyTorchModelUpload,\n reloadDeviceInfo: reloadDeviceInfo,\n inputAudioDeviceInfo: inputAudioDeviceInfo,\n outputAudioDeviceInfo: outputAudioDeviceInfo,\n audioInputForGUI: audioInputForGUI,\n audioOutputForGUI: audioOutputForGUI,\n fileInputEchoback: fileInputEchoback,\n audioOutputForAnalyzer: audioOutputForAnalyzer,\n setInputAudioDeviceInfo: setInputAudioDeviceInfo,\n setOutputAudioDeviceInfo: setOutputAudioDeviceInfo,\n setAudioInputForGUI: setAudioInputForGUI,\n setAudioOutputForGUI: setAudioOutputForGUI,\n setFileInputEchoback: setFileInputEchoback,\n setAudioOutputForAnalyzer: setAudioOutputForAnalyzer,\n modelSlotNum: modelSlotNum,\n setModelSlotNum: setModelSlotNum,\n textInputResolve: textInputResolve,\n setTextInputResolve: setTextInputResolve\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(GuiStateContext.Provider, {\n value: providerValue\n }, children);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/001_GuiStateProvider.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ GuiStateProvider: () => (/* binding */ GuiStateProvider),\n/* harmony export */ OpenAdvancedSettingCheckbox: () => (/* binding */ OpenAdvancedSettingCheckbox),\n/* harmony export */ OpenAdvancedSettingDialogCheckbox: () => (/* binding */ OpenAdvancedSettingDialogCheckbox),\n/* harmony export */ OpenConverterSettingCheckbox: () => (/* binding */ OpenConverterSettingCheckbox),\n/* harmony export */ OpenDeviceSettingCheckbox: () => (/* binding */ OpenDeviceSettingCheckbox),\n/* harmony export */ OpenGetClientInformationDialogCheckbox: () => (/* binding */ OpenGetClientInformationDialogCheckbox),\n/* harmony export */ OpenGetServerInformationDialogCheckbox: () => (/* binding */ OpenGetServerInformationDialogCheckbox),\n/* harmony export */ OpenLabCheckbox: () => (/* binding */ OpenLabCheckbox),\n/* harmony export */ OpenLicenseDialogCheckbox: () => (/* binding */ OpenLicenseDialogCheckbox),\n/* harmony export */ OpenMergeLabDialogCheckbox: () => (/* binding */ OpenMergeLabDialogCheckbox),\n/* harmony export */ OpenModelSettingCheckbox: () => (/* binding */ OpenModelSettingCheckbox),\n/* harmony export */ OpenModelSlotManagerDialogCheckbox: () => (/* binding */ OpenModelSlotManagerDialogCheckbox),\n/* harmony export */ OpenQualityControlCheckbox: () => (/* binding */ OpenQualityControlCheckbox),\n/* harmony export */ OpenServerControlCheckbox: () => (/* binding */ OpenServerControlCheckbox),\n/* harmony export */ OpenShowLicenseDialogCheckbox: () => (/* binding */ OpenShowLicenseDialogCheckbox),\n/* harmony export */ OpenSpeakerSettingCheckbox: () => (/* binding */ OpenSpeakerSettingCheckbox),\n/* harmony export */ OpenStartingNoticeDialogCheckbox: () => (/* binding */ OpenStartingNoticeDialogCheckbox),\n/* harmony export */ OpenTextInputDialogCheckbox: () => (/* binding */ OpenTextInputDialogCheckbox),\n/* harmony export */ OpenWaitingDialogCheckbox: () => (/* binding */ OpenWaitingDialogCheckbox),\n/* harmony export */ useGuiState: () => (/* binding */ useGuiState)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n/* harmony import */ var _hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/useStateControlCheckbox */ \"./src/hooks/useStateControlCheckbox.tsx\");\n\n\n\n\n\n\nvar OpenServerControlCheckbox = \"open-server-control-checkbox\";\nvar OpenModelSettingCheckbox = \"open-model-setting-checkbox\";\nvar OpenDeviceSettingCheckbox = \"open-device-setting-checkbox\";\nvar OpenQualityControlCheckbox = \"open-quality-control-checkbox\";\nvar OpenSpeakerSettingCheckbox = \"open-speaker-setting-checkbox\";\nvar OpenConverterSettingCheckbox = \"open-converter-setting-checkbox\";\nvar OpenAdvancedSettingCheckbox = \"open-advanced-setting-checkbox\";\nvar OpenLabCheckbox = \"open-lab-checkbox\";\nvar OpenLicenseDialogCheckbox = \"open-license-dialog-checkbox\";\nvar OpenWaitingDialogCheckbox = \"open-waiting-dialog-checkbox\";\nvar OpenStartingNoticeDialogCheckbox = \"open-starting-notice-dialog-checkbox\";\nvar OpenModelSlotManagerDialogCheckbox = \"open-model-slot-manager-dialog-checkbox\";\nvar OpenMergeLabDialogCheckbox = \"open-merge-lab-dialog-checkbox\";\nvar OpenAdvancedSettingDialogCheckbox = \"open-advanced-setting-dialog-checkbox\";\nvar OpenGetServerInformationDialogCheckbox = \"open-get-server-information-dialog-checkbox\";\nvar OpenGetClientInformationDialogCheckbox = \"open-get-client-information-dialog-checkbox\";\nvar OpenTextInputDialogCheckbox = \"open-text-input-dialog-checkbox\";\nvar OpenShowLicenseDialogCheckbox = \"open-show-license-dialog-checkbox\";\nvar GuiStateContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createContext(null);\nvar useGuiState = function useGuiState() {\n var state = (0,react__WEBPACK_IMPORTED_MODULE_3__.useContext)(GuiStateContext);\n if (!state) {\n throw new Error(\"useGuiState must be used within GuiStateProvider\");\n }\n return state;\n};\nvar GuiStateProvider = function GuiStateProvider(_ref) {\n var children = _ref.children;\n var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_4__.useAppRoot)(),\n appGuiSettingState = _useAppRoot.appGuiSettingState;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState, 2),\n isConverting = _useState2[0],\n setIsConverting = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState3, 2),\n isAnalyzing = _useState4[0],\n setIsAnalyzing = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),\n _useState6 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState5, 2),\n modelSlotNum = _useState6[0],\n setModelSlotNum = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState8 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState7, 2),\n showPyTorchModelUpload = _useState8[0],\n setShowPyTorchModelUpload = _useState8[1];\n var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState10 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState9, 2),\n inputAudioDeviceInfo = _useState10[0],\n setInputAudioDeviceInfo = _useState10[1];\n var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState12 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState11, 2),\n outputAudioDeviceInfo = _useState12[0],\n setOutputAudioDeviceInfo = _useState12[1];\n var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"none\"),\n _useState14 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState13, 2),\n audioInputForGUI = _useState14[0],\n setAudioInputForGUI = _useState14[1];\n var _useState15 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"none\"),\n _useState16 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState15, 2),\n audioOutputForGUI = _useState16[0],\n setAudioOutputForGUI = _useState16[1];\n var _useState17 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState18 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState17, 2),\n fileInputEchoback = _useState18[0],\n setFileInputEchoback = _useState18[1]; //最初のmuteが有効になるように。undefined <-- ??? falseしておけばよさそう。undefinedだとwarningがでる。\n var _useState19 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState20 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState19, 2),\n shareScreenEnabled = _useState20[0],\n setShareScreenEnabled = _useState20[1];\n var _useState21 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"default\"),\n _useState22 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState21, 2),\n audioOutputForAnalyzer = _useState22[0],\n setAudioOutputForAnalyzer = _useState22[1];\n var _useState23 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(null),\n _useState24 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState23, 2),\n textInputResolve = _useState24[0],\n setTextInputResolve = _useState24[1];\n var reloadDeviceInfo = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee() {\n var ms, mediaDeviceInfos, audioInputs, audioOutputs;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.prev = 0;\n _context.next = 3;\n return navigator.mediaDevices.getUserMedia({\n video: false,\n audio: true\n });\n case 3:\n ms = _context.sent;\n ms.getTracks().forEach(function (x) {\n x.stop();\n });\n _context.next = 10;\n break;\n case 7:\n _context.prev = 7;\n _context.t0 = _context[\"catch\"](0);\n console.warn(\"Enumerate device error::\", _context.t0);\n case 10:\n _context.next = 12;\n return navigator.mediaDevices.enumerateDevices();\n case 12:\n mediaDeviceInfos = _context.sent;\n audioInputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audioinput\";\n });\n audioInputs.push({\n deviceId: \"none\",\n groupId: \"none\",\n kind: \"audioinput\",\n label: \"none\",\n toJSON: function toJSON() {}\n });\n audioInputs.push({\n deviceId: \"file\",\n groupId: \"file\",\n kind: \"audioinput\",\n label: \"file\",\n toJSON: function toJSON() {}\n });\n audioInputs.push({\n deviceId: \"screen\",\n groupId: \"screen\",\n kind: \"audioinput\",\n label: \"screen\",\n toJSON: function toJSON() {}\n });\n audioOutputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audiooutput\";\n });\n audioOutputs.push({\n deviceId: \"none\",\n groupId: \"none\",\n kind: \"audiooutput\",\n label: \"none\",\n toJSON: function toJSON() {}\n });\n // audioOutputs.push({\n // deviceId: \"record\",\n // groupId: \"record\",\n // kind: \"audiooutput\",\n // label: \"record\",\n // toJSON: () => { }\n // })\n return _context.abrupt(\"return\", [audioInputs, audioOutputs]);\n case 20:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[0, 7]]);\n }));\n return function reloadDeviceInfo() {\n return _ref2.apply(this, arguments);\n };\n }();\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n var audioInitialize = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee2() {\n var audioInfo;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return reloadDeviceInfo();\n case 2:\n audioInfo = _context2.sent;\n setInputAudioDeviceInfo(audioInfo[0]);\n setOutputAudioDeviceInfo(audioInfo[1]);\n case 5:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function audioInitialize() {\n return _ref3.apply(this, arguments);\n };\n }();\n audioInitialize();\n }, []);\n\n // (1) Controller Switch\n var openServerControlCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenServerControlCheckbox);\n var openModelSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenModelSettingCheckbox);\n var openDeviceSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenDeviceSettingCheckbox);\n var openQualityControlCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenQualityControlCheckbox);\n var openSpeakerSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenSpeakerSettingCheckbox);\n var openConverterSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenConverterSettingCheckbox);\n var openAdvancedSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenAdvancedSettingCheckbox);\n var openLabCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenLabCheckbox);\n var showWaitingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenWaitingDialogCheckbox);\n var showStartingNoticeCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenStartingNoticeDialogCheckbox);\n var showModelSlotManagerCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenModelSlotManagerDialogCheckbox);\n var showMergeLabCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenMergeLabDialogCheckbox);\n var showAdvancedSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenAdvancedSettingDialogCheckbox);\n var showGetServerInformationCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenGetServerInformationDialogCheckbox);\n var showGetClientInformationCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenGetClientInformationDialogCheckbox);\n var showTextInputCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenTextInputDialogCheckbox);\n var showLicenseCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenShowLicenseDialogCheckbox);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n openServerControlCheckbox.updateState(true);\n openModelSettingCheckbox.updateState(false);\n openDeviceSettingCheckbox.updateState(true);\n openSpeakerSettingCheckbox.updateState(true);\n openConverterSettingCheckbox.updateState(true);\n openQualityControlCheckbox.updateState(false);\n openLabCheckbox.updateState(false);\n openAdvancedSettingCheckbox.updateState(false);\n showWaitingCheckbox.updateState(false);\n showStartingNoticeCheckbox.updateState(false);\n showModelSlotManagerCheckbox.updateState(false);\n showMergeLabCheckbox.updateState(false);\n showAdvancedSettingCheckbox.updateState(false);\n showGetServerInformationCheckbox.updateState(false);\n showGetClientInformationCheckbox.updateState(false);\n showTextInputCheckbox.updateState(false);\n showLicenseCheckbox.updateState(false);\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n var show = function show() {\n var _document$getElementB, _document$getElementB2;\n // const lang = window.navigator.language\n // const edition = appGuiSettingState.edition\n // console.log(\"appGuiSettingState.edition\", appGuiSettingState.edition, lang)\n // if ((edition == \"onnxdirectML-cuda\" || edition == \"\") && lang == \"ja\") {\n // return\n // }\n\n (_document$getElementB = document.getElementById(\"dialog\")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.classList.add(\"dialog-container-show\");\n showStartingNoticeCheckbox.updateState(true);\n (_document$getElementB2 = document.getElementById(\"dialog2\")) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.classList.add(\"dialog-container-show\");\n };\n setTimeout(show);\n }, [appGuiSettingState.edition]);\n var providerValue = {\n stateControls: {\n openServerControlCheckbox: openServerControlCheckbox,\n openModelSettingCheckbox: openModelSettingCheckbox,\n openDeviceSettingCheckbox: openDeviceSettingCheckbox,\n openQualityControlCheckbox: openQualityControlCheckbox,\n openSpeakerSettingCheckbox: openSpeakerSettingCheckbox,\n openConverterSettingCheckbox: openConverterSettingCheckbox,\n openAdvancedSettingCheckbox: openAdvancedSettingCheckbox,\n openLabCheckbox: openLabCheckbox,\n showWaitingCheckbox: showWaitingCheckbox,\n showStartingNoticeCheckbox: showStartingNoticeCheckbox,\n showModelSlotManagerCheckbox: showModelSlotManagerCheckbox,\n showMergeLabCheckbox: showMergeLabCheckbox,\n showAdvancedSettingCheckbox: showAdvancedSettingCheckbox,\n showGetServerInformationCheckbox: showGetServerInformationCheckbox,\n showGetClientInformationCheckbox: showGetClientInformationCheckbox,\n showTextInputCheckbox: showTextInputCheckbox,\n showLicenseCheckbox: showLicenseCheckbox\n },\n isConverting: isConverting,\n setIsConverting: setIsConverting,\n isAnalyzing: isAnalyzing,\n setIsAnalyzing: setIsAnalyzing,\n showPyTorchModelUpload: showPyTorchModelUpload,\n setShowPyTorchModelUpload: setShowPyTorchModelUpload,\n reloadDeviceInfo: reloadDeviceInfo,\n inputAudioDeviceInfo: inputAudioDeviceInfo,\n outputAudioDeviceInfo: outputAudioDeviceInfo,\n audioInputForGUI: audioInputForGUI,\n audioOutputForGUI: audioOutputForGUI,\n fileInputEchoback: fileInputEchoback,\n shareScreenEnabled: shareScreenEnabled,\n audioOutputForAnalyzer: audioOutputForAnalyzer,\n setInputAudioDeviceInfo: setInputAudioDeviceInfo,\n setOutputAudioDeviceInfo: setOutputAudioDeviceInfo,\n setAudioInputForGUI: setAudioInputForGUI,\n setAudioOutputForGUI: setAudioOutputForGUI,\n setFileInputEchoback: setFileInputEchoback,\n setShareScreenEnabled: setShareScreenEnabled,\n setAudioOutputForAnalyzer: setAudioOutputForAnalyzer,\n modelSlotNum: modelSlotNum,\n setModelSlotNum: setModelSlotNum,\n textInputResolve: textInputResolve,\n setTextInputResolve: setTextInputResolve\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(GuiStateContext.Provider, {\n value: providerValue\n }, children);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/001_GuiStateProvider.tsx?"); /***/ }), @@ -433,7 +433,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ConvertArea: () => (/* binding */ ConvertArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ \"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\nvar ConvertArea = function ConvertArea(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n setting = _useAppState.setting,\n serverSetting = _useAppState.serverSetting,\n setWorkletNodeSetting = _useAppState.setWorkletNodeSetting,\n trancateBuffer = _useAppState.trancateBuffer;\n var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_6__.useAppRoot)(),\n appGuiSettingState = _useAppRoot.appGuiSettingState;\n var edition = appGuiSettingState.edition;\n var convertArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var nums;\n if (!props.inputChunkNums) {\n nums = [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048];\n } else {\n nums = props.inputChunkNums;\n }\n if (serverSetting.serverSetting.maxInputLength) {\n nums = nums.filter(function (x) {\n return x < serverSetting.serverSetting.maxInputLength / 128;\n });\n }\n var gpusEntry = (0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(serverSetting.serverSetting.gpus);\n gpusEntry.push({\n id: -1,\n name: \"cpu\",\n memory: 0\n });\n var onClassName = serverSetting.serverSetting.gpu == 0 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var offClassName = serverSetting.serverSetting.gpu == 0 ? \"config-sub-area-button\" : \"config-sub-area-button-active\";\n var cpuClassName = serverSetting.serverSetting.gpu == -1 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpu0ClassName = serverSetting.serverSetting.gpu == 0 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpu1ClassName = serverSetting.serverSetting.gpu == 1 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpu2ClassName = serverSetting.serverSetting.gpu == 2 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpu3ClassName = serverSetting.serverSetting.gpu == 3 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpuSelect = edition.indexOf(\"onnxdirectML-cuda\") >= 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"GPU(dml):\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: -1\n }));\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n })),\n className: cpuClassName\n }, \"cpu\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 0\n }));\n case 2:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n })),\n className: gpu0ClassName\n }, \"0\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 1\n }));\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n })),\n className: gpu1ClassName\n }, \"1\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 2\n }));\n case 2:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n })),\n className: gpu2ClassName\n }, \"2\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n _context5.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 3\n }));\n case 2:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n })),\n className: gpu3ClassName\n }, \"3\")))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"GPU:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: serverSetting.serverSetting.gpu,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: Number(e.target.value)\n }));\n }\n }, gpusEntry.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.id,\n value: x.id\n }, x.name, x.name == \"cpu\" ? \"\" : \"(\".concat((x.memory / 1024 / 1024 / 1024).toFixed(0), \"GB)\"), \" \");\n }))));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"CHUNK:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: setting.workletNodeSetting.inputChunkNum,\n onChange: function onChange(e) {\n setWorkletNodeSetting(_objectSpread(_objectSpread({}, setting.workletNodeSetting), {}, {\n inputChunkNum: Number(e.target.value)\n }));\n trancateBuffer();\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverReadChunkSize: Number(e.target.value)\n }));\n }\n }, nums.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x, \" (\", (x * 128 * 1000 / 48000).toFixed(1), \" ms, \", x * 128, \")\");\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"EXTRA:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: serverSetting.serverSetting.extraConvertSize,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n extraConvertSize: Number(e.target.value)\n }));\n trancateBuffer();\n }\n }, [1024 * 4, 1024 * 8, 1024 * 16, 1024 * 32, 1024 * 64, 1024 * 128].map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n })))), gpuSelect);\n }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setWorkletNodeSetting, edition]);\n return convertArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-2_ConvertArea.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ConvertArea: () => (/* binding */ ConvertArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ \"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\nvar ConvertArea = function ConvertArea(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n setting = _useAppState.setting,\n serverSetting = _useAppState.serverSetting,\n setWorkletNodeSetting = _useAppState.setWorkletNodeSetting,\n trancateBuffer = _useAppState.trancateBuffer;\n var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_6__.useAppRoot)(),\n appGuiSettingState = _useAppRoot.appGuiSettingState;\n var edition = appGuiSettingState.edition;\n var convertArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var nums;\n if (!props.inputChunkNums) {\n nums = [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048];\n } else {\n nums = props.inputChunkNums;\n }\n if (serverSetting.serverSetting.maxInputLength) {\n nums = nums.filter(function (x) {\n return x < serverSetting.serverSetting.maxInputLength / 128;\n });\n }\n var gpusEntry = (0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(serverSetting.serverSetting.gpus);\n gpusEntry.push({\n id: -1,\n name: \"cpu\",\n memory: 0\n });\n\n // const onClassName = serverSetting.serverSetting.gpu == 0 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n // const offClassName = serverSetting.serverSetting.gpu == 0 ? \"config-sub-area-button\" : \"config-sub-area-button-active\";\n\n var cpuClassName = serverSetting.serverSetting.gpu == -1 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpu0ClassName = serverSetting.serverSetting.gpu == 0 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpu1ClassName = serverSetting.serverSetting.gpu == 1 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpu2ClassName = serverSetting.serverSetting.gpu == 2 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpu3ClassName = serverSetting.serverSetting.gpu == 3 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var gpuSelect = edition.indexOf(\"onnxdirectML-cuda\") >= 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"GPU(dml):\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: -1\n }));\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n })),\n className: cpuClassName\n }, \"cpu\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 0\n }));\n case 2:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n })),\n className: gpu0ClassName\n }, \"0\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 1\n }));\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n })),\n className: gpu1ClassName\n }, \"1\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 2\n }));\n case 2:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n })),\n className: gpu2ClassName\n }, \"2\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n _context5.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 3\n }));\n case 2:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n })),\n className: gpu3ClassName\n }, \"3\")))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"GPU:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: serverSetting.serverSetting.gpu,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: Number(e.target.value)\n }));\n }\n }, gpusEntry.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.id,\n value: x.id\n }, x.name, x.name == \"cpu\" ? \"\" : \"(\".concat((x.memory / 1024 / 1024 / 1024).toFixed(0), \"GB)\"), \" \");\n }))));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"CHUNK:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: setting.workletNodeSetting.inputChunkNum,\n onChange: function onChange(e) {\n setWorkletNodeSetting(_objectSpread(_objectSpread({}, setting.workletNodeSetting), {}, {\n inputChunkNum: Number(e.target.value)\n }));\n trancateBuffer();\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverReadChunkSize: Number(e.target.value)\n }));\n }\n }, nums.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x, \" (\", (x * 128 * 1000 / 48000).toFixed(1), \" ms, \", x * 128, \")\");\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"EXTRA:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: serverSetting.serverSetting.extraConvertSize,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n extraConvertSize: Number(e.target.value)\n }));\n trancateBuffer();\n }\n }, [1024 * 4, 1024 * 8, 1024 * 16, 1024 * 32, 1024 * 64, 1024 * 128].map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n })))), gpuSelect);\n }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setWorkletNodeSetting, edition]);\n return convertArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-2_ConvertArea.tsx?"); /***/ }), @@ -444,7 +444,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DeviceArea: () => (/* binding */ DeviceArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../const */ \"./src/const.ts\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\nvar DeviceArea = function DeviceArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n setting = _useAppState.setting,\n serverSetting = _useAppState.serverSetting,\n audioContext = _useAppState.audioContext,\n setAudioOutputElementId = _useAppState.setAudioOutputElementId,\n initializedRef = _useAppState.initializedRef,\n setVoiceChangerClientSetting = _useAppState.setVoiceChangerClientSetting,\n startOutputRecording = _useAppState.startOutputRecording,\n stopOutputRecording = _useAppState.stopOutputRecording;\n var _useGuiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_7__.useGuiState)(),\n isConverting = _useGuiState.isConverting,\n audioInputForGUI = _useGuiState.audioInputForGUI,\n inputAudioDeviceInfo = _useGuiState.inputAudioDeviceInfo,\n setAudioInputForGUI = _useGuiState.setAudioInputForGUI,\n fileInputEchoback = _useGuiState.fileInputEchoback,\n setFileInputEchoback = _useGuiState.setFileInputEchoback,\n setAudioOutputForGUI = _useGuiState.setAudioOutputForGUI,\n audioOutputForGUI = _useGuiState.audioOutputForGUI,\n outputAudioDeviceInfo = _useGuiState.outputAudioDeviceInfo;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n inputHostApi = _useState2[0],\n setInputHostApi = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState3, 2),\n outputHostApi = _useState4[0],\n setOutputHostApi = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState6 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState5, 2),\n monitorHostApi = _useState6[0],\n setMonitorHostApi = _useState6[1];\n var audioSrcNode = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();\n var _useIndexedDB = (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.useIndexedDB)({\n clientType: null\n }),\n getItem = _useIndexedDB.getItem,\n setItem = _useIndexedDB.setItem;\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false),\n _useState8 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState7, 2),\n outputRecordingStarted = _useState8[0],\n setOutputRecordingStarted = _useState8[1];\n\n // (1) Audio Mode\n var deviceModeRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var enableServerAudio = serverSetting.serverSetting.enableServerAudio;\n var clientChecked = enableServerAudio == 1 ? false : true;\n var serverChecked = enableServerAudio == 1 ? true : false;\n var onDeviceModeChanged = function onDeviceModeChanged(val) {\n if (isConverting) {\n alert(\"cannot change mode when voice conversion is enabled\");\n return;\n }\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n enableServerAudio: val\n }));\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"AUDIO:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-checkbox-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"radio\",\n id: \"client-device\",\n name: \"device-mode\",\n checked: clientChecked,\n onChange: function onChange() {\n onDeviceModeChanged(0);\n }\n }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"label\", {\n htmlFor: \"client-device\"\n }, \"client\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-checkbox-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n className: \"left-padding-1\",\n type: \"radio\",\n id: \"server-device\",\n name: \"device-mode\",\n checked: serverChecked,\n onChange: function onChange() {\n onDeviceModeChanged(1);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"label\", {\n htmlFor: \"server-device\"\n }, \"server\")))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, isConverting]);\n\n // (2) Audio Input\n // キャッシュの設定は反映（たぶん、設定操作の時も起動していしまう。が問題は起こらないはず）\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n if (typeof setting.voiceChangerClientSetting.audioInput == \"string\") {\n if (inputAudioDeviceInfo.find(function (x) {\n // console.log(\"COMPARE:\", x.deviceId, appState.clientSetting.setting.audioInput)\n return x.deviceId == setting.voiceChangerClientSetting.audioInput;\n })) {\n setAudioInputForGUI(setting.voiceChangerClientSetting.audioInput);\n }\n }\n }, [inputAudioDeviceInfo, setting.voiceChangerClientSetting.audioInput]);\n\n // (2-1) クライアント\n var clientAudioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"input\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: audioInputForGUI,\n onChange: /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee(e) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n setAudioInputForGUI(e.target.value);\n if (!(e.target.value != \"file\")) {\n _context.next = 14;\n break;\n }\n _context.prev = 2;\n _context.next = 5;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: e.target.value\n }));\n case 5:\n _context.next = 14;\n break;\n case 7:\n _context.prev = 7;\n _context.t0 = _context[\"catch\"](2);\n alert(_context.t0);\n console.error(_context.t0);\n setAudioInputForGUI(\"none\");\n _context.next = 14;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: null\n }));\n case 14:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[2, 7]]);\n }));\n return function (_x) {\n return _ref.apply(this, arguments);\n };\n }()\n }, inputAudioDeviceInfo.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.deviceId,\n value: x.deviceId\n }, x.label);\n }))));\n }, [setVoiceChangerClientSetting, setting, inputAudioDeviceInfo, audioInputForGUI, serverSetting.serverSetting.enableServerAudio]);\n\n // (2-2) サーバ\n var serverAudioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioInputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (inputHostApi != \"ALL\" && x.hostAPI != inputHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n var currentValue = devices.find(function (x) {\n return (x.hostAPI == inputHostApi || inputHostApi == \"ALL\") && x.index == serverSetting.serverSetting.serverInputDeviceId;\n }) ? serverSetting.serverSetting.serverInputDeviceId : -1;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"input\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: inputHostApi,\n onChange: function onChange(e) {\n setInputHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: currentValue,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverInputDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"-1\",\n key: \"none\"\n }, \"none\")))));\n }, [inputHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (2-3) File\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n [_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK].forEach(function (x) {\n var audio = document.getElementById(x);\n if (audio) {\n audio.volume = fileInputEchoback ? 1 : 0;\n }\n });\n }, [fileInputEchoback]);\n var audioInputMediaRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (audioInputForGUI != \"file\" || serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onFileLoadClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n var url, audio, dst, audio_echo, audio_org;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.fileSelectorAsDataURL)(\"\");\n case 2:\n url = _context2.sent;\n // input stream for client.\n audio = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED);\n audio.pause();\n audio.srcObject = null;\n audio.src = url;\n _context2.next = 9;\n return audio.play();\n case 9:\n if (!audioSrcNode.current) {\n audioSrcNode.current = audioContext.createMediaElementSource(audio);\n }\n if (audioSrcNode.current.mediaElement != audio) {\n audioSrcNode.current = audioContext.createMediaElementSource(audio);\n }\n dst = audioContext.createMediaStreamDestination();\n audioSrcNode.current.connect(dst);\n try {\n setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: dst.stream\n }));\n } catch (e) {\n console.error(e);\n }\n audio_echo = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK);\n audio_echo.srcObject = dst.stream;\n audio_echo.play();\n audio_echo.volume = 0;\n setFileInputEchoback(false);\n\n // original stream to play.\n audio_org = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL);\n audio_org.src = url;\n audio_org.pause();\n case 22:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onFileLoadClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var echobackClass = fileInputEchoback ? \"config-sub-area-control-field-wav-file-echoback-button-active\" : \"config-sub-area-control-field-wav-file-echoback-button\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-wav-file left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-wav-file-audio-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL,\n controls: true,\n hidden: true\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n className: \"config-sub-area-control-field-wav-file-audio\",\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED,\n controls: true,\n controlsList: \"nodownload noplaybackrate\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK,\n controls: true,\n hidden: true\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"config-sub-area-control-field-wav-file-folder\",\n src: \"./assets/icons/folder.svg\",\n onClick: onFileLoadClicked\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: echobackClass,\n onClick: function onClick() {\n setFileInputEchoback(!fileInputEchoback);\n }\n }, \"echo\", fileInputEchoback))));\n }, [audioInputForGUI, fileInputEchoback, setting, serverSetting.serverSetting]);\n\n // (3) Audio Output\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var loadCache = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3() {\n var key;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return getItem(_const__WEBPACK_IMPORTED_MODULE_8__.INDEXEDDB_KEY_AUDIO_OUTPUT);\n case 2:\n key = _context3.sent;\n if (key) {\n setAudioOutputForGUI(key);\n }\n case 4:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function loadCache() {\n return _ref3.apply(this, arguments);\n };\n }();\n loadCache();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var setAudioOutput = /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4() {\n var mediaDeviceInfos;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return navigator.mediaDevices.enumerateDevices();\n case 2:\n mediaDeviceInfos = _context4.sent;\n [_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT, _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL, _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK].forEach(function (x) {\n var audio = document.getElementById(x);\n if (audio) {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n // Server Audio を使う場合はElementから音は出さない。\n audio.volume = 0;\n } else if (audioOutputForGUI == \"none\") {\n // @ts-ignore\n audio.setSinkId(\"\");\n if (x == _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK) {\n audio.volume = 0;\n } else {\n audio.volume = 0;\n }\n } else {\n var audioOutputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audiooutput\";\n });\n var found = audioOutputs.some(function (x) {\n return x.deviceId == audioOutputForGUI;\n });\n if (found) {\n // @ts-ignore // 例外キャッチできないので事前にIDチェックが必要らしい。！？\n audio.setSinkId(audioOutputForGUI);\n } else {\n console.warn(\"No audio output device. use default\");\n }\n if (x == _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK) {\n audio.volume = fileInputEchoback ? 1 : 0;\n } else {\n audio.volume = 1;\n }\n }\n }\n });\n case 4:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function setAudioOutput() {\n return _ref4.apply(this, arguments);\n };\n }();\n setAudioOutput();\n }, [audioOutputForGUI, fileInputEchoback, serverSetting.serverSetting.enableServerAudio]);\n\n // (3-1) クライアント\n var clientAudioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"output\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: audioOutputForGUI,\n onChange: function onChange(e) {\n setAudioOutputForGUI(e.target.value);\n setItem(_const__WEBPACK_IMPORTED_MODULE_8__.INDEXEDDB_KEY_AUDIO_OUTPUT, e.target.value);\n }\n }, outputAudioDeviceInfo.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.deviceId,\n value: x.deviceId\n }, x.label);\n }))));\n }, [serverSetting.serverSetting.enableServerAudio, outputAudioDeviceInfo, audioOutputForGUI]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n console.log(\"initializedRef.current\", initializedRef.current);\n setAudioOutputElementId(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT);\n }, [initializedRef.current]);\n\n // (3-2) サーバ\n var serverAudioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioOutputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (outputHostApi != \"ALL\" && x.hostAPI != outputHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n var currentValue = devices.find(function (x) {\n return (x.hostAPI == outputHostApi || outputHostApi == \"ALL\") && x.index == serverSetting.serverSetting.serverOutputDeviceId;\n }) ? serverSetting.serverSetting.serverOutputDeviceId : -1;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"output\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: outputHostApi,\n onChange: function onChange(e) {\n setOutputHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: currentValue,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverOutputDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"-1\",\n key: \"none\"\n }, \"none\")))));\n }, [outputHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (4) レコーダー\n var outputRecorderRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onOutputRecordStartClicked = /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n setOutputRecordingStarted(true);\n _context5.next = 3;\n return startOutputRecording();\n case 3:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function onOutputRecordStartClicked() {\n return _ref5.apply(this, arguments);\n };\n }();\n var onOutputRecordStopClicked = /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6() {\n var record;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n setOutputRecordingStarted(false);\n _context6.next = 3;\n return stopOutputRecording();\n case 3:\n record = _context6.sent;\n downloadRecord(record);\n case 5:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function onOutputRecordStopClicked() {\n return _ref6.apply(this, arguments);\n };\n }();\n var startClassName = outputRecordingStarted ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var stopClassName = outputRecordingStarted ? \"config-sub-area-button\" : \"config-sub-area-button-active\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"REC.\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onOutputRecordStartClicked,\n className: startClassName\n }, \"start\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onOutputRecordStopClicked,\n className: stopClassName\n }, \"stop\"))));\n }, [outputRecordingStarted, startOutputRecording, stopOutputRecording, serverSetting.serverSetting.enableServerAudio]);\n\n // (5) サンプリングレート\n var sampleRateRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"S.R.\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-sample-rate-select\",\n value: serverSetting.serverSetting.serverAudioSampleRate,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioSampleRate: Number(e.target.value)\n }));\n }\n }, [16000, 32000, 44100, 48000, 96000, 192000].map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n })))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (6) Monitor\n var serverMonitorRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioOutputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (monitorHostApi != \"ALL\" && x.hostAPI != monitorHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n filteredDevice.unshift( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: -1,\n key: -1\n }, \"none\"));\n var currentValue = devices.find(function (x) {\n return (x.hostAPI == monitorHostApi || monitorHostApi == \"ALL\") && x.index == serverSetting.serverSetting.serverMonitorDeviceId;\n }) ? serverSetting.serverSetting.serverMonitorDeviceId : -1;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"monitor\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: monitorHostApi,\n onChange: function onChange(e) {\n setMonitorHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: currentValue,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverMonitorDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice))));\n }, [monitorHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, deviceModeRow, sampleRateRow, clientAudioInputRow, serverAudioInputRow, audioInputMediaRow, clientAudioOutputRow, serverAudioOutputRow, serverMonitorRow, outputRecorderRow, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n hidden: true,\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT\n }));\n};\nvar downloadRecord = function downloadRecord(data) {\n var writeString = function writeString(view, offset, string) {\n for (var i = 0; i < string.length; i++) {\n view.setUint8(offset + i, string.charCodeAt(i));\n }\n };\n var floatTo16BitPCM = function floatTo16BitPCM(output, offset, input) {\n for (var i = 0; i < input.length; i++, offset += 2) {\n var s = Math.max(-1, Math.min(1, input[i]));\n output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);\n }\n };\n var buffer = new ArrayBuffer(44 + data.length * 2);\n var view = new DataView(buffer);\n\n // https://www.youfit.co.jp/archives/1418\n writeString(view, 0, \"RIFF\"); // RIFFヘッダ\n view.setUint32(4, 32 + data.length * 2, true); // これ以降のファイルサイズ\n writeString(view, 8, \"WAVE\"); // WAVEヘッダ\n writeString(view, 12, \"fmt \"); // fmtチャンク\n view.setUint32(16, 16, true); // fmtチャンクのバイト数\n view.setUint16(20, 1, true); // フォーマットID\n view.setUint16(22, 1, true); // チャンネル数\n view.setUint32(24, 48000, true); // サンプリングレート\n view.setUint32(28, 48000 * 2, true); // データ速度\n view.setUint16(32, 2, true); // ブロックサイズ\n view.setUint16(34, 16, true); // サンプルあたりのビット数\n writeString(view, 36, \"data\"); // dataチャンク\n view.setUint32(40, data.length * 2, true); // 波形データのバイト数\n floatTo16BitPCM(view, 44, data); // 波形データ\n var audioBlob = new Blob([view], {\n type: \"audio/wav\"\n });\n var url = URL.createObjectURL(audioBlob);\n var a = document.createElement(\"a\");\n a.href = url;\n a.download = \"output.wav\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-3_DeviceArea.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DeviceArea: () => (/* binding */ DeviceArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../const */ \"./src/const.ts\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\nvar DeviceArea = function DeviceArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n setting = _useAppState.setting,\n serverSetting = _useAppState.serverSetting,\n audioContext = _useAppState.audioContext,\n setAudioOutputElementId = _useAppState.setAudioOutputElementId,\n initializedRef = _useAppState.initializedRef,\n setVoiceChangerClientSetting = _useAppState.setVoiceChangerClientSetting,\n startOutputRecording = _useAppState.startOutputRecording,\n stopOutputRecording = _useAppState.stopOutputRecording;\n var _useGuiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_7__.useGuiState)(),\n isConverting = _useGuiState.isConverting,\n audioInputForGUI = _useGuiState.audioInputForGUI,\n inputAudioDeviceInfo = _useGuiState.inputAudioDeviceInfo,\n setAudioInputForGUI = _useGuiState.setAudioInputForGUI,\n fileInputEchoback = _useGuiState.fileInputEchoback,\n setFileInputEchoback = _useGuiState.setFileInputEchoback,\n setAudioOutputForGUI = _useGuiState.setAudioOutputForGUI,\n audioOutputForGUI = _useGuiState.audioOutputForGUI,\n outputAudioDeviceInfo = _useGuiState.outputAudioDeviceInfo,\n shareScreenEnabled = _useGuiState.shareScreenEnabled,\n setShareScreenEnabled = _useGuiState.setShareScreenEnabled;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n inputHostApi = _useState2[0],\n setInputHostApi = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState3, 2),\n outputHostApi = _useState4[0],\n setOutputHostApi = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState6 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState5, 2),\n monitorHostApi = _useState6[0],\n setMonitorHostApi = _useState6[1];\n var audioSrcNode = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();\n var displayMediaStream = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)(null);\n var _useIndexedDB = (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.useIndexedDB)({\n clientType: null\n }),\n getItem = _useIndexedDB.getItem,\n setItem = _useIndexedDB.setItem;\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false),\n _useState8 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState7, 2),\n outputRecordingStarted = _useState8[0],\n setOutputRecordingStarted = _useState8[1];\n\n // (1) Audio Mode\n var deviceModeRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var enableServerAudio = serverSetting.serverSetting.enableServerAudio;\n var clientChecked = enableServerAudio == 1 ? false : true;\n var serverChecked = enableServerAudio == 1 ? true : false;\n var onDeviceModeChanged = function onDeviceModeChanged(val) {\n if (isConverting) {\n alert(\"cannot change mode when voice conversion is enabled\");\n return;\n }\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n enableServerAudio: val\n }));\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"AUDIO:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-checkbox-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"radio\",\n id: \"client-device\",\n name: \"device-mode\",\n checked: clientChecked,\n onChange: function onChange() {\n onDeviceModeChanged(0);\n }\n }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"label\", {\n htmlFor: \"client-device\"\n }, \"client\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-checkbox-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n className: \"left-padding-1\",\n type: \"radio\",\n id: \"server-device\",\n name: \"device-mode\",\n checked: serverChecked,\n onChange: function onChange() {\n onDeviceModeChanged(1);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"label\", {\n htmlFor: \"server-device\"\n }, \"server\")))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, isConverting]);\n\n // (2) Audio Input\n // キャッシュの設定は反映（たぶん、設定操作の時も起動していしまう。が問題は起こらないはず）\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n if (typeof setting.voiceChangerClientSetting.audioInput == \"string\") {\n if (inputAudioDeviceInfo.find(function (x) {\n // console.log(\"COMPARE:\", x.deviceId, appState.clientSetting.setting.audioInput)\n return x.deviceId == setting.voiceChangerClientSetting.audioInput;\n })) {\n setAudioInputForGUI(setting.voiceChangerClientSetting.audioInput);\n }\n }\n }, [inputAudioDeviceInfo, setting.voiceChangerClientSetting.audioInput]);\n\n // (2-1) クライアント\n var clientAudioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"input\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: audioInputForGUI,\n onChange: /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee(e) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n setAudioInputForGUI(e.target.value);\n if (!(e.target.value != \"file\" && e.target.value != \"screen\")) {\n _context.next = 14;\n break;\n }\n _context.prev = 2;\n _context.next = 5;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: e.target.value\n }));\n case 5:\n _context.next = 14;\n break;\n case 7:\n _context.prev = 7;\n _context.t0 = _context[\"catch\"](2);\n alert(_context.t0);\n console.error(_context.t0);\n setAudioInputForGUI(\"none\");\n _context.next = 14;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: null\n }));\n case 14:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[2, 7]]);\n }));\n return function (_x) {\n return _ref.apply(this, arguments);\n };\n }()\n }, inputAudioDeviceInfo.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.deviceId,\n value: x.deviceId\n }, x.label);\n }))));\n }, [setVoiceChangerClientSetting, setting, inputAudioDeviceInfo, audioInputForGUI, serverSetting.serverSetting.enableServerAudio]);\n\n // (2-2) サーバ\n var serverAudioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioInputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (inputHostApi != \"ALL\" && x.hostAPI != inputHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n var currentValue = devices.find(function (x) {\n return (x.hostAPI == inputHostApi || inputHostApi == \"ALL\") && x.index == serverSetting.serverSetting.serverInputDeviceId;\n }) ? serverSetting.serverSetting.serverInputDeviceId : -1;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"input\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: inputHostApi,\n onChange: function onChange(e) {\n setInputHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: currentValue,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverInputDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"-1\",\n key: \"none\"\n }, \"none\")))));\n }, [inputHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (2-3) File\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n [_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK].forEach(function (x) {\n var audio = document.getElementById(x);\n if (audio) {\n audio.volume = fileInputEchoback ? 1 : 0;\n }\n });\n }, [fileInputEchoback]);\n var audioInputMediaRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (audioInputForGUI != \"file\" || serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onFileLoadClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n var url, audio, dst, audio_echo, audio_org;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.fileSelectorAsDataURL)(\"\");\n case 2:\n url = _context2.sent;\n // input stream for client.\n audio = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED);\n audio.pause();\n audio.srcObject = null;\n audio.src = url;\n _context2.next = 9;\n return audio.play();\n case 9:\n if (!audioSrcNode.current) {\n audioSrcNode.current = audioContext.createMediaElementSource(audio);\n }\n if (audioSrcNode.current.mediaElement != audio) {\n audioSrcNode.current = audioContext.createMediaElementSource(audio);\n }\n dst = audioContext.createMediaStreamDestination();\n audioSrcNode.current.connect(dst);\n try {\n setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: dst.stream\n }));\n } catch (e) {\n console.error(e);\n }\n audio_echo = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK);\n audio_echo.srcObject = dst.stream;\n audio_echo.play();\n audio_echo.volume = 0;\n setFileInputEchoback(false);\n\n // original stream to play.\n audio_org = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL);\n audio_org.src = url;\n audio_org.pause();\n case 22:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onFileLoadClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var echobackClass = fileInputEchoback ? \"config-sub-area-control-field-wav-file-echoback-button-active\" : \"config-sub-area-control-field-wav-file-echoback-button\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-wav-file left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-wav-file-audio-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL,\n controls: true,\n hidden: true\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n className: \"config-sub-area-control-field-wav-file-audio\",\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED,\n controls: true,\n controlsList: \"nodownload noplaybackrate\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK,\n controls: true,\n hidden: true\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"config-sub-area-control-field-wav-file-folder\",\n src: \"./assets/icons/folder.svg\",\n onClick: onFileLoadClicked\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: echobackClass,\n onClick: function onClick() {\n setFileInputEchoback(!fileInputEchoback);\n }\n }, \"echo\", fileInputEchoback))));\n }, [audioInputForGUI, fileInputEchoback, setting, serverSetting.serverSetting]);\n var audioInputScreenRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (audioInputForGUI != \"screen\" || serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onSelectScreenClicked = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3() {\n var _displayMediaStream$c;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n // 既存msをクローズ\n if (displayMediaStream.current) {\n displayMediaStream.current.getTracks().forEach(function (x) {\n x.stop();\n });\n displayMediaStream.current = null;\n }\n\n // 共有ストップ\n if (!(shareScreenEnabled == true)) {\n _context3.next = 4;\n break;\n }\n setShareScreenEnabled(false);\n return _context3.abrupt(\"return\");\n case 4:\n _context3.prev = 4;\n _context3.next = 7;\n return navigator.mediaDevices.getDisplayMedia({\n video: true,\n audio: true\n });\n case 7:\n displayMediaStream.current = _context3.sent;\n _context3.next = 13;\n break;\n case 10:\n _context3.prev = 10;\n _context3.t0 = _context3[\"catch\"](4);\n return _context3.abrupt(\"return\");\n case 13:\n if (displayMediaStream.current) {\n _context3.next = 15;\n break;\n }\n return _context3.abrupt(\"return\");\n case 15:\n if (((_displayMediaStream$c = displayMediaStream.current) === null || _displayMediaStream$c === void 0 ? void 0 : _displayMediaStream$c.getAudioTracks().length) == 0) {\n displayMediaStream.current.getTracks().forEach(function (x) {\n x.stop();\n });\n displayMediaStream.current = null;\n }\n try {\n setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: displayMediaStream.current\n }));\n } catch (e) {\n console.error(e);\n }\n setShareScreenEnabled(!shareScreenEnabled);\n case 18:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3, null, [[4, 10]]);\n }));\n return function onSelectScreenClicked() {\n return _ref3.apply(this, arguments);\n };\n }();\n var echobackClass = shareScreenEnabled ? \"config-sub-area-control-field-screen-select-button-active\" : \"config-sub-area-control-field-screen-select-button\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-screen-select\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: echobackClass,\n onClick: function onClick() {\n onSelectScreenClicked();\n }\n }, \"capture\"))));\n }, [audioInputForGUI, setting, serverSetting.serverSetting, shareScreenEnabled, setShareScreenEnabled]);\n\n // (3) Audio Output\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var loadCache = /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4() {\n var key;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return getItem(_const__WEBPACK_IMPORTED_MODULE_8__.INDEXEDDB_KEY_AUDIO_OUTPUT);\n case 2:\n key = _context4.sent;\n if (key) {\n setAudioOutputForGUI(key);\n }\n case 4:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function loadCache() {\n return _ref4.apply(this, arguments);\n };\n }();\n loadCache();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var setAudioOutput = /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5() {\n var mediaDeviceInfos;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n _context5.next = 2;\n return navigator.mediaDevices.enumerateDevices();\n case 2:\n mediaDeviceInfos = _context5.sent;\n [_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT, _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL, _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK].forEach(function (x) {\n var audio = document.getElementById(x);\n if (audio) {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n // Server Audio を使う場合はElementから音は出さない。\n audio.volume = 0;\n } else if (audioOutputForGUI == \"none\") {\n // @ts-ignore\n audio.setSinkId(\"\");\n if (x == _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK) {\n audio.volume = 0;\n } else {\n audio.volume = 0;\n }\n } else {\n var audioOutputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audiooutput\";\n });\n var found = audioOutputs.some(function (x) {\n return x.deviceId == audioOutputForGUI;\n });\n if (found) {\n // @ts-ignore // 例外キャッチできないので事前にIDチェックが必要らしい。！？\n audio.setSinkId(audioOutputForGUI);\n } else {\n console.warn(\"No audio output device. use default\");\n }\n if (x == _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK) {\n audio.volume = fileInputEchoback ? 1 : 0;\n } else {\n audio.volume = 1;\n }\n }\n }\n });\n case 4:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function setAudioOutput() {\n return _ref5.apply(this, arguments);\n };\n }();\n setAudioOutput();\n }, [audioOutputForGUI, fileInputEchoback, serverSetting.serverSetting.enableServerAudio]);\n\n // (3-1) クライアント\n var clientAudioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"output\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: audioOutputForGUI,\n onChange: function onChange(e) {\n setAudioOutputForGUI(e.target.value);\n setItem(_const__WEBPACK_IMPORTED_MODULE_8__.INDEXEDDB_KEY_AUDIO_OUTPUT, e.target.value);\n }\n }, outputAudioDeviceInfo.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.deviceId,\n value: x.deviceId\n }, x.label);\n }))));\n }, [serverSetting.serverSetting.enableServerAudio, outputAudioDeviceInfo, audioOutputForGUI]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n console.log(\"initializedRef.current\", initializedRef.current);\n setAudioOutputElementId(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT);\n }, [initializedRef.current]);\n\n // (3-2) サーバ\n var serverAudioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioOutputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (outputHostApi != \"ALL\" && x.hostAPI != outputHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n var currentValue = devices.find(function (x) {\n return (x.hostAPI == outputHostApi || outputHostApi == \"ALL\") && x.index == serverSetting.serverSetting.serverOutputDeviceId;\n }) ? serverSetting.serverSetting.serverOutputDeviceId : -1;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"output\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: outputHostApi,\n onChange: function onChange(e) {\n setOutputHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: currentValue,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverOutputDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"-1\",\n key: \"none\"\n }, \"none\")))));\n }, [outputHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (4) レコーダー\n var outputRecorderRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onOutputRecordStartClicked = /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n setOutputRecordingStarted(true);\n _context6.next = 3;\n return startOutputRecording();\n case 3:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function onOutputRecordStartClicked() {\n return _ref6.apply(this, arguments);\n };\n }();\n var onOutputRecordStopClicked = /*#__PURE__*/function () {\n var _ref7 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee7() {\n var record;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee7$(_context7) {\n while (1) switch (_context7.prev = _context7.next) {\n case 0:\n setOutputRecordingStarted(false);\n _context7.next = 3;\n return stopOutputRecording();\n case 3:\n record = _context7.sent;\n downloadRecord(record);\n case 5:\n case \"end\":\n return _context7.stop();\n }\n }, _callee7);\n }));\n return function onOutputRecordStopClicked() {\n return _ref7.apply(this, arguments);\n };\n }();\n var startClassName = outputRecordingStarted ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var stopClassName = outputRecordingStarted ? \"config-sub-area-button\" : \"config-sub-area-button-active\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"REC.\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onOutputRecordStartClicked,\n className: startClassName\n }, \"start\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onOutputRecordStopClicked,\n className: stopClassName\n }, \"stop\"))));\n }, [outputRecordingStarted, startOutputRecording, stopOutputRecording, serverSetting.serverSetting.enableServerAudio]);\n\n // (5) サンプリングレート\n var sampleRateRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"S.R.\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-sample-rate-select\",\n value: serverSetting.serverSetting.serverAudioSampleRate,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioSampleRate: Number(e.target.value)\n }));\n }\n }, [16000, 32000, 44100, 48000, 96000, 192000].map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n })))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (6) Monitor\n var serverMonitorRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioOutputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (monitorHostApi != \"ALL\" && x.hostAPI != monitorHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n filteredDevice.unshift( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: -1,\n key: -1\n }, \"none\"));\n var currentValue = devices.find(function (x) {\n return (x.hostAPI == monitorHostApi || monitorHostApi == \"ALL\") && x.index == serverSetting.serverSetting.serverMonitorDeviceId;\n }) ? serverSetting.serverSetting.serverMonitorDeviceId : -1;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"monitor\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: monitorHostApi,\n onChange: function onChange(e) {\n setMonitorHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: currentValue,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverMonitorDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice))));\n }, [monitorHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, deviceModeRow, sampleRateRow, clientAudioInputRow, serverAudioInputRow, audioInputMediaRow, audioInputScreenRow, clientAudioOutputRow, serverAudioOutputRow, serverMonitorRow, outputRecorderRow, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n hidden: true,\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT\n }));\n};\nvar downloadRecord = function downloadRecord(data) {\n var writeString = function writeString(view, offset, string) {\n for (var i = 0; i < string.length; i++) {\n view.setUint8(offset + i, string.charCodeAt(i));\n }\n };\n var floatTo16BitPCM = function floatTo16BitPCM(output, offset, input) {\n for (var i = 0; i < input.length; i++, offset += 2) {\n var s = Math.max(-1, Math.min(1, input[i]));\n output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);\n }\n };\n var buffer = new ArrayBuffer(44 + data.length * 2);\n var view = new DataView(buffer);\n\n // https://www.youfit.co.jp/archives/1418\n writeString(view, 0, \"RIFF\"); // RIFFヘッダ\n view.setUint32(4, 32 + data.length * 2, true); // これ以降のファイルサイズ\n writeString(view, 8, \"WAVE\"); // WAVEヘッダ\n writeString(view, 12, \"fmt \"); // fmtチャンク\n view.setUint32(16, 16, true); // fmtチャンクのバイト数\n view.setUint16(20, 1, true); // フォーマットID\n view.setUint16(22, 1, true); // チャンネル数\n view.setUint32(24, 48000, true); // サンプリングレート\n view.setUint32(28, 48000 * 2, true); // データ速度\n view.setUint16(32, 2, true); // ブロックサイズ\n view.setUint16(34, 16, true); // サンプルあたりのビット数\n writeString(view, 36, \"data\"); // dataチャンク\n view.setUint32(40, data.length * 2, true); // 波形データのバイト数\n floatTo16BitPCM(view, 44, data); // 波形データ\n var audioBlob = new Blob([view], {\n type: \"audio/wav\"\n });\n var url = URL.createObjectURL(audioBlob);\n var a = document.createElement(\"a\");\n a.href = url;\n a.download = \"output.wav\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-3_DeviceArea.tsx?"); /***/ }), @@ -543,7 +543,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/101_RotatedButton.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./Error.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/Error.css\");\n// Imports\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:root {\r\n --text-color: #333;\r\n --company-color1: rgba(64, 119, 187, 1);\r\n --company-color2: rgba(29, 47, 78, 1);\r\n --company-color3: rgba(255, 255, 255, 1);\r\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\r\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\r\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\r\n --global-shadow-color: rgba(0, 0, 0, 0.4);\r\n\r\n --sidebar-transition-time: 0.2s;\r\n --sidebar-transition-time-quick: 0.1s;\r\n --sidebar-transition-animation: ease-in-out;\r\n\r\n --header-height: 1.5rem;\r\n --right-sidebar-width: 320px;\r\n\r\n --dialog-border-color: rgba(100, 100, 100, 1);\r\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\r\n --dialog-background-color: rgba(255, 255, 255, 1);\r\n --dialog-primary-color: rgba(19, 70, 209, 1);\r\n --dialog-active-color: rgba(40, 70, 209, 1);\r\n --dialog-input-border-color: rgba(200, 200, 200, 1);\r\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\r\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\r\n\r\n --body-video-seeker-height: 3rem;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: \"Poppins\", sans-serif;\r\n}\r\nhtml {\r\n font-size: 16px;\r\n}\r\nbody {\r\n height: 100%;\r\n width: 100%;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n color: var(--text-color);\r\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\r\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);\r\n}\r\n#app {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.first-gesture {\r\n background: rgba(200, 0, 0, 0.2);\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n}\r\n\r\n/* Main + Section Partition*/\r\n.main-body {\r\n height: 100%;\r\n width: 100%;\r\n padding: 2rem;\r\n font-family: \"Yusei Magic\", sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n font-size: 1rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n}\r\n/* Title */\r\n.main-body .top-title .title {\r\n font-size: 3rem;\r\n }\r\n.main-body .top-title .top-title-version {\r\n margin-left: 2rem;\r\n font-size: 1.2rem;\r\n background: linear-gradient(transparent 60%, yellow 30%);\r\n }\r\n.main-body .top-title .top-title-version-number {\r\n margin-left: 0.3rem;\r\n font-size: 0.8rem;\r\n }\r\n.main-body .top-title .belongings {\r\n margin-left: 1rem;\r\n margin-right: 1rem;\r\n }\r\n.main-body .top-title .belongings .link {\r\n margin-left: 1rem;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n }\r\n/* Partition */\r\n.main-body .partition {\r\n width: 100%;\r\n }\r\n.main-body .partition .partition-header {\r\n font-weight: 700;\r\n color: rgb(71, 69, 69);\r\n display: flex;\r\n }\r\n.main-body .partition .partition-header .caret {\r\n width: 2rem;\r\n }\r\n.main-body .partition .partition-header .title {\r\n font-size: 1.1rem;\r\n }\r\n.main-body .partition .partition-header .belongings {\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-end;\r\n margin-left: 10px;\r\n }\r\n.main-body .partition .partition-header .belongings .belongings-checkbox {\r\n margin-bottom: 3px;\r\n }\r\n.main-body .partition .partition-content {\r\n position: static;\r\n overflow-y: hidden;\r\n }\r\n.main-body .partition .row-split {\r\n }\r\n.state-control-checkbox:checked + .partition .partition-content {\r\n max-height: 700px;\r\n background: rgba(255, 255, 255, 0.3);\r\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\r\n}\r\n.state-control-checkbox + .partition .partition-content {\r\n max-height: 0px;\r\n background: rgba(233, 233, 255, 0.3);\r\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\r\n}\r\n/* ROW */\r\n\r\n.split-8-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-8-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 80%;\r\n }\r\n\r\n.split-8-2 > div:nth-child(2) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-6-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-6-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 60%;\r\n }\r\n.split-6-4 > div:nth-child(2) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-5-5 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-5-5 > div:nth-child(1) {\r\n left: 0px;\r\n width: 50%;\r\n }\r\n.split-5-5 > div:nth-child(2) {\r\n left: 50%;\r\n width: 50%;\r\n }\r\n.split-4-6 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-4-6 > div:nth-child(1) {\r\n left: 0px;\r\n width: 40%;\r\n }\r\n.split-4-6 > div:nth-child(2) {\r\n left: 40%;\r\n width: 60%;\r\n }\r\n.split-3-7 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-7 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-7 > div:nth-child(2) {\r\n left: 30%;\r\n width: 70%;\r\n }\r\n\r\n.split-2-8 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-2-8 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n\r\n.split-2-8 > div:nth-child(2) {\r\n left: 20%;\r\n width: 80%;\r\n }\r\n\r\n.split-1-8-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-1-8-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 10%;\r\n }\r\n\r\n.split-1-8-1 > div:nth-child(2) {\r\n left: 10%;\r\n width: 80%;\r\n }\r\n\r\n.split-1-8-1 > div:nth-child(3) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n.split-2-2-6 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-2-2-6 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n.split-2-2-6 > div:nth-child(2) {\r\n left: 20%;\r\n width: 20%;\r\n }\r\n.split-2-2-6 > div:nth-child(3) {\r\n left: 40%;\r\n width: 60%;\r\n }\r\n.split-3-3-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-3-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-3-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 30%;\r\n }\r\n.split-3-3-4 > div:nth-child(3) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n\r\n.split-3-4-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-3-4-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n\r\n.split-3-4-3 > div:nth-child(2) {\r\n left: 30%;\r\n width: 40%;\r\n }\r\n\r\n.split-3-4-3 > div:nth-child(3) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-2-5-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-2-5-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n.split-2-5-3 > div:nth-child(2) {\r\n left: 20%;\r\n width: 50%;\r\n }\r\n.split-2-5-3 > div:nth-child(3) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-4-4-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-4-4-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 40%;\r\n }\r\n.split-4-4-2 > div:nth-child(2) {\r\n left: 40%;\r\n width: 40%;\r\n }\r\n.split-4-4-2 > div:nth-child(3) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-1-4-4-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-1-4-4-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 10%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(2) {\r\n left: 10%;\r\n width: 40%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(3) {\r\n left: 50%;\r\n width: 40%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(4) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n\r\n.split-3-2-2-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-3-2-2-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(3) {\r\n left: 50%;\r\n width: 20%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(4) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-3-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(3) {\r\n left: 50%;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(4) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-3-1-2-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-1-2-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 10%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(3) {\r\n left: 40%;\r\n width: 20%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(4) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-3-2-1-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-1-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(3) {\r\n left: 50%;\r\n width: 10%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(4) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-3-2-2-2-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-2-2-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(3) {\r\n left: 50%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(4) {\r\n left: 70%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(5) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-1-1-1-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(3) {\r\n left: 40%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(4) {\r\n left: 50%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(5) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.w20 {\r\n width: 20%;\r\n}\r\n.bold {\r\n font-weight: 700;\r\n}\r\n.w40 {\r\n width: 40%;\r\n}\r\n\r\n.underline {\r\n border-bottom: 3px solid #333;\r\n}\r\n.left-padding-05 {\r\n padding-left: 0.5rem;\r\n}\r\n.left-padding-1 {\r\n padding-left: 1rem;\r\n}\r\n.left-padding-2 {\r\n padding-left: 2rem;\r\n}\r\n.left-margin-1 {\r\n margin-left: 1rem;\r\n}\r\n.left-margin-2 {\r\n margin-left: 2rem;\r\n}\r\n.highlight {\r\n background-color: rgba(200, 200, 255, 0.3);\r\n}\r\n.guided {\r\n /* background-color: rgba(9, 133, 67, 0.3); */\r\n background-color: rgba(159, 165, 162, 0.1);\r\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\r\n}\r\n\r\n.divider {\r\n height: 0.8rem;\r\n /* background-color: rgba(16, 210, 113, 0.1); */\r\n background-color: rgba(31, 42, 36, 0.1);\r\n}\r\n\r\n.body-section-title {\r\n font-size: 1.5rem;\r\n color: rgb(51, 49, 49);\r\n}\r\n.body-sub-section-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: rgb(3, 53, 12);\r\n}\r\n\r\n.body-item-title {\r\n color: rgb(51, 99, 49);\r\n display: flex;\r\n}\r\n.body-item-text {\r\n color: rgb(30, 30, 30);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n.body-item-text .body-item-text-item {\r\n padding-left: 1rem;\r\n }\r\n.body-item-text-small {\r\n color: rgb(30, 30, 30);\r\n font-size: 0.7rem;\r\n}\r\n.body-item-text-em {\r\n color: rgb(250, 30, 30);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 700;\r\n}\r\n\r\n.body-input-container {\r\n display: flex;\r\n}\r\n.body-item-input {\r\n width: 60%;\r\n}\r\n.body-item-input-slider {\r\n width: 60%;\r\n}\r\n.body-item-input-slider-label {\r\n margin-right: 1rem;\r\n}\r\n.body-item-input-slider-val {\r\n margin-left: 1rem;\r\n}\r\n.body-item-input-slider-2nd {\r\n width: 60%;\r\n accent-color: #33f;\r\n}\r\n\r\n.body-button-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.body-button-container > div {\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n\r\n.body-button-container .body-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n }\r\n\r\n.body-button-container .body-button:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.body-button-container .body-button-disabled {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n vertical-align: middle;\r\n background: #ddd;\r\n }\r\n\r\n.body-button-container .body-button-active {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n }\r\n\r\n.body-button-container .body-button-stanby {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n }\r\n\r\n.body-button-container .body-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.body-button-container-space-around {\r\n justify-content: space-around;\r\n}\r\n\r\n.body-select {\r\n color: rgb(30, 30, 30);\r\n max-width: 100%;\r\n}\r\n\r\n.body-select-50 {\r\n color: rgb(30, 30, 30);\r\n max-width: 50%;\r\n height: 1.5rem;\r\n}\r\n.select-option-red {\r\n color: #f66;\r\n font-weight: 700;\r\n}\r\n\r\n.body-image-container,\r\n.body-wav-container {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n.body-image-container .body-image-container-title,\r\n .body-image-container .body-wav-container-title,\r\n .body-wav-container .body-image-container-title,\r\n .body-wav-container .body-wav-container-title {\r\n width: 20%;\r\n }\r\n\r\n.body-image-container .body-image-container-img,\r\n .body-image-container .body-wav-container-wav,\r\n .body-wav-container .body-image-container-img,\r\n .body-wav-container .body-wav-container-wav {\r\n width: 80%;\r\n }\r\n\r\n.donate-img {\r\n border-radius: 35px;\r\n height: 1.5rem;\r\n}\r\n\r\n/* Dialog */\r\n.dialog-container,\r\n.dialog-container2 {\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: -1;\r\n display: none;\r\n}\r\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\r\n color: var(--company-color2);\r\n width: 40rem;\r\n max-height: 80vh;\r\n border: 2px solid var(--dialog-border-color);\r\n border-radius: 20px;\r\n flex-direction: column;\r\n align-items: center;\r\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\r\n background: var(--dialog-background-color);\r\n overflow: hidden;\r\n display: flex;\r\n }\r\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\r\n margin-top: 20px;\r\n background: var(--company-color2);\r\n color: #fff;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\r\n width: 90%;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\r\n font-family: \"Chicle\", cursive;\r\n font-size: 3rem;\r\n text-align: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\r\n margin-top: 1rem;\r\n margin-bottom: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 20px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\r\n width: 90%;\r\n max-height: 70vh;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\r\n font-weight: 700;\r\n margin: 5px 5px 5px 5px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px 5px 1px 5px;\r\n margin-left: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\r\n max-height: 60vh;\r\n width: 100%;\r\n overflow-y: scroll;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot {\r\n height: 5rem;\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon {\r\n width: 5rem;\r\n height: 5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable {\r\n width: 5rem;\r\n height: 5rem;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail {\r\n display: flex;\r\n flex-direction: column;\r\n font-size: 0.8rem;\r\n border-bottom: solid 1px #aaa;\r\n width: 80%;\r\n overflow-y: scroll;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track {\r\n background-color: #eee;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb {\r\n background: #f7cfec80;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label {\r\n width: 20%;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value {\r\n width: 55%;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download {\r\n width: 55%;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable {\r\n width: 55%;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit {\r\n width: 55%;\r\n font-weight: 700;\r\n color: #f00;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button {\r\n width: 15%;\r\n height: 90%;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: solid 1px #a00;\r\n width: 20%;\r\n font-size: 0.8rem;\r\n padding: 4px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n vertical-align: middle;\r\n background: #ddd;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\r\n font-size: 1rem;\r\n padding-left: 0.5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container {\r\n font-size: 0.9rem;\r\n padding-left: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 0.2rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label {\r\n width: 5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value {\r\n width: 20rem;\r\n color: #f00;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container {\r\n display: flex;\r\n flex-direction: row;\r\n margin-top: 1rem;\r\n margin-bottom: 0.5rem;\r\n justify-content: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button {\r\n /* width: 12rem; */\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px 10px 1px 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title {\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 0px 0px 0px 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\r\n margin: 0px 0px 0px 0.5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons {\r\n margin: 0px 0px 0px 0.5rem;\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button {\r\n margin: 0px 0.5rem 0px 0.5rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 0px 10px 0px 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container-show {\r\n display: flex;\r\n}\r\n\r\n.state-control-checkbox:checked ~ .dialog-container {\r\n background: rgba(200, 200, 200, 0.4);\r\n animation-name: dialog-show;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox ~ .dialog-container {\r\n background: rgba(100, 100, 100, 0.4);\r\n animation-name: dialog-hide;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox:checked + .dialog-frame {\r\n display: flex;\r\n}\r\n.state-control-checkbox + .dialog-frame {\r\n display: none;\r\n}\r\n\r\n@keyframes dialog-hide {\r\n from {\r\n opacity: 1;\r\n z-index: 200;\r\n }\r\n 90% {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n to {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n}\r\n\r\n@keyframes dialog-show {\r\n from {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n 10% {\r\n z-index: 200;\r\n }\r\n to {\r\n opacity: 1;\r\n z-index: 200;\r\n }\r\n}\r\n\r\n.state-control-checkbox:checked ~ .dialog-container2 {\r\n background: rgba(200, 200, 200, 0.4);\r\n animation-name: dialog-show2;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox ~ .dialog-container2 {\r\n background: rgba(100, 100, 100, 0.4);\r\n animation-name: dialog-hide2;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n/* .state-control-checkbox:checked + .dialog-frame {\r\n display: flex;\r\n}\r\n.state-control-checkbox + .dialog-frame {\r\n display: none;\r\n} */\r\n\r\n@keyframes dialog-hide2 {\r\n from {\r\n opacity: 1;\r\n z-index: 400;\r\n }\r\n 90% {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n to {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n}\r\n\r\n@keyframes dialog-show2 {\r\n from {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n 10% {\r\n z-index: 400;\r\n }\r\n to {\r\n opacity: 1;\r\n z-index: 400;\r\n }\r\n}\r\n\r\n.tooltip-text {\r\n display: none;\r\n position: absolute;\r\n padding: 4px;\r\n font-size: 0.7rem;\r\n line-height: 2rem;\r\n color: #ddd;\r\n border-radius: 5px;\r\n background: #444;\r\n /* width: 100px; */\r\n}\r\n.tooltip-text-100px {\r\n width: 100px;\r\n}\r\n.tooltip-text-thin {\r\n line-height: 1rem;\r\n}\r\n.tooltip-text-right {\r\n line-height: 1rem;\r\n}\r\n.tooltip-text:before {\r\n content: \"\";\r\n position: absolute;\r\n top: -1.4rem;\r\n border: 12px solid transparent;\r\n border-top: 16px solid #444;\r\n margin-left: 0rem;\r\n transform: rotateZ(180deg);\r\n}\r\n.tooltip:hover .tooltip-text {\r\n display: inline-block;\r\n top: 30px;\r\n left: 0px;\r\n}\r\n.tooltip:hover .tooltip-text-lower {\r\n display: inline-block;\r\n top: 60px;\r\n left: 0px;\r\n}\r\n\r\n.tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n\r\n/* ################## */\r\n.merge-field-container {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.merge-field-container .merge-field {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-field-container .merge-field .merge-field-elem {\r\n padding-left: 5px;\r\n }\r\n.merge-field-container .merge-field .red {\r\n color: #f00;\r\n }\r\n.merge-field-container .merge-field .purple {\r\n color: #33f;\r\n }\r\n.merge-field-container .merge-field .grey-bold {\r\n color: #555;\r\n font-weight: 800;\r\n }\r\n.model-slot-area {\r\n display: inline-block;\r\n background: var(--company-color2);\r\n border-radius: 10px;\r\n padding: 20px;\r\n}\r\n.model-slot-area .model-slot-panel {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n /* width: calc(30rem + 40px + 10px); */\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 2px;\r\n background: #333;\r\n cursor: pointer;\r\n padding: 5px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n.model-slot-tile-container,\r\n.model-slot-tile-container-selected {\r\n width: 6rem;\r\n height: 6rem;\r\n border-radius: 2px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n.model-slot-tile-container-selected {\r\n background: #43030c;\r\n}\r\n.model-slot-tile-container:hover {\r\n background: #43030c;\r\n}\r\n\r\n.model-slot-tile-icon-div {\r\n width: 5rem;\r\n height: 5rem;\r\n padding-top: 4px;\r\n position: relative;\r\n}\r\n.model-slot-tile-icon {\r\n width: 5rem;\r\n height: 5rem;\r\n -o-object-fit: contain;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n position: absolute;\r\n}\r\n.model-slot-tile-vctype {\r\n position: absolute;\r\n font-size: 0.6rem;\r\n font-weight: 800;\r\n top: 5px;\r\n left: 2px;\r\n background: RGBA(10, 200, 100, 0.6);\r\n border-radius: 5px;\r\n padding: 0px 2px 0px 2px;\r\n}\r\n.model-slot-tile-icon-no-entry {\r\n color: gray;\r\n position: absolute;\r\n top: 2rem;\r\n}\r\n.model-slot-tile-dscription {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n color: navajowhite;\r\n padding-top: 4px;\r\n}\r\n\r\n.character-area {\r\n display: flex;\r\n gap: 5px;\r\n padding: 20px;\r\n}\r\n\r\n.character-area .portrait-area {\r\n width: 20rem;\r\n height: 20rem;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container {\r\n position: relative;\r\n width: 20rem;\r\n height: 20rem;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait {\r\n width: 20rem;\r\n height: 20rem;\r\n -o-object-fit: contain;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n position: absolute;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-status {\r\n width: 5rem;\r\n background: rgba(100, 100, 100, 0.5);\r\n color: white;\r\n position: absolute;\r\n padding: 0px 0px 0px 3px;\r\n font-size: 0.7rem;\r\n left: 5px;\r\n top: 5px;\r\n border-radius: 2px;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-status .portrait-area-status-vctype {\r\n font-weight: 800;\r\n color: #866;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\r\n width: 5rem;\r\n background: rgba(100, 100, 100, 0.5);\r\n color: white;\r\n position: absolute;\r\n paddig: 2px;\r\n font-size: 0.7rem;\r\n right: 5px;\r\n bottom: 5px;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\r\n color: white;\r\n }\r\n\r\n.character-area .character-area-control-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control {\r\n display: flex;\r\n gap: 3px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 10px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\r\n width: 5rem;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\r\n width: 5rem;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\r\n width: 4rem;\r\n font-weight: 700;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\r\n /* width: 20rem; */\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\r\n width: 2rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\r\n width: 10rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\r\n width: 3rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-text {\r\n padding: 0px 1px 0px 1px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 2px;\r\n background: #666;\r\n cursor: pointer;\r\n padding: 5px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n\r\n/* audio::-webkit-media-controls-play-button,\r\naudio::-webkit-media-controls-panel {\r\n background-color: #ff0;\r\n height: 1rem;\r\n}\r\naudio::-webkit-media-controls-enclosure {\r\n max-height: 1rem;\r\n}\r\naudio::-webkit-media-controls {\r\n justify-content: start;\r\n}\r\naudio::-webkit-media-controls-overlay-enclosure{\r\n height: 1rem;\r\n} */\r\n\r\n.config-area {\r\n display: flex;\r\n gap: 5px;\r\n padding: 20px;\r\n}\r\n\r\n.config-area .config-sub-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control {\r\n display: flex;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\r\n width: 5rem;\r\n font-weight: 700;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\r\n width: 20rem;\r\n font-weight: 700;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\r\n width: 15rem;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container .config-sub-area-noise-checkbox-container {\r\n display: flex;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-kind {\r\n width: 1rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-slider {\r\n width: 10rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-val {\r\n width: 3rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n align-items: center;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\r\n border: solid 2px #999;\r\n color: white;\r\n background: #666;\r\n\r\n cursor: pointer;\r\n\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\r\n border: solid 2px #999;\r\n color: white;\r\n background: #844;\r\n\r\n cursor: pointer;\r\n\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-filter {\r\n max-width: 30%;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-select {\r\n max-width: 70%;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container {\r\n height: 1rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container .config-sub-area-control-field-wav-file-audio {\r\n height: 1rem;\r\n width: 15rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-folder {\r\n height: 1rem;\r\n width: 1rem;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button {\r\n border: solid 1px #333;\r\n background: #fff;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button-active {\r\n font-size: 0.8rem;\r\n border: solid 1px #333;\r\n border-radius: 5px;\r\n background: #ada;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field-long {\r\n width: 30rem;\r\n }\r\n\r\n.headerArea {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.headerArea .title1 {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n align-items: flex-end;\r\n }\r\n\r\n.headerArea .title1 .title {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: #333;\r\n text-shadow: 0 0 2px #333;\r\n }\r\n\r\n.headerArea .title1 .title-version {\r\n font-size: 0.9rem;\r\n }\r\n\r\n.headerArea .title1 .title-version-number {\r\n font-size: 0.7rem;\r\n }\r\n\r\n.headerArea .icons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 20px;\r\n }\r\n\r\n.headerArea .icons .belongings {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 3px;\r\n }\r\n\r\n.headerArea .icons .belongings .belongings-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n background: #666;\r\n cursor: pointer;\r\n padding: 5px;\r\n height: 1.7rem;\r\n top: -2px;\r\n }\r\n\r\n.headerArea .icons .belongings .belongings-button:hover {\r\n border: solid 2px #cc6;\r\n }\r\n\r\n.advanced-setting-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n margin: 10px;\r\n}\r\n\r\n.advanced-setting-container .advanced-setting-container-row {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\r\n width: 7rem;\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\r\n width: 15rem;\r\n font-size: 0.9rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n width: 10rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 3px;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(1) {\r\n color: #333;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(2) {\r\n }\r\n.get-server-information-container {\r\n margin: 10px;\r\n}\r\n.get-server-information-container .get-server-information-text-area {\r\n width: 100%;\r\n height: 20rem;\r\n }\r\n.merge-lab-container {\r\n display: flex;\r\n flex-direction: column;\r\n margin: 10px;\r\n gap: 10px;\r\n}\r\n.merge-lab-container .merge-lab-type-filter {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\r\n width: 70%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n width: 30%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\r\n border: solid 2px #ddd;\r\n color: black;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n background: #eee;\r\n cursor: pointer;\r\n padding: 5px;\r\n height: 1.7rem;\r\n text-align: center;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\r\n border: solid 2px #aaa;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n color: #333;\r\n text-align: center;\r\n }\r\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/101_RotatedButton.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./Error.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/Error.css\");\n// Imports\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:root {\r\n --text-color: #333;\r\n --company-color1: rgba(64, 119, 187, 1);\r\n --company-color2: rgba(29, 47, 78, 1);\r\n --company-color3: rgba(255, 255, 255, 1);\r\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\r\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\r\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\r\n --global-shadow-color: rgba(0, 0, 0, 0.4);\r\n\r\n --sidebar-transition-time: 0.2s;\r\n --sidebar-transition-time-quick: 0.1s;\r\n --sidebar-transition-animation: ease-in-out;\r\n\r\n --header-height: 1.5rem;\r\n --right-sidebar-width: 320px;\r\n\r\n --dialog-border-color: rgba(100, 100, 100, 1);\r\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\r\n --dialog-background-color: rgba(255, 255, 255, 1);\r\n --dialog-primary-color: rgba(19, 70, 209, 1);\r\n --dialog-active-color: rgba(40, 70, 209, 1);\r\n --dialog-input-border-color: rgba(200, 200, 200, 1);\r\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\r\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\r\n\r\n --body-video-seeker-height: 3rem;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: \"Poppins\", sans-serif;\r\n}\r\nhtml {\r\n font-size: 16px;\r\n}\r\nbody {\r\n height: 100%;\r\n width: 100%;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n color: var(--text-color);\r\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\r\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);\r\n}\r\n#app {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.first-gesture {\r\n background: rgba(200, 0, 0, 0.2);\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n}\r\n\r\n/* Main + Section Partition*/\r\n.main-body {\r\n height: 100%;\r\n width: 100%;\r\n padding: 2rem;\r\n font-family: \"Yusei Magic\", sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n font-size: 1rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n}\r\n/* Title */\r\n.main-body .top-title .title {\r\n font-size: 3rem;\r\n }\r\n.main-body .top-title .top-title-version {\r\n margin-left: 2rem;\r\n font-size: 1.2rem;\r\n background: linear-gradient(transparent 60%, yellow 30%);\r\n }\r\n.main-body .top-title .top-title-version-number {\r\n margin-left: 0.3rem;\r\n font-size: 0.8rem;\r\n }\r\n.main-body .top-title .belongings {\r\n margin-left: 1rem;\r\n margin-right: 1rem;\r\n }\r\n.main-body .top-title .belongings .link {\r\n margin-left: 1rem;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n }\r\n/* Partition */\r\n.main-body .partition {\r\n width: 100%;\r\n }\r\n.main-body .partition .partition-header {\r\n font-weight: 700;\r\n color: rgb(71, 69, 69);\r\n display: flex;\r\n }\r\n.main-body .partition .partition-header .caret {\r\n width: 2rem;\r\n }\r\n.main-body .partition .partition-header .title {\r\n font-size: 1.1rem;\r\n }\r\n.main-body .partition .partition-header .belongings {\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-end;\r\n margin-left: 10px;\r\n }\r\n.main-body .partition .partition-header .belongings .belongings-checkbox {\r\n margin-bottom: 3px;\r\n }\r\n.main-body .partition .partition-content {\r\n position: static;\r\n overflow-y: hidden;\r\n }\r\n.main-body .partition .row-split {\r\n }\r\n.state-control-checkbox:checked + .partition .partition-content {\r\n max-height: 700px;\r\n background: rgba(255, 255, 255, 0.3);\r\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\r\n}\r\n.state-control-checkbox + .partition .partition-content {\r\n max-height: 0px;\r\n background: rgba(233, 233, 255, 0.3);\r\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\r\n}\r\n/* ROW */\r\n\r\n.split-8-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-8-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 80%;\r\n }\r\n\r\n.split-8-2 > div:nth-child(2) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-6-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-6-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 60%;\r\n }\r\n.split-6-4 > div:nth-child(2) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-5-5 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-5-5 > div:nth-child(1) {\r\n left: 0px;\r\n width: 50%;\r\n }\r\n.split-5-5 > div:nth-child(2) {\r\n left: 50%;\r\n width: 50%;\r\n }\r\n.split-4-6 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-4-6 > div:nth-child(1) {\r\n left: 0px;\r\n width: 40%;\r\n }\r\n.split-4-6 > div:nth-child(2) {\r\n left: 40%;\r\n width: 60%;\r\n }\r\n.split-3-7 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-7 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-7 > div:nth-child(2) {\r\n left: 30%;\r\n width: 70%;\r\n }\r\n\r\n.split-2-8 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-2-8 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n\r\n.split-2-8 > div:nth-child(2) {\r\n left: 20%;\r\n width: 80%;\r\n }\r\n\r\n.split-1-8-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-1-8-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 10%;\r\n }\r\n\r\n.split-1-8-1 > div:nth-child(2) {\r\n left: 10%;\r\n width: 80%;\r\n }\r\n\r\n.split-1-8-1 > div:nth-child(3) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n.split-2-2-6 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-2-2-6 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n.split-2-2-6 > div:nth-child(2) {\r\n left: 20%;\r\n width: 20%;\r\n }\r\n.split-2-2-6 > div:nth-child(3) {\r\n left: 40%;\r\n width: 60%;\r\n }\r\n.split-3-3-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-3-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-3-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 30%;\r\n }\r\n.split-3-3-4 > div:nth-child(3) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n\r\n.split-3-4-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-3-4-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n\r\n.split-3-4-3 > div:nth-child(2) {\r\n left: 30%;\r\n width: 40%;\r\n }\r\n\r\n.split-3-4-3 > div:nth-child(3) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-2-5-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-2-5-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n.split-2-5-3 > div:nth-child(2) {\r\n left: 20%;\r\n width: 50%;\r\n }\r\n.split-2-5-3 > div:nth-child(3) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-4-4-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-4-4-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 40%;\r\n }\r\n.split-4-4-2 > div:nth-child(2) {\r\n left: 40%;\r\n width: 40%;\r\n }\r\n.split-4-4-2 > div:nth-child(3) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-1-4-4-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-1-4-4-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 10%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(2) {\r\n left: 10%;\r\n width: 40%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(3) {\r\n left: 50%;\r\n width: 40%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(4) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n\r\n.split-3-2-2-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-3-2-2-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(3) {\r\n left: 50%;\r\n width: 20%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(4) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-3-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(3) {\r\n left: 50%;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(4) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-3-1-2-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-1-2-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 10%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(3) {\r\n left: 40%;\r\n width: 20%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(4) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-3-2-1-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-1-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(3) {\r\n left: 50%;\r\n width: 10%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(4) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-3-2-2-2-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-2-2-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(3) {\r\n left: 50%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(4) {\r\n left: 70%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(5) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-1-1-1-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(3) {\r\n left: 40%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(4) {\r\n left: 50%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(5) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.w20 {\r\n width: 20%;\r\n}\r\n.bold {\r\n font-weight: 700;\r\n}\r\n.w40 {\r\n width: 40%;\r\n}\r\n\r\n.underline {\r\n border-bottom: 3px solid #333;\r\n}\r\n.left-padding-05 {\r\n padding-left: 0.5rem;\r\n}\r\n.left-padding-1 {\r\n padding-left: 1rem;\r\n}\r\n.left-padding-2 {\r\n padding-left: 2rem;\r\n}\r\n.left-margin-1 {\r\n margin-left: 1rem;\r\n}\r\n.left-margin-2 {\r\n margin-left: 2rem;\r\n}\r\n.highlight {\r\n background-color: rgba(200, 200, 255, 0.3);\r\n}\r\n.guided {\r\n /* background-color: rgba(9, 133, 67, 0.3); */\r\n background-color: rgba(159, 165, 162, 0.1);\r\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\r\n}\r\n\r\n.divider {\r\n height: 0.8rem;\r\n /* background-color: rgba(16, 210, 113, 0.1); */\r\n background-color: rgba(31, 42, 36, 0.1);\r\n}\r\n\r\n.body-section-title {\r\n font-size: 1.5rem;\r\n color: rgb(51, 49, 49);\r\n}\r\n.body-sub-section-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: rgb(3, 53, 12);\r\n}\r\n\r\n.body-item-title {\r\n color: rgb(51, 99, 49);\r\n display: flex;\r\n}\r\n.body-item-text {\r\n color: rgb(30, 30, 30);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n.body-item-text .body-item-text-item {\r\n padding-left: 1rem;\r\n }\r\n.body-item-text-small {\r\n color: rgb(30, 30, 30);\r\n font-size: 0.7rem;\r\n}\r\n.body-item-text-em {\r\n color: rgb(250, 30, 30);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 700;\r\n}\r\n\r\n.body-input-container {\r\n display: flex;\r\n}\r\n.body-item-input {\r\n width: 60%;\r\n}\r\n.body-item-input-slider {\r\n width: 60%;\r\n}\r\n.body-item-input-slider-label {\r\n margin-right: 1rem;\r\n}\r\n.body-item-input-slider-val {\r\n margin-left: 1rem;\r\n}\r\n.body-item-input-slider-2nd {\r\n width: 60%;\r\n accent-color: #33f;\r\n}\r\n\r\n.body-button-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.body-button-container > div {\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n\r\n.body-button-container .body-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n }\r\n\r\n.body-button-container .body-button:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.body-button-container .body-button-disabled {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n vertical-align: middle;\r\n background: #ddd;\r\n }\r\n\r\n.body-button-container .body-button-active {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n }\r\n\r\n.body-button-container .body-button-stanby {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n }\r\n\r\n.body-button-container .body-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.body-button-container-space-around {\r\n justify-content: space-around;\r\n}\r\n\r\n.body-select {\r\n color: rgb(30, 30, 30);\r\n max-width: 100%;\r\n}\r\n\r\n.body-select-50 {\r\n color: rgb(30, 30, 30);\r\n max-width: 50%;\r\n height: 1.5rem;\r\n}\r\n.select-option-red {\r\n color: #f66;\r\n font-weight: 700;\r\n}\r\n\r\n.body-image-container,\r\n.body-wav-container {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n.body-image-container .body-image-container-title,\r\n .body-image-container .body-wav-container-title,\r\n .body-wav-container .body-image-container-title,\r\n .body-wav-container .body-wav-container-title {\r\n width: 20%;\r\n }\r\n\r\n.body-image-container .body-image-container-img,\r\n .body-image-container .body-wav-container-wav,\r\n .body-wav-container .body-image-container-img,\r\n .body-wav-container .body-wav-container-wav {\r\n width: 80%;\r\n }\r\n\r\n.donate-img {\r\n border-radius: 35px;\r\n height: 1.5rem;\r\n}\r\n\r\n/* Dialog */\r\n.dialog-container,\r\n.dialog-container2 {\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: -1;\r\n display: none;\r\n}\r\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\r\n color: var(--company-color2);\r\n width: 40rem;\r\n max-height: 80vh;\r\n border: 2px solid var(--dialog-border-color);\r\n border-radius: 20px;\r\n flex-direction: column;\r\n align-items: center;\r\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\r\n background: var(--dialog-background-color);\r\n overflow: hidden;\r\n display: flex;\r\n }\r\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\r\n margin-top: 20px;\r\n background: var(--company-color2);\r\n color: #fff;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\r\n width: 90%;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\r\n font-family: \"Chicle\", cursive;\r\n font-size: 3rem;\r\n text-align: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\r\n margin-top: 1rem;\r\n margin-bottom: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 20px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\r\n width: 90%;\r\n max-height: 70vh;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\r\n font-weight: 700;\r\n margin: 5px 5px 5px 5px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px 5px 1px 5px;\r\n margin-left: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\r\n max-height: 60vh;\r\n width: 100%;\r\n overflow-y: scroll;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot {\r\n height: 5rem;\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon {\r\n width: 5rem;\r\n height: 5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable {\r\n width: 5rem;\r\n height: 5rem;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail {\r\n display: flex;\r\n flex-direction: column;\r\n font-size: 0.8rem;\r\n border-bottom: solid 1px #aaa;\r\n width: 80%;\r\n overflow-y: scroll;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track {\r\n background-color: #eee;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb {\r\n background: #f7cfec80;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label {\r\n width: 20%;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value {\r\n width: 55%;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download {\r\n width: 55%;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable {\r\n width: 55%;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit {\r\n width: 55%;\r\n font-weight: 700;\r\n color: #f00;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button {\r\n width: 15%;\r\n height: 90%;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: solid 1px #a00;\r\n width: 20%;\r\n font-size: 0.8rem;\r\n padding: 4px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n vertical-align: middle;\r\n background: #ddd;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\r\n font-size: 1rem;\r\n padding-left: 0.5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container {\r\n font-size: 0.9rem;\r\n padding-left: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 0.2rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label {\r\n width: 5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value {\r\n width: 20rem;\r\n color: #f00;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container {\r\n display: flex;\r\n flex-direction: row;\r\n margin-top: 1rem;\r\n margin-bottom: 0.5rem;\r\n justify-content: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button {\r\n /* width: 12rem; */\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px 10px 1px 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title {\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 0px 0px 0px 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\r\n margin: 0px 0px 0px 0.5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons {\r\n margin: 0px 0px 0px 0.5rem;\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button {\r\n margin: 0px 0.5rem 0px 0.5rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 0px 10px 0px 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container-show {\r\n display: flex;\r\n}\r\n\r\n.state-control-checkbox:checked ~ .dialog-container {\r\n background: rgba(200, 200, 200, 0.4);\r\n animation-name: dialog-show;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox ~ .dialog-container {\r\n background: rgba(100, 100, 100, 0.4);\r\n animation-name: dialog-hide;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox:checked + .dialog-frame {\r\n display: flex;\r\n}\r\n.state-control-checkbox + .dialog-frame {\r\n display: none;\r\n}\r\n\r\n@keyframes dialog-hide {\r\n from {\r\n opacity: 1;\r\n z-index: 200;\r\n }\r\n 90% {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n to {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n}\r\n\r\n@keyframes dialog-show {\r\n from {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n 10% {\r\n z-index: 200;\r\n }\r\n to {\r\n opacity: 1;\r\n z-index: 200;\r\n }\r\n}\r\n\r\n.state-control-checkbox:checked ~ .dialog-container2 {\r\n background: rgba(200, 200, 200, 0.4);\r\n animation-name: dialog-show2;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox ~ .dialog-container2 {\r\n background: rgba(100, 100, 100, 0.4);\r\n animation-name: dialog-hide2;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n/* .state-control-checkbox:checked + .dialog-frame {\r\n display: flex;\r\n}\r\n.state-control-checkbox + .dialog-frame {\r\n display: none;\r\n} */\r\n\r\n@keyframes dialog-hide2 {\r\n from {\r\n opacity: 1;\r\n z-index: 400;\r\n }\r\n 90% {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n to {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n}\r\n\r\n@keyframes dialog-show2 {\r\n from {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n 10% {\r\n z-index: 400;\r\n }\r\n to {\r\n opacity: 1;\r\n z-index: 400;\r\n }\r\n}\r\n\r\n.tooltip-text {\r\n display: none;\r\n position: absolute;\r\n padding: 4px;\r\n font-size: 0.7rem;\r\n line-height: 2rem;\r\n color: #ddd;\r\n border-radius: 5px;\r\n background: #444;\r\n /* width: 100px; */\r\n}\r\n.tooltip-text-100px {\r\n width: 100px;\r\n}\r\n.tooltip-text-thin {\r\n line-height: 1rem;\r\n}\r\n.tooltip-text-right {\r\n line-height: 1rem;\r\n}\r\n.tooltip-text:before {\r\n content: \"\";\r\n position: absolute;\r\n top: -1.4rem;\r\n border: 12px solid transparent;\r\n border-top: 16px solid #444;\r\n margin-left: 0rem;\r\n transform: rotateZ(180deg);\r\n}\r\n.tooltip:hover .tooltip-text {\r\n display: inline-block;\r\n top: 30px;\r\n left: 0px;\r\n}\r\n.tooltip:hover .tooltip-text-lower {\r\n display: inline-block;\r\n top: 60px;\r\n left: 0px;\r\n}\r\n\r\n.tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n\r\n/* ################## */\r\n.merge-field-container {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.merge-field-container .merge-field {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-field-container .merge-field .merge-field-elem {\r\n padding-left: 5px;\r\n }\r\n.merge-field-container .merge-field .red {\r\n color: #f00;\r\n }\r\n.merge-field-container .merge-field .purple {\r\n color: #33f;\r\n }\r\n.merge-field-container .merge-field .grey-bold {\r\n color: #555;\r\n font-weight: 800;\r\n }\r\n.model-slot-area {\r\n display: inline-block;\r\n background: var(--company-color2);\r\n border-radius: 10px;\r\n padding: 20px;\r\n}\r\n.model-slot-area .model-slot-panel {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n /* width: calc(30rem + 40px + 10px); */\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 2px;\r\n background: #333;\r\n cursor: pointer;\r\n padding: 5px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n.model-slot-tile-container,\r\n.model-slot-tile-container-selected {\r\n width: 6rem;\r\n height: 6rem;\r\n border-radius: 2px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n.model-slot-tile-container-selected {\r\n background: #43030c;\r\n}\r\n.model-slot-tile-container:hover {\r\n background: #43030c;\r\n}\r\n\r\n.model-slot-tile-icon-div {\r\n width: 5rem;\r\n height: 5rem;\r\n padding-top: 4px;\r\n position: relative;\r\n}\r\n.model-slot-tile-icon {\r\n width: 5rem;\r\n height: 5rem;\r\n -o-object-fit: contain;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n position: absolute;\r\n}\r\n.model-slot-tile-vctype {\r\n position: absolute;\r\n font-size: 0.6rem;\r\n font-weight: 800;\r\n top: 5px;\r\n left: 2px;\r\n background: RGBA(10, 200, 100, 0.6);\r\n border-radius: 5px;\r\n padding: 0px 2px 0px 2px;\r\n}\r\n.model-slot-tile-icon-no-entry {\r\n color: gray;\r\n position: absolute;\r\n top: 2rem;\r\n}\r\n.model-slot-tile-dscription {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n color: navajowhite;\r\n padding-top: 4px;\r\n}\r\n\r\n.character-area {\r\n display: flex;\r\n gap: 5px;\r\n padding: 20px;\r\n}\r\n\r\n.character-area .portrait-area {\r\n width: 20rem;\r\n height: 20rem;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container {\r\n position: relative;\r\n width: 20rem;\r\n height: 20rem;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait {\r\n width: 20rem;\r\n height: 20rem;\r\n -o-object-fit: contain;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n position: absolute;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-status {\r\n width: 5rem;\r\n background: rgba(100, 100, 100, 0.5);\r\n color: white;\r\n position: absolute;\r\n padding: 0px 0px 0px 3px;\r\n font-size: 0.7rem;\r\n left: 5px;\r\n top: 5px;\r\n border-radius: 2px;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-status .portrait-area-status-vctype {\r\n font-weight: 800;\r\n color: #866;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\r\n width: 5rem;\r\n background: rgba(100, 100, 100, 0.5);\r\n color: white;\r\n position: absolute;\r\n paddig: 2px;\r\n font-size: 0.7rem;\r\n right: 5px;\r\n bottom: 5px;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\r\n color: white;\r\n }\r\n\r\n.character-area .character-area-control-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control {\r\n display: flex;\r\n gap: 3px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 10px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\r\n width: 5rem;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\r\n width: 5rem;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\r\n width: 4rem;\r\n font-weight: 700;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\r\n /* width: 20rem; */\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\r\n width: 2rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\r\n width: 10rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\r\n width: 3rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-text {\r\n padding: 0px 1px 0px 1px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 2px;\r\n background: #666;\r\n cursor: pointer;\r\n padding: 5px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n\r\n/* audio::-webkit-media-controls-play-button,\r\naudio::-webkit-media-controls-panel {\r\n background-color: #ff0;\r\n height: 1rem;\r\n}\r\naudio::-webkit-media-controls-enclosure {\r\n max-height: 1rem;\r\n}\r\naudio::-webkit-media-controls {\r\n justify-content: start;\r\n}\r\naudio::-webkit-media-controls-overlay-enclosure{\r\n height: 1rem;\r\n} */\r\n\r\n.config-area {\r\n display: flex;\r\n gap: 5px;\r\n padding: 20px;\r\n}\r\n\r\n.config-area .config-sub-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control {\r\n display: flex;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\r\n width: 5rem;\r\n font-weight: 700;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\r\n width: 20rem;\r\n font-weight: 700;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\r\n width: 15rem;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container .config-sub-area-noise-checkbox-container {\r\n display: flex;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-kind {\r\n width: 1rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-slider {\r\n width: 10rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-val {\r\n width: 3rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n align-items: center;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\r\n border: solid 2px #999;\r\n color: white;\r\n background: #666;\r\n\r\n cursor: pointer;\r\n\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\r\n border: solid 2px #999;\r\n color: white;\r\n background: #844;\r\n\r\n cursor: pointer;\r\n\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-filter {\r\n max-width: 30%;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-select {\r\n max-width: 70%;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select {\r\n display: flex;\r\n flex-direction: row-reverse;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select .config-sub-area-control-field-screen-select-button-active {\r\n font-size: 0.8rem;\r\n border: solid 1px #333;\r\n border-radius: 5px;\r\n background: #ada;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select .config-sub-area-control-field-screen-select-button {\r\n border: solid 1px #333;\r\n background: #fff;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container {\r\n height: 1rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container .config-sub-area-control-field-wav-file-audio {\r\n height: 1rem;\r\n width: 15rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-folder {\r\n height: 1rem;\r\n width: 1rem;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button {\r\n border: solid 1px #333;\r\n background: #fff;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button-active {\r\n font-size: 0.8rem;\r\n border: solid 1px #333;\r\n border-radius: 5px;\r\n background: #ada;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field-long {\r\n width: 30rem;\r\n }\r\n\r\n.headerArea {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.headerArea .title1 {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n align-items: flex-end;\r\n }\r\n\r\n.headerArea .title1 .title {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: #333;\r\n text-shadow: 0 0 2px #333;\r\n }\r\n\r\n.headerArea .title1 .title-version {\r\n font-size: 0.9rem;\r\n }\r\n\r\n.headerArea .title1 .title-version-number {\r\n font-size: 0.7rem;\r\n }\r\n\r\n.headerArea .icons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 20px;\r\n }\r\n\r\n.headerArea .icons .belongings {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 3px;\r\n }\r\n\r\n.headerArea .icons .belongings .belongings-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n background: #666;\r\n cursor: pointer;\r\n padding: 5px;\r\n height: 1.7rem;\r\n top: -2px;\r\n }\r\n\r\n.headerArea .icons .belongings .belongings-button:hover {\r\n border: solid 2px #cc6;\r\n }\r\n\r\n.advanced-setting-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n margin: 10px;\r\n}\r\n\r\n.advanced-setting-container .advanced-setting-container-row {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\r\n width: 7rem;\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\r\n width: 15rem;\r\n font-size: 0.9rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n width: 10rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 3px;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(1) {\r\n color: #333;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(2) {\r\n }\r\n.get-server-information-container {\r\n margin: 10px;\r\n}\r\n.get-server-information-container .get-server-information-text-area {\r\n width: 100%;\r\n height: 20rem;\r\n }\r\n.merge-lab-container {\r\n display: flex;\r\n flex-direction: column;\r\n margin: 10px;\r\n gap: 10px;\r\n}\r\n.merge-lab-container .merge-lab-type-filter {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\r\n width: 70%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n width: 30%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\r\n border: solid 2px #ddd;\r\n color: black;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n background: #eee;\r\n cursor: pointer;\r\n padding: 5px;\r\n height: 1.7rem;\r\n text-align: center;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\r\n border: solid 2px #aaa;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n color: #333;\r\n text-align: center;\r\n }\r\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); /***/ }), diff --git a/client/demo/src/components/demo/001_GuiStateProvider.tsx b/client/demo/src/components/demo/001_GuiStateProvider.tsx index a126783a..f544ba07 100644 --- a/client/demo/src/components/demo/001_GuiStateProvider.tsx +++ b/client/demo/src/components/demo/001_GuiStateProvider.tsx @@ -64,12 +64,14 @@ type GuiStateAndMethod = { audioInputForGUI: string; audioOutputForGUI: string; fileInputEchoback: boolean | undefined; + shareScreenEnabled: boolean; audioOutputForAnalyzer: string; setInputAudioDeviceInfo: (val: MediaDeviceInfo[]) => void; setOutputAudioDeviceInfo: (val: MediaDeviceInfo[]) => void; setAudioInputForGUI: (val: string) => void; setAudioOutputForGUI: (val: string) => void; setFileInputEchoback: (val: boolean) => void; + setShareScreenEnabled: (val: boolean) => void; setAudioOutputForAnalyzer: (val: string) => void; modelSlotNum: number; @@ -105,6 +107,7 @@ export const GuiStateProvider = ({ children }: Props) => { const [audioInputForGUI, setAudioInputForGUI] = useState("none"); const [audioOutputForGUI, setAudioOutputForGUI] = useState("none"); const [fileInputEchoback, setFileInputEchoback] = useState(false); //最初のmuteが有効になるように。undefined <-- ??? falseしておけばよさそう。undefinedだとwarningがでる。 + const [shareScreenEnabled, setShareScreenEnabled] = useState(false); const [audioOutputForAnalyzer, setAudioOutputForAnalyzer] = useState("default"); const [textInputResolve, setTextInputResolve] = useState(null); @@ -137,6 +140,13 @@ export const GuiStateProvider = ({ children }: Props) => { label: "file", toJSON: () => {}, }); + audioInputs.push({ + deviceId: "screen", + groupId: "screen", + kind: "audioinput", + label: "screen", + toJSON: () => {}, + }); const audioOutputs = mediaDeviceInfos.filter((x) => { return x.kind == "audiooutput"; }); @@ -261,12 +271,14 @@ export const GuiStateProvider = ({ children }: Props) => { audioInputForGUI, audioOutputForGUI, fileInputEchoback, + shareScreenEnabled, audioOutputForAnalyzer, setInputAudioDeviceInfo, setOutputAudioDeviceInfo, setAudioInputForGUI, setAudioOutputForGUI, setFileInputEchoback, + setShareScreenEnabled, setAudioOutputForAnalyzer, modelSlotNum, diff --git a/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx b/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx index ef8dd84f..a497f226 100644 --- a/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx +++ b/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx @@ -30,8 +30,8 @@ export const ConvertArea = (props: ConvertProps) => { memory: 0, }); - const onClassName = serverSetting.serverSetting.gpu == 0 ? "config-sub-area-button-active" : "config-sub-area-button"; - const offClassName = serverSetting.serverSetting.gpu == 0 ? "config-sub-area-button" : "config-sub-area-button-active"; + // const onClassName = serverSetting.serverSetting.gpu == 0 ? "config-sub-area-button-active" : "config-sub-area-button"; + // const offClassName = serverSetting.serverSetting.gpu == 0 ? "config-sub-area-button" : "config-sub-area-button-active"; const cpuClassName = serverSetting.serverSetting.gpu == -1 ? "config-sub-area-button-active" : "config-sub-area-button"; const gpu0ClassName = serverSetting.serverSetting.gpu == 0 ? "config-sub-area-button-active" : "config-sub-area-button"; diff --git a/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx b/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx index 1496e62d..b02e0a1d 100644 --- a/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx +++ b/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx @@ -8,11 +8,12 @@ export type DeviceAreaProps = {}; export const DeviceArea = (_props: DeviceAreaProps) => { const { setting, serverSetting, audioContext, setAudioOutputElementId, initializedRef, setVoiceChangerClientSetting, startOutputRecording, stopOutputRecording } = useAppState(); - const { isConverting, audioInputForGUI, inputAudioDeviceInfo, setAudioInputForGUI, fileInputEchoback, setFileInputEchoback, setAudioOutputForGUI, audioOutputForGUI, outputAudioDeviceInfo } = useGuiState(); + const { isConverting, audioInputForGUI, inputAudioDeviceInfo, setAudioInputForGUI, fileInputEchoback, setFileInputEchoback, setAudioOutputForGUI, audioOutputForGUI, outputAudioDeviceInfo, shareScreenEnabled, setShareScreenEnabled } = useGuiState(); const [inputHostApi, setInputHostApi] = useState("ALL"); const [outputHostApi, setOutputHostApi] = useState("ALL"); const [monitorHostApi, setMonitorHostApi] = useState("ALL"); const audioSrcNode = useRef(); + const displayMediaStream = useRef(null); const { getItem, setItem } = useIndexedDB({ clientType: null }); const [outputRecordingStarted, setOutputRecordingStarted] = useState(false); @@ -97,7 +98,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => { value={audioInputForGUI} onChange={async (e) => { setAudioInputForGUI(e.target.value); - if (e.target.value != "file") { + if (e.target.value != "file" && e.target.value != "screen") { try { await setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, audioInput: e.target.value }); } catch (e) { @@ -132,7 +133,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => { const hostAPIs = new Set( devices.map((x) => { return x.hostAPI; - }) + }), ); const hostAPIOptions = Array.from(hostAPIs).map((x, index) => { return ( @@ -275,6 +276,74 @@ export const DeviceArea = (_props: DeviceAreaProps) => { ); }, [audioInputForGUI, fileInputEchoback, setting, serverSetting.serverSetting]); + const audioInputScreenRow = useMemo(() => { + if (audioInputForGUI != "screen" || serverSetting.serverSetting.enableServerAudio == 1) { + return <>; + } + + const onSelectScreenClicked = async () => { + // 既存msをクローズ + if (displayMediaStream.current) { + displayMediaStream.current.getTracks().forEach((x) => { + x.stop(); + }); + displayMediaStream.current = null; + } + + // 共有ストップ + if (shareScreenEnabled == true) { + setShareScreenEnabled(false); + return; + } + + // 共有スタート + try { + displayMediaStream.current = await navigator.mediaDevices.getDisplayMedia({ + video: true, + audio: true, + }); + } catch (e) { + return; + } + if (!displayMediaStream.current) { + return; + } + if (displayMediaStream.current?.getAudioTracks().length == 0) { + displayMediaStream.current.getTracks().forEach((x) => { + x.stop(); + }); + displayMediaStream.current = null; + } + + try { + setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, audioInput: displayMediaStream.current }); + } catch (e) { + console.error(e); + } + + setShareScreenEnabled(!shareScreenEnabled); + }; + + const echobackClass = shareScreenEnabled ? "config-sub-area-control-field-screen-select-button-active" : "config-sub-area-control-field-screen-select-button"; + return ( +
+
+
+
+
{ + onSelectScreenClicked(); + }} + > + capture +
+
+
+
+ ); + }, [audioInputForGUI, setting, serverSetting.serverSetting, shareScreenEnabled, setShareScreenEnabled]); + // (3) Audio Output useEffect(() => { const loadCache = async () => { @@ -375,7 +444,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => { const hostAPIs = new Set( devices.map((x) => { return x.hostAPI; - }) + }), ); const hostAPIOptions = Array.from(hostAPIs).map((x, index) => { return ( @@ -516,7 +585,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => { const hostAPIs = new Set( devices.map((x) => { return x.hostAPI; - }) + }), ); const hostAPIOptions = Array.from(hostAPIs).map((x, index) => { return ( @@ -541,7 +610,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => { filteredDevice.unshift( + , ); const currentValue = devices.find((x) => { @@ -591,6 +660,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => { {clientAudioInputRow} {serverAudioInputRow} {audioInputMediaRow} + {audioInputScreenRow} {clientAudioOutputRow} {serverAudioOutputRow} {serverMonitorRow} diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css index 5177a166..62e463a0 100644 --- a/client/demo/src/css/App.css +++ b/client/demo/src/css/App.css @@ -1455,6 +1455,31 @@ audio::-webkit-media-controls-overlay-enclosure{ max-width: 70%; } } + .config-sub-area-control-field-screen-select { + display: flex; + flex-direction: row-reverse; + gap: 5px; + .config-sub-area-control-field-screen-select-button-active { + font-size: 0.8rem; + border: solid 1px #333; + border-radius: 5px; + background: #ada; + height: 1.2rem; + padding-left: 2px; + padding-right: 2px; + cursor: pointer; + } + .config-sub-area-control-field-screen-select-button { + border: solid 1px #333; + background: #fff; + font-size: 0.8rem; + border-radius: 5px; + height: 1.2rem; + padding-left: 2px; + padding-right: 2px; + cursor: pointer; + } + } .config-sub-area-control-field-wav-file { display: flex; flex-direction: row;