ッツ Ebook Reader

An online e-book reader that supports dictionary extensions like Yomichan, which is hosted on https://reader.ttsu.app

Features

Usage

The first time you enter the page (or have no files loaded yet) you will need to select the books you want to read from your device. You can load files by clicking/tapping on the dropzone or respective Icons. Alternatively, you can also drag & drop files or folders on the manager if your device supports it.

Note: The character count is mainly based on paragraph nodes in the book. Configuring e. g. a very high line height or similar may update the counter more slowly

You can find most of the reader controls in the reader header which you can open by clicking/tapping in the upper area of the page:

Control	Description
	Opens the table of content if available
	Allows you to create a bookmark at your current location (keybind `b`)
	Displays current auto scroll speed (keybind `a`/`d`)
	Allows you to execute a custom reader point action
	Allows you to enter fullscreen mode (keybind `F11`)
	Navigates you to the settings
	Navigates you to the book manager or opens the action menu
	Displayed at the current bookmark location

You may find the following controls in the reader footer:

Control	Description
	Indicates that there is data which will be exported if a sync target and auto export is configured. Click/Tap to execute a manual export
	Indicates that multiple auto export attempts failed. Click/Tap to execute a manual export
	Displays your reading progress. Click/Tap on it to hide

Note: The setting "Close Confirmation" will handle reloading and closing tabs but not other ways of navigation like e. g. clicking/tapping the back button / closing pages via mobile browser menu etc. There are known limitations on mobile iOS and therefore this functionality may not work as expected on this platform

Custom reading points and the respective change in the character count in pagination mode are temporary - changing the current page or resizing the reader window will reset them. When having "Selection to Bookmark" enabled and using a custom reading point at the same time, selected text will be prioritized over a custom reading point for positioning bookmarks etc.

Note: Overlapping elements or controls coming from e. g. browser extensions or app wrappers may impact what node will be selected for a custom reading point. Move them out of the reader area or disable them in case of issues. In case the selected node breaks across multiple columns or pages the bookmark may be placed on previous elements instead. You can experiment with the "Avoid Page Break" option, simply fallback to the default bookmark by clearing your selection/custom reading point or selecting a different node.

Note for custom user fonts: After storing/using a custom font the first time or on hard refreshing the reader tab you may encounter longer load times / not loading font. A normal tab refresh should solve this in order to make the service worker serving the respective file

Note for "Disabled Wheel Navigation": If enabled mouse wheel clicks are intercepted and may not work as expected. E. g. for Yomichan you need to keep the wheel pressed while moving the cursor to trigger a popup etc.

Note for "New Only" Import/Export Behavior:: The time used for comparison is based on the device time setting. In case you have different settings across used devices you may encounter unexpected results for sync (e. g. data not uploaded, data not downloaded etc.)

Desktop Keybinds

Note: The keys are currently bound to their physical location.

Explanation from MDN:

For example, the code returned is "KeyQ" for the Q key on a QWERTY layout keyboard, but the same code value also represents the ' key on Dvorak keyboards and the A key on AZERTY keyboards.

Key Code	Description
`Space`	Toggle auto-scroll (continuous mode)
`a`	Increase auto-scroll speed
`d`	Decrease auto-scroll speed
`b`	Create bookmark at your current location
`r`	Return to bookmark location
`t`	Select a new custom reading point
`PageDown`	Move to next page
`PageUp`	Move to previous page
`n`	Move to next/previous chapter
`m`	Move to next/previous chapter

Book Manager

You can open the book manager by clicking/tapping on the respective icon in the reader. You will be presented with a list of covers for all the imported books with their respective titles and progress (determined by bookmark location). Book placeholder created by loading data from external sources are visible in the browser db manager if configured and displayed as slighty grayed out covers.

Books are sorted based on your selected sort option with ascending title sort for items with equal values

You may:

Switch the current manager source between browser db, filesystem or an external hoster
Switch books by clicking/tapping on the book covers
Delete books by clicking/tapping on the delete icon (Warning: Bookmark progress will also get removed along with the book)
View available detail data by clicking/tapping on the info icon of a selected book
Click/tap on the centered list icon to select all books
Click/tap on the X icon to deselect all books

You may find the following controls in the manager:

Control	Description
	Toggles book selection
	Selects all books
	Allows you to import new books to the library
	Allows you to import new books from a folder to the library (desktop only)
	Allows you to import a previous exported zip file
	Indicates that data from the browser db is displayed
	Indicates that data from the configured default GDrive source is displayed
	Indicates that data from the configured default OneDrive source is displayed
	Indicates that data from the configured default filesystem source is displayed
	Allows you to download data for a bug report
	Navigates you to the settings
	Opens the action menu
	Opens the export menu for the selected books
	Cancels the current book import/deletion

Data Import/Export

You can transfer books and their progress between devices/browsers by importing and exporting data via different storage sources

Note: Imports/Exports are intended to move small volumes of data and not as frequent backup of the whole library or similar

Following export targets are available:

Source	Description
Zip File	Creates an offline archive of the selected data
GDrive	Allows you to upload and download data to your GDrive account. Requires a google login - the default session is valid for 50 minutes and requires a manual reauthentication/export afterwards if no custom credentials with a client secret are used. You can revoke the app permissions any time in your google security settings
OneDrive	Allows you to upload and download data to your OneDrive account. Requires a microsoft login - the default session is valid for 50 minutes and requires a manual reauthentication/export afterwards if no custom credentials with a client secret are used. You can revoke the app permissions any time in your microsoft account privacy settings
Filesystem	Allows you to store and read data from a configured folder on your hard drive. You have to grant permissions once per new opened tab. Only available on desktop chromium browsers - some browser like Brave may need additional flags in the browser settings enabled in order to see/use this option

To export data select books in the manager and click/tap on the respective icon in the header. Besides the export target you can also choose what kind of data you want to export:

Option	Content
Book Data	Book data like text content, images, chapters etc.
Bookmark	Progress data like scroll position, percentage etc.

Note: Imports/Exports are additive and will only store/overwrite data but never delete it. Data like bookmarks for items in the browser db will only be written in case a local book copy exists while external sources allow to store them without the need of exporting the book before.

After confirmation the export will start and the progress with average remaining time will be displayed. During this time you will not be able to excute other operations like opening,deleting or importing books. To reimport an exported zip file click on the import icon when no books are selected. Both - export and import - can be canceled by clicking/tapping on the respective button besides the progress bar. Already processed data will stay as is.

You can read books from external sources without having a local book copy (this will redownload the data every time). This may create empty placeholder data in case there is no local copy present in your browser. Placeholder data is filtered out by default from the browser db manager but can be enabled via settings in case you want to delete it.

Note: When opening a book from an external source it will override your configured sync target temporarily. The import/export of data itself will still follow your configured auto import/export setting.

Storage Sources

ッツ Ebook Reader provides default storage sources for data import/export via GDrive or OneDrive which requires a reauthentication every 50 minutes in order to be functional. Storage Sources under Settings => Data let you add additional custom sources for the filesystem target and/or a custom set of credentials for an external hoster which may can create persistent sessions and therefore asks for reauthentication less often in case you add a client secret.

Note: The timeout for login is currently 45 seconds after which the login popup will close with an error

To create such custom credentials follow these steps for the hoster you want to add.

GDrive

Register a google account if required
Go to the project page and click on "Create Project"
Choose a name and click on "Create"
Open the side menu by clicking on the navigation menu item in the upper left corner
Navigate to "APIs & Services" > "Enabled APIs & services"
Click on "+ ENABLE APIS AND SERVICES"
Search for "Google Drive" and click on the result item
Click on the "ENABLE" button to add it
Navigate to "OAuth consent screen"
Choose "External" and click on "CREATE"
Choose a name, enter your google mail in all email fields, leave logo empty and click on "SAVE AND CONTINUE"
Click on "ADD OR REMOVE SCOPES", check the ".../auth/drive.file" Scope and click on "UPDATE"
The selected scope should be visible under "Your non-sensitive scopes" - click on "SAVE AND CONTINUE"
You can add your google mail as test user if you want to restrict it to your user only - otherwise leave all empty
Click on "SAVE AND CONTINUE"
Click on "BACK TO DASHBOARD"
If you don't want to restrict the credentials to your user click on "PUBLISH APP" and "CONFIRM"
Navigate to "Credentials" and click on "CREATE CREDENTIALS" - select "OAuth client ID"
Select "Web Application" as "Application type" and choose a name
Click on "ADD URI" under "Authorized JavaScript origins" and add "https://reader.ttsu.app"
Repeat Step 20 for "https://ttu-ebook.web.app"
If you develop locally or self host the reader repeat step 20 for "http://localhost:5173" + "http://127.0.0.1:5173" and/or adjust ports etc. depending on your needs
Click on "ADD URI" under "Authorized redirect URIs" and add "https://reader.ttsu.app/auth"
Repeat Step 23 for "https://ttu-ebook.web.app/auth"
If you develop locally or self host the reader repeat step 23 for "http://localhost:5173/auth" + "http://127.0.0.1:5173/auth" and/or adjust ports etc. depending on your needs
Click on "CREATE" and copy Client Id and Client Secret values for the next step
Create a new GDrive source on ッツ Ebook Reader with the client id and/or client secret you just have created

OneDrive

Register an account for microsoft azure if required
Go to the project page and register a new application
Choose a name, select "Personal Microsoft accounts only" as type and click on "Register"
Navigate to the menu item "Authentication"
Click on "Add a Platform" in the "Platform configurations" section
Choose "Single-page application"
Enter "https://reader.ttsu.app/auth" or "https://ttu-ebook.web.app/auth" as value for "Redirect URIs" (depending on which site you use)
Check "Access tokens (used for implicit flows)" and click on "Configure"
If you develop locally or self host the reader click on "Add URI" inside the "Single-page Application" box and add "http://localhost:5173/auth" and/or adjust ports etc. depending on your needs
Navigate to the menu item "Overview"
Copy the "Application (client) ID" for later
Navigate to the menu item "Certificates & secrets"
Click on "New client secret"
Fill out available options as you wish
Click on "Add"
Copy the value for later
Create a new OneDrive source on ッツ Ebook Reader with the client id and/or client secret you just have created

If you add a storage source for an external hoster your data will be encrypted and stored locally. Therefore you have to set a password for it which you will have to (re)enter whenever you want to delete/edit the storage source or ッツ Ebook Reader needs to access it. The password should follow common best practices in terms of complexity and length but there are no rules enforced on it on the site. This password will not be saved and therefore can't be restored - if you forget it you will not be able to interact with this storage source anymore.

You may find following additional controls for storage source settings:

Control	Description
	Toggles the storage source as sync target for the auto import/export option You can only configure one sync target across all storage sources Grayed out if the storage source is not the current sync target Can be temporarily overwritten when opening a book from an external source
	Toggles the storage source as default source for this type and allows to display data on the manager page from it You can only enable one default source per storage type at the same time Grayed out if the storage source is not the current data source default for this type

If you develop locally or self host the reader you need to provide credentials for the the default connections by adding an .env.local in the apps\web folder. Following environment variables can be used:

Environment Variables

VITE_STORAGE_ROOT_NAME - Name of the folder in which data will be stored (default: ttu-reader-data)
VITE_GDRIVE_AUTH_ENDPOINT - Google endpoint to which the user is redirected for the oauth authentication
VITE_GDRIVE_TOKEN_ENDPOINT - Google endpoint to which the token for the oauth code flow is send
VITE_GDRIVE_REFRESH_ENDPOINT - Google endpoint to get a new refresh token
VITE_GDRIVE_REVOKE_ENDPOINT - Google endpoint to revoke a refresh token
VITE_GDRIVE_SCOPE - Scope to request for the google source
VITE_GDRIVE_CLIENT_ID - Client id for the google source
VITE_GDRIVE_CLIENT_SECRET - Client secret for the google source
VITE_ONEDRIVE_AUTH_ENDPOINT - OneDrive endpoint to which the user is redirected for the oauth authentication
VITE_ONEDRIVE_TOKEN_ENDPOINT - OneDrive endpoint to which the token for the oauth code flow is send
VITE_ONEDRIVE_DISCOVERY - OneDrive discovery endpoint (currently not used)
VITE_ONEDRIVE_SCOPE - Scope to request for the OneDrive source
VITE_ONEDRIVE_CLIENT_ID - Client id for the OneDrive source
VITE_ONEDRIVE_CLIENT_SECRET - Client secret for the OneDrive source

Example

VITE_STORAGE_ROOT_NAME="ttu-reader-data"
VITE_GDRIVE_AUTH_ENDPOINT="https://accounts.google.com/o/oauth2/v2/auth"
VITE_GDRIVE_TOKEN_ENDPOINT="https://oauth2.googleapis.com/token"
VITE_GDRIVE_REFRESH_ENDPOINT="https://oauth2.googleapis.com/token"
VITE_GDRIVE_REVOKE_ENDPOINT="https://oauth2.googleapis.com/revoke"
VITE_GDRIVE_SCOPE="https://www.googleapis.com/auth/drive.file"
VITE_GDRIVE_CLIENT_ID="1234567890"
VITE_GDRIVE_CLIENT_SECRET="0987654321"
VITE_ONEDRIVE_AUTH_ENDPOINT="https://login.microsoftonline.com/consumers/oauth2/v2.0/authorize"
VITE_ONEDRIVE_TOKEN_ENDPOINT="https://login.microsoftonline.com/consumers/oauth2/v2.0/token"
VITE_ONEDRIVE_DISCOVERY="https://login.microsoftonline.com/consumers/v2.0/.well-known/openid-configuration"
VITE_ONEDRIVE_SCOPE="files.readwrite"
VITE_ONEDRIVE_CLIENT_ID="abcdefg"
VITE_ONEDRIVE_CLIENT_SECRET1="gfedcba"

General Note: Depending on your settings data from storage sources can be cached locally. In case you read and/or modifiy your library on a different device/tab it is recommended to refresh ッツ Ebook Reader tabs or start a new one after you have switched devices/tabs to ensure having all the latest data. The related "Cache Storage Data" option under settings only covers the list of files - in case you delete and readd files on a different device/ tab you should always refresh the tab in order to prevent issues

Cover Note: When caching for storage data is enabled and/or you are using an external storage source links for book cover may expire. If you notice issues with loading covers refresh the current tab to renew them

GDrive Note: Permissions are scoped to the client id and client secret which means different GDrive storage sources can only see their own data and will create their own "ttu-reader-data" folder. Also data added by you manually on the google website will not be displayed - you should use the functionality provided by ッツ Ebook Reader in order to add/delete books etc.

OneDrive Note: OneDrive only allows to add localhost addresses - in case you host or develop on 127.0.0.1 you should either switch to localhost or need to manually type in the localhost address in the address bar in order to use OneDrive. The maximum file size of a book for this storage source is currently 60 MB. In case you encounter an ETag Error simply retry your export attempt - typically it should work the 2nd time

Storage Limits

Data like books or bookmarks will be (depending on the storage source and data type) stored locally in your browser storage. Browsers typically apply certain limits on how much a website can store on your computer. Those limits are different across different browsers and options you may have enabled.

When the available disk space is filled up, the quota manager will start clearing out data based on an LRU policy — the least recently used origin will be deleted first, then the next one, until the browser is no longer over the limit.

Therefore your data can be lost based on the amount you stored and how much storage is available. In order to overcome this limitation ッツ Ebook Reader will try to request for persistant storage during data insertion to the browser db. Based on your browser you will see different behavior. E. g. firefox will ask you for your confirmation while chrome will not display any dialog but automatically grant the permissions if you frequently interacted with / bookmarked the page and / or have granted notification permissions to the site. You can see the current status of persistant storage in the reader data settings.

Note: Other browsers may have additional criteria for data eviction which are not affected by this setting. E. g. iOS > 13.3 may delete all your page data if you haven't interacted with the reader for 7 days etc.

Data stored on other storage sources than the browser db are not impacted by those limits but need to be kept up to date by exports. Exceptions are the configurations of storage sources which may need to be added back in case your storage got cleared.

For more Information and Details check out this Documentation

Self Host

If for some reason you want to host the reader by yourself, you can use the following approach.

Using Docker

Install and launch Docker
Run the commands below

docker build -t ebook-reader -f apps/web/Dockerfile .
docker run --name ebook-reader -d -p 8080:80 ebook-reader

Visit http://localhost:8080 to use the app

Using Docker Compose

Install and launch Docker Compose
Run the command below

docker-compose up

Visit http://localhost:8080 to use the app

Using HTTP Hosting App

Have Node.js and pnpm installed
Run the commands below

cd apps/web
pnpm install --frozen-lockfile
pnpm build

Have your server (such as http-server) point towards apps/web/build

External Hoster

In case you want to use external hoster like GDrive for data import/export follow the steps described in Storage Sources

nicocanada / ebook-reader Goto Github PK

ebook-reader's Introduction

ッツ Ebook Reader

Features

Usage

Desktop Keybinds

Book Manager

Data Import/Export

Storage Sources

Storage Limits

Self Host

Using Docker

Using Docker Compose

Using HTTP Hosting App

External Hoster

ebook-reader's People

Contributors

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent