1import React, {Fragment} from 'react'; 2import {Pressable, StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ThemeText from '@/components/base/themeText'; 5 6import {qualityKeys, qualityText} from '@/utils/qualities'; 7import {sizeFormatter} from '@/utils/fileUtils'; 8import {useSafeAreaInsets} from 'react-native-safe-area-context'; 9import PanelBase from '../base/panelBase'; 10import {ScrollView} from 'react-native-gesture-handler'; 11import {hidePanel} from '../usePanel'; 12import Divider from '@/components/base/divider'; 13import PanelHeader from '../base/panelHeader'; 14 15interface IMusicQualityProps { 16 type?: 'play' | 'download'; 17 /** 歌曲信息 */ 18 musicItem: IMusic.IMusicItem; 19 /** 点击回调 */ 20 onQualityPress: ( 21 quality: IMusic.IQualityKey, 22 musicItem: IMusic.IMusicItem, 23 ) => void; 24} 25 26export default function MusicQuality(props: IMusicQualityProps) { 27 const safeAreaInsets = useSafeAreaInsets(); 28 29 const {musicItem, onQualityPress, type = 'play'} = props ?? {}; 30 31 return ( 32 <PanelBase 33 height={rpx(520)} 34 renderBody={() => ( 35 <> 36 <PanelHeader 37 title={`设置${type === 'play' ? '播放' : '下载'}音质`} 38 hideButtons 39 /> 40 <Divider /> 41 42 <ScrollView 43 style={[ 44 style.body, 45 { 46 marginBottom: safeAreaInsets.bottom, 47 }, 48 ]}> 49 {qualityKeys.map(key => { 50 return ( 51 <Fragment key={`frag-${key}`}> 52 <Pressable 53 key={`btn-${key}`} 54 style={style.item} 55 onPress={() => { 56 onQualityPress(key, musicItem); 57 hidePanel(); 58 }}> 59 <ThemeText> 60 {qualityText[key]}{' '} 61 {musicItem.qualities?.[key]?.size 62 ? `(${sizeFormatter( 63 musicItem.qualities[key] 64 .size!, 65 )})` 66 : ''} 67 </ThemeText> 68 </Pressable> 69 </Fragment> 70 ); 71 })} 72 </ScrollView> 73 </> 74 )} 75 /> 76 ); 77} 78 79const style = StyleSheet.create({ 80 header: { 81 width: rpx(750), 82 flexDirection: 'row', 83 padding: rpx(24), 84 }, 85 body: { 86 flex: 1, 87 paddingHorizontal: rpx(24), 88 }, 89 item: { 90 height: rpx(96), 91 justifyContent: 'center', 92 }, 93}); 94