import React , { useState } from 'react' ; import './MusicCenter.scss' ; import { Link } from 'react-router-dom' ; const MusicCenter = ( props , ref ) => { const [ movex , setMovex ] = React . useState < number > ( 0 ) ; const [ moveStatus , setMoveStatus ] = React . useState < boolean > ( false ) ; const point = React . useRef ( null ) ; const progess = React . useRef ( null ) ; const audioRef = React . useRef ( null ) ; const [ currentTime , setCurrentTime ] = React . useState < number > ( 0 ) ; const [ ended , setEnded ] = React . useState < boolean > ( false ) ; const [ musicLength , setMusicLength ] = React . useState < string > ( '00:00' ) ; const [ nowLength , setNowLength ] = React . useState < string > ( '00:00' ) ; const [ getAudioContent , setAudioContent ] = useState < AudioContext > ( new AudioContext ( ) ) ; React . useEffect ( ( ) => { setTimeout ( ( ) => { if ( props . audioUrl && audioRef && audioRef . current ! . duration > 0 ) { if ( toString . call ( audioRef . current ! . duration ) === "[object Number]" && audioRef . current ! . duration . toString ( ) !== "NaN" ) { setMusicLength ( getMusictime ( audioRef . current ! . duration ) ) ; audioRef . current ! . volume = 0.5 ; } } } , 200 ) ; document . addEventListener ( 'mouseup' , docMove ) ; progess . current ! . onmousemove = null ; return ( ) => document . removeEventListener ( 'mouseup' , docMove ) ; } , [ moveStatus , musicLength ] ) ; function docMove ( ) { setMoveStatus ( false ) ; } React . useEffect ( ( ) => { point . current ! . onmousedown = pointDown ; audioRef . current ! . volume = props . audioVolume ; } , [ props . audioVolume ] ) ; param cur const setNowCurrentTime = ( cur ) : void => { const curSet = cur / 493 * audioRef . current ! . duration ; audioRef . current ! . currentTime = curSet ; } ; const progessDown = ( e ) => { const doc = document . getElementById ( "progess" ) ; const moveDown = e . clientX - doc . getBoundingClientRect ( ) . x ; setNowCurrentTime ( moveDown ) ; setMovex ( e . clientX - doc . getBoundingClientRect ( ) . x ) ; } ; param e const pointDown = ( e ) => { const doc = document . getElementById ( "progess" ) ; const moveDown = e . clientX - doc . getBoundingClientRect ( ) . x ; setMovex ( e . clientX - doc . getBoundingClientRect ( ) . x ) ; setNowCurrentTime ( moveDown ) ; progess . current ! . onmousemove = pointMove ; progess . current ! . onmouseup = pointUp ; } ; param e const pointMove = async ( e ) => { const doc = document . getElementById ( "progess" ) ; setMovex ( e . clientX - doc . getBoundingClientRect ( ) . x ) ; const nl = e . clientX - doc . getBoundingClientRect ( ) . x ; if ( nl < 0 ) { setMovex ( 0 ) ; } else { if ( nl > 480 ) { setMovex ( 480 ) ; } else { setMovex ( nl ) ; } } const moveDown = e . clientX - doc . getBoundingClientRect ( ) . x ; setNowCurrentTime ( moveDown ) ; } ; param e const pointUp = ( e ) => { progess . current ! . onmousemove = null ; } ; const mouseLeave = React . useCallback ( ( ) => { setMoveStatus ( false ) ; } , [ ] ) ; React . useImperativeHandle ( ref , ( ) => ( { duration : ( ) => audioRef . current ! . duration , endedMusic : ( ) => ended , getVolume : ( ) => audioRef . current ! . volume , pause : ( ) => audioRef . current ! . pause ( ) , play : ( ) => audioRef . current ! . play ( ) , timeUpdate : ( ) => currentTime , getDuration : ( ) => { setMusicLength ( getMusictime ( audioRef . current ! . duration ) ) ; } } ) ) ; const getMusictime = ( musictime ) : string => { const data = calculation ( musictime ) ; return data ; } ; param time const calculation = ( time ) : string => { const minue = Math . floor ( time / 60 ) < 1 ? '0' + Math . floor ( time / 60 ) : Math . floor ( time / 60 ) ; const secend = Math . floor ( time % 60 ) < 10 ? '0' + Math . floor ( time % 60 ) : Math . floor ( time % 60 ) ; const all = minue + ':' + secend ; return all ; } ; const timeupdate = React . useCallback ( ( ) => { setCurrentTime ( audioRef . current ! . currentTime ) ; const $length = ( ( audioRef . current ! . currentTime / audioRef . current ! . duration ) * 493 ) ; setNowLength ( calculation ( audioRef . current ! . currentTime ) ) ; setMovex ( $length ) ; } , [ currentTime , musicLength , nowLength ] ) ; const endedMusic = ( event ) => { setEnded ( true ) ; console . log ( props ) ; props . stopPlay ( ) ; } ; return ( < div className = "centerBox" > { } < div className = "musicImg" > < a href = "javscript:void(0);" style = { { background : `url(${ props . audioState . artists [ 0 ] . img1v1Url }) no-repeat` , backgroundSize : `cover` } } /> < /div> { } < div className = "progess" ref = { progess } onMouseLeave = { mouseLeave } id = "progess" onMouseDown = { progessDown } > < div className = "songMsg" > < Link to = "/" > { props . audioState . album . name } < /Link> < Link to = "/" > { props . audioState . artists [ 0 ] . name } < /Link> < /div> < div className = "progessBar" style = { { width : movex + 'px' } } > < span ref = { point } style = { { left : `${ movex - 11 }px` } } /> < /div> { } < /div> { } < div className = "time" > < em > { nowLength } < /em> < em > /{musicLength}</em > < /div> { } < div className = "audioBox" > < audio controls = { true } ref = { audioRef } id = "audio" onTimeUpdate = { timeupdate } onEnded = { endedMusic } src = { props . audioUrl } crossOrigin = "anonymous" / > < /div> < /div>); } ; const RecommendHeaderFinal = React . forwardRef ( MusicCenter ) ; export default RecommendHeaderFinal ;