xref: /MusicFree/src/components/base/playAllBar.tsx (revision a1a3043d335c4d94b31c3f4e4454d57a12f8f0b1) 
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 Icon from 'react-native-vector-icons/MaterialCommunityIcons';
8import ThemeText from './themeText';
9import useColors from '@/hooks/useColors';
10import {showPanel} from '../panels/usePanel';
11import IconButton from './iconButton';
12
13interface IProps {
14    musicList: IMusic.IMusicItem[] | null;
15    sheetName?: string;
16    sheetId?: string;
17}
18export default function (props: IProps) {
19    const {musicList, sheetName, sheetId} = props;
20    const colors = useColors();
21    const navigate = useNavigate();
22
23    return (
24        <View style={style.topWrapper}>
25            <Pressable
26                style={style.playAll}
27                onPress={() => {
28                    if (musicList) {
29                        MusicQueue.playWithReplaceQueue(
30                            musicList[0],
31                            musicList,
32                        );
33                    }
34                }}>
35                <Icon
36                    name="play-circle-outline"
37                    style={style.playAllIcon}
38                    size={iconSizeConst.normal}
39                    color={colors.text}
40                />
41                <ThemeText fontWeight="bold">播放全部</ThemeText>
42            </Pressable>
43            <IconButton
44                name={'plus-box-multiple-outline'}
45                sizeType={'normal'}
46                style={style.optionButton}
47                onPress={async () => {
48                    showPanel('AddToMusicSheet', {
49                        musicItem: musicList ?? [],
50                        newSheetDefaultName: sheetName,
51                    });
52                }}
53            />
54            <IconButton
55                name="playlist-edit"
56                sizeType={'normal'}
57                style={style.optionButton}
58                onPress={async () => {
59                    navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, {
60                        musicList: musicList,
61                        musicSheet: {
62                            title: sheetName,
63                            id: sheetId,
64                        },
65                    });
66                }}
67            />
68        </View>
69    );
70}
71
72const style = StyleSheet.create({
73    /** playall */
74    topWrapper: {
75        height: rpx(84),
76        paddingHorizontal: rpx(24),
77        flexDirection: 'row',
78        alignItems: 'center',
79    },
80    playAll: {
81        flex: 1,
82        flexDirection: 'row',
83        alignItems: 'center',
84    },
85    playAllIcon: {
86        marginRight: rpx(12),
87    },
88    optionButton: {
89        marginLeft: rpx(36),
90    },
91});
92