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