Update README.md

v0.27.0

.all-contributorsrc

@@ -113,6 +113,24 @@
       "contributions": [
         "infra"
       ]
+    },
+    {
+      "login": "BradleyDS2",
+      "name": "BradleyDS2",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2174921?v=4",
+      "profile": "https://github.com/BradleyDS2",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "nduja",
+      "name": "Robbo",
+      "avatar_url": "https://avatars.githubusercontent.com/u/69299134?v=4",
+      "profile": "https://github.com/nduja",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.ameba.yml

@@ -12,3 +12,4 @@ Layout/LineLength:
   MaxLength: 80
   Excluded:
     - src/routes/api.cr
+    - spec/plugin_spec.cr

README.md

@@ -4,6 +4,9 @@
 
 [![Patreon](https://img.shields.io/badge/support-patreon-brightgreen?link=https://www.patreon.com/hkalexling)](https://www.patreon.com/hkalexling) ![Build](https://github.com/hkalexling/Mango/workflows/Build/badge.svg) [![Gitter](https://badges.gitter.im/mango-cr/mango.svg)](https://gitter.im/mango-cr/mango?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Discord](https://img.shields.io/discord/855633663425118228?label=discord)](http://discord.com/invite/ezKtacCp9Q)
 
+> [!CAUTION]
+> As of March 2025, Mango is no longer maintained. We are incredibly grateful to everyone who used it, contributed, or gave feedback along the way - thank you! Unfortunately, we just don't have the time to keep it going right now. That said, it's open source, so you're more than welcome to fork it, build on it, or maintain your own version. If you're looking for alternatives, check out the wiki for similar projects. We might return to it someday, but for now, we don't recommend using it as-is - running unmaintained software can introduce security risks.
+
 Mango is a self-hosted manga server and reader. Its features include
 
 - Multi-user support
@@ -13,7 +16,7 @@ Mango is a self-hosted manga server and reader. Its features include
 - Supports nested folders in library
 - Automatically stores reading progress
 - Thumbnail generation
-- Supports [plugins](https://github.com/hkalexling/mango-plugins) to download from thrid-party sites
+- Supports [plugins](https://github.com/hkalexling/mango-plugins) to download from third-party sites
 - The web reader is responsive and works well on mobile, so there is no need for a mobile app
 - All the static files are embedded in the binary, so the deployment process is easy and painless
 
@@ -51,7 +54,7 @@ The official docker images are available on [Dockerhub](https://hub.docker.com/r
 ### CLI
 
 ```
-  Mango - Manga Server and Web Reader. Version 0.24.0
+  Mango - Manga Server and Web Reader. Version 0.27.0
 
   Usage:
 
@@ -80,6 +83,7 @@ base_url: /
 session_secret: mango-session-secret
 library_path: ~/mango/library
 db_path: ~/mango/mango.db
+queue_db_path: ~/mango/queue.db
 scan_interval_minutes: 5
 thumbnail_generation_interval_hours: 24
 log_level: info
@@ -87,23 +91,16 @@ upload_path: ~/mango/uploads
 plugin_path: ~/mango/plugins
 download_timeout_seconds: 30
 library_cache_path: ~/mango/library.yml.gz
-cache_enabled: false
+cache_enabled: true
 cache_size_mbs: 50
 cache_log_enabled: true
 disable_login: false
 default_username: ""
 auth_proxy_header_name: ""
-mangadex:
-  base_url: https://mangadex.org
-  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}'
+plugin_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
+- `scan_interval_minutes`, `thumbnail_generation_interval_hours`, and `plugin_update_interval_hours` can be any non-negative integer. Setting them to `0` disables the periodic tasks
 - `log_level` can be `debug`, `info`, `warn`, `error`, `fatal` or `off`. Setting it to `off` disables the logging
 - You can disable authentication by setting `disable_login` to true. Note that `default_username` must be set to an existing username for this to work.
 - By setting `cache_enabled` to `true`, you can enable an experimental feature where Mango caches library metadata to improve page load time. You can further fine-tune the feature with `cache_size_mbs` and `cache_log_enabled`.
@@ -179,6 +176,8 @@ Please check the [development guideline](https://github.com/hkalexling/Mango/wik
     <td align="center"><a href="http://h45h74x.eu.org"><img src="https://avatars1.githubusercontent.com/u/27204033?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Simon</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=h45h74x" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/davidkna"><img src="https://avatars.githubusercontent.com/u/835177?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Knaack</b></sub></a><br /><a href="#infra-davidkna" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
     <td align="center"><a href="https://lncn.dev"><img src="https://avatars.githubusercontent.com/u/41193328?v=4?s=100" width="100px;" alt=""/><br /><sub><b>i use arch btw</b></sub></a><br /><a href="#infra-lincolnthedev" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/BradleyDS2"><img src="https://avatars.githubusercontent.com/u/2174921?v=4?s=100" width="100px;" alt=""/><br /><sub><b>BradleyDS2</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=BradleyDS2" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/nduja"><img src="https://avatars.githubusercontent.com/u/69299134?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Robbo</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=nduja" title="Code">💻</a></td>
   </tr>
 </table>
 

gulpfile.js

@@ -55,7 +55,7 @@ gulp.task('minify-css', () => {
 gulp.task('copy-files', () => {
 	return gulp.src([
 			'public/*.*',
-			'public/img/*',
+			'public/img/**',
 			'public/webfonts/*',
 			'public/js/*.min.js'
 		], {

migration/sort_title.12.cr

@@ -0,0 +1,94 @@
+class SortTitle < MG::Base
+  def up : String
+    <<-SQL
+    -- add sort_title column to ids and titles
+    ALTER TABLE ids ADD COLUMN sort_title TEXT;
+    ALTER TABLE titles ADD COLUMN sort_title TEXT;
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    -- remove sort_title column from ids
+    ALTER TABLE ids RENAME TO tmp;
+
+    CREATE TABLE ids (
+      path TEXT NOT NULL,
+      id TEXT NOT NULL,
+      signature TEXT,
+      unavailable INTEGER NOT NULL DEFAULT 0
+    );
+
+    INSERT INTO ids
+    SELECT path, id, signature, unavailable
+    FROM tmp;
+
+    DROP TABLE tmp;
+
+    -- recreate the indices
+    CREATE UNIQUE INDEX path_idx ON ids (path);
+    CREATE UNIQUE INDEX id_idx ON ids (id);
+
+    -- recreate the foreign key constraint on thumbnails
+    ALTER TABLE thumbnails RENAME TO tmp;
+
+    CREATE TABLE thumbnails (
+      id TEXT NOT NULL,
+      data BLOB NOT NULL,
+      filename TEXT NOT NULL,
+      mime TEXT NOT NULL,
+      size INTEGER NOT NULL,
+      FOREIGN KEY (id) REFERENCES ids (id)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+
+    INSERT INTO thumbnails
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE UNIQUE INDEX tn_index ON thumbnails (id);
+
+    -- remove sort_title column from titles
+    ALTER TABLE titles RENAME TO tmp;
+
+    CREATE TABLE titles (
+      id TEXT NOT NULL,
+      path TEXT NOT NULL,
+      signature TEXT,
+      unavailable INTEGER NOT NULL DEFAULT 0
+    );
+
+    INSERT INTO titles
+    SELECT id, path, signature, unavailable
+    FROM tmp;
+
+    DROP TABLE tmp;
+
+    -- recreate the indices
+    CREATE UNIQUE INDEX titles_id_idx on titles (id);
+    CREATE UNIQUE INDEX titles_path_idx on titles (path);
+
+    -- recreate the foreign key constraint on tags
+    ALTER TABLE tags RENAME TO tmp;
+
+    CREATE TABLE tags (
+      id TEXT NOT NULL,
+      tag TEXT NOT NULL,
+      UNIQUE (id, tag),
+      FOREIGN KEY (id) REFERENCES titles (id)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+
+    INSERT INTO tags
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE INDEX tags_id_idx ON tags (id);
+    CREATE INDEX tags_tag_idx ON tags (tag);
+    SQL
+  end
+end

public/js/admin.js

@@ -31,6 +31,9 @@ const component = () => {
 					this.scanMs = data.milliseconds;
 					this.scanTitles = data.titles;
 				})
+				.catch(e => {
+					alert('danger', `Failed to trigger a scan. Error: ${e}`);
+				})
 				.always(() => {
 					this.scanning = false;
 				});

public/js/download-manager.js

@@ -55,7 +55,7 @@ const component = () => {
 		jobAction(action, event) {
 			let url = `${base_url}api/admin/mangadex/queue/${action}`;
 			if (event) {
-				const id = event.currentTarget.closest('tr').id.split('-')[1];
+				const id = event.currentTarget.closest('tr').id.split('-').slice(1).join('-');
 				url = `${url}?${$.param({
 					id: id
 				})}`;

public/js/plugin-download.js

@@ -1,139 +1,452 @@
-const loadPlugin = id => {
-	localStorage.setItem('plugin', id);
-	const url = `${location.protocol}//${location.host}${location.pathname}`;
-	const newURL = `${url}?${$.param({
-			plugin: id
-		})}`;
-	window.location.href = newURL;
-};
+const component = () => {
+	return {
+		plugins: [],
+		subscribable: false,
+		info: undefined,
+		pid: undefined,
+		chapters: undefined, // undefined: not searched yet, []: empty
+		manga: undefined, // undefined: not searched yet, []: empty
+		mid: undefined, // id of the selected manga
+		allChapters: [],
+		query: "",
+		mangaTitle: "",
+		searching: false,
+		adding: false,
+		sortOptions: [],
+		showFilters: false,
+		appliedFilters: [],
+		chaptersLimit: 500,
+		listManga: false,
+		subscribing: false,
+		subscriptionName: "",
 
-$(() => {
-	var storedID = localStorage.getItem('plugin');
-	if (storedID && storedID !== pid) {
-		loadPlugin(storedID);
-	} else {
-		$('#controls').removeAttr('hidden');
-	}
+		init() {
+			const tableObserver = new MutationObserver(() => {
+				console.log("table mutated");
+				$("#selectable").selectable({
+					filter: "tr",
+				});
+			});
+			tableObserver.observe($("table").get(0), {
+				childList: true,
+				subtree: true,
+			});
+			fetch(`${base_url}api/admin/plugin`)
+				.then((res) => res.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					this.plugins = data.plugins;
 
-	$('#search-input').keypress(event => {
-		if (event.which === 13) {
-			search();
-		}
-	});
-	$('#plugin-select').val(pid);
-	$('#plugin-select').change(() => {
-		const id = $('#plugin-select').val();
-		loadPlugin(id);
-	});
-});
+					const pid = localStorage.getItem("plugin");
+					if (pid && this.plugins.map((p) => p.id).includes(pid))
+						return this.loadPlugin(pid);
 
-let mangaTitle = "";
-let searching = false;
-const search = () => {
-	if (searching)
-		return;
+					if (this.plugins.length > 0)
+						this.loadPlugin(this.plugins[0].id);
+				})
+				.catch((e) => {
+					alert(
+						"danger",
+						`Failed to list the available plugins. Error: ${e}`
+					);
+				});
+		},
+		loadPlugin(pid) {
+			fetch(
+				`${base_url}api/admin/plugin/info?${new URLSearchParams({
+					plugin: pid,
+				})}`
+			)
+				.then((res) => res.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					this.info = data.info;
+					this.subscribable = data.subscribable;
+					this.pid = pid;
+				})
+				.catch((e) => {
+					alert(
+						"danger",
+						`Failed to get plugin metadata. Error: ${e}`
+					);
+				});
+		},
+		pluginChanged() {
+			this.manga = undefined;
+			this.chapters = undefined;
+			this.mid = undefined;
+			this.loadPlugin(this.pid);
+			localStorage.setItem("plugin", this.pid);
+		},
+		get chapterKeys() {
+			if (this.allChapters.length < 1) return [];
+			return Object.keys(this.allChapters[0]).filter(
+				(k) => !["manga_title"].includes(k)
+			);
+		},
+		searchChapters(query) {
+			this.searching = true;
+			this.allChapters = [];
+			this.sortOptions = [];
+			this.chapters = undefined;
+			this.listManga = false;
+			fetch(
+				`${base_url}api/admin/plugin/list?${new URLSearchParams({
+					plugin: this.pid,
+					query: query,
+				})}`
+			)
+				.then((res) => res.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					try {
+						this.mangaTitle = data.chapters[0].manga_title;
+						if (!this.mangaTitle) throw new Error();
+					} catch (e) {
+						this.mangaTitle = data.title;
+					}
 
-	const query = $.param({
-		query: $('#search-input').val(),
-		plugin: pid
-	});
-	$.ajax({
-			type: 'GET',
-			url: `${base_url}api/admin/plugin/list?${query}`,
-			contentType: "application/json",
-			dataType: 'json'
-		})
-		.done(data => {
-			console.log(data);
-			if (data.error) {
-				alert('danger', `Search failed. Error: ${data.error}`);
+					this.allChapters = data.chapters;
+					this.chapters = data.chapters;
+				})
+				.catch((e) => {
+					alert("danger", `Failed to list chapters. Error: ${e}`);
+				})
+				.finally(() => {
+					this.searching = false;
+				});
+		},
+		searchManga(query) {
+			this.searching = true;
+			this.allChapters = [];
+			this.chapters = undefined;
+			this.manga = undefined;
+			fetch(
+				`${base_url}api/admin/plugin/search?${new URLSearchParams({
+					plugin: this.pid,
+					query: query,
+				})}`
+			)
+				.then((res) => res.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					this.manga = data.manga;
+					this.listManga = true;
+				})
+				.catch((e) => {
+					alert("danger", `Search failed. Error: ${e}`);
+				})
+				.finally(() => {
+					this.searching = false;
+				});
+		},
+		search() {
+			const query = this.query.trim();
+			if (!query) return;
+
+			this.manga = undefined;
+			this.mid = undefined;
+			if (this.info.version === 1) {
+				this.searchChapters(query);
+			} else {
+				this.searchManga(query);
+			}
+		},
+		selectAll() {
+			$("tbody > tr").each((i, e) => {
+				$(e).addClass("ui-selected");
+			});
+		},
+		clearSelection() {
+			$("tbody > tr").each((i, e) => {
+				$(e).removeClass("ui-selected");
+			});
+		},
+		download() {
+			const selected = $("tbody > tr.ui-selected").get();
+			if (selected.length === 0) return;
+
+			UIkit.modal
+				.confirm(`Download ${selected.length} selected chapters?`)
+				.then(() => {
+					const ids = selected.map((e) => e.id);
+					const chapters = this.chapters.filter((c) =>
+						ids.includes(c.id)
+					);
+					console.log(chapters);
+					this.adding = true;
+					fetch(`${base_url}api/admin/plugin/download`, {
+						method: "POST",
+						body: JSON.stringify({
+							chapters,
+							plugin: this.pid,
+							title: this.mangaTitle,
+						}),
+						headers: {
+							"Content-Type": "application/json",
+						},
+					})
+						.then((res) => res.json())
+						.then((data) => {
+							if (!data.success) throw new Error(data.error);
+							const successCount = parseInt(data.success);
+							const failCount = parseInt(data.fail);
+							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>.`
+							);
+						})
+						.catch((e) => {
+							alert(
+								"danger",
+								`Failed to add chapters to the download queue. Error: ${e}`
+							);
+						})
+						.finally(() => {
+							this.adding = false;
+						});
+				});
+		},
+		thClicked(event) {
+			const idx = parseInt(event.currentTarget.id.split("-")[1]);
+			if (idx === undefined || isNaN(idx)) return;
+			const curOption = this.sortOptions[idx];
+			let option;
+			this.sortOptions = [];
+			switch (curOption) {
+				case 1:
+					option = -1;
+					break;
+				case -1:
+					option = 0;
+					break;
+				default:
+					option = 1;
+			}
+			this.sortOptions[idx] = option;
+			this.sort(this.chapterKeys[idx], option);
+		},
+		// Returns an array of filtered but unsorted chapters. Useful when
+		// 	reseting the sort options.
+		get filteredChapters() {
+			let ary = this.allChapters.slice();
+
+			console.log("initial size:", ary.length);
+			for (let filter of this.appliedFilters) {
+				if (!filter.value) continue;
+				if (filter.type === "array" && filter.value === "all") continue;
+				if (filter.type.startsWith("number") && isNaN(filter.value))
+					continue;
+
+				if (filter.type === "string") {
+					ary = ary.filter((ch) =>
+						ch[filter.key]
+							.toLowerCase()
+							.includes(filter.value.toLowerCase())
+					);
+				}
+				if (filter.type === "number-min") {
+					ary = ary.filter(
+						(ch) => Number(ch[filter.key]) >= Number(filter.value)
+					);
+				}
+				if (filter.type === "number-max") {
+					ary = ary.filter(
+						(ch) => Number(ch[filter.key]) <= Number(filter.value)
+					);
+				}
+				if (filter.type === "date-min") {
+					ary = ary.filter(
+						(ch) => Number(ch[filter.key]) >= Number(filter.value)
+					);
+				}
+				if (filter.type === "date-max") {
+					ary = ary.filter(
+						(ch) => Number(ch[filter.key]) <= Number(filter.value)
+					);
+				}
+				if (filter.type === "array") {
+					ary = ary.filter((ch) =>
+						ch[filter.key]
+							.map((s) =>
+								typeof s === "string" ? s.toLowerCase() : s
+							)
+							.includes(filter.value.toLowerCase())
+					);
+				}
+
+				console.log("filtered size:", ary.length);
+			}
+
+			return ary;
+		},
+		// option:
+		// 	- 1: asending
+		// 	- -1: desending
+		// 	- 0: unsorted
+		sort(key, option) {
+			if (option === 0) {
+				this.chapters = this.filteredChapters;
 				return;
 			}
-			mangaTitle = data.title;
-			$('#title-text').text(data.title);
-			buildTable(data.chapters);
-		})
-		.fail((jqXHR, status) => {
-			alert('danger', `Search failed. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-		})
-		.always(() => {});
-};
 
-const buildTable = (chapters) => {
-	$('#table').attr('hidden', '');
-	$('table').empty();
-
-	const keys = Object.keys(chapters[0]).map(k => `<th>${k}</th>`).join('');
-	const thead = `<thead><tr>${keys}</tr></thead>`;
-	$('table').append(thead);
-
-	const rows = chapters.map(ch => {
-		const tds = Object.values(ch).map(v => `<td>${v}</td>`).join('');
-		return `<tr data-id="${ch.id}" data-title="${ch.title}">${tds}</tr>`;
-	});
-	const tbody = `<tbody id="selectable">${rows}</tbody>`;
-	$('table').append(tbody);
-
-	$('#selectable').selectable({
-		filter: 'tr'
-	});
-
-	$('#table table').tablesorter();
-	$('#table').removeAttr('hidden');
-};
-
-const selectAll = () => {
-	$('tbody > tr').each((i, e) => {
-		$(e).addClass('ui-selected');
-	});
-};
-
-const unselect = () => {
-	$('tbody > tr').each((i, e) => {
-		$(e).removeClass('ui-selected');
-	});
-};
-
-const download = () => {
-	const selected = $('tbody > tr.ui-selected');
-	if (selected.length === 0) return;
-	UIkit.modal.confirm(`Download ${selected.length} selected chapters?`).then(() => {
-		$('#download-btn').attr('hidden', '');
-		$('#download-spinner').removeAttr('hidden');
-		const chapters = selected.map((i, e) => {
-			return {
-				id: $(e).attr('data-id'),
-				title: $(e).attr('data-title')
-			}
-		}).get();
-		console.log(chapters);
-		$.ajax({
-				type: 'POST',
-				url: base_url + 'api/admin/plugin/download',
-				data: JSON.stringify({
-					plugin: pid,
-					chapters: chapters,
-					title: mangaTitle
-				}),
-				contentType: "application/json",
-				dataType: 'json'
-			})
-			.done(data => {
-				console.log(data);
-				if (data.error) {
-					alert('danger', `Failed to add chapters to the download queue. Error: ${data.error}`);
-					return;
-				}
-				const successCount = parseInt(data.success);
-				const failCount = parseInt(data.fail);
-				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}`);
-			})
-			.always(() => {
-				$('#download-spinner').attr('hidden', '');
-				$('#download-btn').removeAttr('hidden');
+			this.chapters = this.filteredChapters.sort((a, b) => {
+				const comp = this.compare(a[key], b[key]);
+				return option < 0 ? comp * -1 : comp;
 			});
-	});
+		},
+		compare(a, b) {
+			if (a === b) return 0;
+
+			// try numbers (also covers dates)
+			if (!isNaN(a) && !isNaN(b)) return Number(a) - Number(b);
+
+			const preprocessString = (val) => {
+				if (typeof val !== "string") return val;
+				return val.toLowerCase().replace(/\s\s/g, " ").trim();
+			};
+
+			return preprocessString(a) > preprocessString(b) ? 1 : -1;
+		},
+		fieldType(values) {
+			if (values.every((v) => this.numIsDate(v))) return "date";
+			if (values.every((v) => !isNaN(v))) return "number";
+			if (values.every((v) => Array.isArray(v))) return "array";
+			return "string";
+		},
+		get filters() {
+			if (this.allChapters.length < 1) return [];
+			const keys = Object.keys(this.allChapters[0]).filter(
+				(k) => !["manga_title", "id"].includes(k)
+			);
+			return keys.map((k) => {
+				let values = this.allChapters.map((c) => c[k]);
+				const type = this.fieldType(values);
+
+				if (type === "array") {
+					// if the type is an array, return the list of available elements
+					// example: an array of groups or authors
+					values = Array.from(
+						new Set(
+							values.flat().map((v) => {
+								if (typeof v === "string")
+									return v.toLowerCase();
+							})
+						)
+					);
+				}
+
+				return {
+					key: k,
+					type: type,
+					values: values,
+				};
+			});
+		},
+		get filterSettings() {
+			return $("#filter-form input:visible, #filter-form select:visible")
+				.get()
+				.map((i) => {
+					const type = i.getAttribute("data-filter-type");
+					let value = i.value.trim();
+					if (type.startsWith("date"))
+						value = value ? Date.parse(value).toString() : "";
+					return {
+						key: i.getAttribute("data-filter-key"),
+						value: value,
+						type: type,
+					};
+				});
+		},
+		applyFilters() {
+			this.appliedFilters = this.filterSettings;
+			this.chapters = this.filteredChapters;
+			this.sortOptions = [];
+		},
+		clearFilters() {
+			$("#filter-form input")
+				.get()
+				.forEach((i) => (i.value = ""));
+			$("#filter-form select").val("all");
+			this.appliedFilters = [];
+			this.chapters = this.filteredChapters;
+			this.sortOptions = [];
+		},
+		mangaSelected(event) {
+			const mid = event.currentTarget.getAttribute("data-id");
+			this.mid = mid;
+			this.searchChapters(mid);
+		},
+		subscribe(modal) {
+			this.subscribing = true;
+			fetch(`${base_url}api/admin/plugin/subscriptions`, {
+				method: "POST",
+				body: JSON.stringify({
+					filters: this.filterSettings,
+					plugin: this.pid,
+					name: this.subscriptionName.trim(),
+					manga: this.mangaTitle,
+					manga_id: this.mid,
+				}),
+				headers: {
+					"Content-Type": "application/json",
+				},
+			})
+				.then((res) => res.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					alert("success", "Subscription created");
+				})
+				.catch((e) => {
+					alert("danger", `Failed to subscribe. Error: ${e}`);
+				})
+				.finally(() => {
+					this.subscribing = false;
+					UIkit.modal(modal).hide();
+				});
+		},
+		numIsDate(num) {
+			return !isNaN(num) && Number(num) > 328896000000; // 328896000000 => 1 Jan, 1980
+		},
+		renderCell(value) {
+			if (this.numIsDate(value))
+				return `<span>${moment(Number(value)).format(
+					"MMM D, YYYY"
+				)}</span>`;
+			const maxLength = 40;
+			if (value && value.length > maxLength)
+				return `<span>${value.substr(
+					0,
+					maxLength
+				)}...</span><div uk-dropdown>${value}</div>`;
+			return `<span>${value}</span>`;
+		},
+		renderFilterRow(ft) {
+			const key = ft.key;
+			let type = ft.type;
+			switch (type) {
+				case "number-min":
+					type = "number (minimum value)";
+					break;
+				case "number-max":
+					type = "number (maximum value)";
+					break;
+				case "date-min":
+					type = "minimum date";
+					break;
+				case "date-max":
+					type = "maximum date";
+					break;
+			}
+			let value = ft.value;
+
+			if (ft.type.startsWith("number") && isNaN(value)) value = "";
+			else if (ft.type.startsWith("date") && value)
+				value = moment(Number(value)).format("MMM D, YYYY");
+
+			return `<td>${key}</td><td>${type}</td><td>${value}</td>`;
+		},
+	};
 };

public/js/reader.js

@@ -13,6 +13,8 @@ const readerComponent = () => {
 		selectedIndex: 0, // 0: not selected; 1: the first page
 		margin: 30,
 		preloadLookahead: 3,
+		enableRightToLeft: false,
+		fitType: 'vert',
 
 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -28,14 +30,16 @@ const readerComponent = () => {
 						return {
 							id: i + 1,
 							url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
-							width: d.width,
-							height: d.height,
+							width: d.width == 0 ? "100%" : d.width,
+							height: d.height == 0 ? "100%" : d.height,
 						};
 					});
 
-					const avgRatio = this.items.reduce((acc, cur) => {
+					// Note: for image types not supported by image_size.cr, the width and height will be 0, and so `avgRatio` will be `Infinity`.
+					// TODO: support more image types in image_size.cr
+					const avgRatio = dimensions.reduce((acc, cur) => {
 						return acc + cur.height / cur.width
-					}, 0) / this.items.length;
+					}, 0) / dimensions.length;
 
 					console.log(avgRatio);
 					this.longPages = avgRatio > 2;
@@ -57,13 +61,25 @@ const readerComponent = () => {
 
 					// Preload Images
 					this.preloadLookahead = +(localStorage.getItem('preloadLookahead') ?? 3);
-					const limit = Math.min(page + this.preloadLookahead, this.items.length + 1);
+					const limit = Math.min(page + this.preloadLookahead, this.items.length);
 					for (let idx = page + 1; idx <= limit; idx++) {
 						this.preloadImage(this.items[idx - 1].url);
 					}
 
+					const savedFitType = localStorage.getItem('fitType');
+					if (savedFitType) {
+						this.fitType = savedFitType;
+						$('#fit-select').val(savedFitType);
+					}
 					const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
 					this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
+
+					const savedRightToLeft = localStorage.getItem('enableRightToLeft');
+					if (savedRightToLeft === null) {
+						this.enableRightToLeft = false;
+					} else {
+						this.enableRightToLeft = (savedRightToLeft === 'true');
+					}
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -114,9 +130,9 @@ const readerComponent = () => {
 			if (this.mode === 'continuous') return;
 
 			if (event.key === 'ArrowLeft' || event.key === 'k')
-				this.flipPage(false);
+				this.flipPage(false ^ this.enableRightToLeft);
 			if (event.key === 'ArrowRight' || event.key === 'j')
-				this.flipPage(true);
+				this.flipPage(true ^ this.enableRightToLeft);
 		},
 		/**
 		 * Flips to the next or the previous page
@@ -127,7 +143,11 @@ const readerComponent = () => {
 			const idx = parseInt(this.curItem.id);
 			const newIdx = idx + (isNext ? 1 : -1);
 
-			if (newIdx <= 0 || newIdx > this.items.length) return;
+			if (newIdx <= 0) return;
+			if (newIdx > this.items.length) {
+				this.showControl(idx);
+				return;
+			}
 
 			if (newIdx + this.preloadLookahead < this.items.length + 1) {
 				this.preloadImage(this.items[newIdx + this.preloadLookahead - 1].url);
@@ -136,7 +156,7 @@ const readerComponent = () => {
 			this.toPage(newIdx);
 
 			if (this.enableFlipAnimation) {
-				if (isNext)
+				if (isNext ^ this.enableRightToLeft)
 					this.flipAnimation = 'right';
 				else
 					this.flipAnimation = 'left';
@@ -245,12 +265,20 @@ const readerComponent = () => {
 			});
 		},
 		/**
-		 * Shows the control modal
+		 * Handles clicked image
 		 *
 		 * @param {Event} event - The triggering event
 		 */
-		showControl(event) {
+		clickImage(event) {
 			const idx = event.currentTarget.id;
+			this.showControl(idx);
+		},
+		/**
+		 * Shows the control modal
+		 *
+		 * @param {number} idx - selected page index
+		 */
+		showControl(idx) {
 			this.selectedIndex = idx;
 			UIkit.modal($('#modal-sections')).show();
 		},
@@ -313,6 +341,11 @@ const readerComponent = () => {
 			this.toPage(this.selectedIndex);
 		},
 
+		fitChanged(){
+			this.fitType = $('#fit-select').val();
+			localStorage.setItem('fitType', this.fitType);
+		},
+
 		preloadLookaheadChanged() {
 			localStorage.setItem('preloadLookahead', this.preloadLookahead);
 		},
@@ -320,5 +353,9 @@ const readerComponent = () => {
 		enableFlipAnimationChanged() {
 			localStorage.setItem('enableFlipAnimation', this.enableFlipAnimation);
 		},
+
+		enableRightToLeftChanged() {
+			localStorage.setItem('enableRightToLeft', this.enableRightToLeft);
+		},
 	};
 }

public/js/subscription-manager.js

@@ -0,0 +1,147 @@
+const component = () => {
+	return {
+		subscriptions: [],
+		plugins: [],
+		pid: undefined,
+		subscription: undefined, // selected subscription
+		loading: false,
+
+		init() {
+			fetch(`${base_url}api/admin/plugin`)
+				.then((res) => res.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					this.plugins = data.plugins;
+
+					const pid = localStorage.getItem("plugin");
+					if (pid && this.plugins.map((p) => p.id).includes(pid))
+						this.pid = pid;
+					else if (this.plugins.length > 0)
+						this.pid = this.plugins[0].id;
+
+					this.list(pid);
+				})
+				.catch((e) => {
+					alert(
+						"danger",
+						`Failed to list the available plugins. Error: ${e}`
+					);
+				});
+		},
+		pluginChanged() {
+			localStorage.setItem("plugin", this.pid);
+			this.list(this.pid);
+		},
+		list(pid) {
+			if (!pid) return;
+			fetch(
+				`${base_url}api/admin/plugin/subscriptions?${new URLSearchParams(
+					{
+						plugin: pid,
+					}
+				)}`,
+				{
+					method: "GET",
+				}
+			)
+				.then((response) => response.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					this.subscriptions = data.subscriptions;
+				})
+				.catch((e) => {
+					alert(
+						"danger",
+						`Failed to list subscriptions. Error: ${e}`
+					);
+				});
+		},
+		renderStrCell(str) {
+			const maxLength = 40;
+			if (str.length > maxLength)
+				return `<td><span>${str.substring(
+					0,
+					maxLength
+				)}...</span><div uk-dropdown>${str}</div></td>`;
+			return `<td>${str}</td>`;
+		},
+		renderDateCell(timestamp) {
+			return `<td>${moment
+				.duration(moment.unix(timestamp).diff(moment()))
+				.humanize(true)}</td>`;
+		},
+		selected(event, modal) {
+			const id = event.currentTarget.getAttribute("sid");
+			this.subscription = this.subscriptions.find((s) => s.id === id);
+			UIkit.modal(modal).show();
+		},
+		renderFilterRow(ft) {
+			const key = ft.key;
+			let type = ft.type;
+			switch (type) {
+				case "number-min":
+					type = "number (minimum value)";
+					break;
+				case "number-max":
+					type = "number (maximum value)";
+					break;
+				case "date-min":
+					type = "minimum date";
+					break;
+				case "date-max":
+					type = "maximum date";
+					break;
+			}
+			let value = ft.value;
+
+			if (ft.type.startsWith("number") && isNaN(value)) value = "";
+			else if (ft.type.startsWith("date") && value)
+				value = moment(Number(value)).format("MMM D, YYYY");
+
+			return `<td>${key}</td><td>${type}</td><td>${value}</td>`;
+		},
+		actionHandler(event, type) {
+			const id = $(event.currentTarget).closest("tr").attr("sid");
+			if (type !== 'delete') return this.action(id, type);
+			UIkit.modal.confirm('Are you sure you want to delete the subscription? This cannot be undone.', {
+				labels: {
+					ok: 'Yes, delete it',
+					cancel: 'Cancel'
+				}
+			}).then(() => {
+				this.action(id, type);
+			});
+		},
+		action(id, type) {
+			if (this.loading) return;
+			this.loading = true;
+			fetch(
+				`${base_url}api/admin/plugin/subscriptions${type === 'update' ? '/update' : ''}?${new URLSearchParams(
+					{
+						plugin: this.pid,
+						subscription: id,
+					}
+				)}`,
+				{
+					method: type === 'delete' ? "DELETE" : 'POST'
+				}
+			)
+				.then((response) => response.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					if (type === 'update')
+						alert("success", `Checking updates for subscription ${id}. Check the log for the progress or come back to this page later.`);
+				})
+				.catch((e) => {
+					alert(
+						"danger",
+						`Failed to ${type} subscription. Error: ${e}`
+					);
+				})
+				.finally(() => {
+					this.loading = false;
+					this.list(this.pid);
+				});
+		},
+	};
+};

public/js/title.js

@@ -60,6 +60,11 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
 	UIkit.modal($('#modal')).show();
 }
 
+UIkit.util.on(document, 'hidden', '#modal', () => {
+	$('#read-btn').off('click');
+	$('#unread-btn').off('click');
+});
+
 const updateProgress = (tid, eid, page) => {
 	let url = `${base_url}api/progress/${tid}/${page}`
 	const query = $.param({
@@ -90,8 +95,6 @@ const renameSubmit = (name, eid) => {
 	const upload = $('.upload-field');
 	const titleId = upload.attr('data-title-id');
 
-	console.log(name);
-
 	if (name.length === 0) {
 		alert('danger', 'The display name should not be empty');
 		return;
@@ -122,15 +125,47 @@ const renameSubmit = (name, eid) => {
 		});
 };
 
+const renameSortNameSubmit = (name, eid) => {
+	const upload = $('.upload-field');
+	const titleId = upload.attr('data-title-id');
+
+	const params = {};
+	if (eid) params.eid = eid;
+	if (name) params.name = name;
+	const query = $.param(params);
+	let url = `${base_url}api/admin/sort_title/${titleId}?${query}`;
+
+	$.ajax({
+			type: 'PUT',
+			url,
+			contentType: 'application/json',
+			dataType: 'json'
+		})
+		.done(data => {
+			if (data.error) {
+				alert('danger', `Failed to update sort title. Error: ${data.error}`);
+				return;
+			}
+			location.reload();
+		})
+		.fail((jqXHR, status) => {
+			alert('danger', `Failed to update sort title. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+		});
+};
+
 const edit = (eid) => {
 	const cover = $('#edit-modal #cover');
 	let url = cover.attr('data-title-cover');
 	let displayName = $('h2.uk-title > span').text();
+	let fileTitle = $('h2.uk-title').attr('data-file-title');
+	let sortTitle = $('h2.uk-title').attr('data-sort-title');
 
 	if (eid) {
 		const item = $(`#${eid}`);
 		url = item.find('img').attr('data-src');
 		displayName = item.find('.uk-card-title').attr('data-title');
+		fileTitle = item.find('.uk-card-title').attr('data-file-title');
+		sortTitle = item.find('.uk-card-title').attr('data-sort-title');
 		$('#title-progress-control').attr('hidden', '');
 	} else {
 		$('#title-progress-control').removeAttr('hidden');
@@ -140,14 +175,26 @@ const edit = (eid) => {
 
 	const displayNameField = $('#display-name-field');
 	displayNameField.attr('value', displayName);
-	console.log(displayNameField);
+	displayNameField.attr('placeholder', fileTitle);
 	displayNameField.keyup(event => {
 		if (event.keyCode === 13) {
-			renameSubmit(displayNameField.val(), eid);
+			renameSubmit(displayNameField.val() || fileTitle, eid);
 		}
 	});
 	displayNameField.siblings('a.uk-form-icon').click(() => {
-		renameSubmit(displayNameField.val(), eid);
+		renameSubmit(displayNameField.val() || fileTitle, eid);
+	});
+
+	const sortTitleField = $('#sort-title-field');
+	sortTitleField.val(sortTitle);
+	sortTitleField.attr('placeholder', fileTitle);
+	sortTitleField.keyup(event => {
+		if (event.keyCode === 13) {
+			renameSortNameSubmit(sortTitleField.val(), eid);
+		}
+	});
+	sortTitleField.siblings('a.uk-form-icon').click(() => {
+		renameSortNameSubmit(sortTitleField.val(), eid);
 	});
 
 	setupUpload(eid);
@@ -155,6 +202,16 @@ const edit = (eid) => {
 	UIkit.modal($('#edit-modal')).show();
 };
 
+UIkit.util.on(document, 'hidden', '#edit-modal', () => {
+	const displayNameField = $('#display-name-field');
+	displayNameField.off('keyup');
+	displayNameField.off('click');
+
+	const sortTitleField = $('#sort-title-field');
+	sortTitleField.off('keyup');
+	sortTitleField.off('click');
+});
+
 const setupUpload = (eid) => {
 	const upload = $('.upload-field');
 	const bar = $('#upload-progress').get(0);
@@ -166,7 +223,6 @@ const setupUpload = (eid) => {
 		queryObj['eid'] = eid;
 	const query = $.param(queryObj);
 	const url = `${base_url}api/admin/upload/cover?${query}`;
-	console.log(url);
 	UIkit.upload('.upload-field', {
 		url: url,
 		name: 'file',

public/manifest.json

@@ -0,0 +1,23 @@
+{
+	"name": "Mango",
+	"description": "Mango: A self-hosted manga server and web reader",
+	"icons": [
+		{
+			"src": "/img/icons/icon_x96.png",
+			"sizes": "96x96",
+			"type": "image/png"
+		},
+		{
+			"src": "/img/icons/icon_x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/img/icons/icon_x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"display": "fullscreen",
+	"start_url": "/"
+}

shard.lock

@@ -50,7 +50,7 @@ shards:
 
   koa:
     git: https://github.com/hkalexling/koa.git
-    version: 0.8.0
+    version: 0.9.0
 
   mg:
     git: https://github.com/hkalexling/mg.git
@@ -68,6 +68,10 @@ shards:
     git: https://github.com/luislavena/radix.git
     version: 0.4.1
 
+  sanitize:
+    git: https://github.com/hkalexling/sanitize.git
+    version: 0.1.0+git.commit.e09520e972d0d9b70b71bb003e6831f7c2c59dce
+
   sqlite3:
     git: https://github.com/crystal-lang/crystal-sqlite3.git
     version: 0.18.0

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.24.0
+version: 0.27.0
 
 authors:
   - Alex Ling <hkalexling@gmail.com>
@@ -42,3 +42,5 @@ dependencies:
     branch: master
   mg:
    github: hkalexling/mg
+  sanitize:
+    github: hkalexling/sanitize

spec/asset/plugins/plugin/info.json

@@ -0,0 +1,6 @@
+{
+	"id": "test",
+	"title": "Test Plugin",
+	"placeholder": "placeholder",
+	"wait_seconds": 1
+}

spec/config_spec.cr

@@ -1,14 +1,31 @@
 require "./spec_helper"
 
 describe Config do
-  it "creates config if it does not exist" do
-    with_default_config do |_, path|
+  it "creates default config if it does not exist" do
+    with_default_config do |config, path|
       File.exists?(path).should be_true
+      config.port.should eq 9000
     end
   end
 
   it "correctly loads config" do
     config = Config.load "spec/asset/test-config.yml"
     config.port.should eq 3000
+    config.base_url.should eq "/"
+  end
+
+  it "correctly reads config defaults from ENV" do
+    ENV["LOG_LEVEL"] = "debug"
+    config = Config.load "spec/asset/test-config.yml"
+    config.log_level.should eq "debug"
+    config.base_url.should eq "/"
+  end
+
+  it "correctly handles ENV truthiness" do
+    ENV["CACHE_ENABLED"] = "false"
+    config = Config.load "spec/asset/test-config.yml"
+    config.cache_enabled.should be_false
+    config.cache_log_enabled.should be_true
+    config.disable_login.should be_false
   end
 end

spec/plugin_spec.cr

@@ -0,0 +1,70 @@
+require "./spec_helper"
+
+describe Plugin do
+  describe "helper functions" do
+    it "mango.text" do
+      with_plugin do |plugin|
+        res = plugin.eval <<-JS
+        mango.text('<a href="https://github.com">Click Me<a>');
+      JS
+        res.should eq "Click Me"
+      end
+    end
+
+    it "mango.text returns empty string when no text" do
+      with_plugin do |plugin|
+        res = plugin.eval <<-JS
+        mango.text('<img src="https://github.com" />');
+        JS
+        res.should eq ""
+      end
+    end
+
+    it "mango.css" do
+      with_plugin do |plugin|
+        res = plugin.eval <<-JS
+        mango.css('<ul><li class="test">A</li><li class="test">B</li><li>C</li></ul>', 'li.test');
+
+        JS
+        res.should eq ["<li class=\"test\">A</li>", "<li class=\"test\">B</li>"]
+      end
+    end
+
+    it "mango.css returns empty array when no match" do
+      with_plugin do |plugin|
+        res = plugin.eval <<-JS
+        mango.css('<ul><li class="test">A</li><li class="test">B</li><li>C</li></ul>', 'li.noclass');
+        JS
+        res.should eq [] of String
+      end
+    end
+
+    it "mango.attribute" do
+      with_plugin do |plugin|
+        res = plugin.eval <<-JS
+        mango.attribute('<a href="https://github.com">Click Me<a>', 'href');
+        JS
+        res.should eq "https://github.com"
+      end
+    end
+
+    it "mango.attribute returns undefined when no match" do
+      with_plugin do |plugin|
+        res = plugin.eval <<-JS
+        mango.attribute('<div />', 'href') === undefined;
+        JS
+        res.should be_true
+      end
+    end
+
+    # https://github.com/hkalexling/Mango/issues/320
+    it "mango.attribute handles tags in attribute values" do
+      with_plugin do |plugin|
+        res = plugin.eval <<-JS
+        mango.attribute('<div data-a="<img />" data-b="test" />', 'data-b');
+        JS
+        res.should eq "test"
+      end
+    end
+  end
+end

spec/spec_helper.cr

@@ -3,6 +3,7 @@ require "../src/queue"
 require "../src/server"
 require "../src/config"
 require "../src/main_fiber"
+require "../src/plugin/plugin"
 
 class State
   @@hash = {} of String => String
@@ -54,3 +55,10 @@ def with_storage
     end
   end
 end
+
+def with_plugin
+  with_default_config do
+    plugin = Plugin.new "test", "spec/asset/plugins"
+    yield plugin
+  end
+end

src/config.cr

@@ -1,46 +1,51 @@
 require "yaml"
 
 class Config
+  private OPTIONS = {
+    "host"                                => "0.0.0.0",
+    "port"                                => 9000,
+    "base_url"                            => "/",
+    "session_secret"                      => "mango-session-secret",
+    "library_path"                        => "~/mango/library",
+    "library_cache_path"                  => "~/mango/library.yml.gz",
+    "db_path"                             => "~/mango.db",
+    "queue_db_path"                       => "~/mango/queue.db",
+    "scan_interval_minutes"               => 5,
+    "thumbnail_generation_interval_hours" => 24,
+    "log_level"                           => "info",
+    "upload_path"                         => "~/mango/uploads",
+    "plugin_path"                         => "~/mango/plugins",
+    "download_timeout_seconds"            => 30,
+    "cache_enabled"                       => true,
+    "cache_size_mbs"                      => 50,
+    "cache_log_enabled"                   => true,
+    "disable_login"                       => false,
+    "default_username"                    => "",
+    "auth_proxy_header_name"              => "",
+    "plugin_update_interval_hours"        => 24,
+  }
+
   include YAML::Serializable
 
   @[YAML::Field(ignore: true)]
   property path : String = ""
-  property host : String = "0.0.0.0"
-  property port : Int32 = 9000
-  property base_url : String = "/"
-  property session_secret : String = "mango-session-secret"
-  property library_path : String = File.expand_path "~/mango/library",
-    home: true
-  property library_cache_path = File.expand_path "~/mango/library.yml.gz",
-    home: true
-  property db_path : String = File.expand_path "~/mango/mango.db", home: true
-  property scan_interval_minutes : Int32 = 5
-  property thumbnail_generation_interval_hours : Int32 = 24
-  property log_level : String = "info"
-  property upload_path : String = File.expand_path "~/mango/uploads",
-    home: true
-  property plugin_path : String = File.expand_path "~/mango/plugins",
-    home: true
-  property download_timeout_seconds : Int32 = 30
-  property cache_enabled = false
-  property cache_size_mbs = 50
-  property cache_log_enabled = true
-  property disable_login = false
-  property default_username = ""
-  property auth_proxy_header_name = ""
-  property mangadex = Hash(String, String | Int32).new
 
-  @[YAML::Field(ignore: true)]
-  @mangadex_defaults = {
-    "base_url"               => "https://mangadex.org",
-    "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}",
-  }
+  # Go through the options constant above and define them as properties.
+  #   Allow setting the default values through environment variables.
+  # Overall precedence: config file > environment variable > default value
+  {% begin %}
+    {% for k, v in OPTIONS %}
+        {% if v.is_a? StringLiteral %}
+          property {{k.id}} : String = ENV[{{k.upcase}}]? || {{ v }}
+        {% elsif v.is_a? NumberLiteral %}
+          property {{k.id}} : Int32 = (ENV[{{k.upcase}}]? || {{ v.id }}).to_i
+        {% elsif v.is_a? BoolLiteral %}
+          property {{k.id}} : Bool = env_is_true? {{ k.upcase }}, {{ v.id }}
+        {% else %}
+          raise "Unknown type in config option: {{ v.class_name.id }}"
+        {% end %}
+    {% end %}
+  {% end %}
 
   @@singlet : Config?
 
@@ -53,12 +58,12 @@ class Config
   end
 
   def self.load(path : String?)
-    path = "~/.config/mango/config.yml" if path.nil?
+    path = (ENV["CONFIG_PATH"]? || "~/.config/mango/config.yml") if path.nil?
     cfg_path = File.expand_path path, home: true
     if File.exists? cfg_path
       config = self.from_yaml File.read cfg_path
       config.path = path
-      config.fill_defaults
+      config.expand_paths
       config.preprocess
       return config
     end
@@ -66,7 +71,7 @@ class Config
          "Dumping the default config there."
     default = self.allocate
     default.path = path
-    default.fill_defaults
+    default.expand_paths
     cfg_dir = File.dirname cfg_path
     unless Dir.exists? cfg_dir
       Dir.mkdir_p cfg_dir
@@ -76,13 +81,9 @@ class Config
     default
   end
 
-  def fill_defaults
-    {% for hash_name in ["mangadex"] %}
-      @{{hash_name.id}}_defaults.map do |k, v|
-        if @{{hash_name.id}}[k]?.nil?
-          @{{hash_name.id}}[k] = v
-        end
-      end
+  def expand_paths
+    {% for p in %w(library library_cache db queue_db upload plugin) %}
+      @{{p.id}}_path = File.expand_path @{{p.id}}_path, home: true
     {% end %}
   end
 
@@ -97,24 +98,5 @@ 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/
-      Log.warn { "It looks like you are using the deprecated MangaDex API " \
-                 "v1 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
-    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
 end

src/handlers/auth_handler.cr

@@ -6,6 +6,7 @@ class AuthHandler < Kemal::Handler
   # Some of the code is copied form kemalcr/kemal-basic-auth on GitHub
 
   BASIC        = "Basic"
+  BEARER       = "Bearer"
   AUTH         = "Authorization"
   AUTH_MESSAGE = "Could not verify your access level for that URL.\n" \
                  "You have to login with proper credentials"
@@ -18,8 +19,14 @@ class AuthHandler < Kemal::Handler
   end
 
   def require_auth(env)
-    env.session.string "callback", env.request.path
-    redirect env, "/login"
+    if request_path_startswith env, ["/api"]
+      # Do not redirect API requests
+      env.response.status_code = 401
+      send_text env, "Unauthorized"
+    else
+      env.session.string "callback", env.request.path
+      redirect env, "/login"
+    end
   end
 
   def validate_token(env)
@@ -35,13 +42,18 @@ class AuthHandler < Kemal::Handler
   def validate_auth_header(env)
     if env.request.headers[AUTH]?
       if value = env.request.headers[AUTH]
-        if value.size > 0 && value.starts_with?(BASIC)
+        if value.starts_with? BASIC
           token = verify_user value
           return false if token.nil?
 
           env.session.string "token", token
           return true
         end
+        if value.starts_with? BEARER
+          session_id = value.split(" ")[1]
+          token = Kemal::Session.get(session_id).try &.string? "token"
+          return !token.nil? && Storage.default.verify_token token
+        end
       end
     end
     false
@@ -54,15 +66,20 @@ class AuthHandler < Kemal::Handler
   end
 
   def call(env)
-    # Skip all authentication if requesting /login, /logout, or a static file
-    if request_path_startswith(env, ["/login", "/logout"]) ||
+    # OPTIONS requests do not require authentication
+    if env.request.method === "OPTIONS"
+      return call_next(env)
+    end
+    # Skip all authentication if requesting /login, /logout, /api/login,
+    #   or a static file
+    if request_path_startswith(env, ["/login", "/logout", "/api/login"]) ||
        requesting_static_file env
       return call_next(env)
     end
 
     # Check user is logged in
-    if validate_token env
-      # Skip if the request has a valid token
+    if validate_token(env) || validate_auth_header(env)
+      # Skip if the request has a valid token (either from cookies or header)
     elsif Config.current.disable_login
       # Check default username if login is disabled
       unless Storage.default.username_exists Config.current.default_username

src/handlers/cors_handler.cr

@@ -0,0 +1,8 @@
+class CORSHandler < Kemal::Handler
+  def call(env)
+    if request_path_startswith env, ["/api"]
+      env.response.headers["Access-Control-Allow-Origin"] = "*"
+    end
+    call_next env
+  end
+end

src/library/archive_entry.cr

@@ -0,0 +1,111 @@
+require "yaml"
+
+require "./entry"
+
+class ArchiveEntry < Entry
+  include YAML::Serializable
+
+  getter zip_path : String
+
+  def initialize(@zip_path, @book)
+    storage = Storage.default
+    @path = @zip_path
+    @encoded_path = URI.encode @zip_path
+    @title = File.basename @zip_path, File.extname @zip_path
+    @encoded_title = URI.encode @title
+    @size = (File.size @zip_path).humanize_bytes
+    id = storage.get_entry_id @zip_path, File.signature(@zip_path)
+    if id.nil?
+      id = random_str
+      storage.insert_entry_id({
+        path:      @zip_path,
+        id:        id,
+        signature: File.signature(@zip_path).to_s,
+      })
+    end
+    @id = id
+    @mtime = File.info(@zip_path).modification_time
+
+    unless File.readable? @zip_path
+      @err_msg = "File #{@zip_path} is not readable."
+      Logger.warn "#{@err_msg} Please make sure the " \
+                  "file permission is configured correctly."
+      return
+    end
+
+    archive_exception = validate_archive @zip_path
+    unless archive_exception.nil?
+      @err_msg = "Archive error: #{archive_exception}"
+      Logger.warn "Unable to extract archive #{@zip_path}. " \
+                  "Ignoring it. #{@err_msg}"
+      return
+    end
+
+    file = ArchiveFile.new @zip_path
+    @pages = file.entries.count do |e|
+      SUPPORTED_IMG_TYPES.includes? \
+        MIME.from_filename? e.filename
+    end
+    file.close
+  end
+
+  private def sorted_archive_entries
+    ArchiveFile.open @zip_path do |file|
+      entries = file.entries
+        .select { |e|
+          SUPPORTED_IMG_TYPES.includes? \
+            MIME.from_filename? e.filename
+        }
+        .sort! { |a, b|
+          compare_numerically a.filename, b.filename
+        }
+      yield file, entries
+    end
+  end
+
+  def read_page(page_num)
+    raise "Unreadble archive. #{@err_msg}" if @err_msg
+    img = nil
+    begin
+      sorted_archive_entries do |file, entries|
+        page = entries[page_num - 1]
+        data = file.read_entry page
+        if data
+          img = Image.new data, MIME.from_filename(page.filename),
+            page.filename, data.size
+        end
+      end
+    rescue e
+      Logger.warn "Unable to read page #{page_num} of #{@zip_path}. Error: #{e}"
+    end
+    img
+  end
+
+  def page_dimensions
+    sizes = [] of Hash(String, Int32)
+    sorted_archive_entries do |file, entries|
+      entries.each_with_index do |e, i|
+        begin
+          data = file.read_entry(e).not_nil!
+          size = ImageSize.get data
+          sizes << {
+            "width"  => size.width,
+            "height" => size.height,
+          }
+        rescue e
+          Logger.warn "Failed to read page #{i} of entry #{zip_path}. #{e}"
+          sizes << {"width" => 1000_i32, "height" => 1000_i32}
+        end
+      end
+    end
+    sizes
+  end
+
+  def examine : Bool
+    File.exists? @zip_path
+  end
+
+  def self.is_valid?(path : String) : Bool
+    is_supported_file path
+  end
+end

src/library/cache.cr

@@ -1,6 +1,7 @@
 require "digest"
 
 require "./entry"
+require "./title"
 require "./types"
 
 # Base class for an entry in the LRU cache.
@@ -75,12 +76,37 @@ class SortedEntriesCacheEntry < CacheEntry(Array(String), Array(Entry))
                    entries : Array(Entry), opt : SortOptions?)
     entries_sig = Digest::SHA1.hexdigest (entries.map &.id).to_s
     user_context = opt && opt.method == SortMethod::Progress ? username : ""
-    sig = Digest::SHA1.hexdigest (book_id + entries_sig + user_context +
-                                  (opt ? opt.to_tuple.to_s : "nil"))
+    sig = Digest::SHA1.hexdigest(book_id + entries_sig + user_context +
+                                 (opt ? opt.to_tuple.to_s : "nil"))
     "#{sig}:sorted_entries"
   end
 end
 
+class SortedTitlesCacheEntry < CacheEntry(Array(String), Array(Title))
+  def self.to_save_t(value : Array(Title))
+    value.map &.id
+  end
+
+  def self.to_return_t(value : Array(String))
+    value.map { |title_id| Library.default.title_hash[title_id].not_nil! }
+  end
+
+  def instance_size
+    instance_sizeof(SortedTitlesCacheEntry) +   # sizeof itself
+      instance_sizeof(String) + @key.bytesize + # allocated memory for @key
+      @value.size * (instance_sizeof(String) + sizeof(String)) +
+      @value.sum(&.bytesize) # elements in Array(String)
+  end
+
+  def self.gen_key(username : String, titles : Array(Title), opt : SortOptions?)
+    titles_sig = Digest::SHA1.hexdigest (titles.map &.id).to_s
+    user_context = opt && opt.method == SortMethod::Progress ? username : ""
+    sig = Digest::SHA1.hexdigest(titles_sig + user_context +
+                                 (opt ? opt.to_tuple.to_s : "nil"))
+    "#{sig}:sorted_titles"
+  end
+end
+
 class String
   def instance_size
     instance_sizeof(String) + bytesize
@@ -101,14 +127,18 @@ struct Tuple(*T)
   end
 end
 
-alias CacheableType = Array(Entry) | String | Tuple(String, Int32)
+alias CacheableType = Array(Entry) | Array(Title) | String |
+                      Tuple(String, Int32)
 alias CacheEntryType = SortedEntriesCacheEntry |
+                       SortedTitlesCacheEntry |
                        CacheEntry(String, String) |
                        CacheEntry(Tuple(String, Int32), Tuple(String, Int32))
 
 def generate_cache_entry(key : String, value : CacheableType)
   if value.is_a? Array(Entry)
     SortedEntriesCacheEntry.new key, value
+  elsif value.is_a? Array(Title)
+    SortedTitlesCacheEntry.new key, value
   else
     CacheEntry(typeof(value), typeof(value)).new key, value
   end

src/library/dir_entry.cr

@@ -0,0 +1,132 @@
+require "yaml"
+
+require "./entry"
+
+class DirEntry < Entry
+  include YAML::Serializable
+
+  getter dir_path : String
+
+  @[YAML::Field(ignore: true)]
+  @sorted_files : Array(String)?
+
+  @signature : String
+
+  def initialize(@dir_path, @book)
+    storage = Storage.default
+    @path = @dir_path
+    @encoded_path = URI.encode @dir_path
+    @title = File.basename @dir_path
+    @encoded_title = URI.encode @title
+
+    unless File.readable? @dir_path
+      @err_msg = "Directory #{@dir_path} is not readable."
+      Logger.warn "#{@err_msg} Please make sure the " \
+                  "file permission is configured correctly."
+      return
+    end
+
+    unless DirEntry.is_valid? @dir_path
+      @err_msg = "Directory #{@dir_path} is not valid directory entry."
+      Logger.warn "#{@err_msg} Please make sure the " \
+                  "directory has valid images."
+      return
+    end
+
+    size_sum = 0
+    sorted_files.each do |file_path|
+      size_sum += File.size file_path
+    end
+    @size = size_sum.humanize_bytes
+
+    @signature = Dir.directory_entry_signature @dir_path
+    id = storage.get_entry_id @dir_path, @signature
+    if id.nil?
+      id = random_str
+      storage.insert_entry_id({
+        path:      @dir_path,
+        id:        id,
+        signature: @signature,
+      })
+    end
+    @id = id
+
+    @mtime = sorted_files.map do |file_path|
+      File.info(file_path).modification_time
+    end.max
+    @pages = sorted_files.size
+  end
+
+  def read_page(page_num)
+    img = nil
+    begin
+      files = sorted_files
+      file_path = files[page_num - 1]
+      data = File.read(file_path).to_slice
+      if data
+        img = Image.new data, MIME.from_filename(file_path),
+          File.basename(file_path), data.size
+      end
+    rescue e
+      Logger.warn "Unable to read page #{page_num} of #{@dir_path}. Error: #{e}"
+    end
+    img
+  end
+
+  def page_dimensions
+    sizes = [] of Hash(String, Int32)
+    sorted_files.each_with_index do |path, i|
+      data = File.read(path).to_slice
+      begin
+        data.not_nil!
+        size = ImageSize.get data
+        sizes << {
+          "width"  => size.width,
+          "height" => size.height,
+        }
+      rescue e
+        Logger.warn "Failed to read page #{i} of entry #{@dir_path}. #{e}"
+        sizes << {"width" => 1000_i32, "height" => 1000_i32}
+      end
+    end
+    sizes
+  end
+
+  def examine : Bool
+    existence = File.exists? @dir_path
+    return false unless existence
+    files = DirEntry.image_files @dir_path
+    signature = Dir.directory_entry_signature @dir_path
+    existence = files.size > 0 && @signature == signature
+    @sorted_files = nil unless existence
+
+    # For more efficient, update a directory entry with new property
+    # and return true like Title.examine
+    existence
+  end
+
+  def sorted_files
+    cached_sorted_files = @sorted_files
+    return cached_sorted_files if cached_sorted_files
+    @sorted_files = DirEntry.sorted_image_files @dir_path
+    @sorted_files.not_nil!
+  end
+
+  def self.image_files(dir_path)
+    Dir.entries(dir_path)
+      .reject(&.starts_with? ".")
+      .map { |fn| File.join dir_path, fn }
+      .select { |fn| is_supported_image_file fn }
+      .reject { |fn| File.directory? fn }
+      .select { |fn| File.readable? fn }
+  end
+
+  def self.sorted_image_files(dir_path)
+    self.image_files(dir_path)
+      .sort { |a, b| compare_numerically a, b }
+  end
+
+  def self.is_valid?(path : String) : Bool
+    image_files(path).size > 0
+  end
+end

src/library/entry.cr

@@ -1,61 +1,58 @@
 require "image_size"
-require "yaml"
 
-class Entry
-  include YAML::Serializable
+private def node_has_key(node : YAML::Nodes::Mapping, key : String)
+  node.nodes
+    .map_with_index { |n, i| {n, i} }
+    .select(&.[1].even?)
+    .map(&.[0])
+    .select(YAML::Nodes::Scalar)
+    .map(&.as(YAML::Nodes::Scalar).value)
+    .includes? key
+end
 
-  getter zip_path : String, book : Title, title : String,
-    size : String, pages : Int32, id : String, encoded_path : String,
-    encoded_title : String, mtime : Time, err_msg : String?
+abstract class Entry
+  getter id : String, book : Title, title : String, path : String,
+    size : String, pages : Int32, mtime : Time,
+    encoded_path : String, encoded_title : String, err_msg : String?
 
-  def initialize(@zip_path, @book)
-    storage = Storage.default
-    @encoded_path = URI.encode @zip_path
-    @title = File.basename @zip_path, File.extname @zip_path
-    @encoded_title = URI.encode @title
-    @size = (File.size @zip_path).humanize_bytes
-    id = storage.get_entry_id @zip_path, File.signature(@zip_path)
-    if id.nil?
-      id = random_str
-      storage.insert_entry_id({
-        path:      @zip_path,
-        id:        id,
-        signature: File.signature(@zip_path).to_s,
-      })
+  def initialize(
+    @id, @title, @book, @path,
+    @size, @pages, @mtime,
+    @encoded_path, @encoded_title, @err_msg
+  )
+  end
+
+  def self.new(ctx : YAML::ParseContext, node : YAML::Nodes::Node)
+    unless node.is_a? YAML::Nodes::Mapping
+      raise "Unexpected node type in YAML"
     end
-    @id = id
-    @mtime = File.info(@zip_path).modification_time
-
-    unless File.readable? @zip_path
-      @err_msg = "File #{@zip_path} is not readable."
-      Logger.warn "#{@err_msg} Please make sure the " \
-                  "file permission is configured correctly."
-      return
+    # Doing YAML::Any.new(ctx, node) here causes a weird error, so
+    #   instead we are using a more hacky approach (see `node_has_key`).
+    # TODO: Use a more elegant approach
+    if node_has_key node, "zip_path"
+      ArchiveEntry.new ctx, node
+    elsif node_has_key node, "dir_path"
+      DirEntry.new ctx, node
+    else
+      raise "Unknown entry found in YAML cache. Try deleting the " \
+            "`library.yml.gz` file"
     end
-
-    archive_exception = validate_archive @zip_path
-    unless archive_exception.nil?
-      @err_msg = "Archive error: #{archive_exception}"
-      Logger.warn "Unable to extract archive #{@zip_path}. " \
-                  "Ignoring it. #{@err_msg}"
-      return
-    end
-
-    file = ArchiveFile.new @zip_path
-    @pages = file.entries.count do |e|
-      SUPPORTED_IMG_TYPES.includes? \
-        MIME.from_filename? e.filename
-    end
-    file.close
   end
 
   def build_json(*, slim = false)
     JSON.build do |json|
       json.object do
-        {% for str in ["zip_path", "title", "size", "id"] %}
-        json.field {{str}}, @{{str.id}}
+        {% for str in %w(path title size id) %}
+        json.field {{str}}, {{str.id}}
       {% end %}
+        if err_msg
+          json.field "err_msg", err_msg
+        end
+        json.field "zip_path", path # for API backward compatability
+        json.field "path", path
         json.field "title_id", @book.id
+        json.field "title_title", @book.title
+        json.field "sort_title", sort_title
         json.field "pages" { json.number @pages }
         unless slim
           json.field "display_name", @book.display_name @title
@@ -66,6 +63,38 @@ class Entry
     end
   end
 
+  @[YAML::Field(ignore: true)]
+  @sort_title : String?
+
+  def sort_title
+    sort_title_cached = @sort_title
+    return sort_title_cached if sort_title_cached
+    sort_title = @book.entry_sort_title_db id
+    if sort_title
+      @sort_title = sort_title
+      return sort_title
+    end
+    @sort_title = @title
+    @title
+  end
+
+  def set_sort_title(sort_title : String | Nil, username : String)
+    Storage.default.set_entry_sort_title id, sort_title
+    if sort_title == "" || sort_title.nil?
+      @sort_title = nil
+    else
+      @sort_title = sort_title
+    end
+
+    @book.entry_sort_title_cache = nil
+    @book.remove_sorted_entries_cache [SortMethod::Auto, SortMethod::Title],
+      username
+  end
+
+  def sort_title_db
+    @book.entry_sort_title_db @id
+  end
+
   def display_name
     @book.display_name @title
   end
@@ -75,7 +104,7 @@ class Entry
   end
 
   def cover_url
-    return "#{Config.current.base_url}img/icon.png" if @err_msg
+    return "#{Config.current.base_url}img/icons/icon_x192.png" if @err_msg
 
     unless @book.entry_cover_url_cache
       TitleInfo.new @book.dir do |info|
@@ -94,54 +123,6 @@ class Entry
     url
   end
 
-  private def sorted_archive_entries
-    ArchiveFile.open @zip_path do |file|
-      entries = file.entries
-        .select { |e|
-          SUPPORTED_IMG_TYPES.includes? \
-            MIME.from_filename? e.filename
-        }
-        .sort! { |a, b|
-          compare_numerically a.filename, b.filename
-        }
-      yield file, entries
-    end
-  end
-
-  def read_page(page_num)
-    raise "Unreadble archive. #{@err_msg}" if @err_msg
-    img = nil
-    sorted_archive_entries do |file, entries|
-      page = entries[page_num - 1]
-      data = file.read_entry page
-      if data
-        img = Image.new data, MIME.from_filename(page.filename), page.filename,
-          data.size
-      end
-    end
-    img
-  end
-
-  def page_dimensions
-    sizes = [] of Hash(String, Int32)
-    sorted_archive_entries do |file, entries|
-      entries.each_with_index do |e, i|
-        begin
-          data = file.read_entry(e).not_nil!
-          size = ImageSize.get data
-          sizes << {
-            "width"  => size.width,
-            "height" => size.height,
-          }
-        rescue e
-          Logger.warn "Failed to read page #{i} of entry #{zip_path}. #{e}"
-          sizes << {"width" => 1000_i32, "height" => 1000_i32}
-        end
-      end
-    end
-    sizes
-  end
-
   def next_entry(username)
     entries = @book.sorted_entries username
     idx = entries.index self
@@ -156,20 +137,6 @@ class Entry
     entries[idx - 1]
   end
 
-  def date_added
-    date_added = nil
-    TitleInfo.new @book.dir do |info|
-      info_da = info.date_added[@title]?
-      if info_da.nil?
-        date_added = info.date_added[@title] = ctime @zip_path
-        info.save
-      else
-        date_added = info_da
-      end
-    end
-    date_added.not_nil! # is it ok to set not_nil! here?
-  end
-
   # For backward backward compatibility with v0.1.0, we save entry titles
   #   instead of IDs in info.json
   def save_progress(username, page)
@@ -177,11 +144,7 @@ class Entry
     @book.parents.each do |parent|
       LRUCache.invalidate "#{parent.id}:#{username}:progress_sum"
     end
-    [false, true].each do |ascend|
-      sorted_entries_cache_key = SortedEntriesCacheEntry.gen_key @book.id,
-        username, @book.entries, SortOptions.new(SortMethod::Progress, ascend)
-      LRUCache.invalidate sorted_entries_cache_key
-    end
+    @book.remove_sorted_caches [SortMethod::Progress], username
 
     TitleInfo.new @book.dir do |info|
       if info.progress[username]?.nil?
@@ -253,7 +216,7 @@ class Entry
       end
       Storage.default.save_thumbnail @id, img
     rescue e
-      Logger.warn "Failed to generate thumbnail for file #{@zip_path}. #{e}"
+      Logger.warn "Failed to generate thumbnail for file #{path}. #{e}"
     end
 
     img
@@ -262,4 +225,34 @@ class Entry
   def get_thumbnail : Image?
     Storage.default.get_thumbnail @id
   end
+
+  def date_added : Time
+    date_added = Time::UNIX_EPOCH
+    TitleInfo.new @book.dir do |info|
+      info_da = info.date_added[@title]?
+      if info_da.nil?
+        date_added = info.date_added[@title] = ctime path
+        info.save
+      else
+        date_added = info_da
+      end
+    end
+    date_added
+  end
+
+  # Hack to have abstract class methods
+  # https://github.com/crystal-lang/crystal/issues/5956
+  private module ClassMethods
+    abstract def is_valid?(path : String) : Bool
+  end
+
+  macro inherited
+    extend ClassMethods
+  end
+
+  abstract def read_page(page_num)
+
+  abstract def page_dimensions
+
+  abstract def examine : Bool?
 end

src/library/library.cr

@@ -1,9 +1,38 @@
 class Library
+  struct ThumbnailContext
+    property current : Int32, total : Int32
+
+    def initialize
+      @current = 0
+      @total = 0
+    end
+
+    def progress
+      if total == 0
+        0
+      else
+        current / total
+      end
+    end
+
+    def reset
+      @current = 0
+      @total = 0
+    end
+
+    def increment
+      @current += 1
+    end
+  end
+
   include YAML::Serializable
 
   getter dir : String, title_ids : Array(String),
     title_hash : Hash(String, Title)
 
+  @[YAML::Field(ignore: true)]
+  getter thumbnail_ctx = ThumbnailContext.new
+
   use_default
 
   def save_instance
@@ -24,7 +53,23 @@ class Library
 
     begin
       Compress::Gzip::Reader.open path do |content|
-        @@default = Library.from_yaml content
+        loaded = Library.from_yaml content
+        # We will have to do a full restart in these cases. Otherwise having
+        #   two instances of the library will cause some weirdness.
+        if loaded.dir != Config.current.library_path
+          Logger.fatal "Cached library dir #{loaded.dir} does not match " \
+                       "current library dir #{Config.current.library_path}. " \
+                       "Deleting cache"
+          delete_cache_and_exit path
+        end
+        if loaded.title_ids.size > 0 &&
+           Storage.default.count_titles == 0
+          Logger.fatal "The library cache is inconsistent with the DB. " \
+                       "Deleting cache"
+          delete_cache_and_exit path
+        end
+        @@default = loaded
+        Logger.debug "Library cache loaded"
       end
       Library.default.register_jobs
     rescue e
@@ -39,9 +84,6 @@ class Library
     @title_ids = [] of String
     @title_hash = {} of String => Title
 
-    @entries_count = 0
-    @thumbnails_count = 0
-
     register_jobs
   end
 
@@ -97,14 +139,31 @@ class Library
     titles.flat_map &.deep_entries
   end
 
-  def build_json(*, slim = false, depth = -1)
+  def build_json(*, slim = false, depth = -1, sort_context = nil,
+                 percentage = false)
+    _titles = if sort_context
+                sorted_titles sort_context[:username],
+                  sort_context[:opt]
+              else
+                self.titles
+              end
     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.build_json(slim: slim, depth: depth)
+            _titles.each do |title|
+              json.raw title.build_json(slim: slim, depth: depth,
+                sort_context: sort_context, percentage: percentage)
+            end
+          end
+        end
+        if percentage && sort_context
+          json.field "title_percentages" do
+            json.array do
+              _titles.each do |title|
+                json.number title.load_percentage sort_context[:username]
+              end
             end
           end
         end
@@ -136,8 +195,12 @@ class Library
       deleted_entry_ids:         [] of String,
     }
 
+    library_paths = (Dir.entries @dir)
+      .select { |fn| !fn.starts_with? "." }
+      .map { |fn| File.join @dir, fn }
     @title_ids.select! do |title_id|
       title = @title_hash[title_id]
+      next false unless library_paths.includes? title.dir
       existence = title.examine examine_context
       unless existence
         examine_context["deleted_title_ids"].concat [title_id] +
@@ -152,14 +215,12 @@ class Library
     end
 
     cache = examine_context["cached_contents_signature"]
-    (Dir.entries @dir)
-      .select { |fn| !fn.starts_with? "." }
-      .map { |fn| File.join @dir, fn }
+    library_paths
       .select { |path| !(remained_title_dirs.includes? path) }
       .select { |path| File.directory? path }
       .map { |path| Title.new path, "", cache }
       .select { |title| !(title.entries.empty? && title.titles.empty?) }
-      .sort! { |a, b| a.title <=> b.title }
+      .sort! { |a, b| a.sort_title <=> b.sort_title }
       .each do |title|
         @title_hash[title.id] = title
         @title_ids << title.id
@@ -260,34 +321,29 @@ class Library
       .shuffle!
   end
 
-  def thumbnail_generation_progress
-    return 0 if @entries_count == 0
-    @thumbnails_count / @entries_count
-  end
-
   def generate_thumbnails
-    if @thumbnails_count > 0
+    if thumbnail_ctx.current > 0
       Logger.debug "Thumbnail generation in progress"
       return
     end
 
     Logger.info "Starting thumbnail generation"
     entries = deep_titles.flat_map(&.deep_entries).reject &.err_msg
-    @entries_count = entries.size
-    @thumbnails_count = 0
+    thumbnail_ctx.total = entries.size
+    thumbnail_ctx.current = 0
 
     # Report generation progress regularly
     spawn do
       loop do
-        unless @thumbnails_count == 0
+        unless thumbnail_ctx.current == 0
           Logger.debug "Thumbnail generation progress: " \
-                       "#{(thumbnail_generation_progress * 100).round 1}%"
+                       "#{(thumbnail_ctx.progress * 100).round 1}%"
         end
         # Generation is completed. We reset the count to 0 to allow subsequent
         #   calls to the function, and break from the loop to stop the progress
         #   report fiber
-        if thumbnail_generation_progress.to_i == 1
-          @thumbnails_count = 0
+        if thumbnail_ctx.progress.to_i == 1
+          thumbnail_ctx.reset
           break
         end
         sleep 10.seconds
@@ -301,7 +357,7 @@ class Library
         #   and CPU
         sleep 1.seconds
       end
-      @thumbnails_count += 1
+      thumbnail_ctx.increment
     end
     Logger.info "Thumbnail generation finished"
   end

src/library/title.cr

@@ -8,8 +8,13 @@ class Title
     entries : Array(Entry), title : String, id : String,
     encoded_title : String, mtime : Time, signature : UInt64,
     entry_cover_url_cache : Hash(String, String)?
-  setter entry_cover_url_cache : Hash(String, String)?
+  setter entry_cover_url_cache : Hash(String, String)?,
+    entry_sort_title_cache : Hash(String, String | Nil)?
 
+  @[YAML::Field(ignore: true)]
+  @sort_title : String?
+  @[YAML::Field(ignore: true)]
+  @entry_sort_title_cache : Hash(String, String | Nil)?
   @[YAML::Field(ignore: true)]
   @entry_display_name_cache : Hash(String, String)?
   @[YAML::Field(ignore: true)]
@@ -44,13 +49,18 @@ class Title
       path = File.join dir, fn
       if File.directory? path
         title = Title.new path, @id, cache
-        next if title.entries.size == 0 && title.titles.size == 0
-        Library.default.title_hash[title.id] = title
-        @title_ids << title.id
+        unless title.entries.size == 0 && title.titles.size == 0
+          Library.default.title_hash[title.id] = title
+          @title_ids << title.id
+        end
+        if DirEntry.is_valid? path
+          entry = DirEntry.new path, self
+          @entries << entry if entry.pages > 0 || entry.err_msg
+        end
         next
       end
       if is_supported_file path
-        entry = Entry.new path, self
+        entry = ArchiveEntry.new path, self
         @entries << entry if entry.pages > 0 || entry.err_msg
       end
     end
@@ -66,7 +76,7 @@ class Title
     end
     sorter = ChapterSorter.new @entries.map &.title
     @entries.sort! do |a, b|
-      sorter.compare a.title, b.title
+      sorter.compare a.sort_title, b.sort_title
     end
   end
 
@@ -102,7 +112,11 @@ class Title
 
     previous_titles_size = @title_ids.size
     @title_ids.select! do |title_id|
-      title = Library.default.get_title! title_id
+      title = Library.default.get_title title_id
+      unless title # for if data consistency broken
+        context["deleted_title_ids"].concat [title_id]
+        next false
+      end
       existence = title.examine context
       unless existence
         context["deleted_title_ids"].concat [title_id] +
@@ -118,12 +132,12 @@ class Title
 
     previous_entries_size = @entries.size
     @entries.select! do |entry|
-      existence = File.exists? entry.zip_path
+      existence = entry.examine
       Fiber.yield
       context["deleted_entry_ids"] << entry.id unless existence
       existence
     end
-    remained_entry_zip_paths = @entries.map &.zip_path
+    remained_entry_paths = @entries.map &.path
 
     is_titles_added = false
     is_entries_added = false
@@ -131,20 +145,49 @@ class Title
       next if fn.starts_with? "."
       path = File.join dir, fn
       if File.directory? path
+        unless remained_entry_paths.includes? path
+          if DirEntry.is_valid? path
+            entry = DirEntry.new path, self
+            if entry.pages > 0 || entry.err_msg
+              @entries << entry
+              is_entries_added = true
+              context["deleted_entry_ids"].select! do |deleted_entry_id|
+                entry.id != deleted_entry_id
+              end
+            end
+          end
+        end
+
         next if remained_title_dirs.includes? path
         title = Title.new path, @id, context["cached_contents_signature"]
-        next if title.entries.size == 0 && title.titles.size == 0
-        Library.default.title_hash[title.id] = title
-        @title_ids << title.id
-        is_titles_added = true
+        unless title.entries.size == 0 && title.titles.size == 0
+          Library.default.title_hash[title.id] = title
+          @title_ids << title.id
+          is_titles_added = true
+
+          # We think they are removed, but they are here!
+          # Cancel reserved jobs
+          revival_title_ids = [title.id] + title.deep_titles.map &.id
+          context["deleted_title_ids"].select! do |deleted_title_id|
+            !(revival_title_ids.includes? deleted_title_id)
+          end
+          revival_entry_ids = title.deep_entries.map &.id
+          context["deleted_entry_ids"].select! do |deleted_entry_id|
+            !(revival_entry_ids.includes? deleted_entry_id)
+          end
+        end
+
         next
       end
       if is_supported_file path
-        next if remained_entry_zip_paths.includes? path
-        entry = Entry.new path, self
+        next if remained_entry_paths.includes? path
+        entry = ArchiveEntry.new path, self
         if entry.pages > 0 || entry.err_msg
           @entries << entry
           is_entries_added = true
+          context["deleted_entry_ids"].select! do |deleted_entry_id|
+            entry.id != deleted_entry_id
+          end
         end
       end
     end
@@ -161,25 +204,45 @@ class Title
       end
     end
     if is_entries_added || previous_entries_size != @entries.size
-      sorter = ChapterSorter.new @entries.map &.title
+      sorter = ChapterSorter.new @entries.map &.sort_title
       @entries.sort! do |a, b|
-        sorter.compare a.title, b.title
+        sorter.compare a.sort_title, b.sort_title
       end
     end
 
-    true
+    if @title_ids.size > 0 || @entries.size > 0
+      true
+    else
+      context["deleted_title_ids"].concat [@id]
+      false
+    end
   end
 
   alias SortContext = NamedTuple(username: String, opt: SortOptions)
 
   def build_json(*, slim = false, depth = -1,
-                 sort_context : SortContext? = nil)
+                 sort_context : SortContext? = nil,
+                 percentage = false)
+    _titles = if sort_context
+                sorted_titles sort_context[:username],
+                  sort_context[:opt]
+              else
+                self.titles
+              end
+    _entries = if sort_context
+                 sorted_entries sort_context[:username],
+                   sort_context[:opt]
+               else
+                 @entries
+               end
+
     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 "sort_title", sort_title
         unless slim
           json.field "display_name", display_name
           json.field "cover_url", cover_url
@@ -188,25 +251,39 @@ class Title
         unless depth == 0
           json.field "titles" do
             json.array do
-              self.titles.each do |title|
+              _titles.each do |title|
                 json.raw title.build_json(slim: slim,
-                  depth: depth > 0 ? depth - 1 : depth)
+                  depth: depth > 0 ? depth - 1 : depth,
+                  sort_context: sort_context, percentage: percentage)
               end
             end
           end
           json.field "entries" do
             json.array do
-              _entries = if sort_context
-                           sorted_entries sort_context[:username],
-                             sort_context[:opt]
-                         else
-                           @entries
-                         end
               _entries.each do |entry|
                 json.raw entry.build_json(slim: slim)
               end
             end
           end
+          if percentage && sort_context
+            json.field "title_percentages" do
+              json.array do
+                _titles.each do |t|
+                  json.number t.load_percentage sort_context[:username]
+                end
+              end
+            end
+            json.field "entry_percentages" do
+              json.array do
+                load_percentage_for_all_entries(
+                  sort_context[:username],
+                  sort_context[:opt]
+                ).each do |p|
+                  json.number p.nan? ? 0 : p
+                end
+              end
+            end
+          end
         end
         json.field "parents" do
           json.array do
@@ -226,6 +303,15 @@ class Title
     @title_ids.map { |tid| Library.default.get_title! tid }
   end
 
+  def sorted_titles(username, opt : SortOptions? = nil)
+    if opt.nil?
+      opt = SortOptions.from_info_json @dir, username
+    end
+
+    # Helper function from src/util/util.cr
+    sort_titles titles, opt.not_nil!, username
+  end
+
   # Get all entries, including entries in nested titles
   def deep_entries
     return @entries if title_ids.empty?
@@ -262,6 +348,48 @@ class Title
     ary.join " and "
   end
 
+  def sort_title
+    sort_title_cached = @sort_title
+    return sort_title_cached if sort_title_cached
+    sort_title = Storage.default.get_title_sort_title id
+    if sort_title
+      @sort_title = sort_title
+      return sort_title
+    end
+    @sort_title = @title
+    @title
+  end
+
+  def set_sort_title(sort_title : String | Nil, username : String)
+    Storage.default.set_title_sort_title id, sort_title
+    if sort_title == "" || sort_title.nil?
+      @sort_title = nil
+    else
+      @sort_title = sort_title
+    end
+
+    if parents.size > 0
+      target = parents[-1].titles
+    else
+      target = Library.default.titles
+    end
+    remove_sorted_titles_cache target,
+      [SortMethod::Auto, SortMethod::Title], username
+  end
+
+  def sort_title_db
+    Storage.default.get_title_sort_title id
+  end
+
+  def entry_sort_title_db(entry_id)
+    unless @entry_sort_title_cache
+      @entry_sort_title_cache =
+        Storage.default.get_entries_sort_title @entries.map &.id
+    end
+
+    @entry_sort_title_cache.not_nil![entry_id]?
+  end
+
   def tags
     Storage.default.get_title_tags @id
   end
@@ -330,7 +458,7 @@ class Title
     cached_cover_url = @cached_cover_url
     return cached_cover_url unless cached_cover_url.nil?
 
-    url = "#{Config.current.base_url}img/icon.png"
+    url = "#{Config.current.base_url}img/icons/icon_x192.png"
     readable_entries = @entries.select &.err_msg.nil?
     if readable_entries.size > 0
       url = readable_entries[0].cover_url
@@ -448,28 +576,30 @@ class Title
 
     case opt.not_nil!.method
     when .title?
-      ary = @entries.sort { |a, b| compare_numerically a.title, b.title }
+      ary = @entries.sort do |a, b|
+        compare_numerically a.sort_title, b.sort_title
+      end
     when .time_modified?
       ary = @entries.sort { |a, b| (a.mtime <=> b.mtime).or \
-        compare_numerically a.title, b.title }
+        compare_numerically a.sort_title, b.sort_title }
     when .time_added?
       ary = @entries.sort { |a, b| (a.date_added <=> b.date_added).or \
-        compare_numerically a.title, b.title }
+        compare_numerically a.sort_title, b.sort_title }
     when .progress?
       percentage_ary = load_percentage_for_all_entries username, opt, true
       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 }
+          compare_numerically a_tp[0].sort_title, b_tp[0].sort_title }
         .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 &.title
+      sorter = ChapterSorter.new @entries.map &.sort_title
       ary = @entries.sort do |a, b|
-        sorter.compare(a.title, b.title).or \
-          compare_numerically a.title, b.title
+        sorter.compare(a.sort_title, b.sort_title).or \
+          compare_numerically a.sort_title, b.sort_title
       end
     end
 
@@ -502,6 +632,16 @@ class Title
 
     if last_read_entry && last_read_entry.finished? username
       last_read_entry = last_read_entry.next_entry username
+      if last_read_entry.nil?
+        # The last entry is finished. Return the first unfinished entry
+        #   (if any)
+        sorted_entries(username).each do |e|
+          unless e.finished? username
+            last_read_entry = e
+            break
+          end
+        end
+      end
     end
 
     last_read_entry
@@ -516,7 +656,7 @@ class Title
 
     @entries.each do |e|
       next if da.has_key? e.title
-      da[e.title] = ctime e.zip_path
+      da[e.title] = ctime e.path
     end
 
     TitleInfo.new @dir do |info|
@@ -536,17 +676,32 @@ class Title
     zip + titles.flat_map &.deep_entries_with_date_added
   end
 
+  def remove_sorted_entries_cache(sort_methods : Array(SortMethod),
+                                  username : String)
+    [false, true].each do |ascend|
+      sort_methods.each do |sort_method|
+        sorted_entries_cache_key =
+          SortedEntriesCacheEntry.gen_key @id, username, @entries,
+            SortOptions.new(sort_method, ascend)
+        LRUCache.invalidate sorted_entries_cache_key
+      end
+    end
+  end
+
+  def remove_sorted_caches(sort_methods : Array(SortMethod), username : String)
+    remove_sorted_entries_cache sort_methods, username
+    parents.each do |parent|
+      remove_sorted_titles_cache parent.titles, sort_methods, username
+    end
+    remove_sorted_titles_cache Library.default.titles, sort_methods, username
+  end
+
   def bulk_progress(action, ids : Array(String), username)
     LRUCache.invalidate "#{@id}:#{username}:progress_sum"
     parents.each do |parent|
       LRUCache.invalidate "#{parent.id}:#{username}:progress_sum"
     end
-    [false, true].each do |ascend|
-      sorted_entries_cache_key =
-        SortedEntriesCacheEntry.gen_key @id, username, @entries,
-          SortOptions.new(SortMethod::Progress, ascend)
-      LRUCache.invalidate sorted_entries_cache_key
-    end
+    remove_sorted_caches [SortMethod::Progress], username
 
     selected_entries = ids
       .map { |id|

src/library/types.cr

@@ -1,13 +1,3 @@
-SUPPORTED_IMG_TYPES = %w(
-  image/jpeg
-  image/png
-  image/webp
-  image/apng
-  image/avif
-  image/gif
-  image/svg+xml
-)
-
 enum SortMethod
   Auto
   Title
@@ -55,6 +45,13 @@ class SortOptions
   def to_tuple
     {@method.to_s.underscore, ascend}
   end
+
+  def to_json
+    {
+      "method" => method.to_s.underscore,
+      "ascend" => ascend,
+    }.to_json
+  end
 end
 
 struct Image

src/logger.cr

@@ -38,6 +38,7 @@ class Logger
     Log.setup do |c|
       c.bind "*", @@severity, @backend
       c.bind "db.*", :error, @backend
+      c.bind "duktape", :none, @backend
     end
   end
 

src/mango.cr

@@ -7,7 +7,7 @@ require "option_parser"
 require "clim"
 require "tallboy"
 
-MANGO_VERSION = "0.24.0"
+MANGO_VERSION = "0.27.0"
 
 # From http://www.network-science.de/ascii/
 BANNER = %{
@@ -61,6 +61,7 @@ class CLI < Clim
       Library.load_instance
       Library.default
       Plugin::Downloader.default
+      Plugin::Updater.default
 
       spawn do
         begin

src/plugin/plugin.cr

@@ -2,6 +2,8 @@ require "duktape/runtime"
 require "myhtml"
 require "xml"
 
+require "./subscriptions"
+
 class Plugin
   class Error < ::Exception
   end
@@ -16,12 +18,19 @@ class Plugin
   end
 
   struct Info
+    include JSON::Serializable
+
     {% for name in ["id", "title", "placeholder"] %}
       getter {{name.id}} = ""
     {% end %}
-    getter wait_seconds : UInt64 = 0
+    getter wait_seconds = 0u64
+    getter version = 0u64
+    getter settings = {} of String => String?
     getter dir : String
 
+    @[JSON::Field(ignore: true)]
+    @json : JSON::Any
+
     def initialize(@dir)
       info_path = File.join @dir, "info.json"
 
@@ -37,6 +46,16 @@ class Plugin
           @{{name.id}} = @json[{{name}}].as_s
         {% end %}
         @wait_seconds = @json["wait_seconds"].as_i.to_u64
+        @version = @json["api_version"]?.try(&.as_i.to_u64) || 1u64
+
+        if @version > 1 && (settings_hash = @json["settings"]?.try &.as_h?)
+          settings_hash.each do |k, v|
+            unless str_value = v.as_s?
+              raise "The settings object can only contain strings or null"
+            end
+            @settings[k] = str_value
+          end
+        end
 
         unless @id.alphanumeric_underscore?
           raise "Plugin ID can only contain alphanumeric characters and " \
@@ -86,9 +105,10 @@ class Plugin
   getter js_path = ""
   getter storage_path = ""
 
-  def self.build_info_ary
+  def self.build_info_ary(dir : String? = nil)
     @@info_ary.clear
-    dir = Config.current.plugin_path
+    dir ||= Config.current.plugin_path
+
     Dir.mkdir_p dir unless Dir.exists? dir
 
     Dir.each_child dir do |f|
@@ -114,8 +134,35 @@ class Plugin
     @info.not_nil!
   end
 
-  def initialize(id : String)
-    Plugin.build_info_ary
+  def subscribe(subscription : Subscription)
+    list = SubscriptionList.new info.dir
+    list << subscription
+    list.save
+  end
+
+  def list_subscriptions
+    SubscriptionList.new(info.dir).ary
+  end
+
+  def list_subscriptions_raw
+    SubscriptionList.new(info.dir)
+  end
+
+  def unsubscribe(id : String)
+    list = SubscriptionList.new info.dir
+    list.reject! &.id.== id
+    list.save
+  end
+
+  def check_subscription(id : String)
+    list = list_subscriptions_raw
+    sub = list.find &.id.== id
+    Plugin::Updater.default.check_subscription self, sub.not_nil!
+    list.save
+  end
+
+  def initialize(id : String, dir : String? = nil)
+    Plugin.build_info_ary dir
 
     @info = @@info_ary.find &.id.== id
     if @info.nil?
@@ -138,6 +185,12 @@ class Plugin
       sbx.push_string path
       sbx.put_prop_string -2, "storage_path"
 
+      sbx.push_pointer info.dir.as(Void*)
+      path = sbx.require_pointer(-1).as String
+      sbx.pop
+      sbx.push_string path
+      sbx.put_prop_string -2, "info_dir"
+
       def_helper_functions sbx
     end
 
@@ -152,23 +205,71 @@ class Plugin
     {% end %}
   end
 
+  def assert_manga_type(obj : JSON::Any)
+    obj["id"].as_s && obj["title"].as_s
+  rescue e
+    raise Error.new "Missing required fields in the Manga type"
+  end
+
+  def assert_chapter_type(obj : JSON::Any)
+    obj["id"].as_s && obj["title"].as_s && obj["pages"].as_i &&
+      obj["manga_title"].as_s
+  rescue e
+    raise Error.new "Missing required fields in the Chapter type"
+  end
+
+  def assert_page_type(obj : JSON::Any)
+    obj["url"].as_s && obj["filename"].as_s
+  rescue e
+    raise Error.new "Missing required fields in the Page type"
+  end
+
+  def can_subscribe? : Bool
+    info.version > 1 && eval_exists?("newChapters")
+  end
+
+  def search_manga(query : String)
+    if info.version == 1
+      raise Error.new "Manga searching is only available for plugins " \
+                      "targeting API v2 or above"
+    end
+    json = eval_json "searchManga('#{query}')"
+    begin
+      json.as_a.each do |obj|
+        assert_manga_type obj
+      end
+    rescue e
+      raise Error.new e.message
+    end
+    json
+  end
+
   def list_chapters(query : String)
     json = eval_json "listChapters('#{query}')"
     begin
-      check_fields ["title", "chapters"]
-
-      ary = json["chapters"].as_a
-      ary.each do |obj|
-        id = obj["id"]?
-        raise "Field `id` missing from `listChapters` outputs" if id.nil?
-
-        unless id.to_s.alphanumeric_underscore?
-          raise "The `id` field can only contain alphanumeric characters " \
-                "and underscores"
+      if info.version > 1
+        # Since v2, listChapters returns an array
+        json.as_a.each do |obj|
+          assert_chapter_type obj
         end
+      else
+        check_fields ["title", "chapters"]
 
-        title = obj["title"]?
-        raise "Field `title` missing from `listChapters` outputs" if title.nil?
+        ary = json["chapters"].as_a
+        ary.each do |obj|
+          id = obj["id"]?
+          raise "Field `id` missing from `listChapters` outputs" if id.nil?
+
+          unless id.to_s.alphanumeric_underscore?
+            raise "The `id` field can only contain alphanumeric characters " \
+                  "and underscores"
+          end
+
+          title = obj["title"]?
+          if title.nil?
+            raise "Field `title` missing from `listChapters` outputs"
+          end
+        end
       end
     rescue e
       raise Error.new e.message
@@ -179,10 +280,14 @@ class Plugin
   def select_chapter(id : String)
     json = eval_json "selectChapter('#{id}')"
     begin
-      check_fields ["title", "pages"]
+      if info.version > 1
+        assert_chapter_type json
+      else
+        check_fields ["title", "pages"]
 
-      if json["title"].to_s.empty?
-        raise "The `title` field of the chapter can not be empty"
+        if json["title"].to_s.empty?
+          raise "The `title` field of the chapter can not be empty"
+        end
       end
     rescue e
       raise Error.new e.message
@@ -194,14 +299,28 @@ class Plugin
     json = eval_json "nextPage()"
     return if json.size == 0
     begin
-      check_fields ["filename", "url"]
+      assert_page_type json
     rescue e
       raise Error.new e.message
     end
     json
   end
 
-  private def eval(str)
+  def new_chapters(manga_id : String, after : Int64)
+    # Converting standard timestamp to milliseconds so plugins can easily do
+    #   `new Date(ms_timestamp)` in JS.
+    json = eval_json "newChapters('#{manga_id}', #{after * 1000})"
+    begin
+      json.as_a.each do |obj|
+        assert_chapter_type obj
+      end
+    rescue e
+      raise Error.new e.message
+    end
+    json
+  end
+
+  def eval(str)
     @rt.eval str
   rescue e : Duktape::SyntaxError
     raise SyntaxError.new e.message
@@ -213,6 +332,15 @@ class Plugin
     JSON.parse eval(str).as String
   end
 
+  private def eval_exists?(str) : Bool
+    @rt.eval str
+    true
+  rescue e : Duktape::ReferenceError
+    false
+  rescue e : Duktape::Error
+    raise Error.new e.message
+  end
+
   private def def_helper_functions(sbx)
     sbx.push_object
 
@@ -321,9 +449,15 @@ class Plugin
       env = Duktape::Sandbox.new ptr
       html = env.require_string 0
 
-      str = XML.parse(html).inner_text
+      begin
+        parser = Myhtml::Parser.new html
+        str = parser.body!.children.first.inner_text
+
+        env.push_string str
+      rescue
+        env.push_string ""
+      end
 
-      env.push_string str
       env.call_success
     end
     sbx.put_prop_string -2, "text"
@@ -334,8 +468,9 @@ class Plugin
       name = env.require_string 1
 
       begin
-        attr = XML.parse(html).first_element_child.not_nil![name]
-        env.push_string attr
+        parser = Myhtml::Parser.new html
+        attr = parser.body!.children.first.attribute_by name
+        env.push_string attr.not_nil!
       rescue
         env.push_undefined
       end
@@ -379,6 +514,27 @@ class Plugin
     end
     sbx.put_prop_string -2, "storage"
 
+    if info.version > 1
+      sbx.push_proc 1 do |ptr|
+        env = Duktape::Sandbox.new ptr
+        key = env.require_string 0
+
+        env.get_global_string "info_dir"
+        info_dir = env.require_string -1
+        env.pop
+        info = Info.new info_dir
+
+        if value = info.settings[key]?
+          env.push_string value
+        else
+          env.push_undefined
+        end
+
+        env.call_success
+      end
+      sbx.put_prop_string -2, "settings"
+    end
+
     sbx.put_prop_string -2, "mango"
   end
 end

src/plugin/subscriptions.cr

@@ -0,0 +1,115 @@
+require "uuid"
+require "big"
+
+enum FilterType
+  String
+  NumMin
+  NumMax
+  DateMin
+  DateMax
+  Array
+
+  def self.from_string(str)
+    case str
+    when "string"
+      String
+    when "number-min"
+      NumMin
+    when "number-max"
+      NumMax
+    when "date-min"
+      DateMin
+    when "date-max"
+      DateMax
+    when "array"
+      Array
+    else
+      raise "Unknown filter type with string #{str}"
+    end
+  end
+end
+
+struct Filter
+  include JSON::Serializable
+
+  property key : String
+  property value : String | Int32 | Int64 | Float32 | Nil
+  property type : FilterType
+
+  def initialize(@key, @value, @type)
+  end
+
+  def self.from_json(str) : Filter
+    json = JSON.parse str
+    key = json["key"].as_s
+    type = FilterType.from_string json["type"].as_s
+    _value = json["value"]
+    value = _value.as_s? || _value.as_i? || _value.as_i64? ||
+            _value.as_f32? || nil
+    self.new key, value, type
+  end
+
+  def match_chapter(obj : JSON::Any) : Bool
+    return true if value.nil? || value.to_s.empty?
+    raw_value = obj[key]
+    case type
+    when FilterType::String
+      raw_value.as_s.downcase == value.to_s.downcase
+    when FilterType::NumMin, FilterType::DateMin
+      BigFloat.new(raw_value.as_s) >= BigFloat.new value.not_nil!.to_f32
+    when FilterType::NumMax, FilterType::DateMax
+      BigFloat.new(raw_value.as_s) <= BigFloat.new value.not_nil!.to_f32
+    when FilterType::Array
+      return true if value == "all"
+      raw_value.as_s.downcase.split(",")
+        .map(&.strip).includes? value.to_s.downcase.strip
+    else
+      false
+    end
+  end
+end
+
+# We use class instead of struct so we can update `last_checked` from
+#   `SubscriptionList`
+class Subscription
+  include JSON::Serializable
+
+  property id : String
+  property plugin_id : String
+  property manga_id : String
+  property manga_title : String
+  property name : String
+  property created_at : Int64
+  property last_checked : Int64
+  property filters = [] of Filter
+
+  def initialize(@plugin_id, @manga_id, @manga_title, @name)
+    @id = UUID.random.to_s
+    @created_at = Time.utc.to_unix
+    @last_checked = Time.utc.to_unix
+  end
+
+  def match_chapter(obj : JSON::Any) : Bool
+    filters.all? &.match_chapter(obj)
+  end
+end
+
+struct SubscriptionList
+  @dir : String
+  @path : String
+
+  getter ary = [] of Subscription
+
+  forward_missing_to @ary
+
+  def initialize(@dir)
+    @path = Path[@dir, "subscriptions.json"].to_s
+    if File.exists? @path
+      @ary = Array(Subscription).from_json File.read @path
+    end
+  end
+
+  def save
+    File.write @path, @ary.to_pretty_json
+  end
+end

src/plugin/updater.cr

@@ -0,0 +1,75 @@
+class Plugin
+  class Updater
+    use_default
+
+    def initialize
+      interval = Config.current.plugin_update_interval_hours
+      return if interval <= 0
+      spawn do
+        loop do
+          Plugin.list.map(&.["id"]).each do |pid|
+            check_updates pid
+          end
+          sleep interval.hours
+        end
+      end
+    end
+
+    def check_updates(plugin_id : String)
+      Logger.debug "Checking plugin #{plugin_id} for updates"
+
+      plugin = Plugin.new plugin_id
+      if plugin.info.version == 1
+        Logger.debug "Plugin #{plugin_id} is targeting API version 1. " \
+                     "Skipping update check"
+        return
+      end
+
+      subscriptions = plugin.list_subscriptions_raw
+      subscriptions.each do |sub|
+        check_subscription plugin, sub
+      end
+      subscriptions.save
+    rescue e
+      Logger.error "Error checking plugin #{plugin_id} for updates: " \
+                   "#{e.message}"
+    end
+
+    def check_subscription(plugin : Plugin, sub : Subscription)
+      Logger.debug "Checking subscription #{sub.name} for updates"
+      matches = plugin.new_chapters(sub.manga_id, sub.last_checked)
+        .as_a.select do |chapter|
+        sub.match_chapter chapter
+      end
+      if matches.empty?
+        Logger.debug "No new chapters found."
+        sub.last_checked = Time.utc.to_unix
+        return
+      end
+      Logger.debug "Found #{matches.size} new chapters. " \
+                   "Pushing to download queue"
+      jobs = matches.map { |ch|
+        Queue::Job.new(
+          "#{plugin.info.id}-#{Base64.encode ch["id"].as_s}",
+          "", # manga_id
+          ch["title"].as_s,
+          sub.manga_title,
+          Queue::JobStatus::Pending,
+          Time.utc
+        )
+      }
+      inserted_count = Queue.default.push jobs
+      Logger.info "#{inserted_count}/#{matches.size} new chapters added " \
+                  "to the download queue. Plugin ID #{plugin.info.id}, " \
+                  "subscription name #{sub.name}"
+      if inserted_count != matches.size
+        Logger.error "Failed to add #{matches.size - inserted_count} " \
+                     "chapters to download queue"
+      end
+      sub.last_checked = Time.utc.to_unix
+    rescue e
+      Logger.error "Error when checking updates for subscription " \
+                   "#{sub.name}: #{e.message}"
+    end
+  end
+end

src/queue.cr

@@ -70,7 +70,13 @@ class Queue
       ary = @id.split("-")
       if ary.size == 2
         @plugin_id = ary[0]
-        @plugin_chapter_id = ary[1]
+        # This begin-rescue block is for backward compatibility. In earlier
+        #   versions we didn't encode the chapter ID
+        @plugin_chapter_id = begin
+          Base64.decode_string ary[1]
+        rescue
+          ary[1]
+        end
       end
     end
 
@@ -112,7 +118,7 @@ class Queue
   use_default
 
   def initialize(db_path : String? = nil)
-    @path = db_path || Config.current.mangadex["download_queue_db_path"].to_s
+    @path = db_path || Config.current.queue_db_path.to_s
     dir = File.dirname @path
     unless Dir.exists? dir
       Logger.info "The queue DB directory #{dir} does not exist. " \

src/routes/admin.cr

@@ -1,3 +1,5 @@
+require "sanitize"
+
 struct AdminRouter
   def initialize
     get "/admin" do |env|
@@ -14,13 +16,13 @@ struct AdminRouter
     end
 
     get "/admin/user/edit" do |env|
-      username = env.params.query["username"]?
+      sanitizer = Sanitize::Policy::Text.new
+      username = env.params.query["username"]?.try { |s| sanitizer.process s }
       admin = env.params.query["admin"]?
       if admin
         admin = admin == "true"
       end
-      error = env.params.query["error"]?
-      current_user = get_username env
+      error = env.params.query["error"]?.try { |s| sanitizer.process s }
       new_user = username.nil? && admin.nil?
       layout "user-edit"
     end
@@ -66,10 +68,13 @@ struct AdminRouter
     end
 
     get "/admin/downloads" do |env|
-      mangadex_base_url = Config.current.mangadex["base_url"]
       layout "download-manager"
     end
 
+    get "/admin/subscriptions" do |env|
+      layout "subscription-manager"
+    end
+
     get "/admin/missing" do |env|
       layout "missing-items"
     end

src/routes/api.cr

@@ -23,7 +23,7 @@ struct APIRouter
 
     # Authentication
 
-    All endpoints require authentication. After logging in, your session ID would be stored as a cookie named `mango-sessid-#{Config.current.port}`, which can be used to authenticate the API access. Note that all admin API endpoints (`/api/admin/...`) require the logged-in user to have admin access.
+    All endpoints except `/api/login` require authentication. After logging in, your session ID would be stored as a cookie named `mango-sessid-#{Config.current.port}`, which can be used to authenticate the API access. Note that all admin API endpoints (`/api/admin/...`) require the logged-in user to have admin access.
 
     # Terminologies
 
@@ -40,14 +40,19 @@ struct APIRouter
     Koa.schema "entry", {
       "pages" => Int32,
       "mtime" => Int64,
-    }.merge(s %w(zip_path title size id title_id display_name cover_url)),
+    }.merge(s %w(zip_path path title size id title_id display_name cover_url)),
       desc: "An entry in a book"
 
     Koa.schema "title", {
       "mtime"   => Int64,
       "entries" => ["entry"],
       "titles"  => ["title"],
-      "parents" => [String],
+      "parents" => [{
+        "title" => String,
+        "id"    => String,
+      }],
+      "title_percentages" => [Float64?],
+      "entry_percentages" => [Float64?],
     }.merge(s %w(dir title id display_name cover_url)),
       desc: "A manga title (a collection of entries and sub-titles)"
 
@@ -56,6 +61,59 @@ struct APIRouter
       "error"   => String?,
     }
 
+    Koa.schema "filter", {
+      "key"   => String,
+      "type"  => String,
+      "value" => String | Int32 | Int64 | Float32,
+    }
+
+    Koa.schema "subscription", {
+      "id"           => String,
+      "plugin_id"    => String,
+      "manga_id"     => String,
+      "manga_title"  => String,
+      "name"         => String,
+      "created_at"   => Int64,
+      "last_checked" => Int64,
+      "filters"      => ["filter"],
+    }
+
+    Koa.describe "Authenticates a user", <<-MD
+    After successful login, the cookie `mango-sessid-#{Config.current.port}` will contain a valid session ID that can be used for subsequent requests
+    MD
+    Koa.body schema: {
+      "username" => String,
+      "password" => String,
+    }
+    Koa.response 200, schema: {
+      "success"    => Bool,
+      "error"      => String?,
+      "session_id" => String?,
+      "is_admin"   => Bool?,
+    }
+    Koa.tag "users"
+    post "/api/login" do |env|
+      begin
+        username = env.params.json["username"].as String
+        password = env.params.json["password"].as String
+        token = Storage.default.verify_user(username, password).not_nil!
+
+        env.session.string "token", token
+        send_json env, {
+          "success"    => true,
+          "session_id" => env.session.id,
+          "is_admin"   => Storage.default.username_is_admin username,
+        }.to_json
+      rescue e
+        Logger.error e
+        env.response.status_code = 403
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
     Koa.describe "Returns a page in a manga entry"
     Koa.path "tid", desc: "Title ID"
     Koa.path "eid", desc: "Entry ID"
@@ -84,14 +142,19 @@ struct APIRouter
           env.response.status_code = 304
           ""
         else
+          if entry.is_a? DirEntry
+            cache_control = "no-cache, max-age=86400"
+          else
+            cache_control = "public, max-age=86400"
+          end
           env.response.headers["ETag"] = e_tag
-          env.response.headers["Cache-Control"] = "public, max-age=86400"
+          env.response.headers["Cache-Control"] = cache_control
           send_img env, img
         end
       rescue e
         Logger.error e
         env.response.status_code = 500
-        e.message
+        send_text env, e.message
       end
     end
 
@@ -128,11 +191,13 @@ struct APIRouter
       rescue e
         Logger.error e
         env.response.status_code = 500
-        e.message
+        send_text env, e.message
       end
     end
 
     Koa.describe "Returns the book with title `tid`", <<-MD
+    The entries and titles will be sorted by the default sorting method for the logged-in user.
+    - Supply the `percentage` query parameter to include the reading progress
     - Supply the `slim` query parameter to strip away "display_name", "cover_url", and "mtime" from the returned object to speed up the loading time
     - Supply the `depth` query parameter to control the depth of nested titles to return.
       - When `depth` is 1, returns the top-level titles and sub-titles/entries one level in them
@@ -143,8 +208,7 @@ struct APIRouter
     Koa.path "tid", desc: "Title ID"
     Koa.query "slim"
     Koa.query "depth"
-    Koa.query "sort", desc: "Sorting option for entries. Can be one of 'auto', 'title', 'progress', 'time_added' and 'time_modified'"
-    Koa.query "ascend", desc: "Sorting direction for entries. Set to 0 for the descending order. Doesn't work without specifying 'sort'"
+    Koa.query "percentage"
     Koa.response 200, schema: "title"
     Koa.response 404, "Title not found"
     Koa.tag "library"
@@ -152,29 +216,104 @@ struct APIRouter
       begin
         username = get_username env
 
-        sort_opt = SortOptions.new
-        get_sort_opt
-
         tid = env.params.url["tid"]
         title = Library.default.get_title tid
         raise "Title ID `#{tid}` not found" if title.nil?
 
+        sort_opt = SortOptions.from_info_json title.dir, username
+
         slim = !env.params.query["slim"]?.nil?
         depth = env.params.query["depth"]?.try(&.to_i?) || -1
+        percentage = !env.params.query["percentage"]?.nil?
 
         send_json env, title.build_json(slim: slim, depth: depth,
           sort_context: {username: username,
-                         opt:      sort_opt})
+                         opt:      sort_opt}, percentage: percentage)
       rescue e
         Logger.error e
         env.response.status_code = 404
-        e.message
+        send_text env, e.message
       end
     end
 
+    Koa.describe "Returns the sorting option of a title or the library", <<-MD
+    - If the query parameter `tid` is supplied, returns the sorting option of the title identified by the `tid`.
+    - If the query parameter `tid` is missing, returns the sorting option of the library.
+    MD
+    Koa.query "tid"
+    Koa.response 200, schema: {
+      "method" => String?,
+      "ascend" => Bool?,
+      "error"  => String?,
+    }
+    Koa.tag "library"
+    get "/api/sort_opt" do |env|
+      username = get_username env
+
+      tid = env.params.query["tid"]?
+      dir = if tid
+              (Library.default.get_title tid).not_nil!.dir
+            else
+              Library.default.dir
+            end
+      sort_opt = SortOptions.from_info_json dir, username
+      send_json env, sort_opt.to_json
+    rescue e
+      Logger.error e
+      send_json env, {
+        "success" => false,
+        "error"   => e.message,
+      }.to_json
+    end
+
+    Koa.describe "Updates the sorting option of a title or the library", <<-MD
+    - When the `tid` field is supplied in the body, updates the sorting option of the title identified by the `tid`.
+    - When the `tid` field is missing in the body, updates the sorting option of the library.
+    MD
+    Koa.body schema: {
+      "tid"    => String?,
+      "method" => String,
+      "ascend" => Bool,
+    }
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+    }
+    Koa.tag "library"
+    put "/api/sort_opt" do |env|
+      username = get_username env
+
+      tid = env.params.json["tid"]?.try &.as String
+      dir = if tid
+              (Library.default.get_title tid).not_nil!.dir
+            else
+              Library.default.dir
+            end
+
+      method = env.params.json["sort"].as String
+      ascend = env.params.json["ascend"].as Bool
+      sort_opt = SortOptions.new method, ascend
+
+      TitleInfo.new dir do |info|
+        info.sort_by[username] = sort_opt.to_tuple
+        info.save
+      end
+      send_json env, {
+        "success" => true,
+      }.to_json
+    rescue e
+      Logger.error e
+      send_json env, {
+        "success" => false,
+        "error"   => e.message,
+      }.to_json
+    end
+
     Koa.describe "Returns the entire library with all titles and entries", <<-MD
+    The titles will be sorted by the default sorting method for the logged-in user.
     - Supply the `slim` query parameter to strip away "display_name", "cover_url", and "mtime" from the returned object to speed up the loading time
     - Supply the `dpeth` query parameter to control the depth of nested titles to return.
+    - Supply the `percentage` query parameter to include the reading progress
       - When `depth` is 1, returns the requested title and sub-titles/entries one level in it
       - When `depth` is 0, returns the requested title without its sub-titles/entries
       - When `depth` is N, returns the requested title and sub-titles/entries N levels in it
@@ -182,16 +321,162 @@ struct APIRouter
     MD
     Koa.query "slim"
     Koa.query "depth"
+    Koa.query "percentage"
     Koa.response 200, schema: {
-      "dir"    => String,
-      "titles" => ["title"],
+      "dir"              => String,
+      "titles"           => ["title"],
+      "title_percentage" => [Float64?],
     }
     Koa.tag "library"
     get "/api/library" do |env|
+      username = get_username env
+
+      sort_opt = SortOptions.from_info_json Library.default.dir, username
+
       slim = !env.params.query["slim"]?.nil?
       depth = env.params.query["depth"]?.try(&.to_i?) || -1
+      percentage = !env.params.query["percentage"]?.nil?
 
-      send_json env, Library.default.build_json(slim: slim, depth: depth)
+      send_json env, Library.default.build_json(slim: slim, depth: depth,
+        sort_context: {username: username,
+                       opt:      sort_opt}, percentage: percentage)
+    rescue e
+      Logger.error e
+      send_json env, {
+        "success" => false,
+        "error"   => e.message,
+      }.to_json
+    end
+
+    Koa.describe "Returns the continue reading entries"
+    Koa.response 200, schema: {
+      "success"           => Bool,
+      "error"             => String?,
+      "entries"           => ["entry"],
+      "entry_percentages" => [Float64],
+    }
+    Koa.tag "library"
+    get "/api/library/continue_reading" do |env|
+      username = get_username env
+      cr_entries = Library.default.get_continue_reading_entries username
+
+      json = JSON.build do |j|
+        j.object do
+          j.field "success" do
+            j.bool true
+          end
+          j.field "entries" do
+            j.array do
+              cr_entries.each do |e|
+                j.raw e[:entry].build_json
+              end
+            end
+          end
+          j.field "entry_percentages" do
+            j.array do
+              cr_entries.each do |e|
+                j.number e[:percentage]
+              end
+            end
+          end
+        end
+      end
+
+      send_json env, json
+    rescue e
+      Logger.error e
+      send_json env, {
+        "success" => false,
+        "error"   => e.message,
+      }.to_json
+    end
+
+    Koa.describe "Returns the start reading titles"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "titles"  => ["title"],
+    }
+    Koa.tag "library"
+    get "/api/library/start_reading" do |env|
+      username = get_username env
+      titles = Library.default.get_start_reading_titles username
+
+      json = JSON.build do |j|
+        j.object do
+          j.field "success" do
+            j.bool true
+          end
+          j.field "titles" do
+            j.array do
+              titles.each do |t|
+                j.raw t.build_json depth: 1
+              end
+            end
+          end
+        end
+      end
+
+      send_json env, json
+    rescue e
+      Logger.error e
+      send_json env, {
+        "success" => false,
+        "error"   => e.message,
+      }.to_json
+    end
+
+    Koa.describe "Returns the recently added items"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "items"   => [{
+        "item"       => "title | entry",
+        "percentage" => Float64,
+        "count"      => Int32,
+      }],
+    }
+    Koa.tag "library"
+    get "/api/library/recently_added" do |env|
+      username = get_username env
+      ra_entries = Library.default.get_recently_added_entries username
+
+      json = JSON.build do |j|
+        j.object do
+          j.field "success" do
+            j.bool true
+          end
+          j.field "items" do
+            j.array do
+              ra_entries.each do |e|
+                j.object do
+                  j.field "item" do
+                    if e[:grouped_count] === 1
+                      j.raw e[:entry].build_json
+                    else
+                      j.raw e[:entry].book.build_json depth: 0
+                    end
+                  end
+                  j.field "percentage" do
+                    j.number e[:percentage]
+                  end
+                  j.field "count" do
+                    j.number e[:grouped_count]
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+
+      send_json env, json
+    rescue e
+      Logger.error e
+      send_json env, {
+        "success" => false,
+        "error"   => e.message,
+      }.to_json
     end
 
     Koa.describe "Triggers a library scan"
@@ -217,7 +502,7 @@ struct APIRouter
     }
     get "/api/admin/thumbnail_progress" do |env|
       send_json env, {
-        "progress" => Library.default.thumbnail_generation_progress,
+        "progress" => Library.default.thumbnail_ctx.progress,
       }.to_json
     end
 
@@ -227,6 +512,7 @@ struct APIRouter
       spawn do
         Library.default.generate_thumbnails
       end
+      send_text env, ""
     end
 
     Koa.describe "Deletes a user with `username`"
@@ -348,6 +634,38 @@ struct APIRouter
       end
     end
 
+    Koa.describe "Sets the sort title of a title or an entry", <<-MD
+      When `eid` is provided, apply the sort title to the entry. Otherwise, apply the sort title to the title identified by `tid`.
+    MD
+    Koa.tags ["admin", "library"]
+    Koa.path "tid", desc: "Title ID"
+    Koa.query "eid", desc: "Entry ID", required: false
+    Koa.query "name", desc: "The new sort title"
+    Koa.response 200, schema: "result"
+    put "/api/admin/sort_title/:tid" do |env|
+      username = get_username env
+      begin
+        title = (Library.default.get_title env.params.url["tid"])
+          .not_nil!
+        name = env.params.query["name"]?
+        entry = env.params.query["eid"]?
+        if entry.nil?
+          title.set_sort_title name, username
+        else
+          eobj = title.get_entry entry
+          eobj.set_sort_title name, username unless eobj.nil?
+        end
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      else
+        send_json env, {"success" => true}.to_json
+      end
+    end
+
     ws "/api/admin/mangadex/queue" do |socket, env|
       interval_raw = env.params.query["interval"]?
       interval = (interval_raw.to_i? if interval_raw) || 5
@@ -512,6 +830,211 @@ struct APIRouter
       end
     end
 
+    Koa.describe "Returns a list of available plugins"
+    Koa.tags ["admin", "downloader"]
+    Koa.query "plugin", schema: String
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "plugins" => [{
+        "id"    => String,
+        "title" => String,
+      }],
+    }
+    get "/api/admin/plugin" do |env|
+      begin
+        send_json env, {
+          "success" => true,
+          "plugins" => Plugin.list,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Returns the metadata of a plugin"
+    Koa.tags ["admin", "downloader"]
+    Koa.query "plugin", schema: String
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "info"    => {
+        "dir"          => String,
+        "id"           => String,
+        "title"        => String,
+        "placeholder"  => String,
+        "wait_seconds" => Int32,
+        "version"      => Int32,
+        "settings"     => {} of String => String,
+      },
+      "subscribable" => Bool,
+    }
+    get "/api/admin/plugin/info" do |env|
+      begin
+        plugin = Plugin.new env.params.query["plugin"].as String
+        send_json env, {
+          "success"      => true,
+          "info"         => plugin.info,
+          "subscribable" => plugin.can_subscribe?,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Searches for manga matching the given query from a plugin", <<-MD
+    Only available for plugins targeting API v2 or above.
+    MD
+    Koa.tags ["admin", "downloader"]
+    Koa.query "plugin", schema: String
+    Koa.query "query", schema: String
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "manga"   => [{
+        "id"    => String,
+        "title" => String,
+      }],
+    }
+    get "/api/admin/plugin/search" do |env|
+      begin
+        query = env.params.query["query"].as String
+        plugin = Plugin.new env.params.query["plugin"].as String
+
+        manga_ary = plugin.search_manga(query).as_a
+        send_json env, {
+          "success" => true,
+          "manga"   => manga_ary,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Creates a new subscription"
+    Koa.tags ["admin", "downloader", "subscription"]
+    Koa.body schema: {
+      "plugin"   => String,
+      "manga"    => String,
+      "manga_id" => String,
+      "name"     => String,
+      "filters"  => ["filter"],
+    }
+    Koa.response 200, schema: "result"
+    post "/api/admin/plugin/subscriptions" do |env|
+      begin
+        plugin_id = env.params.json["plugin"].as String
+        manga_title = env.params.json["manga"].as String
+        manga_id = env.params.json["manga_id"].as String
+        filters = env.params.json["filters"].as(Array(JSON::Any)).map do |f|
+          Filter.from_json f.to_json
+        end
+        name = env.params.json["name"].as String
+
+        sub = Subscription.new plugin_id, manga_id, manga_title, name
+        sub.filters = filters
+
+        plugin = Plugin.new plugin_id
+        plugin.subscribe sub
+
+        send_json env, {
+          "success" => true,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Returns the list of subscriptions for a plugin"
+    Koa.tags ["admin", "downloader", "subscription"]
+    Koa.query "plugin", desc: "The ID of the plugin"
+    Koa.response 200, schema: {
+      "success"       => Bool,
+      "error"         => String?,
+      "subscriptions" => ["subscription"],
+    }
+    get "/api/admin/plugin/subscriptions" do |env|
+      begin
+        pid = env.params.query["plugin"].as String
+        send_json env, {
+          "success"       => true,
+          "subscriptions" => Plugin.new(pid).list_subscriptions,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Deletes a subscription"
+    Koa.tags ["admin", "downloader", "subscription"]
+    Koa.body schema: {
+      "plugin"       => String,
+      "subscription" => String,
+    }
+    Koa.response 200, schema: "result"
+    delete "/api/admin/plugin/subscriptions" do |env|
+      begin
+        pid = env.params.query["plugin"].as String
+        sid = env.params.query["subscription"].as String
+
+        Plugin.new(pid).unsubscribe sid
+
+        send_json env, {
+          "success" => true,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Checks for updates for a subscription"
+    Koa.tags ["admin", "downloader", "subscription"]
+    Koa.body schema: {
+      "plugin"       => String,
+      "subscription" => String,
+    }
+    Koa.response 200, schema: "result"
+    post "/api/admin/plugin/subscriptions/update" do |env|
+      pid = env.params.query["plugin"].as String
+      sid = env.params.query["subscription"].as String
+
+      Plugin.new(pid).check_subscription sid
+
+      send_json env, {
+        "success" => true,
+      }.to_json
+    rescue e
+      Logger.error e
+      send_json env, {
+        "success" => false,
+        "error"   => e.message,
+      }.to_json
+    end
+
     Koa.describe "Lists the chapters in a title from a plugin"
     Koa.tags ["admin", "downloader"]
     Koa.query "plugin", schema: String
@@ -520,8 +1043,8 @@ struct APIRouter
       "success"   => Bool,
       "error"     => String?,
       "chapters?" => [{
-        "id"    => String,
-        "title" => String,
+        "id"     => String,
+        "title?" => String,
       }],
       "title" => String?,
     }
@@ -531,8 +1054,14 @@ struct APIRouter
         plugin = Plugin.new env.params.query["plugin"].as String
 
         json = plugin.list_chapters query
-        chapters = json["chapters"]
-        title = json["title"]
+
+        if plugin.info.version == 1
+          chapters = json["chapters"]
+          title = json["title"]
+        else
+          chapters = json
+          title = nil
+        end
 
         send_json env, {
           "success"  => true,
@@ -570,7 +1099,7 @@ struct APIRouter
 
         jobs = chapters.map { |ch|
           Queue::Job.new(
-            "#{plugin.info.id}-#{ch["id"]}",
+            "#{plugin.info.id}-#{Base64.encode ch["id"].as_s}",
             "", # manga_id
             ch["title"].as_s,
             manga_title,
@@ -616,15 +1145,24 @@ struct APIRouter
         entry = title.get_entry eid
         raise "Entry ID `#{eid}` of `#{title.title}` not found" if entry.nil?
 
-        file_hash = Digest::SHA1.hexdigest (entry.zip_path + entry.mtime.to_s)
+        if entry.is_a? DirEntry
+          file_hash = Digest::SHA1.hexdigest(entry.path + entry.mtime.to_s + entry.size)
+        else
+          file_hash = Digest::SHA1.hexdigest(entry.path + entry.mtime.to_s)
+        end
         e_tag = "W/#{file_hash}"
         if e_tag == prev_e_tag
           env.response.status_code = 304
-          ""
+          send_text env, ""
         else
           sizes = entry.page_dimensions
+          if entry.is_a? DirEntry
+            cache_control = "no-cache, max-age=86400"
+          else
+            cache_control = "public, max-age=86400"
+          end
           env.response.headers["ETag"] = e_tag
-          env.response.headers["Cache-Control"] = "public, max-age=86400"
+          env.response.headers["Cache-Control"] = cache_control
           send_json env, {
             "success"    => true,
             "dimensions" => sizes,
@@ -650,10 +1188,11 @@ struct APIRouter
         title = (Library.default.get_title env.params.url["tid"]).not_nil!
         entry = (title.get_entry env.params.url["eid"]).not_nil!
 
-        send_attachment env, entry.zip_path
+        send_attachment env, entry.path
       rescue e
         Logger.error e
         env.response.status_code = 404
+        send_text env, e.message
       end
     end
 

src/routes/main.cr

@@ -61,9 +61,15 @@ struct MainRouter
         sort_opt = SortOptions.from_info_json title.dir, username
         get_and_save_sort_opt title.dir
 
+        sorted_titles = title.sorted_titles username, sort_opt
         entries = title.sorted_entries username, sort_opt
         percentage = title.load_percentage_for_all_entries username, sort_opt
         title_percentage = title.titles.map &.load_percentage username
+        title_percentage_map = {} of String => Float64
+        title_percentage.each_with_index do |tp, i|
+          t = title.titles[i]
+          title_percentage_map[t.id] = tp
+        end
 
         layout "title"
       rescue e
@@ -74,16 +80,6 @@ struct MainRouter
 
     get "/download/plugins" do |env|
       begin
-        id = env.params.query["plugin"]?
-        plugins = Plugin.list
-        plugin = nil
-
-        if id
-          plugin = Plugin.new id
-        elsif !plugins.empty?
-          plugin = Plugin.new plugins[0][:id]
-        end
-
         layout "plugin-download"
       rescue e
         Logger.error e

src/routes/reader.cr

@@ -53,6 +53,7 @@ struct ReaderRouter
         render "src/views/reader.html.ecr"
       rescue e
         Logger.error e
+        Logger.debug e.backtrace?
         env.response.status_code = 404
       end
     end

src/server.cr

@@ -25,6 +25,17 @@ class Server
     APIRouter.new
     OPDSRouter.new
 
+    {% for path in %w(/api/* /uploads/* /img/*) %}
+      options {{path}} do |env|
+        cors
+        halt env
+      end
+    {% end %}
+
+    static_headers do |response|
+      response.headers.add("Access-Control-Allow-Origin", "*")
+    end
+
     Kemal.config.logging = false
     add_handler LogHandler.new
     add_handler AuthHandler.new

src/storage.cr

@@ -342,6 +342,67 @@ class Storage
     end
   end
 
+  def get_title_sort_title(title_id : String)
+    sort_title = nil
+    MainFiber.run do
+      get_db do |db|
+        sort_title =
+          db.query_one? "Select sort_title from titles where id = (?)",
+            title_id, as: String | Nil
+      end
+    end
+    sort_title
+  end
+
+  def set_title_sort_title(title_id : String, sort_title : String | Nil)
+    sort_title = nil if sort_title == ""
+    MainFiber.run do
+      get_db do |db|
+        db.exec "update titles set sort_title = (?) where id = (?)",
+          sort_title, title_id
+      end
+    end
+  end
+
+  def get_entry_sort_title(entry_id : String)
+    sort_title = nil
+    MainFiber.run do
+      get_db do |db|
+        sort_title =
+          db.query_one? "Select sort_title from ids where id = (?)",
+            entry_id, as: String | Nil
+      end
+    end
+    sort_title
+  end
+
+  def get_entries_sort_title(ids : Array(String))
+    results = Hash(String, String | Nil).new
+    MainFiber.run do
+      get_db do |db|
+        db.query "select id, sort_title from ids where id in " \
+                 "(#{ids.join "," { |id| "'#{id}'" }})" do |rs|
+          rs.each do
+            id = rs.read String
+            sort_title = rs.read String | Nil
+            results[id] = sort_title
+          end
+        end
+      end
+    end
+    results
+  end
+
+  def set_entry_sort_title(entry_id : String, sort_title : String | Nil)
+    sort_title = nil if sort_title == ""
+    MainFiber.run do
+      get_db do |db|
+        db.exec "update ids set sort_title = (?) where id = (?)",
+          sort_title, entry_id
+      end
+    end
+  end
+
   def save_thumbnail(id : String, img : Image)
     MainFiber.run do
       get_db do |db|
@@ -558,6 +619,20 @@ class Storage
     {token, expires}
   end
 
+  def count_titles : Int32
+    count = 0
+    MainFiber.run do
+      get_db do |db|
+        db.query "select count(*) from titles" do |rs|
+          rs.each do
+            count = rs.read Int32
+          end
+        end
+      end
+    end
+    count
+  end
+
   def close
     MainFiber.run do
       unless @db.nil?

src/subscription.cr

@@ -1,83 +0,0 @@
-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/signature.cr

@@ -19,7 +19,7 @@ class File
   #   information as long as the above changes do not happen together with
   #   a file/folder rename, with no library scan in between.
   def self.signature(filename) : UInt64
-    if is_supported_file filename
+    if ArchiveEntry.is_valid?(filename) || is_supported_image_file(filename)
       File.info(filename).inode
     else
       0u64
@@ -67,7 +67,9 @@ class Dir
         else
           # Only add its signature value to `signatures` when it is a
           #   supported file
-          signatures << fn if is_supported_file fn
+          if ArchiveEntry.is_valid?(fn) || is_supported_image_file(fn)
+            signatures << fn
+          end
         end
         Fiber.yield
       end
@@ -76,4 +78,19 @@ class Dir
     cache[dirname] = hash
     hash
   end
+
+  def self.directory_entry_signature(dirname, cache = {} of String => String)
+    return cache[dirname + "?entry"] if cache[dirname + "?entry"]?
+    Fiber.yield
+    signatures = [] of String
+    image_files = DirEntry.sorted_image_files dirname
+    if image_files.size > 0
+      image_files.each do |path|
+        signatures << File.signature(path).to_s
+      end
+    end
+    hash = Digest::SHA1.hexdigest(signatures.join)
+    cache[dirname + "?entry"] = hash
+    hash
+  end
 end

src/util/util.cr

@@ -1,8 +1,19 @@
 IMGS_PER_PAGE            = 5
 ENTRIES_IN_HOME_SECTIONS = 8
 UPLOAD_URL_PREFIX        = "/uploads"
-STATIC_DIRS              = %w(/css /js /img /webfonts /favicon.ico /robots.txt)
-SUPPORTED_FILE_EXTNAMES  = [".zip", ".cbz", ".rar", ".cbr"]
+STATIC_DIRS              = %w(/css /js /img /webfonts /favicon.ico /robots.txt
+  /manifest.json)
+SUPPORTED_FILE_EXTNAMES = [".zip", ".cbz", ".rar", ".cbr"]
+SUPPORTED_IMG_TYPES     = %w(
+  image/jpeg
+  image/png
+  image/webp
+  image/apng
+  image/avif
+  image/gif
+  image/svg+xml
+  image/jxl
+)
 
 def random_str
   UUID.random.to_s.gsub "-", ""
@@ -40,6 +51,7 @@ def register_mime_types
     #   defiend by Crystal in `MIME.DEFAULT_TYPES`
     ".apng" => "image/apng",
     ".avif" => "image/avif",
+    ".jxl"  => "image/jxl",
   }.each do |k, v|
     MIME.register k, v
   end
@@ -49,6 +61,10 @@ def is_supported_file(path)
   SUPPORTED_FILE_EXTNAMES.includes? File.extname(path).downcase
 end
 
+def is_supported_image_file(path)
+  SUPPORTED_IMG_TYPES.includes? MIME.from_filename? path
+end
+
 struct Int
   def or(other : Int)
     if self == 0
@@ -80,37 +96,56 @@ class String
   end
 end
 
-def env_is_true?(key : String) : Bool
+def env_is_true?(key : String, default : Bool = false) : Bool
   val = ENV[key.upcase]? || ENV[key.downcase]?
-  return false unless val
+  return default unless val
   val.downcase.in? "1", "true"
 end
 
 def sort_titles(titles : Array(Title), opt : SortOptions, username : String)
-  ary = titles
+  cache_key = SortedTitlesCacheEntry.gen_key username, titles, opt
+  cached_titles = LRUCache.get cache_key
+  return cached_titles if cached_titles.is_a? Array(Title)
 
   case opt.method
   when .time_modified?
-    ary.sort! { |a, b| (a.mtime <=> b.mtime).or \
-      compare_numerically a.title, b.title }
+    ary = titles.sort { |a, b| (a.mtime <=> b.mtime).or \
+      compare_numerically a.sort_title, b.sort_title }
   when .progress?
-    ary.sort! do |a, b|
+    ary = titles.sort do |a, b|
       (a.load_percentage(username) <=> b.load_percentage(username)).or \
-        compare_numerically a.title, b.title
+        compare_numerically a.sort_title, b.sort_title
+    end
+  when .title?
+    ary = titles.sort do |a, b|
+      compare_numerically a.sort_title, b.sort_title
     end
   else
     unless opt.method.auto?
       Logger.warn "Unknown sorting method #{opt.not_nil!.method}. Using " \
                   "Auto instead"
     end
-    ary.sort! { |a, b| compare_numerically a.title, b.title }
+    ary = titles.sort { |a, b| compare_numerically a.sort_title, b.sort_title }
   end
 
   ary.reverse! unless opt.not_nil!.ascend
 
+  LRUCache.set generate_cache_entry cache_key, ary
   ary
 end
 
+def remove_sorted_titles_cache(titles : Array(Title),
+                               sort_methods : Array(SortMethod),
+                               username : String)
+  [false, true].each do |ascend|
+    sort_methods.each do |sort_method|
+      sorted_titles_cache_key = SortedTitlesCacheEntry.gen_key username,
+        titles, SortOptions.new(sort_method, ascend)
+      LRUCache.invalidate sorted_titles_cache_key
+    end
+  end
+end
+
 class String
   # Returns the similarity (in [0, 1]) of two paths.
   # For the two paths, separate them into arrays of components, count the
@@ -144,3 +179,12 @@ def sanitize_filename(str : String) : String
     .gsub(/[\177\000-\031\\:\*\?\"<>\|]/, "")
   sanitized.size > 0 ? sanitized : random_str
 end
+
+def delete_cache_and_exit(path : String)
+  File.delete path
+  Logger.fatal "Invalid library cache deleted. Mango needs to " \
+               "perform a full reset to recover from this. " \
+               "Pleae restart Mango. This is NOT a bug."
+  Logger.fatal "Exiting"
+  exit 1
+end

src/util/web.cr

@@ -39,13 +39,28 @@ macro send_error_page(msg)
 end
 
 macro send_img(env, img)
+  cors
   send_file {{env}}, {{img}}.data, {{img}}.mime
 end
 
+def get_token_from_auth_header(env) : String?
+  value = env.request.headers["Authorization"]
+  if value && value.starts_with? "Bearer"
+    session_id = value.split(" ")[1]
+    return Kemal::Session.get(session_id).try &.string? "token"
+  end
+end
+
 macro get_username(env)
   begin
-    token = env.session.string "token"
-    (Storage.default.verify_token token).not_nil!
+    # Check if we can get the session id from the cookie
+    token = env.session.string? "token"
+    if token.nil?
+      # If not, check if we can get the session id from the auth header
+      token = get_token_from_auth_header env
+    end
+    # If we still don't have a token, we handle it in `resuce` with `not_nil!`
+    (Storage.default.verify_token token.not_nil!).not_nil!
   rescue e
     if Config.current.disable_login
       Config.current.default_username
@@ -57,12 +72,29 @@ macro get_username(env)
   end
 end
 
+macro cors
+  env.response.headers["Access-Control-Allow-Methods"] = "HEAD,GET,PUT,POST," \
+  "DELETE,OPTIONS"
+  env.response.headers["Access-Control-Allow-Headers"] = "X-Requested-With," \
+    "X-HTTP-Method-Override, Content-Type, Cache-Control, Accept," \
+    "Authorization"
+  env.response.headers["Access-Control-Allow-Origin"] = "*"
+end
+
 def send_json(env, json)
+  cors
   env.response.content_type = "application/json"
   env.response.print json
 end
 
+def send_text(env, text)
+  cors
+  env.response.content_type = "text/plain"
+  env.response.print text
+end
+
 def send_attachment(env, path)
+  cors
   send_file env, path, filename: File.basename(path), disposition: "attachment"
 end
 

src/views/admin.html.ecr

@@ -40,5 +40,6 @@
 <a class="uk-button uk-button-danger" href="<%= base_url %>logout">Log Out</a>
 
 <% content_for "script" do %>
+  <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/admin.js"></script>
 <% end %>

src/views/components/card.html.ecr

@@ -61,7 +61,9 @@
           <% if page == "home" && item.is_a? Entry %>
             <%= "uk-margin-remove-bottom" %>
           <% end %>
-          " data-title="<%= HTML.escape(item.display_name) %>"><%= HTML.escape(item.display_name) %>
+          " data-title="<%= HTML.escape(item.display_name) %>"
+          data-file-title="<%= HTML.escape(item.title || "") %>"
+          data-sort-title="<%= HTML.escape(item.sort_title_db || "") %>"><%= HTML.escape(item.display_name) %>
         </h3>
         <% if page == "home" && item.is_a? Entry %>
           <a class="uk-card-title break-word uk-margin-remove-top uk-text-meta uk-display-inline-block no-modal" data-title="<%= HTML.escape(item.book.display_name) %>" href="<%= base_url %>book/<%= item.book.id %>"><%= HTML.escape(item.book.display_name) %></a>

src/views/components/head.html.ecr

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
   <link rel="icon" href="<%= base_url %>favicon.ico">
+  <link rel="manifest" href="<%= base_url %>manifest.json">
 
   <script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2Cdefault%2CmatchMedia&flats=gated"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

src/views/download-manager.html.ecr

@@ -24,16 +24,10 @@
           <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>

src/views/download.html.ecr

@@ -1,162 +0,0 @@
-<h2 class=uk-title>Download from MangaDex</h2>
-<div x-data="downloadComponent()" x-init="init()">
-  <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-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>
-
-  <template x-if="mangaAry">
-    <div>
-      <p x-show="mangaAry.length === 0">No matching manga found.</p>
-
-      <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>
-      </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">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>
-
-        <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>
-    <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="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 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" uk-overflow-auto>
-            <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 %>
-  <%= render_component "moment" %>
-  <%= render_component "jquery-ui" %>
-  <script src="<%= base_url %>js/alert.js"></script>
-  <script src="<%= base_url %>js/download.js"></script>
-<% end %>

src/views/layout.html.ecr

@@ -19,6 +19,7 @@
                   <ul class="uk-nav-sub">
                     <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 %>admin/subscriptions">Subscription Manager</a></li>
                   </ul>
                 </li>
               <% end %>
@@ -32,11 +33,11 @@
     </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-left uk-hidden@m">
           <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>
+        <div class="uk-navbar-left uk-visible@m">
+          <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icons/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>
@@ -51,13 +52,14 @@
                     <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 %>admin/subscriptions">Subscription Manager</a></li>
                   </ul>
                 </div>
               </li>
             <% end %>
           </ul>
         </div>
-        <div class="uk-navbar-right uk-visible@s">
+        <div class="uk-navbar-right uk-visible@m">
           <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>
@@ -78,7 +80,7 @@
     </div>
     <script>
       setTheme();
-      const base_url = "<%= base_url %>";
+            const base_url = "<%= base_url %>";
     </script>
     <%= render_component "uikit" %>
     <%= yield_content "script" %>

src/views/library.html.ecr

@@ -10,6 +10,7 @@
   <div class="uk-margin-bottom uk-width-1-4@s">
     <% hash = {
       "auto" => "Auto",
+      "title" => "Name",
       "time_modified" => "Date Modified",
       "progress" => "Progress"
     } %>

src/views/mangadex.html.ecr

@@ -1,39 +0,0 @@
-<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/opds/title.xml.ecr

@@ -29,7 +29,7 @@
         <link rel="http://opds-spec.org/image" href="<%= e.cover_url %>" />
         <link rel="http://opds-spec.org/image/thumbnail" href="<%= e.cover_url %>" />
 
-        <link rel="http://opds-spec.org/acquisition" href="<%= base_url %>api/download/<%= e.book.id %>/<%= e.id %>" title="Read" type="<%= MIME.from_filename e.zip_path %>" />
+        <link rel="http://opds-spec.org/acquisition" href="<%= base_url %>api/download/<%= e.book.id %>/<%= e.id %>" title="Read" type="<%= MIME.from_filename e.path %>" />
 
         <link type="text/html" rel="alternate" title="Read in Mango" href="<%= base_url %>reader/<%= e.book.id %>/<%= e.id %>" />
         <link type="text/html" rel="alternate" title="Open in Mango" href="<%= base_url %>book/<%= e.book.id %>" />

src/views/plugin-download.html.ecr

@@ -1,77 +1,216 @@
-<% if plugins.empty? %>
-  <div class="uk-container uk-text-center">
-    <h2>No Plugins Found</h2>
-    <p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
-    <p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
-  </div>
-
-<% else %>
-  <h2 class=uk-title>Download with Plugins</h2>
-
-  <div id="controls" class="uk-grid-small" uk-grid hidden>
-    <div class="uk-width-3-4@m uk-child-width-1-1">
-      <div class="uk-margin">
-        <label class="uk-form-label" for="search-input">&nbsp;</label>
-        <div class="uk-form-controls">
-          <input id="search-input" class="uk-input" type="text" placeholder="<%= plugin.not_nil!.info.placeholder %>">
-        </div>
-      </div>
+<div x-data="component()" x-init="init()" x-cloak>
+  <div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
+    <div class="uk-container uk-text-center" x-show="plugins.length === 0" style="width:100%">
+      <h2>No Plugins Found</h2>
+      <p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
+      <p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
     </div>
-    <div class="uk-width-expand">
-      <div class="uk-margin">
-        <label class="uk-form-label" for="plugin-select">Choose a plugin</label>
-        <div class="uk-form-controls">
-          <select id="plugin-select" class="uk-select">
-            <% plugins.each do |p| %>
-              <option value="<%= p[:id] %>"><%= p[:title] %></option>
-            <% end %>
-          </select>
+
+    <div x-show="plugins.length > 0" style="width:100%">
+      <h2 class=uk-title>Download with Plugins
+        <span x-show="searching" uk-spinner class="uk-margin-left"></span>
+      </h2>
+
+      <template x-if="info !== undefined">
+        <div>
+          <div class="uk-grid-small" uk-grid>
+            <div class="uk-width-3-4@m uk-child-width-1-1">
+              <div class="uk-margin">
+                <div class="uk-form-controls">
+                  <label class="uk-form-label">&nbsp;</label>
+                  <input class="uk-input" type="text" :placeholder="info.placeholder" x-model="query" @keydown.enter="search()">
+                </div>
+              </div>
+            </div>
+            <div class="uk-width-expand">
+              <div class="uk-margin">
+                <label class="uk-form-label">Choose a plugin</label>
+                <div class="uk-form-controls">
+                  <select class="uk-select" x-model="pid" @change="pluginChanged()">
+                    <template x-for="p in plugins" :key="p">
+                      <option :value="p.id" x-text="p.title"></option>
+                    </template>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="uk-width-auto">
+              <div class="uk-margin">
+                <label class="uk-form-label">&nbsp;</label>
+                <div class="uk-form-controls" style="padding-top: 10px;">
+                  <span uk-icon="info" uk-toggle="target: #toggle"></span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <template x-for="entry, idx in Object.entries(info).filter(tp => !['id', 'settings'].includes(tp[0]))" :key="idx">
+            <dl class="uk-description-list" id="toggle" hidden>
+              <dt x-text="entry[0] === 'version' ? 'Target API Version' : entry[0].replace('_', ' ')"></dt>
+              <dd x-text="entry[1]"></dd>
+            </dl>
+          </template>
         </div>
-      </div>
-    </div>
-    <div class="uk-width-auto">
-      <div class="uk-margin">
-        <label class="uk-form-label" for="search-input">&nbsp;</label>
-        <div class="uk-form-controls" style="padding-top: 10px;">
-          <span uk-icon="info" uk-toggle="target: #toggle"></span>
+      </template>
+
+      <template x-if="manga">
+        <div class="uk-margin">
+          <p x-show="manga.length === 0">No matching manga found.</p>
+          <p x-show="manga.length > 0">
+          <span x-text="`${manga.length} manga found`"></span>
+          <span :uk-icon="listManga ? 'chevron-down' : 'chevron-right'" @click="listManga = !listManga"></span>
+          </p>
+
+          <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid x-show="listManga">
+            <template x-for="m in manga" :key="m.id">
+              <div class="item" :data-id="m.id" @click="mangaSelected($event)">
+                <div class="uk-card uk-card-default">
+                  <div class="uk-card-media-top uk-inline">
+                    <img uk-img :data-src="m.cover_url">
+                  </div>
+                  <div class="uk-card-body">
+                    <h3 class="uk-card-title break-word uk-margin-remove-bottom free-height" x-text="m.title"></h3>
+                    <p class="uk-text-meta" x-text="`ID: ${m.id}`"></p>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+
+      <div class="uk-margin-large-top" x-show="chapters !== undefined">
+        <h3 x-text="mangaTitle"></h3>
+        <p x-text="`${chapters ? chapters.length : 0} chapters found`"></p>
+
+        <div class="uk-margin">
+          <div x-show="chapters && chapters.length > 0 && chapters.length <= chaptersLimit">
+            <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()">Download Selected</button>
+            <button class="uk-icon-button uk-margin-small-left" uk-icon="settings" @click="showFilters = !showFilters"></button>
+          </div>
+          <div uk-spinner class="uk-margin-left" x-show="adding"></div>
+        </div>
+
+        <form x-show="showFilters || (chapters && chapters.length > chaptersLimit)" class="uk-form-stacked uk-margin-bottom" id="filter-form">
+          <template x-for="field in filters">
+            <div class="uk-margin">
+              <label class="uk-form-label">
+                <span x-text="field.key"></span>
+                <template x-if="field.type === 'number'">
+                  <span class="uk-text-meta" x-text="`(between ${Math.min(...field.values)} and ${Math.max(...field.values)})`"></span>
+                </template>
+              </label>
+
+              <div x-show="field.type === 'number'" class="uk-grid-small" uk-grid>
+                <div class="uk-width-1-2@s">
+                  <input class="uk-input" placeholder="minimum value" :data-filter-key="field.key" data-filter-type="number-min">
+                </div>
+                <div class="uk-width-1-2@s">
+                  <input class="uk-input" placeholder="maximum value" :data-filter-key="field.key" data-filter-type="number-max">
+                </div>
+              </div>
+
+              <div x-show="field.type === 'date'" class="uk-grid-small" uk-grid>
+                <div class="uk-width-1-2@s">
+                  <input class="uk-input" type="date" placeholder="minimum date (yyyy-mm-dd)" :data-filter-key="field.key" data-filter-type="date-min">
+                </div>
+                <div class="uk-width-1-2@s">
+                  <input class="uk-input" type="date" placeholder="maximum date (yyyy-mm-dd)" :data-filter-key="field.key" data-filter-type="date-max">
+                </div>
+              </div>
+
+              <input x-show="field.type === 'string'" class="uk-input" placeholder="filter text" :data-filter-key="field.key" data-filter-type="string">
+
+              <select class="uk-select" x-show="field.type === 'array'" :data-filter-key="field.key" data-filter-type="array">
+                <option value="all">All</option>
+                <template x-for="v in field.values" :key="v">
+                  <option x-text="v" :value="v"></option>
+                </template>
+              </select>
+            </div>
+          </template>
+          <button class="uk-button uk-button-primary" @click.prevent="applyFilters()">Apply</button>
+          <button class="uk-button uk-button-default" @click.prevent="clearFilters()">Clear</button>
+          <span x-show="subscribable">
+            <span class="uk-divider-vertical uk-margin-left uk-margin-right"></span>
+            <button class="uk-button uk-button-default" @click.prevent="UIkit.modal($refs.modal).show()" :disable="subscribing">Subscribe</button>
+          </span>
+        </form>
+
+        <p class="uk-text-meta" x-show="chapters && chapters.length > chaptersLimit" x-text="`The manga has ${chapters ? chapters.length : 0} chapters, but Mango can only list up to ${chaptersLimit}. Please use the filters to narrow down your search.`"></p>
+        <p x-show="chapters && chapters.length === 0" class="uk-text-meta">No chapters found.</p>
+
+        <div x-show="chapters && chapters.length > 0 && chapters.length <= chaptersLimit">
+          <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 class="uk-overflow-auto">
+            <table class="uk-table uk-table-striped">
+              <thead>
+                <tr>
+                  <template x-for="(k, idx) in chapterKeys" :key="k">
+                    <th :id="`th-${idx}`" @click="thClicked($event)">
+                      <span x-text="k"></span>
+                      <i class="fas fa-sort" x-show="![1, -1].includes(sortOptions[idx])"></i>
+                      <i class="fas fa-sort-up" x-show="sortOptions[idx] === 1"></i>
+                      <i class="fas fa-sort-down" x-show="sortOptions[idx] === -1"></i>
+                    </th>
+                  </template>
+                </tr>
+              </thead>
+              <tbody id="selectable">
+                <template x-if="chapters !== undefined && chapters.length < chaptersLimit">
+                  <template x-for="ch in chapters" :key="ch">
+                    <tr class="ui-widget-content" :id="ch.id">
+                      <template x-for="k in chapterKeys" :key="k">
+                        <td x-html="renderCell(ch[k])"></td>
+                      </template>
+                    </tr>
+                  </template>
+                </template>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
   </div>
 
-  <dl class="uk-description-list" id="toggle" hidden>
-    <% plugin.not_nil!.info.each do |k, v| %>
-      <dt><%= k %></dt>
-      <dd><%= v.to_s %></dd>
-    <% end %>
-  </dl>
-
-  <div id="table" class="uk-margin-large-top" hidden>
-    <h3 id="title-text"></h3>
-
-    <div class="uk-margin">
-      <button class="uk-button uk-button-default" onclick="selectAll()">Select All</button>
-      <button class="uk-button uk-button-default" onclick="unselect()">Clear Selections</button>
-      <button class="uk-button uk-button-primary" id="download-btn" onclick="download()">Download Selected</button>
-      <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>
-    <div class="uk-overflow-auto">
-      <table class="uk-table uk-table-striped tablesorter">
-      </table>
+  <div uk-modal="container:false" x-ref="modal">
+    <div class="uk-modal-dialog">
+      <div class="uk-modal-header">
+        <h2 class="uk-modal-title">Subscription Confirmation</h2>
+      </div>
+      <div class="uk-modal-body">
+        <p>A subscription with the following filters with be created. All <strong>FUTURE</strong> chapters matching the filters will be automatically downloaded.</p>
+        <table class="uk-table uk-table-striped">
+          <thead>
+            <tr>
+              <th>Key</th>
+              <th>Type</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template x-for="ft in filterSettings" :key="ft">
+              <tr x-html="renderFilterRow(ft)"></tr>
+            </template>
+          </tbody>
+        </table>
+        <p>Enter a meaningful name for the subscription to continue:</p>
+        <input class="uk-input" type="text" x-model="subscriptionName">
+      </div>
+      <div class="uk-modal-footer uk-text-right">
+        <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
+        <button class="uk-button uk-button-primary" type="button" :disabled="subscriptionName.trim().length === 0" @click="subscribe($refs.modal)">Confirm</button>
+      </div>
     </div>
   </div>
-<% end %>
-
+</div>
 
 <% content_for "script" do %>
-  <% if plugin %>
-    <script>
-      var pid = "<%= plugin.not_nil!.info.id %>";
-    </script>
-  <% end %>
   <%= render_component "jquery-ui" %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.combined.min.js"></script>
+  <%= render_component "moment" %>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/plugin-download.js"></script>
 <% end %>

src/views/reader-error.html.ecr

@@ -5,7 +5,7 @@
       <div>
         <h3 class="uk-modal-title uk-margin-remove-top">Error</h3>
       </div>
-      <p class="uk-text-meta uk-margin-remove-bottom"><%= entry.zip_path %></p>
+      <p class="uk-text-meta uk-margin-remove-bottom"><%= entry.path %></p>
       <p class="uk-text-meta uk-margin-remove-top"><%= entry.err_msg %></p>
     </div>
     <div class="uk-modal-body">

src/views/reader.html.ecr

@@ -5,7 +5,7 @@
   <%= render_component "head" %>
 
   <body style="position:relative;" x-data="readerComponent()" x-init="init($nextTick)" @resize.window="resized()">
-    <div class="uk-section uk-section-default uk-section-small reader-bg" :style="mode === 'continuous' ? '' : 'padding:0'">
+    <div class="uk-section uk-section-default uk-section-small reader-bg" :style="mode === 'continuous' ? '' : 'padding:0; position: relative;'">
 
       <div @keydown.window.debounce="keyHandler($event)"></div>
 
@@ -19,7 +19,7 @@
       </div>
 
       <div
-        :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
+        :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}" style="width: fit-content;">
         <div x-show="!loading && mode === 'continuous'" x-cloak>
           <template x-if="!loading && mode === 'continuous'" x-for="item in items">
             <img
@@ -30,7 +30,7 @@
               :height="item.height"
               :id="item.id"
               :style="`margin-top:${margin}px; margin-bottom:${margin}px`"
-              @click="showControl($event)"
+              @click="clickImage($event)"
               />
           </template>
           <%- if next_entry_url -%>
@@ -40,23 +40,23 @@
           <%- end -%>
         </div>
 
-        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh">
+        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" :style="`height:${fitType === 'vert' ? '100vh' : ''}; min-width: fit-content;`">
 
           <img uk-img :class="{
                                'uk-align-center': true, 
                                'uk-animation-slide-left': flipAnimation === 'left', 
                                'uk-animation-slide-right': flipAnimation === 'right'
-                               }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="showControl($event)" :style="`
-                                                                                                                                                                 width:${mode === 'width' ? '100vw' : 'auto'}; 
-                                                                                                                                                                 height:${mode === 'height' ? '100vh' : 'auto'}; 
+                               }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="clickImage($event)" :style="`
+                                                                                                                                                                 width:${fitType === 'horz' ? '100vw' : 'auto'}; 
+                                                                                                                                                                 height:${fitType === 'vert' ? '100vh' : 'auto'}; 
                                                                                                                                                                  margin-bottom:0;
-                                                                                                                                                                 max-width:100%;
-                                                                                                                                                                 max-height:100%;
+                                                                                                                                                                 max-width:${fitType === 'horz' ? '100%' : fitType === 'vert' ? '' : 'none' };
+                                                                                                                                                                 max-height:${fitType === 'vert' ? '100%' : fitType === 'horz' ? '' : 'none'};
                                                                                                                                                                  object-fit: contain;
                                                                                                                                                                  `" />
 
-          <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div>
-          <div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true)"></div>
+          <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false ^ enableRightToLeft)"></div>
+          <div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true ^ enableRightToLeft)"></div>
         </div>
 
       </div>
@@ -67,7 +67,7 @@
         <button class="uk-modal-close-default" type="button" uk-close></button>
         <div class="uk-modal-header">
           <h3 class="uk-modal-title break-word"><%= entry.display_name %></h3>
-          <p class="uk-text-meta uk-margin-remove-bottom break-word"><%= entry.zip_path %></p>
+          <p class="uk-text-meta uk-margin-remove-bottom break-word"><%= entry.path %></p>
         </div>
         <div class="uk-modal-body">
           <div class="uk-margin">
@@ -94,6 +94,17 @@
             </div>
           </div>
 
+          <div class="uk-margin" x-show="mode !== 'continuous'">
+            <label class="uk-form-label" for="mode-select">Page fit</label>
+            <div class="uk-form-controls">
+              <select id="fit-select" class="uk-select" @change="fitChanged()">
+                <option value="vert">Fit height</option>
+                <option value="horz">Fit width</option>
+                <option value="real">Real size</option>
+              </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">
@@ -114,6 +125,12 @@
             </div>
           </div>
 
+          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
+            <label class="uk-form-label" for="enable-right-to-left">Right to Left</label>
+            <div class="uk-form-controls">
+              <input id="enable-right-to-left" class="uk-checkbox" type="checkbox" x-model="enableRightToLeft" @change="enableRightToLeftChanged()">
+            </div>
+          </div>
           <hr class="uk-divider-icon">
 
           <div class="uk-margin">

src/views/subscription-manager.html.ecr

@@ -0,0 +1,101 @@
+<h2 class=uk-title>Subscription Manager</h2>
+<div x-data="component()" x-init="init()">
+  <div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
+    <div class="uk-container uk-text-center" x-show="plugins.length === 0" style="width:100%">
+      <h2>No Plugins Found</h2>
+      <p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
+      <p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
+    </div>
+
+    <div x-show="plugins.length > 0" style="width:100%">
+      <div class="uk-margin">
+        <label class="uk-form-label">Choose a plugin</label>
+        <div class="uk-form-controls">
+          <select class="uk-select" x-model="pid" @change="pluginChanged()">
+            <template x-for="p in plugins" :key="p">
+              <option :value="p.id" x-text="p.title"></option>
+            </template>
+          </select>
+        </div>
+      </div>
+
+      <p x-show="subscriptions.length === 0" class="uk-text-meta">No subscriptions found.</p>
+
+      <div class="uk-overflow-auto" x-show="subscriptions.length > 0">
+        <table class="uk-table uk-table-striped">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Plugin ID</th>
+              <th>Manga Title</th>
+              <th>Created At</th>
+              <th>Last Checked</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template x-for="sub in subscriptions" :key="sub">
+              <tr :sid="sub.id" @click="selected($event, $refs.modal)">
+                <td x-html="renderStrCell(sub.name)"></td>
+                <td x-html="renderStrCell(sub.plugin_id)"></td>
+                <td x-html="renderStrCell(sub.manga_title)"></td>
+                <td x-html="renderDateCell(sub.created_at)"></td>
+                <td x-html="renderDateCell(sub.last_checked)"></td>
+                <td>
+                  <a @click.prevent.stop="actionHandler($event, 'delete')" uk-icon="trash" uk-tooltip="Delete" :disabled="loading"></a>
+                  <a @click.prevent.stop="actionHandler($event, 'update')" uk-icon="refresh" uk-tooltip="Check for updates" :disabled="loading"></a>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div uk-modal="container:false" x-ref="modal" class="uk-flex-top">
+    <div class="uk-modal-dialog uk-margin-auto-vertical uk-overflow-auto">
+      <div class="uk-modal-header">
+        <h2 class="uk-modal-title">Subscription Details</h2>
+      </div>
+      <div class="uk-modal-body">
+        <dl>
+          <dt>Name</dt>
+          <dd x-html="subscription && subscription.name"></dd>
+          <dt>Subscription ID</dt>
+          <dd x-html="subscription && subscription.id"></dd>
+          <dt>Plugin ID</dt>
+          <dd x-html="subscription && subscription.plugin_id"></dd>
+          <dt>Manga Title</dt>
+          <dd x-html="subscription && subscription.manga_title"></dd>
+          <dt>Manga ID</dt>
+          <dd x-html="subscription && subscription.manga_id"></dd>
+          <dt>Filters</dt>
+        </dl>
+        <table class="uk-table uk-table-striped">
+          <thead>
+            <tr>
+              <th>Key</th>
+              <th>Type</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template x-for="ft in (subscription && subscription.filters || [])" :key="ft">
+              <tr x-html="renderFilterRow(ft)"></tr>
+            </template>
+          </tbody>
+        </table>
+        <p class="uk-text-right">
+        <button class="uk-button uk-button-default uk-modal-close" type="button">OK</button>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "moment" %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/subscription-manager.js"></script>
+<% end %>

src/views/subscription.html.ecr

@@ -1,54 +0,0 @@
-<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/title.html.ecr

@@ -18,7 +18,8 @@
       </div>
     </div>
   </div>
-  <h2 class=uk-title><span><%= title.display_name %></span>
+  <h2 class=uk-title data-file-title="<%= HTML.escape(title.title) %>" data-sort-title="<%= HTML.escape(title.sort_title_db || "") %>">
+    <span><%= title.display_name %></span>
     &nbsp;
     <% if is_admin %>
       <a onclick="edit()" class="uk-icon-button" uk-icon="icon:pencil"></a>
@@ -59,8 +60,8 @@
 </div>
 
 <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-  <% title.titles.each_with_index do |item, i| %>
-    <% progress = title_percentage[i] %>
+  <% sorted_titles.each do |item| %>
+    <% progress = title_percentage_map[item.id] %>
     <%= render_component "card" %>
   <% end %>
 </div>
@@ -89,6 +90,13 @@
           <input class="uk-input" type="text" name="display-name" id="display-name-field">
         </div>
       </div>
+      <div class="uk-margin">
+        <label class="uk-form-label" for="sort-title">Sort Title</label>
+        <div class="uk-inline">
+          <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon:check"></a>
+          <input class="uk-input" type="text" name="sort-title" id="sort-title-field">
+        </div>
+      </div>
       <div class="uk-margin">
         <label class="uk-form-label">Cover Image</label>
         <div class="uk-grid">