fix book player fullscreen on mobile apps

src/plugins/bookPlayer/plugin.js

@@ -1,5 +1,6 @@
 import 'material-design-icons-iconfont';
 
+import layoutManager from '../../components/layoutManager';
 import loading from '../../components/loading/loading';
 import keyboardnavigation from '../../scripts/keyboardNavigation';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
@@ -48,6 +49,9 @@
         this.next = this.next.bind(this);
         this.onWindowKeyDown = this.onWindowKeyDown.bind(this);
         this.addSwipeGestures = this.addSwipeGestures.bind(this);
+        this.getPlayerHeight = this.getPlayerHeight.bind(this);
+        this.toggleFullscreen = this.toggleFullscreen.bind(this);
+        this.fullscreen = false;
     }
 
     play(options) {
@@ -87,6 +91,10 @@
             rendition.destroy();
         }
 
+        if (this.fullscreen) {
+            this.toggleFullscreen();
+        }
+
         // hide loader in case player was not fully loaded yet
         loading.hide();
         this.cancellationToken = true;
@@ -231,19 +239,49 @@
         this.touchHelper?.destroy();
     }
 
+    getPlayerHeight() {
+        if (layoutManager.mobile) {
+            // we have no method from NativeShell to get the required margin for mobile devices
+            return this.fullscreen ? 0.9 : 0.94;
+        }
+
+        // desktop needs slightly less space than mobile
+        return 0.958;
+    }
+
     openTableOfContents() {
         if (this.loaded) {
             this.tocElement = new TableOfContents(this);
         }
     }
 
     toggleFullscreen() {
+        const icon = document.querySelector('#btnBookplayerFullscreen .material-icons');
+        const buttons = document.querySelector('.topButtons');
+
         if (Screenfull.isEnabled) {
-            const icon = document.querySelector('#btnBookplayerFullscreen .material-icons');
             icon.classList.remove(Screenfull.isFullscreen ? 'fullscreen_exit' : 'fullscreen');
             icon.classList.add(Screenfull.isFullscreen ? 'fullscreen' : 'fullscreen_exit');
             Screenfull.toggle();
+        } else if (window.NativeShell) {
+            if (this.fullscreen) {
+                icon.classList.remove('fullscreen_exit');
+                icon.classList.add('fullscreen');
+                buttons.classList.remove('fullscreen');
+                window.NativeShell.disableFullscreen();
+            } else {
+                icon.classList.remove('fullscreen');
+                icon.classList.add('fullscreen_exit');
+                buttons.classList.add('fullscreen');
+                window.NativeShell.enableFullscreen();
+            }
         }
+
+        // needs to be executed with a slight delay to give NativeShell time to process the request
+        setTimeout(() => this.rendition.resize(document.body.clientWidth, document.body.clientHeight * this.getPlayerHeight()), 200);
+
+        // required for mobile apps without browser fullscreen support
+        this.fullscreen = !this.fullscreen;
     }
 
     rotateTheme() {
@@ -336,14 +374,9 @@
                 const downloadHref = apiClient.getItemDownloadUrl(item.Id);
                 const book = epubjs(downloadHref, { openAs: 'epub' });
 
-                // We need to calculate the height of the window beforehand because using 100% is not accurate when the dialog is opening.
-                // In addition we don't render to the full height so that we have space for the top buttons.
-                const clientHeight = document.body.clientHeight;
-                const renderHeight = clientHeight - (clientHeight * 0.0425);
-
                 const rendition = book.renderTo('bookPlayerContainer', {
                     width: '100%',
-                    height: renderHeight,
+                    height: document.body.clientHeight * this.getPlayerHeight(),
                     // TODO: Add option for scrolled-doc
                     flow: 'paginated'
                 });

src/plugins/bookPlayer/style.scss

@@ -9,35 +9,26 @@
     display: flex;
     flex-direction: column;
 
+    .bookplayerButton {
+        margin: 0.5vh;
+    }
+
     .topButtons {
         z-index: 1002;
-        width: 100%;
+        display: flex;
+        height: 4.2vh;
+        padding: 0 2vw;
         color: #000;
         opacity: 0.7;
     }
 
-    .bookPlayerContainer {
-        flex-grow: 1;
-    }
-
-    #btnBookplayerToc {
-        float: left;
-        margin: 0.5vh 0.5vh 0.5vh 2vw;
-    }
-
     #btnBookplayerExit {
-        float: right;
-        margin: 0.5vh 2vw 0.5vh 0.5vh;
+        margin-left: auto;
     }
 
     .bookplayerErrorMsg {
         text-align: center;
     }
-
-    #btnBookplayerPrev,
-    #btnBookplayerNext {
-        margin: 0.5vh 0.5vh;
-    }
 }
 
 #dialogToc {
@@ -51,10 +42,6 @@
         color: black;
     }
 
-    .bookplayerButton {
-        margin: 0.5vh;
-    }
-
     .toc {
         margin: 0;
         padding: 30px;
@@ -93,4 +80,13 @@
         max-width: 100%;
         max-height: 100%;
     }
+
+    #bookPlayer .topButtons {
+        height: 6vh;
+    }
+
+    #bookPlayer .topButtons.fullscreen {
+        height: 10vh;
+        align-items: flex-end;
+    }
 }

src/plugins/bookPlayer/template.html

@@ -8,9 +8,6 @@
     <button is="paper-icon-button-light" id="btnBookplayerNext" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
         <span class="material-icons bookplayerButtonIcon navigate_next" aria-hidden="true"></span>
     </button>
-    <button is="paper-icon-button-light" id="btnBookplayerExit" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
-        <span class="material-icons bookplayerButtonIcon close" aria-hidden="true"></span>
-    </button>
     <button is="paper-icon-button-light" id="btnBookplayerRotateTheme" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
         <span class="material-icons bookplayerButtonIcon remove_red_eye" aria-hidden="true"></span>
     </button>
@@ -23,6 +20,9 @@
     <button is="paper-icon-button-light" id="btnBookplayerFullscreen" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
         <span class="material-icons bookplayerButtonIcon fullscreen" aria-hidden="true"></span>
     </button>
+    <button is="paper-icon-button-light" id="btnBookplayerExit" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
+        <span class="material-icons bookplayerButtonIcon close" aria-hidden="true"></span>
+    </button>
 </div>
 
 <div id="bookPlayerContainer" class="bookPlayerContainer"></div>