diff --git a/src/plugins/comicsPlayer/plugin.js b/src/plugins/comicsPlayer/plugin.js index fed81034bb..48e624b562 100644 --- a/src/plugins/comicsPlayer/plugin.js +++ b/src/plugins/comicsPlayer/plugin.js @@ -57,11 +57,29 @@ export class ComicsPlayer { } } + bindMediaElementEvents() { + const elem = this.mediaElement; + + elem?.addEventListener('close', this.onDialogClosed, {once: true}); + elem?.querySelector('.btnExit').addEventListener('click', this.onDialogClosed, {once: true}); + } + bindEvents() { + this.bindMediaElementEvents(); + document.addEventListener('keyup', this.onWindowKeyUp); } + unbindMediaElementEvents() { + const elem = this.mediaElement; + + elem?.removeEventListener('close', this.onDialogClosed); + elem?.querySelector('.btnExit').removeEventListener('click', this.onDialogClosed); + } + unbindEvents() { + this.unbindMediaElementEvents(); + document.removeEventListener('keyup', this.onWindowKeyUp); } @@ -85,13 +103,16 @@ export class ComicsPlayer { elem.id = 'comicsPlayer'; elem.classList.add('slideshowDialog'); - elem.innerHTML = '
'; + elem.innerHTML = `
+
+ +
`; - this.bindEvents(); dialogHelper.open(elem); } this.mediaElement = elem; + this.bindEvents(); return elem; } diff --git a/src/plugins/comicsPlayer/style.scss b/src/plugins/comicsPlayer/style.scss index cd471384db..273525b989 100644 --- a/src/plugins/comicsPlayer/style.scss +++ b/src/plugins/comicsPlayer/style.scss @@ -1,4 +1,6 @@ #comicsPlayer { + background: #fff; + .slideshowSwiperContainer { height: 100%; }