embedia-vue/dist/index.js

A vue component package to embed videos such as TikTok, YouTube/Shorts, Twitter/X, Vimeo, and Dailymotion.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("vue");let b=1;const v=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")},g=(e,t,o)=>{const i=e.videoUrl,n=v(i),l=e.width||640,r=e.height||360;window.handleDailymotionResponse=a=>{if(console.log("Dailymotion Response:",a),a.html){const d=document.createElement("div");d.className=`${o} custom-dailymotion`,d.innerHTML=a.html;const s=d.querySelector("iframe");if(s){s.style.width=`${l}px`,s.style.height=`${r}px`;const u=s.getAttribute("allow");u?s.setAttribute("allow",u.replace("autoplay","")):s.setAttribute("allow","fullscreen; picture-in-picture; muted")}t.appendChild(d)}};const c=document.createElement("script");c.src=`https://www.dailymotion.com/services/oembed?url=https://www.dailymotion.com/video/${n}&maxwidth=${l}&maxheight=${r}&format=json&callback=handleDailymotionResponse`,document.body.appendChild(c)},E=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,l=e.controls!==void 0?e.controls:!0,r=e.autoplay===!0,c=e.loop==="true",a=e.fullscreen===!0,d=E(e.videoUrl),s=document.createElement("div");s.className=`video-${d} ${o}`,s.dataset.eWidth=i,s.dataset.eHeight=n,s.dataset.efullscreen=a,s.dataset.eVideoId=d,t.appendChild(s);const u=document.createElement("script");return u.src="https://player.vimeo.com/api/player.js",u.async=!0,u.onload=()=>{new window.Vimeo.Player(s,{id:d,width:i,height:n,controls:l,autoplay:r,muted:r,loop:c,fullscreen:a}).ready().then(()=>{if(console.log("Vimeo player is ready"),a===!1){const h=s.querySelector("iframe"),f=h.contentDocument||h.contentWindow.document,y=setInterval(()=>{const w=f.querySelector(".vimeo-control-bar .fullscreen");w&&(w.style.display="none",clearInterval(y))},100)}}).catch(h=>{console.error("Error loading Vimeo player:",h)})},document.body.appendChild(u),()=>{s&&(s.innerHTML=""),u&&u.parentNode&&document.body.removeChild(u)}},x=(e,t,o)=>{const i=n=>{const l=/\/status\/(\d+)/,r=n.match(l);return r&&r[1]?r[1]:null};try{const n=e.videoUrl,l=i(n),r=document.createElement("div");r.className=`video-${b} ${o}`,r.id=`tweet-${l}`;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(l,r)}),t.appendChild(r),t.appendChild(c)}catch(n){console.error("Error embedding Twitter content:",n)}},C=(e,t,o)=>{const i=n=>{n=n.replace("x.com","twitter.com");const l=/\/(?:i\/)?status\/(\d+)/,r=n.match(l);return r?r[1]:null};try{if(!(t instanceof Node)){console.error("Container is not a valid DOM node.");return}const n=e.videoUrl,l=i(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/${l}" 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)}},p=new Map,_=(e,t,o)=>{const i=e.videoUrl;if(p.has(i)||p.has(i))return;p.set(i,!0);const n=e.width||"100%",l=e.height||"100%",r=new XMLHttpRequest;r.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(i)}`,!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 a=document.createElement("div"),d=Date.now();if(a.className=`video-${d} ${o}`,a.style.width=n,a.style.height=l,a.innerHTML=c.html,!document.querySelector('script[src="https://www.tiktok.com/embed.js"]')){const s=document.createElement("script");s.src="https://www.tiktok.com/embed.js",document.body.appendChild(s)}t?t.appendChild(a):document.body&&document.body.appendChild(a)}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=>{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")},k=(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,l=e.autoplay||e.loop?1:0,r=T(e.videoUrl),c=document.createElement("iframe");c.src=`https://www.youtube.com/embed/${r}?autoplay=${i}&mute=${n}&loop=${l?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)},I=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=`
            .${t} {
              display: flex;
              max-width: 1920px !important;
              justify-content: center;
              align-items: center;
              min-width: 256px;
              min-height: 144px;
              margin: auto;
            }
              body { 
              display: block !important;
    }
          `,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"))k(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))_(e,o,t);else if(e.videoUrl.includes("twitter.com"))x(e,o,t);else if(e.videoUrl.includes("x.com"))C(e,o,t);else if(e.videoUrl.includes("vimeo.com"))$(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))g(e,o,t);else throw new Error("Invalid video URL")};const U=(e,t)=>{const o=e.__vccOpts||e;for(const[i,n]of t)o[i]=n;return o},V={name:"EmbediaVue",props:{clip:{type:String,required:!0},width:{type:[Number,String],default:1366},height:{type:[Number,String],default:768},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(()=>{I({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}}},S=e=>(m.pushScopeId("data-v-1b3c3886"),e=e(),m.popScopeId(),e),M=S(()=>m.createElementVNode("div",{class:"video-content"},null,-1)),N=[M];function R(e,t,o,i,n,l){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 D=U(V,[["render",R],["__scopeId","data-v-1b3c3886"]]);exports.EmbediaVue=D;