@sendbird/uikit-react-native
Version:
Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
93 lines (92 loc) • 4.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
var _uikitUtils = require("@sendbird/uikit-utils");
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 ThreadParentMessageFileVoice = props => {
const {
onLongPress,
onToggleVoiceMessage,
parentMessage,
durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
onUnmount,
initialCurrentTime
} = props;
const fileMessage = parentMessage;
if (!fileMessage) return null;
const {
colors
} = (0, _uikitReactNativeFoundation.useUIKitTheme)();
const [state, setState] = (0, _react.useState)(() => {
var _meta$value;
const meta = fileMessage.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();
};
}, []);
const uiColors = colors.ui.groupChannelMessage['incoming'];
const remainingTime = state.duration - state.currentTime;
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
style: styles.container,
backgroundColor: uiColors.enabled.background
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.PressBox, {
onPress: () => onToggleVoiceMessage === null || onToggleVoiceMessage === void 0 ? void 0 : onToggleVoiceMessage(state, setState),
onLongPress: onLongPress
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.ProgressBar, {
current: state.currentTime,
total: state.duration,
style: {
minWidth: 136,
height: 44
},
trackColor: uiColors.enabled.voiceProgressTrack,
overlay: /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 12
}, state.status === 'preparing' ? /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.LoadingSpinner, {
size: 24,
color: uiColors.enabled.voiceSpinner
}) : /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
size: 16,
containerStyle: {
backgroundColor: uiColors.enabled.voiceActionIconBackground,
padding: 6,
borderRadius: 16
},
icon: state.status === 'paused' ? 'play' : 'pause'
}), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
body3: true,
style: {
lineHeight: undefined,
marginStart: 6,
opacity: 0.88
},
color: uiColors.enabled.textVoicePlaytime
}, (0, _uikitUtils.millsToMSS)(state.currentTime === 0 ? state.duration : remainingTime)))
})));
};
const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
container: {
borderRadius: 16,
overflow: 'hidden',
maxWidth: 136
}
});
var _default = exports.default = ThreadParentMessageFileVoice;
//# sourceMappingURL=ThreadParentMessage.file.voice.js.map