@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.
94 lines (93 loc) • 4.19 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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