Fix incorrect default DB path

Add ESLint

.ameba.yml

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

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  parser: '@babel/eslint-parser',
+  parserOptions: { requireConfigFile: false },
+  plugins: ['prettier'],
+  rules: {
+    eqeqeq: ['error', 'always'],
+    'object-shorthand': ['error', 'always'],
+    'prettier/prettier': 'error',
+    'no-var': 'error',
+  },
+};

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 80,
+    "tabWidth": 2
+}

Makefile

@@ -29,6 +29,7 @@ test:
 check:
 	crystal tool format --check
 	./bin/ameba
+	yarn lint
 
 arm32v7:
 	crystal build src/mango.cr --release --progress --error-trace --cross-compile --target='arm-linux-gnueabihf' -o mango-arm32v7

README.md

@@ -51,7 +51,7 @@ The official docker images are available on [Dockerhub](https://hub.docker.com/r
 ### CLI
 
 ```
-  Mango - Manga Server and Web Reader. Version 0.25.0
+  Mango - Manga Server and Web Reader. Version 0.27.0
 
   Usage:
 
@@ -88,15 +88,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: ""
+plugin_update_interval_hours: 24
 ```
 
-- `scan_interval_minutes`, `thumbnail_generation_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`.

gulpfile.js

@@ -5,12 +5,16 @@ const minifyCss = require('gulp-minify-css');
 const less = require('gulp-less');
 
 gulp.task('copy-img', () => {
-	return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
+  return gulp
+    .src('node_modules/uikit/src/images/backgrounds/*.svg')
     .pipe(gulp.dest('public/img'));
 });
 
 gulp.task('copy-font', () => {
-	return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff**')
+  return gulp
+    .src(
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff**',
+    )
     .pipe(gulp.dest('public/webfonts'));
 });
 
@@ -19,48 +23,59 @@ gulp.task('node-modules-copy', gulp.parallel('copy-img', 'copy-font'));
 
 // Compile less
 gulp.task('less', () => {
-	return gulp.src([
-			'public/css/mango.less',
-			'public/css/tags.less'
-		])
+  return gulp
+    .src(['public/css/mango.less', 'public/css/tags.less'])
     .pipe(less())
     .pipe(gulp.dest('public/css'));
 });
 
 // Transpile and minify JS files and output to dist
 gulp.task('babel', () => {
-	return gulp.src(['public/js/*.js', '!public/js/*.min.js'])
-		.pipe(babel({
+  return gulp
+    .src(['public/js/*.js', '!public/js/*.min.js'])
+    .pipe(
+      babel({
         presets: [
-				['@babel/preset-env', {
-					targets: '>0.25%, not dead, ios>=9'
-				}]
+          [
+            '@babel/preset-env',
+            {
+              targets: '>0.25%, not dead, ios>=9',
+            },
           ],
-		}))
-		.pipe(minify({
+        ],
+      }),
+    )
+    .pipe(
+      minify({
         removeConsole: true,
-			builtIns: false
-		}))
+        builtIns: false,
+      }),
+    )
     .pipe(gulp.dest('dist/js'));
 });
 
 // Minify CSS and output to dist
 gulp.task('minify-css', () => {
-	return gulp.src('public/css/*.css')
+  return gulp
+    .src('public/css/*.css')
     .pipe(minifyCss())
     .pipe(gulp.dest('dist/css'));
 });
 
 // Copy static files (includeing images) to dist
 gulp.task('copy-files', () => {
-	return gulp.src([
+  return gulp
+    .src(
+      [
         'public/*.*',
         'public/img/**',
         'public/webfonts/*',
-			'public/js/*.min.js'
-		], {
-			base: 'public'
-		})
+        'public/js/*.min.js',
+      ],
+      {
+        base: 'public',
+      },
+    )
     .pipe(gulp.dest('dist'));
 });
 

package.json

@@ -6,20 +6,25 @@
 	"author": "Alex Ling <hkalexling@gmail.com>",
 	"license": "MIT",
 	"devDependencies": {
+		"@babel/eslint-parser": "^7.18.9",
 		"@babel/preset-env": "^7.11.5",
 		"all-contributors-cli": "^6.19.0",
+		"eslint": "^8.22.0",
+		"eslint-plugin-prettier": "^4.2.1",
 		"gulp": "^4.0.2",
 		"gulp-babel": "^8.0.0",
 		"gulp-babel-minify": "^0.5.1",
 		"gulp-less": "^4.0.1",
 		"gulp-minify-css": "^1.2.4",
-		"less": "^3.11.3"
+		"less": "^3.11.3",
+		"prettier": "^2.7.1"
 	},
 	"scripts": {
-		"uglify": "gulp"
+		"uglify": "gulp",
+		"lint": "eslint public/js *.js --ext .js"
 	},
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^5.14.0",
-		"uikit": "^3.5.4"
+		"uikit": "~3.14.0"
 	}
 }

public/js/admin.js

@@ -27,11 +27,11 @@ const component = () => {
       this.scanMs = -1;
       this.scanTitles = 0;
       $.post(`${base_url}api/admin/scan`)
-				.then(data => {
+        .then((data) => {
           this.scanMs = data.milliseconds;
           this.scanTitles = data.titles;
         })
-				.catch(e => {
+        .catch((e) => {
           alert('danger', `Failed to trigger a scan. Error: ${e}`);
         })
         .always(() => {
@@ -42,14 +42,12 @@ const component = () => {
       if (this.generating) return;
       this.generating = true;
       this.progress = 0.0;
-			$.post(`${base_url}api/admin/generate_thumbnails`)
-				.then(() => {
-					this.getProgress()
+      $.post(`${base_url}api/admin/generate_thumbnails`).then(() => {
+        this.getProgress();
       });
     },
     getProgress() {
-			$.get(`${base_url}api/admin/thumbnail_progress`)
-				.then(data => {
+      $.get(`${base_url}api/admin/thumbnail_progress`).then((data) => {
         this.progress = data.progress;
         this.generating = data.progress > 0;
       });

public/js/alert.js

@@ -2,5 +2,5 @@ const alert = (level, text) => {
   $('#alert').empty();
   const html = `<div class="uk-alert-${level}" uk-alert><a class="uk-alert-close" uk-close></a><p>${text}</p></div>`;
   $('#alert').append(html);
-	$("html, body").animate({ scrollTop: 0 });
+  $('html, body').animate({ scrollTop: 0 });
 };

public/js/common.js

@@ -41,7 +41,10 @@ const getProp = (key, selector = '#root') => {
  * @return {bool}
  */
 const preferDarkMode = () => {
-	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return (
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
 };
 
 /**
@@ -87,7 +90,7 @@ const loadTheme = () => {
  * @function saveThemeSetting
  * @param {string} setting - A theme setting
  */
-const saveThemeSetting = setting => {
+const saveThemeSetting = (setting) => {
   if (!validThemeSetting(setting)) setting = 'system';
   localStorage.setItem('theme', setting);
 };
@@ -134,8 +137,9 @@ $(() => {
 
   // on system dark mode setting change
   if (window.matchMedia) {
-		window.matchMedia('(prefers-color-scheme: dark)')
-			.addEventListener('change', event => {
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', (event) => {
         if (loadThemeSetting() === 'system')
           setTheme(event.matches ? 'dark' : 'light');
       });

public/js/dots.js

@@ -14,7 +14,7 @@ const truncate = (e) => {
       } else {
         $(e).removeAttr('uk-tooltip');
       }
-		}
+    },
   });
 };
 

public/js/download-manager.js

@@ -7,22 +7,22 @@ const component = () => {
     ws: undefined,
 
     wsConnect(secure = true) {
-			const url = `${secure ? 'wss' : 'ws'}://${location.host}${base_url}api/admin/mangadex/queue`;
+      const url = `${secure ? 'wss' : 'ws'}://${
+        location.host
+      }${base_url}api/admin/mangadex/queue`;
       console.log(`Connecting to ${url}`);
       this.ws = new WebSocket(url);
-			this.ws.onmessage = event => {
+      this.ws.onmessage = (event) => {
         const data = JSON.parse(event.data);
         this.jobs = data.jobs;
         this.paused = data.paused;
       };
       this.ws.onclose = () => {
-				if (this.ws.failed)
-					return this.wsConnect(false);
+        if (this.ws.failed) return this.wsConnect(false);
         alert('danger', 'Socket connection closed');
       };
       this.ws.onerror = () => {
-				if (secure)
-					return this.ws.failed = true;
+        if (secure) return (this.ws.failed = true);
         alert('danger', 'Socket connection failed');
       };
     },
@@ -35,18 +35,24 @@ const component = () => {
       $.ajax({
         type: 'GET',
         url: base_url + 'api/admin/mangadex/queue',
-					dataType: 'json'
+        dataType: 'json',
       })
-				.done(data => {
+        .done((data) => {
           if (!data.success && data.error) {
-						alert('danger', `Failed to fetch download queue. Error: ${data.error}`);
+            alert(
+              'danger',
+              `Failed to fetch download queue. Error: ${data.error}`,
+            );
             return;
           }
           this.jobs = data.jobs;
           this.paused = data.paused;
         })
         .fail((jqXHR, status) => {
-					alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+          alert(
+            'danger',
+            `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+          );
         })
         .always(() => {
           this.loading = false;
@@ -55,26 +61,36 @@ const component = () => {
     jobAction(action, event) {
       let url = `${base_url}api/admin/mangadex/queue/${action}`;
       if (event) {
-				const id = event.currentTarget.closest('tr').id.split('-').slice(1).join('-');
+        const id = event.currentTarget
+          .closest('tr')
+          .id.split('-')
+          .slice(1)
+          .join('-');
         url = `${url}?${$.param({
-					id: id
+          id,
         })}`;
       }
       console.log(url);
       $.ajax({
         type: 'POST',
-					url: url,
-					dataType: 'json'
+        url,
+        dataType: 'json',
       })
-				.done(data => {
+        .done((data) => {
           if (!data.success && data.error) {
-						alert('danger', `Failed to ${action} job from download queue. Error: ${data.error}`);
+            alert(
+              'danger',
+              `Failed to ${action} job from download queue. Error: ${data.error}`,
+            );
             return;
           }
           this.load();
         })
         .fail((jqXHR, status) => {
-					alert('danger', `Failed to ${action} job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+          alert(
+            'danger',
+            `Failed to ${action} job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+          );
         });
     },
     toggle() {
@@ -83,11 +99,14 @@ const component = () => {
       const url = `${base_url}api/admin/mangadex/queue/${action}`;
       $.ajax({
         type: 'POST',
-					url: url,
-					dataType: 'json'
+        url,
+        dataType: 'json',
       })
         .fail((jqXHR, status) => {
-					alert('danger', `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+          alert(
+            'danger',
+            `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+          );
         })
         .always(() => {
           this.load();
@@ -111,6 +130,6 @@ const component = () => {
           break;
       }
       return cls;
-		}
+    },
   };
 };

public/js/missing-items.js

@@ -7,9 +7,9 @@ const component = () => {
 
     load() {
       this.loading = true;
-			this.request('GET', `${base_url}api/admin/titles/missing`, data => {
+      this.request('GET', `${base_url}api/admin/titles/missing`, (data) => {
         this.titles = data.titles;
-				this.request('GET', `${base_url}api/admin/entries/missing`, data => {
+        this.request('GET', `${base_url}api/admin/entries/missing`, (data) => {
           this.entries = data.entries;
           this.loading = false;
           this.empty = this.entries.length === 0 && this.titles.length === 0;
@@ -19,22 +19,33 @@ const component = () => {
     rm(event) {
       const rawID = event.currentTarget.closest('tr').id;
       const [type, id] = rawID.split('-');
-			const url = `${base_url}api/admin/${type === 'title' ? 'titles' : 'entries'}/missing/${id}`;
+      const url = `${base_url}api/admin/${
+        type === 'title' ? 'titles' : 'entries'
+      }/missing/${id}`;
       this.request('DELETE', url, () => {
         this.load();
       });
     },
     rmAll() {
-			UIkit.modal.confirm('Are you sure? All metadata associated with these items, including their tags and thumbnails, will be deleted from the database.', {
+      UIkit.modal
+        .confirm(
+          'Are you sure? All metadata associated with these items, including their tags and thumbnails, will be deleted from the database.',
+          {
             labels: {
               ok: 'Yes, delete them',
-					cancel: 'Cancel'
-				}
-			}).then(() => {
+              cancel: 'Cancel',
+            },
+          },
+        )
+        .then(() => {
           this.request('DELETE', `${base_url}api/admin/titles/missing`, () => {
-					this.request('DELETE', `${base_url}api/admin/entries/missing`, () => {
+            this.request(
+              'DELETE',
+              `${base_url}api/admin/entries/missing`,
+              () => {
                 this.load();
-					});
+              },
+            );
           });
         });
     },
@@ -42,10 +53,10 @@ const component = () => {
       console.log(url);
       $.ajax({
         type: method,
-					url: url,
-					contentType: 'application/json'
+        url,
+        contentType: 'application/json',
       })
-				.done(data => {
+        .done((data) => {
           if (data.error) {
             alert('danger', `Failed to ${method} ${url}. Error: ${data.error}`);
             return;
@@ -53,8 +64,11 @@ const component = () => {
           if (cb) cb(data);
         })
         .fail((jqXHR, status) => {
-					alert('danger', `Failed to ${method} ${url}. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+          alert(
+            'danger',
+            `Failed to ${method} ${url}. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+          );
         });
-		}
+    },
   };
 };

public/js/plugin-download.js

@@ -1,14 +1,15 @@
 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: "",
+    query: '',
+    mangaTitle: '',
     searching: false,
     adding: false,
     sortOptions: [],
@@ -17,16 +18,16 @@ const component = () => {
     chaptersLimit: 500,
     listManga: false,
     subscribing: false,
-		subscriptionName: "",
+    subscriptionName: '',
 
     init() {
       const tableObserver = new MutationObserver(() => {
-				console.log("table mutated");
-				$("#selectable").selectable({
-					filter: "tr",
+        console.log('table mutated');
+        $('#selectable').selectable({
+          filter: 'tr',
         });
       });
-			tableObserver.observe($("table").get(0), {
+      tableObserver.observe($('table').get(0), {
         childList: true,
         subtree: true,
       });
@@ -36,47 +37,44 @@ const component = () => {
           if (!data.success) throw new Error(data.error);
           this.plugins = data.plugins;
 
-					const pid = localStorage.getItem("plugin");
+          const pid = localStorage.getItem('plugin');
           if (pid && this.plugins.map((p) => p.id).includes(pid))
             return this.loadPlugin(pid);
 
-					if (this.plugins.length > 0)
-						this.loadPlugin(this.plugins[0].id);
+          if (this.plugins.length > 0) this.loadPlugin(this.plugins[0].id);
         })
         .catch((e) => {
-					alert(
-						"danger",
-						`Failed to list the available plugins. Error: ${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}`
-					);
+          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);
+      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)
+        (k) => !['manga_title'].includes(k),
       );
     },
     searchChapters(query) {
@@ -88,8 +86,8 @@ const component = () => {
       fetch(
         `${base_url}api/admin/plugin/list?${new URLSearchParams({
           plugin: this.pid,
-					query: query,
-				})}`
+          query,
+        })}`,
       )
         .then((res) => res.json())
         .then((data) => {
@@ -105,7 +103,7 @@ const component = () => {
           this.chapters = data.chapters;
         })
         .catch((e) => {
-					alert("danger", `Failed to list chapters. Error: ${e}`);
+          alert('danger', `Failed to list chapters. Error: ${e}`);
         })
         .finally(() => {
           this.searching = false;
@@ -119,8 +117,8 @@ const component = () => {
       fetch(
         `${base_url}api/admin/plugin/search?${new URLSearchParams({
           plugin: this.pid,
-					query: query,
-				})}`
+          query,
+        })}`,
       )
         .then((res) => res.json())
         .then((data) => {
@@ -129,7 +127,7 @@ const component = () => {
           this.listManga = true;
         })
         .catch((e) => {
-					alert("danger", `Search failed. Error: ${e}`);
+          alert('danger', `Search failed. Error: ${e}`);
         })
         .finally(() => {
           this.searching = false;
@@ -140,6 +138,7 @@ const component = () => {
       if (!query) return;
 
       this.manga = undefined;
+      this.mid = undefined;
       if (this.info.version === 1) {
         this.searchChapters(query);
       } else {
@@ -147,37 +146,35 @@ const component = () => {
       }
     },
     selectAll() {
-			$("tbody > tr").each((i, e) => {
-				$(e).addClass("ui-selected");
+      $('tbody > tr').each((i, e) => {
+        $(e).addClass('ui-selected');
       });
     },
     clearSelection() {
-			$("tbody > tr").each((i, e) => {
-				$(e).removeClass("ui-selected");
+      $('tbody > tr').each((i, e) => {
+        $(e).removeClass('ui-selected');
       });
     },
     download() {
-			const selected = $("tbody > tr.ui-selected").get();
+      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)
-					);
+          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",
+            method: 'POST',
             body: JSON.stringify({
               chapters,
               plugin: this.pid,
               title: this.mangaTitle,
             }),
             headers: {
-							"Content-Type": "application/json",
+              'Content-Type': 'application/json',
             },
           })
             .then((res) => res.json())
@@ -186,16 +183,16 @@ const component = () => {
               const successCount = parseInt(data.success);
               const failCount = parseInt(data.fail);
               alert(
-								"success",
+                '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>.`
+                } 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}`
+                'danger',
+                `Failed to add chapters to the download queue. Error: ${e}`,
               );
             })
             .finally(() => {
@@ -204,7 +201,7 @@ const component = () => {
         });
     },
     thClicked(event) {
-			const idx = parseInt(event.currentTarget.id.split("-")[1]);
+      const idx = parseInt(event.currentTarget.id.split('-')[1]);
       if (idx === undefined || isNaN(idx)) return;
       const curOption = this.sortOptions[idx];
       let option;
@@ -227,51 +224,46 @@ const component = () => {
     get filteredChapters() {
       let ary = this.allChapters.slice();
 
-			console.log("initial size:", ary.length);
+      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 === 'array' && filter.value === 'all') continue;
+        if (filter.type.startsWith('number') && isNaN(filter.value)) continue;
 
-				if (filter.type === "string") {
+        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]
-							.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())
+              .map((s) => (typeof s === 'string' ? s.toLowerCase() : s))
+              .includes(filter.value.toLowerCase()),
           );
         }
 
-				console.log("filtered size:", ary.length);
+        console.log('filtered size:', ary.length);
       }
 
       return ary;
@@ -298,59 +290,58 @@ const component = () => {
       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();
+        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";
+      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)
+        (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 (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();
-							})
-						)
+                if (typeof v === 'string') return v.toLowerCase();
+              }),
+            ),
           );
         }
 
         return {
           key: k,
-					type: type,
-					values: values,
+          type,
+          values,
         };
       });
     },
     get filterSettings() {
-			return $("#filter-form input:visible, #filter-form select:visible")
+      return $('#filter-form input:visible, #filter-form select:visible')
         .get()
         .map((i) => {
-					const type = i.getAttribute("data-filter-type");
+          const type = i.getAttribute('data-filter-type');
           let value = i.value.trim();
-					if (type.startsWith("date"))
-						value = value ? Date.parse(value).toString() : "";
+          if (type.startsWith('date'))
+            value = value ? Date.parse(value).toString() : '';
           return {
-						key: i.getAttribute("data-filter-key"),
-						value: value,
-						type: type,
+            key: i.getAttribute('data-filter-key'),
+            value,
+            type,
           };
         });
     },
@@ -360,23 +351,23 @@ const component = () => {
       this.sortOptions = [];
     },
     clearFilters() {
-			$("#filter-form input")
+      $('#filter-form input')
         .get()
-				.forEach((i) => (i.value = ""));
-			$("#filter-form select").val("all");
+        .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");
+      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",
+        method: 'POST',
         body: JSON.stringify({
           filters: this.filterSettings,
           plugin: this.pid,
@@ -385,16 +376,16 @@ const component = () => {
           manga_id: this.mid,
         }),
         headers: {
-					"Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
       })
         .then((res) => res.json())
         .then((data) => {
           if (!data.success) throw new Error(data.error);
-					alert("success", "Subscription created");
+          alert('success', 'Subscription created');
         })
         .catch((e) => {
-					alert("danger", `Failed to subscribe. Error: ${e}`);
+          alert('danger', `Failed to subscribe. Error: ${e}`);
         })
         .finally(() => {
           this.subscribing = false;
@@ -406,14 +397,12 @@ const component = () => {
     },
     renderCell(value) {
       if (this.numIsDate(value))
-				return `<span>${moment(Number(value)).format(
-					"MMM D, YYYY"
-				)}</span>`;
+        return `<span>${moment(Number(value)).format('MMM D, YYYY')}</span>`;
       const maxLength = 40;
       if (value && value.length > maxLength)
         return `<span>${value.substr(
           0,
-					maxLength
+          maxLength,
         )}...</span><div uk-dropdown>${value}</div>`;
       return `<span>${value}</span>`;
     },
@@ -421,24 +410,24 @@ const component = () => {
       const key = ft.key;
       let type = ft.type;
       switch (type) {
-				case "number-min":
-					type = "number (minimum value)";
+        case 'number-min':
+          type = 'number (minimum value)';
           break;
-				case "number-max":
-					type = "number (maximum value)";
+        case 'number-max':
+          type = 'number (maximum value)';
           break;
-				case "date-min":
-					type = "minimum date";
+        case 'date-min':
+          type = 'minimum date';
           break;
-				case "date-max":
-					type = "maximum date";
+        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");
+      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

@@ -14,29 +14,32 @@ const readerComponent = () => {
     margin: 30,
     preloadLookahead: 3,
     enableRightToLeft: false,
+    fitType: 'vert',
 
     /**
      * Initialize the component by fetching the page dimensions
      */
     init(nextTick) {
       $.get(`${base_url}api/dimensions/${tid}/${eid}`)
-				.then(data => {
-					if (!data.success && data.error)
-						throw new Error(resp.error);
+        .then((data) => {
+          if (!data.success && data.error) throw new Error(resp.error);
           const dimensions = data.dimensions;
 
           this.items = dimensions.map((d, i) => {
             return {
               id: i + 1,
-							url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
-							width: d.width,
-							height: d.height,
+              url: `${base_url}api/page/${tid}/${eid}/${i + 1}`,
+              width: d.width === 0 ? '100%' : d.width,
+              height: d.height === 0 ? '100%' : d.height,
             };
           });
 
-					const avgRatio = this.items.reduce((acc, cur) => {
-						return acc + cur.height / cur.width
-					}, 0) / this.items.length;
+          // 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) / dimensions.length;
 
           console.log(avgRatio);
           this.longPages = avgRatio > 2;
@@ -57,34 +60,47 @@ const readerComponent = () => {
           }
 
           // Preload Images
-					this.preloadLookahead = +(localStorage.getItem('preloadLookahead') ?? 3);
-					const limit = Math.min(page + this.preloadLookahead, this.items.length + 1);
+          this.preloadLookahead = +(
+            localStorage.getItem('preloadLookahead') ?? 3
+          );
+          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 savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
-					this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
+          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');
+            this.enableRightToLeft = savedRightToLeft === 'true';
           }
         })
-				.catch(e => {
+        .catch((e) => {
           const errMsg = `Failed to get the page dimensions. ${e}`;
           console.error(e);
           this.alertClass = 'uk-alert-danger';
           this.msg = errMsg;
-				})
+        });
     },
     /**
      * Preload an image, which is expected to be cached
      */
     preloadImage(url) {
-			(new Image()).src = url;
+      new Image().src = url;
     },
     /**
      * Handles the `change` event for the page selector
@@ -135,7 +151,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);
@@ -144,10 +164,8 @@ const readerComponent = () => {
       this.toPage(newIdx);
 
       if (this.enableFlipAnimation) {
-				if (isNext ^ this.enableRightToLeft)
-					this.flipAnimation = 'right';
-				else
-					this.flipAnimation = 'left';
+        if (isNext ^ this.enableRightToLeft) this.flipAnimation = 'right';
+        else this.flipAnimation = 'left';
       }
 
       setTimeout(() => {
@@ -184,7 +202,7 @@ const readerComponent = () => {
       ary.unshift(window.location.origin);
       const url = ary.join('/');
       this.saveProgress(idx);
-			history.replaceState(null, "", url);
+      history.replaceState(null, '', url);
     },
     /**
      * Updates the backend reading progress if:
@@ -199,22 +217,25 @@ const readerComponent = () => {
      */
     saveProgress(idx, cb) {
       idx = parseInt(idx);
-			if (Math.abs(idx - this.lastSavedPage) >= 5 ||
+      if (
+        Math.abs(idx - this.lastSavedPage) >= 5 ||
         this.longPages ||
-				idx === 1 || idx === this.items.length
+        idx === 1 ||
+        idx === this.items.length
       ) {
         this.lastSavedPage = idx;
         console.log('saving progress', idx);
 
-				const url = `${base_url}api/progress/${tid}/${idx}?${$.param({eid: eid})}`;
+        const url = `${base_url}api/progress/${tid}/${idx}?${$.param({
+          eid,
+        })}`;
         $.ajax({
           method: 'PUT',
-						url: url,
-						dataType: 'json'
+          url,
+          dataType: 'json',
         })
-					.done(data => {
-						if (data.error)
-							alert('danger', data.error);
+          .done((data) => {
+            if (data.error) alert('danger', data.error);
             if (cb) cb();
           })
           .fail((jqXHR, status) => {
@@ -253,12 +274,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();
     },
@@ -321,6 +350,11 @@ const readerComponent = () => {
       this.toPage(this.selectedIndex);
     },
 
+    fitChanged() {
+      this.fitType = $('#fit-select').val();
+      localStorage.setItem('fitType', this.fitType);
+    },
+
     preloadLookaheadChanged() {
       localStorage.setItem('preloadLookahead', this.preloadLookahead);
     },
@@ -333,4 +367,4 @@ const readerComponent = () => {
       localStorage.setItem('enableRightToLeft', this.enableRightToLeft);
     },
   };
-}
+};

public/js/search.js

@@ -1,27 +1,25 @@
-$(function(){
-	var filter = [];
-	var result = [];
-	$('.uk-card-title').each(function(){
+$(function () {
+  let filter = [];
+  let result = [];
+  $('.uk-card-title').each(function () {
     filter.push($(this).text());
   });
-	$('.uk-search-input').keyup(function(){
-		var input = $('.uk-search-input').val();
-		var regex = new RegExp(input, 'i');
+  $('.uk-search-input').keyup(function () {
+    let input = $('.uk-search-input').val();
+    let regex = new RegExp(input, 'i');
 
     if (input === '') {
-			$('.item').each(function(){
+      $('.item').each(function () {
         $(this).removeAttr('hidden');
       });
-		}
-		else {
-			filter.forEach(function(text, i){
+    } else {
+      filter.forEach(function (text, i) {
         result[i] = text.match(regex);
       });
-			$('.item').each(function(i){
+      $('.item').each(function (i) {
         if (result[i]) {
           $(this).removeAttr('hidden');
-				}
-				else {
+        } else {
           $(this).attr('hidden', '');
         }
       });

public/js/sort-items.js

@@ -8,7 +8,7 @@ $(() => {
     const url = `${location.protocol}//${location.host}${location.pathname}`;
     const newURL = `${url}?${$.param({
       sort: by,
-			ascend: dir === 'up' ? 1 : 0
+      ascend: dir === 'up' ? 1 : 0,
     })}`;
     window.location.href = newURL;
   });

public/js/subscription-manager.js

@@ -13,36 +13,31 @@ const component = () => {
           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;
+          let pid = localStorage.getItem('plugin');
+          if (!pid || !this.plugins.find((p) => p.id === pid)) {
+            pid = this.plugins[0].id;
+          }
 
+          this.pid = pid;
           this.list(pid);
         })
         .catch((e) => {
-					alert(
-						"danger",
-						`Failed to list the available plugins. Error: ${e}`
-					);
+          alert('danger', `Failed to list the available plugins. Error: ${e}`);
         });
     },
     pluginChanged() {
-			localStorage.setItem("plugin", this.pid);
+      localStorage.setItem('plugin', this.pid);
       this.list(this.pid);
     },
     list(pid) {
       if (!pid) return;
       fetch(
-				`${base_url}api/admin/plugin/subscriptions?${new URLSearchParams(
-					{
+        `${base_url}api/admin/plugin/subscriptions?${new URLSearchParams({
           plugin: pid,
-					}
-				)}`,
+        })}`,
         {
-					method: "GET",
-				}
+          method: 'GET',
+        },
       )
         .then((response) => response.json())
         .then((data) => {
@@ -50,10 +45,7 @@ const component = () => {
           this.subscriptions = data.subscriptions;
         })
         .catch((e) => {
-					alert(
-						"danger",
-						`Failed to list subscriptions. Error: ${e}`
-					);
+          alert('danger', `Failed to list subscriptions. Error: ${e}`);
         });
     },
     renderStrCell(str) {
@@ -61,7 +53,7 @@ const component = () => {
       if (str.length > maxLength)
         return `<td><span>${str.substring(
           0,
-					maxLength
+          maxLength,
         )}...</span><div uk-dropdown>${str}</div></td>`;
       return `<td>${str}</td>`;
     },
@@ -71,7 +63,7 @@ const component = () => {
         .humanize(true)}</td>`;
     },
     selected(event, modal) {
-			const id = event.currentTarget.getAttribute("sid");
+      const id = event.currentTarget.getAttribute('sid');
       this.subscription = this.subscriptions.find((s) => s.id === id);
       UIkit.modal(modal).show();
     },
@@ -79,36 +71,41 @@ const component = () => {
       const key = ft.key;
       let type = ft.type;
       switch (type) {
-				case "number-min":
-					type = "number (minimum value)";
+        case 'number-min':
+          type = 'number (minimum value)';
           break;
-				case "number-max":
-					type = "number (maximum value)";
+        case 'number-max':
+          type = 'number (maximum value)';
           break;
-				case "date-min":
-					type = "minimum date";
+        case 'date-min':
+          type = 'minimum date';
           break;
-				case "date-max":
-					type = "maximum date";
+        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");
+      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");
+      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.', {
+      UIkit.modal
+        .confirm(
+          'Are you sure you want to delete the subscription? This cannot be undone.',
+          {
             labels: {
               ok: 'Yes, delete it',
-					cancel: 'Cancel'
-				}
-			}).then(() => {
+              cancel: 'Cancel',
+            },
+          },
+        )
+        .then(() => {
           this.action(id, type);
         });
     },
@@ -116,27 +113,27 @@ const component = () => {
       if (this.loading) return;
       this.loading = true;
       fetch(
-				`${base_url}api/admin/plugin/subscriptions${type === 'update' ? '/update' : ''}?${new URLSearchParams(
-					{
+        `${base_url}api/admin/plugin/subscriptions${
+          type === 'update' ? '/update' : ''
+        }?${new URLSearchParams({
           plugin: this.pid,
           subscription: id,
-					}
-				)}`,
+        })}`,
         {
-					method: type === 'delete' ? "DELETE" : 'POST'
-				}
+          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.`);
+            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}`
-					);
+          alert('danger', `Failed to ${type} subscription. Error: ${e}`);
         })
         .finally(() => {
           this.loading = false;

public/js/subscription.js

@@ -7,30 +7,45 @@ const component = () => {
       $.getJSON(`${base_url}api/admin/mangadex/expires`)
         .done((data) => {
           if (data.error) {
-						alert('danger', 'Failed to check MangaDex integration status. Error: ' + data.error);
+            alert(
+              'danger',
+              'Failed to check MangaDex integration status. Error: ' +
+                data.error,
+            );
             return;
           }
-					this.available = Boolean(data.expires && data.expires > Math.floor(Date.now() / 1000));
+          this.available = Boolean(
+            data.expires && data.expires > Math.floor(Date.now() / 1000),
+          );
 
           if (this.available) this.getSubscriptions();
         })
         .fail((jqXHR, status) => {
-					alert('danger', `Failed to check MangaDex integration status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-				})
+          alert(
+            'danger',
+            `Failed to check MangaDex integration status. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+          );
+        });
     },
 
     getSubscriptions() {
       $.getJSON(`${base_url}api/admin/mangadex/subscriptions`)
-				.done(data => {
+        .done((data) => {
           if (data.error) {
-						alert('danger', 'Failed to get subscriptions. Error: ' + data.error);
+            alert(
+              'danger',
+              'Failed to get subscriptions. Error: ' + data.error,
+            );
             return;
           }
           this.subscriptions = data.subscriptions;
         })
         .fail((jqXHR, status) => {
-					alert('danger', `Failed to get subscriptions. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-				})
+          alert(
+            'danger',
+            `Failed to get subscriptions. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+          );
+        });
     },
 
     rm(event) {
@@ -38,16 +53,22 @@ const component = () => {
       $.ajax({
         type: 'DELETE',
         url: `${base_url}api/admin/mangadex/subscriptions/${id}`,
-					contentType: 'application/json'
+        contentType: 'application/json',
       })
-				.done(data => {
+        .done((data) => {
           if (data.error) {
-						alert('danger', `Failed to delete subscription. Error: ${data.error}`);
+            alert(
+              'danger',
+              `Failed to delete subscription. Error: ${data.error}`,
+            );
           }
           this.getSubscriptions();
         })
         .fail((jqXHR, status) => {
-					alert('danger', `Failed to delete subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+          alert(
+            'danger',
+            `Failed to delete subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+          );
         });
     },
 
@@ -56,17 +77,26 @@ const component = () => {
       $.ajax({
         type: 'POST',
         url: `${base_url}api/admin/mangadex/subscriptions/check/${id}`,
-					contentType: 'application/json'
+        contentType: 'application/json',
       })
-				.done(data => {
+        .done((data) => {
           if (data.error) {
-						alert('danger', `Failed to check subscription. Error: ${data.error}`);
+            alert(
+              'danger',
+              `Failed to check subscription. Error: ${data.error}`,
+            );
             return;
           }
-					alert('success', 'Mango is now checking the subscription for updates. This might take a while, but you can safely leave the page.');
+          alert(
+            'success',
+            'Mango is now checking the subscription for updates. This might take a while, but you can safely leave the page.',
+          );
         })
         .fail((jqXHR, status) => {
-					alert('danger', `Failed to check subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+          alert(
+            'danger',
+            `Failed to check subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+          );
         });
     },
 
@@ -77,6 +107,6 @@ const component = () => {
 
       if (min === max) return `= ${min}`;
       return `${min} - ${max}`;
-		}
+    },
   };
 };

public/js/title.js

@@ -14,16 +14,24 @@ const setupAcard = () => {
       $(card).attr('data-encoded-book-title'),
       $(card).attr('data-encoded-title'),
       $(card).attr('data-book-id'),
-			$(card).attr('data-id')
+      $(card).attr('data-id'),
     );
   });
 };
 
-function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTitle, titleID, entryID) {
+function showModal(
+  encodedPath,
+  pages,
+  percentage,
+  encodedeTitle,
+  encodedEntryTitle,
+  titleID,
+  entryID,
+) {
   const zipPath = decodeURIComponent(encodedPath);
   const title = decodeURIComponent(encodedeTitle);
   const entry = decodeURIComponent(encodedEntryTitle);
-	$('#modal button, #modal a').each(function() {
+  $('#modal button, #modal a').each(function () {
     $(this).removeAttr('hidden');
   });
   if (percentage === 0) {
@@ -46,16 +54,19 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
   $('#beginning-btn').attr('href', `${base_url}reader/${titleID}/${entryID}/1`);
   $('#continue-btn').attr('href', `${base_url}reader/${titleID}/${entryID}`);
 
-	$('#read-btn').click(function() {
+  $('#read-btn').click(function () {
     updateProgress(titleID, entryID, pages);
   });
-	$('#unread-btn').click(function() {
+  $('#unread-btn').click(function () {
     updateProgress(titleID, entryID, 0);
   });
 
   $('#modal-edit-btn').attr('onclick', `edit("${entryID}")`);
 
-	$('#modal-download-btn').attr('href', `${base_url}api/download/${titleID}/${entryID}`);
+  $('#modal-download-btn').attr(
+    'href',
+    `${base_url}api/download/${titleID}/${entryID}`,
+  );
 
   UIkit.modal($('#modal')).show();
 }
@@ -66,19 +77,18 @@ UIkit.util.on(document, 'hidden', '#modal', () => {
 });
 
 const updateProgress = (tid, eid, page) => {
-	let url = `${base_url}api/progress/${tid}/${page}`
+  let url = `${base_url}api/progress/${tid}/${page}`;
   const query = $.param({
-		eid: eid
+    eid,
   });
-	if (eid)
-		url += `?${query}`;
+  if (eid) url += `?${query}`;
 
   $.ajax({
     method: 'PUT',
-			url: url,
-			dataType: 'json'
+    url,
+    dataType: 'json',
   })
-		.done(data => {
+    .done((data) => {
       if (data.success) {
         location.reload();
       } else {
@@ -101,19 +111,18 @@ const renameSubmit = (name, eid) => {
   }
 
   const query = $.param({
-		eid: eid
+    eid,
   });
   let url = `${base_url}api/admin/display_name/${titleId}/${name}`;
-	if (eid)
-		url += `?${query}`;
+  if (eid) url += `?${query}`;
 
   $.ajax({
     type: 'PUT',
-			url: url,
-			contentType: "application/json",
-			dataType: 'json'
+    url,
+    contentType: 'application/json',
+    dataType: 'json',
   })
-		.done(data => {
+    .done((data) => {
       if (data.error) {
         alert('danger', `Failed to update display name. Error: ${data.error}`);
         return;
@@ -121,7 +130,10 @@ const renameSubmit = (name, eid) => {
       location.reload();
     })
     .fail((jqXHR, status) => {
-			alert('danger', `Failed to update display name. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+      alert(
+        'danger',
+        `Failed to update display name. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+      );
     });
 };
 
@@ -139,9 +151,9 @@ const renameSortNameSubmit = (name, eid) => {
     type: 'PUT',
     url,
     contentType: 'application/json',
-			dataType: 'json'
+    dataType: 'json',
   })
-		.done(data => {
+    .done((data) => {
       if (data.error) {
         alert('danger', `Failed to update sort title. Error: ${data.error}`);
         return;
@@ -149,7 +161,10 @@ const renameSortNameSubmit = (name, eid) => {
       location.reload();
     })
     .fail((jqXHR, status) => {
-			alert('danger', `Failed to update sort title. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+      alert(
+        'danger',
+        `Failed to update sort title. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+      );
     });
 };
 
@@ -176,7 +191,7 @@ const edit = (eid) => {
   const displayNameField = $('#display-name-field');
   displayNameField.attr('value', displayName);
   displayNameField.attr('placeholder', fileTitle);
-	displayNameField.keyup(event => {
+  displayNameField.keyup((event) => {
     if (event.keyCode === 13) {
       renameSubmit(displayNameField.val() || fileTitle, eid);
     }
@@ -188,7 +203,7 @@ const edit = (eid) => {
   const sortTitleField = $('#sort-title-field');
   sortTitleField.val(sortTitle);
   sortTitleField.attr('placeholder', fileTitle);
-	sortTitleField.keyup(event => {
+  sortTitleField.keyup((event) => {
     if (event.keyCode === 13) {
       renameSortNameSubmit(sortTitleField.val(), eid);
     }
@@ -217,14 +232,13 @@ const setupUpload = (eid) => {
   const bar = $('#upload-progress').get(0);
   const titleId = upload.attr('data-title-id');
   const queryObj = {
-		tid: titleId
+    tid: titleId,
   };
-	if (eid)
-		queryObj['eid'] = eid;
+  if (eid) queryObj['eid'] = eid;
   const query = $.param(queryObj);
   const url = `${base_url}api/admin/upload/cover?${query}`;
   UIkit.upload('.upload-field', {
-		url: url,
+    url,
     name: 'file',
     error: (e) => {
       alert('danger', `Failed to upload cover image: ${e.toString()}`);
@@ -245,7 +259,7 @@ const setupUpload = (eid) => {
     completeAll: () => {
       $(bar).attr('hidden', '');
       location.reload();
-		}
+    },
   });
 };
 
@@ -287,22 +301,28 @@ const bulkProgress = (action, el) => {
   const url = `${base_url}api/bulk_progress/${action}/${tid}`;
   $.ajax({
     type: 'PUT',
-			url: url,
-			contentType: "application/json",
+    url,
+    contentType: 'application/json',
     dataType: 'json',
     data: JSON.stringify({
-				ids: ids
+      ids,
+    }),
   })
-		})
-		.done(data => {
+    .done((data) => {
       if (data.error) {
-				alert('danger', `Failed to mark entries as ${action}. Error: ${data.error}`);
+        alert(
+          'danger',
+          `Failed to mark entries as ${action}. Error: ${data.error}`,
+        );
         return;
       }
       location.reload();
     })
     .fail((jqXHR, status) => {
-			alert('danger', `Failed to mark entries as ${action}. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+      alert(
+        'danger',
+        `Failed to mark entries as ${action}. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+      );
     })
     .always(() => {
       deselectAll();
@@ -325,29 +345,32 @@ const tagsComponent = () => {
         disabled: !this.isAdmin,
         templateSelection(state) {
           const a = document.createElement('a');
-					a.setAttribute('href', `${base_url}tags/${encodeURIComponent(state.text)}`);
+          a.setAttribute(
+            'href',
+            `${base_url}tags/${encodeURIComponent(state.text)}`,
+          );
           a.setAttribute('class', 'uk-link-reset');
-					a.onclick = event => {
+          a.onclick = (event) => {
             event.stopPropagation();
           };
           a.innerText = state.text;
           return a;
-				}
+        },
       });
 
       this.request(`${base_url}api/tags`, 'GET', (data) => {
         const allTags = data.tags;
         const url = `${base_url}api/tags/${this.tid}`;
-				this.request(url, 'GET', data => {
+        this.request(url, 'GET', (data) => {
           this.tags = data.tags;
-					allTags.forEach(t => {
+          allTags.forEach((t) => {
             const op = new Option(t, t, false, this.tags.indexOf(t) >= 0);
             $('.tag-select').append(op);
           });
-					$('.tag-select').on('select2:select', e => {
+          $('.tag-select').on('select2:select', (e) => {
             this.onAdd(e);
           });
-					$('.tag-select').on('select2:unselect', e => {
+          $('.tag-select').on('select2:unselect', (e) => {
             this.onDelete(e);
           });
           $('.tag-select').on('change', () => {
@@ -359,25 +382,31 @@ const tagsComponent = () => {
       });
     },
     onChange() {
-			this.tags = $('.tag-select').select2('data').map(o => o.text);
+      this.tags = $('.tag-select')
+        .select2('data')
+        .map((o) => o.text);
     },
     onAdd(event) {
       const tag = event.params.data.text;
-			const url = `${base_url}api/admin/tags/${this.tid}/${encodeURIComponent(tag)}`;
+      const url = `${base_url}api/admin/tags/${this.tid}/${encodeURIComponent(
+        tag,
+      )}`;
       this.request(url, 'PUT');
     },
     onDelete(event) {
       const tag = event.params.data.text;
-			const url = `${base_url}api/admin/tags/${this.tid}/${encodeURIComponent(tag)}`;
+      const url = `${base_url}api/admin/tags/${this.tid}/${encodeURIComponent(
+        tag,
+      )}`;
       this.request(url, 'DELETE');
     },
     request(url, method, cb) {
       $.ajax({
-					url: url,
-					method: method,
-					dataType: 'json'
+        url,
+        method,
+        dataType: 'json',
       })
-				.done(data => {
+        .done((data) => {
           if (data.success) {
             if (cb) cb(data);
           } else {
@@ -387,6 +416,6 @@ const tagsComponent = () => {
         .fail((jqXHR, status) => {
           alert('danger', `Error: [${jqXHR.status}] ${jqXHR.statusText}`);
         });
-		}
+    },
   };
 };

public/js/user-edit.js

@@ -1,5 +1,5 @@
 $(() => {
-	var target = base_url + 'admin/user/edit';
+  let target = base_url + 'admin/user/edit';
   if (username) target += username;
   $('form').attr('action', target);
   if (error) alert('danger', error);

public/js/user.js

@@ -2,15 +2,16 @@ const remove = (username) => {
   $.ajax({
     url: `${base_url}api/admin/user/delete/${username}`,
     type: 'DELETE',
-			dataType: 'json'
+    dataType: 'json',
   })
-		.done(data => {
-			if (data.success)
-				location.reload();
-			else
-				alert('danger', data.error);
+    .done((data) => {
+      if (data.success) location.reload();
+      else alert('danger', data.error);
     })
     .fail((jqXHR, status) => {
-			alert('danger', `Failed to delete the user. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+      alert(
+        'danger',
+        `Failed to delete the user. Error: [${jqXHR.status}] ${jqXHR.statusText}`,
+      );
     });
 };

shard.yml

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

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,31 +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/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 = ""
-  property host = "0.0.0.0"
-  property port : Int32 = 9000
-  property base_url = "/"
-  property session_secret = "mango-session-secret"
-  property library_path = "~/mango/library"
-  property library_cache_path = "~/mango/library.yml.gz"
-  property db_path = "~/mango/mango.db"
-  property queue_db_path = "~/mango/queue.db"
-  property scan_interval_minutes : Int32 = 5
-  property thumbnail_generation_interval_hours : Int32 = 24
-  property log_level = "info"
-  property upload_path = "~/mango/uploads"
-  property plugin_path = "~/mango/plugins"
-  property download_timeout_seconds : Int32 = 30
-  property cache_enabled = true
-  property cache_size_mbs = 50
-  property cache_log_enabled = true
-  property disable_login = false
-  property default_username = ""
-  property auth_proxy_header_name = ""
-  property plugin_update_interval_hours : Int32 = 24
+  property path : String = ""
+
+  # 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?
 
@@ -38,7 +58,7 @@ 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

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

@@ -76,7 +76,7 @@ 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 +
+    sig = Digest::SHA1.hexdigest(book_id + entries_sig + user_context +
                                  (opt ? opt.to_tuple.to_s : "nil"))
     "#{sig}:sorted_entries"
   end
@@ -101,7 +101,7 @@ class SortedTitlesCacheEntry < CacheEntry(Array(String), Array(Title))
   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 +
+    sig = Digest::SHA1.hexdigest(titles_sig + user_context +
                                  (opt ? opt.to_tuple.to_s : "nil"))
     "#{sig}:sorted_titles"
   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,66 +1,55 @@
 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?
 
-  @[YAML::Field(ignore: true)]
-  @sort_title : 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,
-      })
-    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
+  def initialize(
+    @id, @title, @book, @path,
+    @size, @pages, @mtime,
+    @encoded_path, @encoded_title, @err_msg
+  )
   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
+  def self.new(ctx : YAML::ParseContext, node : YAML::Nodes::Node)
+    unless node.is_a? YAML::Nodes::Mapping
+      raise "Unexpected node type in YAML"
     end
-
-    file = ArchiveFile.new @zip_path
-    @pages = file.entries.count do |e|
-      SUPPORTED_IMG_TYPES.includes? \
-        MIME.from_filename? e.filename
+    # 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
-    file.close
   end
 
   def build_json(*, slim = false)
     JSON.build do |json|
       json.object do
-        {% for str in %w(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
@@ -74,6 +63,9 @@ 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
@@ -131,58 +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
-    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 next_entry(username)
     entries = @book.sorted_entries username
     idx = entries.index self
@@ -197,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)
@@ -290,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
@@ -299,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/title.cr

@@ -49,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
+        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
@@ -127,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
@@ -140,9 +145,22 @@ 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
+        unless title.entries.size == 0 && title.titles.size == 0
           Library.default.title_hash[title.id] = title
           @title_ids << title.id
           is_titles_added = true
@@ -157,12 +175,13 @@ class Title
           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
@@ -613,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
@@ -627,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|

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

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.25.0"
+MANGO_VERSION = "0.27.0"
 
 # From http://www.network-science.de/ascii/
 BANNER = %{

src/plugin/plugin.cr

@@ -105,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|
@@ -160,8 +161,8 @@ class Plugin
     list.save
   end
 
-  def initialize(id : String)
-    Plugin.build_info_ary
+  def initialize(id : String, dir : String? = nil)
+    Plugin.build_info_ary dir
 
     @info = @@info_ary.find &.id.== id
     if @info.nil?
@@ -223,6 +224,10 @@ class Plugin
     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 " \
@@ -315,7 +320,7 @@ class Plugin
     json
   end
 
-  private def eval(str)
+  def eval(str)
     @rt.eval str
   rescue e : Duktape::SyntaxError
     raise SyntaxError.new e.message
@@ -327,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
 
@@ -435,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.call_success
     end
     sbx.put_prop_string -2, "text"
@@ -448,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

src/routes/api.cr

@@ -40,7 +40,7 @@ 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", {
@@ -142,8 +142,13 @@ 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
@@ -866,6 +871,7 @@ struct APIRouter
         "version"      => Int32,
         "settings"     => {} of String => String,
       },
+      "subscribable" => Bool,
     }
     get "/api/admin/plugin/info" do |env|
       begin
@@ -873,6 +879,7 @@ struct APIRouter
         send_json env, {
           "success"      => true,
           "info"         => plugin.info,
+          "subscribable" => plugin.can_subscribe?,
         }.to_json
       rescue e
         Logger.error e
@@ -1138,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,
@@ -1172,7 +1188,7 @@ 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

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

@@ -23,6 +23,7 @@ class Server
     AdminRouter.new
     ReaderRouter.new
     APIRouter.new
+    OPDSRouter.new
 
     {% for path in %w(/api/* /uploads/* /img/*) %}
       options {{path}} do |env|

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)
+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,9 +96,9 @@ 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
 
@@ -168,7 +184,7 @@ 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."
+               "Please restart Mango. This is NOT a bug."
   Logger.fatal "Exiting"
   exit 1
 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

@@ -133,8 +133,10 @@
           </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>

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,18 +40,18 @@
           <%- 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;
                                                                                                                                                                  `" />
 
@@ -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">