jwplayer-video-element - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/jwplayer-video-element.js

@@ -1,3 +0,3 @@
-(()=>{async function u(s,t){return t&&self[t]?self[t]:new Promise(function(o,e){let i=document.createElement("script");i.src=s,i.onload=()=>o(self[t]),i.onerror=e,document.head.appendChild(i)})}function h(s){return(...t)=>new Promise(o=>{s(...t,(...e)=>{e.length>1?o(e):o(e[0])})})}function n(){let s,t,o=new Promise(function(e,i){s=e,t=i});return o.resolve=(...e)=>(o.resolved=!0,s(...e),o),o.reject=(...e)=>(t(...e),o),o}var c=class extends HTMLElement{constructor(){super();this.ready=n()}get nativeEl(){return this.querySelector("video")}static get observedAttributes(){let t=[];Object.getOwnPropertyNames(this.prototype).forEach(e=>{let i=!1;try{typeof this.prototype[e]=="function"&&(i=!0)}catch{}!i&&e!==e.toUpperCase()&&t.push(e.toLowerCase())});let o=Object.getPrototypeOf(this).observedAttributes;return o&&(t=t.concat(o)),t}async attributeChangedCallback(t,o,e){this.ready.resolved||await this.ready;let i=Object.getOwnPropertyNames(Object.getPrototypeOf(this)),r=g(i,t),d=Object.getPrototypeOf(this.constructor).toString().indexOf("function HTMLElement")===0;r&&!d?typeof this[r]=="boolean"?e===null?this[r]=!1:this[r]=!0:this[r]=e:e===null?this.nativeEl.removeAttribute(t):["id","class"].indexOf(t)===-1&&this.nativeEl.setAttribute(t,e)}},l=[],p=document.createElement("video"),b=["webkitDisplayingFullscreen","webkitSupportsFullscreen"];for(let s=Object.getPrototypeOf(p);s&&s!==HTMLElement.prototype;s=Object.getPrototypeOf(s))Object.keys(s).forEach(t=>{b.indexOf(t)===-1&&l.push(t)});l=l.concat(Object.keys(EventTarget.prototype));l.forEach(s=>{if(typeof p[s]=="function")c.prototype[s]=async function(){return this.ready.resolved||await this.ready,this.nativeEl[s].apply(this.nativeEl,arguments)};else{let o={get(){return this.nativeEl?.[s]}};s!==s.toUpperCase()&&(o.set=async function(e){this.ready.resolved||await this.ready,this.nativeEl[s]=e}),Object.defineProperty(c.prototype,s,o)}});function g(s,t){let o=null;return s.forEach(e=>{e.toLowerCase()==t.toLowerCase()&&(o=e)}),o}var f=c;var y=document.createElement("template");y.innerHTML=`
-<style>
+(()=>{async function p(s,t){return t&&self[t]?self[t]:new Promise(function(o,e){let i=document.createElement("script");i.src=s,i.onload=()=>o(self[t]),i.onerror=e,document.head.appendChild(i)})}function h(s){return(...t)=>new Promise(o=>{s(...t,(...e)=>{e.length>1?o(e):o(e[0])})})}function n(){let s,t,o=new Promise(function(e,i){s=e,t=i});return o.resolve=(...e)=>(o.resolved=!0,s(...e),o),o.reject=(...e)=>(t(...e),o),o}var l=class extends HTMLElement{constructor(){super();this.loadComplete=n(),this.querySelectorAll(":scope > track").forEach(async e=>{this.loadComplete.resolved||await this.loadComplete,this.nativeEl?.append(e.cloneNode())});let t=async e=>{this.loadComplete.resolved||await this.loadComplete;for(let i of e)i.type==="childList"&&(i.removedNodes.forEach(r=>{this.nativeEl?.querySelector(`track[src="${r.src}"]`)?.remove()}),i.addedNodes.forEach(r=>{r.tagName==="TRACK"&&this.nativeEl?.append(r.cloneNode())}))};new MutationObserver(t).observe(this,{childList:!0,subtree:!1})}get nativeEl(){return this.querySelector("video")}static get observedAttributes(){let t=[];Object.getOwnPropertyNames(this.prototype).forEach(e=>{let i=!1;try{typeof this.prototype[e]=="function"&&(i=!0)}catch{}!i&&e!==e.toUpperCase()&&t.push(e.toLowerCase())});let o=Object.getPrototypeOf(this).observedAttributes;return o&&(t=t.concat(o)),t}async attributeChangedCallback(t,o,e){this.loadComplete.resolved||await this.loadComplete;let i=Object.getOwnPropertyNames(Object.getPrototypeOf(this)),r=b(i,t),d=Object.getPrototypeOf(this.constructor).toString().indexOf("function HTMLElement")===0;r&&!d?typeof this[r]=="boolean"?e===null?this[r]=!1:this[r]=!0:this[r]=e:e===null?this.nativeEl.removeAttribute(t):["id","class"].indexOf(t)===-1&&this.nativeEl.setAttribute(t,e)}},a=[],u=document.createElement("video"),v=["webkitDisplayingFullscreen","webkitSupportsFullscreen"];for(let s=Object.getPrototypeOf(u);s&&s!==HTMLElement.prototype;s=Object.getPrototypeOf(s))Object.keys(s).forEach(t=>{v.indexOf(t)===-1&&a.push(t)});a=a.concat(Object.keys(EventTarget.prototype));a.forEach(s=>{if(typeof u[s]=="function")l.prototype[s]=async function(){return this.loadComplete.resolved||await this.loadComplete,this.nativeEl[s].apply(this.nativeEl,arguments)};else{let o={get(){return this.nativeEl?.[s]}};s!==s.toUpperCase()&&(o.set=async function(e){this.loadComplete.resolved||await this.loadComplete,this.nativeEl[s]=e}),Object.defineProperty(l.prototype,s,o)}});function b(s,t){let o=null;return s.forEach(e=>{e.toLowerCase()==t.toLowerCase()&&(o=e)}),o}var f=l;var m=document.createElement("template");m.innerHTML=`
+<style class="jw-style">
   .jw-no-controls [class*="jw-controls"],
@@ -8,4 +8,4 @@ .jw-no-controls .jw-title {
 </style>
-<div></div>
-`;var m=document.createElement("template");m.innerHTML=`
+<div class="jwplayer"></div>
+`;var y=document.createElement("template");y.innerHTML=`
 <style>
@@ -20,3 +20,3 @@ :host {
 <slot></slot>
-`;var a=class extends f{constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.append(m.content.cloneNode(!0))}get nativeEl(){return this.querySelector(".jw-video")}async load(){this.ready=n();let t=/jwplayer\.com\/players\/(\w+)(?:-(\w+))?/i,[,o,e]=this.src.match(t),i=`https://cdn.jwplayer.com/v2/media/${o}`,r=await(await fetch(i)).json(),d=`https://content.jwplatform.com/libraries/${e}.js`,w=await u(d,"jwplayer");this.textContent="",this.append(y.content.cloneNode(!0)),this.api=w(this.querySelector("div")).setup({width:"100%",height:"100%",preload:this.getAttribute("preload")??"metadata",...r}),await h(this.api.on,this.api)("ready"),this.api.getContainer().classList.toggle("jw-no-controls",!this.controls),this.ready.resolve(),this.dispatchEvent(new Event("ready")),this.volume=1}async attributeChangedCallback(t,o,e){if(t==="src"&&e){this.load();return}switch(super.attributeChangedCallback(t,o,e),await this.ready,t){case"controls":this.api.getContainer().classList.toggle("jw-no-controls",!this.controls);break;case"muted":this.muted=this.getAttribute("muted")!=null;break}}get paused(){return this.nativeEl?.paused??!0}get src(){return this.getAttribute("src")}set src(t){this.src!=t&&this.setAttribute("src",t)}set controls(t){this.controls!=t&&(t?this.setAttribute("controls",""):this.removeAttribute("controls"))}get controls(){return this.getAttribute("controls")!=null}};window.customElements.get("jwplayer-video")||window.JWPlayerVideoElement?console.debug("JWPlayerVideoElement: <jwplayer-video> defined more than once."):(window.JWPlayerVideoElement=a,window.customElements.define("jwplayer-video",a));var C=a;})();
+`;var c=class extends f{constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.append(y.content.cloneNode(!0))}get nativeEl(){return this.querySelector(".jw-video")}async load(){this.hasLoaded&&(this.loadComplete=n()),this.hasLoaded=!0;let t=/jwplayer\.com\/players\/(\w+)(?:-(\w+))?/i,[,o,e]=this.src.match(t),i=`https://cdn.jwplayer.com/v2/media/${o}`,r=await(await fetch(i)).json(),d=`https://content.jwplatform.com/libraries/${e}.js`,w=await p(d,"jwplayer");this.querySelector(".jw-style")?.remove(),this.querySelector(".jwplayer")?.remove(),this.append(m.content.cloneNode(!0)),this.api=w(this.querySelector(".jwplayer")).setup({width:"100%",height:"100%",preload:this.getAttribute("preload")??"metadata",...r}),await h(this.api.on,this.api)("ready"),this.api.getContainer().classList.toggle("jw-no-controls",!this.controls),this.dispatchEvent(new Event("loadcomplete")),this.loadComplete.resolve(),this.volume=1}async attributeChangedCallback(t,o,e){if(t==="src"&&e){this.load();return}switch(super.attributeChangedCallback(t,o,e),await this.loadComplete,t){case"controls":this.api.getContainer().classList.toggle("jw-no-controls",!this.controls);break;case"muted":this.muted=this.getAttribute("muted")!=null;break}}get paused(){return this.nativeEl?.paused??!0}get src(){return this.getAttribute("src")}set src(t){this.src!=t&&this.setAttribute("src",t)}set controls(t){this.controls!=t&&(t?this.setAttribute("controls",""):this.removeAttribute("controls"))}get controls(){return this.getAttribute("controls")!=null}};window.customElements.get("jwplayer-video")||window.JWPlayerVideoElement?console.debug("JWPlayerVideoElement: <jwplayer-video> defined more than once."):(window.JWPlayerVideoElement=c,window.customElements.define("jwplayer-video",c));var P=c;})();
 //# sourceMappingURL=jwplayer-video-element.js.map

package.json

 {
   "name": "jwplayer-video-element",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
@@ -5,0 +5,0 @@ "description": "Custom element (web component) for the JW player.",

src/jwplayer-video-element.js

@@ -6,3 +6,3 @@ import VideoBaseElement from './video-base-element.js';
 templateLightDOM.innerHTML = `
-<style>
+<style class="jw-style">
   .jw-no-controls [class*="jw-controls"],
@@ -13,3 +13,3 @@ .jw-no-controls .jw-title {
 </style>
-<div></div>
+<div class="jwplayer"></div>
 `;
@@ -43,3 +43,4 @@
   async load() {
-    this.ready = publicPromise();
+    if (this.hasLoaded) this.loadComplete = publicPromise();
+    this.hasLoaded = true;
 
@@ -55,6 +56,7 @@ // e.g. https://cdn.jwplayer.com/players/C8YE48zj-IxzuqJ4M.html
     // Sadly the JW player setup/render will not work in the shadow DOM.
-    this.textContent = '';
+    this.querySelector('.jw-style')?.remove();
+    this.querySelector('.jwplayer')?.remove();
     this.append(templateLightDOM.content.cloneNode(true));
 
-    this.api = JW(this.querySelector('div')).setup({
+    this.api = JW(this.querySelector('.jwplayer')).setup({
       width: '100%',
@@ -70,4 +72,4 @@ height: '100%',
 
-    this.ready.resolve();
-    this.dispatchEvent(new Event('ready'));
+    this.dispatchEvent(new Event('loadcomplete'));
+    this.loadComplete.resolve();
 
@@ -78,3 +80,3 @@ this.volume = 1;
   async attributeChangedCallback(attrName, oldValue, newValue) {
-    // This is required to come before the await for resolving ready.
+    // This is required to come before the await for resolving loadComplete.
     if (attrName === 'src' && newValue) {
@@ -88,3 +90,3 @@ this.load();
     // Don't await super.attributeChangedCallback above, it would resolve later.
-    await this.ready;
+    await this.loadComplete;
 
@@ -91,0 +93,0 @@ switch (attrName) {

src/video-base-element.js

@@ -37,3 +37,32 @@ import { publicPromise } from './utils.js';
     // when the native element is available.
-    this.ready = publicPromise();
+    this.loadComplete = publicPromise();
+
+    this.querySelectorAll(':scope > track').forEach(async (track) => {
+      if (!this.loadComplete.resolved) await this.loadComplete;
+
+      this.nativeEl?.append(track.cloneNode());
+    });
+
+    // Watch for child adds/removes and update the native element if necessary
+    const mutationCallback = async (mutationsList) => {
+      if (!this.loadComplete.resolved) await this.loadComplete;
+
+      for (let mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          // Child being removed
+          mutation.removedNodes.forEach((node) => {
+            this.nativeEl?.querySelector(`track[src="${node.src}"]`)?.remove();
+          });
+
+          mutation.addedNodes.forEach((node) => {
+            if (node.tagName === 'TRACK') {
+              this.nativeEl?.append(node.cloneNode());
+            }
+          });
+        }
+      }
+    };
+
+    const observer = new MutationObserver(mutationCallback);
+    observer.observe(this, { childList: true, subtree: false });
   }
@@ -84,3 +113,3 @@
   async attributeChangedCallback(attrName, oldValue, newValue) {
-    if (!this.ready.resolved) await this.ready;
+    if (!this.loadComplete.resolved) await this.loadComplete;
 
@@ -175,3 +204,3 @@ // Find the matching prop for custom attributes
     VideoBaseElement.prototype[prop] = async function () {
-      if (!this.ready.resolved) await this.ready;
+      if (!this.loadComplete.resolved) await this.loadComplete;
       return this.nativeEl[prop].apply(this.nativeEl, arguments);
@@ -190,3 +219,3 @@ };
       config.set = async function (val) {
-        if (!this.ready.resolved) await this.ready;
+        if (!this.loadComplete.resolved) await this.loadComplete;
         this.nativeEl[prop] = val;
@@ -193,0 +222,0 @@ };

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

38024

increased by11.05%

Lines of code

387

increased by7.5%

No dependency changes