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