pttx-plugin
Version:
532 lines (531 loc) • 22.1 kB
JavaScript
import { ref as v, onMounted as re, defineComponent as J, useAttrs as K, computed as se, openBlock as y, createElementBlock as P, mergeProps as Q, unref as e, createElementVNode as a, normalizeStyle as m, normalizeClass as ve, createCommentVNode as G, renderSlot as fe, createBlock as A, createVNode as U, Transition as me, withCtx as he, withDirectives as pe, toDisplayString as X, createTextVNode as ge, vShow as ye, pushScopeId as Ce, popScopeId as be } from "vue";
let C = {
src: "https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4",
//视频
poster: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEcdM.img",
// 初始化占位图片
volume: 20,
themeColor: "#19accc",
//主体颜色
activeColor: "red",
//选中颜色
width: "500px",
height: "300px"
};
const Se = (u) => {
let d = v({
src: u.src != "" ? u.src : C.src,
//视频
poster: u.poster != "" ? u.poster : C.poster,
// 初始化占位图片
volume: u.volume ?? C.volume,
themeColor: u.themeColor != "" ? u.themeColor : C.themeColor,
//主体颜色
activeColor: u.activeColor != "" ? u.activeColor : C.activeColor,
//选中颜色
width: u.width != "" ? u.width : C.width,
height: u.height != "" ? u.height : C.height
}), n = v({
play: !1,
//播放状态
hideControl: !0,
// 控制栏状态
distance: 0,
// 移动的距离
downState: !1,
// 鼠标点击进度条
playState: !1,
leftInit: 0,
// 当前进度初始偏移量
isFullScreen: !1,
//是否全屏
isHalfScreen: !1,
//是否半屏
isLoading: !0
//是否加载
}), r = v({
// 同上
distance: 0,
downState: !1,
topInit: 0
}), c = v(null), l = v(null), h = v(null), V = v(null), M = v(null), R = v(null), F = v(""), b = v(""), g = v(0), S = v(null), z = v(null), I = v(null), f = v(0), E = v(null);
const _ = (t) => {
E.value && clearTimeout(E.value);
let s = document.querySelector(`.${t}`);
s.className = `control-fade-enter-active show display-show-style ${t}`;
}, w = (t) => {
let s = document.querySelector(`.${t}`);
s.className = `control-fade-leave-active hide ${t}`, E.value = setTimeout(() => {
s.className = `control-fade-leave-active hide display-hide-style ${t}`;
}, 1e3);
}, T = (t) => {
F.value = B(l.value.duration);
}, k = () => {
const t = 100 * l.value.currentTime / l.value.duration;
M.value.style.width = t + "%", R.value.style.left = t - 1 + "%", b.value = B(l.value.currentTime);
}, D = (t) => {
M.value.style.width = 0, R.value.style.left = 0, b.value = "0", n.value.play = !1, n.value.hideControl = !1;
}, q = () => {
const t = (l.value.volume - 0.05) * 100;
z.value.style.height = t.toFixed(0) + "%", I.value.style.bottom = t.toFixed(0) + "%";
}, H = () => {
let t = l.value.duration;
if (t > 0) {
for (let s = 0; s < l.value.buffered.length; s++)
if (l.value.buffered.start(l.value.buffered.length - 1 - s) < l.value.currentTime) {
let ce = l.value.buffered.end(l.value.buffered.length - 1 - s) / t * 100 + "%";
V.value.style.width = ce;
break;
}
}
}, $ = () => {
l.value.addEventListener("loadstart", function(t) {
}), l.value.addEventListener("durationchange", T), l.value.addEventListener("loadedmetadata", function(t) {
n.value.isLoading = !1;
}), l.value.addEventListener("loadeddata", function(t) {
}), l.value.addEventListener("progress", function(t) {
H();
}), l.value.addEventListener("canplay", function(t) {
n.value.isLoading = !1;
}), l.value.addEventListener("canplaythrough", function(t) {
}), l.value.addEventListener("play", function(t) {
}), l.value.addEventListener("pause", function(t) {
}), l.value.addEventListener("seeking", k), l.value.addEventListener("seeked", function(t) {
n.value.isLoading = !0;
}), l.value.addEventListener("waiting", function(t) {
n.value.isLoading = !0;
}), l.value.addEventListener("playing", function(t) {
n.value.isLoading = !1;
}), l.value.addEventListener("timeupdate", k), l.value.addEventListener("ended", D), l.value.addEventListener("error", function(t) {
}), l.value.addEventListener("volumechange", q), l.value.addEventListener("stalled", function(t) {
}), l.value.addEventListener("ratechange", function(t) {
}), l.value.addEventListener("click", () => {
l.value.paused || l.value.ended ? (l.value.ended && (l.value.currentTime = "0"), x("btn")) : p("btn");
});
}, x = (t) => {
t && (n.value.playState = !0), n.value.play = !0, l.value.play();
}, p = (t) => {
t && (n.value.playState = !1), l.value.pause(), n.value.play = !1;
}, j = (t) => {
ne(), n.value.downState = !0, p(), n.value.distance = t.clientX - n.value.leftInit;
}, O = (t) => {
if (!n.value.downState)
return;
let s = t.clientX - n.value.leftInit;
s > g.value && (s = g.value), s < 0 && (s = 0), n.value.distance = s, l.value.currentTime = n.value.distance / g.value * l.value.duration;
}, W = () => {
n.value.downState = !1, l.value.currentTime = n.value.distance / g.value * l.value.duration, b.value = B(l.value.currentTime), n.value.playState && x();
}, te = (t) => {
r.value.topInit = N(S.value).top, f.value = S.value.clientHeight, r.value.downState = !0, r.value.distance = f.value - (t.clientY - r.value.topInit);
}, o = (t) => {
if (!r.value.downState)
return;
let s = r.value.topInit + f.value - t.clientY;
s > f.value && (s = f.value), s < 0 && (s = 0), r.value.distance = s, l.value.volume = r.value.distance / f.value > 1 ? 1 : r.value.distance / f.value, d.value.volume = Math.round(l.value.volume * 100);
}, i = (t) => {
t.stopPropagation(), r.value.downState = !1, l.value.volume = r.value.distance / f.value > 1 ? 1 : r.value.distance / f.value, d.value.volume = Math.round(l.value.volume * 100);
}, ae = (t) => {
t.stopPropagation(), l.value.volume * 100 > 0 && l.value.volume * 100 <= 100 ? l.value.volume = 0 : l.value.volume = 1, d.value.volume = Math.round(l.value.volume * 100), r.value.distance = Math.round(l.value.volume * 100);
}, ie = (t, s) => {
switch (s) {
case "start":
n.value.hideControl = !1;
break;
case "end":
n.value.hideControl = !0;
break;
}
}, ue = () => {
n.value.isFullScreen = !n.value.isFullScreen, n.value.isFullScreen ? le() : oe();
}, de = () => {
let t = (document.body.offsetHeight / 2).toFixed(0), s = (document.body.offsetWidth / 2).toFixed(0);
n.value.isHalfScreen = !n.value.isHalfScreen, n.value.isHalfScreen ? (c.value.style.width = s + "px", c.value.style.height = t + "px") : (c.value.style.width = d.value.width, c.value.style.height = d.value.height);
}, B = (t) => {
let s = Math.floor(t / 60);
return s < 10 && (s = "0" + s), s + ":" + (t % 60 / 100).toFixed(2).slice(-2);
}, N = (t, s) => (s || (s = {}, s.left = 0, s.top = 0), t === document.body || t === null ? s : (s.top += t.offsetTop, s.left += t.offsetLeft, N(t.offsetParent, s))), le = () => {
let t = document.documentElement;
t.requestFullscreen ? t.requestFullscreen() : t.mozRequestFullScreen ? t.mozRequestFullScreen() : t.webkitRequestFullScreen && t.webkitRequestFullScreen(), c.value.style.width = "100%", c.value.style.height = "100%";
}, oe = () => {
let t = document;
t.exitFullscreen ? t.exitFullscreen() : t.mozCancelFullScreen ? t.mozCancelFullScreen() : t.webkitCancelFullScreen && t.webkitCancelFullScreen(), c.value.style.width = d.value.width, c.value.style.height = d.value.height;
}, ne = () => {
var t;
g.value <= 0 && (g.value = h.value.clientWidth), n.value.leftInit <= 0 && (n.value.leftInit = N(h.value).left), l.value.volume = ((t = d.value) == null ? void 0 : t.volume) / 100;
};
return re(() => {
ne(), $();
}), {
videoConfig: d,
videoState: n,
voiceState: r,
videoRef: c,
videoDomRef: l,
videoProOutRef: h,
videoCacheRef: V,
videoProRef: M,
videoPoiRef: R,
duration: F,
currentTime: b,
processWidth: g,
voiceProOutRef: S,
voiceProRef: z,
voicePoiRef: I,
voiceProcessHeight: f,
handleHalfScreen: de,
handleMouseEnterControlVoice: _,
handleMouseLeaveControlVoice: w,
handleProgressDown: j,
handleInitVideo: $,
play: x,
pause: p,
handleProgressMove: O,
handleProgressUp: W,
handleVolProgressDown: te,
handleVolProgressMove: o,
handleClickVoice: ae,
handleVolProgressUp: i,
handleControls: ie,
handleScreen: ue,
timeTranslate: B,
getOffset: N,
fullScreen: le,
exitFullscreen: oe
};
}, _e = /* @__PURE__ */ J({
__name: "svgIcon",
props: {
iconClass: { default: "" },
iconStyle: {},
className: { default: "" },
size: { default: "12" }
},
setup(u) {
const d = u;
let n = K();
const r = se(() => `customer-video-iconfont icon-${d.iconClass}`), c = se(
() => {
const { size: l } = d;
let h = `${l}`;
return h = `${h.replace("px", "")}px`, {
width: h,
height: h,
fill: "currentColor",
...d.iconStyle
};
}
);
return (l, h) => (y(), P("div", Q({ style: c.value }, e(n), {
class: "svg-style u-f u-f-ac u-f-ajc",
"aria-hidden": "true"
}), [
a("span", {
style: m("font-size:" + e(d).size + "px"),
class: ve(r.value)
}, null, 6)
], 16));
}
});
const Z = (u, d) => {
const n = u.__vccOpts || u;
for (const [r, c] of d)
n[r] = c;
return n;
}, L = /* @__PURE__ */ Z(_e, [["__scopeId", "data-v-b6897bae"]]), we = { style: { position: "relative" } }, ke = {
key: 0,
class: "loading-style u-f u-f-ac u-f-ajc"
}, xe = { class: "loading-icon" }, Le = /* @__PURE__ */ J({
__name: "loading",
props: {
isLoading: { type: Boolean, default: !0 },
classData: { default: "" },
themeColor: { default: "" }
},
setup(u) {
const d = u;
let n = d.themeColor ?? "blue", r = K();
return (c, l) => (y(), P("div", we, [
e(d).isLoading ? (y(), P("div", ke, [
a("div", xe, [
a("span", {
style: m("background:" + e(n))
}, null, 4),
a("span", {
style: m("background:" + e(n))
}, null, 4),
a("span", {
style: m("background:" + e(n))
}, null, 4),
a("span", {
style: m("background:" + e(n))
}, null, 4),
a("span", {
style: m("background:" + e(n))
}, null, 4)
])
])) : G("", !0),
a("div", Q({
class: e(d).classData != "" ? e(d).classData : "app-container"
}, e(r)), [
fe(c.$slots, "default", {}, void 0, !0)
], 16)
]));
}
});
const Pe = /* @__PURE__ */ Z(Le, [["__scopeId", "data-v-0841ec04"]]), ee = (u) => (Ce("data-v-fdd444b6"), u = u(), be(), u), Me = ["poster"], Re = ["src"], Ee = /* @__PURE__ */ ee(() => /* @__PURE__ */ a("p", null, "设备不支持", -1)), $e = { class: "custom-video-control" }, Ve = { class: "u-f u-f-ajs custom-video-control-all" }, Fe = { style: { display: "flex", width: "100%" } }, ze = { class: "custom-video-control-control u-f u-f-ac u-f-ajc" }, Ie = { class: "custom-video-control-voice-bg-number" }, Te = { class: "custom-video-control-time u-f u-f-ac u-f-ajc margin-right-5" }, De = { style: { "user-select": "none" } }, qe = { style: { "user-select": "none" } }, He = { class: "custom-video-control-full u-f" }, je = { class: "margin-right-10 u-f u-f-ac u-f-ajc" }, Oe = /* @__PURE__ */ ee(() => /* @__PURE__ */ a("div", { class: "halfScreen-style display-hide-style" }, " 宽屏模式 ", -1)), Be = { class: "u-f u-f-ac u-f-ajc" }, Ne = /* @__PURE__ */ ee(() => /* @__PURE__ */ a("div", { class: "fullScreen-style display-hide-style" }, " 全屏模式 ", -1)), Ae = /* @__PURE__ */ J({
__name: "customVideo",
props: {
src: { default: "" },
poster: { default: "" },
volume: { default: 20 },
themeColor: { default: "" },
activeColor: { default: "" },
width: { default: "" },
height: { default: "" }
},
setup(u) {
const d = u, n = K();
let r = v(!0), {
videoConfig: c,
videoState: l,
videoRef: h,
videoDomRef: V,
videoProOutRef: M,
videoCacheRef: R,
videoProRef: F,
videoPoiRef: b,
duration: g,
currentTime: S,
voiceProOutRef: z,
voiceProRef: I,
voicePoiRef: f,
handleHalfScreen: E,
handleMouseEnterControlVoice: _,
handleMouseLeaveControlVoice: w,
handleProgressDown: T,
play: k,
pause: D,
handleProgressMove: q,
handleProgressUp: H,
handleVolProgressDown: $,
handleVolProgressMove: x,
handleClickVoice: p,
handleVolProgressUp: j,
handleControls: O,
handleScreen: W
} = Se(d);
return (te, o) => (y(), P("div", Q({ class: "custom-video" }, e(n)), [
a("div", {
class: "custom-video-container",
ref_key: "videoRef",
ref: h,
onMouseover: o[22] || (o[22] = (i) => e(O)(i, "start")),
onMouseleave: o[23] || (o[23] = (i) => e(O)(i, "end"))
}, [
e(l).play ? (y(), P("div", {
key: 0,
class: "u-f u-f-ac u-f-ajc",
onClick: o[0] || (o[0] = (i) => e(D)("btn")),
style: { position: "absolute", height: "100%", width: "100%", "z-index": "99" }
}, [
e(l).isLoading ? (y(), A(e(Pe), {
key: 0,
style: { height: "50px", width: "100%" },
themeColor: e(c).themeColor,
isLoading: e(r)
}, null, 8, ["themeColor", "isLoading"])) : G("", !0)
])) : (y(), P("div", {
key: 1,
class: "u-f u-f-ac u-f-ajc",
onClick: o[2] || (o[2] = (i) => e(k)("btn")),
style: { position: "absolute", height: "100%", width: "100%", "z-index": "99" }
}, [
e(l).play ? G("", !0) : (y(), A(e(L), {
key: 0,
style: m("color:" + e(c).themeColor + ";height:70px;width: 70px;"),
size: 70,
onClick: o[1] || (o[1] = (i) => e(k)("btn")),
iconClass: "bofang"
}, null, 8, ["style"]))
])),
a("video", {
class: "custom-video-video",
ref_key: "videoDomRef",
ref: V,
poster: e(c).poster
}, [
a("source", {
src: e(c).src,
type: "video/mp4"
}, null, 8, Re),
Ee
], 8, Me),
U(me, { name: "slide-fade" }, {
default: he(() => [
pe(a("div", $e, [
a("div", {
class: "custom-video-control-bg",
onMousedown: o[3] || (o[3] = //@ts-ignore
(...i) => e(T) && e(T)(...i)),
onMousemove: o[4] || (o[4] = //@ts-ignore
(...i) => e(q) && e(q)(...i)),
onMouseup: o[5] || (o[5] = //@ts-ignore
(...i) => e(H) && e(H)(...i))
}, [
a("div", {
class: "custom-video-control-bg-outside",
ref_key: "videoProOutRef",
ref: M
}, [
a("span", {
class: "custom-video-control-bg-inside-cache",
ref_key: "videoCacheRef",
ref: R
}, null, 512),
a("span", {
class: "custom-video-control-bg-inside",
ref_key: "videoProRef",
ref: F
}, null, 512),
a("span", {
class: "custom-video-control-bg-inside-point",
ref_key: "videoPoiRef",
ref: b
}, null, 512)
], 512)
], 32),
a("div", Ve, [
a("div", Fe, [
a("div", ze, [
e(l).play ? (y(), A(e(L), {
key: 0,
size: 24,
class: "custom-video-control-control-play custom-video-control-control-pause",
onClick: o[6] || (o[6] = (i) => e(D)("btn")),
style: m("color:" + e(c).themeColor),
iconClass: "zanting"
}, null, 8, ["style"])) : (y(), A(e(L), {
key: 1,
size: 24,
class: "custom-video-control-control-play",
onClick: o[7] || (o[7] = (i) => e(k)("btn")),
style: m("color:" + e(c).themeColor),
iconClass: "bofang"
}, null, 8, ["style"]))
]),
a("div", {
class: "custom-video-control-voice u-f u-f-ac u-f-ajc margin-right-5",
onMousemove: o[15] || (o[15] = //@ts-ignore
(...i) => e(x) && e(x)(...i))
}, [
U(e(L), {
size: 20,
onClick: e(p),
onMouseleave: o[8] || (o[8] = (i) => e(w)("custom-video-control-voice-bg")),
onMousemove: o[9] || (o[9] = (i) => e(_)("custom-video-control-voice-bg")),
style: m("color:" + e(c).themeColor),
class: "custom-video-control-voice-play",
iconClass: "laba"
}, null, 8, ["onClick", "style"]),
a("div", {
class: "custom-video-control-voice-bg display-hide-style",
ref: "custom-video-control-voice-bg",
onMouseleave: o[12] || (o[12] = (i) => e(w)("custom-video-control-voice-bg")),
onMousemove: o[13] || (o[13] = (i) => e(_)("custom-video-control-voice-bg"))
}, [
a("div", Ie, X(e(c).volume), 1),
a("div", {
class: "custom-video-control-voice-bg-outside",
ref_key: "voiceProOutRef",
ref: z,
onMousedown: o[10] || (o[10] = //@ts-ignore
(...i) => e($) && e($)(...i)),
onMouseup: o[11] || (o[11] = //@ts-ignore
(...i) => e(j) && e(j)(...i))
}, [
a("span", {
class: "custom-video-control-voice-bg-inside",
ref_key: "voiceProRef",
ref: I
}, null, 512),
a("span", {
class: "custom-video-control-voice-bg-point",
ref_key: "voicePoiRef",
ref: f
}, null, 512)
], 544)
], 544),
a("div", {
onClick: o[14] || (o[14] = //@ts-ignore
(...i) => e(p) && e(p)(...i)),
style: { position: "absolute", height: "35px", width: "18px", bottom: "0px", left: "0px" }
})
], 32),
a("div", Te, [
a("span", De, X(e(S) ? e(S) : "00:00"), 1),
ge(" / "),
a("span", qe, X(e(g) ? e(g) : "00:00"), 1)
])
]),
a("div", He, [
a("div", je, [
U(e(L), {
size: 18,
onMouseleave: o[16] || (o[16] = (i) => e(w)("halfScreen-style")),
onMousemove: o[17] || (o[17] = (i) => e(_)("halfScreen-style")),
style: m("color:" + e(c).themeColor),
class: "custom-video-control-full-icon",
onClick: e(E),
iconClass: e(l).isHalfScreen ? "suoxiaotuichuquanpingshouhui" : "quanping1"
}, null, 8, ["style", "onClick", "iconClass"]),
Oe,
a("div", {
onClick: o[18] || (o[18] = //@ts-ignore
(...i) => e(p) && e(p)(...i)),
style: { "z-index": "-1", position: "absolute", height: "35px", width: "18px", bottom: "0px", left: "0px" }
})
]),
a("div", Be, [
U(e(L), {
size: 18,
onMouseleave: o[19] || (o[19] = (i) => e(w)("fullScreen-style")),
onMousemove: o[20] || (o[20] = (i) => e(_)("fullScreen-style")),
style: m("color:" + e(c).themeColor),
class: "custom-video-control-full-icon",
onClick: e(W),
iconClass: e(l).isFullScreen ? "tuichuquanping" : "quanping2"
}, null, 8, ["style", "onClick", "iconClass"]),
Ne,
a("div", {
onClick: o[21] || (o[21] = //@ts-ignore
(...i) => e(p) && e(p)(...i)),
style: { "z-index": "-1", position: "absolute", height: "35px", width: "100%", bottom: "0px", left: "0px" }
})
])
])
])
], 512), [
[ye, !e(l).hideControl || e(l).play]
])
]),
_: 1
})
], 544)
], 16));
}
});
const Ue = /* @__PURE__ */ Z(Ae, [["__scopeId", "data-v-fdd444b6"]]);
let We = [Ue];
const Xe = (u) => {
We.map((d) => {
u.component(d.__name, d);
});
};
let Y = window;
if (typeof Y < "u" && Y.Vue) {
const u = Y.Vue.createApp({});
Xe(u);
}
export {
Xe as default
};