xref: /MusicFree/src/components/base/playAllBar.tsx (revision 410a159129b1f6a7a1f44fde7bfad9a46f91e161) 
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 Icon from 'react-native-vector-icons/MaterialCommunityIcons';
7import ThemeText from './themeText';
8import useColors from '@/hooks/useColors';
9import {showPanel} from '../panels/usePanel';
10import IconButton from './iconButton';
11import TrackPlayer from '@/core/trackPlayer';
12import MusicSheet from '@/core/musicSheet';
13import Toast from '@/utils/toast';
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.useSheetStarred(musicSheet);
30
31    return (
32        <View style={style.topWrapper}>
33            <Pressable
34                style={style.playAll}
35                onPress={() => {
36                    if (musicList) {
37                        TrackPlayer.playWithReplacePlayList(
38                            musicList[0],
39                            musicList,
40                        );
41                    }
42                }}>
43                <Icon
44                    name="play-circle-outline"
45                    style={style.playAllIcon}
46                    size={iconSizeConst.normal}
47                    color={colors.text}
48                />
49                <ThemeText fontWeight="bold">播放全部</ThemeText>
50            </Pressable>
51            {canStar && musicSheet ? (
52                <IconButton
53                    name={starred ? 'heart' : 'heart-outline'}
54                    sizeType={'normal'}
55                    color={starred ? '#e31639' : undefined}
56                    style={style.optionButton}
57                    onPress={async () => {
58                        if (!starred) {
59                            MusicSheet.starMusicSheet(musicSheet);
60                            Toast.success('收藏歌单成功');
61                        } else {
62                            MusicSheet.unstarMusicSheet(musicSheet);
63                            Toast.success('已取消收藏歌单');
64                        }
65                    }}
66                />
67            ) : null}
68            <IconButton
69                name={'plus-box-multiple-outline'}
70                sizeType={'normal'}
71                style={style.optionButton}
72                onPress={async () => {
73                    showPanel('AddToMusicSheet', {
74                        musicItem: musicList ?? [],
75                        newSheetDefaultName: sheetName,
76                    });
77                }}
78            />
79            <IconButton
80                name="playlist-edit"
81                sizeType={'normal'}
82                style={style.optionButton}
83                onPress={async () => {
84                    navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, {
85                        musicList: musicList,
86                        musicSheet: {
87                            title: sheetName,
88                            id: sheetId,
89                        },
90                    });
91                }}
92            />
93        </View>
94    );
95}
96
97const style = StyleSheet.create({
98    /** playall */
99    topWrapper: {
100        height: rpx(84),
101        paddingHorizontal: rpx(24),
102        flexDirection: 'row',
103        alignItems: 'center',
104    },
105    playAll: {
106        flex: 1,
107        flexDirection: 'row',
108        alignItems: 'center',
109    },
110    playAllIcon: {
111        marginRight: rpx(12),
112    },
113    optionButton: {
114        marginLeft: rpx(36),
115    },
116});
117