@onesy/ui-react 1.0.130 → 1.0.131

package/AudioRecorder/AudioRecorder.js

@@ -1,267 +1,367 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const webm_duration_fix_1 = __importDefault(require("webm-duration-fix"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const date_1 = require("@onesy/date");
-const IconMaterialMicW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialMicW100"));
-const IconMaterialSendW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSendW100"));
-const IconMaterialPlayArrowW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPlayArrowW100"));
-const IconMaterialPauseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPauseW100"));
-const IconMaterialStopW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialStopW100"));
-const Line_1 = __importDefault(require("../Line"));
-const Fade_1 = __importDefault(require("../Fade"));
-const Type_1 = __importDefault(require("../Type"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    '@keyframes pulse': {
-        '0%': {
-            opacity: 1
-        },
-        '50%': {
-            opacity: 0
-        },
-        '100%': {
-            opacity: 1
-        }
-    },
-    root: {
-        width: 'auto',
-        whiteSpace: 'nowrap'
-    },
-    recordDot: {
-        borderRadius: theme.methods.shape.radius.value(40, 'px'),
-        background: theme.palette.color.error.main,
-        animation: `$pulse 1700ms ${theme.transitions.timing_function.emphasized} 240ms infinite`
-    },
-    recordDot_size_small: {
-        width: 8,
-        height: 8,
-    },
-    recordDot_size_regular: {
-        width: 10,
-        height: 10,
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _webmDurationFix = _interopRequireDefault(require("webm-duration-fix"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _date = require("@onesy/date");
+var _IconMaterialMicW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialMicW100"));
+var _IconMaterialSendW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSendW100"));
+var _IconMaterialPlayArrowW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPlayArrowW100"));
+var _IconMaterialPauseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPauseW100"));
+var _IconMaterialStopW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialStopW100"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Fade = _interopRequireDefault(require("../Fade"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _utils2 = require("../utils");
+const _excluded = ["size", "pause", "renderMain", "renderTime", "loading", "disabled", "Component", "Icon", "IconConfirm", "IconStart", "IconPause", "IconStop", "onConfirm", "onData", "onStart", "onPause", "onResume", "onStop", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  '@keyframes pulse': {
+    '0%': {
+      opacity: 1
     },
-    recordDot_size_large: {
-        width: 12,
-        height: 12,
+    '50%': {
+      opacity: 0
     },
-    time: {
-        '&.onesy-Type-root': {
-            whiteSpace: 'nowrap'
-        }
+    '100%': {
+      opacity: 1
     }
-}), { name: 'onesy-AudioRecorder' });
-const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyAudioRecorder) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const { size = 'regular', pause = true, renderMain, renderTime, loading, disabled, Component, Icon: Icon_ = IconMaterialMicW100_1.default, IconConfirm = IconMaterialSendW100_1.default, IconStart = IconMaterialPlayArrowW100_1.default, IconPause = IconMaterialPauseW100_1.default, IconStop = IconMaterialStopW100_1.default, onConfirm: onConfirm_, onData, onStart: onStart_, onPause: onPause_, onResume: onResume_, onStop: onStop_, onError, TooltipProps, IconButtonProps, IconProps, className } = props, other = __rest(props, ["size", "pause", "renderMain", "renderTime", "loading", "disabled", "Component", "Icon", "IconConfirm", "IconStart", "IconPause", "IconStop", "onConfirm", "onData", "onStart", "onPause", "onResume", "onStop", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"]);
-    const [status, setStatus] = react_1.default.useState('initial');
-    const [value, setValue] = react_1.default.useState(0);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(null),
-        mediaRecorder: react_1.default.useRef(null),
-        mediaRecorderBytes: react_1.default.useRef([]),
-        startedAt: react_1.default.useRef(0),
-        valuePaused: react_1.default.useRef(0),
-        value: react_1.default.useRef(null),
-        animationFrame: react_1.default.useRef(null),
-        onData: react_1.default.useRef(null),
-        previousAction: react_1.default.useRef('start'),
-        // fallback to duration calculation on desktop
-        // ie. for mobile where we can't easily determine duration
-        duration: react_1.default.useRef(0)
-    };
-    refs.onData.current = onData;
-    const supported = (0, utils_1.isEnvironment)('browser') && ((_a = window.navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia);
-    refs.value.current = value;
-    const clear = () => {
-        cancelAnimationFrame(refs.animationFrame.current);
-    };
-    react_1.default.useEffect(() => {
-        return () => {
-            // Clean up
-            clear();
-        };
-    }, []);
-    const update = () => {
-        setValue(refs.valuePaused.current + (date_1.OnesyDate.milliseconds - refs.startedAt.current));
-        refs.animationFrame.current = requestAnimationFrame(update);
+  },
+  root: {
+    width: 'auto',
+    whiteSpace: 'nowrap'
+  },
+  recordDot: {
+    borderRadius: theme.methods.shape.radius.value(40, 'px'),
+    background: theme.palette.color.error.main,
+    animation: `$pulse 1700ms ${theme.transitions.timing_function.emphasized} 240ms infinite`
+  },
+  recordDot_size_small: {
+    width: 8,
+    height: 8
+  },
+  recordDot_size_regular: {
+    width: 10,
+    height: 10
+  },
+  recordDot_size_large: {
+    width: 12,
+    height: 12
+  },
+  time: {
+    '&.onesy-Type-root': {
+      whiteSpace: 'nowrap'
+    }
+  }
+}), {
+  name: 'onesy-AudioRecorder'
+});
+const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _window$navigator$med;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const l = theme.l;
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAudioRecorder) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Fade = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  }, [theme]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
+  }, [theme]);
+  const {
+      size = 'regular',
+      pause = true,
+      renderMain,
+      renderTime,
+      loading,
+      disabled,
+      Component,
+      Icon: Icon_ = _IconMaterialMicW.default,
+      IconConfirm = _IconMaterialSendW.default,
+      IconStart = _IconMaterialPlayArrowW.default,
+      IconPause = _IconMaterialPauseW.default,
+      IconStop = _IconMaterialStopW.default,
+      onConfirm: onConfirm_,
+      onData,
+      onStart: onStart_,
+      onPause: onPause_,
+      onResume: onResume_,
+      onStop: onStop_,
+      onError,
+      TooltipProps,
+      IconButtonProps,
+      IconProps,
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const [status, setStatus] = _react.default.useState('initial');
+  const [value, setValue] = _react.default.useState(0);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(null),
+    mediaRecorder: _react.default.useRef(null),
+    mediaRecorderBytes: _react.default.useRef([]),
+    startedAt: _react.default.useRef(0),
+    valuePaused: _react.default.useRef(0),
+    value: _react.default.useRef(null),
+    animationFrame: _react.default.useRef(null),
+    onData: _react.default.useRef(null),
+    previousAction: _react.default.useRef('start'),
+    // fallback to duration calculation on desktop
+    // ie. for mobile where we can't easily determine duration
+    duration: _react.default.useRef(0)
+  };
+  refs.onData.current = onData;
+  const supported = (0, _utils.isEnvironment)('browser') && ((_window$navigator$med = window.navigator.mediaDevices) === null || _window$navigator$med === void 0 ? void 0 : _window$navigator$med.getUserMedia);
+  refs.value.current = value;
+  const clear = () => {
+    cancelAnimationFrame(refs.animationFrame.current);
+  };
+  _react.default.useEffect(() => {
+    return () => {
+      // Clean up
+      clear();
     };
-    const onStart = react_1.default.useCallback(async (event) => {
-        // MediaStream
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            // media recorder
-            refs.mediaRecorder.current = new MediaRecorder(stream);
-            // reset
-            refs.mediaRecorderBytes.current = [];
-            // data
-            refs.mediaRecorder.current.addEventListener('dataavailable', event_ => {
-                const data = event_.data;
-                refs.mediaRecorderBytes.current.push(data);
-                if ((0, utils_1.is)('function', refs.onData.current))
-                    refs.onData.current(data);
-            });
-            // stop
-            refs.mediaRecorder.current.addEventListener('stop', event_ => {
-                const tracks = stream.getTracks();
-                tracks.forEach(track => track.stop());
-            });
-            // start
-            refs.mediaRecorder.current.start();
-        }
-        catch (error) {
-            if ((0, utils_1.is)('function', onError))
-                onError(error);
-            return;
-        }
-        // reset duration
-        refs.duration.current = 0;
-        // started at milliseconds
-        refs.startedAt.current = date_1.OnesyDate.milliseconds;
-        // ~60+ fps
-        refs.animationFrame.current = requestAnimationFrame(update);
-        setStatus('running');
-        if ((0, utils_1.is)('function', onStart_))
-            onStart_(event);
-        // previous action
-        refs.previousAction.current = 'start';
-    }, [onStart_, onError]);
-    const onPause = react_1.default.useCallback((event) => {
-        // media recorder
-        if (refs.mediaRecorder.current)
-            refs.mediaRecorder.current.pause();
-        // add so far to duration
-        refs.duration.current += date_1.OnesyDate.milliseconds - refs.startedAt.current;
-        clear();
-        // Remember previous value
-        refs.valuePaused.current = refs.value.current;
-        setStatus('paused');
-        if ((0, utils_1.is)('function', onPause_))
-            onPause_(event);
-        // previous action
-        refs.previousAction.current = 'pause';
-    }, [onPause_]);
-    const onStop = react_1.default.useCallback((event) => {
-        // media recorder
-        if (refs.mediaRecorder.current)
-            refs.mediaRecorder.current.stop();
-        clear();
-        setStatus('initial');
-        setValue(0);
-        refs.valuePaused.current = 0;
-        refs.value.current = 0;
-        if ((0, utils_1.is)('function', onStop_))
-            onStop_(event);
-    }, [onStop_]);
-    const onConfirm = react_1.default.useCallback(async (event) => {
-        var _a;
-        // Stop
-        onStop(event);
-        // duration
-        if (refs.previousAction.current === 'resume') {
-            // add so far to duration
-            refs.duration.current += date_1.OnesyDate.milliseconds - refs.startedAt.current;
-        }
-        const meta = {
-            // duration in seconds
-            duration: refs.duration.current / 1e3
-        };
-        await (0, utils_1.wait)(40);
-        // Get the blob
-        const mimeType = (_a = refs.mediaRecorder.current) === null || _a === void 0 ? void 0 : _a.mimeType;
-        let blob = new Blob(refs.mediaRecorderBytes.current, { type: mimeType });
-        try {
-            blob = await (0, webm_duration_fix_1.default)(blob);
-        }
-        catch (error) {
-            console.log('AudioRecorder onConfirm error', error);
-        }
-        // clean up
-        refs.mediaRecorderBytes.current = [];
-        if ((0, utils_1.is)('function', onConfirm_))
-            onConfirm_(blob, meta);
-    }, [onStop, onConfirm_]);
-    const onResume = react_1.default.useCallback((event) => {
-        // media recorder
-        if (refs.mediaRecorder.current)
-            refs.mediaRecorder.current.resume();
-        // record at milliseconds
-        refs.startedAt.current = date_1.OnesyDate.milliseconds;
-        // ~60+ fps
-        refs.animationFrame.current = requestAnimationFrame(update);
-        setStatus('running');
-        if ((0, utils_1.is)('function', onResume_))
-            onResume_(event);
-        // previous action
-        refs.previousAction.current = 'resume';
-    }, [onResume_]);
-    const valueFormat = (valueNew_) => {
-        let valueNew = '';
-        const valueDuration = (0, date_1.duration)(valueNew_, undefined, true, undefined, ['hour', 'minute', 'second', 'millisecond']);
-        if (valueDuration.hour > 0)
-            valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.hour)}:`;
-        valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.minute || 0)}:`;
-        valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.second || 0)}`;
-        // valueNew += `${getLeadingZerosNumber(Math.floor((valueDuration.millisecond || 0) / 10))}`;
-        return valueNew;
+  }, []);
+  const update = () => {
+    setValue(refs.valuePaused.current + (_date.OnesyDate.milliseconds - refs.startedAt.current));
+    refs.animationFrame.current = requestAnimationFrame(update);
+  };
+  const onStart = _react.default.useCallback(async event => {
+    // MediaStream
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+
+      // media recorder
+      refs.mediaRecorder.current = new MediaRecorder(stream);
+
+      // reset
+      refs.mediaRecorderBytes.current = [];
+
+      // data
+      refs.mediaRecorder.current.addEventListener('dataavailable', event_ => {
+        const data = event_.data;
+        refs.mediaRecorderBytes.current.push(data);
+        if ((0, _utils.is)('function', refs.onData.current)) refs.onData.current(data);
+      });
+
+      // stop
+      refs.mediaRecorder.current.addEventListener('stop', event_ => {
+        const tracks = stream.getTracks();
+        tracks.forEach(track => track.stop());
+      });
+
+      // start
+      refs.mediaRecorder.current.start();
+    } catch (error) {
+      if ((0, _utils.is)('function', onError)) onError(error);
+      return;
+    }
+
+    // reset duration
+    refs.duration.current = 0;
+
+    // started at milliseconds
+    refs.startedAt.current = _date.OnesyDate.milliseconds;
+
+    // ~60+ fps
+    refs.animationFrame.current = requestAnimationFrame(update);
+    setStatus('running');
+    if ((0, _utils.is)('function', onStart_)) onStart_(event);
+
+    // previous action
+    refs.previousAction.current = 'start';
+  }, [onStart_, onError]);
+  const onPause = _react.default.useCallback(event => {
+    // media recorder
+    if (refs.mediaRecorder.current) refs.mediaRecorder.current.pause();
+
+    // add so far to duration
+    refs.duration.current += _date.OnesyDate.milliseconds - refs.startedAt.current;
+    clear();
+
+    // Remember previous value
+    refs.valuePaused.current = refs.value.current;
+    setStatus('paused');
+    if ((0, _utils.is)('function', onPause_)) onPause_(event);
+
+    // previous action
+    refs.previousAction.current = 'pause';
+  }, [onPause_]);
+  const onStop = _react.default.useCallback(event => {
+    // media recorder
+    if (refs.mediaRecorder.current) refs.mediaRecorder.current.stop();
+    clear();
+    setStatus('initial');
+    setValue(0);
+    refs.valuePaused.current = 0;
+    refs.value.current = 0;
+    if ((0, _utils.is)('function', onStop_)) onStop_(event);
+  }, [onStop_]);
+  const onConfirm = _react.default.useCallback(async event => {
+    var _refs$mediaRecorder$c;
+    // Stop
+    onStop(event);
+
+    // duration
+    if (refs.previousAction.current === 'resume') {
+      // add so far to duration
+      refs.duration.current += _date.OnesyDate.milliseconds - refs.startedAt.current;
+    }
+    const meta = {
+      // duration in seconds
+      duration: refs.duration.current / 1e3
     };
-    const value_ = status === 'initial' ? '00:00' : valueFormat(value);
-    const iconProps = Object.assign({ size }, IconProps);
-    const iconButtonProps = Object.assign({ size,
-        loading,
-        disabled }, IconButtonProps);
-    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, gap: 1, direction: 'row', align: 'center', Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('AudioRecorder', theme) && [
-                `onesy-AudioRecorder-root`,
-                `onesy-AudioRecorder-size-${size}`
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [status !== 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [status === 'running' && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                                classes.recordDot,
-                                classes[`recordDot_size_${size}`]
-                            ]) })), (0, utils_1.is)('function', renderTime) ? renderTime(value_) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('AudioRecorder', theme) && [
-                                    'onesy-AudioRecorder-time'
-                                ],
-                                classes.time
-                            ]) }, { children: value_ })))] })) }))), status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.is)('function', renderMain) ? renderMain({ onStart, supported }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Voice record') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart, disabled: !supported }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, iconProps)) })) })) }) }) }))), status === 'running' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Cancel') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, Object.assign({}, iconProps)) })) })), pause && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Pause') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPause }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPause, Object.assign({}, iconProps)) })) }))), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Confirm') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onConfirm }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconConfirm, Object.assign({}, iconProps)) })) }))] }) }))), status === 'paused' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Cancel') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, Object.assign({}, iconProps)) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Resume') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onResume }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, Object.assign({}, iconProps)) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Confirm') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onConfirm }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconConfirm, Object.assign({}, iconProps)) })) }))] }) })))] })));
+    await (0, _utils.wait)(40);
+
+    // Get the blob
+    const mimeType = (_refs$mediaRecorder$c = refs.mediaRecorder.current) === null || _refs$mediaRecorder$c === void 0 ? void 0 : _refs$mediaRecorder$c.mimeType;
+    let blob = new Blob(refs.mediaRecorderBytes.current, {
+      type: mimeType
+    });
+    try {
+      blob = await (0, _webmDurationFix.default)(blob);
+    } catch (error) {
+      console.log('AudioRecorder onConfirm error', error);
+    }
+
+    // clean up
+    refs.mediaRecorderBytes.current = [];
+    if ((0, _utils.is)('function', onConfirm_)) onConfirm_(blob, meta);
+  }, [onStop, onConfirm_]);
+  const onResume = _react.default.useCallback(event => {
+    // media recorder
+    if (refs.mediaRecorder.current) refs.mediaRecorder.current.resume();
+
+    // record at milliseconds
+    refs.startedAt.current = _date.OnesyDate.milliseconds;
+
+    // ~60+ fps
+    refs.animationFrame.current = requestAnimationFrame(update);
+    setStatus('running');
+    if ((0, _utils.is)('function', onResume_)) onResume_(event);
+
+    // previous action
+    refs.previousAction.current = 'resume';
+  }, [onResume_]);
+  const valueFormat = valueNew_ => {
+    let valueNew = '';
+    const valueDuration = (0, _date.duration)(valueNew_, undefined, true, undefined, ['hour', 'minute', 'second', 'millisecond']);
+    if (valueDuration.hour > 0) valueNew += `${(0, _utils.getLeadingZerosNumber)(valueDuration.hour)}:`;
+    valueNew += `${(0, _utils.getLeadingZerosNumber)(valueDuration.minute || 0)}:`;
+    valueNew += `${(0, _utils.getLeadingZerosNumber)(valueDuration.second || 0)}`;
+
+    // valueNew += `${getLeadingZerosNumber(Math.floor((valueDuration.millisecond || 0) / 10))}`;
+
+    return valueNew;
+  };
+  const value_ = status === 'initial' ? '00:00' : valueFormat(value);
+  const iconProps = _objectSpread({
+    size
+  }, IconProps);
+  const iconButtonProps = _objectSpread({
+    size,
+    loading,
+    disabled
+  }, IconButtonProps);
+  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    gap: 1,
+    direction: "row",
+    align: "center",
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AudioRecorder', theme) && [`onesy-AudioRecorder-root`, `onesy-AudioRecorder-size-${size}`], className, classes.root])
+  }, other), status !== 'initial' && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center"
+  }, status === 'running' && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([classes.recordDot, classes[`recordDot_size_${size}`]])
+  }), (0, _utils.is)('function', renderTime) ? renderTime(value_) : /*#__PURE__*/_react.default.createElement(Type, {
+    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AudioRecorder', theme) && ['onesy-AudioRecorder-time'], classes.time])
+  }, value_))), status === 'initial' && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.is)('function', renderMain) ? renderMain({
+    onStart,
+    supported
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Voice record')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onStart,
+    disabled: !supported
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(Icon_, iconProps)))))), status === 'running' && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Cancel')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onStop
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(IconStop, iconProps))), pause && /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Pause')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onPause
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(IconPause, iconProps))), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Confirm')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onConfirm
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(IconConfirm, iconProps))))), status === 'paused' && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Cancel')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onStop
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(IconStop, iconProps))), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Resume')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onResume
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(IconStart, iconProps))), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Confirm')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onConfirm
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(IconConfirm, iconProps))))));
 });
 AudioRecorder.displayName = 'onesy-AudioRecorder';
-exports.default = AudioRecorder;
+var _default = exports.default = AudioRecorder;