import { ITagHandler , TagNode } from '@cc98/ubb-core' ; import { IContext } from '@cc98/context' ; import React , { useRef , useEffect } from 'react' ; import { globalHistory , HistoryUnsubscribe } from '@reach/router' ; import { IMG_BASE_URL } from '@/config' ; import 'aplayer/dist/APlayer.min.css' ; const handler = { isRecursive : false , render ( node , context ) { const { title , author } = node . tagData ; return < Audio src = { node . innerText } title = { title } author = { author } / > ; } , } ; interface Props { /**
     * 音频文件地址
     */ src : string ; title : string ; author : string ; } const Audio = ( { src , title , author } ) => { const divRef = useRef < HTMLDivElement > ( null ) ; useEffect ( ( ) => { let aplayer = null ; let unsubscribe ; import ( 'aplayer' ) . then ( ( { default : APlayer } ) => { aplayer = new APlayer ( { container : divRef . current , autoplay : false , preload : 'metadata' , audio : { url : encodeURI ( src ) , name : title ? title : encodeURI ( src ) , author : author ? author : null , cover : `${ IMG_BASE_URL }/audio_cover.png` , } , } ) ; unsubscribe = globalHistory . listen ( ( ) => { aplayer && aplayer . pause ( ) ; } ) ; } ) ; return ( ) => { unsubscribe && unsubscribe ( ) ; aplayer && aplayer . destroy ( ) ; } ; } , [ ] ) ; return < div className = "aplayer" style = { { whiteSpace : 'normal' } } ref = { divRef } / > ; } ; export default handler ;