From c4aebce2b1d9649443ee1e204565003e68c6ee63 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Sun, 22 Nov 2020 02:31:48 -0500
Subject: [PATCH] Update epub player styles and force pagination

---
 src/plugins/bookPlayer/plugin.js  | 10 +++++-----
 src/plugins/bookPlayer/style.scss | 22 +++++++++++-----------
 2 files changed, 16 insertions(+), 16 deletions(-)

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;
     }
 }