import React, {Fragment, memo, useEffect, useState} from 'react'; import {Keyboard, Pressable, StyleSheet, Text, View} from 'react-native'; import rpx from '@/utils/rpx'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import MusicQueue from '@/core/musicQueue'; import {Avatar, IconButton, useTheme} from 'react-native-paper'; import {CircularProgressBase} from 'react-native-circular-progress-indicator'; import {ROUTE_PATH, useNavigate} from '@/entry/router'; import musicIsPaused from '@/utils/musicIsPaused'; import usePanel from '../panels/usePanel'; import Color from 'color'; import ThemeText from '../base/themeText'; import {ImgAsset} from '@/constants/assetsConst'; function CircularPlayBtn() { const progress = MusicQueue.useProgress(); const musicState = MusicQueue.usePlaybackState(); const {colors} = useTheme(); return ( {musicIsPaused(musicState) ? ( { await MusicQueue.play(); }} /> ) : ( { await MusicQueue.pause(); }} /> )} ); } function MusicBar() { const musicItem = MusicQueue.useCurrentMusicItem(); const [showKeyboard, setKeyboardStatus] = useState(false); const {showPanel} = usePanel(); const navigate = useNavigate(); const {colors} = useTheme(); useEffect(() => { const showSubscription = Keyboard.addListener('keyboardDidShow', () => { setKeyboardStatus(true); }); const hideSubscription = Keyboard.addListener('keyboardDidHide', () => { setKeyboardStatus(false); }); return () => { showSubscription.remove(); hideSubscription.remove(); }; }, []); return ( {musicItem && !showKeyboard && ( { navigate(ROUTE_PATH.MUSIC_DETAIL); }}> {musicItem.title} {musicItem?.artist && ( {' '} -{musicItem.artist} )} { showPanel('PlayList'); }} style={[style.actionIcon, {color: colors.text}]} /> )} ); } export default memo(MusicBar, () => true); const style = StyleSheet.create({ wrapper: { width: rpx(750), height: rpx(120), flexDirection: 'row', alignItems: 'center', paddingHorizontal: rpx(24), }, artworkWrapper: { height: rpx(120), width: rpx(120), }, textWrapper: { flexGrow: 1, maxWidth: rpx(382), }, actionGroup: { width: rpx(200), justifyContent: 'flex-end', flexDirection: 'row', alignItems: 'center', }, actionIcon: { marginLeft: rpx(36), }, });