darinm223 / manga-js

A manga reader desktop application in Javascript

manga-js

A desktop manga reader in Javascript using React and Redux.

Features

• Many manga apps only allow you to read a small portion of manga from a given site. With this app you can add any manga available from a supported manga site by pasting in the URL.
• You can download as many chapters as you want for offline reading.
• Because the download state is persisted to disk you can close the app while it is downloading a chapter and it will resume the next time you start it up again.
• The app automatically checks for and adds new chapters on startup.
• You can navigate to the next/previous page by clicking the right/left side of the manga image. You can also jump directly to a certain page or use a slider to scroll quickly through pages.

Running

In order to build and run manga-js, you have to first have npm installed. Then run npm install in the project directory to install the dependencies.

If you want to run manga-js in development mode you can just run npm start.

If you want to build the packaged electron app you should run npm run build to compile the front end Javascript and then run either npm run package-mac npm run package-windows or npm run package-linux to package the app. The packaged app will be in the release-builds folder. Because the app will always try to use the compiled Javascript bundle over the normal code, if you want to go back into development mode you have to remove the build/bundle.js file created from npm run build.

Supported sites

Right now the only supported sites are mangareader.net and mangafreak.net. However, I plan on adding support for more manga sites in the future and it is also fairly easy to contribute bindings to a specific site.

Contributing

Contributions for all parts of the application are welcome! The easiest contribution to make is adding support for a specific manga site. In order to do that, you should create a new file inside utils/sites and have it implement the functions mangaURL, sendRequest, parseMangaData, parsePageLinks, and parsePageImage (look at utils/sites/mangareader.js for an example). Then all you have to do is add a key-value pair to the hostnameAdapterMap object inside utils/url.js where the key is the hostname of the new manga site and the value is require('path to file you created').

The style checker for this project is standard so you should make sure that running standard in the project root doesn't result in any errors or warnings.

Testing

To run the jest tests, run npm test.

manga-js's Issues

Separate chapter cells in MangaViewComponent into separate containers

Right now in MangaViewComponent the separate cells are a sort of pseudo component that takes in the parents props and then calls the props on an event: https://github.com/DarinM223/manga-js/blob/master/client/components/MangaViewComponent.js#L34-L79

The problem with this is that the parent gets bloated with props it doesn't even need: https://github.com/DarinM223/manga-js/blob/master/client/components/MangaViewComponent.js#L173-L182

The cells should be separated into a separate component and container with function properties that are onDoubleClick, onDownload, onCancelDownload, and onDeleteDownload. The container will map these functions to the corresponding actions. The component should also have the manga name and the chapter number as properties which is all that should be needed to render the component cell.

Then the code in MangaViewComponent could be changed from:

    let chapterComponents = []
    for (let chapterNum = 0; chapterNum < specificManga.get('chapters').count(); chapterNum++) {
      chapterComponents.push(chapterComponent(specificManga, chapterNum, this.props))
    }

to:

    let chapterComponents = []
    for (let chapterNum = 0; chapterNum < specificManga.get('chapters').count(); chapterNum++) {
      chapterComponents.push(<ChapterCellContainer name={mangaName} num={chapterNum} />)
    }

Put long running stuff in separate process

Right now the download queue is running inside of the main process. The main process's job is to quickly communicate with the client, but right now its event loop is bogged down with download queue tasks, which might be a reason why the client lags when download tasks are running.

There needs to be a separate process (or cluster of processes) that handles the download queue and the main process will communicate with the separate process/cluster and shuttle result messages to the client.

Implement chapter downloading

Download all the images of the chapter when the download button in the manga view component is clicked. When opening a chapter, check if the chapter has already been downloaded before hitting the network.

Load/save state from storage

Hook up some kind of storage into the app so that it loads the initial state on startup and periodically saves the state so that the app doesn't forget everything once it's closed.

Prevent triggering async actions multiple times

Loading the pages in the chapter is triggered when double clicking the chapter in the manga view. However if a user double clicks the chapter multiple times while the pages are being loaded, the pages would have to be refetched multiple times. Modify loading from a boolean to a enum (string) with three states: NOT_LOADED, LOADING, and LOADED. Then modify loadChapter to ignore the action if the state is LOADING, push the route in if the state is LOADED, and asynchronously load the new chapter if the state is NOT_LOADED.

Note: this should also be what happens when downloading the chapter images for offline reading.

Deleting manga should delete all downloaded images

When deleting the manga the manga directory should be removed.

Implement deleting downloaded chapters

Allow chapters that have been downloaded to be deleted by pressing the trash icon.

Change download progress from text to circular progress

Change the progress component to show a material ui circular progress component instead of text showing the current downloaded / total pages

Validate domain names when adding manga

Validate that the url pasted in to add manga is a valid domain for the supported manga sites.

Move from persisted queue to persisted map

Right now the downloader downloads images one at a time which is really slow! Instead it should attempt to download all of them at once and store a persisted hashmap of currently downloading images, the current count of images downloaded, and the total number of images in the chapter. Each image that finishes downloading would remove its key from the map, increment the count of downloaded images, and write the changes to disk. Each download promise should start with a rate limiter call so that the sites rate limiter doesn't reject the requests.

Poll manga for updates

Figure out how to poll all of the manga for updates and modify the state to add the updated chapters.

Improve manga view component

Right now the manga view component only lists the chapters, but it should be improved to support:

• Showing the manga image
• Showing the description
• Showing a remove manga button to remove the manga
• Marking the chapter the user is currently on