xref: /MusicFree/src/pages/musicDetail/components/content/albumCover/operations.tsx (revision 5589cdf32b2bb0f641e5ac7bf1f6152cd6b9b70e) 
1import React from 'react';
2import {Image, Pressable, StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4
5import Download from '@/core/download';
6import LocalMusicSheet from '@/core/localMusicSheet';
7import {ROUTE_PATH} from '@/entry/router';
8import {ImgAsset} from '@/constants/assetsConst';
9import Toast from '@/utils/toast';
10import useOrientation from '@/hooks/useOrientation';
11import {showPanel} from '@/components/panels/usePanel';
12import TrackPlayer from '@/core/trackPlayer';
13import {iconSizeConst} from '@/constants/uiConst';
14import PersistStatus from '@/core/persistStatus';
15import HeartIcon from '../heartIcon';
16import Icon from '@/components/base/icon.tsx';
17
18export default function Operations() {
19    //briefcase-download-outline  briefcase-check-outline checkbox-marked-circle-outline
20    const musicItem = TrackPlayer.useCurrentMusic();
21    const currentQuality = TrackPlayer.useCurrentQuality();
22    const isDownloaded = LocalMusicSheet.useIsLocal(musicItem);
23
24    const rate = PersistStatus.useValue('music.rate', 100);
25    const orientation = useOrientation();
26
27    return (
28        <View
29            style={[
30                style.wrapper,
31                orientation === 'horizonal'
32                    ? {
33                          marginBottom: 0,
34                      }
35                    : null,
36            ]}>
37            <HeartIcon />
38            <Pressable
39                onPress={() => {
40                    if (!musicItem) {
41                        return;
42                    }
43                    showPanel('MusicQuality', {
44                        musicItem,
45                        async onQualityPress(quality) {
46                            const changeResult =
47                                await TrackPlayer.changeQuality(quality);
48                            if (!changeResult) {
49                                Toast.warn('当前暂无此音质音乐');
50                            }
51                        },
52                    });
53                }}>
54                <Image
55                    source={ImgAsset.quality[currentQuality]}
56                    style={style.quality}
57                />
58            </Pressable>
59            <Icon
60                name={isDownloaded ? 'check-circle-outline' : 'arrow-down-tray'}
61                size={iconSizeConst.normal}
62                color="white"
63                onPress={() => {
64                    if (musicItem && !isDownloaded) {
65                        showPanel('MusicQuality', {
66                            musicItem,
67                            async onQualityPress(quality) {
68                                Download.downloadMusic(musicItem, quality);
69                            },
70                        });
71                    }
72                }}
73            />
74            <Pressable
75                onPress={() => {
76                    if (!musicItem) {
77                        return;
78                    }
79                    showPanel('PlayRate', {
80                        async onRatePress(newRate) {
81                            if (rate !== newRate) {
82                                try {
83                                    await TrackPlayer.setRate(newRate / 100);
84                                    PersistStatus.set('music.rate', newRate);
85                                } catch {}
86                            }
87                        },
88                    });
89                }}>
90                <Image source={ImgAsset.rate[rate!]} style={style.quality} />
91            </Pressable>
92            <Icon
93                name="ellipsis-vertical"
94                size={iconSizeConst.normal}
95                color="white"
96                onPress={() => {
97                    if (musicItem) {
98                        showPanel('MusicItemOptions', {
99                            musicItem: musicItem,
100                            from: ROUTE_PATH.MUSIC_DETAIL,
101                        });
102                    }
103                }}
104            />
105        </View>
106    );
107}
108
109const style = StyleSheet.create({
110    wrapper: {
111        width: '100%',
112        height: rpx(80),
113        marginBottom: rpx(24),
114        flexDirection: 'row',
115        alignItems: 'center',
116        justifyContent: 'space-around',
117    },
118    quality: {
119        width: rpx(52),
120        height: rpx(52),
121    },
122});
123