embedia-vue
Advanced tools
Comparing version 1.1.3 to 1.2.0-alpha.1
@@ -1,35 +0,35 @@ | ||
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"; | ||
let m = 1; | ||
const U = (e, t, o, s) => { | ||
const r = e.videoUrl, i = C(r); | ||
if (!i) | ||
import { ref as h, onMounted as p, watch as w, openBlock as f, createElementBlock as y, normalizeClass as b, normalizeStyle as g, pushScopeId as $, popScopeId as x, createElementVNode as E } from "vue"; | ||
let u = 1; | ||
const I = (t, e, n, r) => { | ||
const o = t.clip, s = k(o); | ||
if (!s) | ||
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)); | ||
let c = document.getElementById(e); | ||
c || (c = document.createElement("div"), c.id = e, document.body.appendChild(c)); | ||
let i = document.querySelector(`.${n}`); | ||
i || (i = document.createElement("div"), i.className = `video-${r} ${n}`, c.appendChild(i)); | ||
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"); | ||
a.className = "instagram-media", a.setAttribute("data-instgrm-permalink", `https://www.instagram.com/p/${s}/`), a.setAttribute("data-instgrm-version", "13"), a.style.width = `${t.width}px`, a.style.height = `${t.height}px`, a.style.maxWidth = "400px", a.style.maxheight = "530px"; | ||
const l = document.createElement("a"); | ||
if (l.setAttribute("href", r), a.appendChild(l), c.appendChild(a), !document.getElementById("instagramEmbedScript")) { | ||
if (l.href = o, a.appendChild(l), i.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); | ||
d.async = !0, d.id = "instagramEmbedScript", d.src = "//www.instagram.com/embed.js", c.appendChild(d); | ||
} | ||
}, C = (e) => { | ||
const t = /\/([a-zA-Z0-9_-]+)\/?$/, o = e.match(t); | ||
return o ? o[1] : null; | ||
}, I = (e) => { | ||
const t = e.match(/\/(?:video|hub)\/([^_]+)/) || e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i); | ||
if (t && t[1]) | ||
return t[1]; | ||
}, k = (t) => { | ||
const e = /\/([a-zA-Z0-9_-]+)\/?$/, n = t.match(e); | ||
return n ? n[1] : null; | ||
}, C = (t) => { | ||
const e = t.match(/\/(?:video|hub)\/([^_]+)/) || t.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i); | ||
if (e && e[1]) | ||
return e[1]; | ||
throw new Error("Invalid Dailymotion video URL"); | ||
}, _ = (e, t, o) => { | ||
const s = e.videoUrl, r = I(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); | ||
}, k = (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, n = e.autoplay, c = e.loop, a = k(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); | ||
}, _ = (t, e, n) => { | ||
const r = t.clip, o = C(r), s = t.autoplay ? "1" : "0", c = t.controls ? "1" : "0", i = t.fullscreen ? "1" : "0", a = document.createElement("iframe"); | ||
a.src = `https://www.dailymotion.com/embed/video/${o}?autoplay=${s}&controls=${c}&fullscreen=${i}`, a.width = t.width || 640, a.height = t.height || 360, a.frameBorder = "0", a.allowFullscreen = !0, a.className = n, e.appendChild(a); | ||
}, T = (t) => { | ||
const e = t.match(/\/(\d+)/); | ||
return e && e[1] ? e[1] : (console.error("Invalid Vimeo video URL"), ""); | ||
}, V = (t, e, n) => { | ||
const r = t.width || 640, o = t.height || 360, s = t.controls, c = t.autoplay === "true", i = t.loop === "true", a = T(t.clip), l = document.createElement("div"); | ||
l.className = `video-${u} ${n}`, l.dataset.eWidth = r, l.dataset.eHeight = o, l.dataset.efullscreen = t.fullscreen, l.dataset.eVideoId = a, e.appendChild(l); | ||
const d = document.createElement("script"); | ||
@@ -39,9 +39,9 @@ return d.src = "https://player.vimeo.com/api/player.js", d.async = !0, d.onload = () => { | ||
id: a, | ||
width: s, | ||
height: r, | ||
controls: i, | ||
autoplay: n, | ||
muted: !!n, | ||
// Set muted to true if autoplay is true | ||
loop: c | ||
width: r, | ||
height: o, | ||
controls: s, | ||
autoplay: c, | ||
muted: c, | ||
loop: i | ||
// Set loop based on boolean value | ||
}).ready().then(() => { | ||
@@ -52,83 +52,109 @@ }); | ||
}; | ||
}, x = (e, t, o) => { | ||
const s = (r) => { | ||
const i = /\/status\/(\d+)/, n = r.match(i); | ||
return n && n[1] ? n[1] : null; | ||
}, A = (t, e, n) => { | ||
const r = (o) => { | ||
const s = /\/(?:i\/)?status\/(\d+)/, c = o.match(s); | ||
return c ? c[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); | ||
if (!(e instanceof Node)) { | ||
console.error("Container is not a valid DOM node."); | ||
return; | ||
} | ||
const o = t.clip, s = r(o); | ||
if (!o || !s) { | ||
console.error("Invalid video clip URL or tweet ID."); | ||
return; | ||
} | ||
const c = document.createElement("blockquote"); | ||
c.className = `twitter-tweet ${n}`, c.setAttribute("data-media-max-width", t.width), c.setAttribute("data-media-max-height", t.height), c.innerHTML = ` | ||
<p lang="en" style="min-width: ${t.width}px; display: block;"> | ||
<a href="${o}" style="display: inline-block; min-width: ${t.width}px;"> | ||
</a> | ||
</p> | ||
`, e.appendChild(c); | ||
const i = document.createElement("script"); | ||
i.src = "https://platform.twitter.com/widgets.js", i.charset = "utf-8", i.async = !0, i.addEventListener("load", () => { | ||
window.twttr.widgets.load(); | ||
}), e.appendChild(i); | ||
} catch (o) { | ||
console.error("Error embedding Twitter content:", o); | ||
} | ||
}, V = (e, t, o) => { | ||
const s = (r) => { | ||
const i = /\/status\/(\d+)/, n = r.match(i); | ||
return n ? n[1] : null; | ||
}, S = (t, e, n) => { | ||
const r = (o) => { | ||
o = o.replace("x.com", "twitter.com"); | ||
const s = /\/(?:i\/)?status\/(\d+)/, c = o.match(s); | ||
return c ? c[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); | ||
if (!(e instanceof Node)) { | ||
console.error("Container is not a valid DOM node."); | ||
return; | ||
} | ||
const o = t.clip, s = r(o); | ||
if (!o || !s) { | ||
console.error("Invalid video clip URL or tweet ID."); | ||
return; | ||
} | ||
const c = document.createElement("blockquote"); | ||
c.className = `twitter-tweet ${n}`, c.setAttribute("data-media-max-width", t.width), c.setAttribute("data-media-max-height", t.height), c.innerHTML = ` | ||
<p lang="en" style="min-width: ${t.width}px; display: block;"> | ||
<a href="https://twitter.com/i/status/${s}" style="display: inline-block; min-width: ${t.width}px;"> | ||
</a> | ||
</p> | ||
`, e.appendChild(c); | ||
const i = document.createElement("script"); | ||
i.src = "https://platform.twitter.com/widgets.js", i.charset = "utf-8", i.async = !0, i.addEventListener("load", () => { | ||
window.twttr.widgets.load(); | ||
}), e.appendChild(i); | ||
} catch (o) { | ||
console.error("Error embedding Twitter content:", o); | ||
} | ||
}, u = /* @__PURE__ */ new Map(), A = (e, t, o) => { | ||
const s = e.videoUrl; | ||
if (u.has(s) || u.has(s)) | ||
}, m = /* @__PURE__ */ new Map(), L = (t, e, n) => { | ||
const r = t.clip; | ||
if (m.has(r) || m.has(r)) | ||
return; | ||
u.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, "")); | ||
m.set(r, !0); | ||
const o = t.width || "100%", s = t.height || "100%", c = new XMLHttpRequest(); | ||
c.open("GET", `https://www.tiktok.com/oembed?url=${encodeURIComponent(r)}`, !0), c.onload = function() { | ||
if (c.status >= 200 && c.status < 300) { | ||
const i = JSON.parse(c.responseText); | ||
i.html && (i.html = i.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"]')) { | ||
if (a.className = `video-${l} ${n}`, a.style.width = o, a.style.height = s, a.innerHTML = i.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); | ||
e ? e.appendChild(a) : document.body && document.body.appendChild(a); | ||
} else | ||
console.error("Failed to fetch TikTok oEmbed data: " + n.statusText); | ||
}, n.onerror = function() { | ||
console.error("Failed to fetch TikTok oEmbed data: " + c.statusText); | ||
}, c.onerror = function() { | ||
console.error("An error occurred while embedding TikTok video."); | ||
}, n.send(); | ||
}, S = (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); | ||
}, N = (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]; | ||
}, c.send(); | ||
}, N = (t, e, n) => { | ||
const r = t.clip, o = t.autoplay === "true", s = o, c = t.width || 640, i = t.height || 360, a = document.createElement("iframe"); | ||
a.setAttribute("src", `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(r)}&width=${c}&height=${i}&show_text=false&autoplay=${o}&muted=${s}`), a.setAttribute("width", c), a.setAttribute("height", i), a.setAttribute("frameborder", "0"), t.fullscreen && a.setAttribute("allowfullscreen", "true"), a.className = `video-${u} ${n} custom-facebook`, u++, e.appendChild(a); | ||
}, M = (t) => { | ||
const e = t.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/); | ||
if (e && e[1]) | ||
return e[1]; | ||
const n = t.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/); | ||
if (n && n[2].length === 11) | ||
return n[2]; | ||
throw new Error("Invalid YouTube video URL"); | ||
}, R = (e, t, o) => { | ||
if (!t) { | ||
}, R = (t, e, n) => { | ||
if (!e) { | ||
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 = 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); | ||
}, L = (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} { | ||
const r = t.autoplay ? 1 : 0, o = t.autoplay || t.muted ? 1 : 0, s = t.autoplay || t.loop ? 1 : 0, c = M(t.clip), i = document.createElement("iframe"); | ||
i.src = `https://www.youtube.com/embed/${c}?autoplay=${r}&mute=${o}&loop=${s ? 1 : 0}&controls=${t.controls ? 1 : 0}`, i.width = t.width || 640, i.height = t.height || 360, i.frameborder = "0", i.style.border = "none", t.fullscreen && i.setAttribute("allow", "fullscreen"), i.className = n, e.appendChild(i); | ||
}, v = (t) => { | ||
var r; | ||
const e = ((r = t.cssname) == null ? void 0 : r.trim()) || ""; | ||
if (!e.match(/^[a-zA-Z_][\w-]*$/)) | ||
throw console.error("Invalid class name:", e), new Error("Invalid class name"); | ||
if (!document.querySelector(`#default-style-${e}`)) { | ||
const o = document.createElement("style"); | ||
o.id = `default-style-${e}`, o.textContent = ` | ||
.${e} { | ||
display: flex; | ||
@@ -141,34 +167,34 @@ justify-content: center; | ||
} | ||
`, document.head.appendChild(r); | ||
`, document.head.appendChild(o); | ||
} | ||
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")) | ||
R(e, o, t); | ||
else if (e.videoUrl.includes("facebook.com") || e.videoUrl.includes("fb.com")) | ||
S(e, o, t); | ||
else if (e.videoUrl.includes("tiktok.com") || e.videoUrl.includes("tiktok")) | ||
A(e, o, t); | ||
else if (e.videoUrl.includes("twitter.com")) | ||
x(e, o, t); | ||
else if (e.videoUrl.includes("x.com")) | ||
V(e, o, t); | ||
else if (e.videoUrl.includes("vimeo.com")) | ||
T(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")) | ||
U(e, o, t); | ||
const n = document.querySelector(`.${e}`); | ||
if (!n) | ||
throw console.error("Container not found for class:", e), new Error("Container not found"); | ||
for (; n.firstChild; ) | ||
n.removeChild(n.firstChild); | ||
if (t.clip.includes("youtube.com") || t.clip.includes("youtu.be")) | ||
R(t, n, e); | ||
else if (t.clip.includes("facebook.com") || t.clip.includes("fb.com")) | ||
N(t, n, e); | ||
else if (t.clip.includes("tiktok.com") || t.clip.includes("tiktok")) | ||
L(t, n, e); | ||
else if (t.clip.includes("twitter.com")) | ||
A(t, n, e); | ||
else if (t.clip.includes("x.com")) | ||
S(t, n, e); | ||
else if (t.clip.includes("vimeo.com")) | ||
V(t, n, e); | ||
else if (t.clip.includes("dailymotion.com") || t.clip.includes("dailymotion")) | ||
_(t, n, e); | ||
else if (t.clip.includes("instagram.com") || t.clip.includes("instagram")) | ||
I(t, n, e); | ||
else | ||
throw new Error("Invalid video URL"); | ||
}; | ||
const B = (e, t) => { | ||
const o = e.__vccOpts || e; | ||
for (const [s, r] of t) | ||
o[s] = r; | ||
return o; | ||
}, M = { | ||
const U = (t, e) => { | ||
const n = t.__vccOpts || t; | ||
for (const [r, o] of e) | ||
n[r] = o; | ||
return n; | ||
}, q = { | ||
name: "EmbediaVue", | ||
@@ -205,36 +231,36 @@ props: { | ||
}, | ||
setup(e) { | ||
const t = h("56.25%"); | ||
setup(t) { | ||
const e = h("56.25%"); | ||
p(() => { | ||
L({ | ||
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); | ||
}), w(() => [e.width, e.height], ([s, r]) => { | ||
o(s, r); | ||
v({ | ||
videoUrl: t.clip, | ||
width: t.width, | ||
height: t.height, | ||
autoplay: t.autoplay, | ||
fullscreen: t.fullscreen, | ||
controls: t.controls, | ||
cssname: t.cssname | ||
}), n(t.width, t.height); | ||
}), w(() => [t.width, t.height], ([r, o]) => { | ||
n(r, o); | ||
}, { immediate: !0 }); | ||
function o(s, r) { | ||
s && r ? t.value = `${r / s * 100}%` : t.value = "56.25%"; | ||
function n(r, o) { | ||
r && o ? e.value = `${o / r * 100}%` : e.value = "56.25%"; | ||
} | ||
return { | ||
aspectRatio: t | ||
aspectRatio: e | ||
}; | ||
} | ||
}, q = (e) => (v("data-v-d26b150f"), e = e(), $(), e), j = /* @__PURE__ */ q(() => /* @__PURE__ */ E("div", { class: "video-content" }, null, -1)), z = [ | ||
j | ||
}, D = (t) => ($("data-v-d26b150f"), t = t(), x(), t), B = /* @__PURE__ */ D(() => /* @__PURE__ */ E("div", { class: "video-content" }, null, -1)), H = [ | ||
B | ||
]; | ||
function D(e, t, o, s, r, i) { | ||
function j(t, e, n, r, o, s) { | ||
return f(), y("div", { | ||
class: b([o.cssname, "responsive-container"]), | ||
style: g({ "--aspect-ratio": s.aspectRatio, width: "auto", maxWidth: "100%" }) | ||
}, z, 6); | ||
class: b([n.cssname, "responsive-container"]), | ||
style: g({ "--aspect-ratio": r.aspectRatio, width: "auto", maxWidth: "100%" }) | ||
}, H, 6); | ||
} | ||
const F = /* @__PURE__ */ B(M, [["render", D], ["__scopeId", "data-v-d26b150f"]]); | ||
const O = /* @__PURE__ */ U(q, [["render", j], ["__scopeId", "data-v-d26b150f"]]); | ||
export { | ||
F as EmbediaVue | ||
O as EmbediaVue | ||
}; |
@@ -1,3 +0,13 @@ | ||
"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} { | ||
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("vue");let h=1;const p=(t,e,n,r)=>{const o=t.clip,s=w(o);if(!s)throw new Error("Invalid Instagram video URL");let c=document.getElementById(e);c||(c=document.createElement("div"),c.id=e,document.body.appendChild(c));let i=document.querySelector(`.${n}`);i||(i=document.createElement("div"),i.className=`video-${r} ${n}`,c.appendChild(i));const a=document.createElement("blockquote");a.className="instagram-media",a.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${s}/`),a.setAttribute("data-instgrm-version","13"),a.style.width=`${t.width}px`,a.style.height=`${t.height}px`,a.style.maxWidth="400px",a.style.maxheight="530px";const l=document.createElement("a");if(l.href=o,a.appendChild(l),i.appendChild(a),!document.getElementById("instagramEmbedScript")){const d=document.createElement("script");d.async=!0,d.id="instagramEmbedScript",d.src="//www.instagram.com/embed.js",c.appendChild(d)}},w=t=>{const e=/\/([a-zA-Z0-9_-]+)\/?$/,n=t.match(e);return n?n[1]:null},f=t=>{const e=t.match(/\/(?:video|hub)\/([^_]+)/)||t.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);if(e&&e[1])return e[1];throw new Error("Invalid Dailymotion video URL")},y=(t,e,n)=>{const r=t.clip,o=f(r),s=t.autoplay?"1":"0",c=t.controls?"1":"0",i=t.fullscreen?"1":"0",a=document.createElement("iframe");a.src=`https://www.dailymotion.com/embed/video/${o}?autoplay=${s}&controls=${c}&fullscreen=${i}`,a.width=t.width||640,a.height=t.height||360,a.frameBorder="0",a.allowFullscreen=!0,a.className=n,e.appendChild(a)},b=t=>{const e=t.match(/\/(\d+)/);return e&&e[1]?e[1]:(console.error("Invalid Vimeo video URL"),"")},g=(t,e,n)=>{const r=t.width||640,o=t.height||360,s=t.controls,c=t.autoplay==="true",i=t.loop==="true",a=b(t.clip),l=document.createElement("div");l.className=`video-${h} ${n}`,l.dataset.eWidth=r,l.dataset.eHeight=o,l.dataset.efullscreen=t.fullscreen,l.dataset.eVideoId=a,e.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:r,height:o,controls:s,autoplay:c,muted:c,loop:i}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},$=(t,e,n)=>{const r=o=>{const s=/\/(?:i\/)?status\/(\d+)/,c=o.match(s);return c?c[1]:null};try{if(!(e instanceof Node)){console.error("Container is not a valid DOM node.");return}const o=t.clip,s=r(o);if(!o||!s){console.error("Invalid video clip URL or tweet ID.");return}const c=document.createElement("blockquote");c.className=`twitter-tweet ${n}`,c.setAttribute("data-media-max-width",t.width),c.setAttribute("data-media-max-height",t.height),c.innerHTML=` | ||
<p lang="en" style="min-width: ${t.width}px; display: block;"> | ||
<a href="${o}" style="display: inline-block; min-width: ${t.width}px;"> | ||
</a> | ||
</p> | ||
`,e.appendChild(c);const i=document.createElement("script");i.src="https://platform.twitter.com/widgets.js",i.charset="utf-8",i.async=!0,i.addEventListener("load",()=>{window.twttr.widgets.load()}),e.appendChild(i)}catch(o){console.error("Error embedding Twitter content:",o)}},E=(t,e,n)=>{const r=o=>{o=o.replace("x.com","twitter.com");const s=/\/(?:i\/)?status\/(\d+)/,c=o.match(s);return c?c[1]:null};try{if(!(e instanceof Node)){console.error("Container is not a valid DOM node.");return}const o=t.clip,s=r(o);if(!o||!s){console.error("Invalid video clip URL or tweet ID.");return}const c=document.createElement("blockquote");c.className=`twitter-tweet ${n}`,c.setAttribute("data-media-max-width",t.width),c.setAttribute("data-media-max-height",t.height),c.innerHTML=` | ||
<p lang="en" style="min-width: ${t.width}px; display: block;"> | ||
<a href="https://twitter.com/i/status/${s}" style="display: inline-block; min-width: ${t.width}px;"> | ||
</a> | ||
</p> | ||
`,e.appendChild(c);const i=document.createElement("script");i.src="https://platform.twitter.com/widgets.js",i.charset="utf-8",i.async=!0,i.addEventListener("load",()=>{window.twttr.widgets.load()}),e.appendChild(i)}catch(o){console.error("Error embedding Twitter content:",o)}},u=new Map,x=(t,e,n)=>{const r=t.clip;if(u.has(r)||u.has(r))return;u.set(r,!0);const o=t.width||"100%",s=t.height||"100%",c=new XMLHttpRequest;c.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(r)}`,!0),c.onload=function(){if(c.status>=200&&c.status<300){const i=JSON.parse(c.responseText);i.html&&(i.html=i.html.replace(/<script[^>]*>.*<\/script>/gi,""));const a=document.createElement("div"),l=Date.now();if(a.className=`video-${l} ${n}`,a.style.width=o,a.style.height=s,a.innerHTML=i.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)}e?e.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()},I=(t,e,n)=>{const r=t.clip,o=t.autoplay==="true",s=o,c=t.width||640,i=t.height||360,a=document.createElement("iframe");a.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(r)}&width=${c}&height=${i}&show_text=false&autoplay=${o}&muted=${s}`),a.setAttribute("width",c),a.setAttribute("height",i),a.setAttribute("frameborder","0"),t.fullscreen&&a.setAttribute("allowfullscreen","true"),a.className=`video-${h} ${n} custom-facebook`,h++,e.appendChild(a)},k=t=>{const e=t.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);if(e&&e[1])return e[1];const n=t.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);if(n&&n[2].length===11)return n[2];throw new Error("Invalid YouTube video URL")},C=(t,e,n)=>{if(!e){console.error("Container element not found.");return}const r=t.autoplay?1:0,o=t.autoplay||t.muted?1:0,s=t.autoplay||t.loop?1:0,c=k(t.clip),i=document.createElement("iframe");i.src=`https://www.youtube.com/embed/${c}?autoplay=${r}&mute=${o}&loop=${s?1:0}&controls=${t.controls?1:0}`,i.width=t.width||640,i.height=t.height||360,i.frameborder="0",i.style.border="none",t.fullscreen&&i.setAttribute("allow","fullscreen"),i.className=n,e.appendChild(i)},_=t=>{var r;const e=((r=t.cssname)==null?void 0:r.trim())||"";if(!e.match(/^[a-zA-Z_][\w-]*$/))throw console.error("Invalid class name:",e),new Error("Invalid class name");if(!document.querySelector(`#default-style-${e}`)){const o=document.createElement("style");o.id=`default-style-${e}`,o.textContent=` | ||
.${e} { | ||
display: flex; | ||
@@ -10,2 +20,2 @@ justify-content: center; | ||
} | ||
`,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; | ||
`,document.head.appendChild(o)}const n=document.querySelector(`.${e}`);if(!n)throw console.error("Container not found for class:",e),new Error("Container not found");for(;n.firstChild;)n.removeChild(n.firstChild);if(t.clip.includes("youtube.com")||t.clip.includes("youtu.be"))C(t,n,e);else if(t.clip.includes("facebook.com")||t.clip.includes("fb.com"))I(t,n,e);else if(t.clip.includes("tiktok.com")||t.clip.includes("tiktok"))x(t,n,e);else if(t.clip.includes("twitter.com"))$(t,n,e);else if(t.clip.includes("x.com"))E(t,n,e);else if(t.clip.includes("vimeo.com"))g(t,n,e);else if(t.clip.includes("dailymotion.com")||t.clip.includes("dailymotion"))y(t,n,e);else if(t.clip.includes("instagram.com")||t.clip.includes("instagram"))p(t,n,e);else throw new Error("Invalid video URL")};const T=(t,e)=>{const n=t.__vccOpts||t;for(const[r,o]of e)n[r]=o;return n},V={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(t){const e=m.ref("56.25%");m.onMounted(()=>{_({videoUrl:t.clip,width:t.width,height:t.height,autoplay:t.autoplay,fullscreen:t.fullscreen,controls:t.controls,cssname:t.cssname}),n(t.width,t.height)}),m.watch(()=>[t.width,t.height],([r,o])=>{n(r,o)},{immediate:!0});function n(r,o){r&&o?e.value=`${o/r*100}%`:e.value="56.25%"}return{aspectRatio:e}}},S=t=>(m.pushScopeId("data-v-d26b150f"),t=t(),m.popScopeId(),t),A=S(()=>m.createElementVNode("div",{class:"video-content"},null,-1)),v=[A];function L(t,e,n,r,o,s){return m.openBlock(),m.createElementBlock("div",{class:m.normalizeClass([n.cssname,"responsive-container"]),style:m.normalizeStyle({"--aspect-ratio":r.aspectRatio,width:"auto",maxWidth:"100%"})},v,6)}const M=T(V,[["render",L],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=M; |
{ | ||
"name": "embedia-vue", | ||
"version": "1.1.3", | ||
"version": "1.2.0-alpha.1", | ||
"description": "A vue component package to embed videos such as Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo, and Dailymotion.", | ||
@@ -44,4 +44,6 @@ "main": "dist/index.js", | ||
"twitter", | ||
"x", | ||
"shorts", | ||
"javascript", | ||
"typescript", | ||
"vue" | ||
@@ -48,0 +50,0 @@ ], |
@@ -63,4 +63,9 @@ <p align="center"> | ||
v1.2.0 | ||
- The embedded video for X and Instagram will be minimal. | ||
- The embedded video for Vimeo fixed the auto loop issue. | ||
v1.1.0 | ||
- The embedded video for Twitter supports x.com. | ||
- The embedded video for supports X.com. | ||
@@ -87,3 +92,3 @@ Patch Changes: | ||
- Easy to set-up and responsive. | ||
- Supports embedding one or more videos from platforms including Facebook, Instagram, TikTok, YouTube, YouTube Shorts, Twitter/X, Dailymotion, and Vimeo. | ||
- Supports embedding one or more videos from platforms including Facebook, Instagram, TikTok, YouTube, YouTube Shorts, X, Dailymotion, and Vimeo. | ||
@@ -240,3 +245,2 @@ ___________ | ||
.embed-clip { | ||
float: right; | ||
border: 2px solid green; | ||
@@ -243,0 +247,0 @@ } |
@@ -42,17 +42,17 @@ import { embedYouTube, embedFacebook, embedTiktok, embedTwitter, embedX, embedVimeo, embedDailymotion, embedInstagram } from './embedLink'; | ||
if (video.videoUrl.includes("youtube.com") || video.videoUrl.includes("youtu.be")) { | ||
if (video.clip.includes("youtube.com") || video.clip.includes("youtu.be")) { | ||
embedYouTube(video, container, cssname); | ||
} else if (video.videoUrl.includes("facebook.com") || video.videoUrl.includes("fb.com")) { | ||
} else if (video.clip.includes("facebook.com") || video.clip.includes("fb.com")) { | ||
embedFacebook(video, container, cssname); | ||
} else if (video.videoUrl.includes("tiktok.com") || video.videoUrl.includes("tiktok")) { | ||
} else if (video.clip.includes("tiktok.com") || video.clip.includes("tiktok")) { | ||
embedTiktok(video, container, cssname); | ||
} else if (video.videoUrl.includes("twitter.com")) { | ||
} else if (video.clip.includes("twitter.com")) { | ||
embedTwitter(video, container, cssname); | ||
} else if (video.videoUrl.includes("x.com")) { | ||
} else if (video.clip.includes("x.com")) { | ||
embedX(video, container, cssname); | ||
} else if (video.videoUrl.includes("vimeo.com")) { | ||
} else if (video.clip.includes("vimeo.com")) { | ||
embedVimeo(video, container, cssname); | ||
} else if (video.videoUrl.includes("dailymotion.com") || video.videoUrl.includes("dailymotion")) { | ||
} else if (video.clip.includes("dailymotion.com") || video.clip.includes("dailymotion")) { | ||
embedDailymotion(video, container, cssname); | ||
} else if (video.videoUrl.includes("instagram.com") || video.videoUrl.includes("instagram")) { | ||
} else if (video.clip.includes("instagram.com") || video.clip.includes("instagram")) { | ||
embedInstagram(video, container, cssname); | ||
@@ -59,0 +59,0 @@ } else { |
@@ -28,195 +28,195 @@ /* # Embedia Vue core license | ||
let videoCount = 1; // Initialize videoCount | ||
const embedInstagram = (video, containerId, cssClassName, videoCount) => { | ||
const clipUrl = video.clip; | ||
// Extract the video ID from the URL | ||
const videoId = extractInstagramVideoId(clipUrl); | ||
if (!videoId) { | ||
throw new Error('Invalid Instagram video URL'); | ||
} | ||
// Ensure the container element exists | ||
let embedContainer = document.getElementById(containerId); | ||
if (!embedContainer) { | ||
embedContainer = document.createElement('div'); | ||
embedContainer.id = containerId; | ||
document.body.appendChild(embedContainer); | ||
} | ||
// Create or find the playerDiv for the Instagram video | ||
let playerDiv = document.querySelector(`.${cssClassName}`); | ||
if (!playerDiv) { | ||
playerDiv = document.createElement('div'); | ||
playerDiv.className = `video-${videoCount} ${cssClassName}`; | ||
embedContainer.appendChild(playerDiv); | ||
} | ||
// Create the blockquote element for Instagram embed | ||
const blockquote = document.createElement('blockquote'); | ||
blockquote.className = 'instagram-media'; | ||
blockquote.setAttribute('data-instgrm-permalink', `https://www.instagram.com/p/${videoId}/`); | ||
blockquote.setAttribute('data-instgrm-version', '13'); | ||
blockquote.style.width = `${video.width}px`; | ||
blockquote.style.height = `${video.height}px`; | ||
blockquote.style.maxWidth = '400px'; | ||
blockquote.style.maxheight = '530px'; | ||
const embedInstagram = (video, container, cssname, videoCount) => { | ||
const videoUrl = video.videoUrl; | ||
// Extract the video ID from the URL | ||
const videoId = extractInstagramVideoId(videoUrl); | ||
if (!videoId) { | ||
throw new Error('Invalid Instagram video URL'); | ||
} | ||
// Check if the container element exists, create it if it doesn't | ||
let embedContainer = document.getElementById(container); | ||
if (!embedContainer) { | ||
embedContainer = document.createElement('div'); | ||
embedContainer.id = container; | ||
document.body.appendChild(embedContainer); | ||
} | ||
// Check if the playerDiv for the Instagram video already exists | ||
let playerDiv = document.querySelector(`.${cssname}`); | ||
if (!playerDiv) { | ||
// Create the playerDiv containing the Instagram video with the specified cssname | ||
playerDiv = document.createElement("div"); | ||
playerDiv.className = `video-${videoCount} ${cssname}`; | ||
// Append the playerDiv to the embedContainer | ||
embedContainer.appendChild(playerDiv); | ||
} | ||
// Create the blockquote element for Instagram embed | ||
const blockquote = document.createElement('blockquote'); | ||
blockquote.setAttribute('class', 'instagram-media'); | ||
blockquote.setAttribute('data-instgrm-permalink', `https://www.instagram.com/p/${videoId}/`); | ||
blockquote.setAttribute('data-instgrm-version', '13'); | ||
const anchor = document.createElement('a'); | ||
anchor.setAttribute('href', videoUrl); | ||
blockquote.appendChild(anchor); | ||
// Append the blockquote to the playerDiv | ||
playerDiv.appendChild(blockquote); | ||
// Check if embed script already exists, if not, append it to the embedContainer | ||
if (!document.getElementById('instagramEmbedScript')) { | ||
const script = document.createElement('script'); | ||
script.setAttribute('async', ''); | ||
script.setAttribute('id', 'instagramEmbedScript'); | ||
script.setAttribute('src', '//www.instagram.com/embed.js'); | ||
embedContainer.appendChild(script); | ||
} | ||
const anchor = document.createElement('a'); | ||
anchor.href = clipUrl; | ||
blockquote.appendChild(anchor); | ||
// Append the blockquote to the playerDiv | ||
playerDiv.appendChild(blockquote); | ||
// Append the Instagram embed script if it doesn't exist | ||
if (!document.getElementById('instagramEmbedScript')) { | ||
const script = document.createElement('script'); | ||
script.async = true; | ||
script.id = 'instagramEmbedScript'; | ||
script.src = '//www.instagram.com/embed.js'; | ||
embedContainer.appendChild(script); | ||
} | ||
}; | ||
// Regular expression to extract Instagram video ID from URL | ||
const extractInstagramVideoId = (url) => { | ||
const regex = /\/([a-zA-Z0-9_-]+)\/?$/; | ||
const match = url.match(regex); | ||
return match ? match[1] : null; | ||
}; | ||
const extractDailymotionVideoId = (url) => { | ||
const videoIdMatch = url.match(/\/(?:video|hub)\/([^_]+)/) || url.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i); | ||
if (videoIdMatch && videoIdMatch[1]) { | ||
return videoIdMatch[1]; | ||
} | ||
throw new Error("Invalid Dailymotion video URL"); | ||
}; | ||
const embedDailymotion = (video, container, cssname) => { | ||
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'; | ||
const iframe = document.createElement("iframe"); | ||
iframe.src = `https://www.dailymotion.com/embed/video/${videoId}?autoplay=${autoplayValue}&controls=${controlsValue}&fullscreen=${fullscreenValue}`; | ||
iframe.width = video.width || 640; | ||
iframe.height = video.height || 360; | ||
iframe.frameBorder = "0"; | ||
iframe.allowFullscreen = true; | ||
iframe.className = cssname; | ||
container.appendChild(iframe); | ||
}; | ||
// Function to extract Vimeo video ID from a URL | ||
const extractVimeoVideoId = (url) => { | ||
const videoIdMatch = url.match(/\/(\d+)/); | ||
if (videoIdMatch && videoIdMatch[1]) { | ||
return videoIdMatch[1]; | ||
} else { | ||
console.error("Invalid Vimeo video URL"); | ||
return ""; | ||
} | ||
}; | ||
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.clip); | ||
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 | ||
}); | ||
}; | ||
// Regular expression to extract Instagram video ID from URL | ||
const extractInstagramVideoId = (url) => { | ||
const regex = /\/([a-zA-Z0-9_-]+)\/?$/; | ||
const match = url.match(regex); | ||
return match ? match[1] : null; | ||
}; | ||
const extractDailymotionVideoId = (url) => { | ||
const videoIdMatch = url.match(/\/(?:video|hub)\/([^_]+)/) || url.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i); | ||
if (videoIdMatch && videoIdMatch[1]) { | ||
return videoIdMatch[1]; | ||
document.body.appendChild(script); | ||
return () => { | ||
if (playerDiv) { | ||
playerDiv.innerHTML = ""; | ||
} | ||
throw new Error("Invalid Dailymotion video URL"); | ||
document.body.removeChild(script); | ||
}; | ||
}; | ||
const embedDailymotion = (video, container, cssname) => { | ||
const videoUrl = video.videoUrl; | ||
const videoId = extractDailymotionVideoId(videoUrl); | ||
const autoplayValue = video.autoplay ? '1' : '0'; | ||
const controlsValue = video.controls ? '1' : '0'; | ||
const fullscreenValue = video.fullscreen ? '1' : '0'; | ||
const iframe = document.createElement("iframe"); | ||
iframe.src = `https://www.dailymotion.com/embed/video/${videoId}?autoplay=${autoplayValue}&controls=${controlsValue}&fullscreen=${fullscreenValue}`; | ||
iframe.width = video.width || 640; | ||
iframe.height = video.height || 360; | ||
iframe.frameBorder = "0"; | ||
iframe.allowFullscreen = true; | ||
iframe.className = cssname; | ||
container.appendChild(iframe); | ||
}; | ||
// Function to extract Vimeo video ID from a URL | ||
const extractVimeoVideoId = (url) => { | ||
const videoIdMatch = url.match(/\/(\d+)/); | ||
if (videoIdMatch && videoIdMatch[1]) { | ||
return videoIdMatch[1]; | ||
} else { | ||
console.error("Invalid Vimeo video URL"); | ||
return ""; | ||
} | ||
}; | ||
const embedVimeo = (video, container, cssname) => { | ||
const emWidth = video.width || 640; | ||
const emHeight = video.height || 360; | ||
const controlsValue = video.controls; | ||
const autoplayValue = video.autoplay; | ||
const loopValue = video.loop; | ||
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, // Set muted to true if autoplay is true | ||
loop: loopValue, | ||
}); | ||
vimeoPlayer.ready().then(() => { | ||
// You can use player methods here as needed | ||
}); | ||
const embedTwitter = (video, container, cssname) => { | ||
const extractTwitterTweetId = (url) => { | ||
const regex = /\/(?:i\/)?status\/(\d+)/; // Extracts tweet ID | ||
const match = url.match(regex); | ||
return match ? match[1] : null; // Return tweet ID or null | ||
}; | ||
document.body.appendChild(script); | ||
return () => { | ||
if (playerDiv) { | ||
playerDiv.innerHTML = ""; | ||
try { | ||
// Validate container | ||
if (!(container instanceof Node)) { | ||
console.error("Container is not a valid DOM node."); | ||
return; | ||
} | ||
document.body.removeChild(script); | ||
}; | ||
}; | ||
const clip = video.clip; // Get the clip URL from the video object | ||
const tweetId = extractTwitterTweetId(clip); // Extract tweet ID | ||
const embedTwitter = (video, container, cssname) => { | ||
const extractTwitterTweetId = (url) => { | ||
const regex = /\/status\/(\d+)/; | ||
const match = url.match(regex); | ||
if (match && match[1]) { | ||
return match[1]; | ||
} else { | ||
return null; // No match found | ||
// Validate URL and Tweet ID | ||
if (!clip || !tweetId) { | ||
console.error("Invalid video clip URL or tweet ID."); | ||
return; | ||
} | ||
}; | ||
try { | ||
const videoUrl = video.videoUrl; | ||
const tweetId = extractTwitterTweetId(videoUrl); | ||
// Create the blockquote element | ||
const tweetContainer = document.createElement("blockquote"); | ||
tweetContainer.className = `twitter-tweet ${cssname}`; | ||
tweetContainer.setAttribute("data-media-max-width", video.width); | ||
tweetContainer.setAttribute("data-media-max-height", video.height); | ||
// Create a div to hold the embedded tweet | ||
const tweetContainer = document.createElement("div"); | ||
// 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> | ||
`; | ||
// Apply the cssname to the tweetContainer | ||
tweetContainer.className = `video-${videoCount} ${cssname}`; | ||
// Append the tweet container to the provided container | ||
container.appendChild(tweetContainer); | ||
// Set the ID for the tweet container | ||
tweetContainer.id = `tweet-${tweetId}`; | ||
// Add the Twitter widget script to the page and wait for it to load | ||
// Add the Twitter widget script to the page | ||
const twitterWidgetScript = document.createElement("script"); | ||
@@ -229,9 +229,6 @@ twitterWidgetScript.src = "https://platform.twitter.com/widgets.js"; | ||
twitterWidgetScript.addEventListener("load", () => { | ||
// 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); | ||
window.twttr.widgets.load(); // Load the widget | ||
}); | ||
// Append the tweet container to the provided container | ||
container.appendChild(tweetContainer); | ||
// Append the script after the tweet container | ||
container.appendChild(twitterWidgetScript); | ||
@@ -243,24 +240,50 @@ | ||
}; | ||
const embedX = (video, container, cssname) => { | ||
const extractTwitterTweetId = (url) => { | ||
const regex = /\/status\/(\d+)/; | ||
url = url.replace("x.com", "twitter.com"); | ||
const regex = /\/(?:i\/)?status\/(\d+)/; | ||
const match = url.match(regex); | ||
return match ? match[1] : null; // Return tweet ID or null | ||
return match ? match[1] : null; | ||
}; | ||
try { | ||
const videoUrl = video.videoUrl; | ||
const tweetId = extractTwitterTweetId(videoUrl); | ||
if (!(container instanceof Node)) { | ||
console.error("Container is not a valid DOM node."); | ||
return; | ||
} | ||
if (!tweetId) { | ||
throw new Error("Invalid video URL"); // Throw error if tweet ID not found | ||
const clip = video.clip; | ||
const tweetId = extractTwitterTweetId(clip); | ||
if (!clip || !tweetId) { | ||
console.error("Invalid video clip URL or tweet ID."); | ||
return; | ||
} | ||
const tweetContainer = document.createElement("div"); | ||
tweetContainer.className = `video-${videoCount} ${cssname}`; | ||
tweetContainer.id = `tweet-${tweetId}`; | ||
const tweetContainer = document.createElement("blockquote"); | ||
tweetContainer.className = `twitter-tweet ${cssname}`; | ||
tweetContainer.setAttribute("data-media-max-width", video.width); | ||
tweetContainer.setAttribute("data-media-max-height", video.height); | ||
// 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"); | ||
@@ -272,7 +295,7 @@ twitterWidgetScript.src = "https://platform.twitter.com/widgets.js"; | ||
twitterWidgetScript.addEventListener("load", () => { | ||
window.twttr.widgets.createTweet(tweetId, tweetContainer); | ||
window.twttr.widgets.load(); | ||
}); | ||
container.appendChild(tweetContainer); | ||
container.appendChild(twitterWidgetScript); | ||
} catch (error) { | ||
@@ -283,6 +306,8 @@ console.error("Error embedding Twitter content:", error); | ||
// Map to track embedded TikTok videos | ||
// Map to track embedded TikTok videos | ||
@@ -292,6 +317,6 @@ const embeddedTikTokVideos = new Map(); | ||
const embedTiktok = (video, container, cssname) => { | ||
const videoUrl = video.videoUrl; | ||
const clip = video.clip; | ||
// Check if the TikTok video URL has already been embedded | ||
if (embeddedTikTokVideos.has(videoUrl)) { | ||
if (embeddedTikTokVideos.has(clip)) { | ||
// Video has already been embedded, no need to embed it again | ||
@@ -303,3 +328,3 @@ return; | ||
if (embeddedTikTokVideos.has(videoUrl)) { | ||
if (embeddedTikTokVideos.has(clip)) { | ||
@@ -317,3 +342,3 @@ // Video has already been embedded, no need to embed it again | ||
embeddedTikTokVideos.set(videoUrl, true); | ||
embeddedTikTokVideos.set(clip, true); | ||
@@ -330,3 +355,3 @@ | ||
xhr.open('GET', `https://www.tiktok.com/oembed?url=${encodeURIComponent(videoUrl)}`, true); | ||
xhr.open('GET', `https://www.tiktok.com/oembed?url=${encodeURIComponent(clip)}`, true); | ||
@@ -428,107 +453,103 @@ | ||
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 emWidth = video.width || 640; | ||
const emHeight = video.height || 360; | ||
// 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'); | ||
if (video.fullscreen) { | ||
iframe.setAttribute('allowfullscreen', 'true'); | ||
} | ||
iframe.className = `video-${videoCount} ${cssname} custom-facebook`; | ||
videoCount++; | ||
container.appendChild(iframe); | ||
}; | ||
// Function to extract YouTube video ID from a URL | ||
const extractYouTubeVideoId = (url) => { | ||
// Check if it's a YouTube Shorts URL | ||
const shortsMatch = url.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/); | ||
if (shortsMatch && shortsMatch[1]) { | ||
return shortsMatch[1]; | ||
} | ||
// Check if it's a regular YouTube video URL | ||
const videoIdMatch = url.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/); | ||
if (videoIdMatch && videoIdMatch[2].length === 11) { | ||
return videoIdMatch[2]; | ||
} | ||
throw new Error("Invalid YouTube video URL"); | ||
}; | ||
const embedYouTube = (video, container, cssname) => { | ||
if (!container) { | ||
console.error("Container element not found."); | ||
return; | ||
} | ||
const autoplayValue = video.autoplay ? 1 : 0; | ||
const muteValue = video.autoplay ? 1 : video.muted ? 1 : 0; | ||
const loopValue = video.autoplay ? 1 : video.loop ? 1 : 0; | ||
const videoId = extractYouTubeVideoId(video.videoUrl); | ||
// Create an iframe element for the YouTube player | ||
const iframe = document.createElement("iframe"); | ||
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplayValue}&mute=${muteValue}&loop=${loopValue ? 1 : 0}&controls=${video.controls ? 1 : 0}`; | ||
iframe.width = video.width || 640; | ||
iframe.height = video.height || 360; | ||
iframe.frameborder = "0"; | ||
iframe.style.border = "none"; | ||
if (video.fullscreen) { | ||
iframe.setAttribute("allow", "fullscreen"); | ||
} | ||
// Apply the cssname to the iframe element | ||
iframe.className = cssname; | ||
// Append the iframe to the provided container | ||
container.appendChild(iframe); | ||
}; | ||
const embedFacebook = (video, container, cssname) => { | ||
const clip = video.clip; | ||
const autoplay = video.autoplay === "true"; | ||
const muted = autoplay; // Set muted to true if autoplay is true | ||
const emWidth = video.width || 640; | ||
const emHeight = video.height || 360; | ||
// 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(clip)}&width=${emWidth}&height=${emHeight}&show_text=false&autoplay=${autoplay}&muted=${muted}`); | ||
iframe.setAttribute('width', emWidth); | ||
iframe.setAttribute('height', emHeight); | ||
iframe.setAttribute('frameborder', '0'); | ||
if (video.fullscreen) { | ||
iframe.setAttribute('allowfullscreen', 'true'); | ||
} | ||
iframe.className = `video-${videoCount} ${cssname} custom-facebook`; | ||
videoCount++; | ||
container.appendChild(iframe); | ||
}; | ||
// Function to extract YouTube video ID from a URL | ||
const extractYouTubeVideoId = (url) => { | ||
// Check if it's a YouTube Shorts URL | ||
const shortsMatch = url.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/); | ||
if (shortsMatch && shortsMatch[1]) { | ||
return shortsMatch[1]; | ||
} | ||
// Check if it's a regular YouTube video URL | ||
const videoIdMatch = url.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/); | ||
if (videoIdMatch && videoIdMatch[2].length === 11) { | ||
return videoIdMatch[2]; | ||
} | ||
throw new Error("Invalid YouTube video URL"); | ||
}; | ||
const embedYouTube = (video, container, cssname) => { | ||
if (!container) { | ||
console.error("Container element not found."); | ||
return; | ||
} | ||
const autoplayValue = video.autoplay ? 1 : 0; | ||
const muteValue = video.autoplay ? 1 : video.muted ? 1 : 0; | ||
const loopValue = video.autoplay ? 1 : video.loop ? 1 : 0; | ||
const videoId = extractYouTubeVideoId(video.clip); | ||
// Create an iframe element for the YouTube player | ||
const iframe = document.createElement("iframe"); | ||
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplayValue}&mute=${muteValue}&loop=${loopValue ? 1 : 0}&controls=${video.controls ? 1 : 0}`; | ||
iframe.width = video.width || 640; | ||
iframe.height = video.height || 360; | ||
iframe.frameborder = "0"; | ||
iframe.style.border = "none"; | ||
if (video.fullscreen) { | ||
iframe.setAttribute("allow", "fullscreen"); | ||
} | ||
// Apply the cssname to the iframe element | ||
iframe.className = cssname; | ||
// Append the iframe to the provided container | ||
container.appendChild(iframe); | ||
}; | ||
// Export functions and types | ||
@@ -535,0 +556,0 @@ export { embedYouTube, embedFacebook, embedTiktok, embedTwitter, embedX, embedVimeo, embedDailymotion, embedInstagram }; |
License Policy Violation
LicenseThis 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 riskPackage 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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Unpopular package
QualityThis package is not very popular.
Found 1 instance in 1 package
63678
886
0
278
2
1