From ff2720ebf23b4aadb7b711b643c6a096af54f658 Mon Sep 17 00:00:00 2001
From: Nathan Mascitelli <mascitelli.nathan@gmail.com>
Date: Sun, 25 Apr 2021 18:11:52 -0400
Subject: [PATCH] Add fullscreen ability to books

---
 src/plugins/bookPlayer/plugin.js     | 16 ++++++++++++++++
 src/plugins/bookPlayer/template.html |  3 +++
 2 files changed, 19 insertions(+)

diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
index c761d9c21c..196d9cb2f5 100644
--- a/src/plugins/bookPlayer/plugin.js
+++ b/src/plugins/bookPlayer/plugin.js
@@ -5,6 +5,7 @@ import loading from '../../components/loading/loading';
 import keyboardnavigation from '../../scripts/keyboardNavigation';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
 import ServerConnections from '../../components/ServerConnections';
+import * as Screenfull from 'screenfull';
 import TableOfContents from './tableOfContents';
 import dom from '../../scripts/dom';
 import { translateHtml } from '../../scripts/globalize';
@@ -151,6 +152,7 @@ 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('#btnBookplayerFullscreen').addEventListener('click', this.toggleFullscreen);
         elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.previous);
         elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.next);
     }
@@ -170,6 +172,7 @@ export class BookPlayer {
         elem.removeEventListener('close', this.onDialogClosed);
         elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
         elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents);
+        elem.querySelector('#btnBookplayerFullscreen').removeEventListener('click', this.toggleFullscreen)
         elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.previous);
         elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.next);
     }
@@ -191,6 +194,15 @@ export class BookPlayer {
         }
     }
 
+    toggleFullscreen() {
+        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();
+        }
+    }
+
     previous(e) {
         e?.preventDefault();
         if (this.rendition) {
@@ -246,6 +258,10 @@ export class BookPlayer {
         const serverId = item.ServerId;
         const apiClient = ServerConnections.getApiClient(serverId);
 
+        if (!Screenfull.isEnabled) {
+            document.getElementById("btnBookplayerFullscreen").display = 'none';
+        }
+
         return new Promise((resolve, reject) => {
             import('epubjs').then(({default: epubjs}) => {
                 const downloadHref = apiClient.getItemDownloadUrl(item.Id);
diff --git a/src/plugins/bookPlayer/template.html b/src/plugins/bookPlayer/template.html
index 0c60a7ed42..73089db44f 100644
--- a/src/plugins/bookPlayer/template.html
+++ b/src/plugins/bookPlayer/template.html
@@ -11,6 +11,9 @@
     <button is="paper-icon-button-light" id="btnBookplayerExit" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
         <span class="material-icons bookplayerButtonIcon close"></span>
     </button>
+    <button is="paper-icon-button-light" id="btnBookplayerFullscreen" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
+        <span class="material-icons bookplayerButtonIcon fullscreen"></span>
+    </button>
 </div>
 
 <div id="bookPlayerContainer" class="bookPlayerContainer"></div>