@onesy/ui-react/esm/AudioRecorder/AudioRecorder.js

UI for React

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import React from 'react';
import audioFix from 'webm-duration-fix';
import { getLeadingZerosNumber, is, isEnvironment, wait } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import { OnesyDate, duration } from '@onesy/date';
import IconMaterialMic from '@onesy/icons-material-rounded-react/IconMaterialMicW100';
import IconMaterialSend from '@onesy/icons-material-rounded-react/IconMaterialSendW100';
import IconMaterialPlayArrow from '@onesy/icons-material-rounded-react/IconMaterialPlayArrowW100';
import IconMaterialPause from '@onesy/icons-material-rounded-react/IconMaterialPauseW100';
import IconMaterialStop from '@onesy/icons-material-rounded-react/IconMaterialStopW100';
import LineElement from '../Line';
import FadeElement from '../Fade';
import TypeElement from '../Type';
import TooltipElement from '../Tooltip';
import IconButtonElement from '../IconButton';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const useStyle = styleMethod(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_ => {
  const theme = useOnesyTheme();
  const l = theme.l;
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAudioRecorder?.props?.default), props_);
  const Line = theme?.elements?.Line || LineElement;
  const Fade = theme?.elements?.Fade || FadeElement;
  const Type = theme?.elements?.Type || TypeElement;
  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
  const IconButton = theme?.elements?.IconButton || IconButtonElement;
  const {
      ref,
      size = 'regular',
      pause = true,
      renderMain,
      renderTime,
      loading,
      disabled,
      Component,
      Icon: Icon_ = IconMaterialMic,
      IconConfirm = IconMaterialSend,
      IconStart = IconMaterialPlayArrow,
      IconPause = IconMaterialPause,
      IconStop = IconMaterialStop,
      onConfirm: onConfirm_,
      onData,
      onStart: onStart_,
      onPause: onPause_,
      onResume: onResume_,
      onStop: onStop_,
      onError,
      TooltipProps,
      IconButtonProps,
      IconProps,
      className
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const [status, setStatus] = React.useState('initial');
  const [value, setValue] = React.useState(0);
  const {
    classes
  } = useStyle();
  const refs = {
    root: React.useRef(null),
    mediaRecorder: React.useRef(null),
    mediaRecorderBytes: React.useRef([]),
    startedAt: React.useRef(0),
    valuePaused: React.useRef(0),
    value: React.useRef(null),
    animationFrame: React.useRef(null),
    onData: React.useRef(null),
    previousAction: React.useRef('start'),
    // fallback to duration calculation on desktop
    // ie. for mobile where we can't easily determine duration
    duration: React.useRef(0)
  };
  refs.onData.current = onData;
  const supported = isEnvironment('browser') && window.navigator.mediaDevices?.getUserMedia;
  refs.value.current = value;
  const clear = () => {
    cancelAnimationFrame(refs.animationFrame.current);
  };
  React.useEffect(() => {
    return () => {
      // Clean up
      clear();
    };
  }, []);
  const update = () => {
    setValue(refs.valuePaused.current + (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 (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 (is('function', onError)) onError(error);
      return;
    }

    // reset duration
    refs.duration.current = 0;

    // started at milliseconds
    refs.startedAt.current = OnesyDate.milliseconds;

    // ~60+ fps
    refs.animationFrame.current = requestAnimationFrame(update);
    setStatus('running');
    if (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 += OnesyDate.milliseconds - refs.startedAt.current;
    clear();

    // Remember previous value
    refs.valuePaused.current = refs.value.current;
    setStatus('paused');
    if (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 (is('function', onStop_)) onStop_(event_1);
  };
  const onConfirm = async event_2 => {
    // Stop
    onStop(event_2);

    // duration
    if (refs.previousAction.current === 'resume') {
      // add so far to duration
      refs.duration.current += OnesyDate.milliseconds - refs.startedAt.current;
    }
    const meta = {
      // duration in seconds
      duration: refs.duration.current / 1e3
    };
    await wait(40);

    // Get the blob
    const mimeType = refs.mediaRecorder.current?.mimeType;
    let blob = new Blob(refs.mediaRecorderBytes.current, {
      type: mimeType
    });
    try {
      blob = await audioFix(blob);
    } catch (error_0) {
      console.log('AudioRecorder onConfirm error', error_0);
    }

    // clean up
    refs.mediaRecorderBytes.current = [];
    if (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 = OnesyDate.milliseconds;

    // ~60+ fps
    refs.animationFrame.current = requestAnimationFrame(update);
    setStatus('running');
    if (is('function', onResume_)) onResume_(event_3);

    // previous action
    refs.previousAction.current = 'resume';
  };
  const valueFormat = valueNew_ => {
    let valueNew = '';
    const valueDuration = duration(valueNew_, undefined, true, undefined, ['hour', 'minute', 'second', 'millisecond']);
    if (valueDuration.hour > 0) valueNew += `${getLeadingZerosNumber(valueDuration.hour)}:`;
    valueNew += `${getLeadingZerosNumber(valueDuration.minute || 0)}:`;
    valueNew += `${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__*/_jsxs(Line, _objectSpread(_objectSpread({
    ref: item => {
      if (ref) {
        if (is('function', ref)) ref(item);else ref.current = item;
      }
      refs.root.current = item;
    },
    gap: 1,
    direction: "row",
    align: "center",
    Component: Component,
    className: classNames([staticClassName('AudioRecorder', theme) && [`onesy-AudioRecorder-root`, `onesy-AudioRecorder-size-${size}`], className, classes.root])
  }, other), {}, {
    children: [status !== 'initial' && /*#__PURE__*/_jsx(Fade, {
      in: true,
      add: true,
      children: /*#__PURE__*/_jsxs(Line, {
        gap: 1,
        direction: "row",
        align: "center",
        children: [status === 'running' && /*#__PURE__*/_jsx("span", {
          className: classNames([classes.recordDot, classes[`recordDot_size_${size}`]])
        }), is('function', renderTime) ? renderTime(value_) : /*#__PURE__*/_jsx(Type, {
          version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
          className: classNames([staticClassName('AudioRecorder', theme) && ['onesy-AudioRecorder-time'], classes.time]),
          children: value_
        })]
      })
    }), status === 'initial' && /*#__PURE__*/_jsx(Fade, {
      in: true,
      add: true,
      children: /*#__PURE__*/_jsx("span", {
        children: is('function', renderMain) ? renderMain({
          onStart,
          supported
        }) : /*#__PURE__*/_jsx(_Fragment, {
          children: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
            name: l('Voice record')
          }, TooltipProps), {}, {
            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
              onClick: onStart,
              disabled: !supported
            }, iconButtonProps), {}, {
              children: /*#__PURE__*/_jsx(Icon_, _objectSpread({}, iconProps))
            }))
          }))
        })
      })
    }), status === 'running' && /*#__PURE__*/_jsx(Fade, {
      in: true,
      add: true,
      children: /*#__PURE__*/_jsxs("span", {
        children: [/*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
          name: l('Cancel')
        }, TooltipProps), {}, {
          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
            onClick: onStop
          }, iconButtonProps), {}, {
            children: /*#__PURE__*/_jsx(IconStop, _objectSpread({}, iconProps))
          }))
        })), pause && /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
          name: l('Pause')
        }, TooltipProps), {}, {
          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
            onClick: onPause
          }, iconButtonProps), {}, {
            children: /*#__PURE__*/_jsx(IconPause, _objectSpread({}, iconProps))
          }))
        })), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
          name: l('Confirm')
        }, TooltipProps), {}, {
          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
            onClick: onConfirm
          }, iconButtonProps), {}, {
            children: /*#__PURE__*/_jsx(IconConfirm, _objectSpread({}, iconProps))
          }))
        }))]
      })
    }), status === 'paused' && /*#__PURE__*/_jsx(Fade, {
      in: true,
      add: true,
      children: /*#__PURE__*/_jsxs("span", {
        children: [/*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
          name: l('Cancel')
        }, TooltipProps), {}, {
          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
            onClick: onStop
          }, iconButtonProps), {}, {
            children: /*#__PURE__*/_jsx(IconStop, _objectSpread({}, iconProps))
          }))
        })), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
          name: l('Resume')
        }, TooltipProps), {}, {
          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
            onClick: onResume
          }, iconButtonProps), {}, {
            children: /*#__PURE__*/_jsx(IconStart, _objectSpread({}, iconProps))
          }))
        })), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
          name: l('Confirm')
        }, TooltipProps), {}, {
          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
            onClick: onConfirm
          }, iconButtonProps), {}, {
            children: /*#__PURE__*/_jsx(IconConfirm, _objectSpread({}, iconProps))
          }))
        }))]
      })
    })]
  }));
};
AudioRecorder.displayName = 'onesy-AudioRecorder';
export default AudioRecorder;