shaka-video-element 0.6.6 → 0.6.8

package/dist/shaka-video-element.js

@@ -25784,7 +25784,7 @@ var require_shaka_player_compiled = __commonJS({
   }
 });
 
-// ../custom-media-element/custom-media-element.js
+// ../custom-media-element/dist/custom-media-element.js
 var Events = [
   "abort",
   "canplay",
@@ -25871,14 +25871,14 @@ function getVideoTemplateHTML(attrs) {
   `
   );
 }
-var CustomMediaMixin = (superclass, { tag, is }) => {
+function CustomMediaMixin(superclass, { tag, is }) {
   const nativeElTest = globalThis.document?.createElement?.(tag, { is });
   const nativeElProps = nativeElTest ? getNativeElProps(nativeElTest) : [];
   return class CustomMedia extends superclass {
     static getTemplateHTML = tag.endsWith("audio") ? getAudioTemplateHTML : getVideoTemplateHTML;
     static shadowRootOptions = { mode: "open" };
     static Events = Events;
-    static #isDefined;
+    static #isDefined = false;
     static get observedAttributes() {
       CustomMedia.#define();
       const natAttrs = nativeElTest?.constructor?.observedAttributes ?? [];
@@ -25904,34 +25904,29 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
       this.#isDefined = true;
       const propsToAttrs = new Set(this.observedAttributes);
       propsToAttrs.delete("muted");
-      for (let prop of nativeElProps) {
+      for (const prop of nativeElProps) {
         if (prop in this.prototype) continue;
-        const type = typeof nativeElTest[prop];
-        if (type == "function") {
+        if (typeof nativeElTest[prop] === "function") {
           this.prototype[prop] = function(...args) {
             this.#init();
-            const fn = () => {
-              if (this.call) return this.call(prop, ...args);
-              return this.nativeEl[prop].apply(this.nativeEl, args);
-            };
-            return fn();
+            return this.nativeEl?.[prop](...args);
           };
         } else {
-          let config = {
+          const config = {
             get() {
               this.#init();
-              let attr = prop.toLowerCase();
+              const attr = prop.toLowerCase();
               if (propsToAttrs.has(attr)) {
                 const val = this.getAttribute(attr);
                 return val === null ? false : val === "" ? true : val;
               }
-              return this.get?.(prop) ?? this.nativeEl?.[prop];
+              return this.nativeEl?.[prop];
             }
           };
           if (prop !== prop.toUpperCase()) {
             config.set = function(val) {
               this.#init();
-              let attr = prop.toLowerCase();
+              const attr = prop.toLowerCase();
               if (propsToAttrs.has(attr)) {
                 if (val === true || val === false || val == null) {
                   this.toggleAttribute(attr, Boolean(val));
@@ -25940,26 +25935,27 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
                 }
                 return;
               }
-              if (this.set) {
-                this.set(prop, val);
-                return;
+              if (this.nativeEl) {
+                this.nativeEl[prop] = val;
               }
-              this.nativeEl[prop] = val;
             };
           }
           Object.defineProperty(this.prototype, prop, config);
         }
       }
     }
-    #isInit;
-    #nativeEl;
+    // Private fields
+    #isInit = false;
+    #nativeEl = null;
     #childMap = /* @__PURE__ */ new Map();
-    constructor() {
-      super();
-    }
+    #childObserver;
+    // If the custom element is defined before the custom element's HTML is parsed
+    // no attributes will be available in the constructor (construction process).
+    // Wait until initializing in the attributeChangedCallback or
+    // connectedCallback or accessing any properties.
     get nativeEl() {
       this.#init();
-      return this.#nativeEl ?? this.shadowRoot.querySelector(tag) ?? this.querySelector(":scope > [slot=media]") ?? this.querySelector(tag);
+      return this.#nativeEl ?? this.querySelector(":scope > [slot=media]") ?? this.querySelector(tag) ?? this.shadowRoot?.querySelector(tag) ?? null;
     }
     set nativeEl(val) {
       this.#nativeEl = val;
@@ -25968,7 +25964,7 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
       return this.hasAttribute("muted");
     }
     set defaultMuted(val) {
-      this.toggleAttribute("muted", Boolean(val));
+      this.toggleAttribute("muted", val);
     }
     get src() {
       return this.getAttribute("src");
@@ -25977,7 +25973,7 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
       this.setAttribute("src", `${val}`);
     }
     get preload() {
-      return this.getAttribute("preload") ?? this.nativeEl?.preload;
+      return this.getAttribute("preload") ?? this.nativeEl?.getAttribute("preload");
     }
     set preload(val) {
       this.setAttribute("preload", `${val}`);
@@ -25996,13 +25992,11 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
         this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
       }
       this.nativeEl.muted = this.hasAttribute("muted");
-      for (let prop of nativeElProps) {
-        this.#upgradeProperty(prop);
-      }
+      this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));
       this.shadowRoot.addEventListener("slotchange", this);
       this.#syncMediaChildren();
-      for (let type of this.constructor.Events) {
-        this.shadowRoot.addEventListener?.(type, this, true);
+      for (const type of this.constructor.Events) {
+        this.shadowRoot?.addEventListener(type, this.handleEvent.bind(this), true);
       }
     }
     handleEvent(event) {
@@ -26014,32 +26008,41 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
         this.dispatchEvent(new CustomEvent(event.type, { detail: event.detail }));
       }
     }
-    /**
-     * Keep some native child elements like track and source in sync.
-     * An unnamed <slot> will be filled with all of the custom element's
-     * top-level child nodes that do not have the slot attribute.
-     */
     #syncMediaChildren() {
       const removeNativeChildren = new Map(this.#childMap);
-      this.shadowRoot.querySelector("slot:not([name])").assignedElements({ flatten: true }).filter((el) => ["track", "source"].includes(el.localName)).forEach((el) => {
+      const defaultSlot = this.shadowRoot?.querySelector("slot:not([name])");
+      const mediaChildren = defaultSlot?.assignedElements({ flatten: true }).filter((el) => ["track", "source"].includes(el.localName));
+      mediaChildren.forEach((el) => {
         removeNativeChildren.delete(el);
         let clone = this.#childMap.get(el);
         if (!clone) {
           clone = el.cloneNode();
           this.#childMap.set(el, clone);
+          this.#childObserver?.observe(el, { attributes: true });
         }
-        this.nativeEl.append?.(clone);
-        if (clone.localName === "track" && clone.default && (clone.kind === "chapters" || clone.kind === "metadata") && clone.track.mode === "disabled") {
-          clone.track.mode = "hidden";
-        }
+        this.nativeEl?.append(clone);
+        this.#enableDefaultTrack(clone);
       });
-      removeNativeChildren.forEach((el) => el.remove());
+      removeNativeChildren.forEach((clone, el) => {
+        clone.remove();
+        this.#childMap.delete(el);
+      });
+    }
+    #syncMediaChildAttribute(mutations) {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes") {
+          const { target, attributeName } = mutation;
+          const clone = this.#childMap.get(target);
+          if (clone && attributeName) {
+            clone.setAttribute(attributeName, target.getAttribute(attributeName) ?? "");
+            this.#enableDefaultTrack(clone);
+          }
+        }
+      }
     }
-    #upgradeProperty(prop) {
-      if (Object.prototype.hasOwnProperty.call(this, prop)) {
-        const value = this[prop];
-        delete this[prop];
-        this[prop] = value;
+    #enableDefaultTrack(trackEl) {
+      if (trackEl && trackEl.localName === "track" && trackEl.default && (trackEl.kind === "chapters" || trackEl.kind === "metadata") && trackEl.track.mode === "disabled") {
+        trackEl.track.mode = "hidden";
       }
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -26047,52 +26050,47 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
       this.#forwardAttribute(attrName, oldValue, newValue);
     }
     #forwardAttribute(attrName, oldValue, newValue) {
-      if (["id", "class"].includes(attrName)) {
-        return;
-      }
+      if (["id", "class"].includes(attrName)) return;
       if (!CustomMedia.observedAttributes.includes(attrName) && this.constructor.observedAttributes.includes(attrName)) {
         return;
       }
       if (newValue === null) {
-        this.nativeEl.removeAttribute?.(attrName);
-      } else {
-        if (this.nativeEl.getAttribute?.(attrName) != newValue) {
-          this.nativeEl.setAttribute?.(attrName, newValue);
-        }
+        this.nativeEl?.removeAttribute(attrName);
+      } else if (this.nativeEl?.getAttribute(attrName) !== newValue) {
+        this.nativeEl?.setAttribute(attrName, newValue);
       }
     }
     connectedCallback() {
       this.#init();
     }
   };
-};
+}
 function getNativeElProps(nativeElTest) {
-  let nativeElProps = [];
+  const nativeElProps = [];
   for (let proto = Object.getPrototypeOf(nativeElTest); proto && proto !== HTMLElement.prototype; proto = Object.getPrototypeOf(proto)) {
-    nativeElProps.push(...Object.getOwnPropertyNames(proto));
+    const props = Object.getOwnPropertyNames(proto);
+    nativeElProps.push(...props);
   }
   return nativeElProps;
 }
 function serializeAttributes(attrs) {
-  let html = "";
-  for (const key in attrs) {
-    const value = attrs[key];
-    if (value === "") html += ` ${key}`;
-    else html += ` ${key}="${value}"`;
-  }
-  return html;
+  return Object.entries(attrs).map(([key, value]) => value === "" ? ` ${key}` : ` ${key}="${value}"`).join("");
 }
 function namedNodeMapToObject(namedNodeMap) {
-  let obj = {};
-  for (let attr of namedNodeMap) {
+  const obj = {};
+  for (const attr of Array.from(namedNodeMap)) {
     obj[attr.name] = attr.value;
   }
   return obj;
 }
 var CustomVideoElement = CustomMediaMixin(globalThis.HTMLElement ?? class {
-}, { tag: "video" });
+}, {
+  tag: "video"
+});
 var CustomAudioElement = CustomMediaMixin(globalThis.HTMLElement ?? class {
-}, { tag: "audio" });
+}, {
+  tag: "audio"
+});
 
 // shaka-video-element.js
 var import_shaka_player = __toESM(require_shaka_player_compiled(), 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaka-video-element",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "Custom element (web component) for Shaka Player",
   "author": "@muxinc",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "build": "run-s build:*"
   },
   "dependencies": {
-    "custom-media-element": "^1.3.2",
+    "custom-media-element": "^1.4.0",
     "shaka-player": "~4.8.4"
   },
   "devDependencies": {