embedia-vue - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

dist/index.es.js

@@ -1,22 +0,22 @@
-import { ref as p, onMounted as w, watch as f, openBlock as y, createElementBlock as b, normalizeClass as g, normalizeStyle as $, pushScopeId as v, popScopeId as E, createElementVNode as I } from "vue";
-let h = 1;
-const k = (e, t, o, i) => {
-  const n = e.videoUrl, a = Number(e.width) + 140, c = C(n);
+import { ref as p, onMounted as w, watch as f, openBlock as y, createElementBlock as b, normalizeClass as g, normalizeStyle as v, pushScopeId as $, popScopeId as E, createElementVNode as U } from "vue";
+let u = 1;
+const C = (e, t, o, s) => {
+  const r = e.videoUrl, i = Number(e.width) + 140, c = I(r);
   if (!c)
     throw new Error("Invalid Instagram video URL");
-  let r = document.getElementById(t);
-  r || (r = document.createElement("div"), r.id = t, document.body.appendChild(r));
-  let s = document.querySelector(`.${o}`);
-  s || (s = document.createElement("div"), s.className = `video-${i} ${o}`, r.appendChild(s));
+  let n = document.getElementById(t);
+  n || (n = document.createElement("div"), n.id = t, document.body.appendChild(n));
+  let a = document.querySelector(`.${o}`);
+  a || (a = document.createElement("div"), a.className = `video-${s} ${o}`, n.appendChild(a));
   const l = document.createElement("blockquote");
-  l.className = "instagram-media", l.setAttribute("data-instgrm-permalink", `https://www.instagram.com/p/${c}/`), l.setAttribute("data-instgrm-version", "13"), l.style.width = `${e.width}px`, l.style.height = `${a}px`, l.style.maxWidth = "380px", l.style.maxheight = "520px";
+  l.className = "instagram-media", l.setAttribute("data-instgrm-permalink", `https://www.instagram.com/p/${c}/`), l.setAttribute("data-instgrm-version", "13"), l.style.width = `${e.width}px`, l.style.height = `${i}px`, l.style.maxWidth = "380px", l.style.maxheight = "520px";
   const d = document.createElement("a");
-  if (d.href = n, l.appendChild(d), s.appendChild(l), !document.getElementById("instagramEmbedScript")) {
+  if (d.href = r, l.appendChild(d), a.appendChild(l), !document.getElementById("instagramEmbedScript")) {
     const m = document.createElement("script");
-    m.async = !0, m.id = "instagramEmbedScript", m.src = "//www.instagram.com/embed.js", r.appendChild(m);
+    m.async = !0, m.id = "instagramEmbedScript", m.src = "//www.instagram.com/embed.js", n.appendChild(m);
   }
-}, C = (e) => {
+}, I = (e) => {
   const t = /\/([a-zA-Z0-9_-]+)\/?$/, o = e.match(t);
   return o ? o[1] : null;
-}, U = (e) => {
+}, _ = (e) => {
   const t = e.match(/\/(?:video|hub)\/([^_]+)/) || e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
@@ -26,21 +26,21 @@ if (t && t[1])
   throw new Error("Invalid Dailymotion video URL");
-}, x = (e, t, o) => {
-  const i = e.videoUrl, n = U(i), a = e.autoplay ? "1" : "0", c = e.controls ? "1" : "0", r = e.fullscreen ? "1" : "0", s = document.createElement("iframe");
-  s.src = `https://www.dailymotion.com/embed/video/${n}?autoplay=${a}&controls=${c}&fullscreen=${r}`, s.width = e.width || 640, s.height = e.height || 360, s.frameBorder = "0", s.allowFullscreen = !0, s.className = o, t.appendChild(s);
-}, _ = (e) => {
+}, k = (e, t, o) => {
+  const s = e.videoUrl, r = _(s), i = e.autoplay ? "1" : "0", c = e.controls ? "1" : "0", n = e.fullscreen ? "1" : "0", a = document.createElement("iframe");
+  a.src = `https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${c}&fullscreen=${n}`, a.width = e.width || 640, a.height = e.height || 360, a.frameBorder = "0", a.allowFullscreen = !0, a.className = o, t.appendChild(a);
+}, x = (e) => {
   const t = e.match(/\/(\d+)/);
   return t && t[1] ? t[1] : (console.error("Invalid Vimeo video URL"), "");
 }, T = (e, t, o) => {
-  const i = e.width || 640, n = e.height || 360, a = e.controls, c = e.autoplay === "true", r = e.loop === "true", s = _(e.videoUrl), l = document.createElement("div");
-  l.className = `video-${h} ${o}`, l.dataset.eWidth = i, l.dataset.eHeight = n, l.dataset.efullscreen = e.fullscreen, l.dataset.eVideoId = s, t.appendChild(l);
+  const s = e.width || 640, r = e.height || 360, i = e.controls, c = e.autoplay === "true", n = e.loop === "true", a = x(e.videoUrl), l = document.createElement("div");
+  l.className = `video-${u} ${o}`, l.dataset.eWidth = s, l.dataset.eHeight = r, l.dataset.efullscreen = e.fullscreen, l.dataset.eVideoId = a, t.appendChild(l);
   const d = document.createElement("script");
   return d.src = "https://player.vimeo.com/api/player.js", d.async = !0, d.onload = () => {
     new window.Vimeo.Player(l, {
-      id: s,
-      width: i,
-      height: n,
-      controls: a,
+      id: a,
+      width: s,
+      height: r,
+      controls: i,
       autoplay: c,
       muted: c,
-      loop: r
+      loop: n
       // Set loop based on boolean value
@@ -53,76 +53,50 @@ }).ready().then(() => {
 }, V = (e, t, o) => {
-  const i = (n) => {
-    const a = /\/(?:i\/)?status\/(\d+)/, c = n.match(a);
-    return c ? c[1] : null;
+  const s = (r) => {
+    const i = /\/status\/(\d+)/, c = r.match(i);
+    return c && c[1] ? c[1] : null;
   };
   try {
-    if (!(t instanceof Node)) {
-      console.error("Container is not a valid DOM node.");
-      return;
-    }
-    const n = e.videoUrl, a = i(n);
-    if (!n || !a) {
-      console.error("Invalid video clip URL or tweet ID.");
-      return;
-    }
-    const c = document.createElement("blockquote");
-    c.className = `twitter-tweet ${o}`, c.innerHTML = `
-        <p lang="en" style="min-width: ${e.width}px; display: block;">
-          <a href="${n}" style="display: inline-block; min-width: ${e.width}px;">
-          </a>
-        </p>
-      `, t.appendChild(c);
-    const r = document.createElement("script");
-    r.src = "https://platform.twitter.com/widgets.js", r.charset = "utf-8", r.async = !0, r.addEventListener("load", () => {
-      window.twttr.widgets.load();
-    }), t.appendChild(r);
-  } catch (n) {
-    console.error("Error embedding Twitter content:", n);
+    const r = e.videoUrl, i = s(r), c = document.createElement("div");
+    c.className = `video-${u} ${o}`, c.id = `tweet-${i}`;
+    const n = document.createElement("script");
+    n.src = "https://platform.twitter.com/widgets.js", n.charset = "utf-8", n.async = !0, n.addEventListener("load", () => {
+      window.twttr.widgets.createTweet(i, c);
+    }), t.appendChild(c), t.appendChild(n);
+  } catch (r) {
+    console.error("Error embedding Twitter content:", r);
   }
 }, S = (e, t, o) => {
-  const i = (n) => {
-    n = n.replace("x.com", "twitter.com");
-    const a = /\/(?:i\/)?status\/(\d+)/, c = n.match(a);
+  const s = (r) => {
+    const i = /\/status\/(\d+)/, c = r.match(i);
     return c ? c[1] : null;
   };
   try {
-    if (!(t instanceof Node)) {
-      console.error("Container is not a valid DOM node.");
-      return;
-    }
-    const n = e.videoUrl, a = i(n);
-    if (!n || !a) {
-      console.error("Invalid video clip URL or tweet ID.");
-      return;
-    }
-    const c = document.createElement("blockquote");
-    c.className = `twitter-tweet ${o}`, c.innerHTML = `
-        <p lang="en" style="min-width: ${e.width}px; display: block;">
-          <a href="https://twitter.com/i/status/${a}" style="display: inline-block; min-width: ${e.width}px;">
-          </a>
-        </p>
-      `, t.appendChild(c);
-    const r = document.createElement("script");
-    r.src = "https://platform.twitter.com/widgets.js", r.charset = "utf-8", r.async = !0, r.addEventListener("load", () => {
-      window.twttr.widgets.load();
-    }), t.appendChild(r);
-  } catch (n) {
-    console.error("Error embedding Twitter content:", n);
+    const r = e.videoUrl, i = s(r);
+    if (!i)
+      throw new Error("Invalid video URL");
+    const c = document.createElement("div");
+    c.className = `video-${u} ${o}`, c.id = `tweet-${i}`;
+    const n = document.createElement("script");
+    n.src = "https://platform.twitter.com/widgets.js", n.charset = "utf-8", n.async = !0, n.addEventListener("load", () => {
+      window.twttr.widgets.createTweet(i, c);
+    }), t.appendChild(c), t.appendChild(n);
+  } catch (r) {
+    console.error("Error embedding Twitter content:", r);
   }
-}, u = /* @__PURE__ */ new Map(), N = (e, t, o) => {
-  const i = e.videoUrl;
-  if (u.has(i) || u.has(i))
+}, h = /* @__PURE__ */ new Map(), A = (e, t, o) => {
+  const s = e.videoUrl;
+  if (h.has(s) || h.has(s))
     return;
-  u.set(i, !0);
-  const n = e.width || "100%", a = e.height || "100%", c = new XMLHttpRequest();
-  c.open("GET", `https://www.tiktok.com/oembed?url=${encodeURIComponent(i)}`, !0), c.onload = function() {
+  h.set(s, !0);
+  const r = e.width || "100%", i = e.height || "100%", c = new XMLHttpRequest();
+  c.open("GET", `https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`, !0), c.onload = function() {
     if (c.status >= 200 && c.status < 300) {
-      const r = JSON.parse(c.responseText);
-      r.html && (r.html = r.html.replace(/<script[^>]*>.*<\/script>/gi, ""));
-      const s = document.createElement("div"), l = Date.now();
-      if (s.className = `video-${l} ${o}`, s.style.width = n, s.style.height = a, s.innerHTML = r.html, !document.querySelector('script[src="https://www.tiktok.com/embed.js"]')) {
+      const n = JSON.parse(c.responseText);
+      n.html && (n.html = n.html.replace(/<script[^>]*>.*<\/script>/gi, ""));
+      const a = document.createElement("div"), l = Date.now();
+      if (a.className = `video-${l} ${o}`, a.style.width = r, a.style.height = i, a.innerHTML = n.html, !document.querySelector('script[src="https://www.tiktok.com/embed.js"]')) {
         const d = document.createElement("script");
         d.src = "https://www.tiktok.com/embed.js", document.body.appendChild(d);
       }
-      t ? t.appendChild(s) : document.body && document.body.appendChild(s);
+      t ? t.appendChild(a) : document.body && document.body.appendChild(a);
     } else
@@ -133,6 +107,6 @@ console.error("Failed to fetch TikTok oEmbed data: " + c.statusText);
   }, c.send();
-}, L = (e, t, o) => {
-  const i = e.videoUrl, n = e.autoplay ? "autoplay=true" : "autoplay=false", a = n ? "muted=true" : "muted=false", c = e.width || 640, r = e.height || 360, s = document.createElement("iframe");
-  s.setAttribute("src", `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(i)}&width=${c}&height=${r}&show_text=false&${n}&${a}`), s.setAttribute("width", c), s.setAttribute("height", r), s.setAttribute("frameborder", "0"), e.fullscreen && s.setAttribute("allowfullscreen", "true"), s.className = `video-${h} ${o} custom-facebook`, h++, t.appendChild(s);
-}, A = (e) => {
+}, N = (e, t, o) => {
+  const s = e.videoUrl, r = e.autoplay ? "autoplay=true" : "autoplay=false", i = r ? "muted=true" : "muted=false", c = e.width || 640, n = e.height || 360, a = document.createElement("iframe");
+  a.setAttribute("src", `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${c}&height=${n}&show_text=false&${r}&${i}`), a.setAttribute("width", c), a.setAttribute("height", n), a.setAttribute("frameborder", "0"), e.fullscreen && a.setAttribute("allowfullscreen", "true"), a.className = `video-${u} ${o} custom-facebook`, u++, t.appendChild(a);
+}, R = (e) => {
   const t = e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
@@ -145,3 +119,3 @@ if (t && t[1])
   throw new Error("Invalid YouTube video URL");
-}, M = (e, t, o) => {
+}, L = (e, t, o) => {
   if (!t) {
@@ -151,12 +125,12 @@ console.error("Container element not found.");
   }
-  const i = e.autoplay ? 1 : 0, n = e.autoplay || e.muted ? 1 : 0, a = e.autoplay || e.loop ? 1 : 0, c = A(e.videoUrl), r = document.createElement("iframe");
-  r.src = `https://www.youtube.com/embed/${c}?autoplay=${i}&mute=${n}&loop=${a ? 1 : 0}&controls=${e.controls ? 1 : 0}`, r.width = e.width || 640, r.height = e.height || 360, r.frameborder = "0", r.style.border = "none", e.fullscreen && r.setAttribute("allow", "fullscreen"), r.className = o, t.appendChild(r);
-}, R = (e) => {
-  var i;
-  const t = ((i = e.cssname) == null ? void 0 : i.trim()) || "";
+  const s = e.autoplay ? 1 : 0, r = e.autoplay || e.muted ? 1 : 0, i = e.autoplay || e.loop ? 1 : 0, c = R(e.videoUrl), n = document.createElement("iframe");
+  n.src = `https://www.youtube.com/embed/${c}?autoplay=${s}&mute=${r}&loop=${i ? 1 : 0}&controls=${e.controls ? 1 : 0}`, n.width = e.width || 640, n.height = e.height || 360, n.frameborder = "0", n.style.border = "none", e.fullscreen && n.setAttribute("allow", "fullscreen"), n.className = o, t.appendChild(n);
+}, B = (e) => {
+  var s;
+  const t = ((s = e.cssname) == null ? void 0 : s.trim()) || "";
   if (!t.match(/^[a-zA-Z_][\w-]*$/))
     throw console.error("Invalid class name:", t), new Error("Invalid class name");
   if (!document.querySelector(`#default-style-${t}`)) {
-    const n = document.createElement("style");
-    n.id = `default-style-${t}`, n.textContent = `
+    const r = document.createElement("style");
+    r.id = `default-style-${t}`, r.textContent = `
             .${t} {
@@ -170,3 +144,3 @@ display: flex;
             }
-          `, document.head.appendChild(n);
+          `, document.head.appendChild(r);
   }
@@ -179,7 +153,7 @@ const o = document.querySelector(`.${t}`);
   if (e.videoUrl.includes("youtube.com") || e.videoUrl.includes("youtu.be"))
-    M(e, o, t);
+    L(e, o, t);
   else if (e.videoUrl.includes("facebook.com") || e.videoUrl.includes("fb.com"))
-    L(e, o, t);
+    N(e, o, t);
   else if (e.videoUrl.includes("tiktok.com") || e.videoUrl.includes("tiktok"))
-    N(e, o, t);
+    A(e, o, t);
   else if (e.videoUrl.includes("twitter.com"))
@@ -192,14 +166,14 @@ V(e, o, t);
   else if (e.videoUrl.includes("dailymotion.com") || e.videoUrl.includes("dailymotion"))
-    x(e, o, t);
+    k(e, o, t);
   else if (e.videoUrl.includes("instagram.com") || e.videoUrl.includes("instagram"))
-    k(e, o, t);
+    C(e, o, t);
   else
     throw new Error("Invalid video URL");
 };
-const q = (e, t) => {
+const M = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [i, n] of t)
-    o[i] = n;
+  for (const [s, r] of t)
+    o[s] = r;
   return o;
-}, D = {
+}, q = {
   name: "EmbediaVue",
@@ -239,3 +213,3 @@ props: {
     w(() => {
-      R({
+      B({
         videoUrl: e.clip,
@@ -249,7 +223,7 @@ width: e.width,
       }), o(e.width, e.height);
-    }), f(() => [e.width, e.height], ([i, n]) => {
-      o(i, n);
+    }), f(() => [e.width, e.height], ([s, r]) => {
+      o(s, r);
     }, { immediate: !0 });
-    function o(i, n) {
-      i && n ? t.value = `${n / i * 100}%` : t.value = "56.25%";
+    function o(s, r) {
+      s && r ? t.value = `${r / s * 100}%` : t.value = "56.25%";
     }
@@ -260,14 +234,14 @@ return {
   }
-}, B = (e) => (v("data-v-d26b150f"), e = e(), E(), e), H = /* @__PURE__ */ B(() => /* @__PURE__ */ I("div", { class: "video-content" }, null, -1)), j = [
-  H
+}, j = (e) => ($("data-v-d26b150f"), e = e(), E(), e), W = /* @__PURE__ */ j(() => /* @__PURE__ */ U("div", { class: "video-content" }, null, -1)), z = [
+  W
 ];
-function W(e, t, o, i, n, a) {
+function D(e, t, o, s, r, i) {
   return y(), b("div", {
     class: g([o.cssname, "responsive-container"]),
-    style: $({ "--aspect-ratio": i.aspectRatio, width: "auto", maxWidth: "100%" })
-  }, j, 6);
+    style: v({ "--aspect-ratio": s.aspectRatio, width: "auto", maxWidth: "100%" })
+  }, z, 6);
 }
-const O = /* @__PURE__ */ q(D, [["render", W], ["__scopeId", "data-v-d26b150f"]]);
+const F = /* @__PURE__ */ M(q, [["render", D], ["__scopeId", "data-v-d26b150f"]]);
 export {
-  O as EmbediaVue
+  F as EmbediaVue
 };

dist/index.js

@@ -1,12 +0,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("vue");let p=1;const w=(e,t,o,i)=>{const n=e.videoUrl,a=Number(e.width)+140,c=f(n);if(!c)throw new Error("Invalid Instagram video URL");let r=document.getElementById(t);r||(r=document.createElement("div"),r.id=t,document.body.appendChild(r));let s=document.querySelector(`.${o}`);s||(s=document.createElement("div"),s.className=`video-${i} ${o}`,r.appendChild(s));const l=document.createElement("blockquote");l.className="instagram-media",l.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${c}/`),l.setAttribute("data-instgrm-version","13"),l.style.width=`${e.width}px`,l.style.height=`${a}px`,l.style.maxWidth="380px",l.style.maxheight="520px";const d=document.createElement("a");if(d.href=n,l.appendChild(d),s.appendChild(l),!document.getElementById("instagramEmbedScript")){const u=document.createElement("script");u.async=!0,u.id="instagramEmbedScript",u.src="//www.instagram.com/embed.js",r.appendChild(u)}},f=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},y=e=>{const t=e.match(/\/(?:video|hub)\/([^_]+)/)||e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);if(t&&t[1])return t[1];throw new Error("Invalid Dailymotion video URL")},b=(e,t,o)=>{const i=e.videoUrl,n=y(i),a=e.autoplay?"1":"0",c=e.controls?"1":"0",r=e.fullscreen?"1":"0",s=document.createElement("iframe");s.src=`https://www.dailymotion.com/embed/video/${n}?autoplay=${a}&controls=${c}&fullscreen=${r}`,s.width=e.width||640,s.height=e.height||360,s.frameBorder="0",s.allowFullscreen=!0,s.className=o,t.appendChild(s)},g=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},$=(e,t,o)=>{const i=e.width||640,n=e.height||360,a=e.controls,c=e.autoplay==="true",r=e.loop==="true",s=g(e.videoUrl),l=document.createElement("div");l.className=`video-${p} ${o}`,l.dataset.eWidth=i,l.dataset.eHeight=n,l.dataset.efullscreen=e.fullscreen,l.dataset.eVideoId=s,t.appendChild(l);const d=document.createElement("script");return d.src="https://player.vimeo.com/api/player.js",d.async=!0,d.onload=()=>{new window.Vimeo.Player(l,{id:s,width:i,height:n,controls:a,autoplay:c,muted:c,loop:r}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},v=(e,t,o)=>{const i=n=>{const a=/\/(?:i\/)?status\/(\d+)/,c=n.match(a);return c?c[1]:null};try{if(!(t instanceof Node)){console.error("Container is not a valid DOM node.");return}const n=e.videoUrl,a=i(n);if(!n||!a){console.error("Invalid video clip URL or tweet ID.");return}const c=document.createElement("blockquote");c.className=`twitter-tweet ${o}`,c.innerHTML=`
-        <p lang="en" style="min-width: ${e.width}px; display: block;">
-          <a href="${n}" style="display: inline-block; min-width: ${e.width}px;">
-          </a>
-        </p>
-      `,t.appendChild(c);const r=document.createElement("script");r.src="https://platform.twitter.com/widgets.js",r.charset="utf-8",r.async=!0,r.addEventListener("load",()=>{window.twttr.widgets.load()}),t.appendChild(r)}catch(n){console.error("Error embedding Twitter content:",n)}},E=(e,t,o)=>{const i=n=>{n=n.replace("x.com","twitter.com");const a=/\/(?:i\/)?status\/(\d+)/,c=n.match(a);return c?c[1]:null};try{if(!(t instanceof Node)){console.error("Container is not a valid DOM node.");return}const n=e.videoUrl,a=i(n);if(!n||!a){console.error("Invalid video clip URL or tweet ID.");return}const c=document.createElement("blockquote");c.className=`twitter-tweet ${o}`,c.innerHTML=`
-        <p lang="en" style="min-width: ${e.width}px; display: block;">
-          <a href="https://twitter.com/i/status/${a}" style="display: inline-block; min-width: ${e.width}px;">
-          </a>
-        </p>
-      `,t.appendChild(c);const r=document.createElement("script");r.src="https://platform.twitter.com/widgets.js",r.charset="utf-8",r.async=!0,r.addEventListener("load",()=>{window.twttr.widgets.load()}),t.appendChild(r)}catch(n){console.error("Error embedding Twitter content:",n)}},h=new Map,I=(e,t,o)=>{const i=e.videoUrl;if(h.has(i)||h.has(i))return;h.set(i,!0);const n=e.width||"100%",a=e.height||"100%",c=new XMLHttpRequest;c.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(i)}`,!0),c.onload=function(){if(c.status>=200&&c.status<300){const r=JSON.parse(c.responseText);r.html&&(r.html=r.html.replace(/<script[^>]*>.*<\/script>/gi,""));const s=document.createElement("div"),l=Date.now();if(s.className=`video-${l} ${o}`,s.style.width=n,s.style.height=a,s.innerHTML=r.html,!document.querySelector('script[src="https://www.tiktok.com/embed.js"]')){const d=document.createElement("script");d.src="https://www.tiktok.com/embed.js",document.body.appendChild(d)}t?t.appendChild(s):document.body&&document.body.appendChild(s)}else console.error("Failed to fetch TikTok oEmbed data: "+c.statusText)},c.onerror=function(){console.error("An error occurred while embedding TikTok video.")},c.send()},k=(e,t,o)=>{const i=e.videoUrl,n=e.autoplay?"autoplay=true":"autoplay=false",a=n?"muted=true":"muted=false",c=e.width||640,r=e.height||360,s=document.createElement("iframe");s.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(i)}&width=${c}&height=${r}&show_text=false&${n}&${a}`),s.setAttribute("width",c),s.setAttribute("height",r),s.setAttribute("frameborder","0"),e.fullscreen&&s.setAttribute("allowfullscreen","true"),s.className=`video-${p} ${o} custom-facebook`,p++,t.appendChild(s)},C=e=>{const t=e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);if(t&&t[1])return t[1];const o=e.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);if(o&&o[2].length===11)return o[2];throw new Error("Invalid YouTube video URL")},U=(e,t,o)=>{if(!t){console.error("Container element not found.");return}const i=e.autoplay?1:0,n=e.autoplay||e.muted?1:0,a=e.autoplay||e.loop?1:0,c=C(e.videoUrl),r=document.createElement("iframe");r.src=`https://www.youtube.com/embed/${c}?autoplay=${i}&mute=${n}&loop=${a?1:0}&controls=${e.controls?1:0}`,r.width=e.width||640,r.height=e.height||360,r.frameborder="0",r.style.border="none",e.fullscreen&&r.setAttribute("allow","fullscreen"),r.className=o,t.appendChild(r)},x=e=>{var i;const t=((i=e.cssname)==null?void 0:i.trim())||"";if(!t.match(/^[a-zA-Z_][\w-]*$/))throw console.error("Invalid class name:",t),new Error("Invalid class name");if(!document.querySelector(`#default-style-${t}`)){const n=document.createElement("style");n.id=`default-style-${t}`,n.textContent=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("vue");let h=1;const w=(e,t,o,s)=>{const r=e.videoUrl,i=Number(e.width)+140,c=f(r);if(!c)throw new Error("Invalid Instagram video URL");let n=document.getElementById(t);n||(n=document.createElement("div"),n.id=t,document.body.appendChild(n));let a=document.querySelector(`.${o}`);a||(a=document.createElement("div"),a.className=`video-${s} ${o}`,n.appendChild(a));const l=document.createElement("blockquote");l.className="instagram-media",l.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${c}/`),l.setAttribute("data-instgrm-version","13"),l.style.width=`${e.width}px`,l.style.height=`${i}px`,l.style.maxWidth="380px",l.style.maxheight="520px";const d=document.createElement("a");if(d.href=r,l.appendChild(d),a.appendChild(l),!document.getElementById("instagramEmbedScript")){const u=document.createElement("script");u.async=!0,u.id="instagramEmbedScript",u.src="//www.instagram.com/embed.js",n.appendChild(u)}},f=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},y=e=>{const t=e.match(/\/(?:video|hub)\/([^_]+)/)||e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);if(t&&t[1])return t[1];throw new Error("Invalid Dailymotion video URL")},b=(e,t,o)=>{const s=e.videoUrl,r=y(s),i=e.autoplay?"1":"0",c=e.controls?"1":"0",n=e.fullscreen?"1":"0",a=document.createElement("iframe");a.src=`https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${c}&fullscreen=${n}`,a.width=e.width||640,a.height=e.height||360,a.frameBorder="0",a.allowFullscreen=!0,a.className=o,t.appendChild(a)},g=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},v=(e,t,o)=>{const s=e.width||640,r=e.height||360,i=e.controls,c=e.autoplay==="true",n=e.loop==="true",a=g(e.videoUrl),l=document.createElement("div");l.className=`video-${h} ${o}`,l.dataset.eWidth=s,l.dataset.eHeight=r,l.dataset.efullscreen=e.fullscreen,l.dataset.eVideoId=a,t.appendChild(l);const d=document.createElement("script");return d.src="https://player.vimeo.com/api/player.js",d.async=!0,d.onload=()=>{new window.Vimeo.Player(l,{id:a,width:s,height:r,controls:i,autoplay:c,muted:c,loop:n}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},$=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,c=r.match(i);return c&&c[1]?c[1]:null};try{const r=e.videoUrl,i=s(r),c=document.createElement("div");c.className=`video-${h} ${o}`,c.id=`tweet-${i}`;const n=document.createElement("script");n.src="https://platform.twitter.com/widgets.js",n.charset="utf-8",n.async=!0,n.addEventListener("load",()=>{window.twttr.widgets.createTweet(i,c)}),t.appendChild(c),t.appendChild(n)}catch(r){console.error("Error embedding Twitter content:",r)}},E=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,c=r.match(i);return c?c[1]:null};try{const r=e.videoUrl,i=s(r);if(!i)throw new Error("Invalid video URL");const c=document.createElement("div");c.className=`video-${h} ${o}`,c.id=`tweet-${i}`;const n=document.createElement("script");n.src="https://platform.twitter.com/widgets.js",n.charset="utf-8",n.async=!0,n.addEventListener("load",()=>{window.twttr.widgets.createTweet(i,c)}),t.appendChild(c),t.appendChild(n)}catch(r){console.error("Error embedding Twitter content:",r)}},p=new Map,U=(e,t,o)=>{const s=e.videoUrl;if(p.has(s)||p.has(s))return;p.set(s,!0);const r=e.width||"100%",i=e.height||"100%",c=new XMLHttpRequest;c.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`,!0),c.onload=function(){if(c.status>=200&&c.status<300){const n=JSON.parse(c.responseText);n.html&&(n.html=n.html.replace(/<script[^>]*>.*<\/script>/gi,""));const a=document.createElement("div"),l=Date.now();if(a.className=`video-${l} ${o}`,a.style.width=r,a.style.height=i,a.innerHTML=n.html,!document.querySelector('script[src="https://www.tiktok.com/embed.js"]')){const d=document.createElement("script");d.src="https://www.tiktok.com/embed.js",document.body.appendChild(d)}t?t.appendChild(a):document.body&&document.body.appendChild(a)}else console.error("Failed to fetch TikTok oEmbed data: "+c.statusText)},c.onerror=function(){console.error("An error occurred while embedding TikTok video.")},c.send()},C=(e,t,o)=>{const s=e.videoUrl,r=e.autoplay?"autoplay=true":"autoplay=false",i=r?"muted=true":"muted=false",c=e.width||640,n=e.height||360,a=document.createElement("iframe");a.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${c}&height=${n}&show_text=false&${r}&${i}`),a.setAttribute("width",c),a.setAttribute("height",n),a.setAttribute("frameborder","0"),e.fullscreen&&a.setAttribute("allowfullscreen","true"),a.className=`video-${h} ${o} custom-facebook`,h++,t.appendChild(a)},I=e=>{const t=e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);if(t&&t[1])return t[1];const o=e.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);if(o&&o[2].length===11)return o[2];throw new Error("Invalid YouTube video URL")},_=(e,t,o)=>{if(!t){console.error("Container element not found.");return}const s=e.autoplay?1:0,r=e.autoplay||e.muted?1:0,i=e.autoplay||e.loop?1:0,c=I(e.videoUrl),n=document.createElement("iframe");n.src=`https://www.youtube.com/embed/${c}?autoplay=${s}&mute=${r}&loop=${i?1:0}&controls=${e.controls?1:0}`,n.width=e.width||640,n.height=e.height||360,n.frameborder="0",n.style.border="none",e.fullscreen&&n.setAttribute("allow","fullscreen"),n.className=o,t.appendChild(n)},k=e=>{var s;const t=((s=e.cssname)==null?void 0:s.trim())||"";if(!t.match(/^[a-zA-Z_][\w-]*$/))throw console.error("Invalid class name:",t),new Error("Invalid class name");if(!document.querySelector(`#default-style-${t}`)){const r=document.createElement("style");r.id=`default-style-${t}`,r.textContent=`
             .${t} {
@@ -20,2 +10,2 @@ display: flex;
             }
-          `,document.head.appendChild(n)}const o=document.querySelector(`.${t}`);if(!o)throw console.error("Container not found for class:",t),new Error("Container not found");for(;o.firstChild;)o.removeChild(o.firstChild);if(e.videoUrl.includes("youtube.com")||e.videoUrl.includes("youtu.be"))U(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))k(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))I(e,o,t);else if(e.videoUrl.includes("twitter.com"))v(e,o,t);else if(e.videoUrl.includes("x.com"))E(e,o,t);else if(e.videoUrl.includes("vimeo.com"))$(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))b(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))w(e,o,t);else throw new Error("Invalid video URL")};const _=(e,t)=>{const o=e.__vccOpts||e;for(const[i,n]of t)o[i]=n;return o},T={name:"EmbediaVue",props:{clip:{type:String,required:!0},width:{type:[Number,String],default:640},height:{type:[Number,String],default:""},autoplay:{type:Boolean,default:!1},fullscreen:{type:Boolean,default:!1},controls:{type:Boolean,default:!0},cssname:{type:String,default:"default-video-class"}},setup(e){const t=m.ref("56.25%");m.onMounted(()=>{x({videoUrl:e.clip,width:e.width,height:e.height,autoplay:e.autoplay,fullscreen:e.fullscreen,controls:e.controls,cssname:e.cssname}),o(e.width,e.height)}),m.watch(()=>[e.width,e.height],([i,n])=>{o(i,n)},{immediate:!0});function o(i,n){i&&n?t.value=`${n/i*100}%`:t.value="56.25%"}return{aspectRatio:t}}},V=e=>(m.pushScopeId("data-v-d26b150f"),e=e(),m.popScopeId(),e),S=V(()=>m.createElementVNode("div",{class:"video-content"},null,-1)),N=[S];function L(e,t,o,i,n,a){return m.openBlock(),m.createElementBlock("div",{class:m.normalizeClass([o.cssname,"responsive-container"]),style:m.normalizeStyle({"--aspect-ratio":i.aspectRatio,width:"auto",maxWidth:"100%"})},N,6)}const M=_(T,[["render",L],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=M;
+          `,document.head.appendChild(r)}const o=document.querySelector(`.${t}`);if(!o)throw console.error("Container not found for class:",t),new Error("Container not found");for(;o.firstChild;)o.removeChild(o.firstChild);if(e.videoUrl.includes("youtube.com")||e.videoUrl.includes("youtu.be"))_(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))C(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))U(e,o,t);else if(e.videoUrl.includes("twitter.com"))$(e,o,t);else if(e.videoUrl.includes("x.com"))E(e,o,t);else if(e.videoUrl.includes("vimeo.com"))v(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))b(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))w(e,o,t);else throw new Error("Invalid video URL")};const x=(e,t)=>{const o=e.__vccOpts||e;for(const[s,r]of t)o[s]=r;return o},T={name:"EmbediaVue",props:{clip:{type:String,required:!0},width:{type:[Number,String],default:640},height:{type:[Number,String],default:""},autoplay:{type:Boolean,default:!1},fullscreen:{type:Boolean,default:!1},controls:{type:Boolean,default:!0},cssname:{type:String,default:"default-video-class"}},setup(e){const t=m.ref("56.25%");m.onMounted(()=>{k({videoUrl:e.clip,width:e.width,height:e.height,autoplay:e.autoplay,fullscreen:e.fullscreen,controls:e.controls,cssname:e.cssname}),o(e.width,e.height)}),m.watch(()=>[e.width,e.height],([s,r])=>{o(s,r)},{immediate:!0});function o(s,r){s&&r?t.value=`${r/s*100}%`:t.value="56.25%"}return{aspectRatio:t}}},V=e=>(m.pushScopeId("data-v-d26b150f"),e=e(),m.popScopeId(),e),S=V(()=>m.createElementVNode("div",{class:"video-content"},null,-1)),A=[S];function N(e,t,o,s,r,i){return m.openBlock(),m.createElementBlock("div",{class:m.normalizeClass([o.cssname,"responsive-container"]),style:m.normalizeStyle({"--aspect-ratio":s.aspectRatio,width:"auto",maxWidth:"100%"})},A,6)}const R=x(T,[["render",N],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=R;

package.json

 {
   "name": "embedia-vue",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A vue component package to embed videos such as Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo, and Dailymotion.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -74,2 +74,5 @@ <p align="center">
 
+ v1.2.3
+ - Fixed the issue with embedding x.com concerning the width.
+
  v1.2.2
@@ -76,0 +79,0 @@ - Fixed the issue with embedding x.com, which restores the embedded post with a card rather than just a video.

src/core/embedLink.js

@@ -192,41 +192,28 @@ /* # Embedia Vue core license
   const embedTwitter = (video, container, cssname) => {
+    
     const extractTwitterTweetId = (url) => {
-      const regex = /\/(?:i\/)?status\/(\d+)/; // Extracts tweet ID
+      const regex = /\/status\/(\d+)/;
       const match = url.match(regex);
-      return match ? match[1] : null; // Return tweet ID or null
+  
+      if (match && match[1]) {
+        return match[1];
+      } else {
+        return null; // No match found
+      }
     };
   
     try {
-      // Validate container
-      if (!(container instanceof Node)) {
-        console.error("Container is not a valid DOM node.");
-        return;
-      }
+      const videoUrl = video.videoUrl;
+      const tweetId = extractTwitterTweetId(videoUrl);
   
-      const clip = video.videoUrl; // Get the clip URL from the video object
-      const tweetId = extractTwitterTweetId(clip); // Extract tweet ID
+      // Create a div to hold the embedded tweet
+      const tweetContainer = document.createElement("div");
   
-      // Validate URL and Tweet ID
-      if (!clip || !tweetId) {
-        console.error("Invalid video clip URL or tweet ID.");
-        return;
-      }
+      // Apply the cssname to the tweetContainer
+      tweetContainer.className = `video-${videoCount} ${cssname}`;
   
-      // Create the blockquote element
-      const tweetContainer = document.createElement("blockquote");
-      tweetContainer.className = `twitter-tweet ${cssname}`;
-   
+      // Set the ID for the tweet container
+      tweetContainer.id = `tweet-${tweetId}`;
   
-      // Construct dynamic HTML based on the clip URL
-      tweetContainer.innerHTML = `
-        <p lang="en" style="min-width: ${video.width}px; display: block;">
-          <a href="${clip}" style="display: inline-block; min-width: ${video.width}px;">
-          </a>
-        </p>
-      `;
-  
-      // Append the tweet container to the provided container
-      container.appendChild(tweetContainer);
-  
-      // Add the Twitter widget script to the page
+      // Add the Twitter widget script to the page and wait for it to load
       const twitterWidgetScript = document.createElement("script");
@@ -239,6 +226,9 @@ twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
       twitterWidgetScript.addEventListener("load", () => {
-        window.twttr.widgets.load(); // Load the widget
+        // The Twitter widget script has loaded, and the tweet is now embedded.
+        // You can perform any additional actions here if needed.
+        window.twttr.widgets.createTweet(tweetId, tweetContainer);
       });
   
-      // Append the script after the tweet container
+      // Append the tweet container to the provided container
+      container.appendChild(tweetContainer);
       container.appendChild(twitterWidgetScript);
@@ -250,49 +240,24 @@
   };
-
-
-
   
-
-
   
 
-
-
-
   const embedX = (video, container, cssname) => {
     const extractTwitterTweetId = (url) => {
-      url = url.replace("x.com", "twitter.com");
-      const regex = /\/(?:i\/)?status\/(\d+)/;
+      const regex = /\/status\/(\d+)/;
       const match = url.match(regex);
-      return match ? match[1] : null;
+      return match ? match[1] : null; // Return tweet ID or null
     };
   
     try {
-      if (!(container instanceof Node)) {
-        console.error("Container is not a valid DOM node.");
-        return;
-      }
+      const videoUrl = video.videoUrl;
+      const tweetId = extractTwitterTweetId(videoUrl);
   
-      const clip = video.videoUrl;
-      const tweetId = extractTwitterTweetId(clip);
-  
-      if (!clip || !tweetId) {
-        console.error("Invalid video clip URL or tweet ID.");
-        return;
+      if (!tweetId) {
+        throw new Error("Invalid video URL"); // Throw error if tweet ID not found
       }
   
-      const tweetContainer = document.createElement("blockquote");
-      tweetContainer.className = `twitter-tweet ${cssname}`;
- 
+      const tweetContainer = document.createElement("div");
+      tweetContainer.className = `video-${videoCount} ${cssname}`;
+      tweetContainer.id = `tweet-${tweetId}`;
   
-      // Construct the <a> tag with the correct URL
-      tweetContainer.innerHTML = `
-        <p lang="en" style="min-width: ${video.width}px; display: block;">
-          <a href="https://twitter.com/i/status/${tweetId}" style="display: inline-block; min-width: ${video.width}px;">
-          </a>
-        </p>
-      `;
-  
-      container.appendChild(tweetContainer);
-  
       const twitterWidgetScript = document.createElement("script");
@@ -304,7 +269,7 @@ twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
       twitterWidgetScript.addEventListener("load", () => {
-        window.twttr.widgets.load();
+        window.twttr.widgets.createTweet(tweetId, tweetContainer);
       });
   
+      container.appendChild(tweetContainer);
       container.appendChild(twitterWidgetScript);
-  
     } catch (error) {
@@ -314,3 +279,12 @@ console.error("Error embedding Twitter content:", error);
   };
-    
+  
+  
+
+
+
+  
+
+
+
+
     // Map to track embedded TikTok videos
@@ -317,0 +291,0 @@ const embeddedTikTokVideos = new Map();

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

Number of lines in readme file

286

increased by1.06%

Worsened metrics

Total package byte prevSize

61237

decreased by-3.52%

Lines of code

824

decreased by-6.47%

No dependency changes