fix(player): load poster element in js player create

vidstack · Mar 26, 2024 · 2c56c58 · 2c56c58
1 parent aa46aae
commit 2c56c58
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/packages/vidstack/src/global/layouts/default.ts b/packages/vidstack/src/global/layouts/default.ts
@@ -4,6 +4,8 @@ import type { VidstackPlayerLayoutLoader } from './loader';
 export class VidstackPlayerLayout implements VidstackPlayerLayoutLoader {
   constructor(readonly props?: Partial<DefaultLayoutProps>) {}
 
+  readonly name = 'vidstack';
+
   async load() {
     await import('../../elements/bundles/player-layouts/default');
     await import('../../elements/bundles/player-ui');

diff --git a/packages/vidstack/src/global/layouts/loader.ts b/packages/vidstack/src/global/layouts/loader.ts
@@ -1,4 +1,5 @@
 export interface VidstackPlayerLayoutLoader {
+  readonly name: string;
   load(): void | Promise<void>;
   create(): HTMLElement[] | Promise<HTMLElement[]>;
 }
diff --git a/packages/vidstack/src/global/layouts/plyr.ts b/packages/vidstack/src/global/layouts/plyr.ts
@@ -4,6 +4,8 @@ import type { VidstackPlayerLayoutLoader } from './loader';
 export class PlyrLayout implements VidstackPlayerLayoutLoader {
   constructor(readonly props?: Partial<PlyrLayoutProps>) {}
 
+  readonly name = 'plyr';
+
   async load() {
     await import('../../elements/bundles/player-layouts/plyr');
   }

diff --git a/packages/vidstack/src/global/player.ts b/packages/vidstack/src/global/player.ts
@@ -1,5 +1,6 @@
 import '../elements/bundles/player';
 
+import { defineCustomElement } from 'maverick.js/element';
 import { isString, kebabToCamelCase } from 'maverick.js/std';
 
 import type { MediaPlayerProps, TextTrackInit } from '../core';
@@ -33,6 +34,17 @@ export class VidstackPlayer {
 
     player.setAttribute('keep-alive', '');
 
+    if (props.poster && layout?.name !== 'plyr') {
+      if (!customElements.get('media-poster')) {
+        const { MediaPosterElement } = await import('../elements/define/poster-element');
+        defineCustomElement(MediaPosterElement);
+      }
+
+      const poster = document.createElement('media-poster');
+      if (layout?.name === 'default') poster.classList.add('vds-poster');
+      provider.append(poster);
+    }
+
     if (layout) {
       if (!layout[LAYOUT_LOADED]) {
         await layout.load();