custom-media-element - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

custom-media-element.js

@@ -46,3 +46,3 @@ /**
 function getAudioTemplateHTML(attrs) {
-  return /*html*/`
+  return /*html*/ `
     <style>
@@ -71,3 +71,3 @@ :host {
 function getVideoTemplateHTML(attrs) {
-  return /*html*/`
+  return /*html*/ `
     <style>
@@ -104,3 +104,2 @@ :host {
 export const CustomMediaMixin = (superclass, { tag, is }) => {
-
   // `is` makes it possible to extend a custom built-in. e.g. castable-video
@@ -215,2 +214,3 @@ const nativeElTest = globalThis.document?.createElement?.(tag, { is });
     #childMap = new Map();
+    #childObserver;
 
@@ -228,6 +228,8 @@ constructor() {
       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)
+      );
     }
@@ -288,2 +290,4 @@
 
+      this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute);
+
       this.shadowRoot.addEventListener('slotchange', this);
@@ -298,3 +302,2 @@ this.#syncMediaChildren();
     handleEvent(event) {
-
       if (event.type === 'slotchange') {
@@ -320,3 +323,4 @@ this.#syncMediaChildren();
 
-      this.shadowRoot.querySelector('slot:not([name])')
+      this.shadowRoot
+        .querySelector('slot:not([name])')
         .assignedElements({ flatten: true })
@@ -332,24 +336,42 @@ .filter((el) => ['track', 'source'].includes(el.localName))
             this.#childMap.set(el, clone);
+            this.#childObserver.observe(el, { attributes: true });
           }
           this.nativeEl.append?.(clone);
-
-          // https://html.spec.whatwg.org/multipage/media.html#sourcing-out-of-band-text-tracks
-          // If there are any text tracks in the media element's list of text
-          // tracks whose text track kind is chapters or metadata that
-          // correspond to track elements with a default attribute set whose
-          // text track mode is set to disabled, then set the text track
-          // mode of all such tracks to hidden.
-          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((el) => el.remove());
+      removeNativeChildren.forEach((clone, el) => {
+        clone.remove();
+        this.#childMap.delete(el);
+      });
     }
 
+    #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) {
+      // https://html.spec.whatwg.org/multipage/media.html#sourcing-out-of-band-text-tracks
+      // If there are any text tracks in the media element's list of text
+      // tracks whose text track kind is chapters or metadata that
+      // correspond to track elements with a default attribute set whose
+      // text track mode is set to disabled, then set the text track
+      // mode of all such tracks to hidden.
+      if (
+        trackEl.localName === 'track' &&
+        trackEl.default &&
+        (trackEl.kind === 'chapters' || trackEl.kind === 'metadata') &&
+        trackEl.track.mode === 'disabled'
+      ) {
+        trackEl.track.mode = 'hidden';
+      }
+    }
+
     #upgradeProperty(prop) {
@@ -381,4 +403,5 @@ // Sets properties that are set before the custom element is upgraded.
       // They should not have any effect on the native element, it adds noise in the DOM.
-      if (!CustomMedia.observedAttributes.includes(attrName)
-        && this.constructor.observedAttributes.includes(attrName)
+      if (
+        !CustomMedia.observedAttributes.includes(attrName) &&
+        this.constructor.observedAttributes.includes(attrName)
       ) {
@@ -443,4 +466,8 @@ return;
 
-export const CustomVideoElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' });
+export const CustomVideoElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, {
+  tag: 'video',
+});
 
-export const CustomAudioElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'audio' });
+export const CustomAudioElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, {
+  tag: 'audio',
+});

package.json

 {
   "name": "custom-media-element",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "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

Improved metrics

Total package byte prevSize

20898

increased by3.5%

Lines of code

434

increased by6.63%

No dependency changes