- implement reader

This commit is contained in:
Alex Ling 2020-02-12 20:17:45 +00:00
parent 0b2ec2d002
commit f126dfb430
4 changed files with 83 additions and 1 deletions

View File

@ -26,7 +26,12 @@ class Entry
@zip_path = path
@title = File.basename path, ".zip"
@size = (File.size path).humanize_bytes
@pages = Zip::File.new(path).entries.size
@pages = Zip::File.new(path).entries
.select { |e|
["image/jpeg", "image/png"].includes? \
MIME.from_filename? e.filename
}
.size
@cover_url = "/api/page/#{@book_title}/#{title}/0"
end
def read_page(page_num)

View File

@ -32,6 +32,42 @@ get "/book/:title" do |env|
layout "title"
end
get "/reader/:title/:entry" do |env|
# We should save the reading progress, and ask the user if she wants to
# start over or resume. For now we just start from page 0
begin
title = library.get_title env.params.url["title"]
raise "" if title.nil?
entry = title.get_entry env.params.url["entry"]
raise "" if entry.nil?
env.redirect "/reader/#{title.title}/#{entry.title}/0"
rescue
env.response.status_code = 404
end
end
get "/reader/:title/:entry/:page" do |env|
imgs_each_page = 5
# here each :page contains `imgs_each_page` images
begin
title = library.get_title env.params.url["title"]
raise "" if title.nil?
entry = title.get_entry env.params.url["entry"]
raise "" if entry.nil?
page = env.params.url["page"].to_i
raise "" if page * imgs_each_page >= entry.pages
urls = ((page * imgs_each_page)...\
[entry.pages, (page + 1) * imgs_each_page].min) \
.map { |idx| "/api/page/#{title.title}/#{entry.title}/#{idx}" }
next_url = "/reader/#{title.title}/#{entry.title}/#{page + 1}"
next_url = nil if (page + 1) * imgs_each_page >= entry.pages
render "src/views/reader.ecr"
rescue
env.response.status_code = 404
end
end
get "/login" do |env|
render "src/views/login.ecr"
end

39
src/views/reader.ecr Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html style="background-color:black;">
<head>
<meta charset="utf-8">
<meta name="X-UA-Compatible" content="IE=edge">
<title>Mango</title>
<meta name="description" content="Mango Manga Server">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
<link rel="stylesheet" href="/css/mango.css" />
</head>
<body>
<div class="uk-section uk-section-default uk-section-small" style="background-color:black;">
<div class="uk-container uk-container-small">
<%- urls.each do |url| -%>
<img class="uk-align-center" data-src="<%= url %>" data-width data-height uk-img>
<%- end -%>
<%- if next_url -%>
<a class="next-url" href="<%= next_url %>"></a>
<%- end -%>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script>
$(function() {
$('.uk-container').infiniteScroll({
path: '.next-url',
append: '.uk-container',
history: 'replace'
});
});
</script>
</body>
</html>

View File

@ -2,6 +2,7 @@
<div class="uk-child-width-1-4@m" uk-grid>
<%- title.entries.each do |e| -%>
<div>
<a class="acard" href="/reader/<%= title.title %>/<%= e.title %>">
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="<%= e.cover_url %>" alt="">
@ -11,6 +12,7 @@
<h3 class="uk-card-title"><%= e.title %></h3>
</div>
</div>
</a>
</div>
<%- end -%>
</div>