@elicecontents/content-ui 1.0.18-rc.0 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/base-input/BaseInput.d.ts +4 -1
- package/cjs/components/base-input/BaseInput.js +10 -4
- package/cjs/components/recorder-step/RecorderContext.d.ts +4 -2
- package/cjs/components/recorder-step/RecorderContext.js +18 -11
- package/cjs/components/recorder-step/RecorderStep.d.ts +10 -4
- package/cjs/components/recorder-step/RecorderStep.js +54 -90
- package/cjs/components/sound-visualizer/SoundVisualizer.d.ts +2 -2
- package/cjs/components/sound-visualizer/SoundVisualizer.js +8 -39
- package/es/components/base-input/BaseInput.d.ts +4 -1
- package/es/components/base-input/BaseInput.js +10 -4
- package/es/components/recorder-step/RecorderContext.d.ts +4 -2
- package/es/components/recorder-step/RecorderContext.js +18 -11
- package/es/components/recorder-step/RecorderStep.d.ts +10 -4
- package/es/components/recorder-step/RecorderStep.js +54 -90
- package/es/components/sound-visualizer/SoundVisualizer.d.ts +2 -2
- package/es/components/sound-visualizer/SoundVisualizer.js +9 -40
- package/package.json +1 -1
|
@@ -7,8 +7,11 @@ export interface BaseInputProps {
|
|
|
7
7
|
children?: React.ReactNode;
|
|
8
8
|
isDisabled?: boolean;
|
|
9
9
|
inputType: BaseInputType;
|
|
10
|
+
containerStyle?: React.CSSProperties;
|
|
11
|
+
inputStyle?: React.CSSProperties;
|
|
12
|
+
underlineStyle?: React.CSSProperties;
|
|
10
13
|
}
|
|
11
|
-
declare const BaseInput: (({ value, onChange, placeholder, children, isDisabled, inputType, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
14
|
+
declare const BaseInput: (({ value, onChange, placeholder, children, isDisabled, inputType, containerStyle, inputStyle, underlineStyle, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
12
15
|
LeftElement: ({ children }: {
|
|
13
16
|
children?: React.ReactNode;
|
|
14
17
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -60,21 +60,27 @@ var BaseInput = Object.assign(function (_ref5) {
|
|
|
60
60
|
_ref5$isDisabled = _ref5.isDisabled,
|
|
61
61
|
isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
|
|
62
62
|
_ref5$inputType = _ref5.inputType,
|
|
63
|
-
inputType = _ref5$inputType === void 0 ? "normal" : _ref5$inputType
|
|
63
|
+
inputType = _ref5$inputType === void 0 ? "normal" : _ref5$inputType,
|
|
64
|
+
containerStyle = _ref5.containerStyle,
|
|
65
|
+
inputStyle = _ref5.inputStyle,
|
|
66
|
+
underlineStyle = _ref5.underlineStyle;
|
|
64
67
|
var theme = material.useTheme();
|
|
65
68
|
return jsxRuntime.jsxs(BaseInputContainer, {
|
|
66
69
|
type: inputType,
|
|
67
70
|
borderColor: theme.palette.secondary.main,
|
|
71
|
+
style: containerStyle,
|
|
68
72
|
children: [children && jsxRuntime.jsx("div", {
|
|
69
73
|
children: children
|
|
70
|
-
}),
|
|
74
|
+
}), jsxRuntime.jsxs(BaseInputContent, {
|
|
71
75
|
children: [jsxRuntime.jsx(InputText, {
|
|
72
76
|
disabled: isDisabled,
|
|
73
77
|
value: value,
|
|
74
78
|
onChange: onChange,
|
|
75
|
-
placeholder: placeholder
|
|
79
|
+
placeholder: placeholder,
|
|
80
|
+
style: inputStyle
|
|
76
81
|
}), jsxRuntime.jsx(UnderLineDivider, {
|
|
77
|
-
theme: theme
|
|
82
|
+
theme: theme,
|
|
83
|
+
style: underlineStyle
|
|
78
84
|
})]
|
|
79
85
|
})]
|
|
80
86
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Dispatch } from 'react';
|
|
2
3
|
export type AudioStep = 'ready' | 'recording' | 'pause' | 'waiting';
|
|
3
4
|
export type StepFlowType = 'basic' | 'pauseable' | 'oneClick' | 'recordOnly' | 'instantRecord';
|
|
4
5
|
interface RecorderState {
|
|
@@ -16,6 +17,7 @@ type RecorderContextType = {
|
|
|
16
17
|
pauseRecording: () => void;
|
|
17
18
|
resumeRecording: () => void;
|
|
18
19
|
setIsRecording: (isRecording: boolean) => void;
|
|
20
|
+
setStep: (step: AudioStep) => void;
|
|
19
21
|
};
|
|
20
22
|
type RecorderAction = {
|
|
21
23
|
type: 'SET_STEP';
|
|
@@ -33,7 +35,7 @@ type RecorderAction = {
|
|
|
33
35
|
type: 'SET_URL';
|
|
34
36
|
payload: string;
|
|
35
37
|
};
|
|
36
|
-
export declare const RecorderProvider: ({ children }: {
|
|
38
|
+
export declare const RecorderProvider: ({ children, }: {
|
|
37
39
|
children: React.ReactNode;
|
|
38
40
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
39
41
|
export declare const useRecorder: () => RecorderContextType;
|
|
@@ -67,12 +67,12 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
67
67
|
audioChunks.current = [];
|
|
68
68
|
recorder = new MediaRecorder(stream);
|
|
69
69
|
mediaRecorderRef.current = recorder;
|
|
70
|
-
recorder.
|
|
70
|
+
recorder.addEventListener('dataavailable', function (event) {
|
|
71
71
|
if (event.data.size > 0) {
|
|
72
72
|
audioChunks.current.push(event.data);
|
|
73
73
|
}
|
|
74
|
-
};
|
|
75
|
-
recorder.
|
|
74
|
+
});
|
|
75
|
+
recorder.addEventListener('stop', function () {
|
|
76
76
|
var blob = new Blob(audioChunks.current, {
|
|
77
77
|
type: 'audio/wav'
|
|
78
78
|
});
|
|
@@ -89,7 +89,7 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
89
89
|
payload: url
|
|
90
90
|
});
|
|
91
91
|
onComplete === null || onComplete === void 0 ? void 0 : onComplete(file);
|
|
92
|
-
};
|
|
92
|
+
});
|
|
93
93
|
// AudioContext 연결
|
|
94
94
|
audioContextRef.current = new AudioContext();
|
|
95
95
|
analyserRef.current = audioContextRef.current.createAnalyser();
|
|
@@ -100,12 +100,12 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
100
100
|
type: 'SET_ANALYSER',
|
|
101
101
|
payload: analyserRef.current
|
|
102
102
|
});
|
|
103
|
-
recorder.
|
|
103
|
+
recorder.addEventListener('start', function () {
|
|
104
104
|
dispatch({
|
|
105
|
-
type:
|
|
106
|
-
payload:
|
|
105
|
+
type: 'SET_STEP',
|
|
106
|
+
payload: 'recording'
|
|
107
107
|
});
|
|
108
|
-
};
|
|
108
|
+
});
|
|
109
109
|
recorder.start();
|
|
110
110
|
_context.next = 23;
|
|
111
111
|
break;
|
|
@@ -129,9 +129,9 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
129
129
|
(_b = streamRef.current) === null || _b === void 0 ? void 0 : _b.getTracks().forEach(function (track) {
|
|
130
130
|
return track.stop();
|
|
131
131
|
});
|
|
132
|
-
if (((_c = audioContextRef.current) === null || _c === void 0 ? void 0 : _c.state) !==
|
|
132
|
+
if (((_c = audioContextRef.current) === null || _c === void 0 ? void 0 : _c.state) !== 'closed') {
|
|
133
133
|
(_d = audioContextRef.current) === null || _d === void 0 ? void 0 : _d.close()["catch"](function (e) {
|
|
134
|
-
return console.warn(
|
|
134
|
+
return console.warn('AudioContext already closed', e);
|
|
135
135
|
});
|
|
136
136
|
}
|
|
137
137
|
if (isSubmit) {
|
|
@@ -172,6 +172,12 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
172
172
|
payload: isRecording
|
|
173
173
|
});
|
|
174
174
|
};
|
|
175
|
+
var setStep = function setStep(step) {
|
|
176
|
+
dispatch({
|
|
177
|
+
type: 'SET_STEP',
|
|
178
|
+
payload: step
|
|
179
|
+
});
|
|
180
|
+
};
|
|
175
181
|
return jsxRuntime.jsx(RecorderContext.Provider, {
|
|
176
182
|
value: {
|
|
177
183
|
state: state,
|
|
@@ -180,7 +186,8 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
180
186
|
stopRecording: stopRecording,
|
|
181
187
|
pauseRecording: pauseRecording,
|
|
182
188
|
resumeRecording: resumeRecording,
|
|
183
|
-
setIsRecording: setIsRecording
|
|
189
|
+
setIsRecording: setIsRecording,
|
|
190
|
+
setStep: setStep
|
|
184
191
|
},
|
|
185
192
|
children: children
|
|
186
193
|
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
export type
|
|
1
|
+
import type { SxProps } from "@mui/material";
|
|
2
|
+
import { type SoundVisualizerVariant } from "../sound-visualizer";
|
|
3
|
+
export type RecorderStep = 'ready' | 'recording' | 'pause' | 'waiting';
|
|
4
|
+
export type RecorderType = 'needPause' | 'needWaiting' | 'allNeed' | 'notNeed';
|
|
4
5
|
export interface EliceRecorderStepProps {
|
|
5
6
|
onAudioReady: (file: File) => void;
|
|
6
7
|
onTransform?: () => void;
|
|
@@ -10,10 +11,15 @@ export interface EliceRecorderStepProps {
|
|
|
10
11
|
onRecord?: () => void;
|
|
11
12
|
onResume?: () => void;
|
|
12
13
|
onPause?: () => void;
|
|
14
|
+
defaultBarColor?: string;
|
|
13
15
|
closeRecorder?: () => void;
|
|
14
16
|
onTranscribingChange?: (value: boolean) => void;
|
|
15
17
|
isLoadingMessage?: boolean;
|
|
16
18
|
forcedStep?: RecorderStep;
|
|
19
|
+
sx?: SxProps;
|
|
20
|
+
onRecordStep?: (step: RecorderStep) => void;
|
|
21
|
+
initFile?: File;
|
|
22
|
+
disabled?: boolean;
|
|
17
23
|
}
|
|
18
|
-
declare const EliceRecorderStep: ({ onAudioReady, onTransform, visualType, onRecord, type, isReadyVisual, onResume, onPause, onTranscribingChange, forcedStep, closeRecorder, }: EliceRecorderStepProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare const EliceRecorderStep: ({ onAudioReady, onTransform, visualType, onRecord, type, isReadyVisual, onResume, onPause, onTranscribingChange, forcedStep, closeRecorder, defaultBarColor, sx, onRecordStep, initFile, disabled, }: EliceRecorderStepProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
25
|
export default EliceRecorderStep;
|
|
@@ -3,23 +3,22 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
6
|
-
var _styled = require('@emotion/styled/base');
|
|
7
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
7
|
var React = require('react');
|
|
9
8
|
var material = require('@mui/material');
|
|
10
9
|
require('tslib');
|
|
11
10
|
var Recording = require('../../icons/Recording.js');
|
|
12
11
|
var ReadyRecord = require('../../icons/ReadyRecord.js');
|
|
13
|
-
var RecorderContext = require('./RecorderContext.js');
|
|
14
|
-
var SoundVisualizer = require('../sound-visualizer/SoundVisualizer.js');
|
|
15
12
|
var Audio = require('../audio/Audio.js');
|
|
13
|
+
var SoundVisualizer = require('../sound-visualizer/SoundVisualizer.js');
|
|
16
14
|
var Button = require('../button/Button.js');
|
|
15
|
+
var RecorderContext = require('./RecorderContext.js');
|
|
17
16
|
|
|
18
17
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
19
18
|
|
|
20
|
-
var
|
|
19
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
23
22
|
var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
24
23
|
var onAudioReady = _ref.onAudioReady,
|
|
25
24
|
onTransform = _ref.onTransform,
|
|
@@ -27,27 +26,34 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
27
26
|
visualType = _ref$visualType === void 0 ? 'bar' : _ref$visualType,
|
|
28
27
|
onRecord = _ref.onRecord,
|
|
29
28
|
_ref$type = _ref.type,
|
|
30
|
-
type = _ref$type === void 0 ?
|
|
29
|
+
type = _ref$type === void 0 ? 'notNeed' : _ref$type,
|
|
31
30
|
_ref$isReadyVisual = _ref.isReadyVisual,
|
|
32
31
|
isReadyVisual = _ref$isReadyVisual === void 0 ? false : _ref$isReadyVisual,
|
|
33
32
|
onResume = _ref.onResume,
|
|
34
33
|
onPause = _ref.onPause,
|
|
35
34
|
onTranscribingChange = _ref.onTranscribingChange,
|
|
36
35
|
forcedStep = _ref.forcedStep,
|
|
37
|
-
closeRecorder = _ref.closeRecorder
|
|
36
|
+
closeRecorder = _ref.closeRecorder,
|
|
37
|
+
defaultBarColor = _ref.defaultBarColor,
|
|
38
|
+
sx = _ref.sx,
|
|
39
|
+
onRecordStep = _ref.onRecordStep,
|
|
40
|
+
initFile = _ref.initFile,
|
|
41
|
+
_ref$disabled = _ref.disabled,
|
|
42
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
38
43
|
var _useRecorder = RecorderContext.useRecorder(),
|
|
39
44
|
recorderState = _useRecorder.state,
|
|
40
45
|
startRecording = _useRecorder.startRecording,
|
|
41
46
|
stopRecording = _useRecorder.stopRecording,
|
|
42
47
|
pauseRecording = _useRecorder.pauseRecording,
|
|
43
48
|
resumeRecording = _useRecorder.resumeRecording,
|
|
44
|
-
setIsRecording = _useRecorder.setIsRecording
|
|
45
|
-
|
|
49
|
+
setIsRecording = _useRecorder.setIsRecording,
|
|
50
|
+
setStep = _useRecorder.setStep;
|
|
46
51
|
var _useState = React.useState(''),
|
|
47
52
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
48
53
|
audioUrl = _useState2[0],
|
|
49
54
|
setAudioUrl = _useState2[1];
|
|
50
55
|
var currentStep = forcedStep !== null && forcedStep !== void 0 ? forcedStep : recorderState.step;
|
|
56
|
+
// console.log(currentStep);
|
|
51
57
|
var handleStart = /*#__PURE__*/function () {
|
|
52
58
|
var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
|
|
53
59
|
return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
|
|
@@ -71,6 +77,15 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
71
77
|
return _ref2.apply(this, arguments);
|
|
72
78
|
};
|
|
73
79
|
}();
|
|
80
|
+
var firstTimeInit = React__default.default.useRef(false);
|
|
81
|
+
React__default.default.useEffect(function () {
|
|
82
|
+
if (initFile) {
|
|
83
|
+
var url = URL.createObjectURL(initFile);
|
|
84
|
+
setAudioUrl(url);
|
|
85
|
+
setStep('waiting');
|
|
86
|
+
firstTimeInit.current = true;
|
|
87
|
+
}
|
|
88
|
+
}, [initFile]);
|
|
74
89
|
var handlePause = function handlePause() {
|
|
75
90
|
onPause === null || onPause === void 0 ? void 0 : onPause();
|
|
76
91
|
pauseRecording();
|
|
@@ -96,40 +111,33 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
96
111
|
closeRecorder === null || closeRecorder === void 0 ? void 0 : closeRecorder();
|
|
97
112
|
setIsRecording(false);
|
|
98
113
|
};
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
onClickRecord: handleStart
|
|
106
|
-
}) : jsxRuntime.jsxs(StyledVisualizerBox, {
|
|
114
|
+
React__default.default.useEffect(function () {
|
|
115
|
+
onRecordStep === null || onRecordStep === void 0 ? void 0 : onRecordStep(currentStep);
|
|
116
|
+
}, [currentStep, onRecordStep]);
|
|
117
|
+
return jsxRuntime.jsxs(StyledVisualizerBox, {
|
|
118
|
+
sx: sx,
|
|
119
|
+
children: [currentStep === 'ready' && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
107
120
|
children: [!isReadyVisual && jsxRuntime.jsx(SoundVisualizer.SoundVisualizer, {
|
|
108
121
|
analyser: recorderState.analyser,
|
|
109
122
|
variant: visualType,
|
|
110
|
-
bgColor:
|
|
123
|
+
bgColor: 'transparnet',
|
|
124
|
+
defaultBarColor: defaultBarColor
|
|
111
125
|
}), jsxRuntime.jsxs(StyledRecorderButton, {
|
|
112
126
|
onClick: handleStart,
|
|
113
127
|
step: currentStep,
|
|
114
|
-
theme: theme,
|
|
115
128
|
children: [jsxRuntime.jsx(ReadyRecord.default, {}), jsxRuntime.jsx(material.Typography, {
|
|
116
129
|
variant: "h1",
|
|
117
130
|
children: "\uB179\uC74C \uC2DC\uC791"
|
|
118
131
|
})]
|
|
119
132
|
})]
|
|
120
|
-
})
|
|
121
|
-
analyser: recorderState.analyser,
|
|
122
|
-
sensitivity: 3,
|
|
123
|
-
decay: 0.5,
|
|
124
|
-
variant: visualType,
|
|
125
|
-
onClickRecord: handleSubmit
|
|
126
|
-
}) : jsxRuntime.jsxs(StyledVisualizerBox, {
|
|
133
|
+
}), currentStep === 'recording' && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
127
134
|
children: [jsxRuntime.jsx(SoundVisualizer.SoundVisualizer, {
|
|
128
135
|
analyser: recorderState.analyser,
|
|
129
136
|
variant: visualType,
|
|
130
|
-
|
|
137
|
+
defaultBarColor: defaultBarColor,
|
|
138
|
+
bgColor: 'transparnet'
|
|
131
139
|
}), jsxRuntime.jsxs(StyledVisualizerBoxButtonContainer, {
|
|
132
|
-
children: [(type
|
|
140
|
+
children: [(type === 'needPause' || type === 'allNeed') && jsxRuntime.jsxs(StyledPauseButton, {
|
|
133
141
|
onClick: handlePause,
|
|
134
142
|
children: [jsxRuntime.jsx(Recording.default, {
|
|
135
143
|
color: "#485EAD",
|
|
@@ -139,22 +147,21 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
139
147
|
children: "\uC77C\uC2DC \uC815\uC9C0"
|
|
140
148
|
})]
|
|
141
149
|
}), jsxRuntime.jsxs(StyledRecorderButton, {
|
|
142
|
-
onClick: type
|
|
150
|
+
onClick: type === 'needPause' || type === 'allNeed' || type === 'needWaiting' ? handleStop : handleOnlySubmit,
|
|
143
151
|
step: currentStep,
|
|
144
|
-
theme: theme,
|
|
145
152
|
children: [jsxRuntime.jsx(Recording.default, {}), jsxRuntime.jsx(material.Typography, {
|
|
146
153
|
variant: "h1",
|
|
147
154
|
children: "\uB179\uC74C \uC644\uB8CC"
|
|
148
155
|
})]
|
|
149
156
|
})]
|
|
150
157
|
})]
|
|
151
|
-
})
|
|
158
|
+
}), currentStep === 'pause' && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
152
159
|
children: [jsxRuntime.jsx(SoundVisualizer.SoundVisualizer, {
|
|
153
160
|
analyser: null,
|
|
154
161
|
variant: visualType,
|
|
155
|
-
bgColor:
|
|
162
|
+
bgColor: 'transparnet'
|
|
156
163
|
}), jsxRuntime.jsxs(StyledVisualizerBoxButtonContainer, {
|
|
157
|
-
children: [(type
|
|
164
|
+
children: [(type === 'needPause' || type === 'allNeed') && jsxRuntime.jsxs(StyledPauseButton, {
|
|
158
165
|
onClick: handleResume,
|
|
159
166
|
children: [jsxRuntime.jsx(Recording.default, {
|
|
160
167
|
color: "#485EAD",
|
|
@@ -166,26 +173,26 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
166
173
|
}), jsxRuntime.jsxs(StyledRecorderButton, {
|
|
167
174
|
onClick: handleStop,
|
|
168
175
|
step: currentStep,
|
|
169
|
-
theme: theme,
|
|
170
176
|
children: [jsxRuntime.jsx(Recording.default, {}), jsxRuntime.jsx(material.Typography, {
|
|
171
177
|
variant: "h1",
|
|
172
178
|
children: "\uB179\uC74C \uC644\uB8CC"
|
|
173
179
|
})]
|
|
174
180
|
})]
|
|
175
181
|
})]
|
|
176
|
-
}), currentStep ===
|
|
182
|
+
}), currentStep === 'waiting' && (type === 'needWaiting' || type === 'allNeed') && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
177
183
|
children: [jsxRuntime.jsx(Audio.default, {
|
|
178
184
|
src: audioUrl
|
|
179
185
|
}), jsxRuntime.jsxs(StyledVisualizerBoxButtonContainer, {
|
|
180
186
|
children: [jsxRuntime.jsxs(StyledRecorderButton, {
|
|
181
|
-
|
|
187
|
+
disabled: disabled,
|
|
188
|
+
onClick: handleStart,
|
|
182
189
|
step: currentStep,
|
|
183
|
-
theme: theme,
|
|
184
190
|
children: [jsxRuntime.jsx(ReadyRecord.default, {}), jsxRuntime.jsx(material.Typography, {
|
|
185
191
|
variant: "h1",
|
|
186
192
|
children: "\uB2E4\uC2DC \uB179\uC74C"
|
|
187
193
|
})]
|
|
188
194
|
}), jsxRuntime.jsx(Button.default, {
|
|
195
|
+
disabled: disabled,
|
|
189
196
|
onClick: handleSubmit,
|
|
190
197
|
children: jsxRuntime.jsx(material.Typography, {
|
|
191
198
|
variant: "h1",
|
|
@@ -196,59 +203,16 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
196
203
|
})]
|
|
197
204
|
});
|
|
198
205
|
};
|
|
199
|
-
var StyledVisualizerBox =
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
});
|
|
209
|
-
var StyledVisualizerBoxButtonContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
|
|
210
|
-
target: "e1twqnuf3"
|
|
211
|
-
})("production" === "production" ? {
|
|
212
|
-
name: "1oj7xzl",
|
|
213
|
-
styles: "width:100%;display:flex;flex-direction:row;gap:17px;justify-content:center;align-items:center"
|
|
214
|
-
} : {
|
|
215
|
-
name: "1oj7xzl",
|
|
216
|
-
styles: "width:100%;display:flex;flex-direction:row;gap:17px;justify-content:center;align-items:center",
|
|
217
|
-
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
218
|
-
});
|
|
219
|
-
var StyledRecorderButtonDefault = /*#__PURE__*/_styled__default.default(material.Button, {
|
|
220
|
-
target: "e1twqnuf2"
|
|
221
|
-
})("production" === "production" ? {
|
|
222
|
-
name: "foilgr",
|
|
223
|
-
styles: "display:flex;width:160px;border:none;height:55px;padding:12px 20px 12px 17px;justify-content:center;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;border-radius:16px"
|
|
224
|
-
} : {
|
|
225
|
-
name: "foilgr",
|
|
226
|
-
styles: "display:flex;width:160px;border:none;height:55px;padding:12px 20px 12px 17px;justify-content:center;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;border-radius:16px",
|
|
227
|
-
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
228
|
-
});
|
|
229
|
-
var StyledRecorderButton = /*#__PURE__*/_styled__default.default(StyledRecorderButtonDefault, {
|
|
230
|
-
target: "e1twqnuf1"
|
|
231
|
-
})("color:", function (_ref3) {
|
|
232
|
-
var step = _ref3.step,
|
|
233
|
-
theme = _ref3.theme;
|
|
234
|
-
return step === "ready" || step === "waiting" ? theme.palette.common.white : theme.palette.common.red[900];
|
|
235
|
-
}, ";background:", function (_ref4) {
|
|
236
|
-
var step = _ref4.step,
|
|
237
|
-
theme = _ref4.theme;
|
|
238
|
-
return step === "ready" || step === "waiting" ? theme.palette.common.red[900] : theme.palette.common.red[200];
|
|
239
|
-
}, ";&:hover{background:", function (_ref5) {
|
|
240
|
-
var theme = _ref5.theme;
|
|
241
|
-
return theme.palette.common.red[600];
|
|
242
|
-
}, ";}");
|
|
243
|
-
var StyledPauseButton = /*#__PURE__*/_styled__default.default(StyledRecorderButtonDefault, {
|
|
244
|
-
target: "e1twqnuf0"
|
|
245
|
-
})("production" === "production" ? {
|
|
246
|
-
name: "1sglcpm",
|
|
247
|
-
styles: "color:#0A379B;background:#BEC4E1;&:hover{color:#BEC4E1;background-color:#0A379B;}"
|
|
248
|
-
} : {
|
|
249
|
-
name: "1sglcpm",
|
|
250
|
-
styles: "color:#0A379B;background:#BEC4E1;&:hover{color:#BEC4E1;background-color:#0A379B;}",
|
|
251
|
-
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
206
|
+
var StyledVisualizerBox = material.styled(material.Stack)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n width: 100%;\n height: 212px;\n background-color: #fff;\n border-radius: 24px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 32px;\n"])));
|
|
207
|
+
var StyledVisualizerBoxButtonContainer = material.styled(material.Stack)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: row;\n gap: 17px;\n justify-content: center;\n align-items: center;\n"])));
|
|
208
|
+
var StyledRecorderButtonDefault = material.styled(material.Button)(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n display: flex;\n width: 160px;\n border: none;\n height: 55px;\n padding: 12px 20px 12px 17px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n flex-shrink: 0;\n border-radius: 16px;\n"])));
|
|
209
|
+
var StyledRecorderButton = material.styled(StyledRecorderButtonDefault)(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n color: ", ";\n background: ", ";\n\n &:hover {\n background: '#FFB1AF';\n }\n"])), function (_ref3) {
|
|
210
|
+
var step = _ref3.step;
|
|
211
|
+
return step === 'ready' || step === 'waiting' ? '#fff' : '#FF5D58';
|
|
212
|
+
}, function (_ref4) {
|
|
213
|
+
var step = _ref4.step;
|
|
214
|
+
return step === 'ready' || step === 'waiting' ? '#FF5D58' : '#FBE0E0';
|
|
252
215
|
});
|
|
216
|
+
var StyledPauseButton = material.styled(StyledRecorderButtonDefault)(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n color: #0a379b;\n background: #bec4e1;\n &:hover {\n color: #bec4e1;\n background-color: #0a379b;\n }\n"])));
|
|
253
217
|
|
|
254
218
|
exports.default = EliceRecorderStep;
|
|
@@ -5,7 +5,7 @@ export interface SoundVisualizerProps {
|
|
|
5
5
|
decay?: number;
|
|
6
6
|
variant?: SoundVisualizerVariant;
|
|
7
7
|
bgColor?: string;
|
|
8
|
-
|
|
8
|
+
defaultBarColor?: string;
|
|
9
9
|
}
|
|
10
|
-
export declare const SoundVisualizer: ({ analyser, sensitivity, decay, variant, bgColor,
|
|
10
|
+
export declare const SoundVisualizer: ({ analyser, sensitivity, decay, variant, bgColor, defaultBarColor, }: SoundVisualizerProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export default SoundVisualizer;
|
|
@@ -6,13 +6,12 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
|
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var material = require('@mui/material');
|
|
9
|
-
var Micro = require('../../icons/Micro.js');
|
|
10
9
|
|
|
11
10
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
11
|
|
|
13
12
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
13
|
|
|
15
|
-
var _templateObject
|
|
14
|
+
var _templateObject;
|
|
16
15
|
var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
17
16
|
var analyser = _ref.analyser,
|
|
18
17
|
_ref$sensitivity = _ref.sensitivity,
|
|
@@ -22,17 +21,13 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
|
22
21
|
_ref$variant = _ref.variant,
|
|
23
22
|
variant = _ref$variant === void 0 ? 'bar' : _ref$variant,
|
|
24
23
|
bgColor = _ref.bgColor,
|
|
25
|
-
|
|
24
|
+
defaultBarColor = _ref.defaultBarColor;
|
|
26
25
|
var theme = material.useTheme();
|
|
27
26
|
var TOTAL_BARS = 17;
|
|
28
27
|
var _React$useState = React__default.default.useState(0),
|
|
29
28
|
_React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
|
|
30
29
|
filledBars = _React$useState2[0],
|
|
31
30
|
setFilledBars = _React$useState2[1];
|
|
32
|
-
var _React$useState3 = React__default.default.useState(1),
|
|
33
|
-
_React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
|
|
34
|
-
pulseSize = _React$useState4[0],
|
|
35
|
-
setPulseSize = _React$useState4[1];
|
|
36
31
|
React__default.default.useEffect(function () {
|
|
37
32
|
if (!analyser) return;
|
|
38
33
|
analyser.fftSize = 128;
|
|
@@ -47,7 +42,6 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
|
47
42
|
var smooth = prevVolume * decay + scaled * (1 - decay);
|
|
48
43
|
prevVolume = smooth;
|
|
49
44
|
setFilledBars(Math.round(smooth / 255 * TOTAL_BARS));
|
|
50
|
-
setPulseSize(1 + smooth / 255);
|
|
51
45
|
requestAnimationFrame(_update);
|
|
52
46
|
};
|
|
53
47
|
_update();
|
|
@@ -55,24 +49,12 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
|
55
49
|
return setFilledBars(0);
|
|
56
50
|
};
|
|
57
51
|
}, [analyser, sensitivity, decay]);
|
|
58
|
-
return jsxRuntime.
|
|
52
|
+
return jsxRuntime.jsx(material.Stack, {
|
|
59
53
|
alignItems: "center",
|
|
60
54
|
justifyContent: "center",
|
|
61
55
|
width: "100%",
|
|
62
56
|
position: "relative",
|
|
63
|
-
children:
|
|
64
|
-
children: [jsxRuntime.jsx(PulseCircle, {
|
|
65
|
-
pulseSize: pulseSize
|
|
66
|
-
}), jsxRuntime.jsx(CenterIconWrapper, {
|
|
67
|
-
bgColor: theme.palette.primary.main,
|
|
68
|
-
onClick: onClickRecord,
|
|
69
|
-
children: jsxRuntime.jsx(Micro.default, {
|
|
70
|
-
width: 118,
|
|
71
|
-
height: 118,
|
|
72
|
-
color: theme.palette.secondary.main
|
|
73
|
-
})
|
|
74
|
-
})]
|
|
75
|
-
}), (variant === 'bar' || variant === 'both') && jsxRuntime.jsx(material.Box, {
|
|
57
|
+
children: (variant === 'bar' || variant === 'both') && jsxRuntime.jsx(material.Box, {
|
|
76
58
|
display: "flex",
|
|
77
59
|
justifyContent: "center",
|
|
78
60
|
alignItems: "center",
|
|
@@ -86,30 +68,17 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
|
86
68
|
}).map(function (_, i) {
|
|
87
69
|
return jsxRuntime.jsx(WaveBar, {
|
|
88
70
|
isFilled: i < filledBars,
|
|
89
|
-
|
|
71
|
+
defaultBarColor: defaultBarColor !== null && defaultBarColor !== void 0 ? defaultBarColor : theme.palette.grey[200]
|
|
90
72
|
}, i);
|
|
91
73
|
})
|
|
92
|
-
})
|
|
74
|
+
})
|
|
93
75
|
});
|
|
94
76
|
};
|
|
95
77
|
var WaveBar = material.styled(material.Box)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n width: 11px;\n height: 34px;\n border-radius: 11px;\n background-color: ", ";\n transition: background-color 0.1s ease-in-out;\n"])), function (_ref2) {
|
|
96
78
|
var isFilled = _ref2.isFilled,
|
|
79
|
+
defaultBarColor = _ref2.defaultBarColor,
|
|
97
80
|
theme = _ref2.theme;
|
|
98
|
-
return isFilled ? theme.palette.primary.main :
|
|
99
|
-
});
|
|
100
|
-
var PulseCircle = material.styled(material.Box)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n position: absolute;\n z-index: 0;\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.15;\n transition: width 0.1s ease-out, height 0.1s ease-out;\n"])), function (_ref3) {
|
|
101
|
-
var pulseSize = _ref3.pulseSize;
|
|
102
|
-
return 150 * pulseSize;
|
|
103
|
-
}, function (_ref4) {
|
|
104
|
-
var pulseSize = _ref4.pulseSize;
|
|
105
|
-
return 150 * pulseSize;
|
|
106
|
-
}, function (_ref5) {
|
|
107
|
-
var theme = _ref5.theme;
|
|
108
|
-
return theme.palette.primary.main;
|
|
109
|
-
});
|
|
110
|
-
var CenterIconWrapper = material.styled(material.Box)(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n width: 150px;\n height: 150px;\n border-radius: 90px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_ref6) {
|
|
111
|
-
var bgColor = _ref6.bgColor;
|
|
112
|
-
return bgColor;
|
|
81
|
+
return isFilled ? theme.palette.primary.main : defaultBarColor;
|
|
113
82
|
});
|
|
114
83
|
|
|
115
84
|
exports.SoundVisualizer = SoundVisualizer;
|
|
@@ -7,8 +7,11 @@ export interface BaseInputProps {
|
|
|
7
7
|
children?: React.ReactNode;
|
|
8
8
|
isDisabled?: boolean;
|
|
9
9
|
inputType: BaseInputType;
|
|
10
|
+
containerStyle?: React.CSSProperties;
|
|
11
|
+
inputStyle?: React.CSSProperties;
|
|
12
|
+
underlineStyle?: React.CSSProperties;
|
|
10
13
|
}
|
|
11
|
-
declare const BaseInput: (({ value, onChange, placeholder, children, isDisabled, inputType, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
14
|
+
declare const BaseInput: (({ value, onChange, placeholder, children, isDisabled, inputType, containerStyle, inputStyle, underlineStyle, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
12
15
|
LeftElement: ({ children }: {
|
|
13
16
|
children?: React.ReactNode;
|
|
14
17
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -52,21 +52,27 @@ var BaseInput = Object.assign(function (_ref5) {
|
|
|
52
52
|
_ref5$isDisabled = _ref5.isDisabled,
|
|
53
53
|
isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
|
|
54
54
|
_ref5$inputType = _ref5.inputType,
|
|
55
|
-
inputType = _ref5$inputType === void 0 ? "normal" : _ref5$inputType
|
|
55
|
+
inputType = _ref5$inputType === void 0 ? "normal" : _ref5$inputType,
|
|
56
|
+
containerStyle = _ref5.containerStyle,
|
|
57
|
+
inputStyle = _ref5.inputStyle,
|
|
58
|
+
underlineStyle = _ref5.underlineStyle;
|
|
56
59
|
var theme = useTheme();
|
|
57
60
|
return jsxs(BaseInputContainer, {
|
|
58
61
|
type: inputType,
|
|
59
62
|
borderColor: theme.palette.secondary.main,
|
|
63
|
+
style: containerStyle,
|
|
60
64
|
children: [children && jsx("div", {
|
|
61
65
|
children: children
|
|
62
|
-
}),
|
|
66
|
+
}), jsxs(BaseInputContent, {
|
|
63
67
|
children: [jsx(InputText, {
|
|
64
68
|
disabled: isDisabled,
|
|
65
69
|
value: value,
|
|
66
70
|
onChange: onChange,
|
|
67
|
-
placeholder: placeholder
|
|
71
|
+
placeholder: placeholder,
|
|
72
|
+
style: inputStyle
|
|
68
73
|
}), jsx(UnderLineDivider, {
|
|
69
|
-
theme: theme
|
|
74
|
+
theme: theme,
|
|
75
|
+
style: underlineStyle
|
|
70
76
|
})]
|
|
71
77
|
})]
|
|
72
78
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Dispatch } from 'react';
|
|
2
3
|
export type AudioStep = 'ready' | 'recording' | 'pause' | 'waiting';
|
|
3
4
|
export type StepFlowType = 'basic' | 'pauseable' | 'oneClick' | 'recordOnly' | 'instantRecord';
|
|
4
5
|
interface RecorderState {
|
|
@@ -16,6 +17,7 @@ type RecorderContextType = {
|
|
|
16
17
|
pauseRecording: () => void;
|
|
17
18
|
resumeRecording: () => void;
|
|
18
19
|
setIsRecording: (isRecording: boolean) => void;
|
|
20
|
+
setStep: (step: AudioStep) => void;
|
|
19
21
|
};
|
|
20
22
|
type RecorderAction = {
|
|
21
23
|
type: 'SET_STEP';
|
|
@@ -33,7 +35,7 @@ type RecorderAction = {
|
|
|
33
35
|
type: 'SET_URL';
|
|
34
36
|
payload: string;
|
|
35
37
|
};
|
|
36
|
-
export declare const RecorderProvider: ({ children }: {
|
|
38
|
+
export declare const RecorderProvider: ({ children, }: {
|
|
37
39
|
children: React.ReactNode;
|
|
38
40
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
39
41
|
export declare const useRecorder: () => RecorderContextType;
|
|
@@ -65,12 +65,12 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
65
65
|
audioChunks.current = [];
|
|
66
66
|
recorder = new MediaRecorder(stream);
|
|
67
67
|
mediaRecorderRef.current = recorder;
|
|
68
|
-
recorder.
|
|
68
|
+
recorder.addEventListener('dataavailable', function (event) {
|
|
69
69
|
if (event.data.size > 0) {
|
|
70
70
|
audioChunks.current.push(event.data);
|
|
71
71
|
}
|
|
72
|
-
};
|
|
73
|
-
recorder.
|
|
72
|
+
});
|
|
73
|
+
recorder.addEventListener('stop', function () {
|
|
74
74
|
var blob = new Blob(audioChunks.current, {
|
|
75
75
|
type: 'audio/wav'
|
|
76
76
|
});
|
|
@@ -87,7 +87,7 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
87
87
|
payload: url
|
|
88
88
|
});
|
|
89
89
|
onComplete === null || onComplete === void 0 ? void 0 : onComplete(file);
|
|
90
|
-
};
|
|
90
|
+
});
|
|
91
91
|
// AudioContext 연결
|
|
92
92
|
audioContextRef.current = new AudioContext();
|
|
93
93
|
analyserRef.current = audioContextRef.current.createAnalyser();
|
|
@@ -98,12 +98,12 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
98
98
|
type: 'SET_ANALYSER',
|
|
99
99
|
payload: analyserRef.current
|
|
100
100
|
});
|
|
101
|
-
recorder.
|
|
101
|
+
recorder.addEventListener('start', function () {
|
|
102
102
|
dispatch({
|
|
103
|
-
type:
|
|
104
|
-
payload:
|
|
103
|
+
type: 'SET_STEP',
|
|
104
|
+
payload: 'recording'
|
|
105
105
|
});
|
|
106
|
-
};
|
|
106
|
+
});
|
|
107
107
|
recorder.start();
|
|
108
108
|
_context.next = 23;
|
|
109
109
|
break;
|
|
@@ -127,9 +127,9 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
127
127
|
(_b = streamRef.current) === null || _b === void 0 ? void 0 : _b.getTracks().forEach(function (track) {
|
|
128
128
|
return track.stop();
|
|
129
129
|
});
|
|
130
|
-
if (((_c = audioContextRef.current) === null || _c === void 0 ? void 0 : _c.state) !==
|
|
130
|
+
if (((_c = audioContextRef.current) === null || _c === void 0 ? void 0 : _c.state) !== 'closed') {
|
|
131
131
|
(_d = audioContextRef.current) === null || _d === void 0 ? void 0 : _d.close()["catch"](function (e) {
|
|
132
|
-
return console.warn(
|
|
132
|
+
return console.warn('AudioContext already closed', e);
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
135
|
if (isSubmit) {
|
|
@@ -170,6 +170,12 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
170
170
|
payload: isRecording
|
|
171
171
|
});
|
|
172
172
|
};
|
|
173
|
+
var setStep = function setStep(step) {
|
|
174
|
+
dispatch({
|
|
175
|
+
type: 'SET_STEP',
|
|
176
|
+
payload: step
|
|
177
|
+
});
|
|
178
|
+
};
|
|
173
179
|
return jsx(RecorderContext.Provider, {
|
|
174
180
|
value: {
|
|
175
181
|
state: state,
|
|
@@ -178,7 +184,8 @@ var RecorderProvider = function RecorderProvider(_ref) {
|
|
|
178
184
|
stopRecording: stopRecording,
|
|
179
185
|
pauseRecording: pauseRecording,
|
|
180
186
|
resumeRecording: resumeRecording,
|
|
181
|
-
setIsRecording: setIsRecording
|
|
187
|
+
setIsRecording: setIsRecording,
|
|
188
|
+
setStep: setStep
|
|
182
189
|
},
|
|
183
190
|
children: children
|
|
184
191
|
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
export type
|
|
1
|
+
import type { SxProps } from "@mui/material";
|
|
2
|
+
import { type SoundVisualizerVariant } from "../sound-visualizer";
|
|
3
|
+
export type RecorderStep = 'ready' | 'recording' | 'pause' | 'waiting';
|
|
4
|
+
export type RecorderType = 'needPause' | 'needWaiting' | 'allNeed' | 'notNeed';
|
|
4
5
|
export interface EliceRecorderStepProps {
|
|
5
6
|
onAudioReady: (file: File) => void;
|
|
6
7
|
onTransform?: () => void;
|
|
@@ -10,10 +11,15 @@ export interface EliceRecorderStepProps {
|
|
|
10
11
|
onRecord?: () => void;
|
|
11
12
|
onResume?: () => void;
|
|
12
13
|
onPause?: () => void;
|
|
14
|
+
defaultBarColor?: string;
|
|
13
15
|
closeRecorder?: () => void;
|
|
14
16
|
onTranscribingChange?: (value: boolean) => void;
|
|
15
17
|
isLoadingMessage?: boolean;
|
|
16
18
|
forcedStep?: RecorderStep;
|
|
19
|
+
sx?: SxProps;
|
|
20
|
+
onRecordStep?: (step: RecorderStep) => void;
|
|
21
|
+
initFile?: File;
|
|
22
|
+
disabled?: boolean;
|
|
17
23
|
}
|
|
18
|
-
declare const EliceRecorderStep: ({ onAudioReady, onTransform, visualType, onRecord, type, isReadyVisual, onResume, onPause, onTranscribingChange, forcedStep, closeRecorder, }: EliceRecorderStepProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare const EliceRecorderStep: ({ onAudioReady, onTransform, visualType, onRecord, type, isReadyVisual, onResume, onPause, onTranscribingChange, forcedStep, closeRecorder, defaultBarColor, sx, onRecordStep, initFile, disabled, }: EliceRecorderStepProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
25
|
export default EliceRecorderStep;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import _styled from '@emotion/styled/base';
|
|
1
|
+
import { taggedTemplateLiteral as _taggedTemplateLiteral, slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
4
|
-
import { useState } from 'react';
|
|
5
|
-
import { Stack, Button,
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
|
+
import { styled, Stack, Button, Typography } from '@mui/material';
|
|
6
5
|
import { useRecorder } from './RecorderContext.js';
|
|
7
6
|
import { SoundVisualizer } from '../sound-visualizer/SoundVisualizer.js';
|
|
8
7
|
import ReadyRecord from '../../icons/ReadyRecord.js';
|
|
@@ -10,7 +9,7 @@ import Recording from '../../icons/Recording.js';
|
|
|
10
9
|
import EliceAudioPlayer from '../audio/Audio.js';
|
|
11
10
|
import EliceButton from '../button/Button.js';
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
14
13
|
var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
15
14
|
var onAudioReady = _ref.onAudioReady,
|
|
16
15
|
onTransform = _ref.onTransform,
|
|
@@ -18,27 +17,34 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
18
17
|
visualType = _ref$visualType === void 0 ? 'bar' : _ref$visualType,
|
|
19
18
|
onRecord = _ref.onRecord,
|
|
20
19
|
_ref$type = _ref.type,
|
|
21
|
-
type = _ref$type === void 0 ?
|
|
20
|
+
type = _ref$type === void 0 ? 'notNeed' : _ref$type,
|
|
22
21
|
_ref$isReadyVisual = _ref.isReadyVisual,
|
|
23
22
|
isReadyVisual = _ref$isReadyVisual === void 0 ? false : _ref$isReadyVisual,
|
|
24
23
|
onResume = _ref.onResume,
|
|
25
24
|
onPause = _ref.onPause,
|
|
26
25
|
onTranscribingChange = _ref.onTranscribingChange,
|
|
27
26
|
forcedStep = _ref.forcedStep,
|
|
28
|
-
closeRecorder = _ref.closeRecorder
|
|
27
|
+
closeRecorder = _ref.closeRecorder,
|
|
28
|
+
defaultBarColor = _ref.defaultBarColor,
|
|
29
|
+
sx = _ref.sx,
|
|
30
|
+
onRecordStep = _ref.onRecordStep,
|
|
31
|
+
initFile = _ref.initFile,
|
|
32
|
+
_ref$disabled = _ref.disabled,
|
|
33
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
29
34
|
var _useRecorder = useRecorder(),
|
|
30
35
|
recorderState = _useRecorder.state,
|
|
31
36
|
startRecording = _useRecorder.startRecording,
|
|
32
37
|
stopRecording = _useRecorder.stopRecording,
|
|
33
38
|
pauseRecording = _useRecorder.pauseRecording,
|
|
34
39
|
resumeRecording = _useRecorder.resumeRecording,
|
|
35
|
-
setIsRecording = _useRecorder.setIsRecording
|
|
36
|
-
|
|
40
|
+
setIsRecording = _useRecorder.setIsRecording,
|
|
41
|
+
setStep = _useRecorder.setStep;
|
|
37
42
|
var _useState = useState(''),
|
|
38
43
|
_useState2 = _slicedToArray(_useState, 2),
|
|
39
44
|
audioUrl = _useState2[0],
|
|
40
45
|
setAudioUrl = _useState2[1];
|
|
41
46
|
var currentStep = forcedStep !== null && forcedStep !== void 0 ? forcedStep : recorderState.step;
|
|
47
|
+
// console.log(currentStep);
|
|
42
48
|
var handleStart = /*#__PURE__*/function () {
|
|
43
49
|
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
44
50
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
@@ -62,6 +68,15 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
62
68
|
return _ref2.apply(this, arguments);
|
|
63
69
|
};
|
|
64
70
|
}();
|
|
71
|
+
var firstTimeInit = React.useRef(false);
|
|
72
|
+
React.useEffect(function () {
|
|
73
|
+
if (initFile) {
|
|
74
|
+
var url = URL.createObjectURL(initFile);
|
|
75
|
+
setAudioUrl(url);
|
|
76
|
+
setStep('waiting');
|
|
77
|
+
firstTimeInit.current = true;
|
|
78
|
+
}
|
|
79
|
+
}, [initFile]);
|
|
65
80
|
var handlePause = function handlePause() {
|
|
66
81
|
onPause === null || onPause === void 0 ? void 0 : onPause();
|
|
67
82
|
pauseRecording();
|
|
@@ -87,40 +102,33 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
87
102
|
closeRecorder === null || closeRecorder === void 0 ? void 0 : closeRecorder();
|
|
88
103
|
setIsRecording(false);
|
|
89
104
|
};
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
onClickRecord: handleStart
|
|
97
|
-
}) : jsxs(StyledVisualizerBox, {
|
|
105
|
+
React.useEffect(function () {
|
|
106
|
+
onRecordStep === null || onRecordStep === void 0 ? void 0 : onRecordStep(currentStep);
|
|
107
|
+
}, [currentStep, onRecordStep]);
|
|
108
|
+
return jsxs(StyledVisualizerBox, {
|
|
109
|
+
sx: sx,
|
|
110
|
+
children: [currentStep === 'ready' && jsxs(Fragment, {
|
|
98
111
|
children: [!isReadyVisual && jsx(SoundVisualizer, {
|
|
99
112
|
analyser: recorderState.analyser,
|
|
100
113
|
variant: visualType,
|
|
101
|
-
bgColor:
|
|
114
|
+
bgColor: 'transparnet',
|
|
115
|
+
defaultBarColor: defaultBarColor
|
|
102
116
|
}), jsxs(StyledRecorderButton, {
|
|
103
117
|
onClick: handleStart,
|
|
104
118
|
step: currentStep,
|
|
105
|
-
theme: theme,
|
|
106
119
|
children: [jsx(ReadyRecord, {}), jsx(Typography, {
|
|
107
120
|
variant: "h1",
|
|
108
121
|
children: "\uB179\uC74C \uC2DC\uC791"
|
|
109
122
|
})]
|
|
110
123
|
})]
|
|
111
|
-
})
|
|
112
|
-
analyser: recorderState.analyser,
|
|
113
|
-
sensitivity: 3,
|
|
114
|
-
decay: 0.5,
|
|
115
|
-
variant: visualType,
|
|
116
|
-
onClickRecord: handleSubmit
|
|
117
|
-
}) : jsxs(StyledVisualizerBox, {
|
|
124
|
+
}), currentStep === 'recording' && jsxs(Fragment, {
|
|
118
125
|
children: [jsx(SoundVisualizer, {
|
|
119
126
|
analyser: recorderState.analyser,
|
|
120
127
|
variant: visualType,
|
|
121
|
-
|
|
128
|
+
defaultBarColor: defaultBarColor,
|
|
129
|
+
bgColor: 'transparnet'
|
|
122
130
|
}), jsxs(StyledVisualizerBoxButtonContainer, {
|
|
123
|
-
children: [(type
|
|
131
|
+
children: [(type === 'needPause' || type === 'allNeed') && jsxs(StyledPauseButton, {
|
|
124
132
|
onClick: handlePause,
|
|
125
133
|
children: [jsx(Recording, {
|
|
126
134
|
color: "#485EAD",
|
|
@@ -130,22 +138,21 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
130
138
|
children: "\uC77C\uC2DC \uC815\uC9C0"
|
|
131
139
|
})]
|
|
132
140
|
}), jsxs(StyledRecorderButton, {
|
|
133
|
-
onClick: type
|
|
141
|
+
onClick: type === 'needPause' || type === 'allNeed' || type === 'needWaiting' ? handleStop : handleOnlySubmit,
|
|
134
142
|
step: currentStep,
|
|
135
|
-
theme: theme,
|
|
136
143
|
children: [jsx(Recording, {}), jsx(Typography, {
|
|
137
144
|
variant: "h1",
|
|
138
145
|
children: "\uB179\uC74C \uC644\uB8CC"
|
|
139
146
|
})]
|
|
140
147
|
})]
|
|
141
148
|
})]
|
|
142
|
-
})
|
|
149
|
+
}), currentStep === 'pause' && jsxs(Fragment, {
|
|
143
150
|
children: [jsx(SoundVisualizer, {
|
|
144
151
|
analyser: null,
|
|
145
152
|
variant: visualType,
|
|
146
|
-
bgColor:
|
|
153
|
+
bgColor: 'transparnet'
|
|
147
154
|
}), jsxs(StyledVisualizerBoxButtonContainer, {
|
|
148
|
-
children: [(type
|
|
155
|
+
children: [(type === 'needPause' || type === 'allNeed') && jsxs(StyledPauseButton, {
|
|
149
156
|
onClick: handleResume,
|
|
150
157
|
children: [jsx(Recording, {
|
|
151
158
|
color: "#485EAD",
|
|
@@ -157,26 +164,26 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
157
164
|
}), jsxs(StyledRecorderButton, {
|
|
158
165
|
onClick: handleStop,
|
|
159
166
|
step: currentStep,
|
|
160
|
-
theme: theme,
|
|
161
167
|
children: [jsx(Recording, {}), jsx(Typography, {
|
|
162
168
|
variant: "h1",
|
|
163
169
|
children: "\uB179\uC74C \uC644\uB8CC"
|
|
164
170
|
})]
|
|
165
171
|
})]
|
|
166
172
|
})]
|
|
167
|
-
}), currentStep ===
|
|
173
|
+
}), currentStep === 'waiting' && (type === 'needWaiting' || type === 'allNeed') && jsxs(Fragment, {
|
|
168
174
|
children: [jsx(EliceAudioPlayer, {
|
|
169
175
|
src: audioUrl
|
|
170
176
|
}), jsxs(StyledVisualizerBoxButtonContainer, {
|
|
171
177
|
children: [jsxs(StyledRecorderButton, {
|
|
172
|
-
|
|
178
|
+
disabled: disabled,
|
|
179
|
+
onClick: handleStart,
|
|
173
180
|
step: currentStep,
|
|
174
|
-
theme: theme,
|
|
175
181
|
children: [jsx(ReadyRecord, {}), jsx(Typography, {
|
|
176
182
|
variant: "h1",
|
|
177
183
|
children: "\uB2E4\uC2DC \uB179\uC74C"
|
|
178
184
|
})]
|
|
179
185
|
}), jsx(EliceButton, {
|
|
186
|
+
disabled: disabled,
|
|
180
187
|
onClick: handleSubmit,
|
|
181
188
|
children: jsx(Typography, {
|
|
182
189
|
variant: "h1",
|
|
@@ -187,59 +194,16 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
|
|
|
187
194
|
})]
|
|
188
195
|
});
|
|
189
196
|
};
|
|
190
|
-
var StyledVisualizerBox =
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
});
|
|
200
|
-
var StyledVisualizerBoxButtonContainer = /*#__PURE__*/_styled(Stack, {
|
|
201
|
-
target: "e1twqnuf3"
|
|
202
|
-
})("production" === "production" ? {
|
|
203
|
-
name: "1oj7xzl",
|
|
204
|
-
styles: "width:100%;display:flex;flex-direction:row;gap:17px;justify-content:center;align-items:center"
|
|
205
|
-
} : {
|
|
206
|
-
name: "1oj7xzl",
|
|
207
|
-
styles: "width:100%;display:flex;flex-direction:row;gap:17px;justify-content:center;align-items:center",
|
|
208
|
-
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
209
|
-
});
|
|
210
|
-
var StyledRecorderButtonDefault = /*#__PURE__*/_styled(Button, {
|
|
211
|
-
target: "e1twqnuf2"
|
|
212
|
-
})("production" === "production" ? {
|
|
213
|
-
name: "foilgr",
|
|
214
|
-
styles: "display:flex;width:160px;border:none;height:55px;padding:12px 20px 12px 17px;justify-content:center;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;border-radius:16px"
|
|
215
|
-
} : {
|
|
216
|
-
name: "foilgr",
|
|
217
|
-
styles: "display:flex;width:160px;border:none;height:55px;padding:12px 20px 12px 17px;justify-content:center;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;border-radius:16px",
|
|
218
|
-
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
219
|
-
});
|
|
220
|
-
var StyledRecorderButton = /*#__PURE__*/_styled(StyledRecorderButtonDefault, {
|
|
221
|
-
target: "e1twqnuf1"
|
|
222
|
-
})("color:", function (_ref3) {
|
|
223
|
-
var step = _ref3.step,
|
|
224
|
-
theme = _ref3.theme;
|
|
225
|
-
return step === "ready" || step === "waiting" ? theme.palette.common.white : theme.palette.common.red[900];
|
|
226
|
-
}, ";background:", function (_ref4) {
|
|
227
|
-
var step = _ref4.step,
|
|
228
|
-
theme = _ref4.theme;
|
|
229
|
-
return step === "ready" || step === "waiting" ? theme.palette.common.red[900] : theme.palette.common.red[200];
|
|
230
|
-
}, ";&:hover{background:", function (_ref5) {
|
|
231
|
-
var theme = _ref5.theme;
|
|
232
|
-
return theme.palette.common.red[600];
|
|
233
|
-
}, ";}");
|
|
234
|
-
var StyledPauseButton = /*#__PURE__*/_styled(StyledRecorderButtonDefault, {
|
|
235
|
-
target: "e1twqnuf0"
|
|
236
|
-
})("production" === "production" ? {
|
|
237
|
-
name: "1sglcpm",
|
|
238
|
-
styles: "color:#0A379B;background:#BEC4E1;&:hover{color:#BEC4E1;background-color:#0A379B;}"
|
|
239
|
-
} : {
|
|
240
|
-
name: "1sglcpm",
|
|
241
|
-
styles: "color:#0A379B;background:#BEC4E1;&:hover{color:#BEC4E1;background-color:#0A379B;}",
|
|
242
|
-
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
197
|
+
var StyledVisualizerBox = styled(Stack)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: 212px;\n background-color: #fff;\n border-radius: 24px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 32px;\n"])));
|
|
198
|
+
var StyledVisualizerBoxButtonContainer = styled(Stack)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: row;\n gap: 17px;\n justify-content: center;\n align-items: center;\n"])));
|
|
199
|
+
var StyledRecorderButtonDefault = styled(Button)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n width: 160px;\n border: none;\n height: 55px;\n padding: 12px 20px 12px 17px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n flex-shrink: 0;\n border-radius: 16px;\n"])));
|
|
200
|
+
var StyledRecorderButton = styled(StyledRecorderButtonDefault)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n background: ", ";\n\n &:hover {\n background: '#FFB1AF';\n }\n"])), function (_ref3) {
|
|
201
|
+
var step = _ref3.step;
|
|
202
|
+
return step === 'ready' || step === 'waiting' ? '#fff' : '#FF5D58';
|
|
203
|
+
}, function (_ref4) {
|
|
204
|
+
var step = _ref4.step;
|
|
205
|
+
return step === 'ready' || step === 'waiting' ? '#FF5D58' : '#FBE0E0';
|
|
243
206
|
});
|
|
207
|
+
var StyledPauseButton = styled(StyledRecorderButtonDefault)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: #0a379b;\n background: #bec4e1;\n &:hover {\n color: #bec4e1;\n background-color: #0a379b;\n }\n"])));
|
|
244
208
|
|
|
245
209
|
export { EliceRecorderStep as default };
|
|
@@ -5,7 +5,7 @@ export interface SoundVisualizerProps {
|
|
|
5
5
|
decay?: number;
|
|
6
6
|
variant?: SoundVisualizerVariant;
|
|
7
7
|
bgColor?: string;
|
|
8
|
-
|
|
8
|
+
defaultBarColor?: string;
|
|
9
9
|
}
|
|
10
|
-
export declare const SoundVisualizer: ({ analyser, sensitivity, decay, variant, bgColor,
|
|
10
|
+
export declare const SoundVisualizer: ({ analyser, sensitivity, decay, variant, bgColor, defaultBarColor, }: SoundVisualizerProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export default SoundVisualizer;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { taggedTemplateLiteral as _taggedTemplateLiteral, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import {
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { styled, Box, useTheme, Stack } from '@mui/material';
|
|
5
|
-
import Micro from '../../icons/Micro.js';
|
|
6
5
|
|
|
7
|
-
var _templateObject
|
|
6
|
+
var _templateObject;
|
|
8
7
|
var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
9
8
|
var analyser = _ref.analyser,
|
|
10
9
|
_ref$sensitivity = _ref.sensitivity,
|
|
@@ -14,17 +13,13 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
|
14
13
|
_ref$variant = _ref.variant,
|
|
15
14
|
variant = _ref$variant === void 0 ? 'bar' : _ref$variant,
|
|
16
15
|
bgColor = _ref.bgColor,
|
|
17
|
-
|
|
16
|
+
defaultBarColor = _ref.defaultBarColor;
|
|
18
17
|
var theme = useTheme();
|
|
19
18
|
var TOTAL_BARS = 17;
|
|
20
19
|
var _React$useState = React.useState(0),
|
|
21
20
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
22
21
|
filledBars = _React$useState2[0],
|
|
23
22
|
setFilledBars = _React$useState2[1];
|
|
24
|
-
var _React$useState3 = React.useState(1),
|
|
25
|
-
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
26
|
-
pulseSize = _React$useState4[0],
|
|
27
|
-
setPulseSize = _React$useState4[1];
|
|
28
23
|
React.useEffect(function () {
|
|
29
24
|
if (!analyser) return;
|
|
30
25
|
analyser.fftSize = 128;
|
|
@@ -39,7 +34,6 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
|
39
34
|
var smooth = prevVolume * decay + scaled * (1 - decay);
|
|
40
35
|
prevVolume = smooth;
|
|
41
36
|
setFilledBars(Math.round(smooth / 255 * TOTAL_BARS));
|
|
42
|
-
setPulseSize(1 + smooth / 255);
|
|
43
37
|
requestAnimationFrame(_update);
|
|
44
38
|
};
|
|
45
39
|
_update();
|
|
@@ -47,24 +41,12 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
|
47
41
|
return setFilledBars(0);
|
|
48
42
|
};
|
|
49
43
|
}, [analyser, sensitivity, decay]);
|
|
50
|
-
return
|
|
44
|
+
return jsx(Stack, {
|
|
51
45
|
alignItems: "center",
|
|
52
46
|
justifyContent: "center",
|
|
53
47
|
width: "100%",
|
|
54
48
|
position: "relative",
|
|
55
|
-
children:
|
|
56
|
-
children: [jsx(PulseCircle, {
|
|
57
|
-
pulseSize: pulseSize
|
|
58
|
-
}), jsx(CenterIconWrapper, {
|
|
59
|
-
bgColor: theme.palette.primary.main,
|
|
60
|
-
onClick: onClickRecord,
|
|
61
|
-
children: jsx(Micro, {
|
|
62
|
-
width: 118,
|
|
63
|
-
height: 118,
|
|
64
|
-
color: theme.palette.secondary.main
|
|
65
|
-
})
|
|
66
|
-
})]
|
|
67
|
-
}), (variant === 'bar' || variant === 'both') && jsx(Box, {
|
|
49
|
+
children: (variant === 'bar' || variant === 'both') && jsx(Box, {
|
|
68
50
|
display: "flex",
|
|
69
51
|
justifyContent: "center",
|
|
70
52
|
alignItems: "center",
|
|
@@ -78,30 +60,17 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
|
|
|
78
60
|
}).map(function (_, i) {
|
|
79
61
|
return jsx(WaveBar, {
|
|
80
62
|
isFilled: i < filledBars,
|
|
81
|
-
|
|
63
|
+
defaultBarColor: defaultBarColor !== null && defaultBarColor !== void 0 ? defaultBarColor : theme.palette.grey[200]
|
|
82
64
|
}, i);
|
|
83
65
|
})
|
|
84
|
-
})
|
|
66
|
+
})
|
|
85
67
|
});
|
|
86
68
|
};
|
|
87
69
|
var WaveBar = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 11px;\n height: 34px;\n border-radius: 11px;\n background-color: ", ";\n transition: background-color 0.1s ease-in-out;\n"])), function (_ref2) {
|
|
88
70
|
var isFilled = _ref2.isFilled,
|
|
71
|
+
defaultBarColor = _ref2.defaultBarColor,
|
|
89
72
|
theme = _ref2.theme;
|
|
90
|
-
return isFilled ? theme.palette.primary.main :
|
|
91
|
-
});
|
|
92
|
-
var PulseCircle = styled(Box)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 0;\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.15;\n transition: width 0.1s ease-out, height 0.1s ease-out;\n"])), function (_ref3) {
|
|
93
|
-
var pulseSize = _ref3.pulseSize;
|
|
94
|
-
return 150 * pulseSize;
|
|
95
|
-
}, function (_ref4) {
|
|
96
|
-
var pulseSize = _ref4.pulseSize;
|
|
97
|
-
return 150 * pulseSize;
|
|
98
|
-
}, function (_ref5) {
|
|
99
|
-
var theme = _ref5.theme;
|
|
100
|
-
return theme.palette.primary.main;
|
|
101
|
-
});
|
|
102
|
-
var CenterIconWrapper = styled(Box)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n width: 150px;\n height: 150px;\n border-radius: 90px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_ref6) {
|
|
103
|
-
var bgColor = _ref6.bgColor;
|
|
104
|
-
return bgColor;
|
|
73
|
+
return isFilled ? theme.palette.primary.main : defaultBarColor;
|
|
105
74
|
});
|
|
106
75
|
|
|
107
76
|
export { SoundVisualizer, SoundVisualizer as default };
|