@asicupv/paella-zoom-plugin
Version:
A plugin to zoom videos for Paella Player
348 lines (347 loc) • 11.8 kB
JavaScript
import { PluginModule as O, CanvasPlugin as S, Canvas as D, createElementWithHtmlText as E, ButtonPlugin as Z, MenuButtonPlugin as k, CanvasButtonPlugin as P } from "@asicupv/paella-core";
const $ = "@asicupv/paella-zoom-plugin", T = "2.4.0", y = {
name: $,
version: T
}, L = {
"Zoom in": "Zoom in",
"Zoom out": "Zoom out",
"Show video zoom options": "Show video zoom options",
"Use Alt+Scroll to zoom": "Use Alt+Scroll to zoom"
}, z = {
"Zoom in": "Ampliar zoom del vídeo",
"Zoom out": "Reducir zoom de vídeo",
"Show video zoom options": "Mostrar opciones de zoom de vídeo",
"Use Alt+Scroll to zoom": "Usar Alt+Desplazamiento para hacer zoom"
}, _ = {
"Zoom in": "Zoom in",
"Zoom out": "Zoom out",
"Show video zoom options": "Zoom-Optionen anzeigen",
"Use Alt+Scroll to zoom": "Zum Zoomen Alt+Rollen drücken"
}, c = {};
c["en-US"] = L;
c.en = L;
c["es-ES"] = z;
c.es = z;
c["de-DE"] = _;
c.de = _;
let p = null;
class u extends O {
static Get() {
return p || (p = new u()), p;
}
get moduleName() {
return y.name;
}
get moduleVersion() {
return y.version;
}
async getDictionaries() {
return c;
}
}
function g(o, e, n) {
const t = {
w: o.offsetWidth,
h: o.offsetHeight
}, i = {
left: t.w / 2,
top: t.h / 2
};
e.style.width = `${n * 100}%`, e.style.height = `${n * 100}%`;
const a = {
left: e.offsetLeft,
top: e.offsetTop,
w: e.offsetWidth,
h: e.offsetHeight
}, m = {
left: a.w / 2,
top: a.h / 2
}, l = {
left: m.left - i.left,
top: m.top - i.top
};
return n == 1 ? (e.style.left = "0px", e.style.top = "0px", l.left = i.left, l.top = i.top) : (e.style.left = `-${l.left}px`, e.style.top = `-${l.top}px`), l;
}
function U(o, e, n) {
const t = {
left: e.left + n.left,
top: e.top + n.top
}, i = o.parentElement;
return o.style.top = `-${t.top}px`, o.offsetHeight + o.offsetTop - i.offsetHeight < 0 && (t.top = e.top), o.style.left = `-${t.left}px`, o.offsetWidth + o.offsetLeft - i.offsetWidth < 0 && (t.left = e.left), t;
}
class r extends D {
constructor(e, n, t) {
super("div", e, n), this.config = t, this._maxZoom = this.config.maxZoom || 4, this._showButtons = this.config.showButtons !== void 0 ? this.config.showButtons : !0;
}
async loadCanvas(e) {
this.currentZoom = 1, this._videoPlayer = e, e.element.style.width = "100%", e.element.style.height = "100%", e.element.style.position = "absolute", e.element.style.top = "0", e.element.style.left = "0", this.element.style.overflow = "hidden", this.element.style.position = "relative";
const n = (s) => {
if (s.stopPropagation(), !s.altKey) {
this.showAltKeyMessage();
return;
}
this.hideAltKeyMessage();
const f = s.deltaY !== void 0 ? s.deltaY * 0.1 : s.detail * 4, h = this.currentZoom + f * -0.01;
h > 1 && h <= this._maxZoom ? (this.currentZoom = h, this._playerCenter = g(this.element, this._videoPlayer.element, this.currentZoom)) : h <= 1 && (this.currentZoom = 1, this._playerCenter = g(this.element, this._videoPlayer.element, this.currentZoom)), s.preventDefault();
};
this.element.addEventListener("DOMMouseScroll", n), this.element.addEventListener("mousewheel", n);
let t = !1, i = !1, a = null;
const m = () => t = !0, l = () => t = !1, C = (s) => {
i && (s.stopPropagation(), s.preventDefault());
};
this.element.addEventListener("mousedown", m), this.element.addEventListener("mouseleave", l), this.element.addEventListener("mouseup", l), this.element.addEventListener("click", C), this.element.addEventListener("mouseup", C), this.element.addEventListener("mousemove", (s) => {
if (t && this._playerCenter) {
a === null && (a = { left: s.clientX, top: s.clientY }), i = !0;
const f = {
left: a.left - s.clientX,
top: a.top - s.clientY
};
this.currentZoom == 1 ? this._playerCenter = { left: 0, top: 0 } : this._playerCenter = U(this._videoPlayer.element, this._playerCenter, f), a = { left: s.clientX, top: s.clientY };
} else
i = !1, a = null;
});
const x = this.player.translate("Use Alt+Scroll to zoom");
this._zoomMessage = E(`
<div class="zoom-message">${x}</div>
`, this.element), this._zoomMessage.style.display = "none";
}
showAltKeyMessage() {
this._hideTimeout && clearTimeout(this._hideTimeout), this._zoomMessage.style.display = "", this._hideTimeout = setTimeout(() => {
this.hideAltKeyMessage();
}, 2e3);
}
hideAltKeyMessage() {
this._zoomMessage.style.display = "none", this._hideTimeout = null;
}
zoomIn() {
const e = this.currentZoom * 1.1;
e < this._maxZoom && (this.currentZoom = e, this._playerCenter = g(this.element, this._videoPlayer.element, this.currentZoom));
}
zoomOut() {
const e = this.currentZoom * 0.9;
e >= 1 && (this.currentZoom = e, this._playerCenter = g(this.element, this._videoPlayer.element, this.currentZoom));
}
}
let I = class extends S {
getPluginModuleInstance() {
return u.Get();
}
get name() {
return super.name || "es.upv.paella.zoomPlugin";
}
get canvasType() {
return "video";
}
isCompatible(e) {
return !Array.isArray(e.canvas) || e.canvas.length === 0 ? !0 : super.isCompatible(e);
}
getCanvasInstance(e) {
return new r(this.player, e, this.config);
}
};
const d = `<svg width="100%" height="100%" viewBox="0 0 32 32" stroke="none" fill="currentColor" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M17.094,18.048C15.976,18.956 14.551,19.5 13,19.5C9.413,19.5 6.5,16.587 6.5,13C6.5,9.413 9.413,6.5 13,6.5C16.587,6.5 19.5,9.413 19.5,13C19.5,14.522 18.976,15.923 18.098,17.031L19.553,18.487C20.094,17.958 20.962,17.962 21.498,18.498L25.522,22.522C26.062,23.062 26.062,23.938 25.522,24.478L24.519,25.481C23.98,26.02 23.103,26.02 22.563,25.481L18.539,21.457C18,20.917 18,20.041 18.539,19.501L18.543,19.497L17.094,18.048ZM13,8C15.76,8 18,10.24 18,13C18,15.76 15.76,18 13,18C10.24,18 8,15.76 8,13C8,10.24 10.24,8 13,8ZM13.927,11.886L15.927,11.886L15.927,13.886L13.927,13.886L13.927,15.886L11.927,15.886L11.927,13.886L9.927,13.886L9.927,11.886L11.927,11.886L11.927,9.886L13.927,9.886L13.927,11.886Z"/>
</svg>`;
let b = class extends Z {
getPluginModuleInstance() {
return u.Get();
}
get name() {
return super.name || "es.upv.paella.zoomInButtonPlugin";
}
getAriaLabel() {
return "Zoom in";
}
getDescription() {
return this.getAriaLabel();
}
async isEnabled() {
return await super.isEnabled() ? (this.target = this.config.target, this._canvas = this.player.videoContainer.streamProvider.streams[this.target].canvas, this._canvas instanceof r) : !1;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || d;
}
async action() {
this._canvas.zoomIn();
}
};
const v = `<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" stroke="none" fill="currentColor" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M17.094,18.048C15.976,18.956 14.551,19.5 13,19.5C9.413,19.5 6.5,16.587 6.5,13C6.5,9.413 9.413,6.5 13,6.5C16.587,6.5 19.5,9.413 19.5,13C19.5,14.522 18.976,15.923 18.098,17.031L19.553,18.487C20.094,17.958 20.962,17.962 21.498,18.498L25.522,22.522C26.062,23.062 26.062,23.938 25.522,24.478L24.519,25.481C23.98,26.02 23.103,26.02 22.563,25.481L18.539,21.457C18,20.917 18,20.041 18.539,19.501L18.543,19.497L17.094,18.048ZM13,8C15.76,8 18,10.24 18,13C18,15.76 15.76,18 13,18C10.24,18 8,15.76 8,13C8,10.24 10.24,8 13,8ZM9.927,11.886L15.927,11.886L15.927,13.886L9.927,13.886L9.927,11.886Z"/>
</svg>`;
let w = class extends Z {
getPluginModuleInstance() {
return u.Get();
}
get name() {
return super.name || "es.upv.paella.zoomOutButtonPlugin";
}
getAriaLabel() {
return "Zoom out";
}
getDescription() {
return this.getAriaLabel();
}
async isEnabled() {
return await super.isEnabled() ? (this.target = this.config.target, this._canvas = this.player.videoContainer.streamProvider.streams[this.target].canvas, this._canvas instanceof r) : !1;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || v;
}
async action() {
this._canvas.zoomOut();
}
}, M = class extends k {
getPluginModuleInstance() {
return u.Get();
}
get name() {
return super.name || "es.upv.paella.zoomMenuButtonPlugin";
}
getAriaLabel() {
return "Show video zoom options";
}
getDescription() {
return this.getAriaLabel();
}
async isEnabled() {
return await super.isEnabled() ? (this._target = this.config.target || "presenter", this._canvas = this.player.videoContainer.streamProvider.streams[this._target].canvas, this._canvas instanceof r) : !1;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || d;
}
async getMenu() {
return [
{
id: "in",
title: "Zoom in",
icon: this.player.getCustomPluginIcon(this.name, "zoomInIcon") || d
},
{
id: "out",
title: "Zoom out",
icon: this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || v
}
];
}
get buttonType() {
return "button";
}
get showTitles() {
return !1;
}
itemSelected(e) {
switch (e.id) {
case "in":
this._canvas.zoomIn();
break;
case "out":
this._canvas.zoomOut();
break;
}
}
}, B = class extends P {
getPluginModuleInstance() {
return u.Get();
}
get name() {
return super.name || "es.upv.paella.canvasZoomInButtonPlugin";
}
getAriaLabel() {
return this.player.translate("Zoom in");
}
getDescription() {
return this.getAriaLabel();
}
async isEnabled() {
if (!await super.isEnabled())
return !1;
let e = !1;
this._streams = this.player.videoContainer.streamProvider.streams;
for (const n in this._streams)
e ||= this._streams[n].canvas instanceof r;
return e;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || d;
}
async action(e, n, t, i) {
t instanceof r && t.zoomIn();
}
}, A = class extends P {
getPluginModuleInstance() {
return u.Get();
}
get name() {
return super.name || "es.upv.paella.canvasZoomOutButtonPlugin";
}
getAriaLabel() {
return this.player.translate("Zoom out");
}
getDescription() {
return this.getAriaLabel();
}
async isEnabled() {
if (!await super.isEnabled())
return !1;
let e = !1;
this._streams = this.player.videoContainer.streamProvider.streams;
for (const n in this._streams)
e ||= this._streams[n].canvas instanceof r;
return e;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || v;
}
async action(e, n, t, i) {
t instanceof r && t.zoomOut();
}
};
const G = [
{
plugin: I,
config: {
enabled: !1
}
},
{
plugin: b,
config: {
enabled: !1
}
},
{
plugin: w,
config: {
enabled: !1
}
},
{
plugin: M,
config: {
enabled: !1
}
},
{
plugin: B,
config: {
enabled: !1
}
},
{
plugin: A,
config: {
enabled: !1
}
}
], N = G, V = I, q = b, F = w, J = M, Q = B, ee = A;
export {
Q as CanvasZoomInButtonPlugin,
ee as CanvasZoomOutButtonPlugin,
V as ZoomCanvasPlugin,
q as ZoomInButtonPlugin,
J as ZoomMenuButtonPlugin,
F as ZoomOutButtonPlugin,
N as allPlugins,
G as zoomPlugins
};
//# sourceMappingURL=paella-zoom-plugin.js.map