From 2c56c58c7d0d829d98309bcc35b508be49209692 Mon Sep 17 00:00:00 2001
From: Rahim Alwer <rahim.alwer@gmail.com>
Date: Tue, 26 Mar 2024 15:38:52 +1100
Subject: [PATCH] fix(player): load poster element in js player create

---
 packages/vidstack/src/global/layouts/default.ts |  2 ++
 packages/vidstack/src/global/layouts/loader.ts  |  1 +
 packages/vidstack/src/global/layouts/plyr.ts    |  2 ++
 packages/vidstack/src/global/player.ts          | 12 ++++++++++++
 4 files changed, 17 insertions(+)

diff --git a/packages/vidstack/src/global/layouts/default.ts b/packages/vidstack/src/global/layouts/default.ts
index d2d2569c6..29e363cb3 100644
--- 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
index 9e5f2fc19..51cbe9220 100644
--- 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
index c79a65316..c24760210 100644
--- 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
index da7789d84..9443a9b9d 100644
--- 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();