xref: /MusicFree/src/components/base/playAllBar.tsx (revision 428a07232c590a64f321e5de380e0b764e4a2b5e) 
1import React from 'react';
2import {Pressable, StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {iconSizeConst} from '@/constants/uiConst';
5import MusicQueue from '@/core/musicQueue';
6import {ROUTE_PATH, useNavigate} from '@/entry/router';
7import Color from 'color';
8import {IconButton} from 'react-native-paper';
9import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
10import ThemeText from './themeText';
11import useColors from '@/hooks/useColors';
12import {showPanel} from '../panels/usePanel';
13
14interface IProps {
15    musicList: IMusic.IMusicItem[] | null;
16    sheetName?: string;
17}
18export default function (props: IProps) {
19    const {musicList, sheetName} = props;
20    const colors = useColors();
21    const navigate = useNavigate();
22
23    return (
24        <View
25            style={[
26                style.topWrapper,
27                {
28                    backgroundColor: Color(colors.primary)
29                        .alpha(0.15)
30                        .toString(),
31                },
32            ]}>
33            <Pressable
34                style={style.playAll}
35                onPress={() => {
36                    if (musicList) {
37                        MusicQueue.playWithReplaceQueue(
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            <IconButton
52                icon={'plus-box-multiple-outline'}
53                size={rpx(48)}
54                onPress={async () => {
55                    showPanel('AddToMusicSheet', {
56                        musicItem: musicList ?? [],
57                        newSheetDefaultName: sheetName,
58                    });
59                }}
60            />
61            <IconButton
62                icon="playlist-edit"
63                size={rpx(48)}
64                onPress={async () => {
65                    navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, {
66                        musicList: musicList,
67                        musicSheet: {
68                            title: sheetName,
69                        },
70                    });
71                }}
72            />
73        </View>
74    );
75}
76
77const style = StyleSheet.create({
78    /** playall */
79    topWrapper: {
80        height: rpx(72),
81        paddingHorizontal: rpx(24),
82        flexDirection: 'row',
83        alignItems: 'center',
84    },
85    playAll: {
86        flex: 1,
87        flexDirection: 'row',
88        alignItems: 'center',
89    },
90    playAllIcon: {
91        marginRight: rpx(12),
92    },
93});
94