xref: /MusicFree/src/components/base/playAllBar.tsx (revision 15900d057ad4df766b2f9ea5b48f92a8ce2664db) 
1import React from 'react';
2import {Pressable, StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {iconSizeConst} from '@/constants/uiConst';
5import {ROUTE_PATH, useNavigate} from '@/entry/router';
6import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
7import ThemeText from './themeText';
8import useColors from '@/hooks/useColors';
9import {showPanel} from '../panels/usePanel';
10import IconButton from './iconButton';
11import TrackPlayer from '@/core/trackPlayer';
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                        TrackPlayer.playWithReplacePlayList(
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