xref: /MusicFree/src/components/base/playAllBar.tsx (revision e650bfb34226e2a09d15cbf7832c4805a87cd60e) 
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 Icon from 'react-native-vector-icons/MaterialCommunityIcons';
9import ThemeText from './themeText';
10import useColors from '@/hooks/useColors';
11import {showPanel} from '../panels/usePanel';
12import IconButton from './iconButton';
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                name={'plus-box-multiple-outline'}
53                sizeType={'normal'}
54                style={style.optionButton}
55                onPress={async () => {
56                    showPanel('AddToMusicSheet', {
57                        musicItem: musicList ?? [],
58                        newSheetDefaultName: sheetName,
59                    });
60                }}
61            />
62            <IconButton
63                name="playlist-edit"
64                sizeType={'normal'}
65                style={style.optionButton}
66                onPress={async () => {
67                    navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, {
68                        musicList: musicList,
69                        musicSheet: {
70                            title: sheetName,
71                        },
72                    });
73                }}
74            />
75        </View>
76    );
77}
78
79const style = StyleSheet.create({
80    /** playall */
81    topWrapper: {
82        height: rpx(84),
83        paddingHorizontal: rpx(24),
84        flexDirection: 'row',
85        alignItems: 'center',
86    },
87    playAll: {
88        flex: 1,
89        flexDirection: 'row',
90        alignItems: 'center',
91    },
92    playAllIcon: {
93        marginRight: rpx(12),
94    },
95    optionButton: {
96        marginLeft: rpx(36),
97    },
98});
99