From d50f0db9e5a1bc3b7721faa81070c44f0223ebb6 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 10 Jan 2020 14:29:42 +0800
Subject: [PATCH] refactor(web reader): enhance thumbnail view

use on-the-fly thumbnails
add page number

related to #62
---
 komga-webui/src/views/BookReader.vue | 44 +++++++++++++++++-----------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/komga-webui/src/views/BookReader.vue b/komga-webui/src/views/BookReader.vue
index 1509adde..47a334d6 100644
--- a/komga-webui/src/views/BookReader.vue
+++ b/komga-webui/src/views/BookReader.vue
@@ -226,27 +226,34 @@
 
     </v-overlay>
 
-    <v-dialog v-model="showThumbnailsExplorer">
+    <v-dialog v-model="showThumbnailsExplorer" scrollable>
       <v-card :max-height="$vuetify.breakpoint.height * .9"
               dark
       >
-        <v-container fluid>
-          <v-row>
-            <v-img v-for="p in pages"
+        <v-card-text>
+          <v-container fluid>
+            <v-row>
+              <div v-for="p in pages"
                    :key="p.number"
-                   :src="getPageUrl(p)"
-                   lazy-src="../assets/cover.svg"
-                   aspect-ratio="0.7071"
-                   :contain="true"
-                   max-height="200"
-                   max-width="140"
-                   class="ma-2"
-                   @click="showThumbnailsExplorer = false; goTo(p.number)"
-                   :title="`Page ${p.number}`"
-                   style="cursor: pointer"
-            />
-          </v-row>
-        </v-container>
+                   style="min-height: 220px; max-width: 140px"
+                   class="mb-2"
+              >
+                <v-img
+                  :src="getThumbnailUrl(p)"
+                  lazy-src="../assets/cover.svg"
+                  aspect-ratio="0.7071"
+                  :contain="true"
+                  max-height="200"
+                  max-width="140"
+                  class="ma-2"
+                  @click="showThumbnailsExplorer = false; goTo(p.number)"
+                  style="cursor: pointer"
+                />
+                <div class="white--text text-center font-weight-bold">{{p.number}}</div>
+              </div>
+            </v-row>
+          </v-container>
+        </v-card-text>
       </v-card>
     </v-dialog>
 
@@ -386,6 +393,9 @@ export default Vue.extend({
       }
       return url
     },
+    getThumbnailUrl (page: PageDto): string {
+      return `${this.baseURL}/api/v1/books/${this.bookId}/pages/${page.number}/thumbnail`
+    },
     prev () {
       if (this.canPrev) {
         (this.$refs.slick as any).prev()