shaka-video-element 0.6.8 → 0.6.9

package/dist/shaka-video-element.js

@@ -25909,7 +25909,12 @@ function CustomMediaMixin(superclass, { tag, is }) {
         if (typeof nativeElTest[prop] === "function") {
           this.prototype[prop] = function(...args) {
             this.#init();
-            return this.nativeEl?.[prop](...args);
+            const fn = () => {
+              if (this.call) return this.call(prop, ...args);
+              const nativeFn = this.nativeEl?.[prop];
+              return nativeFn?.apply(this.nativeEl, args);
+            };
+            return fn();
           };
         } else {
           const config = {
@@ -25920,7 +25925,7 @@ function CustomMediaMixin(superclass, { tag, is }) {
                 const val = this.getAttribute(attr);
                 return val === null ? false : val === "" ? true : val;
               }
-              return this.nativeEl?.[prop];
+              return this.get?.(prop) ?? this.nativeEl?.[prop];
             }
           };
           if (prop !== prop.toUpperCase()) {
@@ -25935,6 +25940,10 @@ function CustomMediaMixin(superclass, { tag, is }) {
                 }
                 return;
               }
+              if (this.set) {
+                this.set(prop, val);
+                return;
+              }
               if (this.nativeEl) {
                 this.nativeEl[prop] = val;
               }
@@ -25949,6 +25958,9 @@ function CustomMediaMixin(superclass, { tag, is }) {
     #nativeEl = null;
     #childMap = /* @__PURE__ */ new Map();
     #childObserver;
+    get;
+    set;
+    call;
     // 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
@@ -25973,7 +25985,7 @@ function CustomMediaMixin(superclass, { tag, is }) {
       this.setAttribute("src", `${val}`);
     }
     get preload() {
-      return this.getAttribute("preload") ?? this.nativeEl?.getAttribute("preload");
+      return this.getAttribute("preload") ?? this.nativeEl?.preload;
     }
     set preload(val) {
       this.setAttribute("preload", `${val}`);
@@ -25992,11 +26004,14 @@ function CustomMediaMixin(superclass, { tag, is }) {
         this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
       }
       this.nativeEl.muted = this.hasAttribute("muted");
+      for (const prop of nativeElProps) {
+        this.#upgradeProperty(prop);
+      }
       this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));
       this.shadowRoot.addEventListener("slotchange", this);
       this.#syncMediaChildren();
       for (const type of this.constructor.Events) {
-        this.shadowRoot?.addEventListener(type, this.handleEvent.bind(this), true);
+        this.shadowRoot?.addEventListener(type, this, true);
       }
     }
     handleEvent(event) {
@@ -26045,6 +26060,13 @@ function CustomMediaMixin(superclass, { tag, is }) {
         trackEl.track.mode = "hidden";
       }
     }
+    #upgradeProperty(prop) {
+      if (Object.prototype.hasOwnProperty.call(this, prop)) {
+        const value = this[prop];
+        delete this[prop];
+        this[prop] = value;
+      }
+    }
     attributeChangedCallback(attrName, oldValue, newValue) {
       this.#init();
       this.#forwardAttribute(attrName, oldValue, newValue);
@@ -26074,11 +26096,17 @@ function getNativeElProps(nativeElTest) {
   return nativeElProps;
 }
 function serializeAttributes(attrs) {
-  return Object.entries(attrs).map(([key, value]) => value === "" ? ` ${key}` : ` ${key}="${value}"`).join("");
+  let html = "";
+  for (const key in attrs) {
+    const value = attrs[key];
+    if (value === "") html += ` ${key}`;
+    else html += ` ${key}="${value}"`;
+  }
+  return html;
 }
 function namedNodeMapToObject(namedNodeMap) {
   const obj = {};
-  for (const attr of Array.from(namedNodeMap)) {
+  for (const attr of namedNodeMap) {
     obj[attr.name] = attr.value;
   }
   return obj;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaka-video-element",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "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.4.0",
+    "custom-media-element": "^1.4.1",
     "shaka-player": "~4.8.4"
   },
   "devDependencies": {