xref: /MusicFree/src/components/base/playAllBar.tsx (revision 835e729484c893301bf84f32a9f3586d6b19f40d) 
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 usePanel 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    const {showPanel} = usePanel();
23
24    return (
25        <View
26            style={[
27                style.topWrapper,
28                {
29                    backgroundColor: Color(colors.primary)
30                        .alpha(0.15)
31                        .toString(),
32                },
33            ]}>
34            <Pressable
35                style={style.playAll}
36                onPress={() => {
37                    if (musicList) {
38                        MusicQueue.playWithReplaceQueue(
39                            musicList[0],
40                            musicList,
41                        );
42                    }
43                }}>
44                <Icon
45                    name="play-circle-outline"
46                    style={style.playAllIcon}
47                    size={iconSizeConst.normal}
48                    color={colors.text}
49                />
50                <ThemeText fontWeight="bold">播放全部</ThemeText>
51            </Pressable>
52            <IconButton
53                icon={'plus-box-multiple-outline'}
54                size={rpx(48)}
55                onPress={async () => {
56                    showPanel('AddToMusicSheet', {
57                        musicItem: musicList ?? [],
58                        newSheetDefaultName: sheetName,
59                    });
60                }}
61            />
62            <IconButton
63                icon="playlist-edit"
64                size={rpx(48)}
65                onPress={async () => {
66                    navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, {
67                        musicList: musicList,
68                        musicSheet: {
69                            title: sheetName,
70                        },
71                    });
72                }}
73            />
74        </View>
75    );
76}
77
78const style = StyleSheet.create({
79    /** playall */
80    topWrapper: {
81        height: rpx(72),
82        paddingHorizontal: rpx(24),
83        flexDirection: 'row',
84        alignItems: 'center',
85    },
86    playAll: {
87        flex: 1,
88        flexDirection: 'row',
89        alignItems: 'center',
90    },
91    playAllIcon: {
92        marginRight: rpx(12),
93    },
94});
95