Merge pull request #214 from Leeingnyo/feature/http-cache

HTTP cache for thumbnails, pages, dimensions

.github/workflows/build.yml

@@ -12,12 +12,12 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: crystallang/crystal:0.35.1-alpine
+      image: crystallang/crystal:0.36.1-alpine
 
     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 libjpeg-turbo-dev libpng-dev tiff-dev
+      run: apk add --no-cache yarn yaml-static 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 || make static
     - name: Linter

Dockerfile

@@ -1,4 +1,4 @@
-FROM crystallang/crystal:0.35.1-alpine AS builder
+FROM crystallang/crystal:0.36.1-alpine AS builder
 
 WORKDIR /Mango
 

Dockerfile.arm32v7

@@ -2,7 +2,7 @@ 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.35.1 && make deps && cd ..
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.36.1 && 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 ..

Dockerfile.arm64v8

@@ -2,7 +2,7 @@ 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.35.1 && make deps && cd ..
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.36.1 && 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 ..

README.md

@@ -52,7 +52,7 @@ The official docker images are available on [Dockerhub](https://hub.docker.com/r
 ### CLI
 
 ```
-  Mango - Manga Server and Web Reader. Version 0.20.2
+  Mango - Manga Server and Web Reader. Version 0.22.0
 
   Usage:
 
@@ -93,12 +93,13 @@ default_username: ""
 auth_proxy_header_name: ""
 mangadex:
   base_url: https://mangadex.org
-  api_url: https://mangadex.org/api/v2
+  api_url: https://api.mangadex.org/v2
   download_wait_seconds: 5
   download_retries: 4
   download_queue_db_path: ~/mango/queue.db
   chapter_rename_rule: '[Vol.{volume} ][Ch.{chapter} ]{title|id}'
   manga_rename_rule: '{title}'
+  subscription_update_interval_hours: 24
 ```
 
 - `scan_interval_minutes`, `thumbnail_generation_interval_hours` and `db_optimization_interval_hours` can be any non-negative integer. Setting them to `0` disables the periodic tasks

migration/md_account.11.cr

@@ -0,0 +1,20 @@
+class CreateMangaDexAccount < MG::Base
+  def up : String
+    <<-SQL
+    CREATE TABLE md_account (
+      username TEXT NOT NULL PRIMARY KEY,
+      token TEXT NOT NULL,
+      expire INTEGER NOT NULL,
+      FOREIGN KEY (username) REFERENCES users (username)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE md_account;
+    SQL
+  end
+end

migration/subscription.12.cr

@@ -0,0 +1,31 @@
+class CreateSubscription < MG::Base
+  def up : String
+    # We allow multiple subscriptions for the same manga.
+    # This can be useful for example when you want to download from multiple
+    #   groups.
+    <<-SQL
+    CREATE TABLE subscription (
+      id INTEGER PRIMARY KEY,
+      manga_id INTEGER NOT NULL,
+      language TEXT,
+      group_id INTEGER,
+      min_volume INTEGER,
+      max_volume INTEGER,
+      min_chapter INTEGER,
+      max_chapter INTEGER,
+      last_checked INTEGER NOT NULL,
+      created_at INTEGER NOT NULL,
+      username TEXT NOT NULL,
+      FOREIGN KEY (username) REFERENCES users (username)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE subscription;
+    SQL
+  end
+end

public/css/mango.less

@@ -34,9 +34,11 @@
 	.uk-card-body {
 		padding: 20px;
 		.uk-card-title {
-			max-height: 3em;
 			font-size: 1rem;
 		}
+		.uk-card-title:not(.free-height) {
+			max-height: 3em;
+		}
 	}
 }
 

public/css/uikit.less

@@ -43,3 +43,22 @@
 @internal-list-bullet-image:                     "../img/list-bullet.svg";
 @internal-accordion-open-image:                  "../img/accordion-open.svg";
 @internal-accordion-close-image:                 "../img/accordion-close.svg";
+
+.hook-card-default() {
+	.uk-light & {
+		background: @card-secondary-background;
+		color: @card-secondary-color;
+	}
+}
+
+.hook-card-default-title() {
+	.uk-light & {
+		color: @card-secondary-title-color;
+	}
+}
+
+.hook-card-default-hover() {
+	.uk-light & {
+		background-color: @card-secondary-hover-background;
+	}
+}

public/js/common.js

@@ -117,14 +117,10 @@ const setTheme = (theme) => {
 	if (theme === 'dark') {
 		$('html').css('background', 'rgb(20, 20, 20)');
 		$('body').addClass('uk-light');
-		$('.uk-card').addClass('uk-card-secondary');
-		$('.uk-card').removeClass('uk-card-default');
 		$('.ui-widget-content').addClass('dark');
 	} else {
 		$('html').css('background', '');
 		$('body').removeClass('uk-light');
-		$('.uk-card').removeClass('uk-card-secondary');
-		$('.uk-card').addClass('uk-card-default');
 		$('.ui-widget-content').removeClass('dark');
 	}
 };

public/js/download.js

@@ -3,9 +3,12 @@ const downloadComponent = () => {
 		chaptersLimit: 1000,
 		loading: false,
 		addingToDownload: false,
+		searchAvailable: false,
 		searchInput: '',
 		data: {},
 		chapters: [],
+		mangaAry: undefined, // undefined: not searching; []: searched but no result
+		candidateManga: {},
 		langChoice: 'All',
 		groupChoice: 'All',
 		chapterRange: '',
@@ -48,7 +51,21 @@ const downloadComponent = () => {
 				childList: true,
 				subtree: true
 			});
+
+			$.getJSON(`${base_url}api/admin/mangadex/expires`)
+				.done((data) => {
+					if (data.error) {
+						alert('danger', 'Failed to check MangaDex integration status. Error: ' + data.error);
+						return;
+					}
+					if (data.expires && data.expires > Math.floor(Date.now() / 1000))
+						this.searchAvailable = true;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check MangaDex integration status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
 		},
+
 		filtersUpdated() {
 			if (!this.data.chapters)
 				this.chapters = [];
@@ -90,10 +107,11 @@ const downloadComponent = () => {
 			console.log('filtered chapters:', _chapters);
 			this.chapters = _chapters;
 		},
+
 		search() {
 			if (this.loading || this.searchInput === '') return;
-			this.loading = true;
 			this.data = {};
+			this.mangaAry = undefined;
 
 			var int_id = -1;
 			try {
@@ -103,29 +121,54 @@ const downloadComponent = () => {
 			} catch (e) {
 				int_id = parseInt(this.searchInput);
 			}
-			if (int_id <= 0 || isNaN(int_id)) {
-				alert('danger', 'Please make sure you are using a valid manga ID or manga URL from Mangadex.');
-				this.loading = false;
-				return;
+
+			if (!isNaN(int_id) && int_id > 0) {
+				// The input is a positive integer. We treat it as an ID.
+				this.loading = true;
+				$.getJSON(`${base_url}api/admin/mangadex/manga/${int_id}`)
+					.done((data) => {
+						if (data.error) {
+							alert('danger', 'Failed to get manga info. Error: ' + data.error);
+							return;
+						}
+
+						this.data = data;
+						this.chapters = data.chapters;
+						this.mangaAry = undefined;
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to get manga info. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					})
+					.always(() => {
+						this.loading = false;
+					});
+			} else {
+				if (!this.searchAvailable) {
+					alert('danger', 'Please make sure you are using a valid manga ID or manga URL from Mangadex. If you are trying to search MangaDex with a search term, please log in to MangaDex first by going to "Admin -> Connect to MangaDex".');
+					return;
+				}
+
+				// Search as a search term
+				this.loading = true;
+				$.getJSON(`${base_url}api/admin/mangadex/search?${$.param({
+					query: this.searchInput
+				})}`)
+					.done((data) => {
+						if (data.error) {
+							alert('danger', `Failed to search MangaDex. Error: ${data.error}`);
+							return;
+						}
+
+						this.mangaAry = data.manga;
+						this.data = {};
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to search MangaDex. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					})
+					.always(() => {
+						this.loading = false;
+					});
 			}
-
-			$.getJSON(`${base_url}api/admin/mangadex/manga/${int_id}`)
-				.done((data) => {
-					if (data.error) {
-						alert('danger', 'Failed to get manga info. Error: ' + data.error);
-						return;
-					}
-
-					this.data = data;
-					this.chapters = data.chapters;
-				})
-				.fail((jqXHR, status) => {
-					alert('danger', `Failed to get manga info. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-				})
-				.always(() => {
-					this.loading = false;
-				});
-
 		},
 
 		parseRange(str) {
@@ -217,9 +260,7 @@ const downloadComponent = () => {
 						}
 						const successCount = parseInt(data.success);
 						const failCount = parseInt(data.fail);
-						UIkit.modal.confirm(`${successCount} of ${successCount + failCount} chapters added to the download queue. Proceed to the download manager?`).then(() => {
-							window.location.href = base_url + 'admin/downloads';
-						});
+						alert('success', `${successCount} of ${successCount + failCount} chapters added to the download queue. You can view and manage your download queue on the <a href="${base_url}admin/downloads">download manager page</a>.`);
 					})
 					.fail((jqXHR, status) => {
 						alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
@@ -228,6 +269,111 @@ const downloadComponent = () => {
 						this.addingToDownload = false;
 					});
 			});
+		},
+
+		chooseManga(manga) {
+			this.candidateManga = manga;
+			UIkit.modal($('#modal').get(0)).show();
+		},
+
+		confirmManga(id) {
+			UIkit.modal($('#modal').get(0)).hide();
+			this.searchInput = id;
+			this.search();
+		},
+
+		subscribe(langConfirmed = false, groupConfirmed = false) {
+			const filters = {
+				manga: this.data.id,
+				language: this.langChoice === 'All' ? null : this.langChoice,
+				group: this.groupChoice === 'All' ? null : this.groupChoice,
+				volume: this.volumeRange === '' ? null : this.volumeRange,
+				chapter: this.chapterRange === '' ? null : this.chapterRange
+			};
+
+			// Get group ID
+			if (filters.group) {
+				this.data.chapters.forEach(chp => {
+					const gid = chp.groups[filters.group];
+					if (gid) {
+						filters.groupId = gid;
+						return;
+					}
+				});
+			}
+
+			// Parse range values
+			if (filters.volume) {
+				[filters.volumeMin, filters.volumeMax] = this.parseRange(filters.volume);
+			}
+			if (filters.chapter) {
+				[filters.chapterMin, filters.chapterMax] = this.parseRange(filters.chapter);
+			}
+
+			if (!filters.language && !langConfirmed) {
+				UIkit.modal.confirm('You didn\'t specify a language in the filtering rules. This might cause Mango to download chapters that are not in your preferred language. Are you sure you want to continue?', {
+					labels: {
+						ok: 'Yes',
+						cancel: 'Cancel'
+					}
+				}).then(() => {
+					this.subscribe(true, groupConfirmed);
+				});
+				return;
+			}
+
+			if (!filters.group && !groupConfirmed) {
+				UIkit.modal.confirm('You didn\'t specify a group in the filtering rules. This might cause Mango to download multiple versions of the same chapter. Are you sure you want to continue?', {
+					labels: {
+						ok: 'Yes',
+						cancel: 'Cancel'
+					}
+				}).then(() => {
+					this.subscribe(langConfirmed, true);
+				});
+				return;
+			}
+
+			const mangaURL = `${mangadex_base_url}/manga/${filters.manga}`;
+
+			console.log(filters);
+			UIkit.modal.confirm(`All <strong>FUTURE</strong> chapters matching the following filters will be downloaded:<br>
+			<ul>
+			<li>Manga ID: ${filters.manga}</li>
+			<li>Language: ${filters.language || 'all'}</li>
+			<li>Group: ${filters.group || 'all'}</li>
+			<li>Volume: ${filters.volume || 'all'}</li>
+			<li>Chapter: ${filters.chapter || 'all'}</li>
+			</ul>
+
+			<strong>IMPORTANT:</strong> Please make sure you are following the manga on MangaDex, otherwise Mango won't be able to receive any updates. To follow it, visit <a href="${mangaURL}">${mangaURL}</a> and click "Follow".
+				`, {
+				labels: {
+					ok: 'Confirm',
+					cancel: 'Cancel'
+				}
+			}).then(() => {
+				$.ajax({
+						type: 'POST',
+						url: `${base_url}api/admin/mangadex/subscriptions`,
+						data: JSON.stringify({
+							subscription: filters
+						}),
+						contentType: "application/json",
+						dataType: 'json'
+					})
+					.done(data => {
+						console.log(data);
+						if (data.error) {
+							alert('danger', `Failed to subscribe. Error: ${data.error}`);
+							return;
+						}
+						alert('success', `You've successfully subscribed to this manga! You can view and manage your subscriptions on the <a href="${base_url}download/subscription">subscription manager page</a>.`);
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to subscribe. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					});
+			});
 		}
 	};
 };

public/js/mangadex.js

@@ -0,0 +1,61 @@
+const component = () => {
+	return {
+		username: '',
+		password: '',
+		expires: undefined,
+		loading: true,
+		loggingIn: false,
+
+		init() {
+			this.loading = true;
+			$.ajax({
+					type: 'GET',
+					url: `${base_url}api/admin/mangadex/expires`,
+					contentType: "application/json",
+				})
+				.done(data => {
+					console.log(data);
+					if (data.error) {
+						alert('danger', `Failed to retrieve MangaDex token status. Error: ${data.error}`);
+						return;
+					}
+					this.expires = data.expires;
+					this.loading = false;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to retrieve MangaDex token status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+		login() {
+			if (!(this.username && this.password)) return;
+			this.loggingIn = true;
+			$.ajax({
+					type: 'POST',
+					url: `${base_url}api/admin/mangadex/login`,
+					contentType: "application/json",
+					dataType: 'json',
+					data: JSON.stringify({
+						username: this.username,
+						password: this.password
+					})
+				})
+				.done(data => {
+					console.log(data);
+					if (data.error) {
+						alert('danger', `Failed to log in. Error: ${data.error}`);
+						return;
+					}
+					this.expires = data.expires;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to log in. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+				.always(() => {
+					this.loggingIn = false;
+				});
+		},
+		get expired() {
+			return this.expires && moment().diff(moment.unix(this.expires)) > 0;
+		}
+	};
+};

public/js/plugin-download.js

@@ -126,9 +126,7 @@ const download = () => {
 				}
 				const successCount = parseInt(data.success);
 				const failCount = parseInt(data.fail);
-				UIkit.modal.confirm(`${successCount} of ${successCount + failCount} chapters added to the download queue. Proceed to the download manager?`).then(() => {
-					window.location.href = base_url + 'admin/downloads';
-				});
+				alert('success', `${successCount} of ${successCount + failCount} chapters added to the download queue. You can view and manage your download queue on the <a href="${base_url}admin/downloads">download manager page</a>.`);
 			})
 			.fail((jqXHR, status) => {
 				alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);

public/js/reader.js

@@ -9,6 +9,8 @@ const readerComponent = () => {
 		flipAnimation: null,
 		longPages: false,
 		lastSavedPage: page,
+		selectedIndex: 0, // 0: not selected; 1: the first page
+		margin: 30,
 
 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -26,7 +28,6 @@ const readerComponent = () => {
 							url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
 							width: d.width,
 							height: d.height,
-							style: `margin-top: ${data.margin}px; margin-bottom: ${data.margin}px;`
 						};
 					});
 
@@ -46,6 +47,11 @@ const readerComponent = () => {
 					const mode = this.mode;
 					this.updateMode(this.mode, page, nextTick);
 					$('#mode-select').val(mode);
+
+					const savedMargin = localStorage.getItem('margin');
+					if (savedMargin) {
+						this.margin = savedMargin;
+					}
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -221,10 +227,7 @@ const readerComponent = () => {
 		 */
 		showControl(event) {
 			const idx = event.currentTarget.id;
-			const pageCount = this.items.length;
-			const progressText = `Progress: ${idx}/${pageCount} (${(idx/pageCount * 100).toFixed(1)}%)`;
-			$('#progress-label').text(progressText);
-			$('#page-select').val(idx);
+			this.selectedIndex = idx;
 			UIkit.modal($('#modal-sections')).show();
 		},
 		/**
@@ -263,19 +266,27 @@ const readerComponent = () => {
 			});
 		},
 		/**
-		 * Exits the reader, and optionally sets the reading progress tp 100%
+		 * Exits the reader, and sets the reading progress tp 100%
 		 *
 		 * @param {string} exitUrl - The Exit URL
-		 * @param {boolean} [markCompleted] - Whether we should mark the
-		 *		reading progress to 100%
 		 */
-		exitReader(exitUrl, markCompleted = false) {
-			if (!markCompleted) {
-				return this.redirect(exitUrl);
-			}
+		exitReader(exitUrl) {
 			this.saveProgress(this.items.length, () => {
 				this.redirect(exitUrl);
 			});
+		},
+
+		/**
+		 * Handles the `change` event for the entry selector
+		 */
+		entryChanged() {
+			const id = $('#entry-select').val();
+			this.redirect(`${base_url}reader/${tid}/${id}`);
+		},
+
+		marginChanged() {
+			localStorage.setItem('margin', this.margin);
+			this.toPage(this.selectedIndex);
 		}
 	};
 }

public/js/subscription.js

@@ -0,0 +1,82 @@
+const component = () => {
+	return {
+		available: undefined,
+		subscriptions: [],
+
+		init() {
+			$.getJSON(`${base_url}api/admin/mangadex/expires`)
+				.done((data) => {
+					if (data.error) {
+						alert('danger', 'Failed to check MangaDex integration status. Error: ' + data.error);
+						return;
+					}
+					this.available = Boolean(data.expires && data.expires > Math.floor(Date.now() / 1000));
+
+					if (this.available) this.getSubscriptions();
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check MangaDex integration status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+		},
+
+		getSubscriptions() {
+			$.getJSON(`${base_url}api/admin/mangadex/subscriptions`)
+				.done(data => {
+					if (data.error) {
+						alert('danger', 'Failed to get subscriptions. Error: ' + data.error);
+						return;
+					}
+					this.subscriptions = data.subscriptions;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to get subscriptions. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+		},
+
+		rm(event) {
+			const id = event.currentTarget.parentNode.getAttribute('data-id');
+			$.ajax({
+					type: 'DELETE',
+					url: `${base_url}api/admin/mangadex/subscriptions/${id}`,
+					contentType: 'application/json'
+				})
+				.done(data => {
+					if (data.error) {
+						alert('danger', `Failed to delete subscription. Error: ${data.error}`);
+					}
+					this.getSubscriptions();
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to delete subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+
+		check(event) {
+			const id = event.currentTarget.parentNode.getAttribute('data-id');
+			$.ajax({
+					type: 'POST',
+					url: `${base_url}api/admin/mangadex/subscriptions/check/${id}`,
+					contentType: 'application/json'
+				})
+				.done(data => {
+					if (data.error) {
+						alert('danger', `Failed to check subscription. Error: ${data.error}`);
+						return;
+					}
+					alert('success', 'Mango is now checking the subscription for updates. This might take a while, but you can safely leave the page.');
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+
+		formatRange(min, max) {
+			if (!isNaN(min) && isNaN(max)) return `≥ ${min}`;
+			if (isNaN(min) && !isNaN(max)) return `≤ ${max}`;
+			if (isNaN(min) && isNaN(max)) return 'All';
+
+			if (min === max) return `= ${min}`;
+			return `${min} - ${max}`;
+		}
+	};
+};

shard.lock

@@ -2,7 +2,7 @@ version: 2.0
 shards:
   ameba:
     git: https://github.com/crystal-ameba/ameba.git
-    version: 0.12.1
+    version: 0.14.0
 
   archive:
     git: https://github.com/hkalexling/archive.cr.git
@@ -30,7 +30,7 @@ shards:
 
   http_proxy:
     git: https://github.com/mamantoha/http_proxy.git
-    version: 0.7.1
+    version: 0.8.0
 
   image_size:
     git: https://github.com/hkalexling/image_size.cr.git
@@ -42,7 +42,7 @@ shards:
 
   kemal-session:
     git: https://github.com/kemalcr/kemal-session.git
-    version: 0.12.1
+    version: 0.13.0
 
   kilt:
     git: https://github.com/jeromegn/kilt.git
@@ -50,11 +50,11 @@ shards:
 
   koa:
     git: https://github.com/hkalexling/koa.git
-    version: 0.5.0
+    version: 0.7.0
 
   mangadex:
     git: https://github.com/hkalexling/mangadex.git
-    version: 0.5.0+git.commit.323110c56c2d5134ce4162b27a9b24ec34137fcb
+    version: 0.11.0+git.commit.f5b0d64fbb138879fb9228b6e9ff34ec97c3e824
 
   mg:
     git: https://github.com/hkalexling/mg.git

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.20.2
+version: 0.22.0
 
 authors:
   - Alex Ling <hkalexling@gmail.com>
@@ -8,7 +8,7 @@ targets:
   mango:
     main: src/mango.cr
 
-crystal: 0.35.1
+crystal: 0.36.1
 
 license: MIT
 

spec/storage_spec.cr

@@ -8,9 +8,7 @@ describe Storage do
   end
 
   it "deletes user" do
-    with_storage do |storage|
-      storage.delete_user "admin"
-    end
+    with_storage &.delete_user "admin"
   end
 
   it "creates new user" do

spec/util_spec.cr

@@ -21,7 +21,7 @@ describe "compare_numerically" do
   it "sorts like the stack exchange post" do
     ary = ["2", "12", "200000", "1000000", "a", "a12", "b2", "text2",
            "text2a", "text2a2", "text2a12", "text2ab", "text12", "text12a"]
-    ary.reverse.sort { |a, b|
+    ary.reverse.sort! { |a, b|
       compare_numerically a, b
     }.should eq ary
   end
@@ -29,7 +29,7 @@ describe "compare_numerically" do
   # https://github.com/hkalexling/Mango/issues/22
   it "handles numbers larger than Int32" do
     ary = ["14410155591588.jpg", "21410155591588.png", "104410155591588.jpg"]
-    ary.reverse.sort { |a, b|
+    ary.reverse.sort! { |a, b|
       compare_numerically a, b
     }.should eq ary
   end
@@ -56,7 +56,7 @@ describe "chapter_sort" do
   it "sorts correctly" do
     ary = ["Vol.1 Ch.01", "Vol.1 Ch.02", "Vol.2 Ch. 2.5", "Ch. 3", "Ch.04"]
     sorter = ChapterSorter.new ary
-    ary.reverse.sort do |a, b|
+    ary.reverse.sort! do |a, b|
       sorter.compare a, b
     end.should eq ary
   end

src/config.cr

@@ -20,7 +20,6 @@ class Config
   property plugin_path : String = File.expand_path "~/mango/plugins",
     home: true
   property download_timeout_seconds : Int32 = 30
-  property page_margin : Int32 = 30
   property disable_login = false
   property default_username = ""
   property auth_proxy_header_name = ""
@@ -29,13 +28,15 @@ class Config
   @[YAML::Field(ignore: true)]
   @mangadex_defaults = {
     "base_url"               => "https://mangadex.org",
-    "api_url"                => "https://mangadex.org/api/v2",
+    "api_url"                => "https://api.mangadex.org/v2",
     "download_wait_seconds"  => 5,
     "download_retries"       => 4,
     "download_queue_db_path" => File.expand_path("~/mango/queue.db",
       home: true),
-    "chapter_rename_rule" => "[Vol.{volume} ][Ch.{chapter} ]{title|id}",
-    "manga_rename_rule"   => "{title}",
+    "chapter_rename_rule" => "[Vol.{volume} ]" \
+                             "[Ch.{chapter} ]{title|id}",
+    "manga_rename_rule"                  => "{title}",
+    "subscription_update_interval_hours" => 24,
   }
 
   @@singlet : Config?
@@ -93,15 +94,23 @@ class Config
       raise "Login is disabled, but default username is not set. " \
             "Please set a default username"
     end
+
+    # `Logger.default` is not available yet
+    Log.setup :debug
     unless mangadex["api_url"] =~ /\/v2/
-      # `Logger.default` is not available yet
-      Log.setup :debug
       Log.warn { "It looks like you are using the deprecated MangaDex API " \
-                 "v1 in your config file. Please update it to either " \
-                 "https://mangadex.org/api/v2 or " \
+                 "v1 in your config file. Please update it to " \
                  "https://api.mangadex.org/v2 to suppress this warning." }
-      mangadex["api_url"] = "https://mangadex.org/api/v2"
+      mangadex["api_url"] = "https://api.mangadex.org/v2"
     end
+    if mangadex["api_url"] =~ /\/api\/v2/
+      Log.warn { "It looks like you are using the outdated MangaDex API " \
+                 "url (mangadex.org/api/v2) in your config file. Please " \
+                 "update it to https://api.mangadex.org/v2 to suppress this " \
+                 "warning." }
+      mangadex["api_url"] = "https://api.mangadex.org/v2"
+    end
+
     mangadex["api_url"] = mangadex["api_url"].to_s.rstrip "/"
     mangadex["base_url"] = mangadex["base_url"].to_s.rstrip "/"
   end

src/library/entry.cr

@@ -46,6 +46,18 @@ class Entry
     file.close
   end
 
+  def to_slim_json : String
+    JSON.build do |json|
+      json.object do
+        {% for str in ["zip_path", "title", "size", "id"] %}
+        json.field {{str}}, @{{str.id}}
+      {% end %}
+        json.field "title_id", @book.id
+        json.field "pages" { json.number @pages }
+      end
+    end
+  end
+
   def to_json(json : JSON::Builder)
     json.object do
       {% for str in ["zip_path", "title", "size", "id"] %}
@@ -86,7 +98,7 @@ class Entry
           SUPPORTED_IMG_TYPES.includes? \
             MIME.from_filename? e.filename
         }
-        .sort { |a, b|
+        .sort! { |a, b|
           compare_numerically a.filename, b.filename
         }
       yield file, entries
@@ -134,10 +146,11 @@ class Entry
     entries[idx + 1]
   end
 
-  def previous_entry
-    idx = @book.entries.index self
+  def previous_entry(username)
+    entries = @book.sorted_entries username
+    idx = entries.index self
     return nil if idx.nil? || idx == 0
-    @book.entries[idx - 1]
+    entries[idx - 1]
   end
 
   def date_added

src/library/library.cr

@@ -42,6 +42,25 @@ class Library
         end
       end
     end
+
+    subscription_interval = Config.current
+      .mangadex["subscription_update_interval_hours"].as Int32
+    unless subscription_interval < 1
+      spawn do
+        loop do
+          subscriptions = Storage.default.subscriptions
+          Logger.info "Checking MangaDex for updates on " \
+                      "#{subscriptions.size} subscriptions"
+          added_count = 0
+          subscriptions.each do |sub|
+            added_count += sub.check_for_updates
+          end
+          Logger.info "Subscription update completed. Added #{added_count} " \
+                      "chapters to the download queue"
+          sleep subscription_interval.hours
+        end
+      end
+    end
   end
 
   def titles
@@ -63,7 +82,22 @@ class Library
   end
 
   def deep_titles
-    titles + titles.map { |t| t.deep_titles }.flatten
+    titles + titles.flat_map &.deep_titles
+  end
+
+  def to_slim_json : String
+    JSON.build do |json|
+      json.object do
+        json.field "dir", @dir
+        json.field "titles" do
+          json.array do
+            self.titles.each do |title|
+              json.raw title.to_slim_json
+            end
+          end
+        end
+      end
+    end
   end
 
   def to_json(json : JSON::Builder)
@@ -98,7 +132,7 @@ class Library
       .select { |path| File.directory? path }
       .map { |path| Title.new path, "" }
       .select { |title| !(title.entries.empty? && title.titles.empty?) }
-      .sort { |a, b| a.title <=> b.title }
+      .sort! { |a, b| a.title <=> b.title }
       .tap { |_| @title_ids.clear }
       .each do |title|
         @title_hash[title.id] = title
@@ -114,14 +148,14 @@ class Library
 
   def get_continue_reading_entries(username)
     cr_entries = deep_titles
-      .map { |t| t.get_last_read_entry username }
+      .map(&.get_last_read_entry username)
       # Select elements with type `Entry` from the array and ignore all `Nil`s
       .select(Entry)[0...ENTRIES_IN_HOME_SECTIONS]
       .map { |e|
         # Get the last read time of the entry. If it hasn't been started, get
         #   the last read time of the previous entry
         last_read = e.load_last_read username
-        pe = e.previous_entry
+        pe = e.previous_entry username
         if last_read.nil? && pe
           last_read = pe.load_last_read username
         end
@@ -150,14 +184,14 @@ class Library
     recently_added = [] of RA
     last_date_added = nil
 
-    titles.map { |t| t.deep_entries_with_date_added }.flatten
-      .select { |e| e[:date_added] > 1.month.ago }
-      .sort { |a, b| b[:date_added] <=> a[:date_added] }
+    titles.flat_map(&.deep_entries_with_date_added)
+      .select(&.[:date_added].> 1.month.ago)
+      .sort! { |a, b| b[:date_added] <=> a[:date_added] }
       .each do |e|
         break if recently_added.size > 12
         last = recently_added.last?
         if last && e[:entry].book.id == last[:entry].book.id &&
-           (e[:date_added] - last_date_added.not_nil!).duration < 1.day
+           (e[:date_added] - last_date_added.not_nil!).abs < 1.day
           # A NamedTuple is immutable, so we have to cast it to a Hash first
           last_hash = last.to_h
           count = last_hash[:grouped_count].as(Int32)
@@ -188,9 +222,9 @@ class Library
     # If we use `deep_titles`, the start reading section might include `Vol. 2`
     #   when the user hasn't started `Vol. 1` yet
     titles
-      .select { |t| t.load_percentage(username) == 0 }
+      .select(&.load_percentage(username).== 0)
       .sample(ENTRIES_IN_HOME_SECTIONS)
-      .shuffle
+      .shuffle!
   end
 
   def thumbnail_generation_progress
@@ -205,7 +239,7 @@ class Library
     end
 
     Logger.info "Starting thumbnail generation"
-    entries = deep_titles.map(&.deep_entries).flatten.reject &.err_msg
+    entries = deep_titles.flat_map(&.deep_entries).reject &.err_msg
     @entries_count = entries.size
     @thumbnails_count = 0
 

src/library/title.cr

@@ -44,19 +44,54 @@ class Title
 
     mtimes = [@mtime]
     mtimes += @title_ids.map { |e| Library.default.title_hash[e].mtime }
-    mtimes += @entries.map { |e| e.mtime }
+    mtimes += @entries.map &.mtime
     @mtime = mtimes.max
 
     @title_ids.sort! do |a, b|
       compare_numerically Library.default.title_hash[a].title,
         Library.default.title_hash[b].title
     end
-    sorter = ChapterSorter.new @entries.map { |e| e.title }
+    sorter = ChapterSorter.new @entries.map &.title
     @entries.sort! do |a, b|
       sorter.compare a.title, b.title
     end
   end
 
+  def to_slim_json : String
+    JSON.build do |json|
+      json.object do
+        {% for str in ["dir", "title", "id"] %}
+        json.field {{str}}, @{{str.id}}
+      {% end %}
+        json.field "signature" { json.number @signature }
+        json.field "titles" do
+          json.array do
+            self.titles.each do |title|
+              json.raw title.to_slim_json
+            end
+          end
+        end
+        json.field "entries" do
+          json.array do
+            @entries.each do |entry|
+              json.raw entry.to_slim_json
+            end
+          end
+        end
+        json.field "parents" do
+          json.array do
+            self.parents.each do |title|
+              json.object do
+                json.field "title", title.title
+                json.field "id", title.id
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+
   def to_json(json : JSON::Builder)
     json.object do
       {% for str in ["dir", "title", "id"] %}
@@ -92,12 +127,12 @@ class Title
   # Get all entries, including entries in nested titles
   def deep_entries
     return @entries if title_ids.empty?
-    @entries + titles.map { |t| t.deep_entries }.flatten
+    @entries + titles.flat_map &.deep_entries
   end
 
   def deep_titles
     return [] of Title if titles.empty?
-    titles + titles.map { |t| t.deep_titles }.flatten
+    titles + titles.flat_map &.deep_titles
   end
 
   def parents
@@ -138,7 +173,7 @@ class Title
   end
 
   def get_entry(eid)
-    @entries.find { |e| e.id == eid }
+    @entries.find &.id.== eid
   end
 
   def display_name
@@ -217,29 +252,23 @@ class Title
     @entries.each do |e|
       e.save_progress username, e.pages
     end
-    titles.each do |t|
-      t.read_all username
-    end
+    titles.each &.read_all username
   end
 
   # Set the reading progress of all entries and nested libraries to 0%
   def unread_all(username)
-    @entries.each do |e|
-      e.save_progress username, 0
-    end
-    titles.each do |t|
-      t.unread_all username
-    end
+    @entries.each &.save_progress(username, 0)
+    titles.each &.unread_all username
   end
 
   def deep_read_page_count(username) : Int32
     load_progress_for_all_entries(username).sum +
-      titles.map { |t| t.deep_read_page_count username }.flatten.sum
+      titles.flat_map(&.deep_read_page_count username).sum
   end
 
   def deep_total_page_count : Int32
-    entries.map { |e| e.pages }.sum +
-      titles.map { |t| t.deep_total_page_count }.flatten.sum
+    entries.sum(&.pages) +
+      titles.flat_map(&.deep_total_page_count).sum
   end
 
   def load_percentage(username)
@@ -311,13 +340,13 @@ class Title
       ary = @entries.zip(percentage_ary)
         .sort { |a_tp, b_tp| (a_tp[1] <=> b_tp[1]).or \
           compare_numerically a_tp[0].title, b_tp[0].title }
-        .map { |tp| tp[0] }
+        .map &.[0]
     else
       unless opt.method.auto?
         Logger.warn "Unknown sorting method #{opt.not_nil!.method}. Using " \
                     "Auto instead"
       end
-      sorter = ChapterSorter.new @entries.map { |e| e.title }
+      sorter = ChapterSorter.new @entries.map &.title
       ary = @entries.sort do |a, b|
         sorter.compare(a.title, b.title).or \
           compare_numerically a.title, b.title
@@ -383,13 +412,13 @@ class Title
       {entry: e, date_added: da_ary[i]}
     end
     return zip if title_ids.empty?
-    zip + titles.map { |t| t.deep_entries_with_date_added }.flatten
+    zip + titles.flat_map &.deep_entries_with_date_added
   end
 
   def bulk_progress(action, ids : Array(String), username)
     selected_entries = ids
       .map { |id|
-        @entries.find { |e| e.id == id }
+        @entries.find &.id.==(id)
       }
       .select(Entry)
 

src/mangadex/downloader.cr

@@ -49,6 +49,9 @@ module MangaDex
       @queue.set_status Queue::JobStatus::Downloading, job
       begin
         chapter = @client.chapter job.id
+        # We must put the `.pages` call in a rescue block to handle external
+        #   chapters.
+        pages = chapter.pages
       rescue e
         Logger.error e
         @queue.set_status Queue::JobStatus::Error, job
@@ -58,7 +61,7 @@ module MangaDex
         @downloading = false
         return
       end
-      @queue.set_pages chapter.pages.size, job
+      @queue.set_pages pages.size, job
       lib_dir = @library_path
       rename_rule = Rename::Rule.new \
         Config.current.mangadex["manga_rename_rule"].to_s
@@ -69,13 +72,13 @@ module MangaDex
       zip_path = File.join manga_dir, "#{job.title}.cbz.part"
 
       # Find the number of digits needed to store the number of pages
-      len = Math.log10(chapter.pages.size).to_i + 1
+      len = Math.log10(pages.size).to_i + 1
 
       writer = Compress::Zip::Writer.new zip_path
       # Create a buffered channel. It works as an FIFO queue
-      channel = Channel(PageJob).new chapter.pages.size
+      channel = Channel(PageJob).new pages.size
       spawn do
-        chapter.pages.each_with_index do |url, i|
+        pages.each_with_index do |url, i|
           fn = Path.new(URI.parse(url).path).basename
           ext = File.extname fn
           fn = "#{i.to_s.rjust len, '0'}#{ext}"
@@ -99,7 +102,7 @@ module MangaDex
 
       spawn do
         page_jobs = [] of PageJob
-        chapter.pages.size.times do
+        pages.size.times do
           page_job = channel.receive
 
           break unless @queue.exists? job

src/mangadex/ext.cr

@@ -35,7 +35,7 @@ module MangaDex
   struct Chapter
     def rename(rule : Rename::Rule)
       hash = properties_to_hash %w(id title volume chapter lang_code language)
-      hash["groups"] = groups.map(&.name).join ","
+      hash["groups"] = groups.join(",", &.name)
       rule.render hash
     end
 
@@ -56,5 +56,39 @@ module MangaDex
       hash["full_title"] = JSON::Any.new full_title
       hash.to_json
     end
+
+    # We don't need to rename the manga title here. It will be renamed in
+    #   src/mangadex/downloader.cr
+    def to_job : Queue::Job
+      Queue::Job.new(
+        id.to_s,
+        manga_id.to_s,
+        full_title,
+        manga_title,
+        Queue::JobStatus::Pending,
+        Time.unix timestamp
+      )
+    end
+  end
+
+  struct User
+    def updates_after(time : Time, &block : Chapter ->)
+      page = 1
+      stopped = false
+      until stopped
+        chapters = followed_updates(page: page).chapters
+        return if chapters.empty?
+        chapters.each do |c|
+          if time > Time.unix c.timestamp
+            stopped = true
+            break
+          end
+          yield c
+        end
+        page += 1
+        # Let's not DDOS MangaDex :)
+        sleep 5.seconds
+      end
+    end
   end
 end

src/mango.cr

@@ -8,7 +8,7 @@ require "option_parser"
 require "clim"
 require "tallboy"
 
-MANGO_VERSION = "0.20.2"
+MANGO_VERSION = "0.22.0"
 
 # From http://www.network-science.de/ascii/
 BANNER = %{

src/plugin/plugin.cr

@@ -117,7 +117,7 @@ class Plugin
   def initialize(id : String)
     Plugin.build_info_ary
 
-    @info = @@info_ary.find { |i| i.id == id }
+    @info = @@info_ary.find &.id.== id
     if @info.nil?
       raise Error.new "Plugin with ID #{id} not found"
     end

src/queue.cr

@@ -303,12 +303,12 @@ class Queue
   end
 
   def pause
-    @downloaders.each { |d| d.stopped = true }
+    @downloaders.each &.stopped=(true)
     @paused = true
   end
 
   def resume
-    @downloaders.each { |d| d.stopped = false }
+    @downloaders.each &.stopped=(false)
     @paused = false
   end
 

src/rename.cr

@@ -35,15 +35,15 @@ module Rename
 
   class Group < Base(Pattern | String)
     def render(hash : VHash)
-      return "" if @ary.select(&.is_a? Pattern)
+      return "" if @ary.select(Pattern)
                      .any? &.as(Pattern).render(hash).empty?
-      @ary.map do |e|
+      @ary.join do |e|
         if e.is_a? Pattern
           e.render hash
         else
           e
         end
-      end.join
+      end
     end
   end
 
@@ -129,13 +129,13 @@ module Rename
     end
 
     def render(hash : VHash)
-      str = @ary.map do |e|
+      str = @ary.join do |e|
         if e.is_a? String
           e
         else
           e.render hash
         end
-      end.join.strip
+      end.strip
       post_process str
     end
 

src/routes/admin.cr

@@ -73,5 +73,9 @@ struct AdminRouter
     get "/admin/missing" do |env|
       layout "missing-items"
     end
+
+    get "/admin/mangadex" do |env|
+      layout "mangadex"
+    end
   end
 end

src/routes/main.cr

@@ -30,7 +30,8 @@ struct MainRouter
         else
           redirect env, "/"
         end
-      rescue
+      rescue e
+        Logger.error e
         redirect env, "/login"
       end
     end
@@ -95,6 +96,12 @@ struct MainRouter
       end
     end
 
+    get "/download/subscription" do |env|
+      mangadex_base_url = Config.current.mangadex["base_url"]
+      username = get_username env
+      layout "subscription"
+    end
+
     get "/" do |env|
       begin
         username = get_username env
@@ -103,7 +110,7 @@ struct MainRouter
         recently_added = Library.default.get_recently_added_entries username
         start_reading = Library.default.get_start_reading_titles username
         titles = Library.default.titles
-        new_user = !titles.any? { |t| t.load_percentage(username) > 0 }
+        new_user = !titles.any? &.load_percentage(username).> 0
         empty_library = titles.size == 0
         layout "home"
       rescue e

src/routes/reader.cr

@@ -30,6 +30,11 @@ struct ReaderRouter
 
         title = (Library.default.get_title env.params.url["title"]).not_nil!
         entry = (title.get_entry env.params.url["entry"]).not_nil!
+
+        sort_opt = SortOptions.from_info_json title.dir, username
+        get_sort_opt
+        entries = title.sorted_entries username, sort_opt
+
         page_idx = env.params.url["page"].to_i
         if page_idx > entry.pages || page_idx <= 0
           raise "Page #{page_idx} not found."
@@ -37,10 +42,12 @@ struct ReaderRouter
 
         exit_url = "#{base_url}book/#{title.id}"
 
-        next_entry_url = nil
-        next_entry = entry.next_entry username
-        unless next_entry.nil?
-          next_entry_url = "#{base_url}reader/#{title.id}/#{next_entry.id}"
+        next_entry_url = entry.next_entry(username).try do |e|
+          "#{base_url}reader/#{title.id}/#{e.id}"
+        end
+
+        previous_entry_url = entry.previous_entry(username).try do |e|
+          "#{base_url}reader/#{title.id}/#{e.id}"
         end
 
         render "src/views/reader.html.ecr"

src/storage.cr

@@ -5,6 +5,7 @@ require "base64"
 require "./util/*"
 require "mg"
 require "../migration/*"
+require "./subscription"
 
 def hash_password(pw)
   Crypto::Bcrypt::Password.create(pw).to_s
@@ -14,6 +15,9 @@ def verify_password(hash, pw)
   (Crypto::Bcrypt::Password.new hash).verify pw
 end
 
+SUB_ATTR = %w(manga_id language group_id min_volume max_volume min_chapter
+  max_chapter username)
+
 class Storage
   @@insert_entry_ids = [] of IDTuple
   @@insert_title_ids = [] of IDTuple
@@ -34,7 +38,7 @@ class Storage
     dir = File.dirname @path
     unless Dir.exists? dir
       Logger.info "The DB directory #{dir} does not exist. " \
-                  "Attepmting to create it"
+                  "Attempting to create it"
       Dir.mkdir_p dir
     end
     MainFiber.run do
@@ -445,7 +449,7 @@ class Storage
           Logger.debug "Marking #{trash_ids.size} entries as unavailable"
         end
         db.exec "update ids set unavailable = 1 where id in " \
-                "(#{trash_ids.map { |i| "'#{i}'" }.join ","})"
+                "(#{trash_ids.join "," { |i| "'#{i}'" }})"
 
         # Detect dangling title IDs
         trash_titles = [] of String
@@ -461,7 +465,7 @@ class Storage
           Logger.debug "Marking #{trash_titles.size} titles as unavailable"
         end
         db.exec "update titles set unavailable = 1 where id in " \
-                "(#{trash_titles.map { |i| "'#{i}'" }.join ","})"
+                "(#{trash_titles.join "," { |i| "'#{i}'" }})"
       end
     end
   end
@@ -514,6 +518,101 @@ class Storage
     delete_missing "titles", id
   end
 
+  def save_md_token(username : String, token : String, expire : Time)
+    MainFiber.run do
+      get_db do |db|
+        count = db.query_one "select count(*) from md_account where " \
+                             "username = (?)", username, as: Int64
+        if count == 0
+          db.exec "insert into md_account values (?, ?, ?)", username, token,
+            expire.to_unix
+        else
+          db.exec "update md_account set token = (?), expire = (?) " \
+                  "where username = (?)", token, expire.to_unix, username
+        end
+      end
+    end
+  end
+
+  def get_md_token(username) : Tuple(String?, Time?)
+    token = nil
+    expires = nil
+    MainFiber.run do
+      get_db do |db|
+        db.query_one? "select token, expire from md_account where " \
+                      "username = (?)", username do |res|
+          token = res.read String
+          expires = Time.unix res.read Int64
+        end
+      end
+    end
+    {token, expires}
+  end
+
+  def save_subscription(sub : Subscription)
+    MainFiber.run do
+      get_db do |db|
+        {% begin %}
+          db.exec "insert into subscription (#{SUB_ATTR.join ","}, " \
+            "last_checked, created_at) values " \
+            "(#{Array.new(SUB_ATTR.size + 2, "?").join ","})",
+          {% for type in SUB_ATTR %}
+            sub.{{type.id}},
+          {% end %}
+          sub.last_checked.to_unix, sub.created_at.to_unix
+        {% end %}
+      end
+    end
+  end
+
+  def subscriptions : Array(Subscription)
+    subs = [] of Subscription
+    MainFiber.run do
+      get_db do |db|
+        db.query "select * from subscription" do |rs|
+          subs += Subscription.from_rs rs
+        end
+      end
+    end
+    subs
+  end
+
+  def delete_subscription(id : Int64, username : String)
+    MainFiber.run do
+      get_db do |db|
+        db.exec "delete from subscription where id = (?) and username = (?)",
+          id, username
+      end
+    end
+  end
+
+  def get_subscription(id : Int64, username : String) : Subscription?
+    sub = nil
+    MainFiber.run do
+      get_db do |db|
+        db.query "select * from subscription where id = (?) and " \
+                 "username = (?) limit 1", id, username do |rs|
+          sub = Subscription.from_rs(rs).first?
+        end
+      end
+    end
+    sub
+  end
+
+  def update_subscription_last_checked(id : Int64? = nil)
+    MainFiber.run do
+      get_db do |db|
+        if id
+          db.exec "update subscription set last_checked = (?) where id = (?)",
+            Time.utc.to_unix, id
+        else
+          db.exec "update subscription set last_checked = (?)",
+            Time.utc.to_unix
+        end
+      end
+    end
+  end
+
   def close
     MainFiber.run do
       unless @db.nil?

src/subscription.cr

@@ -0,0 +1,83 @@
+require "db"
+require "json"
+
+struct Subscription
+  include DB::Serializable
+  include JSON::Serializable
+
+  getter id : Int64 = 0
+  getter username : String
+  getter manga_id : Int64
+  property language : String?
+  property group_id : Int64?
+  property min_volume : Int64?
+  property max_volume : Int64?
+  property min_chapter : Int64?
+  property max_chapter : Int64?
+  @[DB::Field(key: "last_checked")]
+  @[JSON::Field(key: "last_checked")]
+  @raw_last_checked : Int64
+  @[DB::Field(key: "created_at")]
+  @[JSON::Field(key: "created_at")]
+  @raw_created_at : Int64
+
+  def last_checked : Time
+    Time.unix @raw_last_checked
+  end
+
+  def created_at : Time
+    Time.unix @raw_created_at
+  end
+
+  def initialize(@manga_id, @username)
+    @raw_created_at = Time.utc.to_unix
+    @raw_last_checked = Time.utc.to_unix
+  end
+
+  private def in_range?(value : String, lowerbound : Int64?,
+                        upperbound : Int64?) : Bool
+    lb = lowerbound.try &.to_f64
+    ub = upperbound.try &.to_f64
+
+    return true if lb.nil? && ub.nil?
+
+    v = value.to_f64?
+    return false unless v
+
+    if lb.nil?
+      v <= ub.not_nil!
+    elsif ub.nil?
+      v >= lb.not_nil!
+    else
+      v >= lb.not_nil! && v <= ub.not_nil!
+    end
+  end
+
+  def match?(chapter : MangaDex::Chapter) : Bool
+    if chapter.manga_id != manga_id ||
+       (language && chapter.language != language) ||
+       (group_id && !chapter.groups.map(&.id).includes? group_id)
+      return false
+    end
+
+    in_range?(chapter.volume, min_volume, max_volume) &&
+      in_range?(chapter.chapter, min_chapter, max_chapter)
+  end
+
+  def check_for_updates : Int32
+    Logger.debug "Checking updates for subscription with ID #{id}"
+    jobs = [] of Queue::Job
+    get_client(username).user.updates_after last_checked do |chapter|
+      next unless match? chapter
+      jobs << chapter.to_job
+    end
+    Storage.default.update_subscription_last_checked id
+    count = Queue.default.push jobs
+    Logger.debug "#{count}/#{jobs.size} of updates added to queue"
+    count
+  rescue e
+    Logger.error "Error occurred when checking updates for " \
+                 "subscription with ID #{id}. #{e}"
+    0
+  end
+end

src/util/chapter_sort.cr

@@ -73,7 +73,7 @@ class ChapterSorter
       .select do |key|
         keys[key].count >= str_ary.size / 2
       end
-      .sort do |a_key, b_key|
+      .sort! do |a_key, b_key|
         a = keys[a_key]
         b = keys[b_key]
         # Sort keys by the number of times they appear

src/util/numeric_sort.cr

@@ -11,7 +11,7 @@ end
 def split_by_alphanumeric(str)
   arr = [] of String
   str.scan(/([^\d\n\r]*)(\d*)([^\d\n\r]*)/) do |match|
-    arr += match.captures.select { |s| s != "" }
+    arr += match.captures.select &.!= ""
   end
   arr
 end

src/util/util.cr

@@ -114,7 +114,7 @@ class String
   def components_similarity(other : String) : Float64
     s, l = [self, other]
       .map { |str| Path.new(str).parts }
-      .sort_by &.size
+      .sort_by! &.size
 
     match = s.reverse.zip(l.reverse).count { |a, b| a == b }
     match / s.size

src/util/web.cr

@@ -72,7 +72,7 @@ def redirect(env, path)
 end
 
 def hash_to_query(hash)
-  hash.map { |k, v| "#{k}=#{v}" }.join("&")
+  hash.join "&" { |k, v| "#{k}=#{v}" }
 end
 
 def request_path_startswith(env, ary)
@@ -107,6 +107,25 @@ macro get_sort_opt
   end
 end
 
+# Returns an authorized client
+def get_client(username : String) : MangaDex::Client
+  token, expires = Storage.default.get_md_token username
+
+  unless expires && token
+    raise "No token found for user #{username}"
+  end
+
+  client = MangaDex::Client.from_config
+  client.token = token
+  client.token_expires = expires
+
+  client
+end
+
+def get_client(env) : MangaDex::Client
+  get_client get_username env
+end
+
 module HTTP
   class Client
     private def self.exec(uri : URI, tls : TLSContext = nil)

src/views/admin.html.ecr

@@ -33,6 +33,7 @@
       <option>System</option>
     </select>
   </li>
+  <li><a class="uk-link-reset" href="<%= base_url %>admin/mangadex">Connect to MangaDex</a></li>
 </ul>
 
 <hr class="uk-divider-icon">

src/views/components/dots.html.ecr

@@ -1,3 +1,3 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.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/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script> 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script> 
 <script src="<%= base_url %>js/dots.js"></script>

src/views/components/jquery-ui.html.ecr

@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

src/views/components/moment.html.ecr

@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

src/views/download-manager.html.ecr

@@ -5,65 +5,67 @@
     <button class="uk-button uk-button-default" @click="load()" :disabled="loading">Refresh Queue</button>
     <button class="uk-button uk-button-default" x-show="paused !== undefined" x-text="paused ? 'Resume Download' : 'Pause Download'" @click="toggle()" :disabled="toggling"></button>
   </div>
-  <table class="uk-table uk-table-striped uk-overflow-auto">
-    <thead>
-      <tr>
-        <th>Chapter</th>
-        <th>Manga</th>
-        <th>Progress</th>
-        <th>Time</th>
-        <th>Status</th>
-        <th>Plugin</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <template x-for="job in jobs" :key="job">
-        <tr :id="`chapter-${job.id}`">
-
-          <template x-if="job.plugin_id">
-            <td x-text="job.title"></td>
-          </template>
-          <template x-if="!job.plugin_id">
-            <td><a :href="`<%= mangadex_base_url %>/chapter/${job.id}`" x-text="job.title"></td>
-          </template>
-
-          <template x-if="job.plugin_id">
-            <td x-text="job.manga_title"></td>
-          </template>
-          <template x-if="!job.plugin_id">
-            <td><a :href="`<%= mangadex_base_url %>/manga/${job.manga_id}`" x-text="job.manga_title"></td>
-          </template>
-
-          <td x-text="`${job.success_count}/${job.pages}`"></td>
-          <td x-text="`${moment(job.time).fromNow()}`"></td>
-
-          <td>
-            <span :class="statusClass(job.status)" x-text="job.status"></span>
-            <template x-if="job.status_message.length > 0">
-              <div class="uk-inline">
-                <span uk-icon="info"></span>
-                <div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
-              </div>
-            </template>
-          </td>
-
-          <td x-text="`${job.plugin_id || ''}`"></td>
-
-          <td>
-            <a @click="jobAction('delete', $event)" uk-icon="trash"></a>
-            <template x-if="job.status_message.length > 0">
-              <a @click="jobAction('retry', $event)" uk-icon="refresh"></a>
-            </template>
-          </td>
+  <div class="uk-overflow-auto">
+    <table class="uk-table uk-table-striped">
+      <thead>
+        <tr>
+          <th>Chapter</th>
+          <th>Manga</th>
+          <th>Progress</th>
+          <th>Time</th>
+          <th>Status</th>
+          <th>Plugin</th>
+          <th>Actions</th>
         </tr>
-      </template>
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        <template x-for="job in jobs" :key="job">
+          <tr :id="`chapter-${job.id}`">
+
+            <template x-if="job.plugin_id">
+              <td x-text="job.title"></td>
+            </template>
+            <template x-if="!job.plugin_id">
+              <td><a :href="`<%= mangadex_base_url %>/chapter/${job.id}`" x-text="job.title"></td>
+            </template>
+
+            <template x-if="job.plugin_id">
+              <td x-text="job.manga_title"></td>
+            </template>
+            <template x-if="!job.plugin_id">
+              <td><a :href="`<%= mangadex_base_url %>/manga/${job.manga_id}`" x-text="job.manga_title"></td>
+            </template>
+
+            <td x-text="`${job.success_count}/${job.pages}`"></td>
+            <td x-text="`${moment(job.time).fromNow()}`"></td>
+
+            <td>
+              <span :class="statusClass(job.status)" x-text="job.status"></span>
+              <template x-if="job.status_message.length > 0">
+                <div class="uk-inline">
+                  <span uk-icon="info"></span>
+                  <div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
+                </div>
+              </template>
+            </td>
+
+            <td x-text="`${job.plugin_id || ''}`"></td>
+
+            <td>
+              <a @click="jobAction('delete', $event)" uk-icon="trash" uk-tooltip="Delete"></a>
+              <template x-if="job.status_message.length > 0">
+                <a @click="jobAction('retry', $event)" uk-icon="refresh" uk-tooltip="Retry"></a>
+              </template>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
 </div>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <%= render_component "moment" %>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/download-manager.js"></script>
 <% end %>

src/views/download.html.ecr

@@ -1,117 +1,170 @@
 <h2 class=uk-title>Download from MangaDex</h2>
 <div x-data="downloadComponent()" x-init="init()">
-  <div class="uk-grid-small" uk-grid>
-    <div class="uk-width-3-4">
-      <input class="uk-input" type="text" placeholder="MangaDex manga ID or URL" x-model="searchInput" @keydown.enter.debounce="search()">
-    </div>
-    <div class="uk-width-1-4">
-      <div uk-spinner class="uk-align-center" x-show="loading" x-cloak></div>
-      <button class="uk-button uk-button-default" x-show="!loading" @click="search()">Search</button>
-    </div>
-  </div>
-
-  <div x-show="data && data.chapters" x-cloak>
-    <div class"uk-grid-small" uk-grid style="margin-top:40px">
-      <div class="uk-width-1-4@s">
-        <img :src="data.mainCover">
-      </div>
-      <div class="uk-width-1-4@s">
-        <p>Title: <a :href="`<%= mangadex_base_url %>/manga/${data.id}`" x-text="data.title"></a></p>
-        <p x-text="`Artist: ${data.artist}`"></p>
-        <p x-text="`Author: ${data.author}`"></p>
-      </div>
-      <div class="uk-form-stacked uk-width-1-2@s" id="filters">
-        <p class="uk-text-lead uk-margin-remove-bottom">Filter Chapters</p>
-        <p class="uk-text-meta uk-margin-remove-top" x-text="`${chapters.length} chapters found`"></p>
-        <div class="uk-margin">
-          <label class="uk-form-label">Language</label>
-          <div class="uk-form-controls">
-            <select class="uk-select filter-field" x-model="langChoice" @change="filtersUpdated()">
-              <template x-for="lang in languages" :key="lang">
-                <option x-text="lang"></option>
-              </template>
-            </select>
-          </div>
+    <div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
+        <div class="uk-width-expand">
+            <input class="uk-input" type="text" :placeholder="searchAvailable ? 'Search MangaDex or enter a manga ID/URL' : 'MangaDex manga ID or URL'" x-model="searchInput" @keydown.enter.debounce="search()">
         </div>
-
-        <div class="uk-margin">
-          <label class="uk-form-label">Group</label>
-          <div class="uk-form-controls">
-            <select class="uk-select filter-field" x-model="groupChoice" @change="filtersUpdated()">
-              <template x-for="group in groups" :key="group">
-                <option x-text="group"></option>
-              </template>
-            </select>
-          </div>
+        <div class="uk-width-auto">
+            <div uk-spinner class="uk-align-center" x-show="loading" x-cloak></div>
+            <button class="uk-button uk-button-default" x-show="!loading" @click="search()">Search</button>
         </div>
-
-        <div class="uk-margin">
-          <label class="uk-form-label">Volume</label>
-          <div class="uk-form-controls">
-            <input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="volumeRange" @keydown.enter="filtersUpdated()">
-          </div>
-        </div>
-
-        <div class="uk-margin">
-          <label class="uk-form-label">Chapter</label>
-          <div class="uk-form-controls">
-            <input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="chapterRange" @keydown.enter="filtersUpdated()">
-          </div>
-        </div>
-      </div>
     </div>
 
-    <div class="uk-margin">
-      <div class="uk-margin">
-        <button class="uk-button uk-button-default" @click="selectAll()">Select All</button>
-        <button class="uk-button uk-button-default" @click="clearSelection()">Clear Selections</button>
-        <button class="uk-button uk-button-primary" @click="download()" x-show="!addingToDownload">Download Selected</button>
-        <div uk-spinner class="uk-margin-left" x-show="addingToDownload"></div>
-      </div>
-      <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
-    </div>
-    <p x-text="`Mango can only list ${chaptersLimit} chapters, but we found ${chapters.length} chapters. Please use the filter options above to narrow down your search.`" x-show="chapters.length > chaptersLimit"></p>
-    <table class="uk-table uk-table-striped uk-overflow-auto" x-show="chapters.length <= chaptersLimit">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Title</th>
-          <th>Language</th>
-          <th>Group</th>
-          <th>Volume</th>
-          <th>Chapter</th>
-          <th>Timestamp</th>
-        </tr>
-      </thead>
+    <template x-if="mangaAry">
+        <div>
+            <p x-show="mangaAry.length === 0">No matching manga found.</p>
 
-      <template x-if="chapters.length <= chaptersLimit">
-        <tbody id="selectable">
-          <template x-for="chp in chapters" :key="chp">
-            <tr class="ui-widget-content">
-              <td><a :href="`<%= mangadex_base_url %>/chapter/${chp.id}`" x-text="chp.id"></a></td>
-              <td x-text="chp.title"></td>
-              <td x-text="chp.language"></td>
-              <td>
-                <template x-for="grp in Object.entries(chp.groups)">
-                  <div>
-                    <a :href="`<%= mangadex_base_url %>/group/${grp[1]}`" x-text="grp[0]"></a>
-                  </div>
+            <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+                <template x-for="manga in mangaAry" :key="manga.id">
+                    <div class="item" :data-id="manga.id" @click="chooseManga(manga)">
+                        <div class="uk-card uk-card-default">
+                            <div class="uk-card-media-top uk-inline">
+                                <img uk-img :data-src="manga.mainCover">
+                            </div>
+                            <div class="uk-card-body">
+                                <h3 class="uk-card-title break-word uk-margin-remove-bottom free-height" x-text="manga.title"></h3>
+                                <p class="uk-text-meta" x-text="`ID: ${manga.id}`"></p>
+                            </div>
+                        </div>
+                    </div>
                 </template>
-              </td>
-              <td x-text="chp.volume"></td>
-              <td x-text="chp.chapter"></td>
-              <td x-text="`${moment.unix(chp.timestamp).fromNow()}`"></td>
-            </tr>
-          </template>
-        </tbody>
-      </template>
-    </table>
-  </div>
+            </div>
+        </div>
+    </template>
+
+    <div x-show="data && data.chapters" x-cloak>
+        <div class"uk-grid-small" uk-grid>
+            <div class="uk-width-1-4@s">
+                <img :src="data.mainCover">
+            </div>
+            <div class="uk-width-1-4@s">
+                <p>Title: <a :href="`<%= mangadex_base_url %>/manga/${data.id}`" x-text="data.title"></a></p>
+                <p x-text="`Artist: ${data.artist}`"></p>
+                <p x-text="`Author: ${data.author}`"></p>
+            </div>
+            <div class="uk-form-stacked uk-width-1-2@s" id="filters">
+                <p class="uk-text-lead uk-margin-remove-bottom">
+                <span>Filter Chapters</span>
+                <button class="uk-icon-button uk-align-right" uk-icon="rss" uk-tooltip="Subscribe" x-show="searchAvailable" @click="subscribe()"></button>
+                </p>
+                <p class="uk-text-meta uk-margin-remove-top" x-text="`${chapters.length} chapters found`"></p>
+                <div class="uk-margin">
+                    <label class="uk-form-label">Language</label>
+                    <div class="uk-form-controls">
+                        <select class="uk-select filter-field" x-model="langChoice" @change="filtersUpdated()">
+                            <template x-for="lang in languages" :key="lang">
+                                <option x-text="lang"></option>
+                            </template>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="uk-margin">
+                    <label class="uk-form-label">Group</label>
+                    <div class="uk-form-controls">
+                        <select class="uk-select filter-field" x-model="groupChoice" @change="filtersUpdated()">
+                            <template x-for="group in groups" :key="group">
+                                <option x-text="group"></option>
+                            </template>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="uk-margin">
+                    <label class="uk-form-label">Volume</label>
+                    <div class="uk-form-controls">
+                        <input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="volumeRange" @keydown.enter="filtersUpdated()">
+                    </div>
+                </div>
+
+                <div class="uk-margin">
+                    <label class="uk-form-label">Chapter</label>
+                    <div class="uk-form-controls">
+                        <input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="chapterRange" @keydown.enter="filtersUpdated()">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="uk-margin">
+            <div class="uk-margin">
+                <button class="uk-button uk-button-default" @click="selectAll()">Select All</button>
+                <button class="uk-button uk-button-default" @click="clearSelection()">Clear Selections</button>
+                <button class="uk-button uk-button-primary" @click="download()" x-show="!addingToDownload">Download Selected</button>
+                <div uk-spinner class="uk-margin-left" x-show="addingToDownload"></div>
+            </div>
+            <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
+        </div>
+        <p x-text="`Mango can only list ${chaptersLimit} chapters, but we found ${chapters.length} chapters. Please use the filter options above to narrow down your search.`" x-show="chapters.length > chaptersLimit"></p>
+        <div class="uk-overflow-auto">
+            <table class="uk-table uk-table-striped" x-show="chapters.length <= chaptersLimit">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Title</th>
+                        <th>Language</th>
+                        <th>Group</th>
+                        <th>Volume</th>
+                        <th>Chapter</th>
+                        <th>Timestamp</th>
+                    </tr>
+                </thead>
+
+                <template x-if="chapters.length <= chaptersLimit">
+                    <tbody id="selectable">
+                        <template x-for="chp in chapters" :key="chp">
+                            <tr class="ui-widget-content">
+                                <td><a :href="`<%= mangadex_base_url %>/chapter/${chp.id}`" x-text="chp.id"></a></td>
+                                <td x-text="chp.title"></td>
+                                <td x-text="chp.language"></td>
+                                <td>
+                                    <template x-for="grp in Object.entries(chp.groups)">
+                                        <div>
+                                            <a :href="`<%= mangadex_base_url %>/group/${grp[1]}`" x-text="grp[0]"></a>
+                                        </div>
+                                    </template>
+                                </td>
+                                <td x-text="chp.volume"></td>
+                                <td x-text="chp.chapter"></td>
+                                <td x-text="`${moment.unix(chp.timestamp).fromNow()}`"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </template>
+            </table>
+        </div>
+    </div>
+
+    <div id="modal" class="uk-flex-top" uk-modal="container: false">
+        <div class="uk-modal-dialog uk-margin-auto-vertical">
+            <button class="uk-modal-close-default" type="button" uk-close></button>
+            <div class="uk-modal-header">
+                <h3 class="uk-modal-title break-word" x-text="candidateManga.title"></h3>
+            </div>
+            <div class="uk-modal-body">
+                <div class="uk-grid">
+                    <div class="uk-width-1-3@s">
+                        <img uk-img data-width data-height :src="candidateManga.mainCover" style="width:100%;margin-bottom:10px;">
+                        <a :href="`<%= mangadex_base_url %>/manga/${candidateManga.id}`" x-text="`ID: ${candidateManga.id}`" class="uk-link-muted"></a>
+                    </div>
+                    <div class="uk-width-2-3@s">
+                        <p x-text="candidateManga.description"></p>
+                    </div>
+                </div>
+            </div>
+            <div class="uk-modal-footer">
+                <button class="uk-button uk-button-primary" type="button" @click="confirmManga(candidateManga.id)">Choose</button>
+            </div>
+        </div>
+    </div>
 </div>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-  <script src="<%= base_url %>js/alert.js"></script>
-  <script src="<%= base_url %>js/download.js"></script>
+    <%= render_component "moment" %>
+    <%= render_component "jquery-ui" %>
+    <script>
+        const mangadex_base_url = "<%= mangadex_base_url %>";
+    </script>
+    <script src="<%= base_url %>js/alert.js"></script>
+    <script src="<%= base_url %>js/download.js"></script>
 <% end %>

src/views/home.html.ecr

@@ -77,7 +77,7 @@
 <%- end -%>
 
 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/title.js"></script>
 <% end %>

src/views/layout.html.ecr

@@ -1,89 +1,91 @@
 <!DOCTYPE html>
 <html>
 
-    <%= render_component "head" %>
+  <%= render_component "head" %>
 
-    <body>
-        <div class="uk-offcanvas-content">
-            <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
-                <div id="mobile-nav" uk-offcanvas="overlay: true">
-                    <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                        <ul class="uk-nav-parent-icon uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
-                            <li><a href="<%= base_url %>">Home</a></li>
-                            <li><a href="<%= base_url %>library">Library</a></li>
-                            <li><a href="<%= base_url %>tags">Tags</a></li>
-                            <% if is_admin %>
-                                <li><a href="<%= base_url %>admin">Admin</a></li>
-                                <li class="uk-parent">
-                                    <a href="#">Download</a>
-                                    <ul class="uk-nav-sub">
-                                        <li><a href="<%= base_url %>download">MangaDex</a></li>
-                                        <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
-                                        <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
-                                    </ul>
-                                </li>
-                            <% end %>
-                            <hr uk-divider>
-                            <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
-                            <li><a href="<%= base_url %>logout">Logout</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
+  <body>
+    <div class="uk-offcanvas-content">
+      <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
+        <div id="mobile-nav" uk-offcanvas="overlay: true">
+          <div class="uk-offcanvas-bar uk-flex uk-flex-column">
+            <ul class="uk-nav-parent-icon uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
+              <li><a href="<%= base_url %>">Home</a></li>
+              <li><a href="<%= base_url %>library">Library</a></li>
+              <li><a href="<%= base_url %>tags">Tags</a></li>
+              <% if is_admin %>
+                <li><a href="<%= base_url %>admin">Admin</a></li>
+                <li class="uk-parent">
+                  <a href="#">Download</a>
+                  <ul class="uk-nav-sub">
+                    <li><a href="<%= base_url %>download">MangaDex</a></li>
+                    <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
+                    <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
+                    <li><a href="<%= base_url %>download/subscription">Subscription Manager</a></li>
+                  </ul>
+                </li>
+              <% end %>
+              <hr uk-divider>
+              <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
+              <li><a href="<%= base_url %>logout">Logout</a></li>
+            </ul>
+          </div>
         </div>
-        <div class="uk-position-top">
-            <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
-                <div class="uk-navbar-left uk-hidden@s">
-                    <div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
-                </div>
-                <div class="uk-navbar-left uk-visible@s">
-                    <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png" style="width:90px;height:90px;"></a>
-                    <ul class="uk-navbar-nav">
-                        <li><a href="<%= base_url %>">Home</a></li>
-                        <li><a href="<%= base_url %>library">Library</a></li>
-                        <li><a href="<%= base_url %>tags">Tags</a></li>
-                        <% if is_admin %>
-                            <li><a href="<%= base_url %>admin">Admin</a></li>
-                            <li>
-                                <a href="#">Download</a>
-                                <div class="uk-navbar-dropdown">
-                                    <ul class="uk-nav uk-navbar-dropdown-nav">
-                                        <li class="uk-nav-header">Source</li>
-                                        <li><a href="<%= base_url %>download">MangaDex</a></li>
-                                        <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
-                                        <li class="uk-nav-divider"></li>
-                                        <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
-                                    </ul>
-                                </div>
-                            </li>
-                        <% end %>
-                    </ul>
-                </div>
-                <div class="uk-navbar-right uk-visible@s">
-                    <ul class="uk-navbar-nav">
-                        <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
-                        <li><a href="<%= base_url %>logout">Logout</a></li>
-                    </ul>
-                </div>
-            </div>
+      </div>
+    </div>
+    <div class="uk-position-top">
+      <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
+        <div class="uk-navbar-left uk-hidden@s">
+          <div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
         </div>
-        <div class="uk-section uk-section-small">
-        </div>
-        <div class="uk-section uk-section-small" style="position:relative;">
-            <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 class="uk-navbar-left uk-visible@s">
+          <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png" style="width:90px;height:90px;"></a>
+          <ul class="uk-navbar-nav">
+            <li><a href="<%= base_url %>">Home</a></li>
+            <li><a href="<%= base_url %>library">Library</a></li>
+            <li><a href="<%= base_url %>tags">Tags</a></li>
+            <% if is_admin %>
+              <li><a href="<%= base_url %>admin">Admin</a></li>
+              <li>
+                <a href="#">Download</a>
+                <div class="uk-navbar-dropdown">
+                  <ul class="uk-nav uk-navbar-dropdown-nav">
+                    <li class="uk-nav-header">Source</li>
+                    <li><a href="<%= base_url %>download">MangaDex</a></li>
+                    <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
+                    <li class="uk-nav-divider"></li>
+                    <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
+                    <li><a href="<%= base_url %>download/subscription">Subscription Manager</a></li>
+                  </ul>
                 </div>
-            </div>
+              </li>
+            <% end %>
+          </ul>
         </div>
-        <script>
-            setTheme();
-            const base_url = "<%= base_url %>";
-        </script>
-        <%= render_component "uikit" %>
-        <%= yield_content "script" %>
-    </body>
+        <div class="uk-navbar-right uk-visible@s">
+          <ul class="uk-navbar-nav">
+            <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
+            <li><a href="<%= base_url %>logout">Logout</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="uk-section uk-section-small">
+    </div>
+    <div class="uk-section uk-section-small" style="position:relative;">
+      <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>
+      setTheme();
+      const base_url = "<%= base_url %>";
+    </script>
+    <%= render_component "uikit" %>
+    <%= yield_content "script" %>
+  </body>
 
 </html>

src/views/library.html.ecr

@@ -24,7 +24,7 @@
 </div>
 
 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
   <script src="<%= base_url %>js/search.js"></script>
   <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>

src/views/mangadex.html.ecr

@@ -0,0 +1,39 @@
+<div x-data="component()" x-init="init()">
+  <h2 class="uk-title">Connect to MangaDex</h2>
+  <div class"uk-grid-small" uk-grid x-show="!loading" x-cloak>
+    <div class="uk-width-1-2@s" x-show="!expires">
+      <p>This step is optional but highly recommended if you are using the MangaDex downloader. Connecting to MangaDex allows you to:</p>
+      <ul>
+        <li>Search MangaDex by search terms in addition to manga IDs</li>
+        <li>Automatically download new chapters when they are available (coming soon)</li>
+      </ul>
+    </div>
+
+    <div class="uk-width-1-2@s" x-show="expires">
+      <p>
+      <span x-show="!expired">You have logged in to MangaDex!</span>
+      <span x-show="expired">You have logged in to MangaDex but the token has expired.</span>
+      The expiration date of your token is <code x-text="moment.unix(expires).format('MMMM Do YYYY, HH:mm:ss')"></code>. 
+      <span x-show="!expired">If the integration is not working, you</span>
+      <span x-show="expired">You</span>
+      can log in again and the token will be updated.
+      </p>
+    </div>
+
+    <div class="uk-width-1-2@s">
+      <div class="uk-margin">
+        <div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:user"></span><input class="uk-input uk-form-large" type="text" x-model="username" @keydown.enter.debounce="login()"></div>
+      </div>
+      <div class="uk-margin">
+        <div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:lock"></span><input class="uk-input uk-form-large" type="password" x-model="password" @keydown.enter.debounce="login()"></div>
+      </div>
+      <div class="uk-margin"><button class="uk-button uk-button-primary uk-button-large uk-width-1-1" @click="login()" :disabled="loggingIn">Login to MangaDex</button></div>
+    </div>
+  </div>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "moment" %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/mangadex.js"></script>
+<% end %>

src/views/missing-items.html.ecr

@@ -3,34 +3,36 @@
   <div x-show="!empty">
     <p>The following items were present in your library, but now we can't find them anymore. If you deleted them mistakenly, try to recover the files or folders, put them back to where they were, and rescan the library. Otherwise, you can safely delete them and the associated metadata using the buttons below to free up database space.</p>
     <button class="uk-button uk-button-danger" @click="rmAll()">Delete All</button>
-    <table class="uk-table uk-table-striped uk-overflow-auto">
-      <thead>
-        <tr>
-          <th>Type</th>
-          <th>Relative Path</th>
-          <th>ID</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template x-for="title in titles" :key="title">
-          <tr :id="`title-${title.id}`">
-            <td>Title</td>
-            <td x-text="title.path"></td>
-            <td x-text="title.id"></td>
-            <td><a @click="rm($event)" uk-icon="trash"></a></td>
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped">
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Relative Path</th>
+            <th>ID</th>
+            <th>Actions</th>
           </tr>
-        </template>
-        <template x-for="entry in entries" :key="entry">
-          <tr :id="`entry-${entry.id}`">
-            <td>Entry</td>
-            <td x-text="entry.path"></td>
-            <td x-text="entry.id"></td>
-            <td><a @click="rm($event)" uk-icon="trash"></a></td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          <template x-for="title in titles" :key="title">
+            <tr :id="`title-${title.id}`">
+              <td>Title</td>
+              <td x-text="title.path"></td>
+              <td x-text="title.id"></td>
+              <td><a @click="rm($event)" uk-icon="trash"></a></td>
+            </tr>
+          </template>
+          <template x-for="entry in entries" :key="entry">
+            <tr :id="`entry-${entry.id}`">
+              <td>Entry</td>
+              <td x-text="entry.path"></td>
+              <td x-text="entry.id"></td>
+              <td><a @click="rm($event)" uk-icon="trash"></a></td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 

src/views/plugin-download.html.ecr

@@ -56,8 +56,10 @@
       <div id="download-spinner" uk-spinner class="uk-margin-left" hidden></div>
     </div>
     <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
-    <table class="uk-table uk-table-striped uk-overflow-auto tablesorter">
-    </table>
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped tablesorter">
+      </table>
+    </div>
   </div>
 <% end %>
 
@@ -68,7 +70,7 @@
       var pid = "<%= plugin.not_nil!.info.id %>";
     </script>
   <% end %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+  <%= render_component "jquery-ui" %>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.combined.min.js"></script>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/plugin-download.js"></script>

src/views/reader.html.ecr

@@ -25,18 +25,18 @@
             <img
               uk-img
               :class="{'uk-align-center': true, 'spine': item.width < 50}"
-              :style="item.style"
               :data-src="item.url"
               :width="item.width"
               :height="item.height"
               :id="item.id"
+              :style="`margin-top:${margin}px; margin-bottom:${margin}px`"
               @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="exitReader('<%= exit_url %>', true)">Exit Reader</button>
+            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="exitReader('<%= exit_url %>')">Exit Reader</button>
           <%- end -%>
         </div>
 
@@ -68,18 +68,19 @@
         </div>
         <div class="uk-modal-body">
           <div class="uk-margin">
-            <p id="progress-label"></p>
+            <p x-text="`Progress: ${selectedIndex}/${items.length} (${(selectedIndex/items.length * 100).toFixed(1)}%)`"></p>
           </div>
           <div class="uk-margin">
-            <label class="uk-form-label" for="page-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" @change="pageChanged()">
+              <select id="page-select" class="uk-select" @change="pageChanged()" x-model="selectedIndex">
                 <%- (1..entry.pages).each do |p| -%>
                   <option value="<%= p %>"><%= p %></option>
                 <%- end -%>
               </select>
             </div>
           </div>
+
           <div class="uk-margin">
             <label class="uk-form-label" for="mode-select">Mode</label>
             <div class="uk-form-controls">
@@ -89,9 +90,40 @@
               </select>
             </div>
           </div>
+
+          <div class="uk-margin" x-show="mode === 'continuous'">
+            <label class="uk-form-label" for="margin-range" x-text="`Page Margin: ${margin}px`"></label>
+            <div class="uk-form-controls">
+              <input id="margin-range" class="uk-range" type="range" min="0" max="50" step="5" x-model="margin" @change="marginChanged()">
+            </div>
+          </div>
+
+          <hr class="uk-divider-icon">
+
+          <div class="uk-margin">
+            <label class="uk-form-label" for="entry-select">Jump to Entry</label>
+            <div class="uk-form-controls">
+              <select id="entry-select" class="uk-select" @change="entryChanged()">
+                <% entries.each do |e| %>
+                  <option value="<%= e.id %>"
+                  <% if e.id == entry.id %>
+                    selected
+                  <% end %>>
+                  <%= e.title %>
+                  </option>
+                <% end %>
+              </select>
+            </div>
+          </div>
         </div>
         <div class="uk-modal-footer uk-text-right">
-          <button class="uk-button uk-button-danger" type="button" @click="exitReader('<%= exit_url %>')">Exit Reader</button>
+          <% if previous_entry_url %>
+            <a class="uk-button uk-button-default uk-margin-small-bottom uk-margin-small-right" href="<%= previous_entry_url %>">Previous Entry</a>
+          <% end %>
+          <% if next_entry_url %>
+            <a class="uk-button uk-button-default uk-margin-small-bottom uk-margin-small-right" href="<%= next_entry_url %>">Next Entry</a>
+          <% end %>
+          <a class="uk-button uk-button-danger uk-margin-small-bottom uk-margin-small-right" href="<%= exit_url %>">Exit Reader</a>
         </div>
       </div>
     </div>

src/views/subscription.html.ecr

@@ -0,0 +1,54 @@
+<h2 class="uk-title">MangaDex Subscription Manager</h2>
+
+<div x-data="component()" x-init="init()">
+  <p x-show="available === false">The subscription manager uses a MangaDex API that requires authentication. Please <a href="<%= base_url %>admin/mangadex">connect to MangaDex</a> before using this feature.</p>
+
+  <p x-show="available && subscriptions.length === 0">No subscription found. Go to the <a href="<%= base_url %>download">MangaDex download page</a> and start subscribing.</p>
+
+  <template x-if="subscriptions.length > 0">
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped">
+        <thead>
+          <tr>
+            <th>Manga ID</th>
+            <th>Language</th>
+            <th>Group ID</th>
+            <th>Volume Range</th>
+            <th>Chapter Range</th>
+            <th>Creator</th>
+            <th>Last Checked</th>
+            <th>Created At</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template x-for="sub in subscriptions" :key="sub">
+            <tr>
+              <td><a :href="`<%= mangadex_base_url %>/manga/${sub.manga_id}`" x-text="sub.manga_id"></a></td>
+              <td x-text="sub.language || 'All'"></td>
+              <td>
+                <a x-show="sub.group_id" :href="`<%= mangadex_base_url %>/group/${sub.group_id}`" x-text="sub.group_id"></a>
+                <span x-show="!sub.group_id">All</span>
+              </td>
+              <td x-text="formatRange(sub.min_volume, sub.max_volume)"></td>
+              <td x-text="formatRange(sub.min_chapter, sub.max_chapter)"></td>
+              <td x-text="sub.username"></td>
+              <td x-text="`${moment.unix(sub.last_checked).fromNow()}`"></td>
+              <td x-text="`${moment.unix(sub.created_at).fromNow()}`"></td>
+              <td :data-id="sub.id">
+                <a @click="check($event)" x-show="sub.username === '<%= username %>'" uk-icon="refresh" uk-tooltip="Check for updates"></a>
+                <a @click="rm($event)" x-show="sub.username === '<%= username %>'" uk-icon="trash" uk-tooltip="Delete"></a>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </template>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "moment" %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/subscription.js"></script>
+<% end %>

src/views/tag.html.ecr

@@ -24,7 +24,7 @@
 </div>
 
 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
   <script src="<%= base_url %>js/search.js"></script>
   <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>

src/views/title.html.ecr

@@ -123,7 +123,7 @@
 </div>
 
 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
   <link href="<%= base_url %>css/tags.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>