fix: add easier way to set hls.js config

packages/hls-video-element/hls-video-element.d.ts

@@ -1,5 +1,6 @@
 import { CustomVideoElement } from 'custom-media-element';
 import Hls from 'hls.js';
+import { HlsConfig } from 'hls.js';
 
 type Constructor<T> = {
   new (...args: any[]): T;
@@ -9,7 +10,7 @@ export function HlsVideoMixin<T extends Constructor<HTMLElement>>(superclass: T)
 
 export class HlsVideoElement extends CustomVideoElement {
   /**
-   * The current instance of the HLS.js library.
+   * The current instance of the hls.js library.
    *
    * @example
    * ```js
@@ -19,6 +20,11 @@ export class HlsVideoElement extends CustomVideoElement {
    */
   api: Hls | null;
 
+  /**
+   * The configuration object for the hls.js instance.
+   */
+  config: Partial<HlsConfig> | null;
+
   /**
    * Fires when attributes are changed on the custom element.
    */

packages/hls-video-element/hls-video-element.js

@@ -12,6 +12,20 @@ const HlsVideoMixin = (superclass) => {
     };
 
     #airplaySourceEl = null;
+    #config = null;
+
+    constructor() {
+      super();
+      this.#upgradeProperty('config');
+    }
+
+    get config() {
+      return this.#config;
+    }
+
+    set config(value) {
+      this.#config = value;
+    }
 
     attributeChangedCallback(attrName, oldValue, newValue) {
       if (attrName !== 'src') {
@@ -52,6 +66,8 @@ const HlsVideoMixin = (superclass) => {
           liveDurationInfinity: true,
           // Disable auto quality level/fragment loading.
           autoStartLoad: false,
+          // Custom configuration for hls.js.
+          ...this.config,
         });
 
         // Wait 1 tick to allow other attributes to be set.
@@ -249,6 +265,19 @@ const HlsVideoMixin = (superclass) => {
         this.api?.startLoad();
       }
     };
+
+    // This is a pattern to update property values that are set before
+    // the custom element is upgraded.
+    // https://web.dev/custom-elements-best-practices/#make-properties-lazy
+    #upgradeProperty(prop) {
+      if (Object.prototype.hasOwnProperty.call(this, prop)) {
+        const value = this[prop];
+        // Delete the set property from this instance.
+        delete this[prop];
+        // Set the value again via the (prototype) setter on this class.
+        this[prop] = value;
+      }
+    }
   };
 };
 

packages/hls-video-element/index.html

@@ -27,7 +27,6 @@
     }
   </style>
 
-  <script async src="https://cdn.jsdelivr.net/npm/es-module-shims"></script>
   <script type="importmap">
     {
       "imports": {
@@ -53,6 +52,13 @@ <h2>On-demand</h2>
     playsinline
   ></hls-video>
 
+  <script>
+    // Test setting config before custom element upgrade (upgradeProperty)
+    // myVideo.config = {
+    //   debug: true,
+    // };
+  </script>
+
   <br>
 
   <nav>
@@ -112,6 +118,9 @@ <h2>On-demand</h2>
     });
 
     loadbtn.onclick = () => {
+      myVideo.config = {
+        debug: true,
+      };
       myVideo.src = 'https://stream.mux.com/1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM.m3u8';
     };