xref: /MusicFree/src/components/base/playAllBar.tsx (revision 6613e77203923e5b1742a49281bfa5de03fc1440) 
1import React from 'react';
2import {Pressable, StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {iconSizeConst} from '@/constants/uiConst';
5import {ROUTE_PATH, useNavigate} from '@/entry/router';
6import ThemeText from './themeText';
7import useColors from '@/hooks/useColors';
8import {showPanel} from '../panels/usePanel';
9import IconButton from './iconButton';
10import TrackPlayer, {MusicRepeatMode} from '@/core/trackPlayer';
11import Toast from '@/utils/toast';
12import Icon from '@/components/base/icon.tsx';
13import MusicSheet from '@/core/musicSheet';
14
15interface IProps {
16    musicList: IMusic.IMusicItem[] | null;
17    canStar?: boolean;
18    musicSheet?: IMusic.IMusicSheetItem | null;
19}
20export default function (props: IProps) {
21    const {musicList, canStar, musicSheet} = props;
22
23    const sheetName = musicSheet?.title;
24    const sheetId = musicSheet?.id;
25
26    const colors = useColors();
27    const navigate = useNavigate();
28
29    const starred = MusicSheet.useSheetIsStarred(musicSheet);
30
31    return (
32        <View style={style.topWrapper}>
33            <Pressable
34                style={style.playAll}
35                onPress={() => {
36                    if (musicList) {
37                        let defaultPlayMusic = musicList[0];
38                        if (
39                            TrackPlayer.getRepeatMode() ===
40                            MusicRepeatMode.SHUFFLE
41                        ) {
42                            defaultPlayMusic =
43                                musicList[
44                                    Math.floor(Math.random() * musicList.length)
45                                ];
46                        }
47                        TrackPlayer.playWithReplacePlayList(
48                            defaultPlayMusic,
49                            musicList,
50                        );
51                    }
52                }}>
53                <Icon
54                    name="play-circle"
55                    style={style.playAllIcon}
56                    size={iconSizeConst.normal}
57                    color={colors.text}
58                />
59                <ThemeText fontWeight="bold">播放全部</ThemeText>
60            </Pressable>
61            {canStar && musicSheet ? (
62                <IconButton
63                    name={starred ? 'heart' : 'heart-outline'}
64                    sizeType={'normal'}
65                    color={starred ? '#e31639' : undefined}
66                    style={style.optionButton}
67                    onPress={async () => {
68                        if (!starred) {
69                            MusicSheet.starMusicSheet(musicSheet);
70                            Toast.success('收藏歌单成功');
71                        } else {
72                            MusicSheet.unstarMusicSheet(musicSheet);
73                            Toast.success('已取消收藏歌单');
74                        }
75                    }}
76                />
77            ) : null}
78            <IconButton
79                name="folder-plus"
80                sizeType={'normal'}
81                style={style.optionButton}
82                onPress={async () => {
83                    showPanel('AddToMusicSheet', {
84                        musicItem: musicList ?? [],
85                        newSheetDefaultName: sheetName,
86                    });
87                }}
88            />
89            <IconButton
90                name="pencil-square"
91                sizeType={'normal'}
92                style={style.optionButton}
93                onPress={async () => {
94                    navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, {
95                        musicList: musicList,
96                        musicSheet: {
97                            title: sheetName,
98                            id: sheetId,
99                        },
100                    });
101                }}
102            />
103        </View>
104    );
105}
106
107const style = StyleSheet.create({
108    /** playall */
109    topWrapper: {
110        height: rpx(84),
111        paddingHorizontal: rpx(24),
112        flexDirection: 'row',
113        alignItems: 'center',
114    },
115    playAll: {
116        flex: 1,
117        flexDirection: 'row',
118        alignItems: 'center',
119    },
120    playAllIcon: {
121        marginRight: rpx(12),
122    },
123    optionButton: {
124        marginLeft: rpx(36),
125    },
126});
127