dmed-voice-assistant 1.1.5 → 1.1.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/dist/components/RecognitionListItem.js +51 -40
  2. package/dist/components/RecordListItem.js +159 -133
  3. package/dist/components/svgs.js +203 -167
  4. package/dist/index.js +22 -17
  5. package/dist/recognition.js +768 -531
  6. package/dist/recorder.js +389 -313
  7. package/package.json +6 -6
package/dist/recorder.js CHANGED
@@ -11,6 +11,7 @@ var _svgs = require("./components/svgs");
11
11
  var _StyledSelect = _interopRequireDefault(require("./components/StyledSelect"));
12
12
  var _RecordListItem = _interopRequireDefault(require("./components/RecordListItem"));
13
13
  var _recorderJs = _interopRequireDefault(require("recorder-js"));
14
+ var _jsxRuntime = require("react/jsx-runtime");
14
15
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
16
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -198,318 +199,393 @@ const RecorderBox = _ref => {
198
199
  (0, _react.useEffect)(() => {
199
200
  // uploadRecording();
200
201
  }, [audioBlob]);
201
- return /*#__PURE__*/_react.default.createElement(_material.Box, {
202
- className: "bg-[#0B0B0B] rounded-[5px] border p-[20px] w-[850px]"
203
- }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
204
- container: true,
205
- spacing: 2
206
- }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
207
- size: 6
208
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
209
- className: "flex items-center justify-between"
210
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
211
- className: "!text-[24px] !font-[600]",
212
- color: "#EAE5DC"
213
- }, "Voice assistant"), /*#__PURE__*/_react.default.createElement(_material.Box, {
214
- className: "flex items-center px-[10px] py-[4px] bg-[#006FFF4D] rounded-[89.1px] cursor-pointer h-[28px]",
215
- sx: {
216
- border: '0.9px solid #006FFFB2'
217
- },
218
- onClick: handleModeChange
219
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.MicIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
220
- className: "!font-600 !text-[14px]",
221
- color: "#EAE5DC"
222
- }, "Recorder mode"))), /*#__PURE__*/_react.default.createElement(_material.Box, {
223
- className: "flex items-center justify-between mt-4"
224
- }, !isStartedRecord ? /*#__PURE__*/_react.default.createElement(_material.Box, {
225
- className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
226
- sx: {
227
- '&:hover': {
228
- boxShadow: '0px 0px 5px 1px #44C63380',
229
- cursor: isVoiceMode && 'not-allowed'
230
- }
231
- },
232
- onClick: handleStartRecord
233
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.StartIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
234
- className: "!font-400 !text-[16px]",
235
- color: "#EAE5DC"
236
- }, "Start")) : /*#__PURE__*/_react.default.createElement(_material.Box, {
237
- className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
238
- sx: {
239
- border: '0.9px solid #F3151580',
240
- '&:hover': {
241
- boxShadow: '0px 0px 5px 1px #F3151580'
242
- }
243
- },
244
- onClick: handleStartRecord
245
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.SmallPauseIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
246
- className: "!font-400 !text-[14px]",
247
- color: "#EAE5DC"
248
- }, "Stop")), /*#__PURE__*/_react.default.createElement(_material.Box, {
249
- className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
250
- sx: {
251
- '&:hover': {
252
- boxShadow: '0px 0px 5px 2px #58585880',
253
- cursor: isStartedRecord && 'not-allowed'
254
- }
255
- },
256
- onClick: handleSteupChange
257
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.SettingIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
258
- className: "!font-400 !text-[14px]",
259
- color: "#EAE5DC"
260
- }, "Setup"))), /*#__PURE__*/_react.default.createElement(_material.Box, {
261
- className: "rounded-[5px] bg-[#A3DBFE] mt-2"
262
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
263
- className: "flex items-center justify-between p-[4.5px]"
264
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
265
- className: "flex items-center space-x-1 rounded-[5px] px-[5px] py-[2px] bg-[#0B0B0B]",
266
- sx: {
267
- boxShadow: '0px 0px 1.8px 0px #00000040'
268
- }
269
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, !isStartedRecord ? /*#__PURE__*/_react.default.createElement(_svgs.StopIcon, null) : /*#__PURE__*/_react.default.createElement(_svgs.RedStopIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
270
- className: "!font-[600] !text-[14px]",
271
- color: "#A3DBFE"
272
- }, !isStartedRecord ? 'STOP' : 'REC')), /*#__PURE__*/_react.default.createElement(_material.Typography, {
273
- className: "!font-400 !text-[20px] px-[9px]",
274
- color: "#1A2123",
275
- sx: {
276
- fontFamily: "Space Grotesk !important"
277
- }
278
- }, "01.08.2024")), /*#__PURE__*/_react.default.createElement(_material.Box, {
279
- className: "flex justify-between p-[9px]"
280
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
281
- className: "!font-400 !text-[36px]",
282
- color: "#1A2123",
283
- sx: {
284
- fontFamily: "Space Grotesk !important"
285
- }
286
- }, getTimeValues(newRecordTime).hours, /*#__PURE__*/_react.default.createElement("span", {
287
- style: {
288
- color: '#494A48',
289
- fontWeight: "300",
290
- fontSize: "16px"
291
- }
292
- }, "h"), " ", getTimeValues(newRecordTime).minutes, /*#__PURE__*/_react.default.createElement("span", {
293
- style: {
294
- color: '#494A48',
295
- fontWeight: "300",
296
- fontSize: "16px"
297
- }
298
- }, "m"), " ", getTimeValues(newRecordTime).seconds, /*#__PURE__*/_react.default.createElement("span", {
299
- style: {
300
- color: '#494A48',
301
- fontWeight: "300",
302
- fontSize: "16px"
303
- }
304
- }, "s")), /*#__PURE__*/_react.default.createElement(_material.Box, {
305
- className: "flex flex-col space-y-3 text-right"
306
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
307
- className: "!font-400 !text-[16px]",
308
- color: "#494A48",
309
- sx: {
310
- fontFamily: "Space Grotesk !important"
311
- }
312
- }, audioSize, " ", /*#__PURE__*/_react.default.createElement("span", {
313
- style: {
314
- fontSize: "14px",
315
- fontFamily: "Space Grotesk !important"
316
- }
317
- }, "MB")), isStartedRecord && /*#__PURE__*/_react.default.createElement(_material.Typography, {
318
- className: "!font-bold !text-[16px]",
319
- color: "#494A48",
320
- sx: {
321
- fontFamily: "Space Grotesk !important"
322
- }
323
- }, newRecordFileName))))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
324
- size: 6,
325
- className: `w-full ${isVoiceMode ? 'pr-[10px]' : ''}`
326
- }, isVoiceMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
327
- className: "flex space-x-1 w-full"
328
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.MicIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Box, {
329
- className: "flex-1"
330
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
331
- className: "!font-[600] !text-[16px]",
332
- color: "#EAE5DC"
333
- }, "Voice"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
334
- className: "!font-400 !text-[14px] pt-1",
335
- color: "#EAE5DC"
336
- }, "Input device"), /*#__PURE__*/_react.default.createElement(_StyledSelect.default, {
337
- className: "mt-1",
338
- fullWidth: true,
339
- displayEmpty: true,
340
- value: selectedVoice,
341
- onChange: handleVoiceChange,
342
- renderValue: selected => {
343
- if (selected === "") {
344
- return /*#__PURE__*/_react.default.createElement("span", {
345
- style: {
346
- fontSize: '12.6px',
347
- fontWeight: '400',
348
- lineHeight: '25.2px',
349
- color: '#EAE5DC99'
350
- }
351
- }, "Auto-Detect");
352
- }
353
- return /*#__PURE__*/_react.default.createElement("span", {
354
- style: {
355
- fontSize: '12.6px',
356
- fontWeight: '400',
357
- lineHeight: '25.2px',
358
- color: '#EAE5DC99'
359
- }
360
- }, voiceList[selected]);
361
- },
362
- MenuProps: {
363
- PaperProps: {
364
- sx: {
365
- marginTop: "5px",
366
- padding: '5px',
367
- background: '#0B0B0B',
368
- border: '0.9px solid #565656',
369
- '& .MuiList-root': {
370
- padding: "unset"
371
- },
372
- '& .MuiMenuItem-root': {
373
- padding: "7.2px 9px",
374
- color: '#EAE5DC99',
375
- fontFamily: 'Reddit Sans',
376
- fontSize: '12.6px',
377
- fontWeight: '400',
378
- lineHeight: '25.2px'
379
- },
380
- '& .MuiMenuItem-root:hover': {
381
- background: "#A3DBFE99",
382
- color: '#1A2123'
383
- },
384
- '& .MuiMenuItem-root.Mui-selected': {
385
- background: "#A3DBFE",
386
- color: '#1A2123'
387
- },
388
- '& .MuiMenuItem-root.Mui-selected:hover': {
389
- background: "#A3DBFE99",
390
- color: '#1A2123'
391
- }
392
- }
393
- }
394
- }
395
- }, voiceList.map((device, index) => {
396
- return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
397
- value: index,
398
- key: index
399
- }, device);
400
- })))), /*#__PURE__*/_react.default.createElement(_material.Box, {
401
- className: "flex space-x-1 w-full mt-2"
402
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.LanguageIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Box, {
403
- className: "flex-1"
404
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
405
- className: "!font-[600] !text-[16px]",
406
- color: "#EAE5DC"
407
- }, "Language"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
408
- className: "!font-400 !text-[14px] pt-1",
409
- color: "#EAE5DC"
410
- }, "Prefer language"), /*#__PURE__*/_react.default.createElement(_StyledSelect.default, {
411
- className: "mt-1",
412
- fullWidth: true,
413
- displayEmpty: true,
414
- value: selectedLanguage,
415
- onChange: handleLanguageChange,
416
- renderValue: selected => {
417
- if (selected === "") {
418
- return /*#__PURE__*/_react.default.createElement("span", {
419
- style: {
420
- fontSize: '12.6px',
421
- fontWeight: '400',
422
- lineHeight: '25.2px',
423
- color: '#EAE5DC99'
424
- }
425
- }, "Auto-Detect");
426
- }
427
- return /*#__PURE__*/_react.default.createElement("span", {
428
- style: {
429
- fontSize: '12.6px',
430
- fontWeight: '400',
431
- lineHeight: '25.2px',
432
- color: '#EAE5DC99'
433
- }
434
- }, languageList[selected]);
435
- },
436
- MenuProps: {
437
- PaperProps: {
438
- sx: {
439
- marginTop: "5px",
440
- padding: '5px',
441
- background: '#0B0B0B',
442
- border: '0.9px solid #565656',
443
- '& .MuiList-root': {
444
- padding: "unset"
445
- },
446
- '& .MuiMenuItem-root': {
447
- padding: "7.2px 9px",
448
- color: '#EAE5DC99',
449
- fontFamily: 'Reddit Sans',
450
- fontSize: '12.6px',
451
- fontWeight: '400',
452
- lineHeight: '25.2px'
453
- },
454
- '& .MuiMenuItem-root:hover': {
455
- background: "#A3DBFE99",
456
- color: '#1A2123'
457
- },
458
- '& .MuiMenuItem-root.Mui-selected': {
459
- background: "#A3DBFE",
460
- color: '#1A2123'
461
- },
462
- '& .MuiMenuItem-root.Mui-selected:hover': {
463
- background: "#A3DBFE99",
464
- color: '#1A2123'
465
- }
466
- }
467
- }
468
- }
469
- }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
470
- value: 0
471
- }, "Auto-Detect"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
472
- value: 1
473
- }, "English"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
474
- value: 2
475
- }, "Chinese (Simplified)"))))), !isVoiceMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, recordList.length === 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
476
- className: "flex flex-col items-center justify-center h-full"
477
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.BoxIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
478
- className: "!font-[600] !text-[16px] pt-2",
479
- color: "#EAE5DC",
480
- sx: {
481
- fontFamily: "Afacad !important"
482
- }
483
- }, "Record Empty"), /*#__PURE__*/_react.default.createElement(_material.Box, {
484
- className: "flex items-center space-x-1 mt-1"
485
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
486
- className: "!font-400 !text-[14px]",
487
- color: "#EAE5DC",
488
- sx: {
489
- fontFamily: "Afacad !important"
490
- }
491
- }, "Push"), /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.SmallStartIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
492
- className: "!font-400 !text-[16px]",
493
- color: "#EAE5DC",
494
- sx: {
495
- fontFamily: "Afacad !important"
496
- }
497
- }, "to start")))), recordList.length > 0 && /*#__PURE__*/_react.default.createElement(_material.Box, {
498
- className: "flex flex-col space-y-2 p-[10px] scrollableBox",
499
- sx: {
500
- maxHeight: "225px"
501
- }
502
- }, recordList.map((record, index) => {
503
- return /*#__PURE__*/_react.default.createElement(_RecordListItem.default, {
504
- audioURL: record.audioURL,
505
- label: record.name,
506
- capacity: record.size,
507
- time: record.time,
508
- createdDate: record.date,
509
- key: index,
510
- onLabelChange: newLabel => handleLabelChange(index, newLabel),
511
- onDelete: () => handleDelete(index)
512
- });
513
- }))))));
202
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
203
+ className: "bg-[#0B0B0B] rounded-[5px] border p-[20px] w-[850px]",
204
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
205
+ container: true,
206
+ spacing: 2,
207
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
208
+ size: 6,
209
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
210
+ className: "flex items-center justify-between",
211
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
212
+ className: "!text-[24px] !font-[600]",
213
+ color: "#EAE5DC",
214
+ children: "Voice assistant"
215
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
216
+ className: "flex items-center px-[10px] py-[4px] bg-[#006FFF4D] rounded-[89.1px] cursor-pointer h-[28px]",
217
+ sx: {
218
+ border: '0.9px solid #006FFFB2'
219
+ },
220
+ onClick: handleModeChange,
221
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
222
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.MicIcon, {})
223
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
224
+ className: "!font-600 !text-[14px]",
225
+ color: "#EAE5DC",
226
+ children: "Recorder mode"
227
+ })]
228
+ })]
229
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
230
+ className: "flex items-center justify-between mt-4",
231
+ children: [!isStartedRecord ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
232
+ className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
233
+ sx: {
234
+ '&:hover': {
235
+ boxShadow: '0px 0px 5px 1px #44C63380',
236
+ cursor: isVoiceMode && 'not-allowed'
237
+ }
238
+ },
239
+ onClick: handleStartRecord,
240
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
241
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.StartIcon, {})
242
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
243
+ className: "!font-400 !text-[16px]",
244
+ color: "#EAE5DC",
245
+ children: "Start"
246
+ })]
247
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
248
+ className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
249
+ sx: {
250
+ border: '0.9px solid #F3151580',
251
+ '&:hover': {
252
+ boxShadow: '0px 0px 5px 1px #F3151580'
253
+ }
254
+ },
255
+ onClick: handleStartRecord,
256
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
257
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.SmallPauseIcon, {})
258
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
259
+ className: "!font-400 !text-[14px]",
260
+ color: "#EAE5DC",
261
+ children: "Stop"
262
+ })]
263
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
264
+ className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
265
+ sx: {
266
+ '&:hover': {
267
+ boxShadow: '0px 0px 5px 2px #58585880',
268
+ cursor: isStartedRecord && 'not-allowed'
269
+ }
270
+ },
271
+ onClick: handleSteupChange,
272
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
273
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.SettingIcon, {})
274
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
275
+ className: "!font-400 !text-[14px]",
276
+ color: "#EAE5DC",
277
+ children: "Setup"
278
+ })]
279
+ })]
280
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
281
+ className: "rounded-[5px] bg-[#A3DBFE] mt-2",
282
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
283
+ className: "flex items-center justify-between p-[4.5px]",
284
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
285
+ className: "flex items-center space-x-1 rounded-[5px] px-[5px] py-[2px] bg-[#0B0B0B]",
286
+ sx: {
287
+ boxShadow: '0px 0px 1.8px 0px #00000040'
288
+ },
289
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
290
+ children: !isStartedRecord ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.StopIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.RedStopIcon, {})
291
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
292
+ className: "!font-[600] !text-[14px]",
293
+ color: "#A3DBFE",
294
+ children: !isStartedRecord ? 'STOP' : 'REC'
295
+ })]
296
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
297
+ className: "!font-400 !text-[20px] px-[9px]",
298
+ color: "#1A2123",
299
+ sx: {
300
+ fontFamily: "Space Grotesk !important"
301
+ },
302
+ children: "01.08.2024"
303
+ })]
304
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
305
+ className: "flex justify-between p-[9px]",
306
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
307
+ className: "!font-400 !text-[36px]",
308
+ color: "#1A2123",
309
+ sx: {
310
+ fontFamily: "Space Grotesk !important"
311
+ },
312
+ children: [getTimeValues(newRecordTime).hours, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
313
+ style: {
314
+ color: '#494A48',
315
+ fontWeight: "300",
316
+ fontSize: "16px"
317
+ },
318
+ children: "h"
319
+ }), " ", getTimeValues(newRecordTime).minutes, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
320
+ style: {
321
+ color: '#494A48',
322
+ fontWeight: "300",
323
+ fontSize: "16px"
324
+ },
325
+ children: "m"
326
+ }), " ", getTimeValues(newRecordTime).seconds, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
327
+ style: {
328
+ color: '#494A48',
329
+ fontWeight: "300",
330
+ fontSize: "16px"
331
+ },
332
+ children: "s"
333
+ })]
334
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
335
+ className: "flex flex-col space-y-3 text-right",
336
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
337
+ className: "!font-400 !text-[16px]",
338
+ color: "#494A48",
339
+ sx: {
340
+ fontFamily: "Space Grotesk !important"
341
+ },
342
+ children: [audioSize, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
343
+ style: {
344
+ fontSize: "14px",
345
+ fontFamily: "Space Grotesk !important"
346
+ },
347
+ children: "MB"
348
+ })]
349
+ }), isStartedRecord && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
350
+ className: "!font-bold !text-[16px]",
351
+ color: "#494A48",
352
+ sx: {
353
+ fontFamily: "Space Grotesk !important"
354
+ },
355
+ children: newRecordFileName
356
+ })]
357
+ })]
358
+ })]
359
+ })]
360
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
361
+ size: 6,
362
+ className: `w-full ${isVoiceMode ? 'pr-[10px]' : ''}`,
363
+ children: [isVoiceMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
364
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
365
+ className: "flex space-x-1 w-full",
366
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
367
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.MicIcon, {})
368
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
369
+ className: "flex-1",
370
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
371
+ className: "!font-[600] !text-[16px]",
372
+ color: "#EAE5DC",
373
+ children: "Voice"
374
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
375
+ className: "!font-400 !text-[14px] pt-1",
376
+ color: "#EAE5DC",
377
+ children: "Input device"
378
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledSelect.default, {
379
+ className: "mt-1",
380
+ fullWidth: true,
381
+ displayEmpty: true,
382
+ value: selectedVoice,
383
+ onChange: handleVoiceChange,
384
+ renderValue: selected => {
385
+ if (selected === "") {
386
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
387
+ style: {
388
+ fontSize: '12.6px',
389
+ fontWeight: '400',
390
+ lineHeight: '25.2px',
391
+ color: '#EAE5DC99'
392
+ },
393
+ children: "Auto-Detect"
394
+ });
395
+ }
396
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
397
+ style: {
398
+ fontSize: '12.6px',
399
+ fontWeight: '400',
400
+ lineHeight: '25.2px',
401
+ color: '#EAE5DC99'
402
+ },
403
+ children: voiceList[selected]
404
+ });
405
+ },
406
+ MenuProps: {
407
+ PaperProps: {
408
+ sx: {
409
+ marginTop: "5px",
410
+ padding: '5px',
411
+ background: '#0B0B0B',
412
+ border: '0.9px solid #565656',
413
+ '& .MuiList-root': {
414
+ padding: "unset"
415
+ },
416
+ '& .MuiMenuItem-root': {
417
+ padding: "7.2px 9px",
418
+ color: '#EAE5DC99',
419
+ fontFamily: 'Reddit Sans',
420
+ fontSize: '12.6px',
421
+ fontWeight: '400',
422
+ lineHeight: '25.2px'
423
+ },
424
+ '& .MuiMenuItem-root:hover': {
425
+ background: "#A3DBFE99",
426
+ color: '#1A2123'
427
+ },
428
+ '& .MuiMenuItem-root.Mui-selected': {
429
+ background: "#A3DBFE",
430
+ color: '#1A2123'
431
+ },
432
+ '& .MuiMenuItem-root.Mui-selected:hover': {
433
+ background: "#A3DBFE99",
434
+ color: '#1A2123'
435
+ }
436
+ }
437
+ }
438
+ },
439
+ children: voiceList.map((device, index) => {
440
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
441
+ value: index,
442
+ children: device
443
+ }, index);
444
+ })
445
+ })]
446
+ })]
447
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
448
+ className: "flex space-x-1 w-full mt-2",
449
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
450
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.LanguageIcon, {})
451
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
452
+ className: "flex-1",
453
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
454
+ className: "!font-[600] !text-[16px]",
455
+ color: "#EAE5DC",
456
+ children: "Language"
457
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
458
+ className: "!font-400 !text-[14px] pt-1",
459
+ color: "#EAE5DC",
460
+ children: "Prefer language"
461
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StyledSelect.default, {
462
+ className: "mt-1",
463
+ fullWidth: true,
464
+ displayEmpty: true,
465
+ value: selectedLanguage,
466
+ onChange: handleLanguageChange,
467
+ renderValue: selected => {
468
+ if (selected === "") {
469
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
470
+ style: {
471
+ fontSize: '12.6px',
472
+ fontWeight: '400',
473
+ lineHeight: '25.2px',
474
+ color: '#EAE5DC99'
475
+ },
476
+ children: "Auto-Detect"
477
+ });
478
+ }
479
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
480
+ style: {
481
+ fontSize: '12.6px',
482
+ fontWeight: '400',
483
+ lineHeight: '25.2px',
484
+ color: '#EAE5DC99'
485
+ },
486
+ children: languageList[selected]
487
+ });
488
+ },
489
+ MenuProps: {
490
+ PaperProps: {
491
+ sx: {
492
+ marginTop: "5px",
493
+ padding: '5px',
494
+ background: '#0B0B0B',
495
+ border: '0.9px solid #565656',
496
+ '& .MuiList-root': {
497
+ padding: "unset"
498
+ },
499
+ '& .MuiMenuItem-root': {
500
+ padding: "7.2px 9px",
501
+ color: '#EAE5DC99',
502
+ fontFamily: 'Reddit Sans',
503
+ fontSize: '12.6px',
504
+ fontWeight: '400',
505
+ lineHeight: '25.2px'
506
+ },
507
+ '& .MuiMenuItem-root:hover': {
508
+ background: "#A3DBFE99",
509
+ color: '#1A2123'
510
+ },
511
+ '& .MuiMenuItem-root.Mui-selected': {
512
+ background: "#A3DBFE",
513
+ color: '#1A2123'
514
+ },
515
+ '& .MuiMenuItem-root.Mui-selected:hover': {
516
+ background: "#A3DBFE99",
517
+ color: '#1A2123'
518
+ }
519
+ }
520
+ }
521
+ },
522
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
523
+ value: 0,
524
+ children: "Auto-Detect"
525
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
526
+ value: 1,
527
+ children: "English"
528
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
529
+ value: 2,
530
+ children: "Chinese (Simplified)"
531
+ })]
532
+ })]
533
+ })]
534
+ })]
535
+ }), !isVoiceMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
536
+ children: [recordList.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
537
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
538
+ className: "flex flex-col items-center justify-center h-full",
539
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
540
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.BoxIcon, {})
541
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
542
+ className: "!font-[600] !text-[16px] pt-2",
543
+ color: "#EAE5DC",
544
+ sx: {
545
+ fontFamily: "Afacad !important"
546
+ },
547
+ children: "Record Empty"
548
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
549
+ className: "flex items-center space-x-1 mt-1",
550
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
551
+ className: "!font-400 !text-[14px]",
552
+ color: "#EAE5DC",
553
+ sx: {
554
+ fontFamily: "Afacad !important"
555
+ },
556
+ children: "Push"
557
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
558
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.SmallStartIcon, {})
559
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
560
+ className: "!font-400 !text-[16px]",
561
+ color: "#EAE5DC",
562
+ sx: {
563
+ fontFamily: "Afacad !important"
564
+ },
565
+ children: "to start"
566
+ })]
567
+ })]
568
+ })
569
+ }), recordList.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
570
+ className: "flex flex-col space-y-2 p-[10px] scrollableBox",
571
+ sx: {
572
+ maxHeight: "225px"
573
+ },
574
+ children: recordList.map((record, index) => {
575
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordListItem.default, {
576
+ audioURL: record.audioURL,
577
+ label: record.name,
578
+ capacity: record.size,
579
+ time: record.time,
580
+ createdDate: record.date,
581
+ onLabelChange: newLabel => handleLabelChange(index, newLabel),
582
+ onDelete: () => handleDelete(index)
583
+ }, index);
584
+ })
585
+ })]
586
+ })]
587
+ })]
588
+ })
589
+ });
514
590
  };
515
591
  var _default = exports.default = RecorderBox;