vue3-ytframe
Version:
A Vue3 YouTube Iframe API Wrapper Component
357 lines (356 loc) • 9.03 kB
JavaScript
import { ref as p, watch as y, onMounted as he, openBlock as me, createElementBlock as Ve } from "vue";
const be = ["id"], Pe = {
__name: "VueYtframe",
props: {
videoId: {
type: String,
required: !1,
default: null
},
videoUrl: {
type: String,
required: !1,
default: null
},
width: {
type: [Number, String],
required: !1,
default: "100%"
},
height: {
type: [Number, String],
required: !1,
default: "100%"
},
playerVars: {
type: Object,
required: !1,
default: () => ({})
}
},
emits: [
"ready",
"playing",
"paused",
"ended",
"stateChange",
"playbackQualityChange",
"playbackRateChange",
"error",
"apiChange"
],
setup(l, { expose: v, emit: C }) {
const t = p(null), u = p(!1), n = l;
y(
[() => n.width, () => n.height],
([e, a]) => {
t.value && h(e, a);
}
), y(() => n.videoId, (e) => {
w(() => {
k(e);
}, 300)();
});
function k(e) {
var a;
d(), u.value && (t.value ? ((a = n.playerVars) == null ? void 0 : a.autoplay) === 1 ? m({
videoId: e,
startSeconds: n.playerVars.start || 0,
endSeconds: n.playerVars.end || 0
}) : V({
videoId: e,
startSeconds: n.playerVars.start || 0,
endSeconds: n.playerVars.end || 0
}) : c());
}
y(() => n.videoUrl, (e) => {
w(() => {
U(e);
}, 500)();
});
function U(e) {
var a;
d(), u.value && (t.value ? (a = n.playerVars) != null && a.autoplay ? b({
mediaContentUrl: e,
startSeconds: n.playerVars.start || 0,
endSeconds: n.playerVars.end || 0
}) : P({
mediaContentUrl: e,
startSeconds: n.playerVars.start || 0,
endSeconds: n.playerVars.end || 0
}) : c());
}
function d() {
const e = n.videoId, a = n.videoUrl;
if (!e && !a) {
u.value = !1, console.error("At least one of the props 'videoId' or 'videoUrl' must be provided.");
return;
}
if (!e && a && !f(a)) {
console.error(
`The provided video URL (${a}) is not a valid Youtube URL.`,
"If you are sure it is a valid YouTube URL and you are still getting this error,",
"please open an issue on GitHub at https://github.com/kiranparajuli589/vue3-ytframe/issues/new"
), u.value = !1;
return;
}
u.value = !0;
}
const s = p(null);
he(async () => {
s.value = Math.random().toString(36).substring(2, 12), d(n.videoId, n.videoUrl), T().then(() => {
g().then(() => {
u.value && c();
});
});
});
function T() {
if (document.querySelector("script[src='https://www.youtube.com/iframe_api']"))
return Promise.resolve();
const e = document.createElement("script");
return e.src = "https://www.youtube.com/iframe_api", document.head.appendChild(e), console.info("Youtube API script added to the HTML document."), Promise.resolve();
}
function g() {
return window.YT && window.YT.Player ? Promise.resolve() : new Promise((e) => {
setTimeout(() => {
g().then(() => {
e();
});
}, 100);
});
}
const r = C;
function c() {
const e = document.getElementById(s.value), a = n.videoId || f(n.videoUrl);
t.value = new YT.Player(e, {
height: n.height,
width: n.width,
videoId: a,
playerVars: n.playerVars,
events: {
onReady: R,
onStateChange: Y,
onPlaybackQualityChange: A,
onPlaybackRateChange: x,
onError: B,
onApiChange: E
}
});
}
function R(e) {
r("ready", e.target);
}
function Y(e) {
switch (e.data) {
case window.YT.PlayerState.PLAYING:
r("playing", e.target);
break;
case window.YT.PlayerState.PAUSED:
r("paused", e.target);
break;
case window.YT.PlayerState.ENDED:
r("ended", e.target);
break;
}
r("stateChange", e.target);
}
function A(e) {
r("playbackQualityChange", e.target);
}
function x(e) {
r("playbackRateChange", e.target);
}
function B(e) {
r("error", e.target);
}
function E(e) {
r("apiChange", e.target);
}
function L() {
t.value.playVideo();
}
function _() {
t.value.pauseVideo();
}
function M() {
t.value.stopVideo();
}
function O(e, a) {
t.value.seekTo(e, a);
}
function q() {
t.value.nextVideo();
}
function D() {
t.value.previousVideo();
}
function N(e) {
t.value.playVideoAt(e);
}
function Q() {
t.value.mute();
}
function z() {
t.value.unMute();
}
function F() {
return t.value.isMuted();
}
function j(e) {
t.value.setVolume(e);
}
function G() {
return t.value.getVolume();
}
function h(e, a) {
t.value.setSize(e, a);
}
function H(e) {
t.value.setLoop(e);
}
function $(e) {
t.value.setShuffle(e);
}
function Z() {
return t.value.getDuration();
}
function J() {
return t.value.getCurrentTime();
}
function K() {
return t.value.getVideoEmbedCode();
}
function W() {
return t.value.getVideoUrl();
}
function X() {
return t.value.getVideoLoadedFraction();
}
function ee() {
return t.value.getPlayerState();
}
function te() {
return t.value.getPlaybackRate();
}
function ae(e) {
t.value.setPlaybackRate(e);
}
function ne() {
return t.value.getAvailablePlaybackRates();
}
function oe() {
return t.value.getOptions();
}
function re(e, a) {
return t.value.getOption(e, a);
}
function ue(e, a, o) {
t.value.setOption(e, a, o);
}
function ie() {
return t.value.getSphericalProperties();
}
function le(e) {
t.value.setSphericalProperties(e);
}
function de() {
return t.value.getPlaylist();
}
function se() {
return t.value.getPlaylistIndex();
}
function ce() {
return t.value.getIframe();
}
function fe() {
t.value.destroy(), t.value = null;
}
function m({ videoId: e, startSeconds: a, endSeconds: o } = {}) {
t.value.loadVideoById({ videoId: e, startSeconds: a, endSeconds: o });
}
function V({ videoId: e, startSeconds: a, endSeconds: o } = {}) {
t.value.cueVideoById({ videoId: e, startSeconds: a, endSeconds: o });
}
function b({ mediaContentUrl: e, startSeconds: a, endSeconds: o } = {}) {
t.value.loadVideoByUrl({ mediaContentUrl: e, startSeconds: a, endSeconds: o });
}
function P({ mediaContentUrl: e, startSeconds: a, endSeconds: o } = {}) {
t.value.cueVideoByUrl({ mediaContentUrl: e, startSeconds: a, endSeconds: o });
}
function pe(e, a, o) {
t.value.cuePlaylist(e, a, o);
}
function ye(e, a, o) {
t.value.loadPlaylist(e, a, o);
}
function f(e) {
const a = /^https:\/\/(?:(?:www|m)\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)(?<id>[a-zA-Z0-9_-]{11})(?:[&?].*)?$/gm;
a.lastIndex = 0;
const o = a.exec(e);
return o ? o.groups.id : null;
}
function w(e, a, o) {
var i;
return function() {
var S = this, I = arguments, ve = function() {
i = null, o || e.apply(S, I);
}, ge = o && !i;
clearTimeout(i), i = setTimeout(ve, a), ge && e.apply(S, I);
};
}
return v({
player: t,
playVideo: L,
pauseVideo: _,
stopVideo: M,
seekTo: O,
nextVideo: q,
previousVideo: D,
playVideoAt: N,
mute: Q,
unMute: z,
isMuted: F,
setVolume: j,
getVolume: G,
setSize: h,
setShuffle: $,
setLoop: H,
getDuration: Z,
getCurrentTime: J,
getVideoEmbedCode: K,
getVideoUrl: W,
getVideoLoadedFraction: X,
getPlayerState: ee,
getPlaybackRate: te,
setPlaybackRate: ae,
getAvailablePlaybackRates: ne,
getOptions: oe,
getAnOption: re,
setAnOption: ue,
getSphericalProperties: ie,
setSphericalProperties: le,
getPlaylist: de,
getPlaylistIndex: se,
getIframe: ce,
destroy: fe,
loadVideoById: m,
cueVideoById: V,
loadVideoByUrl: b,
cueVideoByUrl: P,
cuePlaylist: pe,
loadPlaylist: ye,
getVideoIdFromYoutubeURL: f
}), (e, a) => (me(), Ve("div", {
ref: "youtube",
id: s.value
}, null, 8, be));
}
}, we = Pe, Ie = {
// eslint-disable-next-line no-unused-vars
install: (l, v) => {
l.component("VueYtframe", we);
}
};
export {
Ie as default
};