@sendbird/uikit-react-native-foundation/lib/commonjs/ui/GroupChannelMessage/Message.file.voice.js

A foundational UI kit for building chat-enabled React Native apps.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _uikitUtils = require("@sendbird/uikit-utils");
var _Box = _interopRequireDefault(require("../../components/Box"));
var _Icon = _interopRequireDefault(require("../../components/Icon"));
var _PressBox = _interopRequireDefault(require("../../components/PressBox"));
var _ProgressBar = _interopRequireDefault(require("../../components/ProgressBar"));
var _Text = _interopRequireDefault(require("../../components/Text"));
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
var _LoadingSpinner = _interopRequireDefault(require("../LoadingSpinner"));
var _MessageContainer = _interopRequireDefault(require("./MessageContainer"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const VoiceFileMessage = props => {
  const {
    onLongPress,
    variant = 'incoming',
    onToggleVoiceMessage,
    message,
    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
    onUnmount,
    initialCurrentTime,
    onSubscribeStatus,
    onUnsubscribeStatus
  } = props;
  const {
    colors
  } = (0, _useUIKitTheme.default)();
  const [state, setState] = (0, _react.useState)(() => {
    var _meta$value;
    const meta = message.metaArrays.find(it => it.key === durationMetaArrayKey);
    const value = meta === null || meta === void 0 || (_meta$value = meta.value) === null || _meta$value === void 0 ? void 0 : _meta$value[0];
    const initialDuration = value ? parseInt(value, 10) : 0;
    return {
      status: 'paused',
      currentTime: initialCurrentTime || 0,
      duration: initialDuration
    };
  });
  (0, _react.useEffect)(() => {
    return () => {
      onUnmount();
    };
  }, []);
  (0, _react.useEffect)(() => {
    const updateCurrentTime = currentTime => {
      setState(prev => ({
        ...prev,
        currentTime
      }));
    };
    onSubscribeStatus === null || onSubscribeStatus === void 0 || onSubscribeStatus(props.channel.url, props.message.messageId, updateCurrentTime);
    return () => {
      onUnsubscribeStatus === null || onUnsubscribeStatus === void 0 || onUnsubscribeStatus(props.channel.url, props.message.messageId, updateCurrentTime);
    };
  }, []);
  const uiColors = colors.ui.groupChannelMessage[variant];
  const remainingTime = state.duration - state.currentTime;
  return /*#__PURE__*/_react.default.createElement(_MessageContainer.default, props, /*#__PURE__*/_react.default.createElement(_Box.default, {
    style: styles.container,
    backgroundColor: uiColors.enabled.background
  }, /*#__PURE__*/_react.default.createElement(_PressBox.default, {
    onPress: () => onToggleVoiceMessage === null || onToggleVoiceMessage === void 0 ? void 0 : onToggleVoiceMessage(state, setState),
    onLongPress: onLongPress
  }, /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
    current: state.currentTime,
    total: state.duration,
    style: {
      minWidth: 136,
      height: 44
    },
    trackColor: uiColors.enabled.voiceProgressTrack,
    overlay: /*#__PURE__*/_react.default.createElement(_Box.default, {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 12
    }, state.status === 'preparing' ? /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, {
      size: 24,
      color: uiColors.enabled.voiceSpinner
    }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
      size: 16,
      containerStyle: {
        backgroundColor: uiColors.enabled.voiceActionIconBackground,
        padding: 6,
        borderRadius: 16
      },
      icon: state.status === 'paused' ? 'play' : 'pause'
    }), /*#__PURE__*/_react.default.createElement(_Text.default, {
      body3: true,
      style: {
        lineHeight: undefined,
        marginStart: 6,
        opacity: 0.88
      },
      color: uiColors.enabled.textVoicePlaytime
    }, (0, _uikitUtils.millsToMSS)(state.currentTime === 0 ? state.duration : remainingTime)))
  })), props.children));
};
const styles = (0, _createStyleSheet.default)({
  container: {
    borderRadius: 16,
    overflow: 'hidden'
  },
  image: {
    maxWidth: 240,
    width: 240,
    height: 160,
    borderRadius: 16,
    overflow: 'hidden'
  }
});
var _default = exports.default = VoiceFileMessage;
//# sourceMappingURL=Message.file.voice.js.map