embedia-vue - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

dist/index.es.js

@@ -1,5 +0,5 @@
-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);
+import { ref as g, onMounted as b, watch as v, openBlock as E, createElementBlock as $, normalizeClass as I, normalizeStyle as C, pushScopeId as _, popScopeId as U, createElementVNode as k } from "vue";
+let h = 1;
+const x = (e, t, o, a) => {
+  const r = e.videoUrl, i = Number(e.width) + 140, c = T(r);
   if (!c)
@@ -9,15 +9,15 @@ throw new Error("Invalid Instagram video URL");
   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));
+  let s = document.querySelector(`.${o}`);
+  s || (s = document.createElement("div"), s.className = `video-${a} ${o}`, n.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 = `${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")) {
+  if (d.href = r, l.appendChild(d), s.appendChild(l), !document.getElementById("instagramEmbedScript")) {
     const m = document.createElement("script");
     m.async = !0, m.id = "instagramEmbedScript", m.src = "//www.instagram.com/embed.js", n.appendChild(m);
   }
-}, I = (e) => {
+}, T = (e) => {
   const t = /\/([a-zA-Z0-9_-]+)\/?$/, o = e.match(t);
   return o ? o[1] : null;
-}, _ = (e) => {
+}, V = (e) => {
   const t = e.match(/\/(?:video|hub)\/([^_]+)/) || e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
@@ -27,29 +27,41 @@ if (t && t[1])
   throw new Error("Invalid Dailymotion video URL");
-}, 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) => {
+}, S = (e, t, o) => {
+  const a = e.clip, r = V(a), i = e.autoplay ? "1" : "0", c = e.controls ? "1" : "0", n = e.fullscreen ? "1" : "0", s = document.createElement("iframe");
+  s.src = `https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${c}&fullscreen=${n}`, s.width = e.width || 640, s.height = e.height || 360, s.allowFullscreen = e.fullscreen !== !1, s.frameBorder = "0", s.className = o, t.appendChild(s);
+}, N = (e) => {
   const t = e.match(/\/(\d+)/);
   return t && t[1] ? t[1] : (console.error("Invalid Vimeo video URL"), "");
-}, T = (e, t, o) => {
-  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: a,
-      width: s,
+}, L = (e, t, o) => {
+  const a = e.width || 640, r = e.height || 360, i = e.controls !== void 0 ? e.controls : !0, c = e.autoplay === !0, n = e.loop === "true", s = e.fullscreen === !0, l = N(e.clip), d = document.createElement("div");
+  d.className = `video-${l} ${o}`, d.dataset.eWidth = a, d.dataset.eHeight = r, d.dataset.efullscreen = s, d.dataset.eVideoId = l, t.appendChild(d);
+  const m = document.createElement("script");
+  return m.src = "https://player.vimeo.com/api/player.js", m.async = !0, m.onload = () => {
+    new window.Vimeo.Player(d, {
+      id: l,
+      width: a,
       height: r,
       controls: i,
+      // Show controls
       autoplay: c,
+      // Autoplay based on the passed value (true/false)
       muted: c,
-      loop: n
-      // Set loop based on boolean value
+      // Mute if autoplay is true (to comply with browser restrictions)
+      loop: n,
+      // Loop based on the loop value
+      fullscreen: s
     }).ready().then(() => {
+      if (console.log("Vimeo player is ready"), s === !1) {
+        const u = d.querySelector("iframe"), w = u.contentDocument || u.contentWindow.document, y = setInterval(() => {
+          const f = w.querySelector(".vimeo-control-bar .fullscreen");
+          f && (f.style.display = "none", clearInterval(y));
+        }, 100);
+      }
+    }).catch((u) => {
+      console.error("Error loading Vimeo player:", u);
     });
-  }, document.body.appendChild(d), () => {
-    l && (l.innerHTML = ""), document.body.removeChild(d);
+  }, document.body.appendChild(m), () => {
+    d && (d.innerHTML = ""), m && m.parentNode && document.body.removeChild(m);
   };
-}, V = (e, t, o) => {
-  const s = (r) => {
+}, R = (e, t, o) => {
+  const a = (r) => {
     const i = /\/status\/(\d+)/, c = r.match(i);
@@ -59,4 +71,4 @@ return c && c[1] ? c[1] : null;
   try {
-    const r = e.videoUrl, i = s(r), c = document.createElement("div");
-    c.className = `video-${u} ${o}`, c.id = `tweet-${i}`;
+    const r = e.videoUrl, i = a(r), c = document.createElement("div");
+    c.className = `video-${h} ${o}`, c.id = `tweet-${i}`;
     const n = document.createElement("script");
@@ -69,4 +81,4 @@ n.src = "https://platform.twitter.com/widgets.js", n.charset = "utf-8", n.async = !0, n.addEventListener("load", () => {
   }
-}, S = (e, t, o) => {
-  const s = (r) => {
+}, B = (e, t, o) => {
+  const a = (r) => {
     const i = /\/status\/(\d+)/, c = r.match(i);
@@ -76,7 +88,7 @@ return c ? c[1] : null;
   try {
-    const r = e.videoUrl, i = s(r);
+    const r = e.videoUrl, i = a(r);
     if (!i)
       throw new Error("Invalid video URL");
     const c = document.createElement("div");
-    c.className = `video-${u} ${o}`, c.id = `tweet-${i}`;
+    c.className = `video-${h} ${o}`, c.id = `tweet-${i}`;
     const n = document.createElement("script");
@@ -89,18 +101,18 @@ n.src = "https://platform.twitter.com/widgets.js", n.charset = "utf-8", n.async = !0, n.addEventListener("load", () => {
   }
-}, h = /* @__PURE__ */ new Map(), A = (e, t, o) => {
-  const s = e.videoUrl;
-  if (h.has(s) || h.has(s))
+}, p = /* @__PURE__ */ new Map(), q = (e, t, o) => {
+  const a = e.videoUrl;
+  if (p.has(a) || p.has(a))
     return;
-  h.set(s, !0);
+  p.set(a, !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() {
+  c.open("GET", `https://www.tiktok.com/oembed?url=${encodeURIComponent(a)}`, !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 s = document.createElement("div"), l = Date.now();
+      if (s.className = `video-${l} ${o}`, s.style.width = r, s.style.height = i, s.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);
+      t ? t.appendChild(s) : document.body && document.body.appendChild(s);
     } else
@@ -111,6 +123,8 @@ console.error("Failed to fetch TikTok oEmbed data: " + c.statusText);
   }, c.send();
-}, 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) => {
+}, M = (e, t, o) => {
+  const a = e.clip, r = e.autoplay ?? !0, i = r, c = e.width || 640, n = e.height || 360, s = new URL("https://www.facebook.com/plugins/video.php");
+  s.searchParams.set("href", a), s.searchParams.set("width", c), s.searchParams.set("height", n), s.searchParams.set("show_text", "false"), s.searchParams.set("autoplay", r ? "true" : "false"), s.searchParams.set("muted", i ? "1" : "0");
+  const l = document.createElement("iframe");
+  l.src = s.toString(), l.width = c, l.height = n, l.frameBorder = "0", l.allow = "autoplay; fullscreen", l.allowFullscreen = e.fullscreen !== !1, l.className = `video-${h} ${o} custom-facebook`, h++, t.appendChild(l);
+}, P = (e) => {
   const t = e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
@@ -123,3 +137,3 @@ if (t && t[1])
   throw new Error("Invalid YouTube video URL");
-}, L = (e, t, o) => {
+}, A = (e, t, o) => {
   if (!t) {
@@ -129,7 +143,7 @@ console.error("Container element not found.");
   }
-  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()) || "";
+  const a = e.autoplay ? 1 : 0, r = e.autoplay || e.muted ? 1 : 0, i = e.autoplay || e.loop ? 1 : 0, c = P(e.videoUrl), n = document.createElement("iframe");
+  n.src = `https://www.youtube.com/embed/${c}?autoplay=${a}&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);
+}, D = (e) => {
+  var a;
+  const t = ((a = e.cssname) == null ? void 0 : a.trim()) || "";
   if (!t.match(/^[a-zA-Z_][\w-]*$/))
@@ -156,26 +170,26 @@ throw console.error("Invalid class name:", t), new Error("Invalid class name");
   if (e.videoUrl.includes("youtube.com") || e.videoUrl.includes("youtu.be"))
-    L(e, o, t);
+    A(e, o, t);
   else if (e.videoUrl.includes("facebook.com") || e.videoUrl.includes("fb.com"))
-    N(e, o, t);
+    M(e, o, t);
   else if (e.videoUrl.includes("tiktok.com") || e.videoUrl.includes("tiktok"))
-    A(e, o, t);
+    q(e, o, t);
   else if (e.videoUrl.includes("twitter.com"))
-    V(e, o, t);
+    R(e, o, t);
   else if (e.videoUrl.includes("x.com"))
-    S(e, o, t);
+    B(e, o, t);
   else if (e.videoUrl.includes("vimeo.com"))
-    T(e, o, t);
+    L(e, o, t);
   else if (e.videoUrl.includes("dailymotion.com") || e.videoUrl.includes("dailymotion"))
-    k(e, o, t);
+    S(e, o, t);
   else if (e.videoUrl.includes("instagram.com") || e.videoUrl.includes("instagram"))
-    C(e, o, t);
+    x(e, o, t);
   else
     throw new Error("Invalid video URL");
 };
-const M = (e, t) => {
+const W = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [s, r] of t)
-    o[s] = r;
+  for (const [a, r] of t)
+    o[a] = r;
   return o;
-}, q = {
+}, j = {
   name: "EmbediaVue",
@@ -213,5 +227,5 @@ props: {
   setup(e) {
-    const t = p("56.25%");
-    w(() => {
-      B({
+    const t = g("56.25%");
+    b(() => {
+      D({
         videoUrl: e.clip,
@@ -225,7 +239,7 @@ width: e.width,
       }), o(e.width, e.height);
-    }), f(() => [e.width, e.height], ([s, r]) => {
-      o(s, r);
+    }), v(() => [e.width, e.height], ([a, r]) => {
+      o(a, r);
     }, { immediate: !0 });
-    function o(s, r) {
-      s && r ? t.value = `${r / s * 100}%` : t.value = "56.25%";
+    function o(a, r) {
+      a && r ? t.value = `${r / a * 100}%` : t.value = "56.25%";
     }
@@ -236,14 +250,14 @@ return {
   }
-}, j = (e) => ($("data-v-d26b150f"), e = e(), E(), e), W = /* @__PURE__ */ j(() => /* @__PURE__ */ U("div", { class: "video-content" }, null, -1)), z = [
-  W
+}, z = (e) => (_("data-v-d26b150f"), e = e(), U(), e), H = /* @__PURE__ */ z(() => /* @__PURE__ */ k("div", { class: "video-content" }, null, -1)), F = [
+  H
 ];
-function D(e, t, o, s, r, i) {
-  return y(), b("div", {
-    class: g([o.cssname, "responsive-container"]),
-    style: v({ "--aspect-ratio": s.aspectRatio, width: "auto", maxWidth: "100%" })
-  }, z, 6);
+function Y(e, t, o, a, r, i) {
+  return E(), $("div", {
+    class: I([o.cssname, "responsive-container"]),
+    style: C({ "--aspect-ratio": a.aspectRatio, width: "auto", maxWidth: "100%" })
+  }, F, 6);
 }
-const F = /* @__PURE__ */ M(q, [["render", D], ["__scopeId", "data-v-d26b150f"]]);
+const X = /* @__PURE__ */ W(j, [["render", Y], ["__scopeId", "data-v-d26b150f"]]);
 export {
-  F as EmbediaVue
+  X as EmbediaVue
 };

dist/index.js

@@ -1,2 +0,2 @@
-"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=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue");let p=1;const g=(e,t,o,a)=>{const r=e.videoUrl,i=Number(e.width)+140,c=v(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 s=document.querySelector(`.${o}`);s||(s=document.createElement("div"),s.className=`video-${a} ${o}`,n.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=`${i}px`,l.style.maxWidth="380px",l.style.maxheight="520px";const d=document.createElement("a");if(d.href=r,l.appendChild(d),s.appendChild(l),!document.getElementById("instagramEmbedScript")){const m=document.createElement("script");m.async=!0,m.id="instagramEmbedScript",m.src="//www.instagram.com/embed.js",n.appendChild(m)}},v=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},E=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")},$=(e,t,o)=>{const a=e.clip,r=E(a),i=e.autoplay?"1":"0",c=e.controls?"1":"0",n=e.fullscreen?"1":"0",s=document.createElement("iframe");s.src=`https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${c}&fullscreen=${n}`,s.width=e.width||640,s.height=e.height||360,s.allowFullscreen=e.fullscreen!==!1,s.frameBorder="0",s.className=o,t.appendChild(s)},I=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},C=(e,t,o)=>{const a=e.width||640,r=e.height||360,i=e.controls!==void 0?e.controls:!0,c=e.autoplay===!0,n=e.loop==="true",s=e.fullscreen===!0,l=I(e.clip),d=document.createElement("div");d.className=`video-${l} ${o}`,d.dataset.eWidth=a,d.dataset.eHeight=r,d.dataset.efullscreen=s,d.dataset.eVideoId=l,t.appendChild(d);const m=document.createElement("script");return m.src="https://player.vimeo.com/api/player.js",m.async=!0,m.onload=()=>{new window.Vimeo.Player(d,{id:l,width:a,height:r,controls:i,autoplay:c,muted:c,loop:n,fullscreen:s}).ready().then(()=>{if(console.log("Vimeo player is ready"),s===!1){const h=d.querySelector("iframe"),y=h.contentDocument||h.contentWindow.document,b=setInterval(()=>{const w=y.querySelector(".vimeo-control-bar .fullscreen");w&&(w.style.display="none",clearInterval(b))},100)}}).catch(h=>{console.error("Error loading Vimeo player:",h)})},document.body.appendChild(m),()=>{d&&(d.innerHTML=""),m&&m.parentNode&&document.body.removeChild(m)}},_=(e,t,o)=>{const a=r=>{const i=/\/status\/(\d+)/,c=r.match(i);return c&&c[1]?c[1]:null};try{const r=e.videoUrl,i=a(r),c=document.createElement("div");c.className=`video-${p} ${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=(e,t,o)=>{const a=r=>{const i=/\/status\/(\d+)/,c=r.match(i);return c?c[1]:null};try{const r=e.videoUrl,i=a(r);if(!i)throw new Error("Invalid video URL");const c=document.createElement("div");c.className=`video-${p} ${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)}},f=new Map,k=(e,t,o)=>{const a=e.videoUrl;if(f.has(a)||f.has(a))return;f.set(a,!0);const r=e.width||"100%",i=e.height||"100%",c=new XMLHttpRequest;c.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(a)}`,!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 s=document.createElement("div"),l=Date.now();if(s.className=`video-${l} ${o}`,s.style.width=r,s.style.height=i,s.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)}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()},x=(e,t,o)=>{const a=e.clip,r=e.autoplay??!0,i=r,c=e.width||640,n=e.height||360,s=new URL("https://www.facebook.com/plugins/video.php");s.searchParams.set("href",a),s.searchParams.set("width",c),s.searchParams.set("height",n),s.searchParams.set("show_text","false"),s.searchParams.set("autoplay",r?"true":"false"),s.searchParams.set("muted",i?"1":"0");const l=document.createElement("iframe");l.src=s.toString(),l.width=c,l.height=n,l.frameBorder="0",l.allow="autoplay; fullscreen",l.allowFullscreen=e.fullscreen!==!1,l.className=`video-${p} ${o} custom-facebook`,p++,t.appendChild(l)},T=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")},V=(e,t,o)=>{if(!t){console.error("Container element not found.");return}const a=e.autoplay?1:0,r=e.autoplay||e.muted?1:0,i=e.autoplay||e.loop?1:0,c=T(e.videoUrl),n=document.createElement("iframe");n.src=`https://www.youtube.com/embed/${c}?autoplay=${a}&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)},S=e=>{var a;const t=((a=e.cssname)==null?void 0:a.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} {
@@ -10,2 +10,2 @@ display: flex;
             }
-          `,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;
+          `,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"))V(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))x(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))k(e,o,t);else if(e.videoUrl.includes("twitter.com"))_(e,o,t);else if(e.videoUrl.includes("x.com"))U(e,o,t);else if(e.videoUrl.includes("vimeo.com"))C(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))$(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))g(e,o,t);else throw new Error("Invalid video URL")};const N=(e,t)=>{const o=e.__vccOpts||e;for(const[a,r]of t)o[a]=r;return o},L={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=u.ref("56.25%");u.onMounted(()=>{S({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)}),u.watch(()=>[e.width,e.height],([a,r])=>{o(a,r)},{immediate:!0});function o(a,r){a&&r?t.value=`${r/a*100}%`:t.value="56.25%"}return{aspectRatio:t}}},R=e=>(u.pushScopeId("data-v-d26b150f"),e=e(),u.popScopeId(),e),q=R(()=>u.createElementVNode("div",{class:"video-content"},null,-1)),B=[q];function M(e,t,o,a,r,i){return u.openBlock(),u.createElementBlock("div",{class:u.normalizeClass([o.cssname,"responsive-container"]),style:u.normalizeStyle({"--aspect-ratio":a.aspectRatio,width:"auto",maxWidth:"100%"})},B,6)}const P=N(L,[["render",M],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=P;

package.json

 {
   "name": "embedia-vue",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "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

@@ -73,2 +73,4 @@ <p align="center">
 
+ v1.2.4
+ - Fixed the issue with embedding vimeo.com concerning the autoplay.
 
@@ -78,18 +80,5 @@ v1.2.3
 
- v1.2.2
- - Fixed the issue with embedding x.com, which restores the embedded post with a card rather than just a video.
 
 
- v1.1.1
- - The border line has been removed from the embedded YouTube clip.
- 
 
-  v1.1.2
- - Fixed the issue with embedding x.com.
-
-
- v1.1.3
- - Fixed the issue with muted vimeo.
-
-
 -------
@@ -126,4 +115,4 @@
 Required? `fullscreen` |  optional | no | no |  no
-Required? `controls` |  |  |  |  
-Required? `autoplay` |   |  |  |   
+Required? `controls` | no | no  | no | no
+Required? `autoplay` | no  | no | no  | no 
 Required? `cssname` |  optional  | optional | optional |  optional
@@ -141,3 +130,3 @@ Required? `clip` |  yes | yes | yes | yes
 Required? `fullscreen` | optional | optional | optional
-Required? `controls` |  optional | optional | optional
+Required? `controls` |  optional | optional | no
 Required? `autoplay` | optional | optional |optional
@@ -144,0 +133,0 @@ Required? `cssname` | optional | optional | optional

src/core/embedLink.js

@@ -102,9 +102,11 @@ /* # Embedia Vue core license
     
+  
     const embedDailymotion = (video, container, cssname) => {
-      const videoUrl = video.videoUrl;
-      const videoId = extractDailymotionVideoId(videoUrl);
+      const clip = video.clip;
+      const videoId = extractDailymotionVideoId(clip);
       const autoplayValue = video.autoplay ? '1' : '0';
       const controlsValue = video.controls ? '1' : '0';
       const fullscreenValue = video.fullscreen ? '1' : '0';
-    
+  
+      // Log iframe URL for debugging
       const iframe = document.createElement("iframe");
@@ -114,9 +116,12 @@ iframe.src = `https://www.dailymotion.com/embed/video/${videoId}?autoplay=${autoplayValue}&controls=${controlsValue}&fullscreen=${fullscreenValue}`;
       iframe.height = video.height || 360;
+  
+      iframe.allowFullscreen = video.fullscreen !== false; // Allow fullscreen unless explicitly disabled
+    
       iframe.frameBorder = "0";
-      iframe.allowFullscreen = true;
-    
+  
+  
       iframe.className = cssname;
-    
       container.appendChild(iframe);
-    };
+  };
+  
     
@@ -127,8 +132,4 @@
     
-    
-    
-    
-    
-    
-        // Function to extract Vimeo video ID from a URL
+
+// Function to extract Vimeo video ID from a URL
 const extractVimeoVideoId = (url) => {
@@ -143,53 +144,89 @@ const videoIdMatch = url.match(/\/(\d+)/);
 };
+
+// Function to embed Vimeo video
+const embedVimeo = (video, container, cssname) => {
+  const emWidth = video.width || 640;  // Default width if not provided
+  const emHeight = video.height || 360; // Default height if not provided
+  const controlsValue = video.controls !== undefined ? video.controls : true;  // Default to true if not provided
+  const autoplayValue = video.autoplay === true; // Autoplay set to boolean true
+  const loopValue = video.loop === "true"; // Convert loop to boolean
+  const fullscreenValue = video.fullscreen === true;  // Fullscreen option, converted to boolean
+
+  // Extract the Vimeo video ID from the URL
+  const videoId = extractVimeoVideoId(video.clip);
   
-  const embedVimeo = (video, container, cssname) => {
-    const emWidth = video.width || 640;
-    const emHeight = video.height || 360;
-    const controlsValue = video.controls;
-    const autoplayValue = video.autoplay === "true"; // Convert to boolean
-    const loopValue = video.loop === "true"; // Convert to boolean
-  
- 
-    const videoId = extractVimeoVideoId(video.videoUrl);
-  
-    const playerDiv = document.createElement("div");
-    playerDiv.className = `video-${videoCount} ${cssname}`;
-    playerDiv.dataset.eWidth = emWidth;
-    playerDiv.dataset.eHeight = emHeight;
-    playerDiv.dataset.efullscreen = video.fullscreen;
-    playerDiv.dataset.eVideoId = videoId;
-  
-    container.appendChild(playerDiv);
-  
-    const script = document.createElement("script");
-    script.src = "https://player.vimeo.com/api/player.js";
-    script.async = true;
-  
-    script.onload = () => {
-      const vimeoPlayer = new window.Vimeo.Player(playerDiv, {
-        id: videoId,
-        width: emWidth,
-        height: emHeight,
-        controls: controlsValue,
-        autoplay: autoplayValue,
-        muted: autoplayValue,
-        loop: loopValue, // Set loop based on boolean value
-      });
-  
-      vimeoPlayer.ready().then(() => {
-        // Additional player methods can be used here if needed
-      });
-    };
-  
-    document.body.appendChild(script);
-  
-    return () => {
-      if (playerDiv) {
-        playerDiv.innerHTML = "";
+  // Create a div to hold the Vimeo player
+  const playerDiv = document.createElement("div");
+  playerDiv.className = `video-${videoId} ${cssname}`;
+  playerDiv.dataset.eWidth = emWidth;
+  playerDiv.dataset.eHeight = emHeight;
+  playerDiv.dataset.efullscreen = fullscreenValue; // Data attribute for fullscreen
+  playerDiv.dataset.eVideoId = videoId;
+
+  // Append the player container to the given container
+  container.appendChild(playerDiv);
+
+  // Load the Vimeo API script dynamically
+  const script = document.createElement("script");
+  script.src = "https://player.vimeo.com/api/player.js";
+  script.async = true;
+
+  script.onload = () => {
+    // Initialize the Vimeo player after the script has loaded
+    const vimeoPlayer = new window.Vimeo.Player(playerDiv, {
+      id: videoId,
+      width: emWidth,
+      height: emHeight,
+      controls: controlsValue,  // Show controls
+      autoplay: autoplayValue,  // Autoplay based on the passed value (true/false)
+      muted: autoplayValue,     // Mute if autoplay is true (to comply with browser restrictions)
+      loop: loopValue,       // Loop based on the loop value
+      fullscreen: fullscreenValue,      
+    });
+
+    // Ready callback
+    vimeoPlayer.ready().then(() => {
+      console.log('Vimeo player is ready');
+
+      // If fullscreen is set to false, hide the fullscreen button from the controls
+      if (fullscreenValue === false) {
+        const iframe = playerDiv.querySelector("iframe");
+        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+        
+        // Wait for the player to load before attempting to hide fullscreen button
+        const interval = setInterval(() => {
+          const fullscreenButton = iframeDocument.querySelector('.vimeo-control-bar .fullscreen');
+          
+          if (fullscreenButton) {
+            fullscreenButton.style.display = 'none';  // Hide fullscreen button in controls
+            clearInterval(interval);
+          }
+        }, 100);
       }
+    }).catch((error) => {
+      console.error('Error loading Vimeo player:', error);
+    });
+  };
+
+  // Append the script to the body to load it
+  document.body.appendChild(script);
+
+  // Cleanup function to remove the player and script when no longer needed
+  return () => {
+    if (playerDiv) {
+      playerDiv.innerHTML = "";
+    }
+    if (script && script.parentNode) {
       document.body.removeChild(script);
-    };
+    }
   };
+};
     
     
+
+
+
+
+
+    
   const embedTwitter = (video, container, cssname) => {
@@ -430,22 +467,28 @@
     
-    
     const embedFacebook = (video, container, cssname) => {
-      const videoUrl = video.videoUrl;
-      const autoplay = video.autoplay ? 'autoplay=true' : 'autoplay=false';
-      const muted = autoplay ? 'muted=true' : 'muted=false';
+      const clip = video.clip;
+      const autoplayc = video.autoplay ?? true; // Default to true if not specified
+      const muted = autoplayc; // Default to true if not specified
       const emWidth = video.width || 640;
       const emHeight = video.height || 360;
     
+      // Construct the video URL with parameters
+      const videoSrc = new URL('https://www.facebook.com/plugins/video.php');
+      videoSrc.searchParams.set('href', clip);
+      videoSrc.searchParams.set('width', emWidth);
+      videoSrc.searchParams.set('height', emHeight);
+      videoSrc.searchParams.set('show_text', 'false');
+      videoSrc.searchParams.set('autoplay', autoplayc ? 'true' : 'false'); // Autoplay only if muted
+      videoSrc.searchParams.set('muted', muted ? '1' : '0');
+    
       // Create an iframe element for the Facebook video
       const iframe = document.createElement('iframe');
-      iframe.setAttribute('src', `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(videoUrl)}&width=${emWidth}&height=${emHeight}&show_text=false&${autoplay}&${muted}`);
-      iframe.setAttribute('width', emWidth);
-      iframe.setAttribute('height', emHeight);
-      iframe.setAttribute('frameborder', '0');
+      iframe.src = videoSrc.toString();
+      iframe.width = emWidth;
+      iframe.height = emHeight;
+      iframe.frameBorder = '0';
+       // Allow autoplay and fullscreen permissions
+      iframe.allow = 'autoplay; fullscreen'; // Permissions for autoplay and fullscreen
+      iframe.allowFullscreen = video.fullscreen !== false; // Allow fullscreen unless explicitly disabled
     
-      if (video.fullscreen) {
-        iframe.setAttribute('allowfullscreen', 'true');
-      }
-    
-    
       iframe.className = `video-${videoCount} ${cssname} custom-facebook`;
@@ -455,2 +498,3 @@
     
+      // Append iframe to the container
       container.appendChild(iframe);
@@ -457,0 +501,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

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

Unpopular package

Quality

This package is not very popular.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64390

increased by5.15%

Lines of code

876

increased by6.31%

Number of medium quality alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

275

decreased by-3.85%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes