xref: /MusicFree/src/components/base/playAllBar.tsx (revision bef6dda83b032c223c1d30d583f106aaa6f87796)

import React from 'react';
import {Pressable, StyleSheet, View} from 'react-native';
import rpx from '@/utils/rpx';
import {iconSizeConst} from '@/constants/uiConst';
import {ROUTE_PATH, useNavigate} from '@/entry/router';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import ThemeText from './themeText';
import useColors from '@/hooks/useColors';
import {showPanel} from '../panels/usePanel';
import IconButton from './iconButton';
import TrackPlayer from '@/core/trackPlayer';
import MusicSheet from '@/core/musicSheet';
import Toast from '@/utils/toast';

interface IProps {
    musicList: IMusic.IMusicItem[] | null;
    canStar?: boolean;
    musicSheet?: IMusic.IMusicSheetItem | null;
}
export default function (props: IProps) {
    const {musicList, canStar, musicSheet} = props;

    const sheetName = musicSheet?.title;
    const sheetId = musicSheet?.id;

    const colors = useColors();
    const navigate = useNavigate();

    const starred = MusicSheet.useSheetStarred(musicSheet);

    return (
        <View style={style.topWrapper}>
            <Pressable
                style={style.playAll}
                onPress={() => {
                    if (musicList) {
                        TrackPlayer.playWithReplacePlayList(
                            musicList[0],
                            musicList,
                        );
                    }
                }}>
                <Icon
                    name="play-circle-outline"
                    style={style.playAllIcon}
                    size={iconSizeConst.normal}
                    color={colors.text}
                />
                <ThemeText fontWeight="bold">播放全部</ThemeText>
            </Pressable>
            {canStar && musicSheet ? (
                <IconButton
                    name={starred ? 'heart' : 'heart-outline'}
                    sizeType={'normal'}
                    color={starred ? '#e31639' : undefined}
                    style={style.optionButton}
                    onPress={async () => {
                        if (!starred) {
                            MusicSheet.starMusicSheet(musicSheet);
                            Toast.success('收藏歌单成功');
                        } else {
                            MusicSheet.unstarMusicSheet(musicSheet);
                            Toast.success('已取消收藏歌单');
                        }
                    }}
                />
            ) : null}
            <IconButton
                name={'plus-box-multiple-outline'}
                sizeType={'normal'}
                style={style.optionButton}
                onPress={async () => {
                    showPanel('AddToMusicSheet', {
                        musicItem: musicList ?? [],
                        newSheetDefaultName: sheetName,
                    });
                }}
            />
            <IconButton
                name="playlist-edit"
                sizeType={'normal'}
                style={style.optionButton}
                onPress={async () => {
                    navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, {
                        musicList: musicList,
                        musicSheet: {
                            title: sheetName,
                            id: sheetId,
                        },
                    });
                }}
            />
        </View>
    );
}

const style = StyleSheet.create({
    /** playall */
    topWrapper: {
        height: rpx(84),
        paddingHorizontal: rpx(24),
        flexDirection: 'row',
        alignItems: 'center',
    },
    playAll: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    playAllIcon: {
        marginRight: rpx(12),
    },
    optionButton: {
        marginLeft: rpx(36),
    },
});