Merge pull request #4890 from vincent/bufgix-ebook-toc-nested-chapters

Show nested chapters in bookplayer TOC

src/plugins/bookPlayer/style.scss

@@ -57,7 +57,16 @@
         margin-bottom: 5px;
 
         list-style-type: none;
-        font-size: 120%;
+        font-size: 1.2rem;
+        font-weight: bold;
+
+        ul {
+            padding-left: 1.5rem;
+
+            li {
+                font-weight: normal;
+            }
+        }
 
         a:link {
             color: #000;

src/plugins/bookPlayer/tableOfContents.js

@@ -1,3 +1,4 @@
+import escapeHTML from 'escape-html';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
 
 export default class TableOfContents {
@@ -51,6 +52,25 @@ export default class TableOfContents {
         });
     }
 
+    chapterTocItem(book, chapter) {
+        let itemHtml = '<li>';
+
+        // 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>`;
+
+        if (chapter.subitems?.length) {
+            const subHtml = chapter.subitems
+                .map((nestedChapter) => this.chapterTocItem(book, nestedChapter))
+                .join('');
+
+            itemHtml += `<ul>${subHtml}</ul>`;
+        }
+
+        itemHtml += '</li>';
+        return itemHtml;
+    }
+
     createMediaElement() {
         const rendition = this.rendition;
 
@@ -67,12 +87,7 @@ export default class TableOfContents {
         tocHtml += '</div>';
         tocHtml += '<ul class="toc">';
         rendition.book.navigation.forEach((chapter) => {
-            tocHtml += '<li>';
+            tocHtml += this.chapterTocItem(rendition.book, chapter);
-
-            // remove parent directory reference from href to fix certain books
-            const link = chapter.href.startsWith('../') ? chapter.href.slice(3) : chapter.href;
-            tocHtml += `<a href="${rendition.book.path.directory + link}">${chapter.label}</a>`;
-            tocHtml += '</li>';
         });
 
         tocHtml += '</ul>';