1import React, {useRef, useState} from 'react'; 2import {StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import Slider from '@react-native-community/slider'; 5import timeformat from '@/utils/timeformat'; 6import {fontSizeConst} from '@/constants/uiConst'; 7import TrackPlayer from '@/core/trackPlayer'; 8 9interface ITimeLabelProps { 10 time: number; 11} 12 13function TimeLabel(props: ITimeLabelProps) { 14 return <Text style={style.text}>{timeformat(props.time)}</Text>; 15} 16 17export default function SeekBar() { 18 const progress = TrackPlayer.useProgress(1000); 19 const [tmpProgress, setTmpProgress] = useState<number | null>(null); 20 const slidingRef = useRef(false); 21 22 return ( 23 <View style={style.wrapper}> 24 <TimeLabel time={tmpProgress ?? progress.position} /> 25 <Slider 26 style={style.slider} 27 minimumTrackTintColor={'#cccccc'} 28 maximumTrackTintColor={'#999999'} 29 thumbTintColor={'#dddddd'} 30 minimumValue={0} 31 maximumValue={progress.duration} 32 onSlidingStart={() => { 33 slidingRef.current = true; 34 }} 35 onValueChange={val => { 36 if (slidingRef.current) { 37 setTmpProgress(val); 38 } 39 }} 40 onSlidingComplete={val => { 41 slidingRef.current = false; 42 setTmpProgress(null); 43 if (val >= progress.duration - 2) { 44 val = progress.duration - 2; 45 } 46 TrackPlayer.seekTo(val); 47 }} 48 value={progress.position} 49 /> 50 <TimeLabel time={progress.duration} /> 51 </View> 52 ); 53} 54 55const style = StyleSheet.create({ 56 wrapper: { 57 width: '100%', 58 height: rpx(40), 59 justifyContent: 'center', 60 alignItems: 'center', 61 flexDirection: 'row', 62 }, 63 slider: { 64 width: '73%', 65 height: rpx(40), 66 }, 67 text: { 68 fontSize: fontSizeConst.description, 69 includeFontPadding: false, 70 color: '#cccccc', 71 }, 72}); 73