Use dymanic import for pdfjs and bundled-es-modules the same as in master

This commit is contained in:
Hadi Nategh 2022-04-04 17:13:29 +02:00
parent 3552d1917c
commit 88646cf5a5
4 changed files with 329 additions and 361 deletions

View File

@ -294,7 +294,7 @@ class multi_video extends HTMLElement {
get paused() {
return this.__getActiveVideo()[0]?.node?.paused;
return this.__getActiveVideo()[0] ? (this.__getActiveVideo()[0].node ? this.__getActiveVideo()[0].node.paused : undefined) : undefined;
}
/**
* set muted attribute
@ -313,7 +313,8 @@ class multi_video extends HTMLElement {
get muted() {
return this.__getActiveVideo()[0]?.node?.muted;
return this.__getActiveVideo()[0] ? (this.__getActiveVideo()[0].node ? this.__getActiveVideo()[0].node.muted : undefined) : undefined;;
}
/**
* get video ended attribute
@ -321,7 +322,7 @@ class multi_video extends HTMLElement {
get ended() {
return this._videos[this._videos.length - 1]?.node?.ended;
return this._videos[this._videos.length - 1] ? (this._videos[this._videos.length - 1].node ? this._videos[this._videos.length - 1].node.ended : undefined) : undefined;
}
/**
* set playbackRate
@ -340,7 +341,7 @@ class multi_video extends HTMLElement {
get playbackRate() {
return this.__getActiveVideo()[0]?.node?.playbackRate;
return this.__getActiveVideo()[0] ? (this.__getActiveVideo()[0].node ? this.__getActiveVideo()[0].node.playbackRate : undefined) : undefined;
}
/**
* set volume
@ -358,7 +359,7 @@ class multi_video extends HTMLElement {
get volume() {
return this.__getActiveVideo()[0]?.node?.volume;
return this.__getActiveVideo()[0] ? (this.__getActiveVideo()[0].node ? this.__getActiveVideo()[0].node.volume : undefined) : undefined;
}
/************************************************* METHODES ******************************************/
@ -369,7 +370,7 @@ class multi_video extends HTMLElement {
play() {
this.__playing = true;
return this.__getActiveVideo()[0]?.node?.play();
return this.__getActiveVideo()[0] ? (this.__getActiveVideo()[0].node ? this.__getActiveVideo()[0].node.play() : undefined) : undefined;
}
/**
* pause video
@ -378,7 +379,7 @@ class multi_video extends HTMLElement {
pause() {
this.__playing = false;
this.__getActiveVideo()[0]?.node?.pause();
this.__getActiveVideo()[0] ? (this.__getActiveVideo()[0].node ? this.__getActiveVideo()[0].node.pause() : undefined) : undefined;
}
} // Define the new multi-video element

View File

@ -8,383 +8,379 @@
* @author Hadi Nategh <hn[at]egroupware.org>
* @copyright EGroupware GmbH
*/
/*egw:uses
/node_modules/pdfjs-dist/legacy/build/pdf.js;
/node_modules/pdfjs-dist/legacy/build/pdf.worker.js;
*/
// Unfortunately compiled version of module:ES2015 TS would break webcomponent constructor.
// Since we don't have ES2020 available on 21.1 we have to use JS format using require and a legacy pdfjs lib instead of TS (used in master)
var pdfjslib = require("pdfjs-dist/legacy/build/pdf");
var pdfjs = pdfjslib['pdfjs-dist/build/pdf'];
// Since we don't have ES2020 available on 21.1 we have to use dynamic import.
pdfjs.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/legacy/build/pdf.worker.js';
import(egw.webserverUrl+"/node_modules/@bundled-es-modules/pdfjs-dist/build/pdf.js").then((_module)=>{
const pdfjs = _module.default;
pdfjs.GlobalWorkerOptions.workerSrc = egw.webserverUrl+'/node_modules/@bundled-es-modules/pdfjs-dist/build/pdf.worker.js';
/*
This web component allows to display and play pdf file like a video player widget/element. Its attributes and
methodes are mostley identical as video html. No controls attribute supported yet.
*/
class pdf_player extends HTMLElement {
/**
* shadow dom container
* @private
*/
_shadow = null;
/**
* wrapper container holds canvas
* @private
*/
/*
This web component allows to display and play pdf file like a video player widget/element. Its attributes and
methodes are mostley identical as video html. No controls attribute supported yet.
*/
class pdf_player extends HTMLElement {
/**
* shadow dom container
* @private
*/
_shadow = null;
/**
* wrapper container holds canvas
* @private
*/
/**
* keeps duration time internally
* @private
*/
_duration = 0;
/**
* keeps currentTime internally
* @private
*/
/**
* keeps duration time internally
* @private
*/
_duration = 0;
/**
* keeps currentTime internally
* @private
*/
_currentTime = 0;
/**
* Keeps playing state internally
* @private
*/
_currentTime = 0;
/**
* Keeps playing state internally
* @private
*/
__playing = false;
/**
* keeps playing interval id
* @private
*/
__playing = false;
/**
* keeps playing interval id
* @private
*/
__playingInterval = 0;
/**
* keeps play back rate
* @private
*/
__playingInterval = 0;
/**
* keeps play back rate
* @private
*/
_playBackRate = 1000;
/**
* keeps ended state of playing pdf
* @private
*/
_playBackRate = 1000;
/**
* keeps ended state of playing pdf
* @private
*/
_ended = false;
/**
* keep paused state
* @private
*/
_ended = false;
/**
* keep paused state
* @private
*/
_paused = false;
/**
* keeps pdf doc states
* @private
*/
_paused = false;
/**
* keeps pdf doc states
* @private
*/
__pdfViewState = {
pdf: null,
currentPage: 1,
zoom: 1
};
__pdfViewState = {
pdf: null,
currentPage: 1,
zoom: 1
};
constructor() {
super(); // Create a shadow root
constructor() {
super(); // Create a shadow root
this._shadow = this.attachShadow({
mode: 'open'
}); // Create wrapper
this._shadow = this.attachShadow({
mode: 'open'
}); // Create wrapper
this._wrapper = document.createElement('div');
this._wrapper = document.createElement('div');
this._wrapper.setAttribute('class', 'wrapper'); // Create some CSS to apply to the shadow dom
this._wrapper.setAttribute('class', 'wrapper'); // Create some CSS to apply to the shadow dom
this._style = document.createElement('style');
this._style.textContent = '.wrapper {' + 'width: 100%;' + 'height: auto;' + 'display: block;' + '}' + '.wrapper canvas {' + 'width: 100%;' + 'height: auto;' + '}'; // attach to the shadow dom
this._style = document.createElement('style');
this._style.textContent = '.wrapper {' + 'width: 100%;' + 'height: auto;' + 'display: block;' + '}' + '.wrapper canvas {' + 'width: 100%;' + 'height: auto;' + '}'; // attach to the shadow dom
this._shadow.appendChild(this._style);
this._shadow.appendChild(this._style);
this._shadow.appendChild(this._wrapper);
}
/**
* set observable attributes
* @return {string[]}
*/
static get observedAttributes() {
return ['src', 'type'];
}
/**
* Gets called on observable attributes changes
* @param name attribute name
* @param _
* @param newVal new value
*/
attributeChangedCallback(name, _, newVal) {
switch (name) {
case 'src':
this.__buildPDFView(newVal);
break;
case 'type':
// do nothing
break;
this._shadow.appendChild(this._wrapper);
}
}
/**
* init/update pdf tag
* @param _value
* @private
*/
/**
* set observable attributes
* @return {string[]}
*/
__buildPDFView(_value) {
this._canvas = document.createElement('canvas');
static get observedAttributes() {
return ['src', 'type'];
}
/**
* Gets called on observable attributes changes
* @param name attribute name
* @param _
* @param newVal new value
*/
this._wrapper.appendChild(this._canvas);
let longTask = pdfjs.getDocument(_value);
longTask.promise.then(pdf => {
this.__pdfViewState.pdf = pdf;
this._duration = this.__pdfViewState.pdf._pdfInfo.numPages; // initiate the pdf file viewer for the first time after loading
attributeChangedCallback(name, _, newVal) {
switch (name) {
case 'src':
this.__buildPDFView(newVal);
this.__render(1).then(_ => {
this.__pushEvent('loadedmetadata');
break;
case 'type':
// do nothing
break;
}
}
/**
* init/update pdf tag
* @param _value
* @private
*/
__buildPDFView(_value) {
this._canvas = document.createElement('canvas');
this._wrapper.appendChild(this._canvas);
let longTask = pdfjs.getDocument(_value);
longTask.promise.then(pdf => {
this.__pdfViewState.pdf = pdf;
this._duration = this.__pdfViewState.pdf._pdfInfo.numPages; // initiate the pdf file viewer for the first time after loading
this.__render(1).then(_ => {
this.__pushEvent('loadedmetadata');
});
});
});
}
/**
* Render given page from pdf into the canvas container
*
* @param _page
* @private
*/
}
/**
* Render given page from pdf into the canvas container
*
* @param _page
* @private
*/
__render(_page) {
if (!this.__pdfViewState.pdf) return;
let p = _page || this.__pdfViewState.currentPage;
let self = this;
return this.__pdfViewState.pdf.getPage(p).then(page => {
let canvasContext = self._canvas.getContext('2d');
__render(_page) {
if (!this.__pdfViewState.pdf) return;
let p = _page || this.__pdfViewState.currentPage;
let self = this;
return this.__pdfViewState.pdf.getPage(p).then(page => {
let canvasContext = self._canvas.getContext('2d');
let viewport = page.getViewport({
scale: self.__pdfViewState.zoom
let viewport = page.getViewport({
scale: self.__pdfViewState.zoom
});
self._canvas.width = viewport.width;
self._canvas.height = viewport.height;
page.render({
canvasContext: canvasContext,
viewport: viewport
});
});
self._canvas.width = viewport.width;
self._canvas.height = viewport.height;
page.render({
canvasContext: canvasContext,
viewport: viewport
}
/**
* Creates event and dispatches it
* @param _name
*/
__pushEvent(_name) {
let event = document.createEvent("Event");
event.initEvent(_name, true, true);
this.dispatchEvent(event);
}
/**************************** PUBLIC ATTRIBUTES & METHODES *************************************************/
/****************************** ATTRIBUTES **************************************/
/**
* set src
* @param _value
*/
set src(_value) {
Array.from(this._wrapper.children).forEach(_ch => {
_ch.remove();
});
});
}
/**
* Creates event and dispatches it
* @param _name
*/
this.__buildPDFView(_value);
}
/**
* get src
* @return string returns comma separated sources
*/
__pushEvent(_name) {
let event = document.createEvent("Event");
event.initEvent(_name, true, true);
this.dispatchEvent(event);
}
/**************************** PUBLIC ATTRIBUTES & METHODES *************************************************/
/****************************** ATTRIBUTES **************************************/
/**
* set src
* @param _value
*/
get src() {
return this.src;
}
/**
* currentTime
* @param _time
*/
set src(_value) {
Array.from(this._wrapper.children).forEach(_ch => {
_ch.remove();
});
set currentTime(_time) {
let time = Math.floor(_time < 1 ? 1 : _time);
this.__buildPDFView(_value);
}
/**
* get src
* @return string returns comma separated sources
*/
if (time > this._duration) {
// set ended state to true as it's the last page of pdf
this._ended = true; // don't go further because it's litterally the last page
return;
} // set ended state to false as it's not the end of the pdf
get src() {
return this.src;
}
/**
* currentTime
* @param _time
*/
this._ended = false;
this._currentTime = time;
this.__pdfViewState.currentPage = time;
this.__render(time);
}
/**
* get currentTime
* @return {number}
*/
set currentTime(_time) {
let time = Math.floor(_time < 1 ? 1 : _time);
get currentTime() {
return this._currentTime;
}
/**
* get duration time
*/
if (time > this._duration) {
// set ended state to true as it's the last page of pdf
this._ended = true; // don't go further because it's litterally the last page
get duration() {
return this._duration;
}
/**
* get paused attribute
*/
get paused() {
return this._paused;
}
/**
* set muted attribute
* @param _value
*/
set muted(_value) {
return;
} // set ended state to false as it's not the end of the pdf
}
/**
* get muted attribute
*/
this._ended = false;
this._currentTime = time;
this.__pdfViewState.currentPage = time;
get muted() {
return true;
}
this.__render(time);
}
/**
* get currentTime
* @return {number}
*/
set ended(_value) {
this._ended = _value;
}
/**
* get ended attribute
*/
get currentTime() {
return this._currentTime;
}
/**
* get duration time
*/
get ended() {
return this._ended;
}
/**
* set playbackRate
* @param _value
*/
get duration() {
return this._duration;
}
/**
* get paused attribute
*/
set playbackRate(_value) {
this._playBackRate = _value * 1000;
}
/**
* get playbackRate
*/
get paused() {
return this._paused;
}
/**
* set muted attribute
* @param _value
*/
get playbackRate() {
return this._playBackRate;
}
/**
* set volume
*/
set muted(_value) {
return;
}
/**
* get muted attribute
*/
set volume(_value) {
return;
}
/**
* get volume
*/
get muted() {
return true;
}
get volume() {
return 0;
}
/************************************************* METHODES ******************************************/
set ended(_value) {
this._ended = _value;
}
/**
* get ended attribute
*/
/**
* Play
*/
get ended() {
return this._ended;
}
/**
* set playbackRate
* @param _value
*/
play() {
this.__playing = true;
let self = this;
return new Promise(function (_resolve, _reject) {
self.__playingInterval = window.setInterval(_ => {
if (self.currentTime >= self._duration) {
self.ended = true;
self.pause();
}
self.currentTime += 1;
self.__pushEvent('timeupdate');
}, self._playBackRate);
_resolve();
});
}
/**
* pause
*/
set playbackRate(_value) {
this._playBackRate = _value * 1000;
}
/**
* get playbackRate
*/
pause() {
this.__playing = false;
this._paused = true;
window.clearInterval(this.__playingInterval);
}
/**
* seek previous page
*/
get playbackRate() {
return this._playBackRate;
}
/**
* set volume
*/
prevPage() {
this.currentTime -= 1;
}
/**
* seek next page
*/
set volume(_value) {
return;
}
/**
* get volume
*/
nextPage() {
this.currentTime += 1;
}
} // Define pdf-player element
get volume() {
return 0;
}
/************************************************* METHODES ******************************************/
/**
* Play
*/
customElements.define('pdf-player', pdf_player);
});
play() {
this.__playing = true;
let self = this;
return new Promise(function (_resolve, _reject) {
self.__playingInterval = window.setInterval(_ => {
if (self.currentTime >= self._duration) {
self.ended = true;
self.pause();
}
self.currentTime += 1;
self.__pushEvent('timeupdate');
}, self._playBackRate);
_resolve();
});
}
/**
* pause
*/
pause() {
this.__playing = false;
this._paused = true;
window.clearInterval(this.__playingInterval);
}
/**
* seek previous page
*/
prevPage() {
this.currentTime -= 1;
}
/**
* seek next page
*/
nextPage() {
this.currentTime += 1;
}
} // Define pdf-player element
customElements.define('pdf-player', pdf_player);

55
package-lock.json generated
View File

@ -9,17 +9,23 @@
"version": "21.1.20210316",
"license": "GPL-2.0",
"devDependencies": {
"@bundled-es-modules/pdfjs-dist": "^2.5.207-rc1",
"@types/jquery": "^3.5.5",
"@types/jqueryui": "^1.12.14",
"grunt": "^1.3.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-newer": "^1.3.0",
"grunt-terser": "^1.0.0",
"pdfjs-dist": "^2.13.216",
"terser": "^4.8.0",
"typescript": "^3.9.7"
}
},
"node_modules/@bundled-es-modules/pdfjs-dist": {
"version": "2.5.207-rc1",
"resolved": "https://registry.npmjs.org/@bundled-es-modules/pdfjs-dist/-/pdfjs-dist-2.5.207-rc1.tgz",
"integrity": "sha512-e/UVP1g6dwjQLnu4MPf/mlESCIvyr/KgpoMUyxGcv4evCIuJwKR/fcfhG3p1NYo+49gJsd0hL2yz9kzhkCZ32A==",
"dev": true
},
"node_modules/@types/jquery": {
"version": "3.5.5",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz",
@ -1990,23 +1996,6 @@
"node": ">=0.10.0"
}
},
"node_modules/pdfjs-dist": {
"version": "2.13.216",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.13.216.tgz",
"integrity": "sha512-qn/9a/3IHIKZarTK6ajeeFXBkG15Lg1Fx99PxU09PAU2i874X8mTcHJYyDJxu7WDfNhV6hM7bRQBZU384anoqQ==",
"dev": true,
"dependencies": {
"web-streams-polyfill": "^3.2.0"
},
"peerDependencies": {
"worker-loader": "^3.0.8"
},
"peerDependenciesMeta": {
"worker-loader": {
"optional": true
}
}
},
"node_modules/posix-character-classes": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -2640,15 +2629,6 @@
"node": ">= 0.10"
}
},
"node_modules/web-streams-polyfill": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz",
"integrity": "sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==",
"dev": true,
"engines": {
"node": ">= 8"
}
},
"node_modules/which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@ -2669,6 +2649,12 @@
}
},
"dependencies": {
"@bundled-es-modules/pdfjs-dist": {
"version": "2.5.207-rc1",
"resolved": "https://registry.npmjs.org/@bundled-es-modules/pdfjs-dist/-/pdfjs-dist-2.5.207-rc1.tgz",
"integrity": "sha512-e/UVP1g6dwjQLnu4MPf/mlESCIvyr/KgpoMUyxGcv4evCIuJwKR/fcfhG3p1NYo+49gJsd0hL2yz9kzhkCZ32A==",
"dev": true
},
"@types/jquery": {
"version": "3.5.5",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz",
@ -4250,15 +4236,6 @@
"integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
"dev": true
},
"pdfjs-dist": {
"version": "2.13.216",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.13.216.tgz",
"integrity": "sha512-qn/9a/3IHIKZarTK6ajeeFXBkG15Lg1Fx99PxU09PAU2i874X8mTcHJYyDJxu7WDfNhV6hM7bRQBZU384anoqQ==",
"dev": true,
"requires": {
"web-streams-polyfill": "^3.2.0"
}
},
"posix-character-classes": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -4772,12 +4749,6 @@
"homedir-polyfill": "^1.0.1"
}
},
"web-streams-polyfill": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz",
"integrity": "sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==",
"dev": true
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

View File

@ -7,7 +7,7 @@
"devDependencies": {
"@types/jquery": "^3.5.5",
"@types/jqueryui": "^1.12.14",
"pdfjs-dist": "^2.13.216",
"@bundled-es-modules/pdfjs-dist": "^2.5.207-rc1",
"grunt": "^1.3.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-newer": "^1.3.0",