custom-media-element - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

dist/custom-media-element.iife.js

@@ -153,3 +153,8 @@ "use strict";
               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();
             };
@@ -165,3 +170,3 @@ } else {
                 }
-                return this.nativeEl?.[prop];
+                return this.get?.(prop) ?? this.nativeEl?.[prop];
               }
@@ -181,2 +186,6 @@ };
                 }
+                if (this.set) {
+                  this.set(prop, val);
+                  return;
+                }
                 if (this.nativeEl) {
@@ -196,2 +205,5 @@ this.nativeEl[prop] = val;
       #childObserver;
+      get;
+      set;
+      call;
       // If the custom element is defined before the custom element's HTML is parsed
@@ -221,3 +233,3 @@ // no attributes will be available in the constructor (construction process).
       get preload() {
-        return this.getAttribute("preload") ?? this.nativeEl?.getAttribute("preload");
+        return this.getAttribute("preload") ?? this.nativeEl?.preload;
       }
@@ -241,2 +253,5 @@ set preload(val) {
         this.nativeEl.muted = this.hasAttribute("muted");
+        for (const prop of nativeElProps) {
+          this.#upgradeProperty(prop);
+        }
         this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));
@@ -246,3 +261,3 @@ this.shadowRoot.addEventListener("slotchange", this);
         for (const type of this.constructor.Events) {
-          this.shadowRoot?.addEventListener(type, this.handleEvent.bind(this), true);
+          this.shadowRoot?.addEventListener(type, this, true);
         }
@@ -296,2 +311,9 @@ }
       }
+      #upgradeProperty(prop) {
+        if (Object.prototype.hasOwnProperty.call(this, prop)) {
+          const value = this[prop];
+          delete this[prop];
+          this[prop] = value;
+        }
+      }
       attributeChangedCallback(attrName, oldValue, newValue) {
@@ -326,7 +348,13 @@ this.#init();
   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;
@@ -333,0 +361,0 @@ }

dist/custom-media-element.js

@@ -125,3 +125,8 @@ const Events = [
             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();
           };
@@ -137,3 +142,3 @@ } else {
               }
-              return this.nativeEl?.[prop];
+              return this.get?.(prop) ?? this.nativeEl?.[prop];
             }
@@ -153,2 +158,6 @@ };
               }
+              if (this.set) {
+                this.set(prop, val);
+                return;
+              }
               if (this.nativeEl) {
@@ -168,2 +177,5 @@ this.nativeEl[prop] = val;
     #childObserver;
+    get;
+    set;
+    call;
     // If the custom element is defined before the custom element's HTML is parsed
@@ -193,3 +205,3 @@ // no attributes will be available in the constructor (construction process).
     get preload() {
-      return this.getAttribute("preload") ?? this.nativeEl?.getAttribute("preload");
+      return this.getAttribute("preload") ?? this.nativeEl?.preload;
     }
@@ -213,2 +225,5 @@ set preload(val) {
       this.nativeEl.muted = this.hasAttribute("muted");
+      for (const prop of nativeElProps) {
+        this.#upgradeProperty(prop);
+      }
       this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));
@@ -218,3 +233,3 @@ this.shadowRoot.addEventListener("slotchange", this);
       for (const type of this.constructor.Events) {
-        this.shadowRoot?.addEventListener(type, this.handleEvent.bind(this), true);
+        this.shadowRoot?.addEventListener(type, this, true);
       }
@@ -268,2 +283,9 @@ }
     }
+    #upgradeProperty(prop) {
+      if (Object.prototype.hasOwnProperty.call(this, prop)) {
+        const value = this[prop];
+        delete this[prop];
+        this[prop] = value;
+      }
+    }
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -298,7 +320,13 @@ this.#init();
 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;
@@ -305,0 +333,0 @@ }

package.json

 {
   "name": "custom-media-element",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A custom element for extending the native media elements (<audio> or <video>)",
@@ -5,0 +5,0 @@ "author": "@muxinc",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31642

increased by4.43%

Lines of code

764

increased by7.91%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes