shaka-video-element 0.6.6 → 0.6.7

package/dist/shaka-video-element.js

@@ -25954,12 +25954,13 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
     #isInit;
     #nativeEl;
     #childMap = /* @__PURE__ */ new Map();
+    #childObserver;
     constructor() {
       super();
     }
     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);
     }
     set nativeEl(val) {
       this.#nativeEl = val;
@@ -25999,6 +26000,7 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
       for (let prop of nativeElProps) {
         this.#upgradeProperty(prop);
       }
+      this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute);
       this.shadowRoot.addEventListener("slotchange", this);
       this.#syncMediaChildren();
       for (let type of this.constructor.Events) {
@@ -26027,13 +26029,30 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
         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.#enableDefaultTrack(clone);
+      });
+      removeNativeChildren.forEach((clone, el) => {
+        clone.remove();
+        this.#childMap.delete(el);
       });
-      removeNativeChildren.forEach((el) => el.remove());
+    }
+    #syncMediaChildAttribute = (mutations) => {
+      for (let mutation of mutations) {
+        if (mutation.type === "attributes") {
+          const { target, attributeName } = mutation;
+          const clone = this.#childMap.get(target);
+          clone?.setAttribute(attributeName, target.getAttribute(attributeName));
+          this.#enableDefaultTrack(clone);
+        }
+      }
+    };
+    #enableDefaultTrack(trackEl) {
+      if (trackEl.localName === "track" && trackEl.default && (trackEl.kind === "chapters" || trackEl.kind === "metadata") && trackEl.track.mode === "disabled") {
+        trackEl.track.mode = "hidden";
+      }
     }
     #upgradeProperty(prop) {
       if (Object.prototype.hasOwnProperty.call(this, prop)) {
@@ -26090,9 +26109,13 @@ function namedNodeMapToObject(namedNodeMap) {
   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.7",
   "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.3.3",
     "shaka-player": "~4.8.4"
   },
   "devDependencies": {