@plutotcool/vue-freecaster
Version:
Freecaster video player integration for vue
519 lines (518 loc) • 14.1 kB
JavaScript
import { shallowRef as k, toRef as T, isRef as O, watch as c, onMounted as M, onUnmounted as I, defineComponent as N, mergeModels as B, useSlots as D, useModel as f, computed as C, useAttrs as V, openBlock as x, createElementBlock as R, Fragment as z, createElementVNode as G, mergeProps as U, unref as b, renderSlot as _, normalizeProps as $, guardReactiveProps as j } from "vue";
function H(t = {}) {
const {
element: n,
options: s,
enabled: e,
player: a,
listeners: o = {}
} = t, u = {
...t,
listeners: o,
key: k(0),
attributes: k({}),
element: T(n),
options: T(s),
enabled: T(e),
player: O(a) ? a : k(a)
};
return ue(u), Y(u), X(u), ee(u), te(u), ae(u), ne(u), W(u), se(u), oe(u), Q(u), u;
}
const P = {
class: "freecaster-player",
"data-playsinline": "true"
}, Z = {
videoId: "video-id",
watermarkEnabled: "watermark.enabled",
thumbnailsSrc: "thumbnails.src",
subtitlesDefaultLang: "subtitles.default_lang",
subtitlesLang: "subtitles.lang",
subtitlesNative: "subtitles.native",
floatOnScroll: "float_on_scroll",
chaptersEnabled: "chapters.enabled",
chaptersStyle: "chapters.style",
chaptersList: "chapters.list",
audioOnly: "audio_only",
trackersGaEnabled: "trackers.ga.enabled",
trackersGaTagIds: "trackers.ga.tag_ids string",
speedOptions: "speed.options",
speedLabels: "speed.labels"
}, E = [
// Standard video events
"abort",
"canplay",
"canplaythrough",
"durationchange",
"emptied",
"encrypted",
"ended",
"error",
"load",
"loadeddata",
"loadedmetadata",
"loadstart",
"pause",
"play",
"playing",
"progress",
"ratechange",
"seeked",
"seeking",
"stalled",
"suspend",
"timeupdate",
"volumechange",
"waiting",
"waitingforkey",
"enterpictureinpicture",
"leavepictureinpicture",
"resize",
// Freecaster player events
"fullscreenenter",
"fullscreenexit",
"viewenter",
"viewleave",
"fcplayerDestroy",
"fcplayerSrcChanged",
"fcplayerConfigChanged",
"fcplayerCountdownTick",
"fcplayerCountdownEnabled",
"fcplayerCountdownDisabled",
"fcplayerCountdownZero"
];
function q(t, n) {
y(t), t.player.value = n, K(t);
}
function y(t) {
var u;
const n = t.element.value, s = n == null ? void 0 : n.parentNode, e = s && Array.from(s.childNodes), a = n && (e == null ? void 0 : e.indexOf(n)), o = a !== void 0 && (e == null ? void 0 : e[a + 1]);
J(t), (u = t.player.value) == null || u.destroy(), t.player.value = void 0, !(!n || !s || n.parentNode) && (o ? s.insertBefore(n, o) : s.appendChild(n));
}
function K({
listeners: t,
player: n
}) {
if (n.value)
for (const s of E) {
const e = t == null ? void 0 : t[L(s)];
e && n.value.addEventListener(s, e);
}
}
function J({
listeners: t,
player: n
}) {
if (n.value)
for (const s of E) {
const e = t == null ? void 0 : t[L(s)];
e && n.value.removeEventListener(s, e);
}
}
function Q({
enabled: t,
options: n,
...s
}) {
const e = (a) => {
var o;
t.value && ((o = s.element.value) == null ? void 0 : o.id) === a.id && q(s, a);
};
c([t, () => {
var a;
return (a = n.value) == null ? void 0 : a.videoId;
}], ([a, o]) => {
var u;
o ? a && ((u = s.player.value) == null || u.loadVideo(o)) : y(s);
}), c([t, s.element], ([a, o]) => {
(!a || !o) && y(s);
}), M(() => {
(window._fcpr || (window._fcpr = [])).push(e);
}), I(() => {
const a = (window._fcpr || (window._fcpr = [])).indexOf(e);
a === -1 || _fcpr.splice(a, 1), y(s);
});
}
function W({
listeners: t,
emit: n
}) {
if (n)
for (const s of E) {
const e = L(s), a = (u) => n(s, u), o = t[e];
t[e] = o ? (u) => {
o(u), a(u);
} : a;
}
}
function X({
listeners: t,
player: n,
options: s,
paused: e
}) {
if (!e)
return;
const { onPlay: a, onPause: o } = t;
let u = !1;
const l = () => {
const i = n.value ? n.value.paused : !0;
u = e.value !== i, e.value = i;
};
t.onPlay = a ? (i) => {
l(), a(i);
} : l, t.onPause = o ? (i) => {
l(), o(i);
} : l, c([n, () => {
var i;
return (i = s.value) == null ? void 0 : i.videoId;
}], (i, [r]) => {
r || l();
}), c([e, n], ([i, r]) => {
if (u) {
u = !1;
return;
}
i ? r == null || r.pause() : r == null || r.play();
});
}
function Y({
listeners: t,
player: n,
volume: s,
muted: e
}) {
let a = !1, o = !1, u = e == null ? void 0 : e.value, l = s == null ? void 0 : s.value;
const {
onVolumechange: i,
onFcplayerSrcChanged: r
} = t, v = e && (() => {
a = u !== e.value, e.value = !!u;
}), p = s && (() => {
o = l !== s.value, s.value = typeof l == "number" ? l : 1;
}), g = () => {
n.value && (n.value.muted = !!u, n.value.volume = typeof l == "number" ? l : 1);
}, h = () => {
var d;
((d = n.value) != null && d.readyState || 0 >= HTMLMediaElement.HAVE_CURRENT_DATA) && (u = n.value.muted, l = n.value.volume, v == null || v(), p == null || p());
};
t.onFcplayerSrcChanged = r ? (d) => {
g(), r(d);
} : g, t.onVolumechange = i ? (d) => {
h(), i(d);
} : h, e && c([e, n], ([d, m]) => {
if (a) {
a = !1;
return;
}
m && (m.muted = d);
}), s && c([s, n], ([d, m]) => {
if (o) {
o = !1;
return;
}
m && (m.volume = d);
});
}
function ee({
listeners: t,
player: n,
options: s,
currentTime: e
}) {
if (!e)
return;
const { onTimeupdate: a } = t;
let o = !1;
const u = () => {
const l = n.value ? n.value.currentTime : 0;
o = l !== e.value, e.value = l;
};
t.onTimeupdate = a ? (l) => {
u(), a(l);
} : u, c([n, () => {
var l;
return (l = s.value) == null ? void 0 : l.videoId;
}], u), c([e, n], ([l, i]) => {
if (o) {
o = !1;
return;
}
i && (i.currentTime = l);
});
}
function te({
listeners: t,
player: n,
fullscreen: s
}) {
if (!s)
return;
const {
onFullscreenenter: e,
onFullscreenexit: a
} = t;
let o = !1;
const u = () => {
o = !s.value, s.value = !0;
}, l = () => {
o = !!s.value, s.value = !1;
};
t.onFullscreenenter = e ? () => {
u(), e();
} : u, t.onFullscreenexit = a ? () => {
l(), a();
} : l, c([s, n], ([i, r]) => {
if (o) {
o = !1;
return;
}
i ? r == null || r.requestFullscreen() : document == null || document.exitFullscreen();
});
}
function ae({
player: t,
subtitles: n,
currentSubtitles: s
}) {
if (!n && !s)
return;
n || (n = k([]));
const e = () => {
const a = t != null && t.value.textTracks.length ? Array.from(t == null ? void 0 : t.value.textTracks).filter((o) => o.kind === "subtitles") : [];
(n.value.length !== a.length || n.value.some((o, u) => o !== a[u])) && (n.value = a), s && (s.value = a.find((o) => o.mode !== "disabled"));
};
s && c(s, (a) => {
var o;
for (const u of n.value)
a === u ? (a.is_active = !0, a.mode = (o = t.value) != null && o.config.subtitles.native ? "showing" : "hidden") : (u.is_active = !1, u.mode = "disabled");
}), c(t, (a, o) => {
o == null || o.textTracks.removeEventListener("addtrack", e), o == null || o.textTracks.removeEventListener("removetrack", e), o == null || o.textTracks.removeEventListener("change", e), a == null || a.textTracks.addEventListener("addtrack", e), a == null || a.textTracks.addEventListener("removetrack", e), a == null || a.textTracks.addEventListener("change", e), e();
});
}
function ne({
listeners: t,
player: n,
options: s,
readyState: e
}) {
if (!e)
return;
const { onLoadeddata: a } = t, o = () => {
e.value = n.value ? n.value.readyState : 0;
};
t.onLoadeddata = a ? (u) => {
o(), a(u);
} : o, c([n, () => {
var u;
return (u = s.value) == null ? void 0 : u.videoId;
}], o);
}
function se({
enabled: t,
options: n,
attributes: s
}) {
c([t, n], ([e, a]) => {
s.value = e ? le(a) : {};
}, {
deep: !0,
immediate: !0
});
}
function oe({
enabled: t,
options: n,
key: s
}) {
c([() => {
var e;
return (e = n.value) == null ? void 0 : e.videoId;
}, t], ([e, a], [o]) => {
(!a || !e != !o) && s.value++;
});
}
function ue({
listeners: t,
player: n
}) {
const s = () => {
n.value && !Array.isArray(n.value.config.chapters.list) && (n.value.config.chapters.list = []);
}, { onFcplayerSrcChanged: e } = t;
t.onFcplayerSrcChanged = e ? (a) => {
s(), e(a);
} : s;
}
function le(t = {}) {
return Object.entries(t).reduce((s, [e, a]) => {
const o = Z[e] || e;
return s[`data-${o}`] = a, s;
}, {
...P
});
}
function L(t) {
return `on${t[0].toUpperCase()}${t.slice(1)}`;
}
const ie = /* @__PURE__ */ N({
__name: "FreecasterPlayer",
props: /* @__PURE__ */ B({
enabled: { type: Boolean },
videoId: {},
height: {},
width: {},
preload: {},
volume: {},
autoplay: { type: Boolean },
autopause: { type: Boolean },
controls: { type: Boolean },
muted: { type: Boolean },
loop: { type: Boolean },
cast: { type: Boolean },
playsinline: { type: Boolean },
watermarkEnabled: { type: Boolean },
lang: {},
stats: { type: Boolean },
noads: { type: Boolean },
thumbnailsSrc: {},
poster: {},
stretching: { type: [String, Boolean] },
subtitlesDefaultLang: {},
subtitlesLang: {},
subtitlesNative: { type: Boolean },
floatOnScroll: { type: Boolean },
multiplay: { type: Boolean },
chaptersEnabled: { type: Boolean },
chaptersStyle: {},
chaptersList: {},
audioOnly: { type: Boolean },
trackersGaEnabled: { type: Boolean },
trackersGaTagIds: {},
speedOptions: {},
speedLabels: {}
}, {
modelValue: {},
modelModifiers: {},
paused: { type: Boolean, default: !0 },
pausedModifiers: {},
muted: { type: Boolean, default: !1 },
mutedModifiers: {},
fullscreen: { type: Boolean, default: !1 },
fullscreenModifiers: {},
volume: { default: 1 },
volumeModifiers: {},
currentTime: { default: 0 },
currentTimeModifiers: {},
readyState: { default: 0 },
readyStateModifiers: {},
currentSubtitles: {},
currentSubtitlesModifiers: {},
subtitles: { default: [] },
subtitlesModifiers: {}
}),
emits: /* @__PURE__ */ B(["abort", "canplay", "canplaythrough", "durationchange", "emptied", "encrypted", "ended", "error", "load", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "waitingforkey", "enterpictureinpicture", "leavepictureinpicture", "resize", "fullscreenenter", "fullscreenexit", "viewenter", "viewleave", "fcplayerDestroy", "fcplayerSrcChanged", "fcplayerConfigChanged", "fcplayerCountdownTick", "fcplayerCountdownEnabled", "fcplayerCountdownDisabled", "fcplayerCountdownZero"], ["update:modelValue", "update:paused", "update:muted", "update:fullscreen", "update:volume", "update:currentTime", "update:readyState", "update:currentSubtitles", "update:subtitles"]),
setup(t, { expose: n, emit: s }) {
const e = t;
D();
const a = s, o = f(t, "modelValue"), u = f(t, "paused"), l = f(t, "muted"), i = f(t, "fullscreen"), r = f(t, "volume"), v = f(t, "currentTime"), p = f(t, "readyState"), g = f(t, "currentSubtitles"), h = f(t, "subtitles");
n({
player: o,
paused: u,
muted: l,
fullscreen: i,
volume: r,
currentTime: v,
readyState: p,
currentSubtitles: g,
subtitles: h
});
const d = C(() => e.enabled), m = C(() => ({
videoId: e.videoId,
height: e.height,
width: e.width,
preload: e.preload,
volume: e.volume,
autoplay: e.autoplay,
autopause: e.autopause,
controls: e.controls,
muted: e.muted,
loop: e.loop,
cast: e.cast,
playsinline: e.playsinline,
watermarkEnabled: e.watermarkEnabled,
lang: e.lang,
stats: e.stats,
noads: e.noads,
thumbnailsSrc: e.thumbnailsSrc,
poster: e.poster,
stretching: e.stretching,
subtitlesDefaultLang: e.subtitlesDefaultLang,
subtitlesLang: e.subtitlesLang,
subtitlesNative: e.subtitlesNative,
floatOnScroll: e.floatOnScroll,
multiplay: e.multiplay,
chaptersEnabled: e.chaptersEnabled,
chaptersStyle: e.chaptersStyle,
chaptersList: e.chaptersList,
audioOnly: e.audioOnly,
trackersGaEnabled: e.trackersGaEnabled,
trackersGaTagIds: e.trackersGaTagIds,
speedOptions: e.speedOptions,
speedLabels: e.speedLabels
})), w = V(), { element: F, key: de, attributes: S } = H({
enabled: d,
options: m,
player: o,
paused: u,
muted: l,
fullscreen: i,
volume: r,
currentTime: v,
readyState: p,
emit: a,
currentSubtitles: g,
subtitles: h
});
return (A, fe) => (x(), R(z, null, [
G("div", U({
ref_key: "element",
ref: F
}, {
...b(w),
...b(S)
}, {
class: [
b(w).class,
b(S).class
].filter(Boolean)
}), null, 16),
_(A.$slots, "default", $(j({
player: o.value,
paused: u.value,
muted: l.value,
fullscreen: i.value,
volume: r.value,
currentTime: v.value,
readyState: p.value,
currentSubtitles: g.value,
subtitles: h.value
})))
], 64));
}
}), re = "https://player.freecaster.com/freecaster/stable/fcplayer.js", ce = "FreecasterPlayer", pe = {
async install(t, n = {}) {
let {
script: s = !0,
component: e = !0
} = n;
if (s === !0 && (s = re), e === !0 && (e = ce), s && typeof window < "u" && !window.fcplayer) {
const a = document.createElement("script");
a.async = !0, a.src = s, document.head.appendChild(a);
}
e && t.component(e, ie);
}
};
export {
ie as FreecasterPlayer,
pe as FreecasterPlugin,
H as usePlayer
};