stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
262 lines • 12.4 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AudioAttachment = void 0;
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _dayjs = _interopRequireDefault(require("dayjs"));
var _duration = _interopRequireDefault(require("dayjs/plugin/duration"));
var _streamChat = require("stream-chat");
var _PlayPauseButton = require("./PlayPauseButton");
var _contexts = require("../../../contexts");
var _hooks = require("../../../hooks");
var _useAudioPlayer = require("../../../hooks/useAudioPlayer");
var _native = require("../../../native");
var _theme = require("../../../theme");
var _ProgressControl = require("../../ProgressControl/ProgressControl");
var _StableDurationLabel = require("../../ProgressControl/StableDurationLabel");
var _WaveProgressBar = require("../../ProgressControl/WaveProgressBar");
var _SpeedSettingsButton = require("../../ui/SpeedSettingsButton");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/Audio/AudioAttachment.tsx";
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 (var _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); }
var ONE_HOUR_IN_MILLISECONDS = 3600 * 1000;
var ONE_SECOND_IN_MILLISECONDS = 1000;
_dayjs.default.extend(_duration.default);
var getAudioDurationLabel = durationInMilliseconds => {
if (!durationInMilliseconds) {
return '00:00';
}
return durationInMilliseconds / ONE_HOUR_IN_MILLISECONDS >= 1 ? _dayjs.default.duration(durationInMilliseconds, 'milliseconds').format('HH:mm:ss') : _dayjs.default.duration(durationInMilliseconds, 'milliseconds').format('mm:ss');
};
var audioPlayerSelector = state => ({
currentPlaybackRate: state.currentPlaybackRate,
duration: state.duration,
isPlaying: state.isPlaying,
position: state.position,
progress: state.progress
});
var AudioAttachment = props => {
var _item$duration, _item$mime_type, _message$parent_id, _item$asset_url, _NativeHandlers$Sound;
var soundRef = _react.default.useRef(null);
var styles = useStyles();
var _props$hideProgressBa = props.hideProgressBar,
hideProgressBar = _props$hideProgressBa === void 0 ? false : _props$hideProgressBa,
item = props.item,
message = props.message,
_props$showSpeedSetti = props.showSpeedSettings,
showSpeedSettings = _props$showSpeedSetti === void 0 ? false : _props$showSpeedSetti,
_props$showTitle = props.showTitle,
showTitle = _props$showTitle === void 0 ? true : _props$showTitle,
testID = props.testID,
_props$isPreview = props.isPreview,
isPreview = _props$isPreview === void 0 ? false : _props$isPreview,
containerStyle = props.containerStyle,
stylesProps = props.styles,
indicator = props.indicator;
var isVoiceRecording = (0, _streamChat.isVoiceRecordingAttachment)(item);
var audioPlayer = (0, _useAudioPlayer.useAudioPlayer)({
duration: (_item$duration = item.duration) != null ? _item$duration : 0,
mimeType: (_item$mime_type = item.mime_type) != null ? _item$mime_type : '',
requester: isPreview ? 'preview' : (message == null ? void 0 : message.id) && `${(_message$parent_id = message == null ? void 0 : message.parent_id) != null ? _message$parent_id : message == null ? void 0 : message.id}${message == null ? void 0 : message.id}`,
type: isVoiceRecording ? 'voiceRecording' : 'audio',
uri: (_item$asset_url = item.asset_url) != null ? _item$asset_url : ''
});
var _useStateStore = (0, _hooks.useStateStore)(audioPlayer.state, audioPlayerSelector),
duration = _useStateStore.duration,
isPlaying = _useStateStore.isPlaying,
position = _useStateStore.position,
progress = _useStateStore.progress,
currentPlaybackRate = _useStateStore.currentPlaybackRate;
(0, _react.useEffect)(() => {
if (soundRef.current) {
audioPlayer.initPlayer({
playerRef: soundRef.current
});
}
}, [audioPlayer]);
(0, _react.useEffect)(() => () => {
if (isPreview) {
audioPlayer.onRemove();
}
}, [audioPlayer, isPreview]);
var handleLoad = payload => {
if (isVoiceRecording) {
return;
}
audioPlayer.duration = payload.duration * ONE_SECOND_IN_MILLISECONDS;
};
var handleProgress = data => {
var currentTime = data.currentTime;
audioPlayer.position = currentTime * ONE_SECOND_IN_MILLISECONDS;
};
var onSeek = seekResponse => {
audioPlayer.position = seekResponse.currentTime * ONE_SECOND_IN_MILLISECONDS;
};
var handlePlayPause = () => {
audioPlayer.toggle();
};
var handleEnd = function () {
var _ref = (0, _asyncToGenerator2.default)(function* () {
yield audioPlayer.stop();
});
return function handleEnd() {
return _ref.apply(this, arguments);
};
}();
var dragStart = (0, _hooks.useStableCallback)(() => {
audioPlayer.pause();
});
var dragEnd = (0, _hooks.useStableCallback)(function () {
var _ref2 = (0, _asyncToGenerator2.default)(function* (currentProgress) {
var positionInSeconds = currentProgress * duration / ONE_SECOND_IN_MILLISECONDS;
yield audioPlayer.seek(positionInSeconds);
});
return function (_x) {
return _ref2.apply(this, arguments);
};
}());
var onSpeedChangeHandler = function () {
var _ref3 = (0, _asyncToGenerator2.default)(function* () {
yield audioPlayer.changePlaybackRate();
});
return function onSpeedChangeHandler() {
return _ref3.apply(this, arguments);
};
}();
var _useTheme = (0, _contexts.useTheme)(),
_useTheme$theme = _useTheme.theme,
_useTheme$theme$audio = _useTheme$theme.audioAttachment,
container = _useTheme$theme$audio.container,
centerContainer = _useTheme$theme$audio.centerContainer,
audioInfo = _useTheme$theme$audio.audioInfo,
leftContainer = _useTheme$theme$audio.leftContainer,
progressControlContainer = _useTheme$theme$audio.progressControlContainer,
progressDurationText = _useTheme$theme$audio.progressDurationText,
rightContainer = _useTheme$theme$audio.rightContainer,
semantics = _useTheme$theme.semantics,
filenameText = _useTheme$theme.messageComposer.fileAttachmentUploadPreview.filenameText;
var maxDurationLabel = (0, _react.useMemo)(() => getAudioDurationLabel(duration), [duration]);
var remainingDuration = (0, _react.useMemo)(() => Math.max(duration - position, 0), [duration, position]);
var progressDuration = (0, _react.useMemo)(() => getAudioDurationLabel(remainingDuration || duration), [duration, remainingDuration]);
return (0, _jsxRuntime.jsxs)(_reactNative.View, {
accessibilityLabel: "audio-attachment-preview",
style: [styles.container, container, containerStyle, stylesProps == null ? void 0 : stylesProps.container],
testID: testID,
children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.leftContainer, stylesProps == null ? void 0 : stylesProps.leftContainer, leftContainer],
children: (0, _jsxRuntime.jsx)(_PlayPauseButton.PlayPauseButton, {
isPlaying: isPlaying,
accessibilityLabel: "Play Pause Button",
onPress: handlePlayPause,
containerStyle: stylesProps == null ? void 0 : stylesProps.playPauseButton
})
}), (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.centerContainer, {
flexGrow: 1,
flexShrink: showTitle ? 1 : 0
}, centerContainer],
children: [showTitle ? (0, _jsxRuntime.jsx)(_reactNative.Text, {
accessibilityLabel: "File Name",
numberOfLines: 1,
style: [styles.filenameText, _reactNative.I18nManager.isRTL ? {
writingDirection: 'rtl'
} : {
writingDirection: 'ltr'
}, filenameText],
children: (0, _streamChat.isVoiceRecordingAttachment)(item) || (0, _streamChat.isLocalVoiceRecordingAttachment)(item) ? 'Voice Message' : item.title
}) : null, indicator ? indicator : (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.audioInfo, audioInfo],
children: [(0, _jsxRuntime.jsx)(_StableDurationLabel.StableDurationLabel, {
accessibilityLabel: "Progress Duration",
reserveLabel: maxDurationLabel,
label: progressDuration,
style: [styles.progressDurationText, progressDurationText, stylesProps == null ? void 0 : stylesProps.durationText],
visibleStyle: {
color: isPlaying ? semantics.accentPrimary : semantics.textSecondary
}
}), !hideProgressBar && (0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.progressControlContainer, progressControlContainer],
children: item.waveform_data ? (0, _jsxRuntime.jsx)(_WaveProgressBar.WaveProgressBar, {
isPlaying: isPlaying,
onEndDrag: dragEnd,
onStartDrag: dragStart,
progress: progress,
waveformData: item.waveform_data
}) : (0, _jsxRuntime.jsx)(_ProgressControl.ProgressControl, {
isPlaying: isPlaying,
onEndDrag: dragEnd,
onStartDrag: dragStart,
progress: progress,
testID: "progress-control"
})
})]
}), ((_NativeHandlers$Sound = _native.NativeHandlers.Sound) == null ? void 0 : _NativeHandlers$Sound.Player) && (0, _jsxRuntime.jsx)(_native.NativeHandlers.Sound.Player, {
onEnd: handleEnd,
onLoad: handleLoad,
onProgress: handleProgress,
onSeek: onSeek,
paused: !isPlaying,
rate: currentPlaybackRate,
soundRef: soundRef,
testID: "sound-player",
uri: item.asset_url
})]
}), showSpeedSettings && !indicator ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.rightContainer, rightContainer],
children: (0, _jsxRuntime.jsx)(_SpeedSettingsButton.SpeedSettingsButton, {
currentPlaybackRate: currentPlaybackRate,
onPress: onSpeedChangeHandler,
containerStyle: stylesProps == null ? void 0 : stylesProps.speedSettingsButton
})
}) : null]
});
};
exports.AudioAttachment = AudioAttachment;
var useStyles = () => {
var _useTheme2 = (0, _contexts.useTheme)(),
semantics = _useTheme2.theme.semantics;
return (0, _react.useMemo)(() => {
return _reactNative.StyleSheet.create({
container: {
alignItems: 'center',
flexDirection: 'row',
padding: _theme.primitives.spacingSm,
gap: _theme.primitives.spacingXs,
minWidth: 256,
borderColor: semantics.borderCoreDefault,
borderWidth: 1
},
audioInfo: {
alignItems: 'center',
flexDirection: 'row',
gap: _theme.primitives.spacingXxs
},
centerContainer: {
gap: _theme.primitives.spacingXxs
},
filenameText: {
color: semantics.textPrimary,
fontSize: _theme.primitives.typographyFontSizeSm,
fontWeight: _theme.primitives.typographyFontWeightSemiBold,
lineHeight: _theme.primitives.typographyLineHeightTight
},
leftContainer: {},
progressControlContainer: {
flex: 1
},
progressDurationText: {
color: semantics.textPrimary,
fontVariant: ['tabular-nums'],
fontSize: _theme.primitives.typographyFontSizeXs,
fontWeight: _theme.primitives.typographyFontWeightRegular,
lineHeight: _theme.primitives.typographyLineHeightTight
},
rightContainer: {}
});
}, [semantics]);
};
AudioAttachment.displayName = 'AudioAttachment{messageComposer{audioAttachment}}';
//# sourceMappingURL=AudioAttachment.js.map