From a7144ade0f0e435e02538fe7fa5aa374c2d6ed81 Mon Sep 17 00:00:00 2001
From: Laurent Constantin <laurent.constantin@liip.ch>
Date: Tue, 13 Aug 2024 01:08:05 +0200
Subject: [PATCH] feature(book): Save reading progression from web

---
 assets/ReadEbook.vue                       | 49 ++++++++++++++++++++--
 assets/read-ebook.js                       | 10 ++++-
 src/Controller/BookController.php          | 37 +++++++++++++++-
 src/Service/BookProgressionService.php     |  7 ++++
 templates/book/reader-files-epub.html.twig |  2 +-
 5 files changed, 98 insertions(+), 7 deletions(-)

diff --git a/assets/ReadEbook.vue b/assets/ReadEbook.vue
index 3fdfc678..17ec3d64 100644
--- a/assets/ReadEbook.vue
+++ b/assets/ReadEbook.vue
@@ -12,18 +12,59 @@
 </template>
 
 <script setup>
-const props = defineProps({'file': String, 'css': String, 'bgColor': String})
+const props = defineProps({
+  'file': String,
+  'css': String,
+  'bgColor': String,
+  'percent': String,
+  'progressionUrl': String
+})
 import { VueReader } from 'vue-book-reader'
 const initialCfi = new URLSearchParams(window.location.search).get('cfi');
 
-const locationChange = (detail) => {
+function debounce(func, delay) {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+
+const locationChange = debounce((detail) => {
   const { fraction } = detail
   console.log('locationChange', fraction, detail)
   history.pushState({fraction: fraction, }, document.title, "?cfi=" + encodeURIComponent(detail.cfi) + "#page="+ detail.location.current+"&percent=" + (fraction * 100).toFixed(2));
-}
+
+  if(props.progressionUrl !== ""){
+    fetch(props.progressionUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({percent: fraction, cfi: detail.cfi}),
+    })
+    .then(response => response.json())
+    .catch((error) => {
+      console.error('Error:', error);
+    });
+  }
+
+}, 500);
 
 const getInitialLocation = () => {
-    return initialCfi ?? null
+    // If we have a cfi in the url we use it
+    if(initialCfi){
+      return initialCfi
+    }
+    // If we know the current progress in percent we use it
+    if(props.percent !== "undefined"){
+      const percent = parseFloat(props.percent)
+      if(!isNaN(percent)){
+        return {fraction: percent};
+      }
+    }
+
+    return null;
 }
 
 const getRendition = async (rendition) => {
diff --git a/assets/read-ebook.js b/assets/read-ebook.js
index 10d25f5e..e6c94892 100644
--- a/assets/read-ebook.js
+++ b/assets/read-ebook.js
@@ -6,5 +6,13 @@ document.addEventListener('DOMContentLoaded', () => {
     const file = document.getElementById(mountId).getAttribute('data-file')
     const css = document.getElementById(mountId).getAttribute('data-css')
     const bgColor = document.getElementById(mountId).getAttribute('data-background-color')
-    createApp(ReadEBook, {file: file, css: css, bgColor: bgColor}).mount(`#${mountId}`);
+    const percent = document.getElementById(mountId).getAttribute('data-percent')
+    const progressionUrl = document.getElementById(mountId).getAttribute('data-progressionUrl')
+    createApp(ReadEBook, {
+        file: file,
+        css: css,
+        bgColor: bgColor,
+        percent: percent,
+        progressionUrl: progressionUrl
+    }).mount(`#${mountId}`);
 });
diff --git a/src/Controller/BookController.php b/src/Controller/BookController.php
index fcab7118..3cfc95bb 100644
--- a/src/Controller/BookController.php
+++ b/src/Controller/BookController.php
@@ -7,12 +7,15 @@
 use App\Entity\User;
 use App\Repository\BookRepository;
 use App\Service\BookFileSystemManager;
+use App\Service\BookProgressionService;
 use App\Service\ThemeSelector;
 use Doctrine\ORM\EntityManagerInterface;
 use Knp\Component\Pager\PaginatorInterface;
 use Symfony\Component\Form\Extension\Core\Type\FileType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\HttpFoundation\Exception\BadRequestException;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Process\Process;
@@ -21,6 +24,10 @@
 #[Route('/books')]
 class BookController extends AbstractController
 {
+    public function __construct(private readonly BookProgressionService $bookProgressionService)
+    {
+    }
+
     #[Route('/{book}/{slug}', name: 'app_book')]
     public function index(Book $book, string $slug, BookRepository $bookRepository, EntityManagerInterface $manager, BookFileSystemManager $fileSystemManager): Response
     {
@@ -93,7 +100,8 @@ public function read(
         BookFileSystemManager $fileSystemManager,
         PaginatorInterface $paginator,
         ThemeSelector $themeSelector,
-        EntityManagerInterface $manager
+        EntityManagerInterface $manager,
+        BookProgressionService $bookProgressionService
     ): Response {
         set_time_limit(120);
         if ($slug !== $book->getSlug()) {
@@ -112,8 +120,13 @@ public function read(
         switch ($book->getExtension()) {
             case 'epub':
             case 'mobi':
+                if ($request->isMethod('POST') && $request->headers->get('Content-Type') === 'application/json') {
+                    return $this->updateProgression($request, $book, $user);
+                }
+
                 return $this->render('book/reader-files-epub.html.twig', [
                     'book' => $book,
+                    'percent' => $this->bookProgressionService->getProgression($book, $user),
                     'file' => $fileSystemManager->getBookPublicPath($book),
                     'body_class' => $themeSelector->isDark() ? 'bg-darker' : '',
                     'isDark' => $themeSelector->isDark(),
@@ -311,4 +324,26 @@ public function relocate(Book $book, BookFileSystemManager $fileSystemManager, E
             'slug' => $book->getSlug(),
         ]);
     }
+
+    private function updateProgression(Request $request, Book $book, User $user): JsonResponse
+    {
+        try {
+            /** @var array{percent?:string|float, cfi?:string} $json */
+            $json = json_decode($request->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        } catch (\JsonException $e) {
+            throw new BadRequestException('Invalid percent in json', 0, $e);
+        }
+        $percent = $json['percent'] ?? null;
+        $percent = $percent === null ? null : floatval((string) $percent);
+
+        if ($percent !== null && $percent <= 1.0 && $percent >= 0) {
+            $this->bookProgressionService->setProgression($book, $user, $percent)
+                ->flush();
+
+            return new JsonResponse([
+                'percent' => $percent,
+            ]);
+        }
+        throw new BadRequestException('Invalid percent in json: '.json_encode($json));
+    }
 }
diff --git a/src/Service/BookProgressionService.php b/src/Service/BookProgressionService.php
index 124390ec..65af053f 100644
--- a/src/Service/BookProgressionService.php
+++ b/src/Service/BookProgressionService.php
@@ -72,6 +72,13 @@ public function setProgression(Book $book, User $user, ?float $progress): self
         return $this;
     }
 
+    public function flush(): self
+    {
+        $this->em->flush();
+
+        return $this;
+    }
+
     public function processPageNumber(Book $book, bool $force = false): ?int
     {
         // Read from book entity (null > 0 is falsy)
diff --git a/templates/book/reader-files-epub.html.twig b/templates/book/reader-files-epub.html.twig
index 99330c6d..fa0f7e2d 100644
--- a/templates/book/reader-files-epub.html.twig
+++ b/templates/book/reader-files-epub.html.twig
@@ -13,7 +13,7 @@
 {% endblock %}
 
 {% block content %}
-    <div id="vue-book-reader" data-file="{{ file }}" data-css="{{ block('readercss')|e('html_attr') }}" data-background-color="{{ isDark ? '#000' : '#fff' }}">
+    <div id="vue-book-reader" data-progressionUrl="{{ app.request.pathInfo }}" data-percent="{{ percent??'undefined' }}" data-file="{{ file }}" data-css="{{ block('readercss')|e('html_attr') }}" data-background-color="{{ isDark ? '#000' : '#fff' }}">
         <a href="{{ file }}">Loading book</a>
     </div>
 {% endblock %}