@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.
246 lines (245 loc) • 9.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
var _uikitUtils = require("@sendbird/uikit-utils");
var _useContext = require("../../hooks/useContext");
var _useVoiceMessageInput = _interopRequireDefault(require("../../hooks/useVoiceMessageInput"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 VoiceMessageInput = ({
onClose,
onSend
}) => {
const {
STRINGS
} = (0, _useContext.useLocalization)();
const {
colors
} = (0, _uikitReactNativeFoundation.useUIKitTheme)();
const {
actions,
state
} = (0, _useVoiceMessageInput.default)({
onSend: (file, duration) => onSend({
file,
duration
}),
onClose
});
const uiColors = colors.ui.voiceMessageInput.default[state.status !== 'idle' ? 'active' : 'inactive'];
const onPressCancel = async () => {
await actions.cancel().catch(error => {
_uikitUtils.Logger.warn('Failed to cancel voice message input', error);
}).finally(() => {
onClose();
});
};
const onPressSend = async () => {
await actions.send().catch(error => {
_uikitUtils.Logger.warn('Failed to send voice message', error);
}).finally(() => {
onClose();
});
};
const onPressVoiceMessageAction = async () => {
try {
switch (state.status) {
case 'idle':
await actions.startRecording();
break;
case 'recording':
if (lessThanMinimumDuration) {
await actions.cancel();
} else {
await actions.stopRecording();
}
break;
case 'recording_completed':
case 'playing_paused':
await actions.playPlayer();
break;
case 'playing':
await actions.pausePlayer();
break;
}
} catch (error) {
_uikitUtils.Logger.warn('Failed to run voice message action.', state);
}
};
const renderActionIcon = () => {
switch (state.status) {
case 'idle':
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
icon: 'recording',
size: 20,
color: uiColors.recording
});
case 'recording':
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
icon: 'stop',
size: 20,
color: uiColors.actionIcon
});
case 'recording_completed':
case 'playing_paused':
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
icon: 'play',
size: 20,
color: uiColors.actionIcon
});
case 'playing':
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
icon: 'pause',
size: 20,
color: uiColors.actionIcon
});
}
};
const isRecorderState = state.status === 'recording' || state.status === 'recording_completed';
const lessThanMinimumDuration = state.recordingTime.currentTime < state.recordingTime.minDuration;
const remainingTime = state.playingTime.duration - state.playingTime.currentTime;
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
backgroundColor: uiColors.background,
paddingVertical: 24,
paddingHorizontal: 16,
style: styles.container
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.ProgressBar, {
style: styles.progressBar,
current: (0, _uikitUtils.conditionChaining)([state.status === 'recording', state.status === 'recording_completed'], [state.recordingTime.currentTime, 0, state.playingTime.currentTime]),
total: (isRecorderState ? state.recordingTime.maxDuration : state.playingTime.duration) || 1,
trackColor: uiColors.progressTrack,
overlay: /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
paddingEnd: 16
}, /*#__PURE__*/_react.default.createElement(RecordingLight, {
visible: state.status === 'recording'
}), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
caption1: true,
style: {
lineHeight: undefined,
marginStart: 6
},
color: uiColors.textTime
}, (0, _uikitUtils.millsToMMSS)(isRecorderState ? state.recordingTime.currentTime : remainingTime)))
}), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
height: 34,
alignItems: 'center',
justifyContent: 'center'
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
flexDirection: 'row'
}, /*#__PURE__*/_react.default.createElement(CancelButton, {
label: STRINGS.LABELS.VOICE_MESSAGE_INPUT_CANCEL,
onPress: onPressCancel
}), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
flex: 1
}), /*#__PURE__*/_react.default.createElement(SendButton, {
disabled: state.status === 'idle' || lessThanMinimumDuration,
onPress: onPressSend
})), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
style: {
position: 'absolute'
},
alignItems: 'center',
justifyContent: 'center'
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.PressBox, {
activeOpacity: 0.5,
onPress: onPressVoiceMessageAction
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
width: 34,
height: 34,
borderRadius: 17,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: uiColors.actionIconBackground
}, renderActionIcon())))));
};
const RecordingLight = props => {
const {
colors
} = (0, _uikitReactNativeFoundation.useUIKitTheme)();
const value = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
const animation = (0, _react.useRef)(_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(value, {
toValue: 1,
duration: 500,
useNativeDriver: true
}), _reactNative.Animated.timing(value, {
toValue: 0,
duration: 500,
useNativeDriver: true
})]))).current;
(0, _react.useEffect)(() => {
if (props.visible) animation.start();
return () => {
animation.reset();
};
}, [props.visible]);
if (!props.visible) return null;
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
style: {
width: 12,
height: 12,
borderRadius: 6,
opacity: value,
backgroundColor: colors.ui.voiceMessageInput.default.active.recording
}
});
};
const CancelButton = props => {
const {
colors
} = (0, _uikitReactNativeFoundation.useUIKitTheme)();
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.PressBox, {
activeOpacity: 0.8,
onPress: props.onPress
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
paddingHorizontal: 12,
height: '100%',
alignItems: 'center',
justifyContent: 'center'
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
button: true,
color: colors.ui.voiceMessageInput.default.active.textCancel,
numberOfLines: 1
}, props.label)));
};
const SendButton = props => {
const {
colors
} = (0, _uikitReactNativeFoundation.useUIKitTheme)();
const uiColors = colors.ui.voiceMessageInput.default[props.disabled ? 'inactive' : 'active'];
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.PressBox, {
disabled: props.disabled,
activeOpacity: 0.8,
onPress: props.onPress
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
backgroundColor: uiColors.sendIconBackground,
padding: 7,
borderRadius: 40
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
icon: 'send',
size: 20,
color: uiColors.sendIcon
})));
};
const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
container: {
borderTopStartRadius: 8,
borderTopEndRadius: 8
},
progressBar: {
height: 36,
marginBottom: 16,
borderRadius: 18
}
});
var _default = exports.default = VoiceMessageInput;
//# sourceMappingURL=VoiceMessageInput.js.map