Remove react-native-track-player implementation
This commit is contained in:
Danish Ahmed Mirza
Danish
parent
bb4a59e4d5
commit
ddde77fc6b
|
|
@ -5,119 +5,110 @@ import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming, Ea
|
|||
|
||||
import styles, { SLIDER_THUMB_RADIUS } from '../../styles';
|
||||
import { useTheme } from '../../../../theme';
|
||||
// import { debounce } from '../../../../lib/methods/helpers';
|
||||
|
||||
interface ISliderProps {
|
||||
value: number;
|
||||
maximumValue: number;
|
||||
onValueChange: (value: number) => void;
|
||||
onSlidingStart: () => void;
|
||||
onSlidingEnd: (value: number) => void;
|
||||
thumbTintColor?: string;
|
||||
minimumTrackTintColor?: string;
|
||||
maximumTrackTintColor?: string;
|
||||
activeTrackColor: string;
|
||||
trackColor: string;
|
||||
disabled?: boolean;
|
||||
thumbImage?: { uri: string; scale: number | undefined };
|
||||
containerStyle?: StyleProp<ViewStyle>;
|
||||
animationConfig?: { duration: number; easing: Animated.EasingFunction };
|
||||
}
|
||||
|
||||
const Slider = React.memo(
|
||||
({
|
||||
value,
|
||||
maximumValue,
|
||||
onValueChange,
|
||||
onSlidingStart,
|
||||
onSlidingEnd,
|
||||
thumbTintColor,
|
||||
minimumTrackTintColor,
|
||||
maximumTrackTintColor,
|
||||
disabled,
|
||||
containerStyle,
|
||||
animationConfig = {
|
||||
duration: 200,
|
||||
easing: Easing.linear
|
||||
}
|
||||
}: ISliderProps) => {
|
||||
const { colors } = useTheme();
|
||||
const [sliderWidth, setSliderWidth] = useState<number>(0);
|
||||
const [isSliding, setSliding] = useState<boolean>(false);
|
||||
const sliderThumbWidth = useSharedValue(2 * SLIDER_THUMB_RADIUS);
|
||||
const currentValue = useSharedValue(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSliding) {
|
||||
currentValue.value = withTiming(value, animationConfig);
|
||||
}
|
||||
}, [value, isSliding]);
|
||||
|
||||
const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
|
||||
|
||||
const equivalentValue = (sliderPosition: number) => interpolate(sliderPosition, [0, sliderWidth], [0, maximumValue]);
|
||||
|
||||
const onLayout = (event: any) => {
|
||||
setSliderWidth(event.nativeEvent.layout.width);
|
||||
};
|
||||
|
||||
// const debouncedOnValueChange = debounce((value: number) => onValueChange(value), 50);
|
||||
|
||||
const tapGesture = Gesture.Tap()
|
||||
.hitSlop({ vertical: 10 })
|
||||
.onStart(e => {
|
||||
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
|
||||
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
});
|
||||
|
||||
const dragGesture = Gesture.Pan()
|
||||
.hitSlop({ horizontal: 5, vertical: 20 })
|
||||
.onStart(() => {
|
||||
setSliding(true);
|
||||
onSlidingStart();
|
||||
sliderThumbWidth.value = withTiming(3 * SLIDER_THUMB_RADIUS, { duration: 100 });
|
||||
})
|
||||
.onChange(e => {
|
||||
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
|
||||
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
})
|
||||
.onEnd(e => {
|
||||
sliderThumbWidth.value = withTiming(2 * SLIDER_THUMB_RADIUS, { duration: 100 });
|
||||
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
|
||||
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
onSlidingEnd(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
setSliding(false);
|
||||
});
|
||||
|
||||
const animatedThumbStyles = useAnimatedStyle(() => ({
|
||||
transform: [
|
||||
{
|
||||
translateX: interpolate(currentValue.value, [0, maximumValue], [0, sliderWidth]) - SLIDER_THUMB_RADIUS
|
||||
}
|
||||
],
|
||||
width: sliderThumbWidth.value,
|
||||
height: sliderThumbWidth.value
|
||||
}));
|
||||
|
||||
const animatedTrackStyles = useAnimatedStyle(() => ({
|
||||
width: interpolate(currentValue.value, [0, maximumValue], [0, sliderWidth])
|
||||
}));
|
||||
|
||||
const gesture = disabled ? undefined : Gesture.Simultaneous(tapGesture, dragGesture);
|
||||
|
||||
return (
|
||||
<View style={[styles.sliderContainer, containerStyle]}>
|
||||
<GestureDetector gesture={gesture}>
|
||||
<View style={[styles.track, { backgroundColor: maximumTrackTintColor || colors.buttonBackground }]} onLayout={onLayout}>
|
||||
<Animated.View
|
||||
style={[styles.sliderThumb, { backgroundColor: thumbTintColor || colors.tintColor }, animatedThumbStyles]}
|
||||
/>
|
||||
<Animated.View
|
||||
style={[styles.activeTrack, { backgroundColor: minimumTrackTintColor || colors.tintColor }, animatedTrackStyles]}
|
||||
/>
|
||||
</View>
|
||||
</GestureDetector>
|
||||
</View>
|
||||
);
|
||||
const Slider = ({
|
||||
value,
|
||||
maximumValue,
|
||||
onValueChange,
|
||||
onSlidingEnd,
|
||||
thumbTintColor,
|
||||
activeTrackColor,
|
||||
trackColor,
|
||||
disabled,
|
||||
containerStyle,
|
||||
animationConfig = {
|
||||
duration: 200,
|
||||
easing: Easing.linear
|
||||
}
|
||||
);
|
||||
}: ISliderProps): React.ReactElement => {
|
||||
const { colors } = useTheme();
|
||||
const [sliderWidth, setSliderWidth] = useState<number>(0);
|
||||
const [isSliding, setSliding] = useState<boolean>(false);
|
||||
const sliderThumbWidth = useSharedValue(2 * SLIDER_THUMB_RADIUS);
|
||||
const currentValue = useSharedValue(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSliding) {
|
||||
currentValue.value = withTiming(value, animationConfig);
|
||||
}
|
||||
}, [value, isSliding]);
|
||||
|
||||
const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
|
||||
|
||||
const equivalentValue = (sliderPosition: number) => interpolate(sliderPosition, [0, sliderWidth], [0, maximumValue]);
|
||||
|
||||
const onLayout = (event: any) => {
|
||||
setSliderWidth(event.nativeEvent.layout.width);
|
||||
};
|
||||
|
||||
const tapGesture = Gesture.Tap()
|
||||
.hitSlop({ vertical: 10 })
|
||||
.onStart(e => {
|
||||
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
|
||||
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
onSlidingEnd(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
});
|
||||
|
||||
const dragGesture = Gesture.Pan()
|
||||
.hitSlop({ horizontal: 5, vertical: 20 })
|
||||
.onStart(() => {
|
||||
setSliding(true);
|
||||
sliderThumbWidth.value = withTiming(3 * SLIDER_THUMB_RADIUS, { duration: 100 });
|
||||
})
|
||||
.onChange(e => {
|
||||
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
|
||||
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
})
|
||||
.onEnd(e => {
|
||||
sliderThumbWidth.value = withTiming(2 * SLIDER_THUMB_RADIUS, { duration: 100 });
|
||||
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
|
||||
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
onSlidingEnd(equivalentValue(clamp(e.x, 0, sliderWidth)));
|
||||
setSliding(false);
|
||||
});
|
||||
|
||||
const animatedThumbStyles = useAnimatedStyle(() => ({
|
||||
transform: [
|
||||
{
|
||||
translateX: interpolate(currentValue.value, [0, maximumValue], [0, sliderWidth]) - SLIDER_THUMB_RADIUS
|
||||
}
|
||||
],
|
||||
width: sliderThumbWidth.value,
|
||||
height: sliderThumbWidth.value
|
||||
}));
|
||||
|
||||
const animatedTrackStyles = useAnimatedStyle(() => ({
|
||||
width: interpolate(currentValue.value, [0, maximumValue], [0, sliderWidth])
|
||||
}));
|
||||
|
||||
const gesture = disabled ? undefined : Gesture.Simultaneous(tapGesture, dragGesture);
|
||||
|
||||
return (
|
||||
<View style={[styles.sliderContainer, containerStyle]}>
|
||||
<GestureDetector gesture={gesture}>
|
||||
<View style={[styles.track, { backgroundColor: trackColor }]} onLayout={onLayout}>
|
||||
<Animated.View
|
||||
style={[styles.sliderThumb, { backgroundColor: thumbTintColor || colors.tintColor }, animatedThumbStyles]}
|
||||
/>
|
||||
<Animated.View style={[styles.activeTrack, { backgroundColor: activeTrackColor }, animatedTrackStyles]} />
|
||||
</View>
|
||||
</GestureDetector>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Slider;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,24 @@
|
|||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import React from 'react';
|
||||
import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
|
||||
import moment from 'moment';
|
||||
import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
|
||||
import { Audio, AVPlaybackStatus } from 'expo-av';
|
||||
import TrackPlayer, { Event, useTrackPlayerEvents, State, useProgress } from 'react-native-track-player';
|
||||
import { Easing } from 'react-native-reanimated';
|
||||
import moment from 'moment';
|
||||
import { dequal } from 'dequal';
|
||||
import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
|
||||
import { Sound } from 'expo-av/build/Audio/Sound';
|
||||
|
||||
import Touchable from '../../Touchable';
|
||||
import Markdown from '../../../markdown';
|
||||
import { CustomIcon } from '../../../CustomIcon';
|
||||
import sharedStyles from '../../../../views/Styles';
|
||||
import { themes } from '../../../../lib/constants';
|
||||
import {
|
||||
isAndroid
|
||||
// isIOS
|
||||
} from '../../../../lib/methods/helpers';
|
||||
import { isAndroid, isIOS } from '../../../../lib/methods/helpers';
|
||||
import MessageContext from '../../Context';
|
||||
import ActivityIndicator from '../../../ActivityIndicator';
|
||||
import { withDimensions } from '../../../../dimensions';
|
||||
import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
|
||||
import { IAttachment } from '../../../../definitions';
|
||||
import { TSupportedThemes } from '../../../../theme';
|
||||
import { setupService } from './services';
|
||||
import Slider from './Slider';
|
||||
import { addTrack, clearTracks, getTrackIndex, useTracks } from './tracksStorage';
|
||||
|
||||
interface IButton {
|
||||
loading: boolean;
|
||||
|
|
@ -41,6 +37,23 @@ interface IMessageAudioProps {
|
|||
scale?: number;
|
||||
}
|
||||
|
||||
interface IMessageAudioState {
|
||||
loading: boolean;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
paused: boolean;
|
||||
}
|
||||
|
||||
const mode = {
|
||||
allowsRecordingIOS: false,
|
||||
playsInSilentModeIOS: true,
|
||||
staysActiveInBackground: true,
|
||||
shouldDuckAndroid: true,
|
||||
playThroughEarpieceAndroid: false,
|
||||
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
|
||||
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
audioContainer: {
|
||||
flex: 1,
|
||||
|
|
@ -63,9 +76,6 @@ const styles = StyleSheet.create({
|
|||
marginHorizontal: 12,
|
||||
fontSize: 14,
|
||||
...sharedStyles.textRegular
|
||||
},
|
||||
slider: {
|
||||
flex: 1
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -94,217 +104,206 @@ const Button = React.memo(({ loading, paused, onPress, disabled, theme }: IButto
|
|||
|
||||
Button.displayName = 'MessageAudioButton';
|
||||
|
||||
const MessageAudio = ({
|
||||
file,
|
||||
isReply,
|
||||
style,
|
||||
theme,
|
||||
getCustomEmoji
|
||||
}: // scale
|
||||
IMessageAudioProps) => {
|
||||
const { baseUrl, user } = useContext(MessageContext);
|
||||
class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioState> {
|
||||
static contextType = MessageContext;
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [paused, setPaused] = useState(true);
|
||||
const [currentPosition, setCurrentPosition] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [isSliding, setIsSliding] = useState(false);
|
||||
const { position } = useProgress();
|
||||
private sound: Sound;
|
||||
|
||||
const [currentTrackId, setCurrentTrackId] = useTracks('currentTrackId');
|
||||
constructor(props: IMessageAudioProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
currentTime: 0,
|
||||
duration: 0,
|
||||
paused: true
|
||||
};
|
||||
|
||||
let url = file.audio_url;
|
||||
if (url && !url.startsWith('http')) {
|
||||
url = `${baseUrl}${file.audio_url}`;
|
||||
this.sound = new Audio.Sound();
|
||||
this.sound.setOnPlaybackStatusUpdate(this.onPlaybackStatusUpdate);
|
||||
}
|
||||
|
||||
const track = {
|
||||
id: `${url}?rc_uid=${user.id}&rc_token=${user.token}`,
|
||||
url: `${url}?rc_uid=${user.id}&rc_token=${user.token}`,
|
||||
title: file.title,
|
||||
artist: file.author_name
|
||||
};
|
||||
async componentDidMount() {
|
||||
const { file } = this.props;
|
||||
const { baseUrl, user } = this.context;
|
||||
|
||||
const updateTrackDuration = (status: AVPlaybackStatus) => {
|
||||
if (status.isLoaded && status.durationMillis) {
|
||||
const trackDuration = status.durationMillis / 1000;
|
||||
setDuration(trackDuration > 0 ? trackDuration : 0);
|
||||
let url = file.audio_url;
|
||||
if (url && !url.startsWith('http')) {
|
||||
url = `${baseUrl}${file.audio_url}`;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const setup = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await setupService();
|
||||
const sound = new Audio.Sound();
|
||||
sound.setOnPlaybackStatusUpdate(updateTrackDuration);
|
||||
await sound.loadAsync({ uri: `${url}?rc_uid=${user.id}&rc_token=${user.token}` });
|
||||
if (!isReply) {
|
||||
const index = await TrackPlayer.add(track);
|
||||
// @ts-ignore
|
||||
index >= 0 && addTrack({ trackIndex: index, trackId: track.id });
|
||||
}
|
||||
} catch {
|
||||
// Do nothing
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
setup();
|
||||
return () => {
|
||||
TrackPlayer.destroy();
|
||||
clearTracks();
|
||||
setCurrentTrackId(null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentTrackId || currentTrackId !== track.id) {
|
||||
setCurrentPosition(0);
|
||||
setPaused(true);
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
await this.sound.loadAsync({ uri: `${url}?rc_uid=${user.id}&rc_token=${user.token}` });
|
||||
} catch {
|
||||
// Do nothing
|
||||
}
|
||||
}, [currentTrackId]);
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (currentTrackId === track.id && !isSliding) {
|
||||
setCurrentPosition(position);
|
||||
shouldComponentUpdate(nextProps: IMessageAudioProps, nextState: IMessageAudioState) {
|
||||
const { currentTime, duration, paused, loading } = this.state;
|
||||
const { file, theme } = this.props;
|
||||
if (nextProps.theme !== theme) {
|
||||
return true;
|
||||
}
|
||||
}, [position]);
|
||||
if (nextState.currentTime !== currentTime) {
|
||||
return true;
|
||||
}
|
||||
if (nextState.duration !== duration) {
|
||||
return true;
|
||||
}
|
||||
if (nextState.paused !== paused) {
|
||||
return true;
|
||||
}
|
||||
if (!dequal(nextProps.file, file)) {
|
||||
return true;
|
||||
}
|
||||
if (nextState.loading !== loading) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
playPause();
|
||||
}, [paused]);
|
||||
|
||||
useEffect(() => {
|
||||
componentDidUpdate() {
|
||||
const { paused } = this.state;
|
||||
if (paused) {
|
||||
deactivateKeepAwake();
|
||||
} else {
|
||||
activateKeepAwake();
|
||||
}
|
||||
}, [paused, currentPosition, duration, file, loading, theme]);
|
||||
}
|
||||
|
||||
useTrackPlayerEvents([Event.PlaybackState], ({ state }) => {
|
||||
if (state === State.Stopped) {
|
||||
try {
|
||||
TrackPlayer.stop();
|
||||
setPaused(true);
|
||||
} catch {
|
||||
// do nothing
|
||||
}
|
||||
async componentWillUnmount() {
|
||||
try {
|
||||
await this.sound.stopAsync();
|
||||
} catch {
|
||||
// Do nothing
|
||||
}
|
||||
if (state === State.Paused) {
|
||||
setPaused(true);
|
||||
}
|
||||
if (state === State.Playing && currentTrackId?.trackId === track.id) {
|
||||
setPaused(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const getDuration = () => formatTime(currentPosition || duration);
|
||||
|
||||
const togglePlayPause = () => {
|
||||
setPaused(!paused);
|
||||
onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
|
||||
if (status) {
|
||||
this.onLoad(status);
|
||||
this.onProgress(status);
|
||||
this.onEnd(status);
|
||||
}
|
||||
};
|
||||
|
||||
const playPause = async () => {
|
||||
onLoad = (data: AVPlaybackStatus) => {
|
||||
if (data.isLoaded && data.durationMillis) {
|
||||
const duration = data.durationMillis / 1000;
|
||||
this.setState({ duration: duration > 0 ? duration : 0 });
|
||||
}
|
||||
};
|
||||
|
||||
onProgress = (data: AVPlaybackStatus) => {
|
||||
if (data.isLoaded) {
|
||||
const { duration } = this.state;
|
||||
const currentTime = data.positionMillis / 1000;
|
||||
if (currentTime <= duration) {
|
||||
this.setState({ currentTime });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onEnd = async (data: AVPlaybackStatus) => {
|
||||
if (data.isLoaded) {
|
||||
if (data.didJustFinish) {
|
||||
try {
|
||||
await this.sound.stopAsync();
|
||||
this.setState({ paused: true, currentTime: 0 });
|
||||
} catch {
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
get duration() {
|
||||
const { currentTime, duration } = this.state;
|
||||
return formatTime(currentTime || duration);
|
||||
}
|
||||
|
||||
togglePlayPause = () => {
|
||||
const { paused } = this.state;
|
||||
this.setState({ paused: !paused }, this.playPause);
|
||||
};
|
||||
|
||||
playPause = async () => {
|
||||
const { paused } = this.state;
|
||||
try {
|
||||
if (paused) {
|
||||
if (currentTrackId === track.id) {
|
||||
TrackPlayer.pause();
|
||||
}
|
||||
} else if (currentTrackId === track.id) {
|
||||
TrackPlayer.play();
|
||||
await this.sound.pauseAsync();
|
||||
} else {
|
||||
const index = getTrackIndex(track.id);
|
||||
index && TrackPlayer.skip(index);
|
||||
if (currentPosition > 0) await TrackPlayer.seekTo(currentPosition);
|
||||
TrackPlayer.play();
|
||||
setCurrentTrackId(track.id);
|
||||
await Audio.setAudioModeAsync(mode);
|
||||
await this.sound.playAsync();
|
||||
}
|
||||
} catch {
|
||||
// Do nothing
|
||||
}
|
||||
};
|
||||
|
||||
const onValueChange = (value: number) => {
|
||||
setCurrentPosition(value);
|
||||
onValueChange = (value: number) => {
|
||||
this.setState({ currentTime: value });
|
||||
};
|
||||
|
||||
onSlidingEnd = async (value: number) => {
|
||||
try {
|
||||
if (currentTrackId === track.id && !paused && isSliding) {
|
||||
setPaused(true);
|
||||
TrackPlayer.pause();
|
||||
}
|
||||
await this.sound.setPositionAsync(value * 1000);
|
||||
} catch {
|
||||
// Do nothing
|
||||
}
|
||||
};
|
||||
|
||||
const onSlidingEnd = async (value: number) => {
|
||||
setCurrentPosition(value);
|
||||
try {
|
||||
if (currentTrackId === track.id) {
|
||||
await TrackPlayer.seekTo(value);
|
||||
if (paused) {
|
||||
TrackPlayer.play();
|
||||
setPaused(false);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Do nothing
|
||||
render() {
|
||||
const { loading, paused, currentTime, duration } = this.state;
|
||||
const { file, getCustomEmoji, theme, scale, isReply, style } = this.props;
|
||||
const { description } = file;
|
||||
const { baseUrl, user } = this.context;
|
||||
|
||||
if (!baseUrl) {
|
||||
return null;
|
||||
}
|
||||
setIsSliding(false);
|
||||
};
|
||||
|
||||
const { description } = file;
|
||||
let thumbColor;
|
||||
if (isAndroid && isReply) {
|
||||
thumbColor = themes[theme].tintDisabled;
|
||||
} else if (isAndroid) {
|
||||
thumbColor = themes[theme].tintColor;
|
||||
}
|
||||
|
||||
if (!baseUrl) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let thumbColor;
|
||||
if (isAndroid && isReply) {
|
||||
thumbColor = themes[theme].tintDisabled;
|
||||
} else if (isAndroid) {
|
||||
thumbColor = themes[theme].tintColor;
|
||||
}
|
||||
|
||||
const sliderAnimatedConfig = {
|
||||
duration: 250,
|
||||
easing: Easing.linear
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Markdown
|
||||
msg={description}
|
||||
style={[isReply && style]}
|
||||
baseUrl={baseUrl}
|
||||
username={user.username}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
styles.audioContainer,
|
||||
{ backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].borderColor }
|
||||
]}>
|
||||
<Button disabled={isReply} loading={loading} paused={paused} onPress={togglePlayPause} theme={theme} />
|
||||
<Slider
|
||||
value={currentPosition}
|
||||
maximumValue={duration}
|
||||
onValueChange={onValueChange}
|
||||
thumbTintColor={thumbColor}
|
||||
minimumTrackTintColor={themes[theme].tintColor}
|
||||
disabled={isReply}
|
||||
maximumTrackTintColor={themes[theme].auxiliaryText}
|
||||
animationConfig={sliderAnimatedConfig}
|
||||
onSlidingStart={() => setIsSliding(true)}
|
||||
onSlidingEnd={onSlidingEnd}
|
||||
// thumbImage={isIOS ? { uri: 'audio_thumb', scale } : undefined}
|
||||
return (
|
||||
<>
|
||||
<Markdown
|
||||
msg={description}
|
||||
style={[isReply && style]}
|
||||
baseUrl={baseUrl}
|
||||
username={user.username}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
/>
|
||||
<Text style={[styles.duration, { color: themes[theme].auxiliaryText }]}>{getDuration()}</Text>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
};
|
||||
<View
|
||||
style={[
|
||||
styles.audioContainer,
|
||||
{ backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].borderColor }
|
||||
]}>
|
||||
<Button disabled={isReply} loading={loading} paused={paused} onPress={this.togglePlayPause} theme={theme} />
|
||||
<Slider
|
||||
disabled={isReply}
|
||||
value={currentTime}
|
||||
maximumValue={duration}
|
||||
thumbTintColor={thumbColor}
|
||||
trackColor={themes[theme].auxiliaryText}
|
||||
activeTrackColor={themes[theme].tintColor}
|
||||
onValueChange={this.onValueChange}
|
||||
onSlidingEnd={this.onSlidingEnd}
|
||||
thumbImage={isIOS ? { uri: 'audio_thumb', scale } : undefined}
|
||||
/>
|
||||
<Text style={[styles.duration, { color: themes[theme].auxiliaryText }]}>{this.duration}</Text>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MessageAudio;
|
||||
export default withDimensions(MessageAudio);
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
import TrackPlayer, { Event, State, Capability } from 'react-native-track-player';
|
||||
|
||||
import { clearTracks } from './tracksStorage';
|
||||
|
||||
let wasPausedByDuck = false;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||
// eslint-disable-next-line require-await
|
||||
export const playbackService = async () => {
|
||||
TrackPlayer.addEventListener(Event.RemotePause, () => {
|
||||
TrackPlayer.pause();
|
||||
});
|
||||
|
||||
TrackPlayer.addEventListener(Event.RemotePlay, () => {
|
||||
TrackPlayer.play();
|
||||
});
|
||||
|
||||
TrackPlayer.addEventListener(Event.RemoteStop, () => {
|
||||
clearTracks();
|
||||
TrackPlayer.destroy();
|
||||
});
|
||||
|
||||
TrackPlayer.addEventListener(Event.RemoteDuck, async e => {
|
||||
if (e.permanent === true) {
|
||||
TrackPlayer.stop();
|
||||
} else if (e.paused === true) {
|
||||
const playerState = await TrackPlayer.getState();
|
||||
wasPausedByDuck = playerState !== State.Paused;
|
||||
TrackPlayer.pause();
|
||||
} else if (wasPausedByDuck === true) {
|
||||
TrackPlayer.play();
|
||||
wasPausedByDuck = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const setupService = async () => {
|
||||
await TrackPlayer.setupPlayer();
|
||||
await TrackPlayer.updateOptions({
|
||||
stopWithApp: true,
|
||||
capabilities: [Capability.Play, Capability.Pause, Capability.Stop],
|
||||
compactCapabilities: [Capability.Play, Capability.Pause]
|
||||
});
|
||||
};
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import MMKVStorage, { create } from 'react-native-mmkv-storage';
|
||||
|
||||
interface Track {
|
||||
trackId: string;
|
||||
trackIndex: number;
|
||||
}
|
||||
|
||||
const TracksStorage = new MMKVStorage.Loader().withInstanceID('tracks').initialize();
|
||||
export const useTracks = create(TracksStorage);
|
||||
|
||||
export const initializeTracks = () => {
|
||||
const tracks = TracksStorage.getArray('tracks');
|
||||
if (!tracks) TracksStorage.setArray('tracks', []);
|
||||
};
|
||||
|
||||
export const addTrack = (track: Track) => {
|
||||
initializeTracks();
|
||||
const tracks: Track[] = TracksStorage.getArray('tracks') || [];
|
||||
if (tracks.find((t: Track) => t.trackId === track.trackId)) {
|
||||
return;
|
||||
}
|
||||
TracksStorage.setArray('tracks', [...tracks, track]);
|
||||
};
|
||||
|
||||
export const getTrackIndex = (trackId: string) => {
|
||||
const tracks: Track[] = TracksStorage.getArray('tracks') || [];
|
||||
const index = tracks.findIndex((t: Track) => t.trackId === trackId);
|
||||
if (index !== -1) {
|
||||
return tracks[index].trackIndex;
|
||||
}
|
||||
};
|
||||
|
||||
export const clearTracks = () => {
|
||||
TracksStorage.setArray('tracks', []);
|
||||
};
|
||||
|
|
@ -180,8 +180,7 @@ export default StyleSheet.create({
|
|||
justifyContent: 'center'
|
||||
},
|
||||
activeTrack: {
|
||||
height: 2,
|
||||
width: 0
|
||||
height: 2
|
||||
},
|
||||
sliderThumb: {
|
||||
height: SLIDER_THUMB_RADIUS * 2,
|
||||
|
|
|
|||
4
index.js
4
index.js
|
|
@ -1,10 +1,8 @@
|
|||
import 'react-native-gesture-handler';
|
||||
import 'react-native-console-time-polyfill';
|
||||
import { AppRegistry } from 'react-native';
|
||||
import TrackPlayer from 'react-native-track-player';
|
||||
|
||||
import { name as appName, share as shareName } from './app.json';
|
||||
import { playbackService } from './app/containers/message/Components/Audio/services';
|
||||
|
||||
if (__DEV__) {
|
||||
require('./app/ReactotronConfig');
|
||||
|
|
@ -23,8 +21,6 @@ if (__DEV__) {
|
|||
AppRegistry.registerComponent(appName, () => require('./app/index').default);
|
||||
AppRegistry.registerComponent(shareName, () => require('./app/share').default);
|
||||
|
||||
TrackPlayer.registerPlaybackService(() => playbackService);
|
||||
|
||||
// For storybook, comment everything above and uncomment below
|
||||
// import 'react-native-gesture-handler';
|
||||
// import 'react-native-console-time-polyfill';
|
||||
|
|
|
|||
|
|
@ -14,9 +14,6 @@ jest.mock('react-native-mmkv-storage', () => ({
|
|||
withEncryption: jest.fn().mockImplementation(() => ({
|
||||
initialize: jest.fn()
|
||||
}))
|
||||
})),
|
||||
withInstanceID: jest.fn().mockImplementation(() => ({
|
||||
initialize: jest.fn()
|
||||
}))
|
||||
})),
|
||||
create: jest.fn(),
|
||||
|
|
@ -82,45 +79,5 @@ jest.mock('react-native-math-view', () => {
|
|||
MathText: react.View // {...} Named export
|
||||
};
|
||||
});
|
||||
jest.mock('react-native-track-player', () => ({
|
||||
__esModule: true,
|
||||
default: {
|
||||
addEventListener: () => ({
|
||||
remove: jest.fn()
|
||||
}),
|
||||
registerEventHandler: jest.fn(),
|
||||
registerPlaybackService: jest.fn(),
|
||||
setupPlayer: jest.fn(),
|
||||
destroy: jest.fn(),
|
||||
updateOptions: jest.fn(),
|
||||
reset: jest.fn(),
|
||||
add: jest.fn(),
|
||||
remove: jest.fn(),
|
||||
skip: jest.fn(),
|
||||
skipToNext: jest.fn(),
|
||||
skipToPrevious: jest.fn(),
|
||||
removeUpcomingTracks: jest.fn(),
|
||||
play: jest.fn(),
|
||||
pause: jest.fn(),
|
||||
stop: jest.fn(),
|
||||
seekTo: jest.fn(),
|
||||
setVolume: jest.fn(),
|
||||
setRate: jest.fn(),
|
||||
getQueue: jest.fn(),
|
||||
getTrack: jest.fn(),
|
||||
getCurrentTrack: jest.fn(),
|
||||
getVolume: jest.fn(),
|
||||
getDuration: jest.fn(),
|
||||
getPosition: jest.fn(),
|
||||
getBufferedPosition: jest.fn(),
|
||||
getState: jest.fn(),
|
||||
getRate: jest.fn()
|
||||
},
|
||||
useProgress: () => ({
|
||||
position: 100
|
||||
})
|
||||
}));
|
||||
|
||||
jest.mock('./app/containers/message/Components/Audio/tracksStorage.ts', () => ({
|
||||
useTracks: () => ['', jest.fn()]
|
||||
}));
|
||||
jest.mock('react-native-gesture-handler', () => jest.fn(() => null));
|
||||
|
|
|
|||
|
|
@ -220,7 +220,8 @@
|
|||
},
|
||||
"setupFilesAfterEnv": [
|
||||
"@testing-library/jest-native/extend-expect",
|
||||
"./jest.setup.js"
|
||||
"./jest.setup.js",
|
||||
"./node_modules/react-native-gesture-handler/jestSetup.js"
|
||||
]
|
||||
},
|
||||
"snyk": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue