search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.21k stars 62 forks source link

🐛 BUG: (Well, possible bug): Instantiating <media-theme> with JS does not work #794

Closed endymion1818 closed 8 months ago

endymion1818 commented 8 months ago

I've been following along with creating themes for media chrome, however it makes sense for my case to instantiate the player in JS, for example:

import "media-chrome";

document.querySelector("#app").innerHTML = `
  <div>
      <template id="tiny-theme">
      <media-controller>
        <slot name="media" slot="media"></slot>
        <media-control-bar>
          <media-play-button></media-play-button>
        </media-control-bar>
      </media-controller>
    </template>
    <media-theme template="tiny-theme">
      <video
        slot="media"
        src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
      ></video>
    </media-theme>
  </div>
`;

However it doesn't seem to work correctly. It seems to solely render the <video> tag without any chrome.

Here's a CodeSandbox demonstrating the issue