xref: /MusicFree/src/pages/musicDetail/components/content/lyric/lyricOperations.tsx (revision b3fc85f367ba7edcc277793f13a2ecb206bb5a75) 
1import React from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {iconSizeConst} from '@/constants/uiConst';
5import LyricIcon from '@/assets/icons/lyric.svg';
6import TranslationIcon from '@/assets/icons/translation.svg';
7import Config from '@/core/config';
8import useColors from '@/hooks/useColors';
9import LyricManager from '@/core/lyricManager';
10import LyricUtil from '@/native/lyricUtil';
11import Toast from '@/utils/toast';
12import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
13import {hidePanel, showPanel} from '@/components/panels/usePanel';
14import TrackPlayer from '@/core/trackPlayer';
15import MediaExtra from '@/core/mediaExtra';
16import PersistStatus from '@/core/persistStatus';
17import useOrientation from '@/hooks/useOrientation';
18import HeartIcon from '../heartIcon';
19
20interface ILyricOperationsProps {
21    scrollToCurrentLrcItem: () => void;
22}
23
24export default function LyricOperations(props: ILyricOperationsProps) {
25    const {scrollToCurrentLrcItem} = props;
26
27    const lyricConfig = Config.useConfig('setting.lyric');
28
29    const hasTranslation = LyricManager.useLyricState()?.hasTranslation;
30    const showTranslation = PersistStatus.useValue(
31        'lyric.showTranslation',
32        false,
33    );
34    const colors = useColors();
35    const orientation = useOrientation();
36
37    return (
38        <View style={styles.container}>
39            {orientation === 'vertical' ? <HeartIcon /> : null}
40            <Icon
41                name="format-font-size-increase"
42                size={iconSizeConst.normal}
43                color="white"
44                onPress={() => {
45                    showPanel('SetFontSize', {
46                        defaultSelect: lyricConfig?.detailFontSize ?? 1,
47                        onSelectChange(value) {
48                            PersistStatus.set('lyric.detailFontSize', value);
49                            scrollToCurrentLrcItem();
50                        },
51                    });
52                }}
53            />
54            <Icon
55                name="arrow-left-right"
56                size={iconSizeConst.normal}
57                color="white"
58                onPress={() => {
59                    const currentMusicItem = TrackPlayer.getCurrentMusic();
60
61                    if (currentMusicItem) {
62                        showPanel('SetLyricOffset', {
63                            musicItem: currentMusicItem,
64                            onSubmit(offset) {
65                                MediaExtra.update(currentMusicItem, {
66                                    lyricOffset: offset,
67                                });
68                                LyricManager.refreshLyric();
69                                scrollToCurrentLrcItem();
70                                hidePanel();
71                            },
72                        });
73                    }
74                }}
75            />
76
77            <Icon
78                name="magnify"
79                size={iconSizeConst.normal}
80                color="white"
81                onPress={() => {
82                    const currentMusic = TrackPlayer.getCurrentMusic();
83                    if (!currentMusic) {
84                        return;
85                    }
86                    // if (
87                    //     Config.get('setting.basic.associateLyricType') ===
88                    //     'input'
89                    // ) {
90                    //     showPanel('AssociateLrc', {
91                    //         musicItem: currentMusic,
92                    //     });
93                    // } else {
94                    showPanel('SearchLrc', {
95                        musicItem: currentMusic,
96                    });
97                    // }
98                }}
99            />
100            <LyricIcon
101                onPress={async () => {
102                    if (!lyricConfig?.showStatusBarLyric) {
103                        const hasPermission =
104                            await LyricUtil.checkSystemAlertPermission();
105
106                        if (hasPermission) {
107                            LyricUtil.showStatusBarLyric(
108                                LyricManager.getCurrentLyric()?.lrc ??
109                                    'MusicFree',
110                                Config.get('setting.lyric') ?? {},
111                            );
112                            Config.set(
113                                'setting.lyric.showStatusBarLyric',
114                                true,
115                            );
116                        } else {
117                            LyricUtil.requestSystemAlertPermission().finally(
118                                () => {
119                                    Toast.warn(
120                                        '开启桌面歌词失败，无悬浮窗权限',
121                                    );
122                                },
123                            );
124                        }
125                    } else {
126                        LyricUtil.hideStatusBarLyric();
127                        Config.set('setting.lyric.showStatusBarLyric', false);
128                    }
129                }}
130                width={iconSizeConst.normal}
131                height={iconSizeConst.normal}
132                color={
133                    lyricConfig?.showStatusBarLyric ? colors.primary : 'white'
134                }
135            />
136            <TranslationIcon
137                width={iconSizeConst.normal}
138                height={iconSizeConst.normal}
139                opacity={!hasTranslation ? 0.2 : showTranslation ? 1 : 0.5}
140                color={
141                    showTranslation && hasTranslation ? colors.primary : 'white'
142                }
143                // style={}
144                onPress={() => {
145                    if (!hasTranslation) {
146                        Toast.warn('当前歌曲无翻译');
147                        return;
148                    }
149
150                    PersistStatus.set(
151                        'lyric.showTranslation',
152                        !showTranslation,
153                    );
154                    scrollToCurrentLrcItem();
155                }}
156            />
157        </View>
158    );
159}
160
161const styles = StyleSheet.create({
162    container: {
163        height: rpx(80),
164        marginBottom: rpx(24),
165        width: '100%',
166        flexDirection: 'row',
167        alignItems: 'center',
168        justifyContent: 'space-around',
169    },
170});
171