mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-02 02:45:29 -04:00
Merge branch 'dev' of https://github.com/hkalexling/Mango into dev
This commit is contained in:
Alex Ling
commit
6549253ed1
@ -6,11 +6,13 @@ const readerComponent = () => {
|
||||
alertClass: 'uk-alert-primary',
|
||||
items: [],
|
||||
curItem: {},
|
||||
enableFlipAnimation: true,
|
||||
flipAnimation: null,
|
||||
longPages: false,
|
||||
lastSavedPage: page,
|
||||
selectedIndex: 0, // 0: not selected; 1: the first page
|
||||
margin: 30,
|
||||
preloadLookahead: 3,
|
||||
|
||||
/**
|
||||
* Initialize the component by fetching the page dimensions
|
||||
@ -52,6 +54,16 @@ const readerComponent = () => {
|
||||
if (savedMargin) {
|
||||
this.margin = savedMargin;
|
||||
}
|
||||
|
||||
// Preload Images
|
||||
this.preloadLookahead = +(localStorage.getItem('preloadLookahead') ?? 3);
|
||||
const limit = Math.min(page + this.preloadLookahead, this.items.length + 1);
|
||||
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';
|
||||
})
|
||||
.catch(e => {
|
||||
const errMsg = `Failed to get the page dimensions. ${e}`;
|
||||
@ -60,6 +72,12 @@ const readerComponent = () => {
|
||||
this.msg = errMsg;
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Preload an image, which is expected to be cached
|
||||
*/
|
||||
preloadImage(url) {
|
||||
(new Image()).src = url;
|
||||
},
|
||||
/**
|
||||
* Handles the `change` event for the page selector
|
||||
*/
|
||||
@ -111,12 +129,18 @@ const readerComponent = () => {
|
||||
|
||||
if (newIdx <= 0 || newIdx > this.items.length) return;
|
||||
|
||||
if (newIdx + this.preloadLookahead < this.items.length + 1) {
|
||||
this.preloadImage(this.items[newIdx + this.preloadLookahead - 1].url);
|
||||
}
|
||||
|
||||
this.toPage(newIdx);
|
||||
|
||||
if (isNext)
|
||||
this.flipAnimation = 'right';
|
||||
else
|
||||
this.flipAnimation = 'left';
|
||||
if (this.enableFlipAnimation) {
|
||||
if (isNext)
|
||||
this.flipAnimation = 'right';
|
||||
else
|
||||
this.flipAnimation = 'left';
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.flipAnimation = null;
|
||||
@ -287,6 +311,14 @@ const readerComponent = () => {
|
||||
marginChanged() {
|
||||
localStorage.setItem('margin', this.margin);
|
||||
this.toPage(this.selectedIndex);
|
||||
}
|
||||
},
|
||||
|
||||
preloadLookaheadChanged() {
|
||||
localStorage.setItem('preloadLookahead', this.preloadLookahead);
|
||||
},
|
||||
|
||||
enableFlipAnimationChanged() {
|
||||
localStorage.setItem('enableFlipAnimation', this.enableFlipAnimation);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
require "../upload"
|
||||
require "koa"
|
||||
require "digest"
|
||||
|
||||
struct APIRouter
|
||||
@@api_json : String?
|
||||
@ -61,12 +62,14 @@ struct APIRouter
|
||||
Koa.path "page", schema: Int32, desc: "The page number to return (starts from 1)"
|
||||
Koa.response 200, schema: Bytes, media_type: "image/*"
|
||||
Koa.response 500, "Page not found or not readable"
|
||||
Koa.response 304, "Page not modified (only available when `If-None-Match` is set)"
|
||||
Koa.tag "reader"
|
||||
get "/api/page/:tid/:eid/:page" do |env|
|
||||
begin
|
||||
tid = env.params.url["tid"]
|
||||
eid = env.params.url["eid"]
|
||||
page = env.params.url["page"].to_i
|
||||
prev_e_tag = env.request.headers["If-None-Match"]?
|
||||
|
||||
title = Library.default.get_title tid
|
||||
raise "Title ID `#{tid}` not found" if title.nil?
|
||||
@ -76,7 +79,15 @@ struct APIRouter
|
||||
raise "Failed to load page #{page} of " \
|
||||
"`#{title.title}/#{entry.title}`" if img.nil?
|
||||
|
||||
send_img env, img
|
||||
e_tag = Digest::SHA1.hexdigest img.data
|
||||
if prev_e_tag == e_tag
|
||||
env.response.status_code = 304
|
||||
""
|
||||
else
|
||||
env.response.headers["ETag"] = e_tag
|
||||
env.response.headers["Cache-Control"] = "public, max-age=86400"
|
||||
send_img env, img
|
||||
end
|
||||
rescue e
|
||||
Logger.error e
|
||||
env.response.status_code = 500
|
||||
@ -88,12 +99,14 @@ struct APIRouter
|
||||
Koa.path "tid", desc: "Title ID"
|
||||
Koa.path "eid", desc: "Entry ID"
|
||||
Koa.response 200, schema: Bytes, media_type: "image/*"
|
||||
Koa.response 304, "Page not modified (only available when `If-None-Match` is set)"
|
||||
Koa.response 500, "Page not found or not readable"
|
||||
Koa.tag "library"
|
||||
get "/api/cover/:tid/:eid" do |env|
|
||||
begin
|
||||
tid = env.params.url["tid"]
|
||||
eid = env.params.url["eid"]
|
||||
prev_e_tag = env.request.headers["If-None-Match"]?
|
||||
|
||||
title = Library.default.get_title tid
|
||||
raise "Title ID `#{tid}` not found" if title.nil?
|
||||
@ -104,7 +117,14 @@ struct APIRouter
|
||||
raise "Failed to get cover of `#{title.title}/#{entry.title}`" \
|
||||
if img.nil?
|
||||
|
||||
send_img env, img
|
||||
e_tag = Digest::SHA1.hexdigest img.data
|
||||
if prev_e_tag == e_tag
|
||||
env.response.status_code = 304
|
||||
""
|
||||
else
|
||||
env.response.headers["ETag"] = e_tag
|
||||
send_img env, img
|
||||
end
|
||||
rescue e
|
||||
Logger.error e
|
||||
env.response.status_code = 500
|
||||
@ -565,21 +585,32 @@ struct APIRouter
|
||||
"height" => Int32,
|
||||
}],
|
||||
}
|
||||
Koa.response 304, "Not modified (only available when `If-None-Match` is set)"
|
||||
get "/api/dimensions/:tid/:eid" do |env|
|
||||
begin
|
||||
tid = env.params.url["tid"]
|
||||
eid = env.params.url["eid"]
|
||||
prev_e_tag = env.request.headers["If-None-Match"]?
|
||||
|
||||
title = Library.default.get_title tid
|
||||
raise "Title ID `#{tid}` not found" if title.nil?
|
||||
entry = title.get_entry eid
|
||||
raise "Entry ID `#{eid}` of `#{title.title}` not found" if entry.nil?
|
||||
|
||||
sizes = entry.page_dimensions
|
||||
send_json env, {
|
||||
"success" => true,
|
||||
"dimensions" => sizes,
|
||||
}.to_json
|
||||
file_hash = Digest::SHA1.hexdigest (entry.zip_path + entry.mtime.to_s)
|
||||
e_tag = "W/#{file_hash}"
|
||||
if e_tag == prev_e_tag
|
||||
env.response.status_code = 304
|
||||
""
|
||||
else
|
||||
sizes = entry.page_dimensions
|
||||
env.response.headers["ETag"] = e_tag
|
||||
env.response.headers["Cache-Control"] = "public, max-age=86400"
|
||||
send_json env, {
|
||||
"success" => true,
|
||||
"dimensions" => sizes,
|
||||
}.to_json
|
||||
end
|
||||
rescue e
|
||||
Logger.error e
|
||||
send_json env, {
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<div
|
||||
:class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
|
||||
<div x-show="!loading && mode === 'continuous'" x-cloak>
|
||||
<template x-for="item in items">
|
||||
<template x-if="!loading && mode === 'continuous'" x-for="item in items">
|
||||
<img
|
||||
uk-img
|
||||
:class="{'uk-align-center': true, 'spine': item.width < 50}"
|
||||
@ -50,6 +50,9 @@
|
||||
width:${mode === 'width' ? '100vw' : 'auto'};
|
||||
height:${mode === 'height' ? '100vh' : 'auto'};
|
||||
margin-bottom:0;
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
object-fit: contain;
|
||||
`" />
|
||||
|
||||
<div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div>
|
||||
@ -98,6 +101,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
|
||||
<label class="uk-form-label" for="enable-flip-animation">Enable Flip Animation</label>
|
||||
<div class="uk-form-controls">
|
||||
<input id="enable-flip-animation" class="uk-checkbox" type="checkbox" x-model="enableFlipAnimation" @change="enableFlipAnimationChanged()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
|
||||
<label class="uk-form-label" for="preload-lookahead" x-text="`Preload Image: ${preloadLookahead} page(s)`"></label>
|
||||
<div class="uk-form-controls">
|
||||
<input id="preload-lookahead" class="uk-range" type="range" min="0" max="5" step="1" x-model.number="preloadLookahead" @change="preloadLookaheadChanged()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="uk-divider-icon">
|
||||
|
||||
<div class="uk-margin">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user