Merge branch 'feature/paged-reader' into dev

Author: hkalexling

public/js/download.js

@@ -95,7 +95,7 @@ const search = () => {
 
 	try {
 		const path = new URL(input).pathname;
-		const match = /\/title\/([0-9]+)/.exec(path);
+		const match = /\/(?:title|manga)\/([0-9]+)/.exec(path);
 		int_id = parseInt(match[1]);
 	} catch (e) {
 		int_id = parseInt(input);

public/js/reader.js

@@ -5,12 +5,68 @@ let longPages = false;
 $(() => {
 	getPages();
 
+	const storedMode = localStorage.getItem('mode') || 'continuous';
+
+	setProp('mode', storedMode);
+	updateMode(storedMode, page);
+	$('#mode-select').val(storedMode);
+
 	$('#page-select').change(() => {
 		const p = parseInt($('#page-select').val());
 		toPage(p);
 	});
+
+	$('#mode-select').change(() => {
+		const mode = $('#mode-select').val();
+		const curIdx = parseInt($('#page-select').val());
+
+		updateMode(mode, curIdx);
+	});
+});
+
+$(window).resize(() => {
+	const mode = getProp('mode');
+	if (mode === 'continuous') return;
+
+	const wideScreen = $(window).width() > $(window).height();
+	const propMode = wideScreen ? 'height' : 'width';
+	setProp('mode', propMode);
 });
 
+/**
+ * Update the reader mode
+ *
+ * @function updateMode
+ * @param {string} mode - The mode. Can be one of the followings:
+ * 		{'continuous', 'paged', 'height', 'width'}
+ * @param {number} targetPage - The one-based index of the target page
+ */
+const updateMode = (mode, targetPage) => {
+	localStorage.setItem('mode', mode);
+
+	// The mode to be put into the `mode` prop. It can't be `screen`
+	let propMode = mode;
+
+	if (mode === 'paged') {
+		const wideScreen = $(window).width() > $(window).height();
+		propMode = wideScreen ? 'height' : 'width';
+	}
+
+	setProp('mode', propMode);
+
+	if (mode === 'continuous') {
+		waitForPage(items.length, () => {
+			setupScroller();
+		});
+	}
+
+	waitForPage(targetPage, () => {
+		setTimeout(() => {
+			toPage(targetPage);
+		}, 100);
+	});
+};
+
 /**
  * Set an alpine.js property
  *
@@ -22,6 +78,17 @@ const setProp = (key, prop) => {
 	$('#root').get(0).__x.$data[key] = prop;
 };
 
+/**
+ * Get an alpine.js property
+ *
+ * @function getProp
+ * @param {string} key - Key of the data property
+ * @return {*} The data property
+ */
+const getProp = (key) => {
+	return $('#root').get(0).__x.$data[key];
+};
+
 /**
  * Get dimension of the pages in the entry from the API and update the view
  */
@@ -50,11 +117,6 @@ const getPages = () => {
 
 			setProp('items', items);
 			setProp('loading', false);
-
-			waitForPage(items.length, () => {
-				toPage(page);
-				setupScroller();
-			});
 		})
 		.catch(e => {
 			const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -71,7 +133,15 @@ const getPages = () => {
  * @param {number} idx - One-based index of the page
  */
 const toPage = (idx) => {
-	$(`#${idx}`).get(0).scrollIntoView(true);
+	const mode = getProp('mode');
+	if (mode === 'continuous') {
+		$(`#${idx}`).get(0).scrollIntoView(true);
+	} else {
+		if (idx >= 1 && idx <= items.length) {
+			setProp('curItem', items[idx - 1]);
+		}
+	}
+	replaceHistory(idx);
 	UIkit.modal($('#modal-sections')).hide();
 };
 
@@ -137,6 +207,8 @@ const replaceHistory = (idx) => {
  * @function setupScroller
  */
 const setupScroller = () => {
+	const mode = getProp('mode');
+	if (mode !== 'continuous') return;
 	$('#root img').each((idx, el) => {
 		$(el).on('inview', (event, inView) => {
 			if (inView) {
@@ -193,3 +265,30 @@ const nextEntry = (nextUrl) => {
 		redirect(nextUrl);
 	});
 };
+
+/**
+ * Show the next or the previous page
+ *
+ * @function flipPage
+ * @param {bool} isNext - Whether we are going to the next page
+ */
+const flipPage = (isNext) => {
+	const curItem = getProp('curItem');
+	const idx = parseInt(curItem.id);
+	const delta = isNext ? 1 : -1;
+	const newIdx = idx + delta;
+
+	toPage(newIdx);
+
+	if (isNext)
+		setProp('flipAnimation', 'right');
+	else
+		setProp('flipAnimation', 'left');
+
+	setTimeout(() => {
+		setProp('flipAnimation', null);
+	}, 500);
+
+	replaceHistory(newIdx);
+	saveProgress(newIdx);
+};

src/config.cr

@@ -18,6 +18,7 @@ class Config
     home: true
   property plugin_path : String = File.expand_path "~/mango/plugins",
     home: true
+  property download_timeout_seconds : Int32 = 30
   property mangadex = Hash(String, String | Int32).new
 
   @[YAML::Field(ignore: true)]

src/util/proxy.cr

@@ -5,7 +5,7 @@ require "http_proxy"
 module HTTP
   class Client
     private def self.exec(uri : URI, tls : TLSContext = nil)
-      Logger.debug "Using monkey-patched HTTP::Client"
+      Logger.debug "Setting proxy"
       previous_def uri, tls do |client, path|
         client.set_proxy get_proxy uri
         yield client, path

src/util/web.cr

@@ -81,3 +81,15 @@ macro get_sort_opt
     sort_opt = SortOptions.new sort_method, is_ascending
   end
 end
+
+module HTTP
+  class Client
+    private def self.exec(uri : URI, tls : TLSContext = nil)
+      Logger.debug "Setting read timeout"
+      previous_def uri, tls do |client, path|
+        client.read_timeout = Config.current.download_timeout_seconds.seconds
+        yield client, path
+      end
+    end
+  end
+end

src/views/reader.html.ecr

@@ -3,41 +3,67 @@
 
   <%= render_component "head" %>
 
-  <body>
-    <div class="uk-section uk-section-default uk-section-small reader-bg">
+  <body style="position:relative;">
+    <div class="uk-section uk-section-default uk-section-small reader-bg"
+         id="root" 
+         :style="mode === 'continuous' ? '' : 'padding:0'"
+         x-data="{
+         loading: true, 
+         mode: 'continuous', // can be 'continuous', 'height' or 'width'
+         msg: 'Loading the web reader. Please wait...',
+         alertClass: 'uk-alert-primary',
+         items: [],
+         curItem: {},
+         flipAnimation: null
+         }">
+
       <div class="uk-container uk-container-small">
         <div id="alert"></div>
-        <div id="root" x-data="{
-        loading: true, 
-        msg: 'Loading the web reader. Please wait...',
-        alertClass: 'uk-alert-primary',
-        items: []
-        }">
-          <div x-show="loading">
-            <div :class="alertClass" x-show="msg" uk-alert>
-              <p x-text="msg"></p>
-            </div>
-          </div>
-          <div x-show="!loading" x-cloak>
-            <template x-for="item in items">
-              <img
-                      uk-img
-                      class="uk-align-center"
-                      :data-src="item.url"
-                      :width="item.width"
-                      :height="item.height"
-                      :id="item.id"
-                      @click="showControl($event)"
-                      />
-            </template>
-            <%- if next_entry_url -%>
-              <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button>
-            <%- else -%>
-              <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= exit_url %>')">Exit Reader</button>
-            <%- end -%>
+        <div x-show="loading">
+          <div :class="alertClass" x-show="msg" uk-alert>
+            <p x-text="msg"></p>
           </div>
         </div>
       </div>
+
+      <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">
+            <img
+                    uk-img
+                    class="uk-align-center"
+                    :data-src="item.url"
+                    :width="item.width"
+                    :height="item.height"
+                    :id="item.id"
+                    @click="showControl($event)"
+                    />
+          </template>
+          <%- if next_entry_url -%>
+            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button>
+          <%- else -%>
+            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= exit_url %>')">Exit Reader</button>
+          <%- end -%>
+        </div>
+
+        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh">
+
+          <img uk-img :class="{
+          'uk-align-center': true, 
+          'uk-animation-slide-left': flipAnimation === 'left', 
+          'uk-animation-slide-right': flipAnimation === 'right'
+          }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="showControl($event)" :style="`
+          width:${mode === 'width' ? '100vw' : 'auto'}; 
+          height:${mode === 'height' ? '100vh' : 'auto'}; 
+          margin-bottom:0;
+          `" />
+
+          <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div>
+          <div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true)"></div>
+        </div>
+
+      </div>
     </div>
 
     <div id="modal-sections" class="uk-flex-top" uk-modal>
@@ -52,7 +78,7 @@
             <p id="progress-label"></p>
           </div>
           <div class="uk-margin">
-            <label class="uk-form-label" for="form-stacked-select">Jump to page</label>
+            <label class="uk-form-label" for="page-select">Jump to page</label>
             <div class="uk-form-controls">
               <select id="page-select" class="uk-select">
                 <%- (1..entry.pages).each do |p| -%>
@@ -61,6 +87,15 @@
               </select>
             </div>
           </div>
+          <div class="uk-margin">
+            <label class="uk-form-label" for="mode-select">Mode</label>
+            <div class="uk-form-controls">
+              <select id="mode-select" class="uk-select">
+                <option value="continuous">Continuous</option>
+                <option value="paged">Paged</option>
+              </select>
+            </div>
+          </div>
         </div>
         <div class="uk-modal-footer uk-text-right">
           <button class="uk-button uk-button-danger" type="button" onclick="redirect('<%= exit_url %>')">Exit Reader</button>