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