embedia-vue
Version:
A vue component package to embed videos such as Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo, and Dailymotion.
16 lines (15 loc) • 9.17 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue");let f=1;const v=(e,t,o,s)=>{const n=e.videoUrl;let d,r;e.width=="",r=370,e.height=="",d=630;const c=E(n);if(!c)throw new Error("Invalid Instagram video URL");let i=document.getElementById(t);i||(i=document.createElement("div"),i.id=t,document.body.appendChild(i));let l=document.querySelector(`.${o}`);l||(l=document.createElement("div"),l.className=`video-${s} ${o}`,i.appendChild(l));const a=document.createElement("blockquote");a.className="instagram-media",a.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${c}/`),a.setAttribute("data-instgrm-version","13"),a.style.width=`${r}px`,a.style.height=`${d}px`,a.style.maxWidth="380px",a.style.maxheight="630px";const m=document.createElement("a");if(m.href=n,a.appendChild(m),l.appendChild(a),!document.getElementById("instagramEmbedScript")){const h=document.createElement("script");h.async=!0,h.id="instagramEmbedScript",h.src="//www.instagram.com/embed.js",i.appendChild(h)}},E=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},$=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")},x=(e,t,o)=>{const s=e.videoUrl,n=$(s),d=e.width||640,r=e.height||360;window.handleDailymotionResponse=i=>{if(console.log("Dailymotion Response:",i),i.html){const l=document.createElement("div");l.className=`${o} custom-dailymotion`,l.innerHTML=i.html;const a=l.querySelector("iframe");if(a){a.style.width=`${d}px`,a.style.height=`${r}px`;const m=a.getAttribute("allow");m?a.setAttribute("allow",m.replace("autoplay","")):a.setAttribute("allow","fullscreen; picture-in-picture; muted")}t.appendChild(l)}};const c=document.createElement("script");c.src=`https://www.dailymotion.com/services/oembed?url=https://www.dailymotion.com/video/${n}&maxwidth=${d}&maxheight=${r}&format=json&callback=handleDailymotionResponse`,document.body.appendChild(c)},C=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},I=(e,t,o)=>{const s=e.width||640,n=e.height||360,d=e.controls!==void 0?e.controls:!0,r=e.autoplay===!0,c=e.loop==="true",i=e.fullscreen===!0,l=C(e.videoUrl),a=document.createElement("div");a.className=`video-${l} ${o}`,a.dataset.eWidth=s,a.dataset.eHeight=n,a.dataset.efullscreen=i,a.dataset.eVideoId=l,t.appendChild(a);const m=document.createElement("script");return m.src="https://player.vimeo.com/api/player.js",m.async=!0,m.onload=()=>{new window.Vimeo.Player(a,{id:l,width:s,height:n,controls:d,autoplay:r,muted:r,loop:c,fullscreen:i}).ready().then(()=>{if(console.log("Vimeo player is ready"),i===!1){const p=a.querySelector("iframe"),b=p.contentDocument||p.contentWindow.document,g=setInterval(()=>{const y=b.querySelector(".vimeo-control-bar .fullscreen");y&&(y.style.display="none",clearInterval(g))},100)}}).catch(p=>{console.error("Error loading Vimeo player:",p)})},document.body.appendChild(m),()=>{a&&(a.innerHTML=""),m&&m.parentNode&&document.body.removeChild(m)}},k=(e,t,o)=>{const s=n=>{const d=/\/status\/(\d+)/,r=n.match(d);return r&&r[1]?r[1]:null};try{const n=e.videoUrl,d=s(n),r=document.createElement("div");r.className=`video-${f} ${o}`,r.id=`tweet-${d}`;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(d,r)}),t.appendChild(r),t.appendChild(c)}catch(n){console.error("Error embedding Twitter content:",n)}},U=(e,t,o)=>{const s=n=>{n=n.replace("x.com","twitter.com");const d=/\/(?:i\/)?status\/(\d+)/,r=n.match(d);return r?r[1]:null};try{if(!(t instanceof Node)){console.error("Container is not a valid DOM node.");return}const n=e.videoUrl,d=s(n),r=document.createElement("blockquote");r.className=`twitter-tweet ${o}`,r.innerHTML=`
<p lang="en" style="min-width">
<a href="https://twitter.com/i/status/${d}" style="display: inline-block; min-width: ${e.width}px;">
</a>
</p>
`,t.appendChild(r);const c=document.createElement("script");c.src="https://platform.x.com/widgets.js",c.charset="utf-8",c.async=!0,c.addEventListener("load",()=>{window.twttr.widgets.load()}),t.appendChild(c)}catch(n){console.error("Error embedding Twitter content:",n)}},w=new Map,_=(e,t,o)=>{const s=e.videoUrl;if(w.has(s)||w.has(s))return;w.set(s,!0);const n=e.width||"100%",d=e.height||"100%",r=new XMLHttpRequest;r.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`,!0),r.onload=function(){if(r.status>=200&&r.status<300){const c=JSON.parse(r.responseText);c.html&&(c.html=c.html.replace(/<script[^>]*>.*<\/script>/gi,""));const i=document.createElement("div"),l=Date.now();if(i.className=`video-${l} ${o}`,i.style.width=n,i.style.height=d,i.innerHTML=c.html,!document.querySelector('script[src="https://www.tiktok.com/embed.js"]')){const a=document.createElement("script");a.src="https://www.tiktok.com/embed.js",document.body.appendChild(a)}t?t.appendChild(i):document.body&&document.body.appendChild(i)}else console.error("Failed to fetch TikTok oEmbed data: "+r.statusText)},r.onerror=function(){console.error("An error occurred while embedding TikTok video.")},r.send()},T=(e,t,o)=>{const s=e.videoUrl,n=e.autoplay??!0,d=n,r=e.width||640,c=e.height||360,i=new URL("https://www.facebook.com/plugins/video.php");i.searchParams.set("href",s),i.searchParams.set("width",r),i.searchParams.set("height",c),i.searchParams.set("show_text","false"),i.searchParams.set("autoplay",n?"true":"false"),i.searchParams.set("muted",d?"1":"0");const l=document.createElement("iframe");l.src=i.toString(),l.width=r,l.height=c,l.frameBorder="0",l.allow="autoplay; fullscreen",l.allowFullscreen=e.fullscreen!==!1,l.className=`video-${f} ${o} custom-facebook`,f++,t.appendChild(l)},S=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 s=e.autoplay?1:0,n=e.autoplay||e.muted?1:0,d=e.autoplay||e.loop?1:0,r=S(e.videoUrl),c=document.createElement("iframe");c.src=`https://www.youtube.com/embed/${r}?autoplay=${s}&mute=${n}&loop=${d?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)},N=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=`
.${t} {
display: flex;
justify-content: center;
align-items: center;
min-width: 256px;
min-height: 144px;
margin: auto;
}
`,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"))V(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))T(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))_(e,o,t);else if(e.videoUrl.includes("twitter.com"))k(e,o,t);else if(e.videoUrl.includes("x.com"))U(e,o,t);else if(e.videoUrl.includes("vimeo.com"))I(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))x(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))v(e,o,t);else throw new Error("Invalid video URL")};const R=(e,t)=>{const o=e.__vccOpts||e;for(const[s,n]of t)o[s]=n;return o},q={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(()=>{N({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,n])=>{o(s,n)},{immediate:!0});function o(s,n){s&&n?t.value=`${n/s*100}%`:t.value="56.25%"}return{aspectRatio:t}}},L=e=>(u.pushScopeId("data-v-d26b150f"),e=e(),u.popScopeId(),e),M=L(()=>u.createElementVNode("div",{class:"video-content"},null,-1)),A=[M];function D(e,t,o,s,n,d){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 B=R(q,[["render",D],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=B;