From 727f6e450b8ccc82b1e6bfaf17e64dc060676545 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= <lukas.lueftinger@outlook.com>
Date: Sat, 14 Jan 2023 14:34:37 +0100
Subject: [PATCH] add button to bookplayer to rotate through dark, sepia and
 light themes

---
 src/plugins/bookPlayer/plugin.js     | 30 ++++++++++++++++++++++++----
 src/plugins/bookPlayer/template.html |  3 +++
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
index df5e213b72..8e0a987c1c 100644
--- a/src/plugins/bookPlayer/plugin.js
+++ b/src/plugins/bookPlayer/plugin.js
@@ -23,9 +23,21 @@ export class BookPlayer {
         this.type = PluginType.MediaPlayer;
         this.id = 'bookplayer';
         this.priority = 1;
+        if (userSettings.theme(undefined) === 'dark' || userSettings.theme(undefined) === null) {
+            this.theme = 'dark';
+        } else {
+            this.theme = 'light';
+        }
+        this.themes = {
+            'dark': { 'body': { 'color': '#d8dadc', 'background': '#000' } },
+            'sepia': { 'body': { 'color': '#d8a262', 'background': '#000' } },
+            'light': { 'body': { 'color': '#000', 'background': '#fff' } }
+        }
+        this.themeOrder = ['dark', 'sepia', 'light'];
 
         this.onDialogClosed = this.onDialogClosed.bind(this);
         this.openTableOfContents = this.openTableOfContents.bind(this);
+        this.rotateTheme = this.rotateTheme.bind(this);
         this.previous = this.previous.bind(this);
         this.next = this.next.bind(this);
         this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
@@ -164,6 +176,7 @@ export class BookPlayer {
         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('#btnBookplayerRotateTheme').addEventListener('click', this.rotateTheme);
         elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.previous);
         elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.next);
     }
@@ -184,6 +197,7 @@ export class BookPlayer {
         elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
         elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents);
         elem.querySelector('#btnBookplayerFullscreen').removeEventListener('click', this.toggleFullscreen);
+        elem.querySelector('#btnBookplayerRotateTheme').removeEventListener('click', this.rotateTheme);
         elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.previous);
         elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.next);
     }
@@ -214,6 +228,15 @@ export class BookPlayer {
         }
     }
 
+    rotateTheme() {
+        if (this.loaded) {
+            const newTheme = this.themeOrder[(this.themeOrder.indexOf(this.theme) + 1) % this.themeOrder.length];
+            this.rendition.themes.select(newTheme);
+            this.theme = newTheme;
+            console.dir(this.rendition);
+        }
+    }
+
     previous(e) {
         e?.preventDefault();
         if (this.rendition) {
@@ -296,11 +319,10 @@ export class BookPlayer {
                 this.currentSrc = downloadHref;
                 this.rendition = rendition;
 
-                rendition.themes.register('dark', { 'body': { 'color': '#fff' } });
-
-                if (userSettings.theme(undefined) === 'dark' || userSettings.theme(undefined) === null) {
-                    rendition.themes.select('dark');
+                for (const theme of Object.keys(this.themes)) {
+                    rendition.themes.register(theme, this.themes[theme]);
                 }
+                rendition.themes.select(this.theme);
 
                 return rendition.display().then(() => {
                     const epubElem = document.querySelector('.epub-container');
diff --git a/src/plugins/bookPlayer/template.html b/src/plugins/bookPlayer/template.html
index bf71834f02..1bc0e3053f 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" 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>
     <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>