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