fix(player): rework layout loading in player class constructors

CHANGELOG.md

@@ -64,6 +64,7 @@ All notable changes to this project will be documented in this file.
 - allow seeking directly to end ([20cc205](https://github.com/vidstack/player/commit/20cc2055c9a053c1118f29092943aaa4c090f1fa))
 - hls tracks not initializing correctly ([edddf3b](https://github.com/vidstack/player/commit/edddf3b90262f33f814e712f27a335eb076b6fcc))
 - hide chapters menu button when disabled ([9e96b33](https://github.com/vidstack/player/commit/9e96b33e2d966abf9e013109947da2958cb4fe3b))
+- rework layout loading in player class constructors ([9b183ac](https://github.com/vidstack/player/commit/9b183ac98291982ac0ed7cd13c986e971a4670f0))
 
 #### Player (React)
 

packages/vidstack/rollup.config.js

@@ -208,6 +208,7 @@ function defineNPMBundle({ target, type, minify }) {
         define: {
           __DEV__: !isProd && !isServer ? 'true' : 'false',
           __SERVER__: isServer ? 'true' : 'false',
+          __CDN__: MODE_CDN ? 'true' : 'false',
           __TEST__: 'false',
         },
       }),

packages/vidstack/src/global/layouts/default.ts

@@ -0,0 +1,26 @@
+import type { DefaultLayoutProps } from '../../components';
+import type { VidstackPlayerLayoutLoader } from './loader';
+
+export class VidstackPlayerLayout implements VidstackPlayerLayoutLoader {
+  constructor(readonly props?: Partial<DefaultLayoutProps>) {}
+
+  async load() {
+    await import('../../elements/bundles/player-layouts/default');
+    await import('../../elements/bundles/player-ui');
+  }
+
+  create() {
+    const layouts = [
+      document.createElement('media-audio-layout'),
+      document.createElement('media-video-layout'),
+    ];
+
+    if (this.props) {
+      for (const [prop, value] of Object.entries(this.props)) {
+        for (const el of layouts) el[prop] = value;
+      }
+    }
+
+    return layouts;
+  }
+}

packages/vidstack/src/global/layouts/loader.ts

@@ -0,0 +1,4 @@
+export interface VidstackPlayerLayoutLoader {
+  load(): void | Promise<void>;
+  create(): HTMLElement[] | Promise<HTMLElement[]>;
+}

packages/vidstack/src/global/layouts/plyr.ts

@@ -0,0 +1,22 @@
+import type { PlyrLayoutProps } from '../../components';
+import type { VidstackPlayerLayoutLoader } from './loader';
+
+export class PlyrLayout implements VidstackPlayerLayoutLoader {
+  constructor(readonly props?: Partial<PlyrLayoutProps>) {}
+
+  async load() {
+    await import('../../elements/bundles/player-layouts/plyr');
+  }
+
+  create() {
+    const layout = document.createElement('media-plyr-layout');
+
+    if (this.props) {
+      for (const [prop, value] of Object.entries(this.props)) {
+        layout[prop] = value;
+      }
+    }
+
+    return [layout];
+  }
+}

packages/vidstack/src/global/player.ts

@@ -2,10 +2,14 @@ import '../elements/bundles/player';
 
 import { isString, kebabToCamelCase } from 'maverick.js/std';
 
-import type { DefaultLayoutProps, PlyrLayoutProps } from '../components';
 import type { MediaPlayerProps, TextTrackInit } from '../core';
 import { isHTMLAudioElement, isHTMLIFrameElement, isHTMLVideoElement } from '../providers';
 import { isHTMLElement } from '../utils/dom';
+import { VidstackPlayerLayout } from './layouts/default';
+import type { VidstackPlayerLayoutLoader } from './layouts/loader';
+import { PlyrLayout } from './layouts/plyr';
+
+const LAYOUT_LOADED = Symbol();
 
 export class VidstackPlayer {
   static async create({ target, layout, tracks, ...props }: VidstackPlayerConfig) {
@@ -21,31 +25,19 @@ export class VidstackPlayer {
       throw Error(`[vidstack] target must be of type \`HTMLElement\`, found \`${typeof target}\``);
     }
 
-    const player = document.createElement('media-player'),
+    let player = document.createElement('media-player'),
       provider = document.createElement('media-provider'),
-      layouts: HTMLElement[] = [],
+      layouts: HTMLElement[] | undefined,
       isTargetContainer =
         !isHTMLAudioElement(target) && !isHTMLVideoElement(target) && !isHTMLIFrameElement(target);
 
-    if (layout?.type === 'default') {
-      await import('../elements/bundles/player-layouts/default');
-      await import('../elements/bundles/player-ui');
-
-      layouts.push(
-        document.createElement('media-video-layout'),
-        document.createElement('media-audio-layout'),
-      );
-    } else if (layout?.type === 'plyr') {
-      await import('../elements/bundles/player-layouts/plyr');
-
-      layouts.push(document.createElement('media-plyr-layout'));
-    }
-
-    if (layout && layouts.length) {
-      const { type, ...props } = layout;
-      for (const [name, value] of Object.entries(props)) {
-        for (const layout of layouts) layout[name] = value;
+    if (layout) {
+      if (!layout[LAYOUT_LOADED]) {
+        await layout.load();
+        layout[LAYOUT_LOADED] = true;
       }
+
+      layouts = await layout.create();
     }
 
     target.removeAttribute('controls');
@@ -68,9 +60,11 @@ export class VidstackPlayer {
 
       if (propName in player) {
         player.setAttribute(name, attr.value);
-      } else if (layouts.length) {
+      } else if (layouts?.length) {
         for (const layout of layouts) {
-          if (propName in layout) layout.setAttribute(name, attr.value);
+          if (propName in layout) {
+            layout.setAttribute(name, attr.value);
+          }
         }
       }
     }
@@ -85,8 +79,8 @@ export class VidstackPlayer {
 
     player.append(provider);
 
-    for (const layout of layouts) {
-      player.append(layout);
+    if (layouts) {
+      for (const layout of layouts) player.append(layout);
     }
 
     if (isTargetContainer) {
@@ -116,17 +110,16 @@ export interface VidstackPlayerConfig extends Partial<MediaPlayerProps> {
   /**
    * Specify a layout to be loaded.
    */
-  layout?: DefaultLayoutConfig | PlyrLayoutConfig;
+  layout?: VidstackPlayerLayoutLoader;
 }
 
-export interface DefaultLayoutConfig extends Partial<DefaultLayoutProps> {
-  type: 'default';
-}
+export { VidstackPlayerLayout, PlyrLayout, type VidstackPlayerLayoutLoader };
 
-export interface PlyrLayoutConfig extends Partial<PlyrLayoutProps> {
-  type: 'plyr';
-}
+if (__CDN__) {
+  (VidstackPlayer as any).Layout = {
+    Default: VidstackPlayerLayout,
+    Plyr: PlyrLayout,
+  };
 
-if (typeof window !== 'undefined') {
   (window as any).VidstackPlayer = VidstackPlayer;
 }

packages/vidstack/src/global/plyr.ts

@@ -902,6 +902,6 @@ export interface PlyrEvents
   volumechange: ME.MediaVolumeChangeEvent;
 }
 
-if (typeof window !== 'undefined') {
+if (__CDN__) {
   (window as any).Plyr = Plyr;
 }

packages/vidstack/src/globals.d.ts

@@ -5,6 +5,7 @@ declare global {
   const __DEV__: boolean;
   const __SERVER__: boolean;
   const __TEST__: boolean;
+  const __CDN__: boolean;
 }
 
 export {};