@asicupv/paella-zoom-plugin
Version:
A plugin to zoom videos for Paella Player
973 lines (972 loc) • 30.6 kB
JavaScript
var F = (n) => {
throw TypeError(n);
}, $ = (n, t, e) => t.has(n) || F("Cannot " + e), u = (n, t, e) => ($(n, t, "read from private field"), e ? e.call(n) : t.get(n)), Z = (n, t, e) => t.has(n) ? F("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, e), B = (n, t, e, s) => ($(n, t, "write to private field"), t.set(n, e), e), R = (n, t, e) => ($(n, t, "access private method"), e);
function st(n) {
n.__hideTimerPaused__ = !1;
}
function W(n, { excludedTags: t = null } = {}) {
const e = document.createElement("div");
e.innerHTML = n;
const s = ["script"];
return t && s.push(...t), s.flatMap((i) => Array.from(e.getElementsByTagName(i))).forEach((i) => {
i.parentElement.removeChild(i);
}), e.innerHTML;
}
var S;
let D = class {
constructor(t) {
Z(this, S, null), B(this, S, t);
}
get player() {
return u(this, S);
}
};
S = /* @__PURE__ */ new WeakMap();
function it({ tag: n = "div", attributes: t = {}, children: e = "", innerText: s = "", parent: i = null }) {
const o = document.createElement(n);
o.innerText = s;
for (let c in t)
o.setAttribute(c, t[c]);
return o.innerHTML = e, i && i.appendChild(o), o;
}
function w(n, t = null) {
const e = document.createElement("div");
e.innerHTML = n;
const s = e.children[0];
return t && t.appendChild(s), s;
}
var p;
class ot extends D {
constructor(t, { tag: e = "div", attributes: s = [], children: i = "", parent: o = null }) {
super(t), Z(this, p, null), B(this, p, it({ tag: e, attributes: s, children: i, parent: o })), Object.defineProperty(this, e, {
get: () => u(this, p)
});
}
get element() {
return u(this, p);
}
get parent() {
return u(this, p).parentElement;
}
hide() {
this.element.style.display = "none";
}
show(t = "block") {
this.element.style.display = null;
}
get isVisible() {
const t = window.getComputedStyle(this.element);
return t.display !== "none" && t.display !== "";
}
setAttribute(t, e) {
u(this, p).setAttribute(t, e);
}
removeFromParent() {
var t;
(t = u(this, p).parentElement) == null || t.removeChild(u(this, p));
}
setParent(t) {
this.removeFromParent(), t.appendChild(u(this, p));
}
}
p = /* @__PURE__ */ new WeakMap();
class K extends D {
constructor(t, e) {
super(t), this._name = e;
}
getPluginModuleInstance() {
return null;
}
get config() {
return this._config;
}
get type() {
return "none";
}
get order() {
var t;
return ((t = this._config) == null ? void 0 : t.order) || 0;
}
get description() {
var t;
return ((t = this._config) == null ? void 0 : t.description) || "";
}
get name() {
return this._name;
}
async isEnabled() {
var t;
return (t = this.config) == null ? void 0 : t.enabled;
}
async load() {
}
async unload() {
}
}
class rt extends D {
get moduleName() {
return this.player.log.warn(`Incomplete player module definition: '${__filename}.moduleName'`), "-";
}
get moduleVersion() {
return this.player.log.warn(`Incomplete player module definition: '${__filename}.moduleVersion'`), "0.0.0";
}
async getDictionaries() {
return null;
}
}
class V extends K {
constructor(t, e, s) {
super(t, e, s), this.__uiPlugin = !0;
}
async getDictionaries() {
return null;
}
}
const q = () => {
const n = document.createElement("span");
return n.classList.add("side-container"), n.classList.add("hidden"), n;
};
class at {
onIconChanged(t, e, s) {
}
onTitleChanged(t, e, s) {
}
onStateChanged(t, e, s, i, o) {
}
}
var M, O, I, P, A;
class H extends V {
constructor() {
super(...arguments), Z(this, M), Z(this, I, null), Z(this, P, null), Z(this, A, []);
}
get type() {
return "button";
}
// _container and _button are loaded in PlaybackBar
get container() {
return this._container;
}
get button() {
return this._button;
}
get interactive() {
return !0;
}
get dynamicWidth() {
return !1;
}
getId() {
return null;
}
get id() {
return this.config.id || this.getId();
}
getButtonName() {
return null;
}
get buttonName() {
return this.config.name || this.getButtonName() || this.name;
}
get ariaLabel() {
return this.config.ariaLabel || this.getAriaLabel();
}
getAriaLabel() {
return "";
}
get tabIndex() {
return this.config.tabIndex || this.getTabIndex();
}
getTabIndex() {
return null;
}
getDescription() {
return "";
}
get description() {
return this.config.description || this.getDescription();
}
get minContainerSize() {
return this.config.minContainerSize || this.getMinContainerSize();
}
getMinContainerSize() {
return 0;
}
setObserver(t) {
if (t instanceof at)
this._observer = t;
else if (typeof t.onIconChanged == "function" || typeof t.onTitleChanged == "function" || typeof t.onStateChanged == "function")
this._observer = t;
else
throw new Error("Invalid observer for ButtonPlugin");
}
get icon() {
return this._icon || (this._icon = ""), this._icon;
}
set icon(t) {
typeof t == "string" && (t = W(t)), this._icon = t, R(this, M, O).call(this);
}
get haveIcon() {
return this.icon !== "";
}
get menuIcon() {
return this._menuIcon || (this._menuIcon = ""), this._menuIcon;
}
set menuIcon(t) {
typeof t == "string" && (t = W(t)), this._menuIcon = t, R(this, M, O).call(this);
}
get haveMenuIcon() {
return this.menuIcon !== "";
}
get isMenuButton() {
var t, e, s;
const i = ((t = this.config) == null ? void 0 : t.parentContainer) === "playbackBar" || !((e = this.config) != null && e.parentContainer), o = ((s = this.config) == null ? void 0 : s.parentContainer) === "videoContainer";
return !i && !o;
}
get title() {
return this._title || "";
}
set title(t) {
var e;
if (this._title = t, t && this._button instanceof HTMLElement) {
const s = this._button.querySelector("span") || w(`<span class="button-title-${this.titleSize}"></span>`, this._button);
s.innerHTML = t;
} else if (this._button instanceof HTMLElement) {
const s = this._button.querySelector("span");
s && this._button.removeChild(s);
}
(e = this._observer) != null && e.onTitleChanged && this._observer.onTitleChanged(this, this._title, t);
}
// "small", "medium", "large"
get titleSize() {
return "medium";
}
// "left" or "right"
get side() {
var t;
return ((t = this.config) == null ? void 0 : t.side) || "left";
}
get closePopUps() {
return this.config.closePopUps || this.getClosePopUps();
}
getClosePopUps() {
return !0;
}
// "playbackBar" or "videoContainer"
get parentContainer() {
var t;
return ((t = this.config) == null ? void 0 : t.parentContainer) || "playbackBar";
}
get className() {
return "";
}
enable() {
this._enabled = !0, this.show();
}
disable() {
this._enabled = !1, this.hide();
}
hide() {
this._button && (this._button.style.display = "none");
}
show() {
if (this._enabled === !1)
return;
const { width: t } = this.player.playbackBar.containerSize;
this._button && (t > this.minContainerSize || this.parentContainer !== "playbackBar") && (this._button.style.display = null);
}
get leftSideContainer() {
return u(this, I) || (B(this, I, q()), this.container.appendChild(u(this, I))), u(this, I);
}
get leftSideContainerPresent() {
return u(this, I) !== null;
}
get rightSideContainer() {
return u(this, P) || (B(this, P, q()), this.container.appendChild(u(this, P))), u(this, P);
}
get rightSideContainerPresent() {
return u(this, P) !== null;
}
get stateText() {
return null;
}
get stateIcon() {
return null;
}
setState({ text: t = null, icon: e = null } = {}) {
var s, i;
const o = this._statusText, c = this._statusIcon;
this._statusText = t, this._statusIcon = e, u(this, A).forEach((a) => a(this)), this._statusIcon && (this.icon = this._statusIcon, this.menuIcon = this._statusIcon), this._statusText && (this.title = this._statusText), (i = (s = this._observer) == null ? void 0 : s.onStateChanged) == null || i.call(s, this, o, t, c, e);
}
onStateChange(t) {
typeof t == "function" ? u(this, A).push(t) : this.player.log.warn("Invalid callback for ButtonPlugin.onStateChange");
}
async action(t, e = null) {
}
onResize({ width: t, height: e }) {
t < this.minContainerSize ? this.hide() : this.show();
}
focus() {
var t;
(t = this.button) == null || t.focus();
}
blur() {
var t;
(t = this.button) == null || t.blur();
}
isFocus() {
return this.button === document.activeElement;
}
}
M = /* @__PURE__ */ new WeakSet(), O = function() {
var n;
const t = this.isMenuButton ? this._menuIcon : this._icon, e = this.isMenuButton && this.haveMenuIcon ? this.menuIcon : this.icon;
if (e && this._button instanceof HTMLElement) {
const s = this._button.querySelector("i") || w("<i></i>", this._button);
s.innerHTML = e;
} else if (this._button instanceof HTMLElement) {
const s = this._button.querySelector("i");
s && this._button.removeChild(s);
}
(n = this._observer) != null && n.onIconChanged && this._observer.onIconChanged(this, t, e);
}, I = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap();
class j extends V {
get type() {
return "canvasButton";
}
get content() {
return this._config.content || ["presenter"];
}
get ariaLabel() {
return this._config.ariaLabel || this.getAriaLabel();
}
getAriaLabel() {
return "";
}
get tabIndex() {
return this.config.tabIndex;
}
get description() {
return this.config.description || this.getDescription();
}
getDescription() {
return "";
}
get icon() {
return this._icon;
}
set icon(t) {
this._icon = t;
}
get side() {
var t;
return ((t = this.config) == null ? void 0 : t.side) || "left";
}
get buttonName() {
return this.name;
}
get position() {
switch (this.side) {
case "left":
return k.LEFT;
case "center":
return k.CENTER;
case "right":
return k.RIGHT;
default:
throw new Error(`Invalid CanvasButtonPlugin side set: ${this.side}`);
}
}
async action(t) {
this.player.log.warn(`Action not implemented in canvas button plugin ${this.name}`);
}
}
const k = Object.freeze({
LEFT: "left",
CENTER: "center",
RIGHT: "right"
});
class lt extends ot {
constructor(t, e, s) {
super(e, { tag: t, parent: s }), this.element.className = "video-canvas", this._userArea = null, this._buttonsArea = w(`
<div class="button-area">
<div class="buttons-left"></div>
<div class="buttons-center"></div>
<div class="buttons-right"></div>
</div>
`, this.element);
}
async loadCanvas(t) {
throw Error(`${this.name}: loadCanvas() not implemented`);
}
get userArea() {
return this._userArea || (this._userArea = document.createElement("div"), this._userArea.className = "user-area", this.element.appendChild(this._userArea)), this._userArea;
}
get leftButtonsArea() {
return this._buttonsArea.querySelector(".buttons-left");
}
get centerButtonsArea() {
return this._buttonsArea.querySelector(".buttons-center");
}
get rightButtonsArea() {
return this._buttonsArea.querySelector(".buttons-right");
}
clearButtonsArea() {
this._buttonsArea.childNodes.forEach((t) => {
t.innerHTML = "";
});
}
showButtons() {
this._buttonsArea.style.display = null;
}
hideButtons() {
this._buttonsArea.style.display = "none";
}
}
class ut extends K {
get type() {
return "canvas";
}
get canvasType() {
return "";
}
isCompatible(t) {
return Array.isArray(t == null ? void 0 : t.canvas) ? t.canvas.indexOf(this.canvasType) !== -1 : t.canvas === this.canvasType;
}
getCanvasInstance(t) {
throw Error(`${this.name} canvas plugin: getCanvasInstance() not implemented`);
}
}
class ct extends H {
constructor() {
super(...arguments), this._refreshContent = !0;
}
set refreshContent(t) {
this._refreshContent = t;
}
get refreshContent() {
return this._refreshContent;
}
get closeParentPopUp() {
return this.config.closeParentPopUp || this.getCloseParentPopUp();
}
getCloseParentPopUp() {
return !1;
}
async action(t, e) {
super.action(t, e), this.parentPopUp = e, await this.showPopUp();
}
get parentPopUp() {
return this._parentPopUp;
}
set parentPopUp(t) {
this._parentPopUp = t;
}
get popUp() {
return this._popUp;
}
get menuTitle() {
return this.config.menuTitle || null;
}
get moveable() {
return this.config.moveable ?? !1;
}
get resizeable() {
return this.config.resizeable ?? !1;
}
get customPopUpClass() {
return this.config.customPopUpClass ?? "";
}
get closeActions() {
var t, e;
const s = ((t = this.config.closeActions) == null ? void 0 : t.clickOutside) ?? !0, i = ((e = this.config.closeActions) == null ? void 0 : e.closeButton) ?? !1;
return {
clickOutside: s,
closeButton: i
};
}
get currentContent() {
return this._currentContent;
}
async getContent() {
return w("<p>Pop Up Button Plugin Content</p>");
}
async checkRefreshContent() {
if (this.refreshContent) {
const t = await this.getContent();
this._currentContent.innerHTML = "", Array.from(t.children).forEach((e) => this._currentContent.appendChild(e));
}
}
get popUpType() {
return this.config.popUpType || "modal";
}
hidePopUp() {
this.player.playbackBar.popUp.isHidden || this.player.playbackBar.popUp.hide();
}
async showPopUp() {
this._keyEventHandler || (this._keyEventHandler = (e) => {
e.key === "Escape" && this.hidePopUp();
}, this.button.addEventListener("keydown", this._keyEventHandler));
const t = this.player.playbackBar.popUp;
if (t.isHidden || this._contentId !== t.currentContentId) {
const e = await this.getContent();
this._currentContent = e, this._contentId = t.show({
title: this.menuTitle || this.description,
content: e,
attachRight: this.popUpType === "timeline" || this.side === "right",
attachLeft: this.popUpType === "timeline" || this.side === "left",
parent: this.parentPopUp
});
} else
t.hide();
}
}
const ht = (n) => n ? `<span class="menu-title">${n}</span>` : "", dt = (n) => n ? `<i class="menu-icon">${n}</i>` : "", mt = (n) => n ? `aria-label="${n}"` : "", pt = (n) => n ? `<span class="state-text">${n}</span>` : "", gt = (n) => n ? `<i class="state-icon">${n}</i>` : "", ft = (n, t) => n || t ? `<span class="button-state">${pt(n)}${gt(t)}</span>` : "";
function vt({ itemData: n, buttonType: t, container: e, allItems: s, menuName: i, selectedItems: o, itemPlugin: c }) {
const { id: a = 0, title: l = null, icon: v = null, iconText: r = null, showTitle: y = !0, stateText: d = null, stateIcon: L = null } = n, g = this, x = document.createElement("li"), nt = o[a] ?? !1, T = w(`
<button class="menu-button-item${nt ? " selected" : ""}" ${mt(l)} data-id="${a}"" id="${g.name}_menuItem_${a}">
${dt(v)}
${y ? ht(l) : ""}
${d || L ? ft(d, L) : ""}
</button>
`);
return c && (c._button = T), T.addEventListener("keydown", (m) => {
var f;
const h = () => {
m.stopPropagation(), m.preventDefault();
};
if (m.key === "ArrowUp") {
const _ = T.dataPrev;
_ == null || _.focus(), h();
} else if (m.key === "ArrowDown") {
const _ = T.dataNext;
_ == null || _.focus(), h();
} else if (m.key === "Tab") {
const _ = m.shiftKey ? m.target.dataPrev : m.target.dataNext;
_ == null || _.focus(), h();
} else m.key === "Escape" && (this.player.playbackBar.popUp.pop() ? (f = g.button) == null || f.focus() : this.focus(), h());
}), T.addEventListener("click", async (m) => {
if (t === "check") {
const f = s.find((h) => h.id === a);
o[a] = !o[a], g.itemSelected(f, s);
} else if (t === "radio") {
o[a] = !0;
let f = null;
s.forEach((h) => {
h.id === a ? f = h : o[h.id] = !1;
}), g.itemSelected(f, s);
} else {
const f = s.find((h) => h.id === a);
g.itemSelected(f, s);
}
await g.checkRefreshContent(), m.stopPropagation(), g.closeOnSelect && (g.closeMenu(), st(g.player));
}), x.appendChild(T), e.appendChild(x), x;
}
class yt extends ct {
get closeOnSelect() {
return this.config.closeOnSelect === void 0 && (this.buttonType !== "check" ? this.config.closeOnSelect = !0 : this.config.closeOnSelect = !1), this.config.closeOnSelect;
}
setSelected(t, e) {
this._selectedItems && (this._selectedItems[t] = e);
}
async getContent() {
var t, e;
const s = (t = document.activeElement) == null ? void 0 : t.id, i = w("<menu></menu>");
this._content = i;
const o = await this.getMenu();
this._menuItems = o, this._selectedItems || (this._selectedItems = {}, this._menuItems.forEach((l) => {
l.selected !== void 0 && l.selected !== null && (this._selectedItems[l.id] = l.selected);
}));
const c = self.crypto.randomUUID(), a = o.map((l) => vt.apply(this, [{
itemData: l,
buttonType: typeof this.buttonType == "function" ? this.buttonType() : this.buttonType,
container: i,
allItems: o,
menuName: c,
selectedItems: this._selectedItems,
itemPlugin: l.plugin
}]));
return a.forEach((l, v, r) => {
const y = l.querySelector("button");
let d = r[v + 1], L = r[v - 1];
v === r.length - 1 && (d = r[0]), v === 0 && (L = r[r.length - 1]), y.dataNext = d == null ? void 0 : d.querySelector("button"), y.dataPrev = L == null ? void 0 : L.querySelector("button");
}), this._firstItem = (e = a[0]) == null ? void 0 : e.querySelector("button"), s && setTimeout(() => {
var l;
(l = document.getElementById(s)) == null || l.focus();
}, 10), i;
}
get menuTitle() {
return this.config.menuTitle || null;
}
async getMenu() {
return [
{ id: 0, title: "Option 1" },
{ id: 1, title: "Option 2" },
{ id: 2, title: "Option 3" },
{ id: 3, title: "Option 4" },
{ id: 4, title: "Option 5" }
];
}
// Returns the menuItems with the current menu state
get menuItems() {
return this._menuItems;
}
// If showTitles is false, then the 'title' attribute of the menu
// items is used only as aria-label.
// If the menu item has no icon, then the `showTitles` property is ignored
get showTitles() {
return !0;
}
get buttonType() {
return "radio";
}
itemSelected(t, e) {
this.player.log.warn(`MenuButtonPlugin (${this.name}): itemSelected() function not implemented.`);
}
closeMenu() {
this.player.playbackBar.popUp.hide();
}
async showPopUp() {
this.refreshContent = !0, await super.showPopUp(), this.player.containsFocus && this._firstItem && this._firstItem.focus();
}
}
const _t = Object.freeze({
DISABLED: 0,
ERROR: 1,
WARN: 2,
INFO: 3,
DEBUG: 4,
VERBOSE: 5
});
_t.INFO;
const bt = "@asicupv/paella-zoom-plugin", Ct = "2.2.2", G = {
name: bt,
version: Ct
}, It = {
"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"
}, Pt = {
"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"
}, wt = {
"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"
}, Lt = {
de: It,
en: Pt,
es: wt
};
let U = null;
class C extends rt {
static Get() {
return U || (U = new C()), U;
}
get moduleName() {
return G.name;
}
get moduleVersion() {
return G.version;
}
async getDictionaries() {
return Lt;
}
}
function z(n, t, e) {
const s = {
w: n.offsetWidth,
h: n.offsetHeight
}, i = {
left: s.w / 2,
top: s.h / 2
};
t.style.width = `${e * 100}%`, t.style.height = `${e * 100}%`;
const o = {
left: t.offsetLeft,
top: t.offsetTop,
w: t.offsetWidth,
h: t.offsetHeight
}, c = {
left: o.w / 2,
top: o.h / 2
}, a = {
left: c.left - i.left,
top: c.top - i.top
};
return e == 1 ? (t.style.left = "0px", t.style.top = "0px", a.left = i.left, a.top = i.top) : (t.style.left = `-${a.left}px`, t.style.top = `-${a.top}px`), a;
}
function Tt(n, t, e) {
const s = {
left: t.left + e.left,
top: t.top + e.top
}, i = n.parentElement;
return n.style.top = `-${s.top}px`, n.offsetHeight + n.offsetTop - i.offsetHeight < 0 && (s.top = t.top), n.style.left = `-${s.left}px`, n.offsetWidth + n.offsetLeft - i.offsetWidth < 0 && (s.left = t.left), s;
}
class b extends lt {
constructor(t, e, s) {
super("div", t, e), this.config = s, this._maxZoom = this.config.maxZoom || 4, this._showButtons = this.config.showButtons !== void 0 ? this.config.showButtons : !0;
}
async loadCanvas(t) {
this.currentZoom = 1, this._videoPlayer = t, t.element.style.width = "100%", t.element.style.height = "100%", t.element.style.position = "absolute", t.element.style.top = "0", t.element.style.left = "0", this.element.style.overflow = "hidden", this.element.style.position = "relative";
const e = (r) => {
if (r.stopPropagation(), !r.altKey) {
this.showAltKeyMessage();
return;
}
this.hideAltKeyMessage();
const y = r.deltaY !== void 0 ? r.deltaY * 0.1 : r.detail * 4, d = this.currentZoom + y * -0.01;
d > 1 && d <= this._maxZoom ? (this.currentZoom = d, this._playerCenter = z(this.element, this._videoPlayer.element, this.currentZoom)) : d <= 1 && (this.currentZoom = 1, this._playerCenter = z(this.element, this._videoPlayer.element, this.currentZoom)), r.preventDefault();
};
this.element.addEventListener("DOMMouseScroll", e), this.element.addEventListener("mousewheel", e);
let s = !1, i = !1, o = null;
const c = () => s = !0, a = () => s = !1, l = (r) => {
i && (r.stopPropagation(), r.preventDefault());
};
this.element.addEventListener("mousedown", c), this.element.addEventListener("mouseleave", a), this.element.addEventListener("mouseup", a), this.element.addEventListener("click", l), this.element.addEventListener("mouseup", l), this.element.addEventListener("mousemove", (r) => {
if (s && this._playerCenter) {
o === null && (o = { left: r.clientX, top: r.clientY }), i = !0;
const y = {
left: o.left - r.clientX,
top: o.top - r.clientY
};
this.currentZoom == 1 ? this._playerCenter = { left: 0, top: 0 } : this._playerCenter = Tt(this._videoPlayer.element, this._playerCenter, y), o = { left: r.clientX, top: r.clientY };
} else
i = !1, o = null;
});
const v = this.player.translate("Use Alt+Scroll to zoom");
this._zoomMessage = w(`
<div class="zoom-message">${v}</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 t = this.currentZoom * 1.1;
t < this._maxZoom && (this.currentZoom = t, this._playerCenter = z(this.element, this._videoPlayer.element, this.currentZoom));
}
zoomOut() {
const t = this.currentZoom * 0.9;
t >= 1 && (this.currentZoom = t, this._playerCenter = z(this.element, this._videoPlayer.element, this.currentZoom));
}
}
let Y = class extends ut {
getPluginModuleInstance() {
return C.Get();
}
get name() {
return super.name || "es.upv.paella.zoomPlugin";
}
get canvasType() {
return "video";
}
isCompatible(t) {
return !Array.isArray(t.canvas) || t.canvas.length === 0 ? !0 : super.isCompatible(t);
}
getCanvasInstance(t) {
return new b(this.player, t, this.config);
}
};
const E = `<svg width="100%" height="100%" viewBox="0 0 32 32" 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 X = class extends H {
getPluginModuleInstance() {
return C.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 b) : !1;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || E;
}
async action() {
this._canvas.zoomIn();
}
};
const N = `<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" 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 J = class extends H {
getPluginModuleInstance() {
return C.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 b) : !1;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || N;
}
async action() {
this._canvas.zoomOut();
}
}, Q = class extends yt {
getPluginModuleInstance() {
return C.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 b) : !1;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || E;
}
async getMenu() {
return [
{
id: "in",
title: "Zoom in",
icon: this.player.getCustomPluginIcon(this.name, "zoomInIcon") || E
},
{
id: "out",
title: "Zoom out",
icon: this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || N
}
];
}
get buttonType() {
return "button";
}
get showTitles() {
return !1;
}
itemSelected(t) {
switch (t.id) {
case "in":
this._canvas.zoomIn();
break;
case "out":
this._canvas.zoomOut();
break;
}
}
}, tt = class extends j {
getPluginModuleInstance() {
return C.Get();
}
get name() {
return super.name || "es.upv.paella.canvasZoomInButtonPlugin";
}
async isEnabled() {
if (!await super.isEnabled())
return !1;
let t = !1;
this._streams = this.player.videoContainer.streamProvider.streams;
for (const e in this._streams)
t || (t = this._streams[e].canvas instanceof b);
return t;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || E;
}
async action(t, e, s, i) {
s instanceof b && s.zoomIn();
}
}, et = class extends j {
getPluginModuleInstance() {
return C.Get();
}
get name() {
return super.name || "es.upv.paella.canvasZoomOutButtonPlugin";
}
async isEnabled() {
if (!await super.isEnabled())
return !1;
let t = !1;
this._streams = this.player.videoContainer.streamProvider.streams;
for (const e in this._streams)
t || (t = this._streams[e].canvas instanceof b);
return t;
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || N;
}
async action(t, e, s, i) {
s instanceof b && s.zoomOut();
}
};
const Zt = [
{
plugin: Y,
config: {
enabled: !1
}
},
{
plugin: X,
config: {
enabled: !1
}
},
{
plugin: J,
config: {
enabled: !1
}
},
{
plugin: Q,
config: {
enabled: !1
}
},
{
plugin: tt,
config: {
enabled: !1
}
},
{
plugin: et,
config: {
enabled: !1
}
}
], kt = Zt, Ut = Y, Ot = X, $t = J, Dt = Q, Ht = tt, Nt = et;
export {
Ht as CanvasZoomInButtonPlugin,
Nt as CanvasZoomOutButtonPlugin,
Ut as ZoomCanvasPlugin,
Ot as ZoomInButtonPlugin,
Dt as ZoomMenuButtonPlugin,
$t as ZoomOutButtonPlugin,
kt as allPlugins,
Zt as zoomPlugins
};
//# sourceMappingURL=paella-zoom-plugin.js.map