Merge pull request #7344 from dkanada/book-player-layout

src/plugins/bookPlayer/plugin.js

@@ -32,6 +32,7 @@ export class BookPlayer {
         this.type = PluginType.MediaPlayer;
         this.id = 'bookplayer';
         this.priority = 1;
+        this.THEMES = THEMES;
         if (!userSettings.theme() || userSettings.theme() === 'dark') {
             this.theme = 'dark';
         } else {

src/plugins/bookPlayer/style.scss

@@ -22,12 +22,12 @@
 
     #btnBookplayerToc {
         float: left;
-        margin-left: 2vw;
+        margin: 0.5vh 0.5vh 0.5vh 2vw;
     }
 
     #btnBookplayerExit {
         float: right;
-        margin-right: 2vw;
+        margin: 0.5vh 2vw 0.5vh 0.5vh;
     }
 
     .bookplayerErrorMsg {
@@ -46,13 +46,20 @@
     width: fit-content;
     max-height: 80%;
     max-width: 60%;
-    padding-right: 50px;
-    padding-bottom: 15px;
 
     .bookplayerButtonIcon {
         color: black;
     }
 
+    .bookplayerButton {
+        margin: 0.5vh;
+    }
+
+    .toc {
+        margin: 0;
+        padding: 30px;
+    }
+
     .toc li {
         margin-bottom: 5px;
 
@@ -80,3 +87,10 @@
         }
     }
 }
+
+@media (max-width: 60em) {
+    #dialogToc {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}

src/plugins/bookPlayer/tableOfContents.js

@@ -1,5 +1,6 @@
 import escapeHTML from 'escape-html';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
+import layoutManager from 'components/layoutManager';
 
 export default class TableOfContents {
     constructor(bookPlayer) {
@@ -57,7 +58,7 @@ export default class TableOfContents {
 
         // remove parent directory reference from href to fix certain books
         const link = chapter.href.startsWith('../') ? chapter.href.slice(3) : chapter.href;
-        itemHtml += `<a href="${escapeHTML(book.path.directory + link)}">${escapeHTML(chapter.label)}</a>`;
+        itemHtml += `<a style="color: ${layoutManager.mobile ? this.bookPlayer.THEMES[this.bookPlayer.theme].body.color : 'inherit'}" href="${escapeHTML(book.path.directory + link)}">${escapeHTML(chapter.label)}</a>`;
 
         if (chapter.subitems?.length) {
             const subHtml = chapter.subitems
@@ -85,7 +86,7 @@ export default class TableOfContents {
         let tocHtml = '<div class="topRightActionButtons">';
         tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><span class="material-icons bookplayerButtonIcon close" aria-hidden="true"></span></button>';
         tocHtml += '</div>';
-        tocHtml += '<ul class="toc">';
+        tocHtml += `<ul style="background-color: ${layoutManager.mobile ? this.bookPlayer.THEMES[this.bookPlayer.theme].body.background : 'inherit'}" class="toc">`;
         rendition.book.navigation.forEach((chapter) => {
             tocHtml += this.chapterTocItem(rendition.book, chapter);
         });