From 9674e044e45ecfabcac406c3ece112c3f50d0460 Mon Sep 17 00:00:00 2001
From: Laurent Constantin <laurent.constantin@liip.ch>
Date: Mon, 3 Jun 2024 15:07:50 +0200
Subject: [PATCH] feat(book): Add online reader for epub

---
 src/Controller/BookController.php          | 10 ++-
 src/Service/BookFileSystemManager.php      |  7 ++
 templates/book/reader-files-epub.html.twig | 94 ++++++++++++++++++++++
 3 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 templates/book/reader-files-epub.html.twig

diff --git a/src/Controller/BookController.php b/src/Controller/BookController.php
index 06f4915b..8faf4347 100644
--- a/src/Controller/BookController.php
+++ b/src/Controller/BookController.php
@@ -103,15 +103,19 @@ public function read(Request $request, Book $book, string $slug, BookFileSystemM
         }
 
         switch ($book->getExtension()) {
-            // case 'epub':
-            //    break;
+            case 'epub':
+                return $this->render('book/reader-files-epub.html.twig', [
+                    'book' => $book,
+                    'file' => $fileSystemManager->getBookPublicPath($book),
+                ]);
+            case 'mobi':
             case 'pdf':
             case 'cbr':
             case 'cbz':
                 $files = $fileSystemManager->extractFilesToRead($book);
                 break;
             default:
-                $this->addFlash('danger', 'Unsupported book format');
+                $this->addFlash('danger', 'Unsupported book format: '.$book->getExtension());
 
                 return $this->redirectToRoute('app_book', [
                     'book' => $book->getId(),
diff --git a/src/Service/BookFileSystemManager.php b/src/Service/BookFileSystemManager.php
index efe7b9f8..7d2d6422 100644
--- a/src/Service/BookFileSystemManager.php
+++ b/src/Service/BookFileSystemManager.php
@@ -72,6 +72,13 @@ public function getBookFilename(Book $book): string
         return $this->handlePath($paths);
     }
 
+    public function getBookPublicPath(Book $book): string
+    {
+        $path = $this->getBookFilename($book);
+
+        return str_replace($this->publicDir, '', $path);
+    }
+
     public function getCoverFilename(Book $book): ?string
     {
         $paths = [$this->getCoverDirectory(), $book->getImagePath(), $book->getImageFilename()];
diff --git a/templates/book/reader-files-epub.html.twig b/templates/book/reader-files-epub.html.twig
new file mode 100644
index 00000000..89200de2
--- /dev/null
+++ b/templates/book/reader-files-epub.html.twig
@@ -0,0 +1,94 @@
+{% extends themedTemplate('bare.html.twig') %}
+
+{% block title %}{{ book.authors|first }} {% if book.serie is not null %}> {{ book.serie }} #{{ book.serieIndex }} {% endif %}> {{ book.title }}{% endblock %}
+
+{% block stylesheets %}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
+    <script src="https://futurepress.github.io/epub.js/dist/epub.js"></script>
+    <style>
+        .arrow{
+            display: block;
+            width: 100%;
+            height: 100%;
+            font-size: 12em;
+            text-align: center;
+            padding: 5px;
+            text-decoration: none;
+        }
+        .arrow:hover{
+            background-color: blue;
+        }
+
+    </style>
+    {{ parent() }}
+{% endblock %}
+
+{% block javascripts %}
+    <script>
+        var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
+        var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : undefined;
+        var currentCfi = (params && params.get("cfi")) ? params.get("cfi") : undefined;
+        var book = ePub("{{ file }}");
+        var rendition = book.renderTo("area", {
+            flow: "paginated",
+            spreader: "none"
+        });
+        // Fixme: currentCfi has no effect
+        var displayed = rendition.display(currentSectionIndex, currentCfi);
+        rendition.on('relocated', function(location){
+            history.pushState({href: location.start.href}, document.title, "?loc=" + location.start.href + "&cfi=" + location.start.cfi);
+        });
+
+        book.ready.then(() => {
+            document.getElementById("loader").style.display = "none";
+            var next = document.getElementById("next");
+            next.addEventListener("click", function(e){
+                book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
+                e.preventDefault();
+            }, false);
+
+            var prev = document.getElementById("prev");
+            prev.addEventListener("click", function(e){
+                book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
+                e.preventDefault();
+            }, false);
+
+            var keyListener = function(e){
+                // Left Key
+                if ((e.keyCode || e.which) === 37) {
+                    book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
+                }
+                // Right Key
+                if ((e.keyCode || e.which) === 39) {
+                    book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
+                }
+            };
+
+            rendition.on("keyup", keyListener);
+            document.addEventListener("keyup", keyListener, false);
+        })
+
+
+    </script>
+    {{ parent() }}
+{% endblock %}
+
+{% block content %}
+    <div class="container-fluid">
+        <div class="row g-0">
+            <div class="col-1">
+                <a id="prev" href="#prev" class="arrow">‹</a>
+            </div>
+
+            <div class="col-10">
+                <div id="area" style="width: 100%; height: 100%; min-height: 95vh;">
+                    <p id="loader">Loading...</p>
+                </div>
+            </div>
+
+            <div class="col-1">
+                <a id="next" href="#next" class="arrow">›</a>
+            </div>
+        </div>
+    </div>
+{% endblock %}