embedia-vue - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

dist/index.es.js

@@ -43,4 +43,4 @@ import { ref as h, onMounted as p, watch as w, openBlock as f, createElementBlock as y, normalizeClass as b, normalizeStyle as g, pushScopeId as v, popScopeId as $, createElementVNode as E } from "vue";
       autoplay: n,
-      muted: !0,
-      // Set muted to true for autoplay
+      muted: !!n,
+      // Set muted to true if autoplay is true
       loop: c
@@ -109,3 +109,3 @@ }).ready().then(() => {
   a.setAttribute("src", `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${n}&height=${c}&show_text=false&${r}&${i}`), a.setAttribute("width", n), a.setAttribute("height", c), a.setAttribute("frameborder", "0"), e.fullscreen && a.setAttribute("allowfullscreen", "true"), a.className = `video-${m} ${o} custom-facebook`, m++, t.appendChild(a);
-}, L = (e) => {
+}, N = (e) => {
   const t = e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
@@ -118,3 +118,3 @@ if (t && t[1])
   throw new Error("Invalid YouTube video URL");
-}, N = (e, t, o) => {
+}, R = (e, t, o) => {
   if (!t) {
@@ -124,5 +124,5 @@ 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, n = L(e.videoUrl), c = document.createElement("iframe");
+  const s = e.autoplay ? 1 : 0, r = e.autoplay || e.muted ? 1 : 0, i = e.autoplay || e.loop ? 1 : 0, n = N(e.videoUrl), c = document.createElement("iframe");
   c.src = `https://www.youtube.com/embed/${n}?autoplay=${s}&mute=${r}&loop=${i ? 1 : 0}&controls=${e.controls ? 1 : 0}`, c.width = e.width || 640, c.height = e.height || 360, c.frameborder = "0", c.style.border = "none", e.fullscreen && c.setAttribute("allow", "fullscreen"), c.className = o, t.appendChild(c);
-}, R = (e) => {
+}, L = (e) => {
   var s;
@@ -151,3 +151,3 @@ const t = ((s = e.cssname) == null ? void 0 : s.trim()) || "";
   if (e.videoUrl.includes("youtube.com") || e.videoUrl.includes("youtu.be"))
-    N(e, o, t);
+    R(e, o, t);
   else if (e.videoUrl.includes("facebook.com") || e.videoUrl.includes("fb.com"))
@@ -210,3 +210,3 @@ S(e, o, t);
     p(() => {
-      R({
+      L({
         videoUrl: e.clip,
@@ -213,0 +213,0 @@ width: e.width,

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue");let m=1;const p=(e,t,o,s)=>{const r=e.videoUrl,i=w(r);if(!i)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 c=document.querySelector(`.${o}`);c||(c=document.createElement("div"),c.className=`video-${s} ${o}`,n.appendChild(c));const a=document.createElement("blockquote");a.setAttribute("class","instagram-media"),a.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${i}/`),a.setAttribute("data-instgrm-version","13");const l=document.createElement("a");if(l.setAttribute("href",r),a.appendChild(l),c.appendChild(a),!document.getElementById("instagramEmbedScript")){const d=document.createElement("script");d.setAttribute("async",""),d.setAttribute("id","instagramEmbedScript"),d.setAttribute("src","//www.instagram.com/embed.js"),n.appendChild(d)}},w=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},f=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")},y=(e,t,o)=>{const s=e.videoUrl,r=f(s),i=e.autoplay?"1":"0",n=e.controls?"1":"0",c=e.fullscreen?"1":"0",a=document.createElement("iframe");a.src=`https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${n}&fullscreen=${c}`,a.width=e.width||640,a.height=e.height||360,a.frameBorder="0",a.allowFullscreen=!0,a.className=o,t.appendChild(a)},b=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},g=(e,t,o)=>{const s=e.width||640,r=e.height||360,i=e.controls,n=e.autoplay,c=e.loop,a=b(e.videoUrl),l=document.createElement("div");l.className=`video-${m} ${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:n,muted:!0,loop:c}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},v=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,n=r.match(i);return n&&n[1]?n[1]:null};try{const r=e.videoUrl,i=s(r),n=document.createElement("div");n.className=`video-${m} ${o}`,n.id=`tweet-${i}`;const c=document.createElement("script");c.src="https://platform.twitter.com/widgets.js",c.charset="utf-8",c.async=!0,c.addEventListener("load",()=>{window.twttr.widgets.createTweet(i,n)}),t.appendChild(n),t.appendChild(c)}catch(r){console.error("Error embedding Twitter content:",r)}},$=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,n=r.match(i);return n?n[1]:null};try{const r=e.videoUrl,i=s(r);if(!i)throw new Error("Invalid video URL");const n=document.createElement("div");n.className=`video-${m} ${o}`,n.id=`tweet-${i}`;const c=document.createElement("script");c.src="https://platform.twitter.com/widgets.js",c.charset="utf-8",c.async=!0,c.addEventListener("load",()=>{window.twttr.widgets.createTweet(i,n)}),t.appendChild(n),t.appendChild(c)}catch(r){console.error("Error embedding Twitter content:",r)}},h=new Map,E=(e,t,o)=>{const s=e.videoUrl;if(h.has(s)||h.has(s))return;h.set(s,!0);const r=e.width||"100%",i=e.height||"100%",n=new XMLHttpRequest;n.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`,!0),n.onload=function(){if(n.status>=200&&n.status<300){const c=JSON.parse(n.responseText);c.html&&(c.html=c.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=c.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: "+n.statusText)},n.onerror=function(){console.error("An error occurred while embedding TikTok video.")},n.send()},U=(e,t,o)=>{const s=e.videoUrl,r=e.autoplay?"autoplay=true":"autoplay=false",i=r?"muted=true":"muted=false",n=e.width||640,c=e.height||360,a=document.createElement("iframe");a.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${n}&height=${c}&show_text=false&${r}&${i}`),a.setAttribute("width",n),a.setAttribute("height",c),a.setAttribute("frameborder","0"),e.fullscreen&&a.setAttribute("allowfullscreen","true"),a.className=`video-${m} ${o} custom-facebook`,m++,t.appendChild(a)},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")},I=(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,n=C(e.videoUrl),c=document.createElement("iframe");c.src=`https://www.youtube.com/embed/${n}?autoplay=${s}&mute=${r}&loop=${i?1:0}&controls=${e.controls?1:0}`,c.width=e.width||640,c.height=e.height||360,c.frameborder="0",c.style.border="none",e.fullscreen&&c.setAttribute("allow","fullscreen"),c.className=o,t.appendChild(c)},_=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 m=1;const p=(e,t,o,s)=>{const r=e.videoUrl,i=w(r);if(!i)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 c=document.querySelector(`.${o}`);c||(c=document.createElement("div"),c.className=`video-${s} ${o}`,n.appendChild(c));const a=document.createElement("blockquote");a.setAttribute("class","instagram-media"),a.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${i}/`),a.setAttribute("data-instgrm-version","13");const l=document.createElement("a");if(l.setAttribute("href",r),a.appendChild(l),c.appendChild(a),!document.getElementById("instagramEmbedScript")){const d=document.createElement("script");d.setAttribute("async",""),d.setAttribute("id","instagramEmbedScript"),d.setAttribute("src","//www.instagram.com/embed.js"),n.appendChild(d)}},w=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},f=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")},y=(e,t,o)=>{const s=e.videoUrl,r=f(s),i=e.autoplay?"1":"0",n=e.controls?"1":"0",c=e.fullscreen?"1":"0",a=document.createElement("iframe");a.src=`https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${n}&fullscreen=${c}`,a.width=e.width||640,a.height=e.height||360,a.frameBorder="0",a.allowFullscreen=!0,a.className=o,t.appendChild(a)},b=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},g=(e,t,o)=>{const s=e.width||640,r=e.height||360,i=e.controls,n=e.autoplay,c=e.loop,a=b(e.videoUrl),l=document.createElement("div");l.className=`video-${m} ${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:n,muted:!!n,loop:c}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},v=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,n=r.match(i);return n&&n[1]?n[1]:null};try{const r=e.videoUrl,i=s(r),n=document.createElement("div");n.className=`video-${m} ${o}`,n.id=`tweet-${i}`;const c=document.createElement("script");c.src="https://platform.twitter.com/widgets.js",c.charset="utf-8",c.async=!0,c.addEventListener("load",()=>{window.twttr.widgets.createTweet(i,n)}),t.appendChild(n),t.appendChild(c)}catch(r){console.error("Error embedding Twitter content:",r)}},$=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,n=r.match(i);return n?n[1]:null};try{const r=e.videoUrl,i=s(r);if(!i)throw new Error("Invalid video URL");const n=document.createElement("div");n.className=`video-${m} ${o}`,n.id=`tweet-${i}`;const c=document.createElement("script");c.src="https://platform.twitter.com/widgets.js",c.charset="utf-8",c.async=!0,c.addEventListener("load",()=>{window.twttr.widgets.createTweet(i,n)}),t.appendChild(n),t.appendChild(c)}catch(r){console.error("Error embedding Twitter content:",r)}},h=new Map,E=(e,t,o)=>{const s=e.videoUrl;if(h.has(s)||h.has(s))return;h.set(s,!0);const r=e.width||"100%",i=e.height||"100%",n=new XMLHttpRequest;n.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`,!0),n.onload=function(){if(n.status>=200&&n.status<300){const c=JSON.parse(n.responseText);c.html&&(c.html=c.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=c.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: "+n.statusText)},n.onerror=function(){console.error("An error occurred while embedding TikTok video.")},n.send()},U=(e,t,o)=>{const s=e.videoUrl,r=e.autoplay?"autoplay=true":"autoplay=false",i=r?"muted=true":"muted=false",n=e.width||640,c=e.height||360,a=document.createElement("iframe");a.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${n}&height=${c}&show_text=false&${r}&${i}`),a.setAttribute("width",n),a.setAttribute("height",c),a.setAttribute("frameborder","0"),e.fullscreen&&a.setAttribute("allowfullscreen","true"),a.className=`video-${m} ${o} custom-facebook`,m++,t.appendChild(a)},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")},I=(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,n=C(e.videoUrl),c=document.createElement("iframe");c.src=`https://www.youtube.com/embed/${n}?autoplay=${s}&mute=${r}&loop=${i?1:0}&controls=${e.controls?1:0}`,c.width=e.width||640,c.height=e.height||360,c.frameborder="0",c.style.border="none",e.fullscreen&&c.setAttribute("allow","fullscreen"),c.className=o,t.appendChild(c)},_=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} {
@@ -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"))I(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))U(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))E(e,o,t);else if(e.videoUrl.includes("twitter.com"))v(e,o,t);else if(e.videoUrl.includes("x.com"))$(e,o,t);else if(e.videoUrl.includes("vimeo.com"))g(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))y(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))p(e,o,t);else throw new Error("Invalid video URL")};const k=(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=u.ref("56.25%");u.onMounted(()=>{_({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],([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=>(u.pushScopeId("data-v-d26b150f"),e=e(),u.popScopeId(),e),x=V(()=>u.createElementVNode("div",{class:"video-content"},null,-1)),A=[x];function S(e,t,o,s,r,i){return u.openBlock(),u.createElementBlock("div",{class:u.normalizeClass([o.cssname,"responsive-container"]),style:u.normalizeStyle({"--aspect-ratio":s.aspectRatio,width:"auto",maxWidth:"100%"})},A,6)}const L=k(T,[["render",S],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=L;
+          `,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"))I(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))U(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))E(e,o,t);else if(e.videoUrl.includes("twitter.com"))v(e,o,t);else if(e.videoUrl.includes("x.com"))$(e,o,t);else if(e.videoUrl.includes("vimeo.com"))g(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))y(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))p(e,o,t);else throw new Error("Invalid video URL")};const k=(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=u.ref("56.25%");u.onMounted(()=>{_({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],([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=>(u.pushScopeId("data-v-d26b150f"),e=e(),u.popScopeId(),e),x=V(()=>u.createElementVNode("div",{class:"video-content"},null,-1)),S=[x];function A(e,t,o,s,r,i){return u.openBlock(),u.createElementBlock("div",{class:u.normalizeClass([o.cssname,"responsive-container"]),style:u.normalizeStyle({"--aspect-ratio":s.aspectRatio,width:"auto",maxWidth:"100%"})},S,6)}const N=k(T,[["render",A],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=N;

package.json

 {
   "name": "embedia-vue",
-  "version": "1.1.2",
+  "version": "1.1.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

@@ -56,2 +56,3 @@ <p align="center">
 Major Changes:
+
  v1.0.0
@@ -62,2 +63,3 @@ - This library package offers a minimal syntax.
 Minor Changes:
+
  v1.1.0
@@ -67,7 +69,15 @@ - The embedded video for Twitter supports x.com.
 Patch Changes:
+
  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.
+
+
 -------
@@ -74,0 +84,0 @@

src/core/embedLink.js

@@ -147,4 +147,4 @@ /* # Embedia Vue core license
       const controlsValue = video.controls;
-      const AutoplayValue = video.autoplay;
-      const LoopValue = video.loop;
+      const autoplayValue = video.autoplay;
+      const loopValue = video.loop;
     
@@ -172,5 +172,5 @@ const videoId = extractVimeoVideoId(video.videoUrl);
           controls: controlsValue,
-          autoplay: AutoplayValue,
-          muted: true, // Set muted to true for autoplay
-          loop: LoopValue,
+          autoplay: autoplayValue,
+          muted: !!autoplayValue, // Set muted to true if autoplay is true
+          loop: loopValue,
         });
@@ -196,3 +196,2 @@
     
-    
     const embedTwitter = (video, container, cssname) => {
@@ -199,0 +198,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61321

increased by0.12%

Number of lines in readme file

274

increased by3.79%

No dependency changes