speed playback from array
This commit is contained in:
parent
0154c5a5b2
commit
eb33ce3688
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue