Doesn't recognize media when elements are created dynamically in DOM #940
Comments
Patronics
changed the title
|
If the issue is related to the shadow dom, this pull request's commit might help resolve it? |
|
In the example code you have, it's using Otherwise, any chance you can make a code sandbox/code pen that demonstrates this? |
thanks for the suggestion, but in this case media-container was actually just a generic name for the container I was inserting elements into, as a generic example (in my actual code it has a different name, "waveform-container"). I didn't include the media-controller code in the example because it works when the media-control-bar is not created programmatically but instead preexisting in the html source, and the method of inserting it with my media is somewhat convoluted (the media element itself is inside an open shadow-dom from another project). I can try to look into creating a more minimal demonstration template. |
|
Ok cool, that'd be really helpful. This could be in the depths of the element association logic so will be hard to debug without an example. |
|
Okay, here's a pair of example source code files that demonstrate the issue. The layout of elements produced is identical, the only difference is how they're created, and whether the end-result works. The setup assumes a file named 'demoSong.mp3' in the same directory as the HTML source file. Working version: <html>
<body>
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@3/+esm"></script>
<media-controller id='mediaController' audio></media-controller>
<div id="waveform">
<!-- the waveform will be rendered here -->
</div>
<div id="new-container">
<media-control-bar mediacontroller='mediaController'>
<media-play-button></media-play-button>
<media-mute-button></media-mute-button>
<media-time-display showduration></media-time-display>
<media-volume-range></media-volume-range>
<media-time-range></media-time-range>
<media-pip-button></media-pip-button>
<media-fullscreen-button></media-fullscreen-button>
</media-control-bar>
</div>
<script type="module">
import WaveSurfer from 'https://cdn.jsdelivr.net/npm/wavesurfer.js@7/dist/wavesurfer.esm.js'
const wavesurfer = WaveSurfer.create({
container: '#waveform',
url: './demoSong.mp3',
mediaControls: false,
})
//this section is important, this allows media-chrome to recognize the wavesurfer instance, by attaching to the <audio> tag
var mediaShadowRoot=document.getElementById('waveform').getElementsByTagName('div')[0].shadowRoot;
var shadowAudioNode = mediaShadowRoot.childNodes[5]
shadowAudioNode.setAttribute('slot','media');
mediaShadowRoot.appendChild(document.getElementById('mediaController'))
mediaShadowRoot.getElementById('mediaController').appendChild(shadowAudioNode)
wavesurfer.on('interaction', () => {
wavesurfer.play()
})
</script>
</body>
</html>Broken Version: <html>
<body>
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@3/+esm"></script>
<media-controller id='mediaController' audio></media-controller>
<div id="waveform">
<!-- the waveform will be rendered here -->
</div>
<div id="new-container">
</div>
<script type="module">
import WaveSurfer from 'https://cdn.jsdelivr.net/npm/wavesurfer.js@7/dist/wavesurfer.esm.js'
const wavesurfer = WaveSurfer.create({
container: '#waveform',
url: './demoSong.mp3',
mediaControls: false,
})
//this section is important, this allows media-chrome to recognize the wavesurfer instance, by attaching to the <audio> tag
var mediaShadowRoot=document.getElementById('waveform').getElementsByTagName('div')[0].shadowRoot;
var shadowAudioNode = mediaShadowRoot.childNodes[5]
shadowAudioNode.setAttribute('slot','media');
mediaShadowRoot.appendChild(document.getElementById('mediaController'))
mediaShadowRoot.getElementById('mediaController').appendChild(shadowAudioNode)
//this section should work like in the previous example, but doesn't
const controlBarHTML = `<media-control-bar mediacontroller='mediaController'>
<media-play-button></media-play-button>
<media-mute-button></media-mute-button>
<media-time-display showduration></media-time-display>
<media-volume-range></media-volume-range>
<media-time-range></media-time-range>
<media-pip-button></media-pip-button>
<media-fullscreen-button></media-fullscreen-button>
</media-control-bar>`
document.getElementById("new-container").insertAdjacentHTML('beforeend',controlBarHTML)
wavesurfer.on('interaction', () => {
wavesurfer.play()
})
</script>
</body>
</html>Also worth noting that the same problematic behavior is observed if the media-controller element is created such as with insertAdjacentHTML or the following construction example rather than moved into place with AppendChild, as it is in the above examples. var mediaController = document.createElement("media-controller");
mediaController.id = `mediaController`
mediaController.setAttribute("audio","")
mediaShadowRoot.appendChild(mediaController)
mediaShadowRoot.getElementById(`mediaController`).appendChild(shadowAudioNode) |
if either the media-control-bar or media-controller are created dynamically with JS, such as with the code
Both the media-controller and the media-control-bar are created, but they're unable to connect to each other.
This results in very cumbersome use when handling multiple tracks that need to be independently controlled. The only workaround I've found so far is prepopulating the HTML with a bunch of identical elements in a hidden div, where each has a unique ID, and they are moved into place with the Javascript.
Also worth noting, the
<audio>tag I'm applying the media controller to is in a shadow-dom, so that may be a factor in this issue. Regardless, my workaround is functional, although impractical to scaleThe text was updated successfully, but these errors were encountered: