embetter 2.0.1 → 2.0.2

package/dist/embetter-media.js

@@ -156,8 +156,8 @@ class p {
   static buildFromText(t, i) {
     const e = t.match(this.regex)[1];
     if (e != null) {
-      const s = this.link(e), a = this.thumbnail(e);
-      i(e, s, a);
+      const a = this.link(e), s = this.thumbnail(e);
+      i(e, a, s);
     }
   }
 }
@@ -178,16 +178,16 @@ class b {
   }
   static getData(t) {
     return new Promise((i, e) => {
-      const s = `https://vimeo.com/api/v2/video/${t}.json`;
-      fetch(s).then((a) => a.json()).then((a) => i(a[0].thumbnail_large)).catch(() => i(""));
+      const a = `https://vimeo.com/api/v2/video/${t}.json`;
+      fetch(a).then((s) => s.json()).then((s) => i(s[0].thumbnail_large)).catch(() => i(""));
     });
   }
   static buildFromText(t, i) {
     const e = t.match(this.regex);
     if (e && e[1]) {
-      const s = e[1], a = this.link(s);
-      this.getData(s).then((r) => {
-        i(s, a, r);
+      const a = e[1], s = this.link(a);
+      this.getData(a).then((r) => {
+        i(a, s, r);
       });
     }
   }
@@ -213,9 +213,9 @@ class A {
   static buildFromText(t, i) {
     const e = t.match(this.regex);
     if (e && e[1]) {
-      const s = e[1], a = this.link(s);
-      this.getData(a).then((r) => {
-        i(s, a, r);
+      const a = e[1], s = this.link(a);
+      this.getData(s).then((r) => {
+        i(a, s, r);
       });
     }
   }
@@ -238,8 +238,8 @@ class g {
     t = t.split("_")[0];
     const e = t.match(this.regex);
     if (e && e[1]) {
-      const s = e[1], a = this.link(s), r = this.thumbnail(s);
-      i(s, a, r);
+      const a = e[1], s = this.link(a), r = this.thumbnail(a);
+      i(a, s, r);
     }
   }
 }
@@ -264,9 +264,9 @@ class f {
   static buildFromText(t, i) {
     const e = t.match(this.regex);
     if (e && e[1]) {
-      const s = e[1], a = this.link(s);
-      this.getData(a).then((r) => {
-        i(s, a, r);
+      const a = e[1], s = this.link(a);
+      this.getData(s).then((r) => {
+        i(a, s, r);
       });
     }
   }
@@ -276,8 +276,8 @@ class y {
   static dataAttribute = "codepen-id";
   static regex = /(?:https?:\/\/)?(?:w{3}\.)?(?:codepen\.io)\/([a-zA-Z0-9_\-%]*\/[a-zA-Z0-9_\-%]*\/[a-zA-Z0-9_\-%]*)/;
   static embed(t) {
-    const i = t.id.replace("/pen/", "/embed/"), e = i.split("/")[0], s = i.split("/")[2];
-    return `<iframe src="https://codepen.io/${i}?height=${t.h}&theme-id=0&slug-hash=${s}&default-tab=result&user=${e}" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen allow=autoplay></iframe>`;
+    const i = t.id.replace("/pen/", "/embed/"), e = i.split("/")[0], a = i.split("/")[2];
+    return `<iframe src="https://codepen.io/${i}?height=${t.h}&theme-id=0&slug-hash=${a}&default-tab=result&user=${e}" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen allow=autoplay></iframe>`;
   }
   static thumbnail(t) {
     return `https://codepen.io/${t}/image/large.png`;
@@ -288,9 +288,9 @@ class y {
   static buildFromText(t, i) {
     const e = t.match(this.regex);
     if (e && e[1]) {
-      let s = e[1].replace("/embed/", "/pen/");
-      const a = this.link(s), r = this.thumbnail(s);
-      i(s, a, r);
+      let a = e[1].replace("/embed/", "/pen/");
+      const s = this.link(a), r = this.thumbnail(a);
+      i(a, s, r);
     }
   }
 }
@@ -313,9 +313,9 @@ class w {
   static buildFromText(t, i) {
     const e = t.match(this.regex);
     if (e && e[1]) {
-      const a = `https://${e[1]}`;
-      this.getData(a).then((r) => {
-        r.id && i(r.id, a, r.thumbnail || "");
+      const s = `https://${e[1]}`;
+      this.getData(s).then((r) => {
+        r.id && i(r.id, s, r.thumbnail || "");
       });
     }
   }
@@ -334,9 +334,9 @@ class v {
     return `https://giphy.com/gifs/${t}`;
   }
   static buildFromText(t, i) {
-    const e = t.split("/"), s = e[e.length - 1], a = s.split("-"), r = a[a.length - 1];
+    const e = t.split("/"), a = e[e.length - 1], s = a.split("-"), r = s[s.length - 1];
     if (r) {
-      const o = this.link(s), n = this.thumbnail(r);
+      const o = this.link(a), n = this.thumbnail(r);
       i(r, o, n);
     }
   }
@@ -346,8 +346,8 @@ class k {
   static dataAttribute = "video-url";
   static regex = /(?:https?:\/\/)?(?:w{3}\.)?(.+\.(?:mp4|mov|m4v))(?:\/|$|\s|\?|#)/;
   static embed(t) {
-    const i = t.autoplay === !0 ? ' autoplay="true"' : "", e = t.loops === !0 ? ' loop="true"' : "", s = t.muted === !0 ? " muted" : "";
-    return `<video src="${t.id}" width="${t.w}" height="${t.h}"${i}${e}${s} controls playsinline webkitallowfullscreen mozallowfullscreen allowfullscreen></video>`;
+    const i = t.autoplay === !0 ? ' autoplay="true"' : "", e = t.loops === !0 ? ' loop="true"' : "", a = t.muted === !0 ? " muted" : "";
+    return `<video src="${t.id}" width="${t.w}" height="${t.h}"${i}${e}${a} controls playsinline webkitallowfullscreen mozallowfullscreen allowfullscreen></video>`;
   }
   static thumbnail(t) {
     return t.replace(".mp4", "-poster.jpg").replace(".mov", "-poster.jpg").replace(".m4v", "-poster.jpg");
@@ -358,8 +358,8 @@ class k {
   static buildFromText(t, i) {
     const e = t.match(this.regex);
     if (e && e[1]) {
-      const s = e[1], a = this.thumbnail(s);
-      i(s, s, a);
+      const a = e[1], s = this.thumbnail(a);
+      i(a, a, s);
     }
   }
 }
@@ -379,8 +379,8 @@ class $ {
   static buildFromText(t, i) {
     const e = t.match(this.regex);
     if (e && e[1]) {
-      const s = e[1], a = this.thumbnail(s);
-      i(s, s, a);
+      const a = e[1], s = this.thumbnail(a);
+      i(a, a, s);
     }
   }
 }
@@ -389,15 +389,15 @@ class c extends HTMLElement {
   defaultThumbnail = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAGcAQMAAAABMOGrAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURQAAAKd6PdoAAAA6SURBVHja7cGBAAAAAMOg+VPf4ARVAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAN488AAGP4e1mAAAAAElFTkSuQmCC";
   static EMBETTER_ACTIVATED = "embetter-activated";
   connectedCallback() {
-    this.shadow = this.attachShadow({ mode: "open" }), this.el = this.shadow ?? this, this.initComponent(), this.render(), this.checkThumbnail(), this.addListeners();
+    setTimeout(() => {
+      this.isConnected && (this.shadow || (this.initialHTML = this.innerHTML, this.innerHTML = "", this.shadow = this.attachShadow({ mode: "open" }), this.el = this.shadow ?? this, this.initComponent(), this.render(), this.getElements(), this.checkThumbnail()), this.addListeners());
+    }, 0);
   }
   disconnectedCallback() {
     this.unembedMedia(), this.removeAttribute("ready"), this.playButton && this.playButton.removeEventListener("click", this.clickListener), document.removeEventListener(c.EMBETTER_ACTIVATED, this.embedListener), this.observer && (this.observer.disconnect(), this.observer = null);
   }
   initComponent() {
-    this.markup = "embetter-media component not initialized properly.", this.loops = this.hasAttribute("loops"), this.muted = this.hasAttribute("muted"), this.posterURL = null;
-    const t = this.querySelector("img");
-    t && t.src && (this.posterURL = t.src), this.innerHTML = "", this.findAndActivateService();
+    this.markup = "embetter-media component not initialized properly.", this.loops = this.hasAttribute("loops"), this.muted = this.hasAttribute("muted"), this.findAndActivateService();
   }
   getElements() {
     this.thumbnail = this.el.querySelector("img");
@@ -415,30 +415,25 @@ class c extends HTMLElement {
     for (let t of d) {
       let i = t.dataAttribute;
       if (this.hasAttribute(i)) {
-        this.service = t, this.serviceType = t.type, this.serviceId = this.getAttribute(i);
-        let e = this.posterURL || t.thumbnail(this.serviceId);
-        if (this.markup = this.playerHTML(t.link(this.serviceId), e), t.getData) {
-          const s = t.link(this.serviceId);
-          t.getData(s).then((a) => {
-            const r = typeof a == "string" ? a : a?.thumbnail;
-            !e && !this.posterURL && r && this.thumbnail && (this.thumbnail.src = r);
-          });
-        }
+        this.service = t, this.serviceType = t.type, this.serviceId = this.getAttribute(i), this.markup = this.playerHTML(t.link(this.serviceId));
         break;
       }
     }
   }
+  onReady() {
+    this.removeAttribute("loading"), this.setAttribute("ready", "");
+  }
   checkThumbnail() {
-    this.thumbnail && (this.setAttribute("loading", ""), this.thumbnail.onload = () => {
-      this.removeAttribute("loading"), this.setAttribute("ready", "");
+    this.thumbnail && (this.setAttribute("loading", ""), this.thumbnail.complete ? this.onReady() : (this.thumbnail.onload = () => {
+      this.onReady();
     }, this.thumbnail.onerror = () => {
       if (this.thumbnail.src.includes("/maxresdefault.jpg")) {
         this.thumbnail.src = this.thumbnail.src.replace("/maxresdefault.jpg", "/0.jpg");
         return;
       }
-      this.thumbnail.src = this.defaultThumbnail, this.removeAttribute("loading"), this.setAttribute("ready", "");
-    }, setTimeout(() => {
-      this.thumbnail.height < 50 && (this.thumbnail.src = this.defaultThumbnail), this.removeAttribute("loading"), this.setAttribute("ready", "");
+      this.thumbnail.src = this.defaultThumbnail, this.onReady();
+    }), setTimeout(() => {
+      this.thumbnail.height < 50 && (this.thumbnail.src = this.defaultThumbnail), this.onReady();
     }, 4e3));
   }
   setupMobileObserver() {
@@ -480,23 +475,21 @@ class c extends HTMLElement {
     var i = document.createElement("div");
     return i.innerHTML = t, i.firstChild;
   }
-  static componentHTML(t, i, e = null, s = null) {
-    let a = "";
-    if (s || e) {
-      const r = s || "#", o = e ? `<img src="${e}">` : "";
-      a = `<a href="${r}">${o}</a>`;
+  static componentHTML(t, i, e = null, a = null) {
+    let s = "";
+    if (a || e) {
+      const r = a || "#", o = e ? `<img src="${e}">` : "";
+      s = `<a href="${r}">${o}</a>`;
     }
-    return `<embetter-media ${t}="${i}">${a}</embetter-media>`;
+    return `<embetter-media ${t}="${i}">${s}</embetter-media>`;
   }
-  playerHTML(t, i) {
+  playerHTML(t) {
     return (
       /* html */
       `
-      <a href="${t}">
-        <img src="${i}" />
-        <div class="embetter-loading"></div>
-        <div class="embetter-play-button"></div>
-      </a>
+      ${this.initialHTML}
+      <div class="embetter-loading"></div>
+      <div class="embetter-play-button"></div>
     `
     );
   }
@@ -510,18 +503,18 @@ class c extends HTMLElement {
     this.el.innerHTML = `
       ${this.html()}
       <style>${this.css()}</style>
-    `, this.getElements();
+    `;
   }
   static register() {
     customElements.define("embetter-media", c);
   }
   static upgradeLegacyEmbeds(t = document) {
     t.querySelectorAll(".embetter").forEach((e) => {
-      for (const s of d) {
-        const a = `data-${s.dataAttribute}`;
-        if (e.hasAttribute(a)) {
-          const r = e.getAttribute(a), o = document.createElement("embetter-media");
-          o.setAttribute(s.dataAttribute, r);
+      for (const a of d) {
+        const s = `data-${a.dataAttribute}`;
+        if (e.hasAttribute(s)) {
+          const r = e.getAttribute(s), o = document.createElement("embetter-media");
+          o.setAttribute(a.dataAttribute, r);
           const n = e.querySelector("a");
           n && o.appendChild(n.cloneNode(!0)), e.hasAttribute("data-loops") && o.setAttribute("loops", ""), e.hasAttribute("data-muted") && o.setAttribute("muted", ""), e.replaceWith(o);
           break;
@@ -531,20 +524,20 @@ class c extends HTMLElement {
   }
   static componentMarkupFromURL(t, i) {
     for (let e = 0; e < d.length; e++) {
-      const s = d[e];
-      if (t.match(s.regex) != null) {
-        s.buildFromText(t, (a, r, o) => {
+      const a = d[e];
+      if (t.match(a.regex) != null) {
+        a.buildFromText(t, (s, r, o) => {
           const n = (h) => {
             let u = c.componentHTML(
-              s.dataAttribute,
-              a,
+              a.dataAttribute,
+              s,
               h,
               r
             );
-            i(u, s);
+            i(u, a);
           };
-          if (!o && s.getData && r) {
-            s.getData(r).then((h) => {
+          if (!o && a.getData && r) {
+            a.getData(r).then((h) => {
               const u = typeof h == "string" ? h : h?.thumbnail;
               n(u || o);
             }).catch(() => n(o));

package/dist/embetter-media.umd.js

@@ -135,13 +135,11 @@
     to { transform: rotate(360deg); }
   }
 
-`;class d{static type="youtube";static dataAttribute="youtube-id";static regex=/(?:.+?)?(?:youtube\.com\/v\/|watch\/|\?v=|\&v=|youtu\.be\/|\/v=|^youtu\.be\/)([a-zA-Z0-9_-]{11})+/;static embed(t){const i=t.autoplay===!0?"&autoplay=1":"",e=t.loops===!0?`&loop=1&playlist=${t.id}`:"";return`<iframe class="video" enablejsapi="1" width="${t.w}" height="${t.h}" src="https://www.youtube.com/embed/${t.id}?rel=0&suggestedQuality=hd720&enablejsapi=1${i}${e}" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return"https://img.youtube.com/vi/"+t+"/maxresdefault.jpg"}static link(t){return"https://www.youtube.com/watch?v="+t}static buildFromText(t,i){const e=t.match(this.regex)[1];if(e!=null){const s=this.link(e),a=this.thumbnail(e);i(e,s,a)}}}class b{static type="vimeo";static dataAttribute="vimeo-id";static regex=/(?:vimeo\.com\/(?:video\/)?|player\.vimeo\.com\/video\/)(\d+)/i;static embed(t){const i=t.autoplay===!0?"&autoplay=1":"",e=t.loops===!0?"&loop=1":"";return`<iframe id="${t.id}" src="https://player.vimeo.com/video/${t.id}?title=0&byline=0&portrait=0&color=ffffff&api=1&player_id=${t.id}${i}${e}" width="${t.w}" height="${t.h}" frameborder="0" scrolling="no" webkitallowfullscreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return""}static link(t){return"https://vimeo.com/"+t}static getData(t){return new Promise((i,e)=>{const s=`https://vimeo.com/api/v2/video/${t}.json`;fetch(s).then(a=>a.json()).then(a=>i(a[0].thumbnail_large)).catch(()=>i(""))})}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const s=e[1],a=this.link(s);this.getData(s).then(r=>{i(s,a,r)})}}}class A{static type="soundcloud";static dataAttribute="soundcloud-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(?:soundcloud\.com|snd\.sc)\/([a-zA-Z0-9_-]*(?:\/sets)?(?:\/groups)?\/[a-zA-Z0-9_-]*)/;static embed(t){const i=t.autoplay===!0?"&auto_play=true":"";return`<iframe width="100%" height="600" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=${encodeURIComponent(`https://soundcloud.com/${t.id}`)}${i}&hide_related=false&color=373737&show_comments=false&show_user=true&show_reposts=false&visual=true" allow="autoplay"></iframe>`}static thumbnail(t){return""}static link(t){return`https://soundcloud.com/${t}`}static getData(t){const i=`/api/soundcloud?url=${encodeURIComponent(t)}&format=json`;return fetch(i).then(e=>e.json()).then(e=>e.thumbnail_url||"").catch(()=>"")}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const s=e[1],a=this.link(s);this.getData(a).then(r=>{i(s,a,r)})}}}class f{static type="dailymotion";static dataAttribute="dailymotion-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?dailymotion\.com\/video\/([a-zA-Z0-9-_]*)/;static embed(t){const i=t.autoplay===!0?"?autoPlay=1":"";return`<iframe class="video" width="${t.w}" height="${t.h}" src="https://www.dailymotion.com/embed/video/${t.id}${i}" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return`https://www.dailymotion.com/thumbnail/video/${t}`}static link(t){return`https://www.dailymotion.com/video/${t}`}static buildFromText(t,i){t=t.split("_")[0];const e=t.match(this.regex);if(e&&e[1]){const s=e[1],a=this.link(s),r=this.thumbnail(s);i(s,a,r)}}}class g{static type="mixcloud";static dataAttribute="mixcloud-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(?:mixcloud\.com)\/(.*\/.*)/;static embed(t){const i=t.autoplay===!0?"&autoplay=true":"";return`<iframe width="660" height="180" src="https://www.mixcloud.com/widget/iframe/?feed=${encodeURIComponent("https://www.mixcloud.com/"+t.id)}&replace=0&hide_cover=1&stylecolor=ffffff&embed_type=widget_standard${i}" frameborder="0" scrolling="no"></iframe>`}static thumbnail(t){return""}static link(t){return`https://www.mixcloud.com/${t}`}static getData(t){const i=`/api/mixcloud/?url=${encodeURIComponent(t)}&format=json`;return fetch(i).then(e=>e.json()).then(e=>e.image||"").catch(()=>"")}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const s=e[1],a=this.link(s);this.getData(a).then(r=>{i(s,a,r)})}}}class y{static type="codepen";static dataAttribute="codepen-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(?:codepen\.io)\/([a-zA-Z0-9_\-%]*\/[a-zA-Z0-9_\-%]*\/[a-zA-Z0-9_\-%]*)/;static embed(t){const i=t.id.replace("/pen/","/embed/"),e=i.split("/")[0],s=i.split("/")[2];return`<iframe src="https://codepen.io/${i}?height=${t.h}&theme-id=0&slug-hash=${s}&default-tab=result&user=${e}" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return`https://codepen.io/${t}/image/large.png`}static link(t){return`https://codepen.io/${t.replace("/embed/","/pen/")}`}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){let s=e[1].replace("/embed/","/pen/");const a=this.link(s),r=this.thumbnail(s);i(s,a,r)}}}class w{static type="bandcamp";static dataAttribute="bandcamp-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?([a-zA-Z0-9_\-]*\.bandcamp\.com\/(?:album|track)\/[a-zA-Z0-9_\-%]*)/;static embed(t){return`<iframe src="https://bandcamp.com/EmbeddedPlayer/${t.id}/size=large/bgcol=ffffff/linkcol=333333/tracklist=true/artwork=small/transparent=true/" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen seamless></iframe>`}static thumbnail(t){return""}static link(t){return t.match(/^(album|track)=/)?"":`https://${t}`}static getData(t){return fetch(`/api/bandcamp?url=${encodeURIComponent(t)}`).then(i=>i.json()).catch(()=>({id:null,thumbnail:null}))}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const a=`https://${e[1]}`;this.getData(a).then(r=>{r.id&&i(r.id,a,r.thumbnail||"")})}}}class v{static type="giphy";static dataAttribute="giphy-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?giphy\.com\/gifs\/([a-zA-Z0-9_\-%]*)/;static embed(t){return`<iframe width="${t.w}" height="${t.h}" src="https://giphy.com/embed/${t.id}/twitter/iframe" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return`https://media.giphy.com/media/${t}/giphy_s.gif`}static link(t){return`https://giphy.com/gifs/${t}`}static buildFromText(t,i){const e=t.split("/"),s=e[e.length-1],a=s.split("-"),r=a[a.length-1];if(r){const o=this.link(s),c=this.thumbnail(r);i(r,o,c)}}}class k{static type="video";static dataAttribute="video-url";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(.+\.(?:mp4|mov|m4v))(?:\/|$|\s|\?|#)/;static embed(t){const i=t.autoplay===!0?' autoplay="true"':"",e=t.loops===!0?' loop="true"':"",s=t.muted===!0?" muted":"";return`<video src="${t.id}" width="${t.w}" height="${t.h}"${i}${e}${s} controls playsinline webkitallowfullscreen mozallowfullscreen allowfullscreen></video>`}static thumbnail(t){return t.replace(".mp4","-poster.jpg").replace(".mov","-poster.jpg").replace(".m4v","-poster.jpg")}static link(t){return t}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const s=e[1],a=this.thumbnail(s);i(s,s,a)}}}class ${static type="gif";static dataAttribute="gif-url";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(.+\.gif)(?:\/|$|\s|\?|#)/;static embed(t){return`<img class="gif" src="${t.id}" width="${t.w}" height="${t.h}">`}static thumbnail(t){return t.replace(".gif","-poster.jpg")}static link(t){return t}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const s=e[1],a=this.thumbnail(s);i(s,s,a)}}}const m=[k,$,d,b,A,f,g,y,w,v];class l extends HTMLElement{defaultThumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAGcAQMAAAABMOGrAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURQAAAKd6PdoAAAA6SURBVHja7cGBAAAAAMOg+VPf4ARVAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAN488AAGP4e1mAAAAAElFTkSuQmCC";static EMBETTER_ACTIVATED="embetter-activated";connectedCallback(){this.shadow=this.attachShadow({mode:"open"}),this.el=this.shadow??this,this.initComponent(),this.render(),this.checkThumbnail(),this.addListeners()}disconnectedCallback(){this.unembedMedia(),this.removeAttribute("ready"),this.playButton&&this.playButton.removeEventListener("click",this.clickListener),document.removeEventListener(l.EMBETTER_ACTIVATED,this.embedListener),this.observer&&(this.observer.disconnect(),this.observer=null)}initComponent(){this.markup="embetter-media component not initialized properly.",this.loops=this.hasAttribute("loops"),this.muted=this.hasAttribute("muted"),this.posterURL=null;const t=this.querySelector("img");t&&t.src&&(this.posterURL=t.src),this.innerHTML="",this.findAndActivateService()}getElements(){this.thumbnail=this.el.querySelector("img")}addListeners(){this.clickListener=this.onClick.bind(this),this.playButton=this.el.querySelector(".embetter-play-button"),this.playButton&&this.playButton.addEventListener("click",this.clickListener),this.embedListener=this.onEmbedActivated.bind(this),document.addEventListener(l.EMBETTER_ACTIVATED,this.embedListener)}onClick(t){t.preventDefault(),this.embedMedia()}onEmbedActivated(t){t.detail!==this&&this.unembedMedia()}findAndActivateService(){for(let t of m){let i=t.dataAttribute;if(this.hasAttribute(i)){this.service=t,this.serviceType=t.type,this.serviceId=this.getAttribute(i);let e=this.posterURL||t.thumbnail(this.serviceId);if(this.markup=this.playerHTML(t.link(this.serviceId),e),t.getData){const s=t.link(this.serviceId);t.getData(s).then(a=>{const r=typeof a=="string"?a:a?.thumbnail;!e&&!this.posterURL&&r&&this.thumbnail&&(this.thumbnail.src=r)})}break}}}checkThumbnail(){this.thumbnail&&(this.setAttribute("loading",""),this.thumbnail.onload=()=>{this.removeAttribute("loading"),this.setAttribute("ready","")},this.thumbnail.onerror=()=>{if(this.thumbnail.src.includes("/maxresdefault.jpg")){this.thumbnail.src=this.thumbnail.src.replace("/maxresdefault.jpg","/0.jpg");return}this.thumbnail.src=this.defaultThumbnail,this.removeAttribute("loading"),this.setAttribute("ready","")},setTimeout(()=>{this.thumbnail.height<50&&(this.thumbnail.src=this.defaultThumbnail),this.removeAttribute("loading"),this.setAttribute("ready","")},4e3))}setupMobileObserver(){this.isMobile()&&(this.observer=new IntersectionObserver(t=>{t.forEach(i=>{i.isIntersecting?this.embedMedia(!1):this.unembedMedia()})},{threshold:.3}),this.observer.observe(this))}embedMedia(t){if(document.dispatchEvent(new CustomEvent(l.EMBETTER_ACTIVATED,{bubbles:!0,composed:!0,detail:this})),this.hasAttribute("playing"))return;t===void 0&&(t=this.hasAttribute("autoplay")?this.getAttribute("autoplay")!=="false":!0);let i=this.service.embed({id:this.serviceId,w:this.thumbnail&&this.thumbnail.width||"100%",h:this.thumbnail&&this.thumbnail.height||"100%",autoplay:t,loops:this.loops,muted:this.muted||t});this.playerEl=l.stringToDomElement(i),this.el.appendChild(this.playerEl),this.setAttribute("playing","")}unembedMedia(){this.playerEl!=null&&this.playerEl.parentNode!=null&&this.playerEl.parentNode.removeChild(this.playerEl),this.removeAttribute("playing")}isMobile(){return/iphone|ipad|ipod|android/i.test(navigator.userAgent)}static stringToDomElement(t){var i=document.createElement("div");return i.innerHTML=t,i.firstChild}static componentHTML(t,i,e=null,s=null){let a="";if(s||e){const r=s||"#",o=e?`<img src="${e}">`:"";a=`<a href="${r}">${o}</a>`}return`<embetter-media ${t}="${i}">${a}</embetter-media>`}playerHTML(t,i){return`
-      <a href="${t}">
-        <img src="${i}" />
-        <div class="embetter-loading"></div>
-        <div class="embetter-play-button"></div>
-      </a>
+`;class d{static type="youtube";static dataAttribute="youtube-id";static regex=/(?:.+?)?(?:youtube\.com\/v\/|watch\/|\?v=|\&v=|youtu\.be\/|\/v=|^youtu\.be\/)([a-zA-Z0-9_-]{11})+/;static embed(t){const i=t.autoplay===!0?"&autoplay=1":"",e=t.loops===!0?`&loop=1&playlist=${t.id}`:"";return`<iframe class="video" enablejsapi="1" width="${t.w}" height="${t.h}" src="https://www.youtube.com/embed/${t.id}?rel=0&suggestedQuality=hd720&enablejsapi=1${i}${e}" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return"https://img.youtube.com/vi/"+t+"/maxresdefault.jpg"}static link(t){return"https://www.youtube.com/watch?v="+t}static buildFromText(t,i){const e=t.match(this.regex)[1];if(e!=null){const a=this.link(e),s=this.thumbnail(e);i(e,a,s)}}}class b{static type="vimeo";static dataAttribute="vimeo-id";static regex=/(?:vimeo\.com\/(?:video\/)?|player\.vimeo\.com\/video\/)(\d+)/i;static embed(t){const i=t.autoplay===!0?"&autoplay=1":"",e=t.loops===!0?"&loop=1":"";return`<iframe id="${t.id}" src="https://player.vimeo.com/video/${t.id}?title=0&byline=0&portrait=0&color=ffffff&api=1&player_id=${t.id}${i}${e}" width="${t.w}" height="${t.h}" frameborder="0" scrolling="no" webkitallowfullscreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return""}static link(t){return"https://vimeo.com/"+t}static getData(t){return new Promise((i,e)=>{const a=`https://vimeo.com/api/v2/video/${t}.json`;fetch(a).then(s=>s.json()).then(s=>i(s[0].thumbnail_large)).catch(()=>i(""))})}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const a=e[1],s=this.link(a);this.getData(a).then(r=>{i(a,s,r)})}}}class A{static type="soundcloud";static dataAttribute="soundcloud-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(?:soundcloud\.com|snd\.sc)\/([a-zA-Z0-9_-]*(?:\/sets)?(?:\/groups)?\/[a-zA-Z0-9_-]*)/;static embed(t){const i=t.autoplay===!0?"&auto_play=true":"";return`<iframe width="100%" height="600" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=${encodeURIComponent(`https://soundcloud.com/${t.id}`)}${i}&hide_related=false&color=373737&show_comments=false&show_user=true&show_reposts=false&visual=true" allow="autoplay"></iframe>`}static thumbnail(t){return""}static link(t){return`https://soundcloud.com/${t}`}static getData(t){const i=`/api/soundcloud?url=${encodeURIComponent(t)}&format=json`;return fetch(i).then(e=>e.json()).then(e=>e.thumbnail_url||"").catch(()=>"")}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const a=e[1],s=this.link(a);this.getData(s).then(r=>{i(a,s,r)})}}}class f{static type="dailymotion";static dataAttribute="dailymotion-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?dailymotion\.com\/video\/([a-zA-Z0-9-_]*)/;static embed(t){const i=t.autoplay===!0?"?autoPlay=1":"";return`<iframe class="video" width="${t.w}" height="${t.h}" src="https://www.dailymotion.com/embed/video/${t.id}${i}" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return`https://www.dailymotion.com/thumbnail/video/${t}`}static link(t){return`https://www.dailymotion.com/video/${t}`}static buildFromText(t,i){t=t.split("_")[0];const e=t.match(this.regex);if(e&&e[1]){const a=e[1],s=this.link(a),r=this.thumbnail(a);i(a,s,r)}}}class g{static type="mixcloud";static dataAttribute="mixcloud-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(?:mixcloud\.com)\/(.*\/.*)/;static embed(t){const i=t.autoplay===!0?"&autoplay=true":"";return`<iframe width="660" height="180" src="https://www.mixcloud.com/widget/iframe/?feed=${encodeURIComponent("https://www.mixcloud.com/"+t.id)}&replace=0&hide_cover=1&stylecolor=ffffff&embed_type=widget_standard${i}" frameborder="0" scrolling="no"></iframe>`}static thumbnail(t){return""}static link(t){return`https://www.mixcloud.com/${t}`}static getData(t){const i=`/api/mixcloud/?url=${encodeURIComponent(t)}&format=json`;return fetch(i).then(e=>e.json()).then(e=>e.image||"").catch(()=>"")}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const a=e[1],s=this.link(a);this.getData(s).then(r=>{i(a,s,r)})}}}class y{static type="codepen";static dataAttribute="codepen-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(?:codepen\.io)\/([a-zA-Z0-9_\-%]*\/[a-zA-Z0-9_\-%]*\/[a-zA-Z0-9_\-%]*)/;static embed(t){const i=t.id.replace("/pen/","/embed/"),e=i.split("/")[0],a=i.split("/")[2];return`<iframe src="https://codepen.io/${i}?height=${t.h}&theme-id=0&slug-hash=${a}&default-tab=result&user=${e}" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return`https://codepen.io/${t}/image/large.png`}static link(t){return`https://codepen.io/${t.replace("/embed/","/pen/")}`}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){let a=e[1].replace("/embed/","/pen/");const s=this.link(a),r=this.thumbnail(a);i(a,s,r)}}}class w{static type="bandcamp";static dataAttribute="bandcamp-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?([a-zA-Z0-9_\-]*\.bandcamp\.com\/(?:album|track)\/[a-zA-Z0-9_\-%]*)/;static embed(t){return`<iframe src="https://bandcamp.com/EmbeddedPlayer/${t.id}/size=large/bgcol=ffffff/linkcol=333333/tracklist=true/artwork=small/transparent=true/" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen seamless></iframe>`}static thumbnail(t){return""}static link(t){return t.match(/^(album|track)=/)?"":`https://${t}`}static getData(t){return fetch(`/api/bandcamp?url=${encodeURIComponent(t)}`).then(i=>i.json()).catch(()=>({id:null,thumbnail:null}))}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const s=`https://${e[1]}`;this.getData(s).then(r=>{r.id&&i(r.id,s,r.thumbnail||"")})}}}class v{static type="giphy";static dataAttribute="giphy-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?giphy\.com\/gifs\/([a-zA-Z0-9_\-%]*)/;static embed(t){return`<iframe width="${t.w}" height="${t.h}" src="https://giphy.com/embed/${t.id}/twitter/iframe" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>`}static thumbnail(t){return`https://media.giphy.com/media/${t}/giphy_s.gif`}static link(t){return`https://giphy.com/gifs/${t}`}static buildFromText(t,i){const e=t.split("/"),a=e[e.length-1],s=a.split("-"),r=s[s.length-1];if(r){const o=this.link(a),c=this.thumbnail(r);i(r,o,c)}}}class k{static type="video";static dataAttribute="video-url";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(.+\.(?:mp4|mov|m4v))(?:\/|$|\s|\?|#)/;static embed(t){const i=t.autoplay===!0?' autoplay="true"':"",e=t.loops===!0?' loop="true"':"",a=t.muted===!0?" muted":"";return`<video src="${t.id}" width="${t.w}" height="${t.h}"${i}${e}${a} controls playsinline webkitallowfullscreen mozallowfullscreen allowfullscreen></video>`}static thumbnail(t){return t.replace(".mp4","-poster.jpg").replace(".mov","-poster.jpg").replace(".m4v","-poster.jpg")}static link(t){return t}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const a=e[1],s=this.thumbnail(a);i(a,a,s)}}}class x{static type="gif";static dataAttribute="gif-url";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(.+\.gif)(?:\/|$|\s|\?|#)/;static embed(t){return`<img class="gif" src="${t.id}" width="${t.w}" height="${t.h}">`}static thumbnail(t){return t.replace(".gif","-poster.jpg")}static link(t){return t}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[1]){const a=e[1],s=this.thumbnail(a);i(a,a,s)}}}const m=[k,x,d,b,A,f,g,y,w,v];class n extends HTMLElement{defaultThumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAGcAQMAAAABMOGrAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURQAAAKd6PdoAAAA6SURBVHja7cGBAAAAAMOg+VPf4ARVAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAN488AAGP4e1mAAAAAElFTkSuQmCC";static EMBETTER_ACTIVATED="embetter-activated";connectedCallback(){setTimeout(()=>{this.isConnected&&(this.shadow||(this.initialHTML=this.innerHTML,this.innerHTML="",this.shadow=this.attachShadow({mode:"open"}),this.el=this.shadow??this,this.initComponent(),this.render(),this.getElements(),this.checkThumbnail()),this.addListeners())},0)}disconnectedCallback(){this.unembedMedia(),this.removeAttribute("ready"),this.playButton&&this.playButton.removeEventListener("click",this.clickListener),document.removeEventListener(n.EMBETTER_ACTIVATED,this.embedListener),this.observer&&(this.observer.disconnect(),this.observer=null)}initComponent(){this.markup="embetter-media component not initialized properly.",this.loops=this.hasAttribute("loops"),this.muted=this.hasAttribute("muted"),this.findAndActivateService()}getElements(){this.thumbnail=this.el.querySelector("img")}addListeners(){this.clickListener=this.onClick.bind(this),this.playButton=this.el.querySelector(".embetter-play-button"),this.playButton&&this.playButton.addEventListener("click",this.clickListener),this.embedListener=this.onEmbedActivated.bind(this),document.addEventListener(n.EMBETTER_ACTIVATED,this.embedListener)}onClick(t){t.preventDefault(),this.embedMedia()}onEmbedActivated(t){t.detail!==this&&this.unembedMedia()}findAndActivateService(){for(let t of m){let i=t.dataAttribute;if(this.hasAttribute(i)){this.service=t,this.serviceType=t.type,this.serviceId=this.getAttribute(i),this.markup=this.playerHTML(t.link(this.serviceId));break}}}onReady(){this.removeAttribute("loading"),this.setAttribute("ready","")}checkThumbnail(){this.thumbnail&&(this.setAttribute("loading",""),this.thumbnail.complete?this.onReady():(this.thumbnail.onload=()=>{this.onReady()},this.thumbnail.onerror=()=>{if(this.thumbnail.src.includes("/maxresdefault.jpg")){this.thumbnail.src=this.thumbnail.src.replace("/maxresdefault.jpg","/0.jpg");return}this.thumbnail.src=this.defaultThumbnail,this.onReady()}),setTimeout(()=>{this.thumbnail.height<50&&(this.thumbnail.src=this.defaultThumbnail),this.onReady()},4e3))}setupMobileObserver(){this.isMobile()&&(this.observer=new IntersectionObserver(t=>{t.forEach(i=>{i.isIntersecting?this.embedMedia(!1):this.unembedMedia()})},{threshold:.3}),this.observer.observe(this))}embedMedia(t){if(document.dispatchEvent(new CustomEvent(n.EMBETTER_ACTIVATED,{bubbles:!0,composed:!0,detail:this})),this.hasAttribute("playing"))return;t===void 0&&(t=this.hasAttribute("autoplay")?this.getAttribute("autoplay")!=="false":!0);let i=this.service.embed({id:this.serviceId,w:this.thumbnail&&this.thumbnail.width||"100%",h:this.thumbnail&&this.thumbnail.height||"100%",autoplay:t,loops:this.loops,muted:this.muted||t});this.playerEl=n.stringToDomElement(i),this.el.appendChild(this.playerEl),this.setAttribute("playing","")}unembedMedia(){this.playerEl!=null&&this.playerEl.parentNode!=null&&this.playerEl.parentNode.removeChild(this.playerEl),this.removeAttribute("playing")}isMobile(){return/iphone|ipad|ipod|android/i.test(navigator.userAgent)}static stringToDomElement(t){var i=document.createElement("div");return i.innerHTML=t,i.firstChild}static componentHTML(t,i,e=null,a=null){let s="";if(a||e){const r=a||"#",o=e?`<img src="${e}">`:"";s=`<a href="${r}">${o}</a>`}return`<embetter-media ${t}="${i}">${s}</embetter-media>`}playerHTML(t){return`
+      ${this.initialHTML}
+      <div class="embetter-loading"></div>
+      <div class="embetter-play-button"></div>
     `}css(){return h}html(){return this.markup}render(){this.el.innerHTML=`
       ${this.html()}
       <style>${this.css()}</style>
-    `,this.getElements()}static register(){customElements.define("embetter-media",l)}static upgradeLegacyEmbeds(t=document){t.querySelectorAll(".embetter").forEach(e=>{for(const s of m){const a=`data-${s.dataAttribute}`;if(e.hasAttribute(a)){const r=e.getAttribute(a),o=document.createElement("embetter-media");o.setAttribute(s.dataAttribute,r);const c=e.querySelector("a");c&&o.appendChild(c.cloneNode(!0)),e.hasAttribute("data-loops")&&o.setAttribute("loops",""),e.hasAttribute("data-muted")&&o.setAttribute("muted",""),e.replaceWith(o);break}}})}static componentMarkupFromURL(t,i){for(let e=0;e<m.length;e++){const s=m[e];if(t.match(s.regex)!=null){s.buildFromText(t,(a,r,o)=>{const c=u=>{let p=l.componentHTML(s.dataAttribute,a,u,r);i(p,s)};if(!o&&s.getData&&r){s.getData(r).then(u=>{const p=typeof u=="string"?u:u?.thumbnail;c(p||o)}).catch(()=>c(o));return}c(o)});break}}}}return l.register(),l}));
+    `}static register(){customElements.define("embetter-media",n)}static upgradeLegacyEmbeds(t=document){t.querySelectorAll(".embetter").forEach(e=>{for(const a of m){const s=`data-${a.dataAttribute}`;if(e.hasAttribute(s)){const r=e.getAttribute(s),o=document.createElement("embetter-media");o.setAttribute(a.dataAttribute,r);const c=e.querySelector("a");c&&o.appendChild(c.cloneNode(!0)),e.hasAttribute("data-loops")&&o.setAttribute("loops",""),e.hasAttribute("data-muted")&&o.setAttribute("muted",""),e.replaceWith(o);break}}})}static componentMarkupFromURL(t,i){for(let e=0;e<m.length;e++){const a=m[e];if(t.match(a.regex)!=null){a.buildFromText(t,(s,r,o)=>{const c=u=>{let p=n.componentHTML(a.dataAttribute,s,u,r);i(p,a)};if(!o&&a.getData&&r){a.getData(r).then(u=>{const p=typeof u=="string"?u:u?.thumbnail;c(p||o)}).catch(()=>c(o));return}c(o)});break}}}}return n.register(),n}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embetter",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "type": "module",
   "description": "Lazy-loading iframe embed web component",
   "main": "dist/embetter-media.umd.js",