@oplayer/plugins
Version:
oplayer's plugin
128 lines (125 loc) • 4.28 kB
JavaScript
/**
* name: @oplayer/ad
* version: v1.0.15-beta.3
* description: oplayer's plugin
* author: shiyiya
* homepage: https://github.com/shiyiya/oplayer
*/
import { $ as e, Player as w } from "@oplayer/core";
const L = e.css({
position: "absolute",
right: "0.5em",
top: "0.5em",
"z-index": 1,
display: "flex",
gap: "5px",
"align-items": "center",
"justify-content": "center"
}), i = e.css(
"display: inline-block;background: rgba(28 ,28 ,28 , 0.9);color: #fff;padding: 4px 8px;border-radius: 4px; fill:#fff; font-size: 14px"
), $ = e.css({
position: "relative",
"&::before": {
display: "block",
content: "''",
position: "absolute",
width: "50%",
height: "2px",
"background-color": "#fff",
transform: "rotate(40deg) translateY(-100%)",
top: "48%",
left: "6px"
}
}), q = ({
duration: r,
skipDuration: n,
video: d,
image: x,
plugins: b,
target: f,
autoplay: h,
onSkip: u,
position: g
}) => ({
name: "oplayer-plugin-ad",
version: "1.0.15-beta.3",
key: "ad",
apply: (t) => {
h ? p() : e.render(
e.create(
`div.${e.css({
width: "100%",
height: "100%",
position: "absolute",
top: "0",
left: "0",
"z-index": 999
})}`
),
t.$root
).onclick = function() {
this.remove(), p();
};
function p() {
const s = e.create(
`div.${e.css({
width: "100%",
height: "100%",
position: "absolute",
top: "0",
left: "0",
"z-index": 999,
cursor: "pointer"
})}`,
{},
`<div class=${g ? e.css({
...g,
position: "absolute",
"z-index": 1,
display: "flex",
gap: "5px",
"align-items": "center",
"justify-content": "center"
}) : L}>
${n ? `<div class=${i} skipDuration>${t.locales.get(
"Can be closed after %ss",
n
)}</div>` : ""}
<div class=${i} duration>${t.locales.get("%ss", r)}</div>
${d ? `
<div class='${i} ${$}' volume>
<svg width="1em" height="1.5em" viewBox="0 0 1024 1024" version="1.1">
<path d="M552.96 152.064v719.872c0 16.118-12.698 29.184-28.365 29.184a67.482 67.482 0 0 1-48.394-20.644L329.359 729.354a74.547 74.547 0 0 0-53.493-22.794H250.47c-104.386 0-189.03-87.101-189.03-194.56s84.644-194.56 189.03-194.56h25.396c20.07 0 39.3-8.192 53.473-22.794L476.18 143.503a67.482 67.482 0 0 1 48.436-20.623c15.646 0 28.344 13.066 28.344 29.184z m216.965 101.58a39.936 39.936 0 0 1 0-57.425 42.25 42.25 0 0 1 58.778 0c178.483 174.408 178.483 457.154 0 631.562a42.25 42.25 0 0 1-58.778 0 39.936 39.936 0 0 1 0-57.405 359.506 359.506 0 0 0 0-516.752zM666.542 373.884a39.731 39.731 0 0 1 0-55.235 37.52 37.52 0 0 1 53.944 0c104.305 106.783 104.305 279.921 0 386.704a37.52 37.52 0 0 1-53.944 0 39.731 39.731 0 0 1 0-55.235c74.486-76.288 74.486-199.946 0-276.234z" />
</svg>
</div>` : ""}
</div>
</div>
`
);
let o;
const a = s.querySelector(`.${i}[skipDuration]`), y = s.querySelector(`.${i}[duration]`), v = s.querySelector(`.${i}[volume]`);
d ? (o = w.make(s, {
muted: !0,
autoplay: !0,
loop: !0,
source: { src: d }
}).use(b || []).create(), v.addEventListener("click", (l) => {
l.preventDefault(), l.stopPropagation(), o.isMuted ? o.unmute() : o.mute(), v.classList.toggle($);
})) : s.style.background = `url(${x}) center center`, e.render(s, t.$root);
let c = 0;
const m = () => {
clearInterval(z), o == null || o.destroy(), s.remove(), t.play();
}, z = setInterval(() => {
n !== void 0 && (c++, n - c > 0 ? a.innerText = t.locales.get("Can be closed after %ss", n - c) : (a.innerText = t.locales.get("Close"), a.onclick ?? (a.onclick = () => {
u == null || u(c), m();
}))), r - c > 0 ? y.innerText = t.locales.get("%ss", r - c) : m();
}, 1e3);
f && s.addEventListener("click", (l) => {
l.target.classList.contains(i) || window.open(f, "_blank");
});
}
}
});
export {
q as default
};