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 '@/common/musicQueue'; 6import timeformat from '@/utils/timeformat'; 7import { fontSizeConst } from '@/constants/uiConst'; 8import ThemeText from '@/components/themeText'; 9import useTextColor from '@/hooks/useTextColor'; 10import Color from 'color'; 11 12interface ISeekBarProps {} 13export default function SeekBar(props: ISeekBarProps) { 14 const progress = MusicQueue.useProgress(800); 15 const [tmpProgress, setTmpProgress] = useState<number | null>(null); 16 const textColor = useTextColor(); 17 18 return ( 19 <View style={style.wrapper}> 20 <ThemeText type='secondary' style={style.text}>{timeformat(tmpProgress ?? progress.position)}</ThemeText> 21 <Slider 22 style={style.slider} 23 minimumTrackTintColor={textColor} 24 maximumTrackTintColor={Color(textColor).alpha(0.7).toString()} 25 thumbTintColor={textColor} 26 minimumValue={0} 27 maximumValue={progress.duration} 28 onValueChange={(val)=>{ 29 setTmpProgress(val); 30 }} 31 onSlidingComplete={(val) => { 32 setTmpProgress(null); 33 MusicQueue.seekTo(val); 34 }} 35 value={progress.position}></Slider> 36 <ThemeText type='secondary' style={style.text}>{timeformat(progress.duration)}</ThemeText> 37 </View> 38 ); 39} 40 41const style = StyleSheet.create({ 42 wrapper: { 43 width: rpx(750), 44 height: rpx(40), 45 justifyContent: 'center', 46 alignItems: 'center', 47 flexDirection: 'row', 48 }, 49 slider: { 50 width: rpx(550), 51 height: rpx(40), 52 }, 53 text: { 54 fontSize: fontSizeConst.smaller, 55 includeFontPadding: false, 56 } 57}); 58