@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.49 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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const ThreadParentMessageFileVoice = props => {
const {
onLongPress,
onToggleVoiceMessage,
parentMessage,
durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
onUnmount
} = 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 ? 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: 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,
marginLeft: 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 = ThreadParentMessageFileVoice;
exports.default = _default;
//# sourceMappingURL=ThreadParentMessage.file.voice.js.map