Bump version to v0.12.3

fixes #104

Dockerfile.arm32v7

@@ -5,7 +5,7 @@ RUN apt-get update && apt-get install -y wget git make llvm-8 llvm-8-dev g++ lib
 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/ext/libwebp && git checkout v0.1.1 && make && cd ../stbi && make
+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 .
 

Dockerfile.arm64v8

@@ -5,7 +5,7 @@ RUN apt-get update && apt-get install -y wget git make llvm-8 llvm-8-dev g++ lib
 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/ext/libwebp && git checkout v0.1.1 && make && cd ../stbi && make
+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 .
 

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.12.0
+  Mango - Manga Server and Web Reader. Version 0.12.3
 
   Usage:
 
@@ -142,6 +142,7 @@ Mobile UI:
 ## 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
 

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/js/reader.js

@@ -1,3 +1,7 @@
+let lastSavedPage = page;
+let items = [];
+let longPages = false;
+
 $(() => {
 	getPages();
 
@@ -28,7 +32,7 @@ const getPages = () => {
 				throw new Error(resp.error);
 			const dimensions = data.dimensions;
 
-			const items = dimensions.map((d, i) => {
+			items = dimensions.map((d, i) => {
 				return {
 					id: i + 1,
 					url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
@@ -37,6 +41,13 @@ const getPages = () => {
 				};
 			});
 
+			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);
 
@@ -136,26 +147,49 @@ const setupScroller = () => {
 	});
 };
 
-let lastSavedPage = page;
-
 /**
- * Update the backend reading progress if the current page is more than
+ * Update the backend reading progress if:
- * 		five pages away from the last saved page
+ * 		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) => {
+const saveProgress = (idx, cb) => {
-	if (Math.abs(idx - lastSavedPage) < 5) return;
+	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

@@ -34,7 +34,7 @@ shards:
 
   image_size:
     github: hkalexling/image_size.cr
-    version: 0.1.1
+    version: 0.2.0
 
   kemal:
     github: kemalcr/kemal

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.12.0
+version: 0.12.3
 
 authors:
   - Alex Ling <hkalexling@gmail.com>

src/mango.cr

@@ -7,7 +7,7 @@ require "option_parser"
 require "clim"
 require "./plugin/*"
 
-MANGO_VERSION = "0.12.0"
+MANGO_VERSION = "0.12.3"
 
 # From http://www.network-science.de/ascii/
 BANNER = %{

src/routes/reader.cr

@@ -12,7 +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
 
         # start from page 1 if the user has finished reading the entry
         page = 1 if entry.finished? username

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/reader.html.ecr

@@ -31,7 +31,7 @@
                       />
             </template>
             <%- if next_entry_url -%>
-              <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="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" @click="redirect('<%= exit_url %>')">Exit Reader</button>
             <%- end -%>