Merge pull request #110 from XavierSchiller/master

[arm64] Fix Wrong libgc.so location when building Image

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+lib

.github/workflows/build.yml

@@ -17,15 +17,24 @@ jobs:
     steps:
     - uses: actions/checkout@v2
     - name: Install dependencies
-      run: apk add --no-cache yarn yaml sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static
+      run: apk add --no-cache yarn yaml sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
     - name: Build
-      run: make static
+      run: make static || make static
     - name: Linter
       run: make check
     - name: Run tests
       run: make test
-    - name: Upload artifact
+    - name: Upload binary
       uses: actions/upload-artifact@v2
       with:
         name: mango
         path: mango
+    - name: build arm32v7 object file
+      run: make arm32v7 || make arm32v7
+    - name: build arm64v8 object file
+      run: make arm64v8 || make arm64v8
+    - name: Upload object files
+      uses: actions/upload-artifact@v2
+      with:
+        name: object files
+        path: ./*.o

Dockerfile

@@ -3,9 +3,8 @@ FROM crystallang/crystal:0.34.0-alpine AS builder
 WORKDIR /Mango
 
 COPY . .
-COPY package*.json .
+RUN apk add --no-cache yarn yaml sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
-RUN apk add --no-cache yarn yaml sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static \
+RUN make static || make static
-    && make static
 
 FROM library/alpine
 

Dockerfile.arm32v7

@@ -0,0 +1,14 @@
+FROM arm32v7/ubuntu:18.04
+
+RUN apt-get update && apt-get install -y wget git make llvm-8 llvm-8-dev g++ libsqlite3-dev libyaml-dev libgc-dev libssl-dev libcrypto++-dev libevent-dev libgmp-dev zlib1g-dev libpcre++-dev pkg-config libarchive-dev libxml2-dev libacl1-dev nettle-dev liblzo2-dev liblzma-dev libbz2-dev libjpeg-turbo8-dev libpng-dev libtiff-dev
+
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.34.0 && make deps && cd ..
+RUN git clone https://github.com/kostya/myhtml && cd myhtml/src/ext && git checkout v1.5.0 && make && cd ..
+RUN git clone https://github.com/jessedoyle/duktape.cr && cd duktape.cr/ext && git checkout v0.20.0 && make && cd ..
+RUN git clone https://github.com/hkalexling/image_size.cr && cd image_size.cr && git checkout v0.2.0 && make && cd ..
+
+COPY mango-arm32v7.o .
+
+RUN cc 'mango-arm32v7.o' -o 'mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/arm-linux-gnueabihf/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
+
+CMD ["./mango"]

Dockerfile.arm64v8

@@ -0,0 +1,14 @@
+FROM arm64v8/ubuntu:18.04
+
+RUN apt-get update && apt-get install -y wget git make llvm-8 llvm-8-dev g++ libsqlite3-dev libyaml-dev libgc-dev libssl-dev libcrypto++-dev libevent-dev libgmp-dev zlib1g-dev libpcre++-dev pkg-config libarchive-dev libxml2-dev libacl1-dev nettle-dev liblzo2-dev liblzma-dev libbz2-dev libjpeg-turbo8-dev libpng-dev libtiff-dev
+
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.34.0 && make deps && cd ..
+RUN git clone https://github.com/kostya/myhtml && cd myhtml/src/ext && git checkout v1.5.0 && make && cd ..
+RUN git clone https://github.com/jessedoyle/duktape.cr && cd duktape.cr/ext && git checkout v0.20.0 && make && cd ..
+RUN git clone https://github.com/hkalexling/image_size.cr && cd image_size.cr && git checkout v0.2.0 && make && cd ..
+
+COPY mango-arm64v8.o .
+
+RUN cc 'mango-arm64v8.o' -o 'mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/aarch64-linux-gnu/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
+
+CMD ["./mango"]

Makefile

@@ -12,10 +12,10 @@ setup: libs
 	yarn gulp dev
 
 build: libs
-	crystal build src/mango.cr --release --progress
+	crystal build src/mango.cr --release --progress --error-trace
 
 static: uglify | libs
-	crystal build src/mango.cr --release --progress --static
+	crystal build src/mango.cr --release --progress --static --error-trace
 
 libs:
 	shards install --production
@@ -31,6 +31,12 @@ check:
 	./bin/ameba
 	./dev/linewidth.sh
 
+arm32v7:
+	crystal build src/mango.cr --release --progress --error-trace --cross-compile --target='arm-linux-gnueabihf' -o mango-arm32v7
+
+arm64v8:
+	crystal build src/mango.cr --release --progress --error-trace --cross-compile --target='aarch64-linux-gnu' -o mango-arm64v8
+
 install:
 	cp mango $(INSTALL_DIR)/mango
 

README.md

@@ -51,7 +51,7 @@ The official docker images are available on [Dockerhub](https://hub.docker.com/r
 ### CLI
 
 ```
-  Mango - Manga Server and Web Reader. Version 0.10.0
+  Mango - Manga Server and Web Reader. Version 0.12.3
 
   Usage:
 
@@ -139,8 +139,13 @@ Mobile UI:
 
 ![mobile screenshot](./.github/screenshots/mobile.png)
 
+## Sponsors
+
+<a href="https://casinoshunter.com/online-casinos/"><img src="https://i.imgur.com/EJb3wBo.png" width="150" height="auto"></a>
+<a href="https://www.browserstack.com/open-source"><img src="https://i.imgur.com/hGJUJXD.png" width="150" height="auto"></a>
+
 ## Contributors
 
-Please check the [development guideline](https://github.com/hkalexling/Mango/wiki/Development) if you are interest in code contributions.
+Please check the [development guideline](https://github.com/hkalexling/Mango/wiki/Development) if you are interested in code contributions.
 
 [![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/0)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/0)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/1)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/1)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/2)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/2)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/3)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/3)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/4)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/4)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/5)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/5)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/6)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/6)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/7)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/7)

gulpfile.js

@@ -1,15 +1,43 @@
 const gulp = require('gulp');
-const minify = require("gulp-babel-minify");
+const babel = require('gulp-babel');
+const minify = require('gulp-babel-minify');
 const minifyCss = require('gulp-minify-css');
 const less = require('gulp-less');
 
-gulp.task('copy-uikit-js', () => {
+// Copy libraries from node_moduels to public/js
-	return gulp.src('node_modules/uikit/dist/js/*.min.js')
+gulp.task('copy-js', () => {
+	return gulp.src([
+			'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js',
+			'node_modules/@fortawesome/fontawesome-free/js/solid.min.js',
+			'node_modules/uikit/dist/js/uikit.min.js',
+			'node_modules/uikit/dist/js/uikit-icons.min.js'
+		])
 		.pipe(gulp.dest('public/js'));
 });
 
-gulp.task('minify-js', () => {
+// Copy UIKit SVG icons to public/img
-	return gulp.src('public/js/*.js')
+gulp.task('copy-uikit-icons', () => {
+	return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
+		.pipe(gulp.dest('public/img'));
+});
+
+// Compile less
+gulp.task('less', () => {
+	return gulp.src('public/css/*.less')
+		.pipe(less())
+		.pipe(gulp.dest('public/css'));
+});
+
+// Transpile and minify JS files and output to dist
+gulp.task('babel', () => {
+	return gulp.src(['public/js/*.js', '!public/js/*.min.js'])
+		.pipe(babel({
+			presets: [
+				['@babel/preset-env', {
+					targets: '>0.25%, not dead, ios>=9'
+				}]
+			],
+		}))
 		.pipe(minify({
 			removeConsole: true,
 			builtIns: false
@@ -17,40 +45,26 @@ gulp.task('minify-js', () => {
 		.pipe(gulp.dest('dist/js'));
 });
 
-gulp.task('less', () => {
+// Minify CSS and output to dist
-	return gulp.src('public/css/*.less')
-		.pipe(less())
-		.pipe(gulp.dest('public/css'));
-});
-
 gulp.task('minify-css', () => {
 	return gulp.src('public/css/*.css')
 		.pipe(minifyCss())
 		.pipe(gulp.dest('dist/css'));
 });
 
-gulp.task('copy-uikit-icons', () => {
+// Copy static files (includeing images) to dist
-	return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
-		.pipe(gulp.dest('public/img'));
-});
-
-gulp.task('img', () => {
-	return gulp.src('public/img/*')
-		.pipe(gulp.dest('dist/img'));
-});
-
 gulp.task('copy-files', () => {
-	return gulp.src('public/*.*')
+	return gulp.src(['public/img/*', 'public/*.*', 'public/js/*.min.js'], {
+			base: 'public'
+		})
 		.pipe(gulp.dest('dist'));
 });
 
-gulp.task('default', gulp.parallel(
+// Set up the public folder for development
-	gulp.series('copy-uikit-js', 'minify-js'),
+gulp.task('dev', gulp.parallel('copy-js', 'copy-uikit-icons', 'less'));
-	gulp.series('less', 'minify-css'),
-	gulp.series('copy-uikit-icons', 'img'),
-	'copy-files'
-));
 
-gulp.task('dev', gulp.parallel(
+// Set up the dist folder for deployment
-	'copy-uikit-js', 'less', 'copy-uikit-icons'
+gulp.task('deploy', gulp.parallel('babel', 'minify-css', 'copy-files'));
-));
+
+// Default task
+gulp.task('default', gulp.series('dev', 'deploy'));

package.json

@@ -6,7 +6,9 @@
 	"author": "Alex Ling <hkalexling@gmail.com>",
 	"license": "MIT",
 	"devDependencies": {
+		"@babel/preset-env": "^7.11.5",
 		"gulp": "^4.0.2",
+		"gulp-babel": "^8.0.0",
 		"gulp-babel-minify": "^0.5.1",
 		"gulp-less": "^4.0.1",
 		"gulp-minify-css": "^1.2.4",
@@ -16,6 +18,7 @@
 		"uglify": "gulp"
 	},
 	"dependencies": {
+		"@fortawesome/fontawesome-free": "^5.14.0",
 		"uikit": "^3.5.4"
 	}
 }

public/css/mango.css

@@ -135,3 +135,20 @@ td>.uk-dropdown {
 #select-bar-controls a:hover {
     color: orange;
 }
+
+#main-section {
+    position: relative;
+}
+
+#totop-wrapper {
+    position: absolute;
+    top: 100vh;
+    right: 2em;
+    bottom: 0;
+}
+
+#totop-wrapper a {
+    position: fixed;
+    position: sticky;
+    top: calc(100vh - 5em);
+}

public/js/reader.js

@@ -1,64 +1,102 @@
-$(function() {
+let lastSavedPage = page;
-	function bind() {
+let items = [];
-		var controller = new ScrollMagic.Controller();
+let longPages = false;
 
-		// replace history on scroll
+$(() => {
-		$('img').each(function(idx) {
+	getPages();
-			var scene = new ScrollMagic.Scene({
-					triggerElement: $(this).get(),
-					triggerHook: 'onEnter',
-					reverse: true
-				})
-				.addTo(controller)
-				.on('enter', function(event) {
-					current = $(event.target.triggerElement()).attr('id');
-					replaceHistory(current);
-				})
-				.on('leave', function(event) {
-					var prev = $(event.target.triggerElement()).prev();
-					current = $(prev).attr('id');
-					replaceHistory(current);
-				});
-		});
 
-		// poor man's infinite scroll
+	$('#page-select').change(() => {
-		var scene = new ScrollMagic.Scene({
+		const p = parseInt($('#page-select').val());
-				triggerElement: $('.next-url').get(),
+		toPage(p);
-				triggerHook: 'onEnter',
-				offset: -500
-			})
-			.addTo(controller)
-			.on('enter', function() {
-				var nextURL = $('.next-url').attr('href');
-				$('.next-url').remove();
-				if (!nextURL) {
-					console.log('No .next-url found. Reached end of page');
-					var lastURL = $('img').last().attr('id');
-					// load the reader URL for the last page to update reading progrss to 100%
-					$.get(lastURL);
-					$('#next-btn').removeAttr('hidden');
-					return;
-				}
-				$('#hidden').load(encodeURI(nextURL) + ' .uk-container', function(res, status, xhr) {
-					if (status === 'error') console.log(xhr.statusText);
-					if (status === 'success') {
-						console.log(nextURL + ' loaded');
-						// new page loaded to #hidden, we now append it
-						$('.uk-section > .uk-container').append($('#hidden .uk-container').children());
-						$('#hidden').empty();
-						bind();
-					}
 	});
-			});
-	}
-
-	bind();
-});
-$('#page-select').change(function() {
-	jumpTo(parseInt($('#page-select').val()));
 });
 
-function showControl(idx) {
+/**
+ * Set an alpine.js property
+ *
+ * @function setProp
+ * @param {string} key - Key of the data property
+ * @param {*} prop - The data property
+ */
+const setProp = (key, prop) => {
+	$('#root').get(0).__x.$data[key] = prop;
+};
+
+/**
+ * Get dimension of the pages in the entry from the API and update the view
+ */
+const getPages = () => {
+	$.get(`${base_url}api/dimensions/${tid}/${eid}`)
+		.then(data => {
+			if (!data.success && data.error)
+				throw new Error(resp.error);
+			const dimensions = data.dimensions;
+
+			items = dimensions.map((d, i) => {
+				return {
+					id: i + 1,
+					url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
+					width: d.width,
+					height: d.height
+				};
+			});
+
+			const avgRatio = items.reduce((acc, cur) => {
+				return acc + cur.height / cur.width
+			}, 0) / items.length;
+
+			console.log(avgRatio);
+			longPages = avgRatio > 2;
+
+			setProp('items', items);
+			setProp('loading', false);
+
+			waitForPage(items.length, () => {
+				toPage(page);
+				setupScroller();
+			});
+		})
+		.catch(e => {
+			const errMsg = `Failed to get the page dimensions. ${e}`;
+			console.error(e);
+			setProp('alertClass', 'uk-alert-danger');
+			setProp('msg', errMsg);
+		})
+};
+
+/**
+ * Jump to a specific page
+ *
+ * @function toPage
+ * @param {number} idx - One-based index of the page
+ */
+const toPage = (idx) => {
+	$(`#${idx}`).get(0).scrollIntoView(true);
+	UIkit.modal($('#modal-sections')).hide();
+};
+
+/**
+ * Check if a page exists every 100ms. If so, invoke the callback function.
+ *
+ * @function waitForPage
+ * @param {number} idx - One-based index of the page
+ * @param {function} cb - Callback function
+ */
+const waitForPage = (idx, cb) => {
+	if ($(`#${idx}`).length > 0) return cb();
+	setTimeout(() => {
+		waitForPage(idx, cb)
+	}, 100);
+};
+
+/**
+ * Show the control modal
+ *
+ * @function showControl
+ * @param {object} event - The onclick event that triggers the function
+ */
+const showControl = (event) => {
+	const idx = parseInt($(event.currentTarget).attr('id'));
 	const pageCount = $('#page-select > option').length;
 	const progressText = `Progress: ${idx}/${pageCount} (${(idx/pageCount * 100).toFixed(1)}%)`;
 	$('#progress-label').text(progressText);
@@ -66,19 +104,92 @@ function showControl(idx) {
 	UIkit.modal($('#modal-sections')).show();
 }
 
-function jumpTo(page) {
+/**
-	var ary = window.location.pathname.split('/');
+ * Redirect to a URL
-	ary[ary.length - 1] = page;
+ *
-	ary.shift(); // remove leading `/`
+ * @function redirect
-	ary.unshift(window.location.origin);
+ * @param {string} url - The target URL
-	window.location.replace(ary.join('/'));
+ */
-}
+const redirect = (url) => {
-
-function replaceHistory(url) {
-	history.replaceState(null, "", url);
-	console.log('reading ' + url);
-}
-
-function redirect(url) {
 	window.location.replace(url);
 }
+
+/**
+ * Replace the address bar history and save th ereading progress if necessary
+ *
+ * @function replaceHistory
+ * @param {number} idx - One-based index of the current page
+ */
+const replaceHistory = (idx) => {
+	const ary = window.location.pathname.split('/');
+	ary[ary.length - 1] = idx;
+	ary.shift(); // remove leading `/`
+	ary.unshift(window.location.origin);
+	const url = ary.join('/');
+	saveProgress(idx);
+	history.replaceState(null, "", url);
+}
+
+/**
+ * Set up the scroll handler that calls `replaceHistory` when an image
+ * 		enters the view port
+ *
+ * @function setupScroller
+ */
+const setupScroller = () => {
+	$('#root img').each((idx, el) => {
+		$(el).on('inview', (event, inView) => {
+			if (inView) {
+				const current = $(event.currentTarget).attr('id');
+				replaceHistory(current);
+			}
+		});
+	});
+};
+
+/**
+ * Update the backend reading progress if:
+ * 		1) the current page is more than five pages away from the last 
+ * 			saved page, or
+ * 		2) the average height/width ratio of the pages is over 2, or
+ * 		3) the current page is the first page, or
+ * 		4) the current page is the last page
+ *
+ * @function saveProgress
+ * @param {number} idx - One-based index of the page
+ * @param {function} cb - Callback
+ */
+const saveProgress = (idx, cb) => {
+	idx = parseInt(idx);
+	if (Math.abs(idx - lastSavedPage) >= 5 ||
+		longPages ||
+		idx === 1 || idx === items.length
+	) {
+		lastSavedPage = idx;
+		console.log('saving progress', idx);
+
+		const url = `${base_url}api/progress/${tid}/${idx}?${$.param({entry: eid})}`;
+		$.post(url)
+			.then(data => {
+				if (data.error) throw new Error(data.error);
+				if (cb) cb();
+			})
+			.catch(e => {
+				console.error(e);
+				alert('danger', e);
+			});
+	}
+};
+
+/**
+ * Mark progress to 100% and redirect to the next entry
+ * 	Used as the onclick handler for the "Next Entry" button
+ *
+ * @function nextEntry
+ * @param {string} nextUrl - URL of the next entry
+ */
+const nextEntry = (nextUrl) => {
+	saveProgress(items.length, () => {
+		redirect(nextUrl);
+	});
+};

public/js/title.js

@@ -55,7 +55,7 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
 
 	$('#modal-edit-btn').attr('onclick', `edit("${entryID}")`);
 
-	$('#modal-download-btn').attr('href', `/opds/download/${titleID}/${entryID}`);
+	$('#modal-download-btn').attr('href', `${base_url}opds/download/${titleID}/${entryID}`);
 
 	UIkit.modal($('#modal')).show();
 }

shard.lock

@@ -28,6 +28,14 @@ shards:
     github: crystal-loot/exception_page
     version: 0.1.4
 
+  http_proxy:
+    github: mamantoha/http_proxy
+    version: 0.7.1
+
+  image_size:
+    github: hkalexling/image_size.cr
+    version: 0.2.0
+
   kemal:
     github: kemalcr/kemal
     version: 0.26.1

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.10.0
+version: 0.12.3
 
 authors:
   - Alex Ling <hkalexling@gmail.com>
@@ -32,3 +32,7 @@ dependencies:
     version: ~> 0.20.0
   myhtml:
     github: kostya/myhtml
+  http_proxy:
+    github: mamantoha/http_proxy
+  image_size:
+   github: hkalexling/image_size.cr

spec/spec_helper.cr

@@ -2,6 +2,7 @@ require "spec"
 require "../src/queue"
 require "../src/server"
 require "../src/config"
+require "../src/main_fiber"
 
 class State
   @@hash = {} of String => String

src/config.cr

@@ -52,12 +52,8 @@ class Config
       config.fill_defaults
       return config
     end
-    puts "The config file #{cfg_path} does not exist." \
+    puts "The config file #{cfg_path} does not exist. " \
-         " Do you want mango to dump the default config there? [Y/n]"
+         "Dumping the default config there."
-    input = gets
-    if input && input.downcase == "n"
-      abort "Aborting..."
-    end
     default = self.allocate
     default.path = path
     default.fill_defaults

src/library/entry.cr

@@ -1,3 +1,5 @@
+require "image_size"
+
 class Entry
   property zip_path : String, book : Title, title : String,
     size : String, pages : Int32, id : String, encoded_path : String,
@@ -77,11 +79,9 @@ class Entry
     url
   end
 
-  def read_page(page_num)
+  private def sorted_archive_entries
-    raise "Unreadble archive. #{@err_msg}" if @err_msg
-    img = nil
     ArchiveFile.open @zip_path do |file|
-      page = file.entries
+      entries = file.entries
         .select { |e|
           SUPPORTED_IMG_TYPES.includes? \
             MIME.from_filename? e.filename
@@ -89,7 +89,15 @@ class Entry
         .sort { |a, b|
           compare_numerically a.filename, b.filename
         }
-        .[page_num - 1]
+      yield file, entries
+    end
+  end
+
+  def read_page(page_num)
+    raise "Unreadble archive. #{@err_msg}" if @err_msg
+    img = nil
+    sorted_archive_entries do |file, entries|
+      page = entries[page_num - 1]
       data = file.read_entry page
       if data
         img = Image.new data, MIME.from_filename(page.filename), page.filename,
@@ -99,6 +107,26 @@ class Entry
     img
   end
 
+  def page_dimensions
+    sizes = [] of Hash(String, Int32)
+    sorted_archive_entries do |file, entries|
+      entries.each_with_index do |e, i|
+        begin
+          data = file.read_entry(e).not_nil!
+          size = ImageSize.get data
+          sizes << {
+            "width"  => size.width,
+            "height" => size.height,
+          }
+        rescue
+          Logger.warn "Failed to read page #{i} of entry #{@id}"
+          sizes << {"width" => 1000_i32, "height" => 1000_i32}
+        end
+      end
+    end
+    sizes
+  end
+
   def next_entry(username)
     entries = @book.sorted_entries username
     idx = entries.index self

src/library/library.cr

@@ -92,7 +92,6 @@ class Library
                   "Attempting to create it"
       Dir.mkdir_p @dir
     end
-    @title_ids.clear
 
     storage = Storage.new auto_close: false
 
@@ -103,6 +102,7 @@ class Library
       .map { |path| Title.new path, "", storage, self }
       .select { |title| !(title.entries.empty? && title.titles.empty?) }
       .sort { |a, b| a.title <=> b.title }
+      .tap { |_| @title_ids.clear }
       .each do |title|
         @title_hash[title.id] = title
         @title_ids << title.id

src/main_fiber.cr

@@ -0,0 +1,34 @@
+# On ARM, connecting to the SQLite DB from a spawned fiber would crash
+#   https://github.com/crystal-lang/crystal-sqlite3/issues/30
+# This is a temporary workaround that forces the relevant code to run in the
+#   main fiber
+
+class MainFiber
+  @@channel = Channel(-> Nil).new
+  @@done = Channel(Bool).new
+  @@main_fiber = Fiber.current
+
+  def self.start_and_block
+    loop do
+      if proc = @@channel.receive
+        begin
+          proc.call
+        ensure
+          @@done.send true
+        end
+      end
+      Fiber.yield
+    end
+  end
+
+  def self.run(&block : -> Nil)
+    if @@main_fiber == Fiber.current
+      block.call
+    else
+      @@channel.send block
+      until @@done.receive
+        Fiber.yield
+      end
+    end
+  end
+end

src/mangadex/api.cr

@@ -1,4 +1,3 @@
-require "http/client"
 require "json"
 require "csv"
 require "../rename"

src/mangadex/downloader.cr

@@ -27,6 +27,7 @@ module MangaDex
 
     def pop : Queue::Job?
       job = nil
+      MainFiber.run do
         DB.open "sqlite3://#{@queue.path}" do |db|
           begin
             db.query_one "select * from queue where id not like '%-%' " \
@@ -37,6 +38,7 @@ module MangaDex
           rescue
           end
         end
+      end
       job
     end
 

src/mango.cr

@@ -1,12 +1,29 @@
 require "./config"
 require "./queue"
 require "./server"
+require "./main_fiber"
 require "./mangadex/*"
 require "option_parser"
 require "clim"
 require "./plugin/*"
 
-MANGO_VERSION = "0.10.0"
+MANGO_VERSION = "0.12.3"
+
+# From http://www.network-science.de/ascii/
+BANNER = %{
+
+              _|      _|
+              _|_|  _|_|    _|_|_|  _|_|_|      _|_|_|    _|_|
+              _|  _|  _|  _|    _|  _|    _|  _|    _|  _|    _|
+              _|      _|  _|    _|  _|    _|  _|    _|  _|    _|
+              _|      _|    _|_|_|  _|    _|    _|_|_|    _|_|
+                                                    _|
+                                                _|_|
+
+
+}
+
+DESCRIPTION = "Mango - Manga Server and Web Reader. Version #{MANGO_VERSION}"
 
 macro common_option
   option "-c PATH", "--config=PATH", type: String,
@@ -22,20 +39,28 @@ end
 
 class CLI < Clim
   main do
-    desc "Mango - Manga Server and Web Reader. Version #{MANGO_VERSION}"
+    desc DESCRIPTION
     usage "mango [sub_command] [options]"
     help short: "-h"
     version "Version #{MANGO_VERSION}", short: "-v"
     common_option
     run do |opts|
+      puts BANNER
+      puts DESCRIPTION
+      puts
+
+      # empty ARGV so it won't be passed to Kemal
+      ARGV.clear
+
       Config.load(opts.config).set_current
       MangaDex::Downloader.default
       Plugin::Downloader.default
 
-      # empty ARGV so it won't be passed to Kemal
+      spawn do
-      ARGV.clear
+        Server.new.start
-      server = Server.new
+      end
-      server.start
+
+      MainFiber.start_and_block
     end
 
     sub "admin" do

src/plugin/downloader.cr

@@ -8,6 +8,7 @@ class Plugin
 
     def pop : Queue::Job?
       job = nil
+      MainFiber.run do
         DB.open "sqlite3://#{@queue.path}" do |db|
           begin
             db.query_one "select * from queue where id like '%-%' " \
@@ -18,6 +19,7 @@ class Plugin
           rescue
           end
         end
+      end
       job
     end
 

src/plugin/plugin.cr

@@ -1,6 +1,5 @@
 require "duktape/runtime"
 require "myhtml"
-require "http"
 require "xml"
 
 class Plugin

src/queue.cr

@@ -119,6 +119,7 @@ class Queue
                   "Attepmting to create it"
       Dir.mkdir_p dir
     end
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         begin
           db.exec "create table if not exists queue " \
@@ -138,11 +139,13 @@ class Queue
         end
       end
     end
+  end
 
   # Push an array of jobs into the queue, and return the number of jobs
   #   inserted. Any job already exists in the queue will be ignored.
   def push(jobs : Array(Job))
     start_count = self.count
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         jobs.each do |job|
           db.exec "insert or ignore into queue values " \
@@ -152,16 +155,19 @@ class Queue
             job.success_count, job.fail_count, job.time.to_unix_ms
         end
       end
+    end
     self.count - start_count
   end
 
   def reset(id : String)
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "update queue set status = 0, status_message = '', " \
                 "pages = 0, success_count = 0, fail_count = 0 " \
                 "where id = (?)", id
       end
     end
+  end
 
   def reset(job : Job)
     self.reset job.id
@@ -169,91 +175,113 @@ class Queue
 
   # Reset all failed tasks (missing pages and error)
   def reset
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "update queue set status = 0, status_message = '', " \
                 "pages = 0, success_count = 0, fail_count = 0 " \
                 "where status = 2 or status = 4"
       end
     end
+  end
 
   def delete(id : String)
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "delete from queue where id = (?)", id
       end
     end
+  end
 
   def delete(job : Job)
     self.delete job.id
   end
 
   def delete_status(status : JobStatus)
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "delete from queue where status = (?)", status.to_i
       end
     end
+  end
 
   def count_status(status : JobStatus)
     num = 0
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         num = db.query_one "select count(*) from queue where " \
                            "status = (?)", status.to_i, as: Int32
       end
+    end
     num
   end
 
   def count
     num = 0
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         num = db.query_one "select count(*) from queue", as: Int32
       end
+    end
     num
   end
 
   def set_status(status : JobStatus, job : Job)
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "update queue set status = (?) where id = (?)",
           status.to_i, job.id
       end
     end
+  end
 
   def get_all
     jobs = [] of Job
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         jobs = db.query_all "select * from queue order by time" do |rs|
           Job.from_query_result rs
         end
       end
+    end
     jobs
   end
 
   def add_success(job : Job)
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "update queue set success_count = success_count + 1 " \
                 "where id = (?)", job.id
       end
     end
+  end
 
   def add_fail(job : Job)
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "update queue set fail_count = fail_count + 1 " \
                 "where id = (?)", job.id
       end
     end
+  end
 
   def set_pages(pages : Int32, job : Job)
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "update queue set pages = (?), success_count = 0, " \
                 "fail_count = 0 where id = (?)", pages, job.id
       end
     end
+  end
 
   def add_message(msg : String, job : Job)
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         db.exec "update queue set status_message = " \
                 "status_message || (?) || (?) where id = (?)",
           "\n", msg, job.id
       end
     end
+  end
 
   def <<(downloader : Downloader)
     @downloaders << downloader

src/routes/api.cr

@@ -332,5 +332,28 @@ class APIRouter < Router
         }.to_json
       end
     end
+
+    get "/api/dimensions/:tid/:eid" do |env|
+      begin
+        tid = env.params.url["tid"]
+        eid = env.params.url["eid"]
+
+        title = @context.library.get_title tid
+        raise "Title ID `#{tid}` not found" if title.nil?
+        entry = title.get_entry eid
+        raise "Entry ID `#{eid}` of `#{title.title}` not found" if entry.nil?
+
+        sizes = entry.page_dimensions
+        send_json env, {
+          "success"    => true,
+          "dimensions" => sizes,
+        }.to_json
+      rescue e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
   end
 end

src/routes/reader.cr

@@ -12,11 +12,7 @@ class ReaderRouter < Router
         next layout "reader-error" if entry.err_msg
 
         # load progress
-        page = entry.load_progress username
+        page = [1, entry.load_progress username].max
-        # we go back 2 * `IMGS_PER_PAGE` pages. the infinite scroll
-        #   library perloads a few pages in advance, and the user
-        #   might not have actually read them
-        page = [page - 2 * IMGS_PER_PAGE, 1].max
 
         # start from page 1 if the user has finished reading the entry
         page = 1 if entry.finished? username
@@ -32,29 +28,17 @@ class ReaderRouter < Router
       begin
         base_url = Config.current.base_url
 
+        username = get_username env
+
         title = (@context.library.get_title env.params.url["title"]).not_nil!
         entry = (title.get_entry env.params.url["entry"]).not_nil!
         page = env.params.url["page"].to_i
         raise "" if page > entry.pages || page <= 0
 
-        # save progress
-        username = get_username env
-        entry.save_progress username, page
-
-        pages = (page...[entry.pages + 1, page + IMGS_PER_PAGE].min)
-        urls = pages.map { |idx|
-          "#{base_url}api/page/#{title.id}/#{entry.id}/#{idx}"
-        }
-        reader_urls = pages.map { |idx|
-          "#{base_url}reader/#{title.id}/#{entry.id}/#{idx}"
-        }
-        next_page = page + IMGS_PER_PAGE
-        next_url = next_entry_url = nil
         exit_url = "#{base_url}book/#{title.id}"
+
+        next_entry_url = nil
         next_entry = entry.next_entry username
-        unless next_page > entry.pages
-          next_url = "#{base_url}reader/#{title.id}/#{entry.id}/#{next_page}"
-        end
         unless next_entry.nil?
           next_entry_url = "#{base_url}reader/#{title.id}/#{next_entry.id}"
         end

src/storage.cr

@@ -32,6 +32,7 @@ class Storage
                   "Attepmting to create it"
       Dir.mkdir_p dir
     end
+    MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         begin
           # We create the `ids` table first. even if the uses has an
@@ -66,6 +67,7 @@ class Storage
         @db = DB.open "sqlite3://#{@path}"
       end
     end
+  end
 
   macro init_admin
     random_pw = random_str
@@ -87,6 +89,8 @@ class Storage
   end
 
   def verify_user(username, password)
+    out_token = nil
+    MainFiber.run do
       get_db do |db|
         begin
           hash, token = db.query_one "select password, token from " \
@@ -94,24 +98,29 @@ class Storage
             username, as: {String, String?}
           unless verify_password hash, password
             Logger.debug "Password does not match the hash"
-          return nil
+            next
           end
           Logger.debug "User #{username} verified"
-        return token if token
+          if token
+            out_token = token
+            next
+          end
           token = random_str
           Logger.debug "Updating token for #{username}"
           db.exec "update users set token = (?) where username = (?)",
             token, username
-        return token
+          out_token = token
         rescue e
           Logger.error "Error when verifying user #{username}: #{e}"
-        return nil
         end
       end
     end
+    out_token
+  end
 
   def verify_token(token)
     username = nil
+    MainFiber.run do
       get_db do |db|
         begin
           username = db.query_one "select username from users where " \
@@ -120,11 +129,13 @@ class Storage
           Logger.debug "Unable to verify token"
         end
       end
+    end
     username
   end
 
   def verify_admin(token)
     is_admin = false
+    MainFiber.run do
       get_db do |db|
         begin
           is_admin = db.query_one "select admin from users where " \
@@ -133,11 +144,13 @@ class Storage
           Logger.debug "Unable to verify user as admin"
         end
       end
+    end
     is_admin
   end
 
   def list_users
     results = Array(Tuple(String, Bool)).new
+    MainFiber.run do
       get_db do |db|
         db.query "select username, admin from users" do |rs|
           rs.each do
@@ -145,6 +158,7 @@ class Storage
           end
         end
       end
+    end
     results
   end
 
@@ -152,17 +166,20 @@ class Storage
     validate_username username
     validate_password password
     admin = (admin ? 1 : 0)
+    MainFiber.run do
       get_db do |db|
         hash = hash_password password
         db.exec "insert into users values (?, ?, ?, ?)",
           username, hash, nil, admin
       end
     end
+  end
 
   def update_user(original_username, username, password, admin)
     admin = (admin ? 1 : 0)
     validate_username username
     validate_password password unless password.empty?
+    MainFiber.run do
       get_db do |db|
         if password.empty?
           db.exec "update users set username = (?), admin = (?) " \
@@ -176,14 +193,18 @@ class Storage
         end
       end
     end
+  end
 
   def delete_user(username)
+    MainFiber.run do
       get_db do |db|
         db.exec "delete from users where username = (?)", username
       end
     end
+  end
 
   def logout(token)
+    MainFiber.run do
       get_db do |db|
         begin
           db.exec "update users set token = (?) where token = (?)", nil, token
@@ -191,13 +212,16 @@ class Storage
         end
       end
     end
+  end
 
   def get_id(path, is_title)
     id = nil
+    MainFiber.run do
       get_db do |db|
         id = db.query_one? "select id from ids where path = (?)", path,
           as: {String}
       end
+    end
     id
   end
 
@@ -206,6 +230,7 @@ class Storage
   end
 
   def bulk_insert_ids
+    MainFiber.run do
       get_db do |db|
         db.transaction do |tx|
           @insert_ids.each do |tp|
@@ -216,12 +241,15 @@ class Storage
       end
       @insert_ids.clear
     end
+  end
 
   def close
+    MainFiber.run do
       unless @db.nil?
         @db.not_nil!.close
       end
     end
+  end
 
   def to_json(json : JSON::Builder)
     json.string self

src/util/proxy.cr

@@ -0,0 +1,42 @@
+require "http_proxy"
+
+# Monkey-patch `HTTP::Client` to make it respect the `*_PROXY`
+#   environment variables
+module HTTP
+  class Client
+    private def self.exec(uri : URI, tls : TLSContext = nil)
+      Logger.debug "Using monkey-patched HTTP::Client"
+      previous_def uri, tls do |client, path|
+        client.set_proxy get_proxy uri
+        yield client, path
+      end
+    end
+  end
+end
+
+private def get_proxy(uri : URI) : HTTP::Proxy::Client?
+  no_proxy = ENV["no_proxy"]? || ENV["NO_PROXY"]?
+  return if no_proxy &&
+            no_proxy.split(",").any? &.== uri.hostname
+
+  case uri.scheme
+  when "http"
+    env_to_proxy "http_proxy"
+  when "https"
+    env_to_proxy "https_proxy"
+  else
+    nil
+  end
+end
+
+private def env_to_proxy(key : String) : HTTP::Proxy::Client?
+  val = ENV[key.downcase]? || ENV[key.upcase]?
+  return if val.nil?
+
+  begin
+    uri = URI.parse val
+    HTTP::Proxy::Client.new uri.hostname.not_nil!, uri.port.not_nil!
+  rescue
+    nil
+  end
+end

src/util/validation.cr

@@ -2,9 +2,9 @@ def validate_username(username)
   if username.size < 3
     raise "Username should contain at least 3 characters"
   end
-  if (username =~ /^[A-Za-z0-9_]+$/).nil?
+  if (username =~ /^[a-zA-Z_][a-zA-Z0-9_\-]*$/).nil?
-    raise "Username should contain alphanumeric characters " \
+    raise "Username can only contain alphanumeric characters, " \
-          "and underscores only"
+          "underscores, and hyphens"
   end
 end
 

src/views/components/head.html.ecr

@@ -7,9 +7,12 @@
   <link rel="stylesheet" href="<%= base_url %>css/uikit.css" />
   <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
   <link rel="icon" href="<%= base_url %>favicon.ico">
+
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=matchMedia%2Cdefault&flags=gated"></script>
   <script defer src="<%= base_url %>js/fontawesome.min.js"></script>
   <script defer src="<%= base_url %>js/solid.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js" defer></script>
+  <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine-ie11.min.js" defer></script>
   <script src="<%= base_url %>js/theme.js"></script>
 </head>

src/views/layout.html.ecr

@@ -67,10 +67,13 @@
     </div>
     <div class="uk-section uk-section-small">
     </div>
-    <div class="uk-section uk-section-small">
+    <div class="uk-section uk-section-small" id="main-section">
       <div class="uk-container uk-container-small">
         <div id="alert"></div>
         <%= content %>
+        <div class="uk-visible@m" id="totop-wrapper" x-data="{}" x-show="$('body').height() > 1.5 * $(window).height()">
+          <a href="#" uk-totop uk-scroll></a>
+        </div>
       </div>
     </div>
     <script>

src/views/opds/title.xml.ecr

@@ -21,6 +21,7 @@
   <% end %>
 
   <% title.entries.each do |e| %>
+    <% next if e.err_msg %>
       <entry>
         <title><%= HTML.escape(e.display_name) %></title>
         <id>urn:mango:<%= e.id %></id>
@@ -34,5 +35,4 @@
         <link type="text/html" rel="alternate" title="Open in Mango" href="<%= base_url %>book/<%= e.book.id %>" />
       </entry>
     <% end %>
-
+  </feed>
-</feed>

src/views/reader.html.ecr

@@ -6,21 +6,39 @@
   <body>
     <div class="uk-section uk-section-default uk-section-small reader-bg">
       <div class="uk-container uk-container-small">
-        <%- urls.each_with_index do |url, i| -%>
+        <div id="alert"></div>
-          <img class="uk-align-center" data-src="<%= url %>" src="<%= base_url %>img/loading.gif" data-width data-height uk-img id="<%= reader_urls[i] %>" onclick="showControl(<%= pages.to_a[i] %>);">
+        <div id="root" x-data="{
-        <%- end -%>
+        loading: true, 
-        <%- if next_url -%>
+        msg: 'Loading the web reader. Please wait...',
-          <a class="next-url" href="<%= next_url %>"></a>
+        alertClass: 'uk-alert-primary',
-        <%- end -%>
+        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" hidden onclick="redirect('<%= next_entry_url %>')">Next Entry</button>
+              <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" hidden onclick="redirect('<%= exit_url %>')">Exit Reader</button>
+              <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= exit_url %>')">Exit Reader</button>
             <%- end -%>
           </div>
-
+        </div>
-    <div id="hidden" hidden></div>
+      </div>
+    </div>
 
     <div id="modal-sections" class="uk-flex-top" uk-modal>
       <div class="uk-modal-dialog uk-margin-auto-vertical">
@@ -49,14 +67,23 @@
         </div>
       </div>
     </div>
+
     <script>
-      const base_url = "<%= base_url %>"
+      const base_url = "<%= base_url %>";
+      const page = <%= page %>;
+      const tid = "<%= title.id %>";
+      const eid = "<%= entry.id %>";
     </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
+    <script src="<%= base_url %>js/alert.js"></script>
     <script src="<%= base_url %>js/uikit.min.js"></script>
     <script src="<%= base_url %>js/uikit-icons.min.js"></script>
     <script src="<%= base_url %>js/reader.js"></script>
   </body>
 
+  <style>
+img[data-src][src*='data:image'] { background: white; }
+#root img { width: 100%; }
+  </style>
+
 </html>