feat: add background video preset (#607)

2026-08-16 02:45:09 +00:00 · 2026-02-26 16:00:36 -06:00
parent 0a641e90e2
commit c2bc488366
22 changed files with 241 additions and 44 deletions
@@ -1 +1,33 @@
-// TODO: Implement BackgroundVideoSkinElement and then register it here
+import { ReactiveElement } from '@videojs/element';
+import { namedNodeMapToObject } from '@videojs/utils/dom';
+
+function getTemplateHTML(_attrs: Record<string, string>) {
+  return /*html*/ `
+    <media-container>
+      <slot name="media" slot="media"></slot>
+    </media-container>
+  `;
+}
+
+export class BackgroundVideoSkinElement extends ReactiveElement {
+  static readonly tagName = 'background-video-skin';
+  static shadowRootOptions = { mode: 'open' as ShadowRootMode };
+  static getTemplateHTML = getTemplateHTML;
+
+  constructor() {
+    super();
+
+    if (!this.shadowRoot) {
+      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);
+      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));
+    }
+  }
+}
+
+customElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;
+  }
+}