embetter 2.0.0 → 2.0.2

package/README.md

@@ -52,7 +52,7 @@ For the best experience, include an `<a><img>` inside the element. This serves a
 <!-- YouTube -->
 <embetter-media youtube-id="l9XdkPsaynk">
   <a href="https://www.youtube.com/watch?v=l9XdkPsaynk">
-    <img src="http://img.youtube.com/vi/l9XdkPsaynk/0.jpg" />
+    <img src="https://img.youtube.com/vi/l9XdkPsaynk/maxresdefault.jpg" />
   </a>
 </embetter-media>
 

package/dist/embetter-media.js

@@ -45,12 +45,11 @@ let m = (
   }
 
   :host([youtube-id]) {
-    padding-bottom: 56.25%;
-    height: 0;
+    aspect-ratio: 16 / 9;
+  }
 
-    img {
-      margin: -9.4% 0;
-    }
+  :host([youtube-id]) img[src$="/0.jpg"] {
+    margin: -9.4% 0;
   }
 
   :host([soundcloud-id]),
@@ -149,7 +148,7 @@ class p {
     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 "http://img.youtube.com/vi/" + t + "/0.jpg";
+    return "https://img.youtube.com/vi/" + t + "/maxresdefault.jpg";
   }
   static link(t) {
     return "https://www.youtube.com/watch?v=" + t;
@@ -193,7 +192,7 @@ class b {
     }
   }
 }
-class g {
+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_-]*)/;
@@ -221,34 +220,7 @@ class g {
     }
   }
 }
-class A {
-  static type = "instagram";
-  static dataAttribute = "instagram-id";
-  static regex = /(?:https?:\/\/)?(?:w{3}\.)?(?:instagram\.com|instagr\.am)\/(p|reel|tv)\/([a-zA-Z0-9-_]+)/i;
-  static normalizePath(t) {
-    if (!t) return "p/";
-    const i = String(t).replace(/^\/+|\/+$/g, "");
-    return /^(p|reel|tv)\/[a-zA-Z0-9-_]+$/i.test(i) ? i : `p/${i}`;
-  }
-  static embed(t) {
-    const i = this.normalizePath(t.id), e = t.captioned === !1 ? "" : "captioned/";
-    return `<iframe width="100%" height="100%" scrolling="no" frameborder="0" src="https://www.instagram.com/${i}/embed/${e}?cr=1&v=14" allowfullscreen></iframe>`;
-  }
-  static thumbnail(t) {
-    return "";
-  }
-  static link(t) {
-    return `https://www.instagram.com/${this.normalizePath(t)}/`;
-  }
-  static buildFromText(t, i) {
-    const e = t.match(this.regex);
-    if (e && e[2]) {
-      const a = `${e[1]}/${e[2]}`, s = this.link(a);
-      i(a, s, "");
-    }
-  }
-}
-class f {
+class g {
   static type = "dailymotion";
   static dataAttribute = "dailymotion-id";
   static regex = /(?:https?:\/\/)?(?:w{3}\.)?dailymotion\.com\/video\/([a-zA-Z0-9-_]*)/;
@@ -271,7 +243,7 @@ class f {
     }
   }
 }
-class y {
+class f {
   static type = "mixcloud";
   static dataAttribute = "mixcloud-id";
   static regex = /(?:https?:\/\/)?(?:w{3}\.)?(?:mixcloud\.com)\/(.*\/.*)/;
@@ -299,7 +271,7 @@ class y {
     }
   }
 }
-class w {
+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_\-%]*)/;
@@ -322,7 +294,7 @@ class w {
     }
   }
 }
-class v {
+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_\-%]*)/;
@@ -348,7 +320,7 @@ class v {
     }
   }
 }
-class $ {
+class v {
   static type = "giphy";
   static dataAttribute = "giphy-id";
   static regex = /(?:https?:\/\/)?(?:w{3}\.)?giphy\.com\/gifs\/([a-zA-Z0-9_\-%]*)/;
@@ -364,8 +336,8 @@ class $ {
   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), l = this.thumbnail(r);
-      i(r, o, l);
+      const o = this.link(a), n = this.thumbnail(r);
+      i(r, o, n);
     }
   }
 }
@@ -391,7 +363,7 @@ class k {
     }
   }
 }
-class x {
+class $ {
   static type = "gif";
   static dataAttribute = "gif-url";
   static regex = /(?:https?:\/\/)?(?:w{3}\.)?(.+\.gif)(?:\/|$|\s|\?|#)/;
@@ -412,34 +384,20 @@ class x {
     }
   }
 }
-const d = [
-  p,
-  b,
-  g,
-  A,
-  f,
-  y,
-  w,
-  v,
-  $,
-  // Shadertoy,
-  // Kuula,
-  k,
-  x
-];
+const d = [k, $, p, b, A, g, f, y, w, v];
 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.initComponent(), this.render(), this.checkThumbnail(), this.addListeners(), this.setupMobileObserver();
+    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");
@@ -457,26 +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 a = t.link(this.serviceId);
-          t.getData(a).then((s) => {
-            const r = typeof s == "string" ? s : s?.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 = () => {
-      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", "");
+      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() {
@@ -526,15 +483,13 @@ class c extends HTMLElement {
     }
     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>
     `
     );
   }
@@ -548,7 +503,7 @@ class c extends HTMLElement {
     this.el.innerHTML = `
       ${this.html()}
       <style>${this.css()}</style>
-    `, this.getElements();
+    `;
   }
   static register() {
     customElements.define("embetter-media", c);
@@ -560,8 +515,8 @@ class c extends HTMLElement {
         if (e.hasAttribute(s)) {
           const r = e.getAttribute(s), o = document.createElement("embetter-media");
           o.setAttribute(a.dataAttribute, r);
-          const l = e.querySelector("a");
-          l && o.appendChild(l.cloneNode(!0)), e.hasAttribute("data-loops") && o.setAttribute("loops", ""), e.hasAttribute("data-muted") && o.setAttribute("muted", ""), e.replaceWith(o);
+          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;
         }
       }
@@ -572,7 +527,7 @@ class c extends HTMLElement {
       const a = d[e];
       if (t.match(a.regex) != null) {
         a.buildFromText(t, (s, r, o) => {
-          const l = (h) => {
+          const n = (h) => {
             let u = c.componentHTML(
               a.dataAttribute,
               s,
@@ -584,11 +539,11 @@ class c extends HTMLElement {
           if (!o && a.getData && r) {
             a.getData(r).then((h) => {
               const u = typeof h == "string" ? h : h?.thumbnail;
-              l(u || o);
-            }).catch(() => l(o));
+              n(u || o);
+            }).catch(() => n(o));
             return;
           }
-          l(o);
+          n(o);
         });
         break;
       }

package/dist/embetter-media.umd.js

@@ -43,12 +43,11 @@
   }
 
   :host([youtube-id]) {
-    padding-bottom: 56.25%;
-    height: 0;
+    aspect-ratio: 16 / 9;
+  }
 
-    img {
-      margin: -9.4% 0;
-    }
+  :host([youtube-id]) img[src$="/0.jpg"] {
+    margin: -9.4% 0;
   }
 
   :host([soundcloud-id]),
@@ -136,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"http://img.youtube.com/vi/"+t+"/0.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 g{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 A{static type="instagram";static dataAttribute="instagram-id";static regex=/(?:https?:\/\/)?(?:w{3}\.)?(?:instagram\.com|instagr\.am)\/(p|reel|tv)\/([a-zA-Z0-9-_]+)/i;static normalizePath(t){if(!t)return"p/";const i=String(t).replace(/^\/+|\/+$/g,"");return/^(p|reel|tv)\/[a-zA-Z0-9-_]+$/i.test(i)?i:`p/${i}`}static embed(t){const i=this.normalizePath(t.id),e=t.captioned===!1?"":"captioned/";return`<iframe width="100%" height="100%" scrolling="no" frameborder="0" src="https://www.instagram.com/${i}/embed/${e}?cr=1&v=14" allowfullscreen></iframe>`}static thumbnail(t){return""}static link(t){return`https://www.instagram.com/${this.normalizePath(t)}/`}static buildFromText(t,i){const e=t.match(this.regex);if(e&&e[2]){const a=`${e[1]}/${e[2]}`,s=this.link(a);i(a,s,"")}}}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 y{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 w{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 v{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 ${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=[d,b,g,A,f,y,w,v,$,k,x];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.initComponent(),this.render(),this.checkThumbnail(),this.addListeners(),this.setupMobileObserver()}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 a=t.link(this.serviceId);t.getData(a).then(s=>{const r=typeof s=="string"?s:s?.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=()=>{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,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,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 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=l.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 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.0",
+  "version": "2.0.2",
   "type": "module",
   "description": "Lazy-loading iframe embed web component",
   "main": "dist/embetter-media.umd.js",