React player HTML append to any div about react-music-player HOT 12 CLOSED

Hi~ Please reinstall [email protected] use like this

<ReactJkMusicPlayer  getContainer={()=> document.body}/>

// or

<ReactJkMusicPlayer  getContainer={()=> document.querySelector('.element')}/>

from react-music-player.

ok i'm publish a new version later . add a option getContainer support custom append root node

from react-music-player.

In previous version it was working fine, wherever i place markup <ReactJkMusicPlayer {...item.options} /> it render html on that node.

from react-music-player.

i'm sorry . i use import { createPortal } from "react-dom"; in 4.3.7 version to append document.body
because It will reduce some bugs

from react-music-player.

Hi~ Please reinstall [email protected] use like this

<ReactJkMusicPlayer  getContainer={()=> document.body}/>

// or

<ReactJkMusicPlayer  getContainer={()=> document.querySelector('.element')}/>

Use like this?
<ReactJkMusicPlayer getContainer={()=> document.querySelector('.audio-wrapper')} {...item.options} />

from react-music-player.

Options will remains same as it is?
<ReactJkMusicPlayer getContainer={()=> document.querySelector('.audio-wrapper')} {...item.options} />

from react-music-player.

yes no problem . cannot work ?

from react-music-player.

Its not working, it works only one at a time,
if i use this getContainer={()=> document.querySelector('.audio-wrapper')} then {...item.options} not getting option. vice versa.

from react-music-player.

oh sorry it works, but it does not shows timers, or seekbar and player options are not working

Reference: https://www.screencast.com/t/XqqVOzNuA

from react-music-player.

What is the item.options ?
It works in my local or live demo

so i don't know your error , can not give you help , or try

<ReactJkMusicPlayer  {...yourOptions} onAudioLoadError={(error)=> console.log(error)} /> 

from react-music-player.

Let me explain the complete scenario.
I've two player on my view and its rendering through .map function, every player have its own options, that's why i used item.options to assign every player its own options. there is no error in audio play. audio is playaing very well, but the options like seekbar not moving on audio play. timer not working.

Reference : https://www.screencast.com/t/McjkwkEFs5

Console Error: https://www.screencast.com/t/ejKxn3lFf

here is the code:
const renderMessage = (voiceMails) => {

    return voiceMails.map((item, index) => {
      
         item.options = {
            className: "audio-player",
            defaultPlayIndex: 0,
            theme: "light",                
            glassBg: false,
            defaultPosition: {},
            openText: "Open",
            closeText: "Close",
            mode: "full",
            once: true,
            autoPlay: false,
            toggleMode: false,
            showMiniModeCover: false,
            showMiniProcessBar: false,
            drag: true,
            seeked: true,
            showProgressLoadBar: false,
            showPlay: true,
            showReload: false,
            showDownload: false,
            showPlayMode: false,
            showThemeSwitch: true,
            showLyric: false,
            extendsContent: [],
            defaultVolume: 100,
            onAudioEnded(audioInfo) {
                //console.log("audio ended", audioInfo);
                readHandler(item.fromNumber, item.recordingSid)
            },
            onAudioSeeked(audioInfo) {
                console.log("audio seeked", audioInfo);
            },
            audioLists: [
                {
                    musicSrc: () => {
                        return Promise.resolve(item.recordingMp3Uri)
                    }

                },
            ]
        };


        return (
            <div className={"col-12 col-md-12 col-lg-10  col-xl-7"} key={index}>
                <div className="audio-wrap">                      
                    <div className="audio-ply"  id={"player-" + index}>
                        <ReactJkMusicPlayer  {...item.options} onAudioLoadError={(error)=> console.log(error)}  getContainer={()=> document.querySelector('#player-' + index)} />
                    </div>                                       
                </div>
            </div>
        )
    })
}

from react-music-player.

@lijinke666 any solution.

from react-music-player.