diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index b2cf42b9f3..2001bfc157 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -26,7 +26,7 @@ export class BookPlayer { width: '100%', height: '100%', // TODO: Add option for scrolled-doc - flow: 'auto' + flow: 'paginated' }; this.onDialogClosed = this.onDialogClosed.bind(this); @@ -146,8 +146,8 @@ export class BookPlayer { elem.addEventListener('close', this.onDialogClosed, {once: true}); elem.querySelector('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true}); elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents); - elem.querySelector('#btnBookplayerPrev').addEventListener('click', this.prevChapter); - elem.querySelector('#btnBookplayerNext').addEventListener('click', this.nextChapter); + elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.prevChapter); + elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.nextChapter); } bindEvents() { @@ -165,8 +165,8 @@ export class BookPlayer { elem.removeEventListener('close', this.onDialogClosed); elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed); elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents); - elem.querySelector('#btnBookplayerPrev').removeEventListener('click', this.prevChapter); - elem.querySelector('#btnBookplayerNext').removeEventListener('click', this.nextChapter); + elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.prevChapter); + elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.nextChapter); } unbindEvents() { diff --git a/src/plugins/bookPlayer/style.scss b/src/plugins/bookPlayer/style.scss index 747890080a..2b6709dc9a 100644 --- a/src/plugins/bookPlayer/style.scss +++ b/src/plugins/bookPlayer/style.scss @@ -9,6 +9,16 @@ display: flex; flex-direction: column; + .topButtons { + top: 0.5vh; + z-index: 1002; + position: absolute; + top: 0; + width: 100%; + color: #000; + opacity: .7; + } + .bookPlayerContainer { flex-grow: 1; } @@ -23,23 +33,13 @@ margin-right: 2vw; } - .bookplayerButtonIcon { - color: black; - background-color: #fff; - } - .bookplayerErrorMsg { text-align: center; } - #btnBookplayerPrev { - margin: 0.5vh 0.5vh; - color: black; - } - + #btnBookplayerPrev, #btnBookplayerNext { margin: 0.5vh 0.5vh; - color: black; } }