import ReactJkMusicPlayer , { ReactJkMusicPlayerAudioInfo , ReactJkMusicPlayerAudioListProps , ReactJkMusicPlayerCustomLocale , } from '@jeffreyca/react-jinke-music-player' ; import * as React from 'react' ; import { Badge } from 'react-bootstrap' ; import { FADE_DURATION_MS } from '../../Constants' ; import { separatorLabelMap } from '../../models/Separator' ; import { SongData } from '../../models/SongData' ; import { StaticMix } from '../../models/StaticMix' ; import { AccompShortBadge , BassBadge , DrumsBadge , OriginalBadge , VocalsBadge } from '../Badges' ; import './MusicPlayer.css' ; interface Props { songData ? : SongData ; staticMix ? : StaticMix ; getAudioInstance : ( instance : HTMLAudioElement ) => void ; onAudioPause : ( audioInfo : ReactJkMusicPlayerAudioInfo ) => void ; onAudioPlay : ( audioInfo : ReactJkMusicPlayerAudioInfo ) => void ; } /**
 * Music player component that controls audio playback. It shows up as a horizontal bar at the
 * bottom of the screen.
 */ class MusicPlayer extends React . Component < Props > { render ( ) { const { getAudioInstance , songData , staticMix , onAudioPause , onAudioPlay } = this . props ; if ( ! songData && ! staticMix ) { return null ; } let audioTitleExtra ; let audioList = [ ] ; if ( songData ) { audioTitleExtra = < OriginalBadge title = "Original" / > ; audioList = [ { name : songData . title , singer : songData . artist , musicSrc : songData . url , } , ] ; } else if ( staticMix ) { const separatorBadge = ( < Badge variant = "dark" > { separatorLabelMap [ staticMix . separator ] . replace ( / *\([^)]*\) */g , '' ) } < /Badge>); const vocalBadge = staticMix . vocals ? < VocalsBadge title = "Vocals" / > : null ; const accompBadge = staticMix . other ? < AccompShortBadge title = "Accompaniment" / > : null ; const bassBadge = staticMix . bass ? < BassBadge title = "Bass" / > : null ; const drumsBadge = staticMix . drums ? < DrumsBadge title = "Drums" / > : null ; audioTitleExtra = ( < div className = "badge-flex ml-2 mr-2" > { separatorBadge } { vocalBadge } { accompBadge } { bassBadge } { drumsBadge } < /div>); audioList = [ { name : staticMix . title , singer : staticMix . artist , musicSrc : staticMix . url , } , ] ; } return ( < ReactJkMusicPlayer audioLists = { audioList } getAudioInstance = { getAudioInstance } audioTitleExtra = { audioTitleExtra } responsive = { false } theme = "light" mode = "full" clearPriorAudioLists = { true } autoPlayInitLoadPlayList = { true } toggleMode = { false } remove = { false } drag = { false } preload = { true } autoHiddenCover = { true } showDownload = { false } showPlayMode = { false } showReload = { false } showThemeSwitch = { false } showLyric = { false } onAudioPause = { onAudioPause } onAudioPlay = { onAudioPlay } locale = { { playListsText : 'Now Playing' } as ReactJkMusicPlayerCustomLocale } spaceBar = { true } volumeFade = { { fadeIn : FADE_DURATION_MS , fadeOut : FADE_DURATION_MS } } />); } } export default MusicPlayer ;