@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
494 lines (493 loc) • 15.9 kB
JavaScript
import { defineComponent as qe, ref as s, computed as v, reactive as Q, shallowReadonly as De, watch as k, onMounted as Oe, nextTick as oe, provide as je, createVNode as t, mergeProps as d, renderSlot as I, Transition as se } from "vue";
import "../full-screen/index.mjs";
import "../icon/index.mjs";
import "../progress/index.mjs";
import "../renderer/index.mjs";
import { useProps as He, useNameHelper as Xe, useLocale as Be, useIcons as ze, emitEvent as f } from "@vexip-ui/config";
import "./video-control.vue.mjs";
import "./video-progress.vue.mjs";
import "./video-timer.vue.mjs";
import "./video-volume.vue.mjs";
import { useSetTimeout as Ge, useModifier as Je, useListener as N, createSlotRender as Qe } from "@vexip-ui/hooks";
import { isClient as ce, noop as Ue, decide as Ye, toNumber as Ze, decimalLength as el, toCapitalCase as ll } from "@vexip-ui/utils";
import { videoProps as al } from "./props.mjs";
import { videoDefaultControlLayout as D, videoDefaultShortcuts as tl, VIDEO_STATE as ul } from "./symbol.mjs";
import w from "./video-control.vue2.mjs";
import g from "../icon/icon.mjs";
import nl from "./video-timer.vue2.mjs";
import rl from "./video-volume.vue2.mjs";
import ol from "../progress/progress.vue2.mjs";
import sl from "./video-progress.vue2.mjs";
import cl from "../renderer/renderer.mjs";
import il from "../full-screen/full-screen.vue2.mjs";
const Ml = /* @__PURE__ */ qe({
name: "Video",
props: al,
emits: ["update:src", "update:time", "update:volume", "update:playback-rate"],
setup(ie, {
slots: P,
emit: _,
expose: ve
}) {
var ue, ne;
const l = He("video", ie, {
src: {
static: !0,
default: ""
},
srcList: {
static: !0,
default: null
},
noControls: !1,
videoAttrs: null,
time: {
static: !0,
default: 0
},
volume: 1,
playbackRate: 1,
playbackRates: () => [0.5, 1, 1.25, 1.5, 2],
// kernel: null,
controlLayout: () => D,
poster: "",
video: {
static: !0,
default: null
},
segments: () => [],
loading: !1,
loadingIcon: null,
loadingEffect: null,
shortcuts: () => ({}),
slots: () => ({})
}), u = Xe("video"), p = Be("video"), r = ze(), {
timer: V
} = Ge(), U = ce && document.pictureInPictureEnabled, L = s(l.src || ((ue = l.srcList) == null ? void 0 : ue[0]) || ((ne = l.videoAttrs) == null ? void 0 : ne.src) || ""), i = s(!1), c = s(l.time), m = s(!1), b = s(0), x = s(l.volume), C = s(!1), R = s(!0), $ = s(!1), O = s(l.playbackRate), S = s(!1), E = s(!1), F = s(!1), h = s(1.3), T = s(), K = v(() => {
var e;
return (e = T.value) == null ? void 0 : e.wrapper;
}), M = s(), Y = s(), fe = v(() => {
var e;
return (e = T.value) == null ? void 0 : e.placeId;
}), Z = v(() => {
var e;
return ((e = T.value) == null ? void 0 : e.full) ?? !1;
}), n = v(() => M.value || l.video), A = Q({}), y = v(() => ({
...tl,
...l.shortcuts
}));
function pe(e, a) {
return A[e] ? (console.warn(`[vexip-ui:Video] duplicate shortcut key '${e}' and it will be ignored`), Ue) : (A[e] = a, () => {
delete A[e];
});
}
Je({
target: K,
passive: !1,
onKeyDown: (e, a) => {
e.ctrlKey || e.shiftKey || e.altKey || e.metaKey || Ye([[() => a.up, () => {
x.value = Math.min(1, x.value + 0.05);
}], [() => a.down, () => x.value = Math.max(0, x.value - 0.05)], [() => a.right, () => c.value = Math.min(b.value, c.value + 5)], [() => a.left, () => c.value = Math.max(0, c.value - 5)], [() => a[y.value.volume || "M"], () => {
var o;
return (o = Y.value) == null ? void 0 : o.toggleMute();
}], ...Object.keys(A).map((o) => [() => a[o], A[o]])], {
afterMatchAny: a.resetAll
});
}
});
const de = v(() => [u.b(), u.bs("vars"), {
[u.bm("loading")]: l.loading
}]), ee = v(() => i.value ? r.value.pause : r.value.play), j = v(() => i.value ? r.value.pauseState : r.value.playState), me = v(() => {
const e = l.playbackRates.map((a) => {
const o = typeof a == "number" ? {
value: a
} : a;
return o.value = Ze(o.value), o.label = o.label || `${el(o.value) ? o.value : o.value.toFixed(1)}x`, o;
}).filter((a) => a.value > 0).sort((a, o) => o.value - a.value);
if (!e.find((a) => a.value === 1)) {
const a = e.findIndex((o) => o.value < 1);
e.splice((a + e.length) % e.length, 0, {
value: 1,
label: "1.0x"
});
}
return e;
}), be = v(() => l.segments.map((e) => typeof e == "number" ? {
time: e
} : e).filter((e) => e.time >= 0 && e.time <= b.value).sort((e, a) => e.time - a.time)), ge = v(() => b.value ? c.value / b.value * 100 : 0), W = v(() => {
var a;
const e = l.src || ((a = l.videoAttrs) == null ? void 0 : a.src) || "";
return e && l.srcList && !l.srcList.includes(e) ? [e].concat(l.srcList) : l.srcList || [e];
}), H = v(() => W.value ? W.value.indexOf(L.value) : -1), he = De(Q({
playing: i,
currentTime: c,
currentVolume: x,
currentRate: O,
interacting: S,
flipped: F,
canPlay: m,
duration: b,
pip: C,
hasPlayed: E,
togglePlaying: X,
togglePip: le,
changeRate: B,
changeTime: q,
changeVolume: z,
toggleFull: G
}));
k(() => l.src, (e) => {
ae(), L.value = e;
}, {
flush: "pre"
}), k(() => l.time, (e) => {
q(e, !1);
}), k(() => l.volume, (e) => {
z(e, !1);
}), k(() => l.playbackRate, (e) => {
B(e, !1);
}), k(i, (e) => {
e ? requestAnimationFrame(() => {
R.value = !1;
}) : R.value = !0;
}), k(m, (e) => {
e || (i.value = !1);
}), k(R, (e) => {
e && ($.value = !1);
}), Oe(() => {
oe(() => {
var e;
ce && !n.value && ((e = T.value) != null && e.wrapper) && (M.value = T.value.wrapper.querySelector("video") ?? void 0), n.value && c.value > 0 && (n.value.currentTime = c.value);
});
}), je(ul, Q({
placeId: fe,
iconScale: h,
addShortcut: pe
})), N(n, "canplay", () => {
var e;
m.value = !0, b.value = ((e = n.value) == null ? void 0 : e.duration) ?? 0;
}), N(n, "timeupdate", () => {
var e;
c.value = ((e = n.value) == null ? void 0 : e.currentTime) ?? 0, _("update:time", c.value), f(l.onTimeChange, c.value);
}), N(n, "ended", ye), N(n, "enterpictureinpicture", () => {
C.value = !0, f(l.onTogglePip, !0);
}), N(n, "leavepictureinpicture", () => {
C.value = !1, f(l.onTogglePip, !1);
}), ve({
currentSrc: L,
playing: i,
currentTime: c,
duration: b,
pip: C,
interacting: S,
stateHidden: $,
wrapper: K,
video: M,
resetMetaState: ae
});
function X(e = !i.value) {
var a, o, re;
if (!m.value) {
i.value = !1;
return;
}
i.value = e, i.value ? (E.value = !0, (a = n.value) == null || a.play()) : (o = n.value) == null || o.pause(), (re = K.value) == null || re.focus(), f(i.value ? l.onPlay : l.onPause);
}
function ye() {
var e;
i.value = !1, (e = n.value) == null || e.pause(), f(l.onEnded);
}
async function le() {
!U || !n.value || (C.value ? await document.exitPictureInPicture() : await n.value.requestPictureInPicture());
}
function B(e, a = !0) {
O.value = e, n.value && (n.value.playbackRate = e), a && (_("update:playback-rate", e), f(l.onRateChange, e));
}
function q(e, a = !0) {
c.value = e, n.value && e !== n.value.currentTime && (n.value.currentTime = e, e = n.value.currentTime), a && (_("update:time", e), f(l.onTimeChange, e));
}
function z(e, a = !0) {
x.value = e, n.value && (n.value.volume = e), a && (_("update:volume", e), f(l.onVolumeChange, e));
}
function we(e = !F.value, a = !0) {
F.value = e, a && f(l.onToggleFlip, F.value);
}
function Pe(e) {
oe(() => {
var a;
(a = K.value) == null || a.focus(), f(l.onToggleFull, e);
});
}
function ae() {
var e;
i.value = !1, c.value = 0, m.value = !1, b.value = 0, C.value = !1, E.value = !1, (e = n.value) == null || e.pause();
}
function xe() {
clearTimeout(V.interact), S.value = !0, V.interact = setTimeout(() => {
S.value = !1;
}, 3e3);
}
function Ce() {
clearTimeout(V.interact), V.interact = setTimeout(() => {
S.value = !1;
}, 500);
}
function te(e) {
const a = W.value;
l.srcList && (L.value = a[(H.value + e + a.length) % a.length], _("update:src", L.value));
}
function Te() {
te(-1), f(l.onPrev);
}
function ke() {
te(1), f(l.onNext);
}
function G(e) {
var a;
(a = T.value) == null || a.toggle(e);
}
function Le() {
f(l.onRefresh);
}
function Re() {
return t(w, {
class: u.be("play-prev"),
label: p.value.playPrev,
shortcut: y.value["play-prev"],
disabled: !!l.srcList && !H.value,
onClick: Te
}, {
default: () => [t(g, d(r.value.playPrev, {
scale: +(r.value.playPrev.scale || 1) * h.value
}), null)]
});
}
function Se() {
return t(w, {
class: u.be("play"),
label: i.value ? p.value.pause : p.value.play,
shortcut: y.value.play,
disabled: !m.value,
onClick: X
}, {
default: () => [t(g, d(ee.value, {
scale: +(ee.value.scale || 1) * h.value * 1.16
}), null)]
});
}
function Ie() {
return t(w, {
class: u.be("play-next"),
label: p.value.playNext,
shortcut: y.value["play-next"],
disabled: !!l.srcList && H.value === W.value.length - 1,
onClick: ke
}, {
default: () => [t(g, d(r.value.playNext, {
scale: +(r.value.playNext.scale || 1) * h.value
}), null)]
});
}
function _e() {
return t(w, {
class: u.be("play-refresh"),
label: p.value.refresh,
shortcut: y.value.refresh,
onClick: Le
}, {
default: () => [t(g, d(r.value.refresh, {
scale: +(r.value.refresh.scale || 1) * h.value
}), null)]
});
}
function Ee() {
return t(nl, {
time: c.value,
duration: b.value,
disabled: !m.value,
onChange: q
}, null);
}
function Fe() {
return t(w, {
class: u.be("playback-rate"),
type: "select",
value: O.value,
options: me.value,
onSelect: (e) => B(e.value)
}, null);
}
function Me() {
return t(rl, {
ref: Y,
volume: x.value,
onChange: z
}, null);
}
function Ae() {
return t(w, {
class: u.be("flip"),
label: p.value.flip,
shortcut: y.value.flip,
onClick: we
}, {
default: () => [t(g, d(r.value.flipX, {
scale: +(r.value.flipX.scale || 1) * h.value
}), null)]
});
}
function Ne() {
return !U || !M.value ? null : t(w, {
class: u.be("pip"),
label: C.value ? p.value.exitPip : p.value.requestPip,
shortcut: y.value.pip,
disabled: !m.value,
onClick: le
}, {
default: () => [t(g, d(r.value.pip, {
scale: +(r.value.pip.scale || 1) * h.value
}), null)]
});
}
function Ve() {
return t(w, {
class: u.be("full-window"),
label: Z.value === "window" ? p.value.fullWindowExit : p.value.fullWindow,
shortcut: y.value["full-window"],
onClick: () => G("window")
}, {
default: () => [t(g, d(r.value.fullWindow, {
scale: +(r.value.fullWindow.scale || 1) * h.value
}), null)]
});
}
function $e() {
return t(w, {
class: u.be("full-browser"),
label: Z.value === "browser" ? p.value.fullScreenExit : p.value.fullScreen,
shortcut: y.value["full-browser"],
onClick: () => G("browser")
}, {
default: () => [t(g, d(r.value.fullScreen, {
scale: +(r.value.fullScreen.scale || 1) * h.value
}), null)]
});
}
function J(e) {
var a;
switch (e) {
case "play-prev":
return Re();
case "play":
return Se();
case "play-next":
return Ie();
case "refresh":
return _e();
case "timer":
return Ee();
case "playback-rate":
return Fe();
case "volume":
return Me();
case "flip":
return Ae();
case "pip":
return Ne();
case "full-window":
return Ve();
case "full-browser":
return $e();
default:
return (a = Qe(P, [`control-${e}`, `control${ll(e)}`])) == null ? void 0 : a(he);
}
}
function Ke() {
return l.noControls ? t(ol, {
class: u.be("progress-line"),
percentage: ge.value,
"stroke-width": 1,
"info-type": "none"
}, null) : t("div", {
class: {
[u.be("controls")]: !0,
[u.bem("controls", "collapsed")]: E.value && !S.value
}
}, [t("section", {
class: u.be("controls-top")
}, [t(sl, {
time: c.value,
duration: b.value,
segments: be.value,
onChange: q
}, null)]), t("section", {
class: u.be("controls-bottom")
}, [t("div", {
class: u.be("controls-left")
}, [(l.controlLayout.left ?? D.left).map(J)]), t("div", {
class: u.be("controls-center")
}, [(l.controlLayout.center ?? D.center).map(J)]), t("div", {
class: u.be("controls-right")
}, [(l.controlLayout.right ?? D.right).map(J)])])]);
}
function We() {
return t("div", {
class: u.be("main")
}, [t("div", {
class: [u.be("player"), F.value && u.bem("player", "flipped")],
onClick: () => X()
}, [I(P, "player", {}, () => {
var e;
return [t("video", d(l.videoAttrs, {
ref: M,
class: u.be("video"),
src: L.value || ((e = l.videoAttrs) == null ? void 0 : e.src)
}), [I(P, "default")])];
})]), !E.value && (l.poster || P.poster || l.slots.poster) && t("div", {
class: u.be("poster")
}, [I(P, "poster", void 0, () => [t(cl, {
renderer: l.slots.poster
}, {
default: () => [t("img", {
src: l.poster
}, null)]
})])]), t(se, {
name: u.bs("state-effect"),
onAfterLeave: () => $.value = !0
}, {
default: () => [m.value && R.value && t("div", {
class: u.be("state")
}, [I(P, "state", {
active: R.value
}, () => [t(g, d(j.value, {
scale: +(j.value.scale || 1) * 5
}), null)])])]
}), t(se, {
name: u.ns("fade")
}, {
default: () => [(!m.value && !R.value || l.loading && $.value) && t("div", {
class: u.be("loading")
}, [I(P, "loading", {}, () => [t(g, d(r.value.loading, {
icon: l.loadingIcon || r.value.loading.icon,
label: "loading",
effect: l.loadingEffect || r.value.loading.effect,
scale: +(j.value.scale || 1) * 5
}), null)])])]
}), Ke(), I(P, "extra")]);
}
return () => t(il, {
ref: T,
class: de.value,
tabindex: "-1",
onToggle: Pe,
onPointermove: xe,
onPointerleave: Ce
}, {
default: We
});
}
});
export {
Ml as default
};
//# sourceMappingURL=video.mjs.map