speed playback from array

This commit is contained in:
Reinaldo Neto 2023-10-23 18:40:05 -03:00
parent 0154c5a5b2
commit eb33ce3688
2 changed files with 10 additions and 8 deletions

View File

@ -4,21 +4,22 @@ import Touchable from 'react-native-platform-touchable';
import styles from './styles'; import styles from './styles';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import { AVAILABLE_SPEEDS } from './utils';
const PlaybackSpeed = ({ const PlaybackSpeed = ({
onChange, onChange,
loaded = false, loaded = false,
rate = 1 rateIndex = 0
}: { }: {
onChange: (value: number) => void; onChange: (value: number) => void;
loaded: boolean; loaded: boolean;
rate: number; rateIndex: number;
}) => { }) => {
const { colors } = useTheme(); const { colors } = useTheme();
const onPress = () => { const onPress = () => {
const nextRate = rate === 2 ? 0.5 : rate + 0.5; const nextRateIndex = rateIndex >= AVAILABLE_SPEEDS.length ? 0 : rateIndex + 1;
onChange(nextRate); onChange(AVAILABLE_SPEEDS[nextRateIndex]);
}; };
return ( return (
@ -27,7 +28,7 @@ const PlaybackSpeed = ({
onPress={onPress} onPress={onPress}
style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]} style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}
> >
<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary }]}>{rate}x</Text> <Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary }]}>{AVAILABLE_SPEEDS[rateIndex]}x</Text>
</Touchable> </Touchable>
); );
}; };

View File

@ -11,6 +11,7 @@ import Seek from './Seek';
import PlaybackSpeed from './PlaybackSpeed'; import PlaybackSpeed from './PlaybackSpeed';
import PlayButton from './PlayButton'; import PlayButton from './PlayButton';
import audioPlayer from '../../lib/methods/audioPlayer'; import audioPlayer from '../../lib/methods/audioPlayer';
import { AVAILABLE_SPEEDS } from './utils';
interface IAudioPlayerProps { interface IAudioPlayerProps {
fileUri: string; fileUri: string;
@ -28,7 +29,7 @@ const AudioPlayer = ({
onPressCallback = () => {} onPressCallback = () => {}
}: IAudioPlayerProps) => { }: IAudioPlayerProps) => {
const [paused, setPaused] = useState(true); const [paused, setPaused] = useState(true);
const [rate, setRate] = useState(1); const [rateIndex, setRateIndex] = useState(0);
const duration = useSharedValue(0); const duration = useSharedValue(0);
const currentTime = useSharedValue(0); const currentTime = useSharedValue(0);
@ -63,7 +64,7 @@ const AudioPlayer = ({
if (currentSecond <= durationSeconds) { if (currentSecond <= durationSeconds) {
currentTime.value = currentSecond; currentTime.value = currentSecond;
} }
setRate(data.rate); setRateIndex(AVAILABLE_SPEEDS.indexOf(data.rate));
} }
}; };
@ -142,7 +143,7 @@ const AudioPlayer = ({
<View style={[styles.audioContainer, { backgroundColor: colors.surfaceTint, borderColor: colors.strokeExtraLight }]}> <View style={[styles.audioContainer, { backgroundColor: colors.surfaceTint, borderColor: colors.strokeExtraLight }]}>
<PlayButton disabled={disabled} loading={loading} paused={paused} isReadyToPlay={isReadyToPlay} onPress={onPress} /> <PlayButton disabled={disabled} loading={loading} paused={paused} isReadyToPlay={isReadyToPlay} onPress={onPress} />
<Seek currentTime={currentTime} duration={duration} loaded={!disabled && isReadyToPlay} onChangeTime={setPosition} /> <Seek currentTime={currentTime} duration={duration} loaded={!disabled && isReadyToPlay} onChangeTime={setPosition} />
<PlaybackSpeed onChange={onChangeRate} loaded={!disabled && isReadyToPlay} rate={rate} /> <PlaybackSpeed onChange={onChangeRate} loaded={!disabled && isReadyToPlay} rateIndex={rateIndex} />
</View> </View>
</> </>
); );