xref: /MusicFree/src/pages/musicDetail/components/content/lyric/lyricOperations.tsx (revision 819a9075ec97c73412fbf94430d3065e57d52b4e) 
1import React from "react";
2import { StyleSheet, View } from "react-native";
3import rpx from "@/utils/rpx";
4import { iconSizeConst } from "@/constants/uiConst";
5import TranslationIcon from "@/assets/icons/translation.svg";
6import Config from "@/core/config";
7import useColors from "@/hooks/useColors";
8import LyricManager from "@/core/lyricManager";
9import Toast from "@/utils/toast";
10import { hidePanel, showPanel } from "@/components/panels/usePanel";
11import TrackPlayer from "@/core/trackPlayer";
12import MediaExtra from "@/core/mediaExtra";
13import PersistStatus from "@/core/persistStatus.ts";
14import useOrientation from "@/hooks/useOrientation";
15import HeartIcon from "../heartIcon";
16import Icon from "@/components/base/icon.tsx";
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    const orientation = useOrientation();
34
35    return (
36        <View style={styles.container}>
37            {orientation === 'vertical' ? <HeartIcon /> : null}
38            <Icon
39                name="font-size"
40                size={iconSizeConst.normal}
41                color="white"
42                onPress={() => {
43                    showPanel('SetFontSize', {
44                        defaultSelect: lyricConfig?.detailFontSize ?? 1,
45                        onSelectChange(value) {
46                            PersistStatus.set('lyric.detailFontSize', value);
47                            scrollToCurrentLrcItem();
48                        },
49                    });
50                }}
51            />
52            <Icon
53                name="arrows-left-right"
54                size={iconSizeConst.normal}
55                color="white"
56                onPress={() => {
57                    const currentMusicItem = TrackPlayer.getCurrentMusic();
58
59                    if (currentMusicItem) {
60                        showPanel('SetLyricOffset', {
61                            musicItem: currentMusicItem,
62                            onSubmit(offset) {
63                                MediaExtra.update(currentMusicItem, {
64                                    lyricOffset: offset,
65                                });
66                                LyricManager.refreshLyric();
67                                scrollToCurrentLrcItem();
68                                hidePanel();
69                            },
70                        });
71                    }
72                }}
73            />
74
75            <Icon
76                name="magnifying-glass"
77                size={iconSizeConst.normal}
78                color="white"
79                onPress={() => {
80                    const currentMusic = TrackPlayer.getCurrentMusic();
81                    if (!currentMusic) {
82                        return;
83                    }
84                    // if (
85                    //     Config.get('setting.basic.associateLyricType') ===
86                    //     'input'
87                    // ) {
88                    //     showPanel('AssociateLrc', {
89                    //         musicItem: currentMusic,
90                    //     });
91                    // } else {
92                    showPanel('SearchLrc', {
93                        musicItem: currentMusic,
94                    });
95                    // }
96                }}
97            />
98            <TranslationIcon
99                width={iconSizeConst.normal}
100                height={iconSizeConst.normal}
101                opacity={!hasTranslation ? 0.2 : showTranslation ? 1 : 0.5}
102                color={
103                    showTranslation && hasTranslation ? colors.primary : 'white'
104                }
105                // style={}
106                onPress={() => {
107                    if (!hasTranslation) {
108                        Toast.warn('当前歌曲无翻译');
109                        return;
110                    }
111
112                    PersistStatus.set(
113                        'lyric.showTranslation',
114                        !showTranslation,
115                    );
116                    scrollToCurrentLrcItem();
117                }}
118            />
119            <Icon
120                name="ellipsis-vertical"
121                size={iconSizeConst.normal}
122                color={'white'}
123                onPress={() => {
124                    const currentMusic = TrackPlayer.getCurrentMusic();
125                    if (currentMusic) {
126                        showPanel('MusicItemLyricOptions', {
127                            musicItem: currentMusic,
128                        });
129                    }
130                }}
131            />
132        </View>
133    );
134}
135
136const styles = StyleSheet.create({
137    container: {
138        height: rpx(80),
139        marginBottom: rpx(24),
140        width: '100%',
141        flexDirection: 'row',
142        alignItems: 'center',
143        justifyContent: 'space-around',
144    },
145});
146