How can I use the <media-theme> element?

[endymion1818]

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

[luwes]

Thanks for the interest and question!

We might have to document this better. The media-theme element requires an explicit import because it adds a few kBs.

This should do it https://codesandbox.io/p/devbox/media-chrome-theme-element-rsnmtt

Hope this helps!

[endymion1818]

Thanks for the reply @luwes, unfortunately I can't view that DevBox, could you let me know what I should import? Thanks!

[endymion1818]

Actually I found this example to crib from:

media-chrome/docs/src/pages/docs/en/themes/share.md

Line 19 in 3e7b0e1

// media-theme-tiny.js

[endymion1818]

For anyone else searching for this, the solution is to define a template, importing MediaThemeElement from media-chrome

import { MediaThemeElement } from "media-chrome/dist/media-theme-element";

const template = document.createElement("template");

template.innerHTML = `
    <media-controller>
    <slot name="media" slot="media"></slot>
    <media-control-bar>
        <media-play-button></media-play-button>
    </media-control-bar>
        {{username ?? 'Unknown user'}}
    </media-controller>
`;

class TinyTheme extends MediaThemeElement {
  static template = template;
}

if (!globalThis.customElements.get("tiny-theme")) {
  globalThis.customElements.define("tiny-theme", TinyTheme);
}

export default TinyTheme;

Then implement it:

import "media-chrome";
import "./tiny-theme";

const username = "bobbytables";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <tiny-theme username="${username}" >
    <video
      slot="media"
      src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
    ></video>
  </tiny-theme>
`;

[luwes]

Updated the sandbox with an alternative way with using <media-theme>
https://codesandbox.io/p/devbox/media-chrome-theme-element-rsnmtt