@asicupv/paella-zoom-plugin
Version:
A plugin to zoom videos for Paella Player
412 lines (411 loc) • 14.9 kB
JavaScript
import { ButtonPlugin as e, Canvas as t, CanvasButtonPlugin as n, CanvasPlugin as r, MenuButtonPlugin as i, PluginModule as a, createElementWithHtmlText as o } from "@asicupv/paella-core";
var s = {
name: "@asicupv/paella-zoom-plugin",
version: "2.5.3",
description: "A plugin to zoom videos for Paella Player",
publishConfig: { access: "public" },
exports: {
".": "./dist/paella-zoom-plugin.js",
"./src/": "./src/",
"./paella-zoom-plugin.css": "./dist/paella-zoom-plugin.css"
},
main: "./dist/paella-zoom-plugin.js",
type: "module",
module: "./dist/paella-zoom-plugin.js",
files: [
"dist/paella-zoom-plugin.css",
"dist/paella-zoom-plugin.js",
"dist/paella-zoom-plugin.js.map",
"dist/paella-zoom-plugin.d.ts"
],
scripts: {
dev: "vite build --watch",
build: "vite build --emptyOutDir && npm run bundle:types",
"bundle:types": "dts-bundle-generator -o dist/paella-zoom-plugin.d.ts dist/index.d.ts --external-inlines=@asicupv --no-check",
"i18n:check": "i18n-check -s es-ES -l ./src/i18n",
"clean:build": "rimraf .turbo dist",
"clean:deps": "rimraf node_modules"
},
repository: {
type: "git",
url: "git+https://github.com/polimediaupv/paella-zoom-plugin.git"
},
keywords: [
"paella",
"player",
"zoom",
"slide",
"presentation",
"blackboard",
"whiteboard"
],
author: "Fernando Serrano Carpena <ferserc1@gmail.com>",
license: "SEE LICENSE IN license.txt",
bugs: { url: "https://github.com/polimediaupv/paella-zoom-plugin/issues" },
homepage: "https://github.com/polimediaupv/paella-zoom-plugin#readme",
devDependencies: {
"@asicupv/paella-core": "^2.11.4",
vite: "^8.0.10",
"vite-plugin-dts": "^4.5.4"
},
peerDependencies: { "@asicupv/paella-core": "^2.11.4" }
}, c = {
"Zoom in": "Zoom in",
"Zoom out": "Zoom out",
"Show video zoom options": "Show video zoom options",
"Use Ctrl+Scroll to zoom": "Use Ctrl+Scroll to zoom",
"Use Option+Scroll to zoom": "Use Option+Scroll to zoom"
}, l = {
"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 Ctrl+Scroll to zoom": "Usar Ctrl+Desplazamiento para hacer zoom",
"Use Option+Scroll to zoom": "Usar Opción+Desplazamiento para hacer zoom"
}, u = {
"Zoom in": "Zoom in",
"Zoom out": "Zoom out",
"Show video zoom options": "Zoom-Optionen anzeigen",
"Use Ctrl+Scroll to zoom": "Zum Zoomen Strg+Rollen drücken",
"Use Option+Scroll to zoom": "Zum Zoomen Option+Rollen drücken"
}, d = {
"Zoom in": "Augmentar el zoom del vídeo",
"Zoom out": "Reduir el zoom del vídeo",
"Show video zoom options": "Mostra les opcions de zoom del vídeo",
"Use Ctrl+Scroll to zoom": "Utilitza Ctrl+Desplaçament per fer zoom",
"Use Option+Scroll to zoom": "Utilitza Opció+Desplaçament per fer zoom"
}, f = {};
f["en-US"] = c, f.en = c, f["es-ES"] = l, f.es = l, f["de-DE"] = u, f.de = u, f["ca-ES"] = d, f.ca = d;
//#endregion
//#region src/plugins/ZoomPluginsModule.ts
var p = null, m = class e extends a {
static Get() {
return p ||= new e(), p;
}
get moduleName() {
return s.name;
}
get moduleVersion() {
return s.version;
}
async getDictionaries() {
return f;
}
};
//#endregion
//#region src/plugins/es.upv.paella.zoomPlugin.ts
function h(e, t, n) {
let r = {
w: e.offsetWidth,
h: e.offsetHeight
}, i = {
left: r.w / 2,
top: r.h / 2
};
t.style.width = `${n * 100}%`, t.style.height = `${n * 100}%`;
let a = {
left: t.offsetLeft,
top: t.offsetTop,
w: t.offsetWidth,
h: t.offsetHeight
}, o = {
left: a.w / 2,
top: a.h / 2
}, s = {
left: o.left - i.left,
top: o.top - i.top
};
return n == 1 ? (t.style.left = "0px", t.style.top = "0px", s.left = i.left, s.top = i.top) : (t.style.left = `-${s.left}px`, t.style.top = `-${s.top}px`), s;
}
function g(e, t, n) {
let r = {
left: t.left + n.left,
top: t.top + n.top
}, i = e.parentElement;
return i ? (e.style.top = `-${r.top}px`, e.offsetHeight + e.offsetTop - i.offsetHeight < 0 && (r.top = t.top), e.style.left = `-${r.left}px`, e.offsetWidth + e.offsetLeft - i.offsetWidth < 0 && (r.left = t.left), r) : t;
}
var _ = class extends t {
constructor(e, t, n) {
super("div", e, t), this.currentZoom = 1, this._videoPlayer = null, this._playerCenter = {
top: 0,
left: 0
}, this._zoomMessage = null, this._hideTimeout = null, this.config = n, this._maxZoom = this.config.maxZoom || 4, this._showButtons = this.config.showButtons === void 0 ? !0 : this.config.showButtons;
}
async loadCanvas(e) {
if (this.currentZoom = 1, this._videoPlayer = e, !this._videoPlayer) return;
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", this.element.addEventListener("wheel", (e) => {
if (e.stopPropagation(), !e.altKey && !e.ctrlKey && !e.metaKey) {
this.showZoomMessage();
return;
}
this.hideZoomMessage();
let t = e.deltaY === void 0 ? e.detail * 4 : e.deltaY * .1, n = this.currentZoom + t * -.01;
n > 1 && n <= this._maxZoom ? (this.currentZoom = n, this._playerCenter = h(this.element, this._videoPlayer.element, this.currentZoom)) : n <= 1 && (this.currentZoom = 1, this._playerCenter = h(this.element, this._videoPlayer.element, this.currentZoom)), e.preventDefault();
});
let t = !1, n = !1, r = null, i = () => t = !0, a = () => t = !1, s = (e) => {
n && (e.stopPropagation(), e.preventDefault());
};
this.element.addEventListener("mousedown", i), this.element.addEventListener("mouseleave", a), this.element.addEventListener("mouseup", a), this.element.addEventListener("click", s), this.element.addEventListener("mouseup", s), this.element.addEventListener("mousemove", (e) => {
if (t && this._playerCenter) {
r === null && (r = {
left: e.clientX,
top: e.clientY
}), n = !0;
let t = {
left: r.left - e.clientX,
top: r.top - e.clientY
};
this.currentZoom == 1 ? this._playerCenter = {
left: 0,
top: 0
} : this._playerCenter = g(this._videoPlayer.element, this._playerCenter, t), r = {
left: e.clientX,
top: e.clientY
};
} else n = !1, r = null;
});
let c = /mac/i.test(navigator.platform), l = this.player.translate(c ? "Use Option+Scroll to zoom" : "Use Ctrl+Scroll to zoom");
this._zoomMessage = o(`
<div class="zoom-message">${l}</div>
`, this.element), this._zoomMessage.style.display = "none";
}
showZoomMessage() {
this._zoomMessage && (this._hideTimeout && clearTimeout(this._hideTimeout), this._zoomMessage.style.display = "", this._hideTimeout = setTimeout(() => {
this.hideZoomMessage();
}, 2e3));
}
hideZoomMessage() {
this._zoomMessage && (this._zoomMessage.style.display = "none", this._hideTimeout = null);
}
zoomIn() {
let e = this.currentZoom * 1.1;
e > this._maxZoom && (e = this._maxZoom), this.currentZoom = e, this._playerCenter = h(this.element, this._videoPlayer.element, this.currentZoom);
}
zoomOut() {
let e = this.currentZoom * .9;
e < 1 && (e = 1), this.currentZoom = e, this._playerCenter = h(this.element, this._videoPlayer.element, this.currentZoom);
}
}, v = class extends r {
getPluginModuleInstance() {
return m.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 _(this.player, e, this.config);
}
}, y = "<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;\">\n <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\"/>\n</svg>", b = class extends e {
constructor(...e) {
super(...e), this.target = "", this._canvas = null;
}
getPluginModuleInstance() {
return m.Get();
}
get name() {
return super.name || "es.upv.paella.zoomInButtonPlugin";
}
getAriaLabel() {
return "Zoom in";
}
getDescription() {
return this.getAriaLabel();
}
async isEnabled() {
if (!await super.isEnabled() || !this.player.videoContainer?.streamProvider?.streams) return !1;
try {
return this.target = this.config.target, this._canvas = this.player.videoContainer.streamProvider.streams[this.target].canvas, this._canvas instanceof _;
} catch {
return this.player.log.warn("ZoomInButtonPlugin: no such target stream", this.target), !1;
}
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || y;
}
async action() {
this._canvas?.zoomIn();
}
}, x = "<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;\">\n <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\"/>\n</svg>", S = class extends e {
constructor(...e) {
super(...e), this.target = "", this._canvas = null;
}
getPluginModuleInstance() {
return m.Get();
}
get name() {
return super.name || "es.upv.paella.zoomOutButtonPlugin";
}
getAriaLabel() {
return "Zoom out";
}
getDescription() {
return this.getAriaLabel();
}
async isEnabled() {
if (!await super.isEnabled() || !this.player.videoContainer?.streamProvider?.streams) return !1;
try {
return this.target = this.config.target, this._canvas = this.player.videoContainer.streamProvider.streams[this.target].canvas, this._canvas instanceof _;
} catch {
return this.player.log.warn("ZoomOutButtonPlugin: no such target stream", this.target), !1;
}
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || x;
}
async action() {
this._canvas?.zoomOut();
}
}, C = class extends i {
constructor(...e) {
super(...e), this._target = "", this._canvas = null;
}
getPluginModuleInstance() {
return m.Get();
}
get name() {
return super.name || "es.upv.paella.zoomMenuButtonPlugin";
}
getAriaLabel() {
return "Show video zoom options";
}
getDescription() {
return this.getAriaLabel();
}
async isEnabled() {
if (!await super.isEnabled() || !this.player.videoContainer?.streamProvider?.streams) return !1;
try {
return this._target = this.config.target || "presenter", this._canvas = this.player.videoContainer.streamProvider.streams[this._target].canvas, this._canvas instanceof _;
} catch {
return this.player.log.warn("ZoomMenuButtonPlugin: no such target stream", this._target), !1;
}
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || y;
}
async getMenu() {
return [{
id: "in",
title: "Zoom in",
icon: this.player.getCustomPluginIcon(this.name, "zoomInIcon") || y
}, {
id: "out",
title: "Zoom out",
icon: this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || x
}];
}
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;
}
}
}, w = class extends n {
constructor(...e) {
super(...e), this._streams = {};
}
getPluginModuleInstance() {
return m.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() || !this.player.videoContainer?.streamProvider?.streams) return !1;
let e = !1;
try {
this._streams = this.player.videoContainer.streamProvider.streams;
for (let t in this._streams) e ||= this._streams[t].canvas instanceof _;
return e;
} catch {
return this.player.log.warn("CanvasZoomInButtonPlugin: no such target stream"), !1;
}
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomInIcon") || y;
}
async action(e, t, n, r) {
n instanceof _ && n.zoomIn();
}
}, T = class extends n {
constructor(...e) {
super(...e), this._streams = {};
}
getPluginModuleInstance() {
return m.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() || !this.player.videoContainer?.streamProvider?.streams) return !1;
try {
let e = !1;
this._streams = this.player.videoContainer.streamProvider.streams;
for (let t in this._streams) e ||= this._streams[t].canvas instanceof _;
return e;
} catch {
return this.player.log.warn("CanvasZoomOutButtonPlugin: no such target stream"), !1;
}
}
async load() {
this.icon = this.player.getCustomPluginIcon(this.name, "zoomOutIcon") || x;
}
async action(e, t, n, r) {
n instanceof _ && n.zoomOut();
}
}, E = [
{
plugin: v,
config: { enabled: !1 }
},
{
plugin: b,
config: { enabled: !1 }
},
{
plugin: S,
config: { enabled: !1 }
},
{
plugin: C,
config: { enabled: !1 }
},
{
plugin: w,
config: { enabled: !1 }
},
{
plugin: T,
config: { enabled: !1 }
}
], D = E, O = v, k = b, A = S, j = C, M = w, N = T;
//#endregion
export { M as CanvasZoomInButtonPlugin, N as CanvasZoomOutButtonPlugin, O as ZoomCanvasPlugin, k as ZoomInButtonPlugin, j as ZoomMenuButtonPlugin, A as ZoomOutButtonPlugin, D as allPlugins, E as zoomPlugins };
//# sourceMappingURL=paella-zoom-plugin.js.map