xref: /MusicFree/src/pages/musicDetail/components/content/albumCover/operations.tsx (revision 756bc302d40f6f21e72cdfca8580b52a8341d658) 
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                            type: 'download',
67                            musicItem,
68                            async onQualityPress(quality) {
69                                Download.downloadMusic(musicItem, quality);
70                            },
71                        });
72                    }
73                }}
74            />
75            <Pressable
76                onPress={() => {
77                    if (!musicItem) {
78                        return;
79                    }
80                    showPanel('PlayRate', {
81                        async onRatePress(newRate) {
82                            if (rate !== newRate) {
83                                try {
84                                    await TrackPlayer.setRate(newRate / 100);
85                                    PersistStatus.set('music.rate', newRate);
86                                } catch {}
87                            }
88                        },
89                    });
90                }}>
91                <Image source={ImgAsset.rate[rate!]} style={style.quality} />
92            </Pressable>
93            <Icon
94                name="ellipsis-vertical"
95                size={iconSizeConst.normal}
96                color="white"
97                onPress={() => {
98                    if (musicItem) {
99                        showPanel('MusicItemOptions', {
100                            musicItem: musicItem,
101                            from: ROUTE_PATH.MUSIC_DETAIL,
102                        });
103                    }
104                }}
105            />
106        </View>
107    );
108}
109
110const style = StyleSheet.create({
111    wrapper: {
112        width: '100%',
113        height: rpx(80),
114        marginBottom: rpx(24),
115        flexDirection: 'row',
116        alignItems: 'center',
117        justifyContent: 'space-around',
118    },
119    quality: {
120        width: rpx(52),
121        height: rpx(52),
122    },
123});
124