Giter Club home page Giter Club logo

kthoom's Introduction

Node.js CI CodeQL

kthoom

kthoom logo

kthoom is a comic book / ebook reader that runs in the browser using modern web technologies such as JavaScript, HTML5, the File System Access API, ES Modules, Web Workers, Typed Arrays, and more. It can open files and directories from your local file system, the network, or Google Drive. It can be embedded in larger web apps.

It is built using pure JavaScript with no external dependencies and no JS frameworks. It can run out of the box without any build / compile / transpile / pack step, straight from the browser. Try it here:

OPEN KTHOOM COMIC BOOK READER.

You can also specify a comic book to load via the ?bookUri parameter. Some examples:

Or a comic book reading list via the ?readingListUri parameter.

Documentation

File Support

  • .cbz (zip)
  • .cbr (rar)
  • .cbt (tar)
  • .epub (Alpha-level support, a work-in-progress, see issue list)

Keyboard Shortcuts

  • O / D / U: Open books by choosing files/directories from computer or by URL.
  • Right/Left: Next/Previous page of book.
  • Shift + Right/Left: Last/First page of book.
  • [ / ]: Prev / Next book
  • H/W: Scale to height/width
  • B: Best Fit mode
  • R/L: Rotate right/left
  • 1/2: Show 1 or 2 pages side-by-side in the viewer.
  • 3: Long Strip viewer.
  • F: Toggle fullscreen.
  • P: Hide metadata viewer and reading stack panel buttons.
  • S: Toggle the Reading Stack tray open.
  • T: Toggle the Metadata Tag Viewer tray open.
  • ?: Bring up Help screen

You can tell kthoom to open as many books as you like in the Choose Files dialog (shift-select all the books you want to open). Then navigate between books using the square bracket keys or use the Reading Stack tray.

Binary File Support

NOTE: kthoom loads in local compressed files and decompresses them in the browser, which means that kthoom has an implementation of unzip, unrar and untar in JavaScript. This code lives in its own library: BitJS, a more general purpose library to deal with binary file data in native JavaScript. Kthoom keeps an up-to-date version of bitjs in its repository.

JSON Reading Lists

kthoom supports loading lists of comic book files at once. Think audio playlists but for comic books! See JSON Reading Lists for more.

URL parameters

  • alwaysOptimizedForStreaming=true: Tells kthoom to render pages immediately as they are de-compressed (this might not work for all comic books as some are not compressed in the order of reading)
  • bookUri=<url>: Tells kthoom to open the given book (cbz/cbr file).
  • doNotPromptOnClose=true: Tells kthoom not to ask the user if they are sure they want to close.
  • preventUserOpeningBooks=true: Prevents users from opening files in kthoom (useful for hosting kthoom from a web app).
  • readingListUri=<url>: Tells kthoom to load the given JSON Reading List (jrl) file and open the first file in that list.

kthoom's People

Contributors

antimatter15 avatar barais avatar codedread avatar dependabot[bot] avatar jphastings avatar programcomputer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

kthoom's Issues

How to enable google drive?

I realize this is probably not the best place to post a beginners question, but I couldn’t find a better way to contact the developers of this great script - my apologies!

I'm trying to integrate Kthoom in my comic book related website. Works fine, only in the menu is the ‘open from Google drive’ field missing. Pressing 'G' also doesn't do anything.

Obviously I’m missing something - I guess I need some api thing from Google - but I can not find more information on the net.

So if someone would be so friendly to point me in the right direction? I have to confess that my knowledge of coding is almost zero (but I’m an expert in copy/paste)

Thanks a lot,
Alex

Support Loading Reading Lists

kthoom should let a user load a reading list (some file in an agreed-upon format) that is a list of comic books to load, in-order, into the Reading Stack.

Mobile support

This actually seems to work well already on my iPhone. Just need a slightly better UI for it.

I may attempt this myself as I haven’t done much web front end dev

Show Progress when fetching from IPFS

There is no visible progress when fetching a book from IPFS. Need to determine if the js-ipfs library gives us any indication of the download progress.

Write metadata back to the archive

After issue #18 and issue #42 are implemented, we can then do two major things:

  • Use the ComicVine API to find metadata for the comic book and update the archive.
  • Support re-archiving the comic book to the file system directly (requires zipping)

Handle archives that have bad images

If a comic book archive file has a corrupt image (JPG/PNG), kthoom should still be able to load in the whole book and then render the bad page to let the user know.

Cannot load second EPUB

  1. Load an EPUB, displays fine.
  2. Try to load a second EPUB. It loads but nothing displays (JS errors)

You have to refresh the web page and load again

Drop IE support

Things we can remove:

  • The need for traceur
  • Use ES2015 method definitions on objects

bitjs is outdated in the repo

Hi,

bitjs is not synchronized with the bitjs repo

It currently creates a small bug when deploying the app.

Regards

Progressive page loading

I noticed the decompression supports forward only streams (I think)

Could the loading of images also be progressive in that i can view the first page ASAP instead of waiting for everything to be loaded?

Prevent book skips when rapidly going to next page

To reproduce:

  • Go to the last page of a book
  • Press the right arrow quickly several times

Because it takes some time for the next book to load, the book only has 1 page when the next arrow keypress is detected, bringing to the user to the next book.

Basically when the user presses 'next page' within a small enough time increment, and the book is still loading, ignore the 'next page' request.

Progressively fetch part of the file

For large comics or ebooks, the entire file may not be needed to be downloaded at once. For example, as the user opens the book, they may only need the first few pages. Kthoom could fetch enough data for the first five pages and then pause the fetching until the user gets closer to the "edge" of what has been fetched to fetch more.

This would save on bandwidth from client and server perspective.

Show some loading indicator while streaming books

When retrieving from Google Drive, sometimes it can take a longer than expected time for the first bits to come over the wire. While we are waiting for this to stream, we should show some indication that things are happening in the progress bar.

Further componentize menu

Markup for the kthoom menus take up about 125 lines of HTML, about 35% of the total payload. Since the menus are not visible upon first load, we can reduce initial HTML payload and further componentize the menu and make it more reusable in other contexts.

Add a toolbar for things in the menu

  • A View sub-panel that has icons for 1-page/2-page, rotate, fit-mode.
  • An Open sub-panel that has icons for Files, URL, etc?

Toolbar visibility should be toggle-able, but default to on.
Remember user's toolbar visibility in saveSettings_()

Allow Re-ordering of Books in the Reading Stack

Users should be able to change the order of Books in the Reading Stack. Most convenient for mouse users is being able to drag-drop books.

Think carefully about designing this feature so that when accessibility is added (see Issue #15)

Handle "Remove" for current book in Reading Stack

Today it does nothing. We should instead:

  • automatically load the next book in the reading list (if there is one)
  • otherwise load the previous book (if there is one)
  • otherwise properly handle returning to the zero state (no book loaded)

Populate the book in the URI when using a reading lists

Let's say a user is at kthoom/?readingListUri=foo.jrl

They go to the next book. That should update the URL to be kthoom/?readingListUri=foo.jrl&bookUri=baz.cbz so that if the browser tab reloads, baz.cbz should be loaded by default.

cbz support broken in some cases

I tried using kthoom on a few cbz files, and loading worked inconsistently. For some files, the console displays a message about 0 pages loaded, and the gui seems stuck in a weird state. Other files seem to work fine. Any pointers what I should do to try to fix this?

Tool for stream-optimizing comic books

It would be good to have a tool that can be run that "fixes" comic books archives that ensures the files in the archive are stored in reading order and includes metadata to indicate whether it is optimized for streaming

Read books panel by panel

Not really an issue, but it would be nice - especially on mobile devices - that comic books can be read panel by panel. Something similar as what the Comic Trim app does or the French comic book site Izneo (On the bottom of the page, click on the second icon from the right to trigger picture by picture mode)

I figured out there is already some code on github, I just have no idea how to integrate it into Kthoom by myself (I'm still no coder... )

And thanks for all the great work, the 'optimized for streaming' code you wrote a while ago is simply amazing on my site.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.