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