@onesy/ui-react
Version:
UI for React
394 lines (373 loc) • 17.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "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
},
'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
},
recordDot_size_large: {
width: 12,
height: 12
},
time: {
'&.onesy-Type-root': {
whiteSpace: 'nowrap'
}
}
}), {
name: 'onesy-AudioRecorder'
});
const AudioRecorder = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _window$navigator$med;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _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_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Fade = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
const {
ref,
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 update = () => {
setValue(refs.valuePaused.current + (_date.OnesyDate.milliseconds - refs.startedAt.current));
refs.animationFrame.current = requestAnimationFrame(update);
};
const onStart = 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__0 => {
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';
};
const onPause = event_0 => {
// 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_0);
// previous action
refs.previousAction.current = 'pause';
};
const onStop = event_1 => {
// 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_1);
};
const onConfirm = async event_2 => {
var _refs$mediaRecorder$c;
// Stop
onStop(event_2);
// 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
};
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_0) {
console.log('AudioRecorder onConfirm error', error_0);
}
// clean up
refs.mediaRecorderBytes.current = [];
if ((0, _utils.is)('function', onConfirm_)) onConfirm_(blob, meta);
};
const onResume = event_3 => {
// 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_3);
// previous action
refs.previousAction.current = 'resume';
};
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__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
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), {}, {
children: [status !== 'initial' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: true,
add: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
children: [status === 'running' && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([classes.recordDot, classes[`recordDot_size_${size}`]])
}), (0, _utils.is)('function', renderTime) ? renderTime(value_) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AudioRecorder', theme) && ['onesy-AudioRecorder-time'], classes.time]),
children: value_
})]
})
}), status === 'initial' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: true,
add: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: (0, _utils.is)('function', renderMain) ? renderMain({
onStart,
supported
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Voice record')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onStart,
disabled: !supported
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread({}, iconProps))
}))
}))
})
})
}), status === 'running' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: true,
add: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Cancel')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onStop
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconStop, _objectSpread({}, iconProps))
}))
})), pause && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Pause')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onPause
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPause, _objectSpread({}, iconProps))
}))
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Confirm')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onConfirm
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconConfirm, _objectSpread({}, iconProps))
}))
}))]
})
}), status === 'paused' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: true,
add: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Cancel')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onStop
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconStop, _objectSpread({}, iconProps))
}))
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Resume')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onResume
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconStart, _objectSpread({}, iconProps))
}))
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Confirm')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onConfirm
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconConfirm, _objectSpread({}, iconProps))
}))
}))]
})
})]
}));
};
AudioRecorder.displayName = 'onesy-AudioRecorder';
var _default = exports.default = AudioRecorder;