Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2026-03-20 00:00:48 -04:00
Code Issues Projects Releases Wiki Activity

Rewrite web reader

Browse Source
This commit is contained in:
Alex Ling
2020-09-05 09:32:14 +00:00
parent 88394d4636
commit a45e6ea3da
7 changed files with 782 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/library/entry.cr
View File

@@ -101,8 +101,8 @@ class Entry
img
end
def page_aspect_ratios
ratios = [] of Float64
def page_dimensions
sizes = [] of Hash(String, Int32)
ArchiveFile.open @zip_path do |file|
file.entries
.select { |e|
@@ -116,14 +116,17 @@ class Entry
begin
data = file.read_entry(e).not_nil!
size = ImageSize.get data
ratios << size.height / size.width
sizes << {
"width" => size.width,
"height" => size.height,
}
rescue
Logger.warn "Failed to read page #{i} of entry #{@id}"
ratios << 1_f64
sizes << {"width" => 1000_i32, "height" => 1000_i32}
end
end
end
ratios
sizes
end
def next_entry(username)

8
src/routes/api.cr
View File

@@ -333,7 +333,7 @@ class APIRouter < Router
end
end
get "/api/ratios/:tid/:eid" do |env|
get "/api/dimensions/:tid/:eid" do |env|
begin
tid = env.params.url["tid"]
eid = env.params.url["eid"]
@@ -343,10 +343,10 @@ class APIRouter < Router
entry = title.get_entry eid
raise "Entry ID `#{eid}` of `#{title.title}` not found" if entry.nil?
ratios = entry.page_aspect_ratios
sizes = entry.page_dimensions
send_json env, {
"success" => true,
"ratios" => ratios,
"success" => true,
"dimensions" => sizes,
}.to_json
rescue e
send_json env, {

24
src/routes/reader.cr
View File

@@ -13,10 +13,6 @@ class ReaderRouter < Router
# load progress
page = entry.load_progress username
# we go back 2 * `IMGS_PER_PAGE` pages. the infinite scroll
# library perloads a few pages in advance, and the user
# might not have actually read them
page = [page - 2 * IMGS_PER_PAGE, 1].max
# start from page 1 if the user has finished reading the entry
page = 1 if entry.finished? username
@@ -32,29 +28,17 @@ class ReaderRouter < Router
begin
base_url = Config.current.base_url
username = get_username env
title = (@context.library.get_title env.params.url["title"]).not_nil!
entry = (title.get_entry env.params.url["entry"]).not_nil!
page = env.params.url["page"].to_i
raise "" if page > entry.pages || page <= 0
# save progress
username = get_username env
entry.save_progress username, page
pages = (page...[entry.pages + 1, page + IMGS_PER_PAGE].min)
urls = pages.map { |idx|
"#{base_url}api/page/#{title.id}/#{entry.id}/#{idx}"
}
reader_urls = pages.map { |idx|
"#{base_url}reader/#{title.id}/#{entry.id}/#{idx}"
}
next_page = page + IMGS_PER_PAGE
next_url = next_entry_url = nil
exit_url = "#{base_url}book/#{title.id}"
next_entry_url = nil
next_entry = entry.next_entry username
unless next_page > entry.pages
next_url = "#{base_url}reader/#{title.id}/#{entry.id}/#{next_page}"
end
unless next_entry.nil?
next_entry_url = "#{base_url}reader/#{title.id}/#{next_entry.id}"
end

41
src/views/list.html.ecr Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class="reader-bg">
<%= render_component "head" %>
<body>
<div class="uk-section uk-section-default uk-section-small reader-bg">
<div class="uk-container uk-container-small" id="container">
</div>
</div>
<script>
const base_url = "<%= base_url %>"
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="<%= base_url %>js/uikit.min.js"></script>
<script src="<%= base_url %>js/uikit-icons.min.js"></script>
<script src="<%= base_url %>js/hyperlist.js"></script>
<script>
const container = $('#container').get(0);
const list = new HyperList(container, {
itemHeight: 500,
total: 38,
generate(idx) {
const el = document.createElement('img');
el.setAttribute('class', 'uk-align-center');
el.setAttribute('data-src', `/api/page/364cdcf8c17340ba95a20862dbcbe934/786fb3d0fb0c4675a34efb0019b62c4e/${idx+1}`);
el.setAttribute('data-width', '');
el.setAttribute('data-height', '');
el.setAttribute('uk-img', '');
return {
height: 500,
element: el
};
}
});
</script>
</body>
</html>

59
src/views/reader.html.ecr
View File

@@ -6,22 +6,40 @@
<body>
<div class="uk-section uk-section-default uk-section-small reader-bg">
<div class="uk-container uk-container-small">
<%- urls.each_with_index do |url, i| -%>
<img class="uk-align-center" data-src="<%= url %>" src="<%= base_url %>img/loading.gif" data-width data-height uk-img id="<%= reader_urls[i] %>" onclick="showControl(<%= pages.to_a[i] %>);">
<%- end -%>
<%- if next_url -%>
<a class="next-url" href="<%= next_url %>"></a>
<%- end -%>
<div id="alert"></div>
<div id="root" x-data="{
loading: true,
msg: 'Loading the web reader. Please wait...',
alertClass: 'uk-alert-primary',
items: []
}">
<div x-show="loading">
<div :class="alertClass" x-show="msg" uk-alert>
<p x-text="msg"></p>
</div>
</div>
<div x-show="!loading" x-cloak>
<template x-for="item in items">
<img
uk-img
class="uk-align-center"
:data-src="item.url"
:width="item.width"
:height="item.height"
:id="item.id"
@click="showControl($event)"
/>
</template>
<%- if next_entry_url -%>
<button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= next_entry_url %>')">Next Entry</button>
<%- else -%>
<button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= exit_url %>')">Exit Reader</button>
<%- end -%>
</div>
</div>
</div>
<%- if next_entry_url -%>
<button id="next-btn" class="uk-align-center uk-button uk-button-primary" hidden onclick="redirect('<%= next_entry_url %>')">Next Entry</button>
<%- else -%>
<button id="next-btn" class="uk-align-center uk-button uk-button-primary" hidden onclick="redirect('<%= exit_url %>')">Exit Reader</button>
<%- end -%>
</div>
<div id="hidden" hidden></div>
<div id="modal-sections" class="uk-flex-top" uk-modal>
<div class="uk-modal-dialog uk-margin-auto-vertical">
<button class="uk-modal-close-default" type="button" uk-close></button>
@@ -49,14 +67,23 @@
</div>
</div>
</div>
<script>
const base_url = "<%= base_url %>"
const base_url = "<%= base_url %>";
const page = <%= page %>;
const tid = "<%= title.id %>";
const eid = "<%= entry.id %>";
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="<%= base_url %>js/alert.js"></script>
<script src="<%= base_url %>js/uikit.min.js"></script>
<script src="<%= base_url %>js/uikit-icons.min.js"></script>
<script src="<%= base_url %>js/reader.js"></script>
</body>
<style>
img[data-src][src*='data:image'] { background: white; }
#root img { width: 100%; }
</style>
</html>