From b02b28d3e37d66e70de026f368350b8df57fe8c0 Mon Sep 17 00:00:00 2001
From: Leeingnyo <dyd1928@naver.com>
Date: Mon, 16 Aug 2021 01:42:07 +0900
Subject: [PATCH 1/6] Implement to preload images when viewer is paged mode

---
 public/js/reader.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/public/js/reader.js b/public/js/reader.js
index f2279728..a2a422a7 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -11,6 +11,7 @@ const readerComponent = () => {
 		lastSavedPage: page,
 		selectedIndex: 0, // 0: not selected; 1: the first page
 		margin: 30,
+		preloadLookahead: 3,
 
 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -52,6 +53,13 @@ const readerComponent = () => {
 					if (savedMargin) {
 						this.margin = savedMargin;
 					}
+
+					// Preload Images
+					this.preloadLookahead = 3;
+					const limit = Math.min(page + this.preloadLookahead, this.items.length + 1);
+					for (let idx = page + 1; idx <= limit; idx++) {
+						this.preloadImage(this.items[idx - 1].url);
+					}
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -60,6 +68,12 @@ const readerComponent = () => {
 					this.msg = errMsg;
 				})
 		},
+		/**
+		 * Preload an image, which is expected to be cached
+		 */
+		preloadImage(url) {
+			(new Image()).src = url;
+		},
 		/**
 		 * Handles the `change` event for the page selector
 		 */
@@ -111,6 +125,10 @@ const readerComponent = () => {
 
 			if (newIdx <= 0 || newIdx > this.items.length) return;
 
+			if (newIdx + this.preloadLookahead < this.items.length + 1) {
+				this.preloadImage(this.items[newIdx + this.preloadLookahead - 1].url);
+			}
+
 			this.toPage(newIdx);
 
 			if (isNext)

From d544252e3e54e61012d0f9e3b4c2a539f79db773 Mon Sep 17 00:00:00 2001
From: Leeingnyo <dyd1928@naver.com>
Date: Wed, 18 Aug 2021 22:00:39 +0900
Subject: [PATCH 2/6] Add preload lookahead controller

---
 public/js/reader.js       | 6 +++++-
 src/views/reader.html.ecr | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/js/reader.js b/public/js/reader.js
index a2a422a7..79943af3 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -55,7 +55,7 @@ const readerComponent = () => {
 					}
 
 					// Preload Images
-					this.preloadLookahead = 3;
+					this.preloadLookahead = +localStorage.getItem('preloadLookahead') ?? 3;
 					const limit = Math.min(page + this.preloadLookahead, this.items.length + 1);
 					for (let idx = page + 1; idx <= limit; idx++) {
 						this.preloadImage(this.items[idx - 1].url);
@@ -305,6 +305,10 @@ const readerComponent = () => {
 		marginChanged() {
 			localStorage.setItem('margin', this.margin);
 			this.toPage(this.selectedIndex);
+		},
+
+		preloadLookaheadChanged() {
+			localStorage.setItem('preloadLookahead', this.preloadLookahead);
 		}
 	};
 }
diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr
index 6b7bb114..9b4e6930 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -98,6 +98,13 @@
             </div>
           </div>
 
+          <div class="uk-margin" x-show="mode !== 'continuous'">
+            <label class="uk-form-label" for="preload-lookahead" x-text="`Preload Image: ${preloadLookahead} page(s)`"></label>
+            <div class="uk-form-controls">
+              <input id="preload-lookahead" class="uk-range" type="range" min="0" max="5" step="1" x-model.number="preloadLookahead" @change="preloadLookaheadChanged()">
+            </div>
+          </div>
+
           <hr class="uk-divider-icon">
 
           <div class="uk-margin">

From 4d1ad8fb383ce0f5ae6910a232980b8fd05b4e6b Mon Sep 17 00:00:00 2001
From: Leeingnyo <dyd1928@naver.com>
Date: Wed, 18 Aug 2021 21:22:34 +0900
Subject: [PATCH 3/6] Prevent load images

---
 src/views/reader.html.ecr | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr
index 9b4e6930..ff86d175 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -21,7 +21,7 @@
       <div
         :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
         <div x-show="!loading && mode === 'continuous'" x-cloak>
-          <template x-for="item in items">
+          <template x-if="!loading && mode === 'continuous'" x-for="item in items">
             <img
               uk-img
               :class="{'uk-align-center': true, 'spine': item.width < 50}"

From 1e7d6ba5b17c1ecd0897802af7656b0a7d165680 Mon Sep 17 00:00:00 2001
From: Leeingnyo <dyd1928@naver.com>
Date: Wed, 18 Aug 2021 22:16:33 +0900
Subject: [PATCH 4/6] Keep an image ratio at the paged mode, clamping the image
 in a screen

---
 src/views/reader.html.ecr | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr
index ff86d175..3d90a103 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -50,6 +50,9 @@
                                                                                                                                                                  width:${mode === 'width' ? '100vw' : 'auto'}; 
                                                                                                                                                                  height:${mode === 'height' ? '100vh' : 'auto'}; 
                                                                                                                                                                  margin-bottom:0;
+                                                                                                                                                                 max-width:100%;
+                                                                                                                                                                 max-height:100%;
+                                                                                                                                                                 object-fit: contain;
                                                                                                                                                                  `" />
 
           <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div>

From 83b122ab753c9b4c6b932a5a73b706f303506f29 Mon Sep 17 00:00:00 2001
From: Leeingnyo <dyd1928@naver.com>
Date: Wed, 18 Aug 2021 23:38:29 +0900
Subject: [PATCH 5/6] Implement a controller to toggle flip animation

---
 public/js/reader.js       | 20 +++++++++++++++-----
 src/views/reader.html.ecr |  8 +++++++-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/public/js/reader.js b/public/js/reader.js
index 79943af3..575d3ba3 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -6,6 +6,7 @@ const readerComponent = () => {
 		alertClass: 'uk-alert-primary',
 		items: [],
 		curItem: {},
+		enableFlipAnimation: true,
 		flipAnimation: null,
 		longPages: false,
 		lastSavedPage: page,
@@ -60,6 +61,9 @@ const readerComponent = () => {
 					for (let idx = page + 1; idx <= limit; idx++) {
 						this.preloadImage(this.items[idx - 1].url);
 					}
+
+					const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
+					this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -131,10 +135,12 @@ const readerComponent = () => {
 
 			this.toPage(newIdx);
 
-			if (isNext)
-				this.flipAnimation = 'right';
-			else
-				this.flipAnimation = 'left';
+			if (this.enableFlipAnimation) {
+				if (isNext)
+					this.flipAnimation = 'right';
+				else
+					this.flipAnimation = 'left';
+			}
 
 			setTimeout(() => {
 				this.flipAnimation = null;
@@ -309,6 +315,10 @@ const readerComponent = () => {
 
 		preloadLookaheadChanged() {
 			localStorage.setItem('preloadLookahead', this.preloadLookahead);
-		}
+		},
+
+		enableFlipAnimationChanged() {
+			localStorage.setItem('enableFlipAnimation', this.enableFlipAnimation);
+		},
 	};
 }
diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr
index 3d90a103..0e46ed20 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -101,7 +101,13 @@
             </div>
           </div>
 
-          <div class="uk-margin" x-show="mode !== 'continuous'">
+          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
+            <label class="uk-form-label" for="enable-flip-animation">Enable Flip Animation</label>
+            <div class="uk-form-controls">
+              <input id="enable-flip-animation" class="uk-checkbox" type="checkbox" x-model="enableFlipAnimation" @change="enableFlipAnimationChanged()">
+            </div>
+          </div>
+          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
             <label class="uk-form-label" for="preload-lookahead" x-text="`Preload Image: ${preloadLookahead} page(s)`"></label>
             <div class="uk-form-controls">
               <input id="preload-lookahead" class="uk-range" type="range" min="0" max="5" step="1" x-model.number="preloadLookahead" @change="preloadLookaheadChanged()">

From a703175b3ad3d3331594202d4d058011a1bc91f7 Mon Sep 17 00:00:00 2001
From: Leeingnyo <dyd1928@naver.com>
Date: Thu, 19 Aug 2021 14:46:10 +0900
Subject: [PATCH 6/6] Parenthesize to avoid a misbehavior

---
 public/js/reader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/js/reader.js b/public/js/reader.js
index 575d3ba3..9b172766 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -56,7 +56,7 @@ const readerComponent = () => {
 					}
 
 					// Preload Images
-					this.preloadLookahead = +localStorage.getItem('preloadLookahead') ?? 3;
+					this.preloadLookahead = +(localStorage.getItem('preloadLookahead') ?? 3);
 					const limit = Math.min(page + this.preloadLookahead, this.items.length + 1);
 					for (let idx = page + 1; idx <= limit; idx++) {
 						this.preloadImage(this.items[idx - 1].url);