unzip the jre

* Load next chapter when scrolling to the bottom (Webtoon, Continues Vertical)

* Load next chapter when scrolling to the bottom (Paged reader)

* Added missing types to IReaderProps

* Move load next chapter when at last page to VerticalReader

* Dependency fix

* Use react history for loading next page

.github/scripts/commit-preview.sh

@@ -10,8 +10,9 @@ cp -f $new_jar_build Tachidesk-latest.jar
 
 rm -rf latest_pointer/*
 cp $new_jar_build latest_pointer
+cp ../master/server/build/Tachidesk-*.zip latest_pointer
 
-latest=$(ls *.jar | tail -n1 | cut -d"-" -f3 | cut -d"." -f1)
+latest=$(ls *.jar | tail -n1 | sed -e's/Tachidesk-\|.jar//g')
 echo "{ \"latest\": \"$latest\" }" > index.json
 
 git config --global user.email "github-actions[bot]@users.noreply.github.com"

.github/workflows/build_push.yml

@@ -59,16 +59,21 @@ jobs:
             **/react/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/react/yarn.lock') }}
 
-      - name: Build and copy webUI, Build Jar and launch4j
+      - name: Build and copy webUI, Build Jar
         uses: eskatos/gradle-command-action@v1
         with:
           build-root-directory: master
           wrapper-directory: master
-          arguments: :webUI:copyBuild :server:windowsPackage --stacktrace
+          arguments: :webUI:copyBuild :server:shadowJar --stacktrace
           wrapper-cache-enabled: true
           dependencies-cache-enabled: true
           configuration-cache-enabled: true
 
+      - name: make windows package
+        run: |
+          cd master/scripts
+          ./windows-bundler.sh
+
       - name: Checkout preview branch
         uses: actions/checkout@v2
         with:
@@ -77,4 +82,4 @@ jobs:
 
       - name: Deploy preview
         run: |
-          ./master/.github/scripts/commit-repo.sh
+          ./master/.github/scripts/commit-preview.sh

.github/workflows/publish.yml

@@ -56,54 +56,29 @@ jobs:
         with:
           path: |
             **/react/node_modules
-          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-${{ hashFiles('**/react/yarn.lock') }}
 
-      - name: Build and copy webUI, Build Jar and launch4j
+      - name: Build and copy webUI, Build Jar
         uses: eskatos/gradle-command-action@v1
         with:
           build-root-directory: master
           wrapper-directory: master
-          arguments: :webUI:copyBuild :server:windowsPackage --stacktrace
+          arguments: :webUI:copyBuild :server:shadowJar --stacktrace
           wrapper-cache-enabled: true
           dependencies-cache-enabled: true
           configuration-cache-enabled: true
 
+      - name: make windows package
+        run: |
+          cd master/scripts
+          ./windows-bundler.sh
+
       - name: Upload Release
         uses: xresloader/upload-to-github-release@master
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          file: "master/server/build/*.jar;master/server/build/*-win32.zip"
+          file: "master/server/build/*.jar;master/server/build/*.zip"
           tags: true
           draft: true
           verbose: true
-
-#      - name: Create Release
-#        id: create_release
-#        uses: actions/create-release@v1
-#        env:
-#          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-#        with:
-#          tag_name: ${{ github.ref }}
-#          release_name: Release ${{ github.ref }}
-#          body: |
-#                  Release body
-#          draft: false
-#          prerelease: true
-#
-#      - name: Get the Ref
-#        id: get-ref
-#        uses: ankitvgupta/ref-to-tag-action@master
-#        with:
-#          ref: ${{ github.ref }}
-#          head_ref: ${{ github.head_ref }}
-#
-#      - name: Get the tag
-#        run: echo "The tag was ${{ steps.get-ref.outputs.tag }}"
-#
-#      - name: Upload Release
-#        uses: AButler/upload-release-assets@v2.0
-#        with:
-#          files: 'master/repo/*'
-#          repo-token: ${{ secrets.GITHUB_TOKEN }}
-#          release-tag: ${{ steps.get-ref.outputs.tag }}

CODE_OF_CONDUCT.md

@@ -0,0 +1,5 @@
+# Code Of Conduct
+- Don't be a dick.
+
+# expanding the code of conduct!
+The contents of this document is up for debate and improvement! Discussions on discord.

CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing
+## Where should I start?
+Checkout [This Kanban Board](https://github.com/Suwayomi/Tachidesk/projects/1) to see the rough development roadmap.
+
+**Note to potential contributors:** Notify the developers on Suwayomi discord (#programming channel) or open a WIP pull request before starting if you decide to take on working on anything from/not from the roadmap in order to avoid parallel efforts on the same issue/feature.
+
+## How does Tachidesk work?
+This project has two components: 
+1. **server:** contains the implementation of [tachiyomi's extensions library](https://github.com/tachiyomiorg/extensions-lib) and uses an Android compatibility library to run apk extensions. All this concludes to serving a REST API to `webUI`.
+2. **webUI:** A react SPA(`create-react-app`) project that works with the server to do the presentation.
+
+## Why a web app?
+This structure is chosen to
+- Achieve the maximum multi-platform-ness
+- Gives the ability to acces Tachidesk from a remote web browser e.g. your phone, tablet or smart TV
+- Eaise development of alternative user intefaces for Tachidesk
+
+## User Interfaces for Tachidesk server
+Currently there are three known interfaces for Tachidesk:
+1. [webUI](https://github.com/Suwayomi/Tachidesk/tree/master/webUI/react): The react SPA that Tachidesk is traditionally shipped with.
+2. [TachideskJUI](https://github.com/Suwayomi/TachideskJUI): A Jetbrains Compose Native app, re-uses components made for the upcoming Tachiyomi 1.x
+3. [Equinox](https://github.com/Suwayomi/Equinox): A web user interface made with Vue.js, in super early stages of development.
+
+## Building from source
+### Prerequisites
+You need these software packages installed in order to build the project
+### Server
+- Java Development Kit and Java Runtime Environment version 8 or newer(both Oracle JDK and OpenJDK works)
+- Android stubs jar
+    - Manual download: Download [android.jar](https://raw.githubusercontent.com/Suwayomi/Tachidesk/android-jar/android.jar) and put it under `AndroidCompat/lib`.
+    -  Automated download: Run `AndroidCompat/getAndroid.sh`(MacOS/Linux) or `AndroidCompat/getAndroid.ps1`(Windows) from project's root directory to download and rebuild the jar file from Google's repository.
+### webUI
+- Nodejs LTS or latest
+- Yarn
+- Git
+### building the full-blown jar
+Run `./gradlew :webUI:copyBuild server:shadowJar`, the resulting built jar file will be `server/build/Tachidesk-vX.Y.Z-rxxx.jar`.
+### building without `webUI` bundled(server only)
+Delete the `server/src/main/resources/react` directory if exists from previous runs, then run `./gradlew server:shadowJar`, the resulting built jar file will be `server/build/Tachidesk-vX.Y.Z-rxxx.jar`.
+### building the Windows package
+Run `./gradlew :server:windowsPackage` to build a server only bundle and `./gradlew :webUI:copyBuild :server:windowsPackage` to get a full bundle , the resulting built zip package file will be `server/build/Tachidesk-vX.Y.Z-rxxx-win32.zip`.
+## Running in development mode
+First satistify [the prerequisites](#prerequisites)
+### server
+run `./gradlew :server:run --stacktrace` to run the server
+### webUI
+How to do it is described in `webUI/react/README.md` but for short,
+ first cd into `webUI/react` then run `yarn` to install the node modules(do this only once)
+ then `yarn start` to start the development server, if a new browser window doesn't get opned automatically,
+ then open `http://127.0.0.1:3000` in a modern browser. This is a `create-react-app` project
+ and supports HMR and all the other goodies you'll need.
+

README.md

@@ -8,9 +8,9 @@
 
 A free and open source manga reader that runs extensions built for [Tachiyomi](https://tachiyomi.org/). 
 
-Tachidesk is an independent Tachiyomi compatible software made by [@AriaMoradi AKA ArMor](https://github.com/AriaMoradi) and contributors and is **not a Fork of** Tachiyomi.
+Tachidesk is an independent Tachiyomi compatible software and is **not a Fork of** Tachiyomi.
 
-Tachidesk is as multi-platform as you can get. Any platform that runs java and/or has a modern browser can run it. 
+Tachidesk is as multi-platform as you can get. Any platform that runs java and/or has a modern browser can run it. This includes Windows, Linux, macOS, chrome OS, etc. Follow [Downloading and Running the app](#downloading-and-running-the-app) for installation instructions.
 
 Ability to read and write Tachiyomi compatible backups and syncing is a planned feature.
 
@@ -24,13 +24,11 @@ Here is a list of current features:
 - Ability to download Mangas for offline read(This partially works)
 - Backup and restore support powered by Tachiyomi Legacy Backups
 
-**Note:** Keep in mind that Tachidesk is alpha software and can break rarely and/or with each update, so you may have to delete your data to fix it. See [General troubleshooting](#general-troubleshooting) and [Support and help](#support-and-help) if it happens.
+**Note:** Keep in mind that Tachidesk is alpha software and can break rarely and/or with each update. See [Troubleshooting](https://github.com/Suwayomi/Tachidesk/wiki/Troubleshooting) if it happens.
-
-Anyways, for more info checkout [finished milestone #1](https://github.com/Suwayomi/Tachidesk/issues/2) and [milestone #2](https://github.com/Suwayomi/Tachidesk/projects/1) to see what's implemented in more detail.
 
 ## Downloading and Running the app
 ### All Operating Systems
-You should have The Java Runtime Environment(JRE) 8 or newer and a modern browser installed. Also an internet connection is required as almost everything this app does is downloading stuff. 
+You should have The Java Runtime Environment(JRE) 8 or newer and a modern browser installed(Google is your friend for seeking assitance). Also an internet connection is required as almost everything this app does is downloading stuff. 
 
 Download the latest "Stable" jar release from [the releases section](https://github.com/Suwayomi/Tachidesk/releases) or a preview jar build from [the preview branch](https://github.com/Suwayomi/Tachidesk/tree/preview).
 
@@ -46,56 +44,22 @@ You can install Tachidesk from the AUR
 ```
 yay -S tachidesk
 ```
+Or the latest preview version
+```
+yay -S tachidesk-preview
+```
 
 ### Docker
 Check [arbuilder's repo](https://github.com/arbuilder/Tachidesk-docker) out for more details and the dockerfile.
 
-## General troubleshooting
+### Using Tachidesk Remotely
-If the app breaks, make sure that it's not running(right click on tray icon and quit or kill it through the way your Operating System provides), delete the directory below and re-run the app (**This procedure will delete all your data!**) and if the problem persists open an issue or ask for help on discord. 
+You can run Tachidesk on your computer or a server and connect to it remotely through the web interface with a web browser on any device including a mobile or tablet or even your smart TV!, this method of using Tachidesk is only recommended if you are a power user and know what you are doing.
 
-On Mac OS X : `/Users/<Account>/Library/Application Support/Tachidesk`
+## Troubleshooting and Support
+See [this troubleshooting wiki page](https://github.com/Suwayomi/Tachidesk/wiki/Troubleshooting).
 
-On Windows XP : `C:\Documents and Settings\<Account>\Application Data\Local Settings\Tachidesk`
+## Contributing and Technical info
-
+See [CONTRIBUTING.md](./CONTRIBUTING.md).
-On Windows 7 and later : `C:\Users\<Account>\AppData\Local\Tachidesk`
-
-On Unix/Linux : `/home/<account>/.local/share/Tachidesk`
-
-## Support and help
-Join Tachidesk's [discord server](https://discord.gg/DDZdqZWaHA) to hang out with the community and to receive support and help.
-
-## How does it work?
-This project has two components: 
-1. **server:** contains the implementation of [tachiyomi's extensions library](https://github.com/tachiyomiorg/extensions-lib) and uses an Android compatibility library to run apk extensions. All this concludes to serving a REST API to `webUI`.
-2. **webUI:** A react SPA project that works with the server to do the presentation.
-
-## Building from source
-### Prerequisite: Get Android stubs jar
-#### Manual download
-Download [android.jar](https://raw.githubusercontent.com/Suwayomi/Tachidesk/android-jar/android.jar) and put it under `AndroidCompat/lib`.
-#### Automated download
-Run `AndroidCompat/getAndroid.sh`(MacOS/Linux) or `AndroidCompat/getAndroid.ps1`(Windows) from project's root directory to download and rebuild the jar file from Google's repository.
-### Prerequisite: Software dependencies
-You need this software packages installed in order to build this project:
-- Java Development Kit and Java Runtime Environment version 8 or newer(both Oracle JDK and OpenJDK works)
-- Nodejs LTS or latest
-- Yarn
-- Git
-### building the full-blown jar
-Run `./gradlew :webUI:copyBuild server:shadowJar`, the resulting built jar file will be `server/build/Tachidesk-vX.Y.Z-rxxx.jar`.
-### building without `webUI` bundled(server only)
-Delete the `server/src/main/resources/react` directory if exists from previous runs, then run `./gradlew server:shadowJar`, the resulting built jar file will be `server/build/Tachidesk-vX.Y.Z-rxxx.jar`.
-### building the Windows package
-Run `./gradlew :server:windowsPackage` to build a server only bundle and `./gradlew :webUI:copyBuild :server:windowsPackage` to get a full bundle , the resulting built zip package file will be `server/build/Tachidesk-vX.Y.Z-rxxx-win32.zip`.
-## Running for development purposes
-### `server` module
-Follow [Get Android stubs jar](#prerequisite-get-android-stubs-jar) then run `./gradlew :server:run --stacktrace` to run the server
-### `webUI` module
-How to do it is described in `webUI/react/README.md` but for short,
- first cd into `webUI/react` then run `yarn` to install the node modules(do this only once)
- then `yarn start` to start the development server, if a new browser window doesn't get opned automatically,
- then open `http://127.0.0.1:3000` in a modern browser. This is a `create-react-app` project
- and supports HMR and all the other goodies you'll need.
 
 ## Credit
 This project is a spiritual successor of [TachiWeb-Server](https://github.com/Tachiweb/TachiWeb-server), Many of the ideas and the groundwork adopted in this project comes from TachiWeb.

scripts/resources/Tachidesk-debug.bat

@@ -0,0 +1 @@
+jre\bin\java -Dir.armor.tachidesk.debugLogsEnabled=true -jar  Tachidesk.jar

scripts/resources/Tachidesk.bat

@@ -0,0 +1 @@
+start "" "jre/bin/javaw -jar Tachidesk.jar"

scripts/windows-bundler.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+# Copyright (C) Contributors to the Suwayomi project
+#
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+echo "Downloading jre..."
+
+jre="OpenJDK8U-jre_x64_windows_hotspot_8u292b10.zip"
+curl -L "https://github.com/AdoptOpenJDK/openjdk8-binaries/releases/download/jdk8u292-b10/OpenJDK8U-jre_x64_windows_hotspot_8u292b10.zip" -o $jre
+
+echo "creating windows bundle"
+
+jar=$(ls ../server/build/Tachidesk-*.jar)
+jar_name=$(echo $jar | cut -d'/' -f4)
+release_name=$(echo $jar_name | cut -d'.' -f4 --complement)-win64
+
+# make release dir
+mkdir $release_name
+
+unzip $jre
+
+# move jre
+mv jdk8u292-b10-jre $release_name/jre
+
+cp $jar $release_name/Tachidesk.jar
+
+cp resources/Tachidesk.bat $release_name
+cp resources/Tachidesk-debug.bat $release_name
+
+zip_name=$release_name.zip
+zip -9 -r $zip_name $release_name
+
+cp $zip_name ../server/build/

server/build.gradle.kts

@@ -83,7 +83,7 @@ dependencies {
     testImplementation(kotlin("test-junit5"))
 }
 
-val MainClass = "ir.armor.tachidesk.Main"
+val MainClass = "ir.armor.tachidesk.MainKt"
 application {
     mainClass.set(MainClass)
 }
@@ -97,7 +97,7 @@ sourceSets {
 }
 
 // should be bumped with each stable release
-val tachideskVersion = "v0.3.0"
+val tachideskVersion = "v0.3.4"
 
 // counts commit count on master
 val tachideskRevision = Runtime
@@ -131,7 +131,7 @@ launch4j { //used for windows
     bundledJrePath = "jre"
     bundledJre64Bit = true
     jreMinVersion = "8"
-    outputDir = "${rootProject.name}-$tachideskVersion-$tachideskRevision-win32"
+    outputDir = "${rootProject.name}-$tachideskVersion-$tachideskRevision-win64"
     icon = "${projectDir}/src/main/resources/icon/faviconlogo.ico"
     jar = "${projectDir}/build/${rootProject.name}-$tachideskVersion-$tachideskRevision.jar"
 }
@@ -169,56 +169,6 @@ tasks {
         useJUnit()
     }
     
-    register<Zip>("windowsPackage") {
-        from(fileTree("$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32"))
-        destinationDirectory.set(File("$buildDir"))
-        archiveFileName.set("${rootProject.name}-$tachideskVersion-$tachideskRevision-win32.zip")
-        dependsOn("windowsPackageWorkaround2")
-    }
-
-    register<Delete>("windowsPackageWorkaround2") {
-        delete(
-                "$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32/jre",
-                "$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32/lib",
-                "$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32/server.exe",
-                "$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32/Tachidesk-$tachideskVersion-$tachideskRevision-win32/Tachidesk-$tachideskVersion-$tachideskRevision-win32"
-        )
-        dependsOn("windowsPackageWorkaround")
-    }
-
-    register<Copy>("windowsPackageWorkaround") {
-        from("$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32")
-        into("$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32")
-        dependsOn("deleteUnwantedJreDir")
-    }
-
-    register<Delete>("deleteUnwantedJreDir") {
-        delete(
-                "$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32/jdk8u282-b08-jre"
-        )
-        dependsOn("addJreToDistributable")
-    }
-
-    register<Copy>("addJreToDistributable") {
-        from(zipTree("$buildDir/OpenJDK8U-jre_x86-32_windows_hotspot_8u282b08.zip"))
-        into("$buildDir/${rootProject.name}-$tachideskVersion-$tachideskRevision-win32")
-        eachFile {
-            path = path.replace(".*-jre".toRegex(), "jre")
-        }
-        dependsOn("downloadJre")
-        dependsOn("createExe")
-    }
-
-    named("createExe") {
-        dependsOn("shadowJar")
-    }
-
-    register<de.undercouch.gradle.tasks.download.Download>("downloadJre") {
-        src("https://github.com/AdoptOpenJDK/openjdk8-binaries/releases/download/jdk8u282-b08/OpenJDK8U-jre_x86-32_windows_hotspot_8u282b08.zip")
-        dest("$buildDir/OpenJDK8U-jre_x86-32_windows_hotspot_8u282b08.zip")
-        overwrite(false)
-        onlyIfModified(true)
-    }
     
     withType<ShadowJar> {
         destinationDirectory.set(File("$rootDir/server/build"))

server/src/main/kotlin/ir/armor/tachidesk/Main.kt

@@ -10,13 +10,7 @@ package ir.armor.tachidesk
 import ir.armor.tachidesk.server.JavalinSetup.javalinSetup
 import ir.armor.tachidesk.server.applicationSetup
 
-class Main {
+fun main() {
-    companion object {
+    applicationSetup()
-
+    javalinSetup()
-        @JvmStatic
-        fun main(args: Array<String>) {
-            applicationSetup()
-            javalinSetup()
-        }
-    }
 }

server/src/main/kotlin/ir/armor/tachidesk/impl/Chapter.kt

@@ -15,8 +15,11 @@ import ir.armor.tachidesk.impl.util.awaitSingle
 import ir.armor.tachidesk.model.database.table.ChapterTable
 import ir.armor.tachidesk.model.database.table.MangaTable
 import ir.armor.tachidesk.model.database.table.PageTable
+import ir.armor.tachidesk.model.database.table.toDataClass
 import ir.armor.tachidesk.model.dataclass.ChapterDataClass
+import org.jetbrains.exposed.sql.SortOrder.DESC
 import org.jetbrains.exposed.sql.and
+import org.jetbrains.exposed.sql.deleteWhere
 import org.jetbrains.exposed.sql.insert
 import org.jetbrains.exposed.sql.select
 import org.jetbrains.exposed.sql.selectAll
@@ -25,53 +28,81 @@ import org.jetbrains.exposed.sql.update
 
 object Chapter {
     /** get chapter list when showing a manga */
-    suspend fun getChapterList(mangaId: Int): List<ChapterDataClass> {
+    suspend fun getChapterList(mangaId: Int, onlineFetch: Boolean): List<ChapterDataClass> {
-        val mangaDetails = getManga(mangaId)
+        return if (!onlineFetch) {
-        val source = getHttpSource(mangaDetails.sourceId.toLong())
+            transaction {
-
+                ChapterTable.select { ChapterTable.manga eq mangaId }.orderBy(ChapterTable.chapterIndex to DESC)
-        val chapterList = source.fetchChapterList(
+                    .map {
-            SManga.create().apply {
+                        ChapterTable.toDataClass(it)
-                title = mangaDetails.title
-                url = mangaDetails.url
-            }
-        ).awaitSingle()
-
-        val chapterCount = chapterList.count()
-
-        return transaction {
-            chapterList.reversed().forEachIndexed { index, fetchedChapter ->
-                val chapterEntry = ChapterTable.select { ChapterTable.url eq fetchedChapter.url }.firstOrNull()
-                if (chapterEntry == null) {
-                    ChapterTable.insert {
-                        it[url] = fetchedChapter.url
-                        it[name] = fetchedChapter.name
-                        it[date_upload] = fetchedChapter.date_upload
-                        it[chapter_number] = fetchedChapter.chapter_number
-                        it[scanlator] = fetchedChapter.scanlator
-
-                        it[chapterIndex] = index + 1
-                        it[manga] = mangaId
                     }
-                } else {
+            }
-                    ChapterTable.update({ ChapterTable.url eq fetchedChapter.url }) {
+        } else {
-                        it[name] = fetchedChapter.name
-                        it[date_upload] = fetchedChapter.date_upload
-                        it[chapter_number] = fetchedChapter.chapter_number
-                        it[scanlator] = fetchedChapter.scanlator
 
-                        it[chapterIndex] = index + 1
+            val mangaDetails = getManga(mangaId)
-                        it[manga] = mangaId
+            val source = getHttpSource(mangaDetails.sourceId.toLong())
+            val chapterList = source.fetchChapterList(
+                SManga.create().apply {
+                    title = mangaDetails.title
+                    url = mangaDetails.url
+                }
+            ).awaitSingle()
+
+            val chapterCount = chapterList.count()
+
+            transaction {
+                chapterList.reversed().forEachIndexed { index, fetchedChapter ->
+                    val chapterEntry = ChapterTable.select { ChapterTable.url eq fetchedChapter.url }.firstOrNull()
+                    if (chapterEntry == null) {
+                        ChapterTable.insert {
+                            it[url] = fetchedChapter.url
+                            it[name] = fetchedChapter.name
+                            it[date_upload] = fetchedChapter.date_upload
+                            it[chapter_number] = fetchedChapter.chapter_number
+                            it[scanlator] = fetchedChapter.scanlator
+
+                            it[chapterIndex] = index + 1
+                            it[manga] = mangaId
+                        }
+                    } else {
+                        ChapterTable.update({ ChapterTable.url eq fetchedChapter.url }) {
+                            it[name] = fetchedChapter.name
+                            it[date_upload] = fetchedChapter.date_upload
+                            it[chapter_number] = fetchedChapter.chapter_number
+                            it[scanlator] = fetchedChapter.scanlator
+
+                            it[chapterIndex] = index + 1
+                            it[manga] = mangaId
+                        }
                     }
                 }
             }
 
             // clear any orphaned chapters that are in the db but not in `chapterList`
-            val dbChapterCount = transaction { ChapterTable.selectAll().count() }
+            val dbChapterCount = transaction { ChapterTable.select { ChapterTable.manga eq mangaId }.count() }
             if (dbChapterCount > chapterCount) { // we got some clean up due
-                // TODO: delete orphan chapters
+                val dbChapterList = transaction { ChapterTable.select { ChapterTable.manga eq mangaId } }
+
+                dbChapterList.forEach {
+                    if (it[ChapterTable.chapterIndex] >= chapterList.size ||
+                        chapterList[it[ChapterTable.chapterIndex] - 1].url != it[ChapterTable.url]
+                    ) {
+                        transaction {
+                            PageTable.deleteWhere { PageTable.chapter eq it[ChapterTable.id] }
+                            ChapterTable.deleteWhere { ChapterTable.id eq it[ChapterTable.id] }
+                        }
+                    }
+                }
             }
 
-            chapterList.mapIndexed { index, it ->
+            val dbChapterMap = transaction {
+                ChapterTable.select { ChapterTable.manga eq mangaId }
+                    .associateBy({ it[ChapterTable.url] }, { it })
+            }
+
+            return chapterList.mapIndexed { index, it ->
+
+                val dbChapter = dbChapterMap.getValue(it.url)
+
                 ChapterDataClass(
                     it.url,
                     it.name,
@@ -79,6 +110,11 @@ object Chapter {
                     it.chapter_number,
                     it.scanlator,
                     mangaId,
+
+                    dbChapter[ChapterTable.isRead],
+                    dbChapter[ChapterTable.isBookmarked],
+                    dbChapter[ChapterTable.lastPageRead],
+
                     chapterCount - index,
                 )
             }
@@ -132,9 +168,37 @@ object Chapter {
             chapterEntry[ChapterTable.chapter_number],
             chapterEntry[ChapterTable.scanlator],
             mangaId,
+            chapterEntry[ChapterTable.isRead],
+            chapterEntry[ChapterTable.isBookmarked],
+            chapterEntry[ChapterTable.lastPageRead],
+
             chapterEntry[ChapterTable.chapterIndex],
             chapterCount.toInt(),
             pageList.count()
         )
     }
+
+    fun modifyChapter(mangaId: Int, chapterIndex: Int, isRead: Boolean?, isBookmarked: Boolean?, markPrevRead: Boolean?, lastPageRead: Int?) {
+        transaction {
+            if (listOf(isRead, isBookmarked, lastPageRead).any { it != null }) {
+                ChapterTable.update({ (ChapterTable.manga eq mangaId) and (ChapterTable.chapterIndex eq chapterIndex) }) { update ->
+                    isRead?.also {
+                        update[ChapterTable.isRead] = it
+                    }
+                    isBookmarked?.also {
+                        update[ChapterTable.isBookmarked] = it
+                    }
+                    lastPageRead?.also {
+                        update[ChapterTable.lastPageRead] = it
+                    }
+                }
+            }
+
+            markPrevRead?.let {
+                ChapterTable.update({ (ChapterTable.manga eq mangaId) and (ChapterTable.chapterIndex less chapterIndex) }) {
+                    it[ChapterTable.isRead] = markPrevRead
+                }
+            }
+        }
+    }
 }

server/src/main/kotlin/ir/armor/tachidesk/impl/Manga.kt

@@ -11,6 +11,7 @@ import eu.kanade.tachiyomi.network.GET
 import eu.kanade.tachiyomi.source.model.SManga
 import ir.armor.tachidesk.impl.MangaList.proxyThumbnailUrl
 import ir.armor.tachidesk.impl.Source.getSource
+import ir.armor.tachidesk.impl.util.CachedImageResponse.clearCachedImage
 import ir.armor.tachidesk.impl.util.CachedImageResponse.getCachedImageResponse
 import ir.armor.tachidesk.impl.util.GetHttpSource.getHttpSource
 import ir.armor.tachidesk.impl.util.await
@@ -35,17 +36,17 @@ object Manga {
             text
     }
 
-    suspend fun getManga(mangaId: Int, proxyThumbnail: Boolean = true): MangaDataClass {
+    suspend fun getManga(mangaId: Int, onlineFetch: Boolean = false): MangaDataClass {
         var mangaEntry = transaction { MangaTable.select { MangaTable.id eq mangaId }.firstOrNull()!! }
 
-        return if (mangaEntry[MangaTable.initialized]) {
+        return if (mangaEntry[MangaTable.initialized] && !onlineFetch) {
             MangaDataClass(
                 mangaId,
                 mangaEntry[MangaTable.sourceReference].toString(),
 
                 mangaEntry[MangaTable.url],
                 mangaEntry[MangaTable.title],
-                if (proxyThumbnail) proxyThumbnailUrl(mangaId) else mangaEntry[MangaTable.thumbnail_url],
+                proxyThumbnailUrl(mangaId),
 
                 true,
 
@@ -55,7 +56,8 @@ object Manga {
                 mangaEntry[MangaTable.genre],
                 MangaStatus.valueOf(mangaEntry[MangaTable.status]).name,
                 mangaEntry[MangaTable.inLibrary],
-                getSource(mangaEntry[MangaTable.sourceReference])
+                getSource(mangaEntry[MangaTable.sourceReference]),
+                false
             )
         } else { // initialize manga
             val source = getHttpSource(mangaEntry[MangaTable.sourceReference])
@@ -81,8 +83,9 @@ object Manga {
                 }
             }
 
+            clearMangaThumbnail(mangaId)
+
             mangaEntry = transaction { MangaTable.select { MangaTable.id eq mangaId }.firstOrNull()!! }
-            val newThumbnail = mangaEntry[MangaTable.thumbnail_url]
 
             MangaDataClass(
                 mangaId,
@@ -90,7 +93,7 @@ object Manga {
 
                 mangaEntry[MangaTable.url],
                 mangaEntry[MangaTable.title],
-                if (proxyThumbnail) proxyThumbnailUrl(mangaId) else newThumbnail,
+                proxyThumbnailUrl(mangaId),
 
                 true,
 
@@ -100,28 +103,37 @@ object Manga {
                 fetchedManga.genre,
                 MangaStatus.valueOf(fetchedManga.status).name,
                 false,
-                getSource(mangaEntry[MangaTable.sourceReference])
+                getSource(mangaEntry[MangaTable.sourceReference]),
+                true
             )
         }
     }
 
     private val applicationDirs by DI.global.instance<ApplicationDirs>()
     suspend fun getMangaThumbnail(mangaId: Int): Pair<InputStream, String> {
-        val mangaEntry = transaction { MangaTable.select { MangaTable.id eq mangaId }.firstOrNull()!! }
         val saveDir = applicationDirs.thumbnailsRoot
         val fileName = mangaId.toString()
 
         return getCachedImageResponse(saveDir, fileName) {
+            getManga(mangaId) // make sure is initialized
+
+            val mangaEntry = transaction { MangaTable.select { MangaTable.id eq mangaId }.firstOrNull()!! }
+
             val sourceId = mangaEntry[MangaTable.sourceReference]
             val source = getHttpSource(sourceId)
-            var thumbnailUrl = mangaEntry[MangaTable.thumbnail_url]
+
-            if (thumbnailUrl == null || thumbnailUrl.isEmpty()) {
+            val thumbnailUrl = mangaEntry[MangaTable.thumbnail_url]!!
-                thumbnailUrl = getManga(mangaId, proxyThumbnail = false).thumbnailUrl!!
-            }
 
             source.client.newCall(
                 GET(thumbnailUrl, source.headers)
             ).await()
         }
     }
+
+    suspend fun clearMangaThumbnail(mangaId: Int) {
+        val saveDir = applicationDirs.thumbnailsRoot
+        val fileName = mangaId.toString()
+
+        clearCachedImage(saveDir, fileName)
+    }
 }

server/src/main/kotlin/ir/armor/tachidesk/impl/backup/legacy/LegacyBackupImport.kt

@@ -80,11 +80,11 @@ object LegacyBackupImport : LegacyBackupBase() {
         return validationResult
     }
 
-    private fun restoreCategories(jsonCategories: JsonElement) { // TODO
+    private fun restoreCategories(jsonCategories: JsonElement) {
         val backupCategories = parser.fromJson<List<CategoryImpl>>(jsonCategories)
         val dbCategories = getCategoryList()
 
-        // Iterate over them
+        // Iterate over them and create missing categories
         backupCategories.forEach { category ->
             if (dbCategories.none { it.name == category.name }) {
                 createCategory(category.name)

server/src/main/kotlin/ir/armor/tachidesk/impl/util/CachedImageResponse.kt

@@ -23,8 +23,9 @@ object CachedImageResponse {
     }
 
     private fun findFileNameStartingWith(directoryPath: String, fileName: String): String? {
+        val target = "$fileName."
         File(directoryPath).listFiles().forEach { file ->
-            if (file.name.startsWith(fileName))
+            if (file.name.startsWith(target))
                 return "$directoryPath/${file.name}"
         }
         return null
@@ -64,4 +65,11 @@ object CachedImageResponse {
             throw Exception("request error! ${response.code}")
         }
     }
+
+    suspend fun clearCachedImage(saveDir: String, fileName: String) {
+        val cachedFile = findFileNameStartingWith(saveDir, fileName)
+        cachedFile?.also {
+            File(it).delete()
+        }
+    }
 }

server/src/main/kotlin/ir/armor/tachidesk/model/database/DBManager.kt

@@ -15,7 +15,7 @@ import org.kodein.di.DI
 import org.kodein.di.conf.global
 import org.kodein.di.instance
 
-object DBMangaer {
+object DBManager {
     val db by lazy {
         val applicationDirs by DI.global.instance<ApplicationDirs>()
         Database.connect("jdbc:h2:${applicationDirs.dataRoot}/database", "org.h2.Driver")
@@ -24,7 +24,7 @@ object DBMangaer {
 
 fun databaseUp() {
     // must mention db object so the lazy block executes
-    val db = DBMangaer.db
+    val db = DBManager.db
     db.useNestedTransactions = true
 
     val migrations = loadMigrationsFrom("ir.armor.tachidesk.model.database.migration")

server/src/main/kotlin/ir/armor/tachidesk/model/database/migration/M0001_Initial.kt

@@ -1,12 +1,5 @@
 package ir.armor.tachidesk.model.database.migration
 
-import eu.kanade.tachiyomi.source.model.SManga
-import ir.armor.tachidesk.model.database.migration.lib.Migration
-import org.jetbrains.exposed.dao.id.IdTable
-import org.jetbrains.exposed.dao.id.IntIdTable
-import org.jetbrains.exposed.sql.SchemaUtils
-import org.jetbrains.exposed.sql.transactions.transaction
-
 /*
  * Copyright (C) Contributors to the Suwayomi project
  *
@@ -14,103 +7,128 @@ import org.jetbrains.exposed.sql.transactions.transaction
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import eu.kanade.tachiyomi.source.model.SManga
+import ir.armor.tachidesk.model.database.migration.lib.Migration
+import org.jetbrains.exposed.dao.id.IdTable
+import org.jetbrains.exposed.dao.id.IntIdTable
+import org.jetbrains.exposed.sql.SchemaUtils
+import org.jetbrains.exposed.sql.transactions.transaction
+
+@Suppress("ClassName", "unused")
 class M0001_Initial : Migration() {
-    private object ExtensionTable : IntIdTable() {
+    private class ExtensionTable : IntIdTable() {
-        val apkName = varchar("apk_name", 1024)
+        init {
+            varchar("apk_name", 1024)
+            // default is the local source icon from tachiyomi
+            varchar("icon_url", 2048)
+                .default("https://raw.githubusercontent.com/tachiyomiorg/tachiyomi/64ba127e7d43b1d7e6d58a6f5c9b2bd5fe0543f7/app/src/main/res/mipmap-xxxhdpi/ic_local_source.webp")
+            varchar("name", 128)
+            varchar("pkg_name", 128)
+            varchar("version_name", 16)
+            integer("version_code")
+            varchar("lang", 10)
+            bool("is_nsfw")
 
-        // default is the local source icon from tachiyomi
+            bool("is_installed").default(false)
-        val iconUrl = varchar("icon_url", 2048)
+            bool("has_update").default(false)
-            .default("https://raw.githubusercontent.com/tachiyomiorg/tachiyomi/64ba127e7d43b1d7e6d58a6f5c9b2bd5fe0543f7/app/src/main/res/mipmap-xxxhdpi/ic_local_source.webp")
+            bool("is_obsolete").default(false)
 
-        val name = varchar("name", 128)
+            varchar("class_name", 1024).default("") // fully qualified name
-        val pkgName = varchar("pkg_name", 128)
+        }
-        val versionName = varchar("version_name", 16)
-        val versionCode = integer("version_code")
-        val lang = varchar("lang", 10)
-        val isNsfw = bool("is_nsfw")
-
-        val isInstalled = bool("is_installed").default(false)
-        val hasUpdate = bool("has_update").default(false)
-        val isObsolete = bool("is_obsolete").default(false)
-
-        val classFQName = varchar("class_name", 1024).default("") // fully qualified name
     }
 
-    private object SourceTable : IdTable<Long>() {
+    private class SourceTable(extensionTable: ExtensionTable) : IdTable<Long>() {
         override val id = long("id").entityId()
-        val name = varchar("name", 128)
+        init {
-        val lang = varchar("lang", 10)
+            varchar("name", 128)
-        val extension = reference("extension", ExtensionTable)
+            varchar("lang", 10)
-        val partOfFactorySource = bool("part_of_factory_source").default(false)
+            reference("extension", extensionTable)
+            bool("part_of_factory_source").default(false)
+        }
     }
 
-    private object MangaTable : IntIdTable() {
+    private class MangaTable : IntIdTable() {
-        val url = varchar("url", 2048)
+        init {
-        val title = varchar("title", 512)
+            varchar("url", 2048)
-        val initialized = bool("initialized").default(false)
+            varchar("title", 512)
+            bool("initialized").default(false)
 
-        val artist = varchar("artist", 64).nullable()
+            varchar("artist", 64).nullable()
-        val author = varchar("author", 64).nullable()
+            varchar("author", 64).nullable()
-        val description = varchar("description", 4096).nullable()
+            varchar("description", 4096).nullable()
-        val genre = varchar("genre", 1024).nullable()
+            varchar("genre", 1024).nullable()
 
-        //    val status = enumeration("status", MangaStatus::class).default(MangaStatus.UNKNOWN)
+            // val status = enumeration("status", MangaStatus::class).default(MangaStatus.UNKNOWN)
-        val status = integer("status").default(SManga.UNKNOWN)
+            integer("status").default(SManga.UNKNOWN)
-        val thumbnail_url = varchar("thumbnail_url", 2048).nullable()
+            varchar("thumbnail_url", 2048).nullable()
 
-        val inLibrary = bool("in_library").default(false)
+            bool("in_library").default(false)
-        val defaultCategory = bool("default_category").default(true)
+            bool("default_category").default(true)
 
-        // source is used by some ancestor of IntIdTable
+            // source is used by some ancestor of IntIdTable
-        val sourceReference = long("source")
+            long("source")
+        }
     }
 
-    private object ChapterTable : IntIdTable() {
+    private class ChapterTable(mangaTable: MangaTable) : IntIdTable() {
-        val url = varchar("url", 2048)
+        init {
-        val name = varchar("name", 512)
+            varchar("url", 2048)
-        val date_upload = long("date_upload").default(0)
+            varchar("name", 512)
-        val chapter_number = float("chapter_number").default(-1f)
+            long("date_upload").default(0)
-        val scanlator = varchar("scanlator", 128).nullable()
+            float("chapter_number").default(-1f)
+            varchar("scanlator", 128).nullable()
 
-        val isRead = bool("read").default(false)
+            bool("read").default(false)
-        val isBookmarked = bool("bookmark").default(false)
+            bool("bookmark").default(false)
-        val lastPageRead = integer("last_page_read").default(0)
+            integer("last_page_read").default(0)
 
-        val chapterIndex = integer("number_in_list")
+            integer("number_in_list")
-
+            reference("manga", mangaTable)
-        val manga = reference("manga", MangaTable)
+        }
     }
 
-    private object PageTable : IntIdTable() {
+    private class PageTable(chapterTable: ChapterTable) : IntIdTable() {
-        val index = integer("index")
+        init {
-        val url = varchar("url", 2048)
+            integer("index")
-        val imageUrl = varchar("imageUrl", 2048).nullable()
+            varchar("url", 2048)
-
+            varchar("imageUrl", 2048).nullable()
-        val chapter = reference("chapter", ChapterTable)
+            reference("chapter", chapterTable)
+        }
     }
 
-    private object CategoryTable : IntIdTable() {
+    private class CategoryTable : IntIdTable() {
-        val name = varchar("name", 64)
+        init {
-        val isLanding = bool("is_landing").default(false)
+            varchar("name", 64)
-        val order = integer("order").default(0)
+            bool("is_landing").default(false)
+            integer("order").default(0)
+        }
     }
 
-    private object CategoryMangaTable : IntIdTable() {
+    private class CategoryMangaTable : IntIdTable() {
-        val category = reference("category", ir.armor.tachidesk.model.database.table.CategoryTable)
+        init {
-        val manga = reference("manga", ir.armor.tachidesk.model.database.table.MangaTable)
+            reference("category", ir.armor.tachidesk.model.database.table.CategoryTable)
+            reference("manga", ir.armor.tachidesk.model.database.table.MangaTable)
+        }
     }
 
+    /** initial migration, create all tables */
     override fun run() {
         transaction {
+            val extensionTable = ExtensionTable()
+            val sourceTable = SourceTable(extensionTable)
+            val mangaTable = MangaTable()
+            val chapterTable = ChapterTable(mangaTable)
+            val pageTable = PageTable(chapterTable)
+            val categoryTable = CategoryTable()
+            val categoryMangaTable = CategoryMangaTable()
             SchemaUtils.create(
-                ExtensionTable,
+                extensionTable,
-                ExtensionTable,
+                sourceTable,
-                SourceTable,
+                mangaTable,
-                MangaTable,
+                chapterTable,
-                ChapterTable,
+                pageTable,
-                PageTable,
+                categoryTable,
-                CategoryTable,
+                categoryMangaTable,
-                CategoryMangaTable,
             )
         }
     }

server/src/main/kotlin/ir/armor/tachidesk/model/database/migration/M0002_ChapterTableIndexRename.kt

@@ -0,0 +1,24 @@
+package ir.armor.tachidesk.model.database.migration
+
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import ir.armor.tachidesk.model.database.migration.lib.Migration
+import org.jetbrains.exposed.sql.transactions.TransactionManager
+import org.jetbrains.exposed.sql.vendors.currentDialect
+
+@Suppress("ClassName", "unused")
+class M0002_ChapterTableIndexRename : Migration() {
+    /** this migration renamed ChapterTable.NUMBER_IN_LIST to ChapterTable.INDEX */
+    override fun run() {
+        with(TransactionManager.current()) {
+            exec("ALTER TABLE CHAPTER ALTER COLUMN NUMBER_IN_LIST RENAME TO INDEX")
+            commit()
+            currentDialect.resetCaches()
+        }
+    }
+}

server/src/main/kotlin/ir/armor/tachidesk/model/database/migration/lib/runMigrations.kt

@@ -54,6 +54,7 @@ fun runMigrations(migrations: List<Migration>, database: Database = TransactionM
     logger.info { "Migrations finished successfully" }
 }
 
+@Suppress("UnstableApiUsage")
 fun loadMigrationsFrom(classPath: String): List<Migration> {
     return ClassPath.from(Thread.currentThread().contextClassLoader)
         .getTopLevelClasses(classPath)

server/src/main/kotlin/ir/armor/tachidesk/model/database/table/CategoryTable.kt

@@ -18,8 +18,8 @@ object CategoryTable : IntIdTable() {
 }
 
 fun CategoryTable.toDataClass(categoryEntry: ResultRow) = CategoryDataClass(
-    categoryEntry[CategoryTable.id].value,
+    categoryEntry[this.id].value,
-    categoryEntry[CategoryTable.order],
+    categoryEntry[this.order],
-    categoryEntry[CategoryTable.name],
+    categoryEntry[this.name],
-    categoryEntry[CategoryTable.isLanding],
+    categoryEntry[this.isLanding],
 )

server/src/main/kotlin/ir/armor/tachidesk/model/database/table/ChapterTable.kt

@@ -7,7 +7,9 @@ package ir.armor.tachidesk.model.database.table
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import ir.armor.tachidesk.model.dataclass.ChapterDataClass
 import org.jetbrains.exposed.dao.id.IntIdTable
+import org.jetbrains.exposed.sql.ResultRow
 
 object ChapterTable : IntIdTable() {
     val url = varchar("url", 2048)
@@ -20,7 +22,22 @@ object ChapterTable : IntIdTable() {
     val isBookmarked = bool("bookmark").default(false)
     val lastPageRead = integer("last_page_read").default(0)
 
-    val chapterIndex = integer("number_in_list")
+    // index is reserved by a function
+    val chapterIndex = integer("index")
 
     val manga = reference("manga", MangaTable)
 }
+
+fun ChapterTable.toDataClass(chapterEntry: ResultRow) =
+    ChapterDataClass(
+        chapterEntry[this.url],
+        chapterEntry[this.name],
+        chapterEntry[this.date_upload],
+        chapterEntry[this.chapter_number],
+        chapterEntry[this.scanlator],
+        chapterEntry[this.manga].value,
+        chapterEntry[this.isRead],
+        chapterEntry[this.isBookmarked],
+        chapterEntry[this.lastPageRead],
+        chapterEntry[this.chapterIndex],
+    )

server/src/main/kotlin/ir/armor/tachidesk/model/database/table/MangaTable.kt

@@ -36,21 +36,21 @@ object MangaTable : IntIdTable() {
 
 fun MangaTable.toDataClass(mangaEntry: ResultRow) =
     MangaDataClass(
-        mangaEntry[MangaTable.id].value,
+        mangaEntry[this.id].value,
-        mangaEntry[MangaTable.sourceReference].toString(),
+        mangaEntry[this.sourceReference].toString(),
 
-        mangaEntry[MangaTable.url],
+        mangaEntry[this.url],
-        mangaEntry[MangaTable.title],
+        mangaEntry[this.title],
-        proxyThumbnailUrl(mangaEntry[MangaTable.id].value),
+        proxyThumbnailUrl(mangaEntry[this.id].value),
 
-        mangaEntry[MangaTable.initialized],
+        mangaEntry[this.initialized],
 
-        mangaEntry[MangaTable.artist],
+        mangaEntry[this.artist],
-        mangaEntry[MangaTable.author],
+        mangaEntry[this.author],
-        mangaEntry[MangaTable.description],
+        mangaEntry[this.description],
-        mangaEntry[MangaTable.genre],
+        mangaEntry[this.genre],
-        MangaStatus.valueOf(mangaEntry[MangaTable.status]).name,
+        MangaStatus.valueOf(mangaEntry[this.status]).name,
-        mangaEntry[MangaTable.inLibrary]
+        mangaEntry[this.inLibrary]
     )
 
 enum class MangaStatus(val status: Int) {

server/src/main/kotlin/ir/armor/tachidesk/model/dataclass/ChapterDataClass.kt

@@ -10,13 +10,22 @@ package ir.armor.tachidesk.model.dataclass
 data class ChapterDataClass(
     val url: String,
     val name: String,
-    val date_upload: Long,
+    val uploadDate: Long,
-    val chapter_number: Float,
+    val chapterNumber: Float,
     val scanlator: String?,
     val mangaId: Int,
 
-    /** this chapter's index */
+    /** chapter is read */
-    val chapterIndex: Int? = null,
+    val read: Boolean,
+
+    /** chapter is bookmarked */
+    val bookmarked: Boolean,
+
+    /** last read page, zero means not read/no data */
+    val lastPageRead: Int,
+
+    /** this chapter's index, starts with 1 */
+    val index: Int? = null,
 
     /** total chapter count, used to calculate if there's a next and prev chapter */
     val chapterCount: Int? = null,

server/src/main/kotlin/ir/armor/tachidesk/model/dataclass/MangaDataClass.kt

@@ -25,7 +25,9 @@ data class MangaDataClass(
     val genre: String? = null,
     val status: String = MangaStatus.UNKNOWN.name,
     val inLibrary: Boolean = false,
-    val source: SourceDataClass? = null
+    val source: SourceDataClass? = null,
+
+    val freshData: Boolean = false
 )
 
 data class PagedMangaListDataClass(

server/src/main/kotlin/ir/armor/tachidesk/server/JavalinSetup.kt

@@ -1,7 +1,6 @@
 package ir.armor.tachidesk.server
 
 import io.javalin.Javalin
-import ir.armor.tachidesk.Main
 import ir.armor.tachidesk.impl.Category.createCategory
 import ir.armor.tachidesk.impl.Category.getCategoryList
 import ir.armor.tachidesk.impl.Category.removeCategory
@@ -13,6 +12,7 @@ import ir.armor.tachidesk.impl.CategoryManga.getMangaCategories
 import ir.armor.tachidesk.impl.CategoryManga.removeMangaFromCategory
 import ir.armor.tachidesk.impl.Chapter.getChapter
 import ir.armor.tachidesk.impl.Chapter.getChapterList
+import ir.armor.tachidesk.impl.Chapter.modifyChapter
 import ir.armor.tachidesk.impl.Extension.getExtensionIcon
 import ir.armor.tachidesk.impl.Extension.installExtension
 import ir.armor.tachidesk.impl.Extension.uninstallExtension
@@ -36,14 +36,14 @@ import ir.armor.tachidesk.impl.backup.legacy.LegacyBackupImport.restoreLegacyBac
 import ir.armor.tachidesk.server.internal.About.getAbout
 import ir.armor.tachidesk.server.util.openInBrowser
 import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.asCoroutineDispatcher
-import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.future.future
 import mu.KotlinLogging
 import java.io.IOException
 import java.text.SimpleDateFormat
 import java.util.Date
 import java.util.concurrent.CompletableFuture
+import java.util.concurrent.Executors
 import kotlin.concurrent.thread
 
 /*
@@ -55,7 +55,8 @@ import kotlin.concurrent.thread
 
 object JavalinSetup {
     private val logger = KotlinLogging.logger {}
-    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Default)
+
+    private val scope = CoroutineScope(Executors.newFixedThreadPool(200).asCoroutineDispatcher())
 
     private fun <T> future(block: suspend CoroutineScope.() -> T): CompletableFuture<T> {
         return scope.future(block = block)
@@ -67,7 +68,7 @@ object JavalinSetup {
         val app = Javalin.create { config ->
             try {
                 // if the bellow line throws an exception then webUI is not bundled
-                Main::class.java.getResource("/react/index.html")
+                this::class.java.getResource("/react/index.html")
 
                 // no exception so we can tell javalin to serve webUI
                 hasWebUiBundled = true
@@ -102,6 +103,7 @@ object JavalinSetup {
             ctx.result(e.message ?: "Internal Server Error")
         }
 
+        // list all extensions
         app.get("/api/v1/extension/list") { ctx ->
             ctx.json(
                 future {
@@ -110,6 +112,7 @@ object JavalinSetup {
             )
         }
 
+        // install extension identified with "pkgName"
         app.get("/api/v1/extension/install/:pkgName") { ctx ->
             val pkgName = ctx.pathParam("pkgName")
 
@@ -120,6 +123,7 @@ object JavalinSetup {
             )
         }
 
+        // update extension identified with "pkgName"
         app.get("/api/v1/extension/update/:pkgName") { ctx ->
             val pkgName = ctx.pathParam("pkgName")
 
@@ -130,6 +134,7 @@ object JavalinSetup {
             )
         }
 
+        // uninstall extension identified with "pkgName"
         app.get("/api/v1/extension/uninstall/:pkgName") { ctx ->
             val pkgName = ctx.pathParam("pkgName")
 
@@ -138,7 +143,7 @@ object JavalinSetup {
         }
 
         // icon for extension named `apkName`
-        app.get("/api/v1/extension/icon/:apkName") { ctx ->
+        app.get("/api/v1/extension/icon/:apkName") { ctx -> // TODO: move to pkgName
             val apkName = ctx.pathParam("apkName")
 
             ctx.result(
@@ -186,9 +191,11 @@ object JavalinSetup {
         // get manga info
         app.get("/api/v1/manga/:mangaId/") { ctx ->
             val mangaId = ctx.pathParam("mangaId").toInt()
+            val onlineFetch = ctx.queryParam("onlineFetch", "false").toBoolean()
+
             ctx.json(
                 future {
-                    getManga(mangaId)
+                    getManga(mangaId, onlineFetch)
                 }
             )
         }
@@ -249,7 +256,10 @@ object JavalinSetup {
         // get chapter list when showing a manga
         app.get("/api/v1/manga/:mangaId/chapters") { ctx ->
             val mangaId = ctx.pathParam("mangaId").toInt()
-            ctx.json(future { getChapterList(mangaId) })
+
+            val onlineFetch = ctx.queryParam("onlineFetch", "false").toBoolean()
+
+            ctx.json(future { getChapterList(mangaId, onlineFetch) })
         }
 
         // used to display a chapter, get a chapter in order to show it's pages
@@ -259,6 +269,22 @@ object JavalinSetup {
             ctx.json(future { getChapter(chapterIndex, mangaId) })
         }
 
+        // used to modify a chapter's parameters
+        app.patch("/api/v1/manga/:mangaId/chapter/:chapterIndex") { ctx ->
+            val chapterIndex = ctx.pathParam("chapterIndex").toInt()
+            val mangaId = ctx.pathParam("mangaId").toInt()
+
+            val read = ctx.formParam("read")?.toBoolean()
+            val bookmarked = ctx.formParam("bookmarked")?.toBoolean()
+            val markPrevRead = ctx.formParam("markPrevRead")?.toBoolean()
+            val lastPageRead = ctx.formParam("lastPageRead")?.toInt()
+
+            modifyChapter(mangaId, chapterIndex, read, bookmarked, markPrevRead, lastPageRead)
+
+            ctx.status(200)
+        }
+
+        // get page at index "index"
         app.get("/api/v1/manga/:mangaId/chapter/:chapterIndex/page/:index") { ctx ->
             val mangaId = ctx.pathParam("mangaId").toInt()
             val chapterIndex = ctx.pathParam("chapterIndex").toInt()
@@ -273,7 +299,7 @@ object JavalinSetup {
             )
         }
 
-        // global search
+        // global search, Not implemented yet
         app.get("/api/v1/search/:searchTerm") { ctx ->
             val searchTerm = ctx.pathParam("searchTerm")
             ctx.json(sourceGlobalSearch(searchTerm))

server/src/main/kotlin/ir/armor/tachidesk/server/ServerConfig.kt

@@ -21,7 +21,7 @@ class ServerConfig(config: Config) : ConfigModule(config) {
     val socksProxyPort: String by config
 
     // misc
-    val debugLogsEnabled: Boolean by config
+    val debugLogsEnabled: Boolean = System.getProperty("ir.armor.tachidesk.debugLogsEnabled", config.getString("debugLogsEnabled")).toBoolean()
     val systemTrayEnabled: Boolean by config
     val initialOpenInBrowserEnabled: Boolean by config
 

server/src/main/kotlin/ir/armor/tachidesk/server/ServerSetup.kt

@@ -9,7 +9,6 @@ package ir.armor.tachidesk.server
 
 import ch.qos.logback.classic.Level
 import eu.kanade.tachiyomi.App
-import ir.armor.tachidesk.Main
 import ir.armor.tachidesk.model.database.databaseUp
 import ir.armor.tachidesk.server.util.systemTray
 import mu.KotlinLogging
@@ -81,7 +80,7 @@ fun applicationSetup() {
     try {
         val dataConfFile = File("${applicationDirs.dataRoot}/server.conf")
         if (!dataConfFile.exists()) {
-            Main::class.java.getResourceAsStream("/server-reference.conf").use { input ->
+            JavalinSetup::class.java.getResourceAsStream("/server-reference.conf").use { input ->
                 dataConfFile.outputStream().use { output ->
                     input.copyTo(output)
                 }
@@ -97,7 +96,7 @@ fun applicationSetup() {
     if (serverConfig.systemTrayEnabled) {
         try {
             systemTray
-        } catch (e: Exception) {
+        } catch (e: Throwable) { // cover both java.lang.Exception and java.lang.Error
             e.printStackTrace()
         }
     }
@@ -109,7 +108,6 @@ fun applicationSetup() {
 
     // socks proxy settings
     if (serverConfig.socksProxyEnabled) {
-//        System.getProperties()["proxySet"] = "true"
         System.getProperties()["socksProxyHost"] = serverConfig.socksProxyHost
         System.getProperties()["socksProxyPort"] = serverConfig.socksProxyPort
         logger.info("Socks Proxy is enabled to ${serverConfig.socksProxyHost}:${serverConfig.socksProxyPort}")

server/src/main/kotlin/ir/armor/tachidesk/server/util/SystemTray.kt

@@ -12,15 +12,15 @@ import dorkbox.systemTray.SystemTray
 import dorkbox.systemTray.SystemTray.TrayType
 import dorkbox.util.CacheUtil
 import dorkbox.util.Desktop
-import ir.armor.tachidesk.Main
 import ir.armor.tachidesk.server.BuildConfig
+import ir.armor.tachidesk.server.ServerConfig
 import ir.armor.tachidesk.server.serverConfig
 import kotlin.system.exitProcess
 
 fun openInBrowser() {
     try {
         Desktop.browseURL("http://127.0.0.1:4567")
-    } catch (e: Exception) {
+    } catch (e: Throwable) { // cover both java.lang.Exception and java.lang.Error
         e.printStackTrace()
     }
 }
@@ -45,11 +45,11 @@ fun systemTray(): SystemTray? {
             }
         )
 
-        val icon = Main::class.java.getResource("/icon/faviconlogo.png")
+        val icon = ServerConfig::class.java.getResource("/icon/faviconlogo.png")
 
-//    systemTray.setTooltip("Tachidesk")
+        // systemTray.setTooltip("Tachidesk")
         systemTray.setImage(icon)
-//    systemTray.status = "No Mail"
+        // systemTray.status = "No Mail"
 
         mainMenu.add(
             MenuItem("Quit") {

webUI/react/package.json

@@ -3,21 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.2",
+    "@fontsource/roboto": "^4.3.0",
+    "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.11.4",
+    "@material-ui/lab": "^4.0.0-alpha.58",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/react-lazyload": "^3.1.0",
     "axios": "^0.21.1",
     "file-selector": "^0.2.4",
-    "fontsource-roboto": "^4.0.0",
+    "react": "^17.0.2",
-    "react": "^17.0.1",
     "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-lazyload": "^3.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "4.0.3",
+    "react-virtuoso": "^1.8.6",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
@@ -39,17 +37,18 @@
     ]
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^17.0.2",
-    "@types/react-router-dom": "^5.1.6",
+    "@types/react-lazyload": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.11.0",
+    "@types/react-router-dom": "^5.1.7",
-    "@typescript-eslint/parser": "4.11.0",
+    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "eslint": "^7.16.0",
+    "@typescript-eslint/parser": "4.23.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint": "^7.26.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "typescript": "^4.1.0"
+    "typescript": "^4.2.4"
   }
 }

webUI/react/src/App.tsx

@@ -13,7 +13,7 @@ import { Container } from '@material-ui/core';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-import NavBar from './components/NavBar';
+import NavBar from './components/navbar/NavBar';
 import Sources from './screens/Sources';
 import Extensions from './screens/Extensions';
 import SourceMangas from './screens/SourceMangas';

webUI/react/src/components/ChapterCard.tsx

@@ -7,12 +7,17 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Typography from '@material-ui/core/Typography';
 import { Link, useHistory } from 'react-router-dom';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import BookmarkIcon from '@material-ui/icons/Bookmark';
+import client from '../util/client';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -21,6 +26,9 @@ const useStyles = makeStyles((theme) => ({
         alignItems: 'center',
         padding: 16,
     },
+    read: {
+        backgroundColor: theme.palette.type === 'dark' ? '#353535' : '#f0f0f0',
+    },
     bullet: {
         display: 'inline-block',
         margin: '0 2px',
@@ -42,46 +50,90 @@ const useStyles = makeStyles((theme) => ({
 
 interface IProps{
     chapter: IChapter
+    triggerChaptersUpdate: () => void
 }
 
 export default function ChapterCard(props: IProps) {
     const classes = useStyles();
     const history = useHistory();
-    const { chapter } = props;
+    const theme = useTheme();
+    const { chapter, triggerChaptersUpdate } = props;
 
-    const dateStr = chapter.date_upload && new Date(chapter.date_upload).toISOString().slice(0, 10);
+    const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toISOString().slice(0, 10);
+
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const sendChange = (key: string, value: any) => {
+        handleClose();
+
+        const formData = new FormData();
+        formData.append(key, value);
+        client.patch(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`, formData)
+            .then(() => triggerChaptersUpdate());
+    };
 
     return (
         <>
             <li>
                 <Card>
-                    <CardContent className={classes.root}>
+                    <CardContent className={`${classes.root} ${chapter.read && classes.read}`}>
-                        <div style={{ display: 'flex' }}>
-                            <div style={{ display: 'flex', flexDirection: 'column' }}>
-                                <Typography variant="h5" component="h2">
-                                    {chapter.name}
-                                    {chapter.chapter_number > 0 && ` : ${chapter.chapter_number}`}
-                                </Typography>
-                                <Typography variant="caption" display="block" gutterBottom>
-                                    {chapter.scanlator}
-                                    {chapter.scanlator && ' '}
-                                    {dateStr}
-                                </Typography>
-                            </div>
-                        </div>
                         <Link
-                            to={`/manga/${chapter.mangaId}/chapter/${chapter.chapterIndex}`}
+                            to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
-                            style={{ textDecoration: 'none' }}
+                            style={{
+                                textDecoration: 'none',
+                                color: theme.palette.text.primary,
+                            }}
                         >
-                            <Button
+                            <div style={{ display: 'flex' }}>
-                                variant="outlined"
+                                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                                style={{ marginLeft: 20 }}
+                                    <Typography variant="h5" component="h2">
-                            >
+                                        <span style={{ color: theme.palette.primary.dark }}>
-                                open
+                                            {chapter.bookmarked && <BookmarkIcon />}
-
+                                        </span>
-                            </Button>
+                                        {chapter.name}
+                                        {chapter.chapterNumber > 0 && ` : ${chapter.chapterNumber}`}
+                                    </Typography>
+                                    <Typography variant="caption" display="block" gutterBottom>
+                                        {chapter.scanlator}
+                                        {chapter.scanlator && ' '}
+                                        {dateStr}
+                                    </Typography>
+                                </div>
+                            </div>
                         </Link>
 
+                        <IconButton aria-label="more" onClick={handleClick}>
+                            <MoreVertIcon />
+                        </IconButton>
+                        <Menu
+                            anchorEl={anchorEl}
+                            keepMounted
+                            open={Boolean(anchorEl)}
+                            onClose={handleClose}
+                        >
+                            {/* <MenuItem onClick={handleClose}>Download</MenuItem> */}
+                            <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
+                                {chapter.bookmarked && 'Remove bookmark'}
+                                {!chapter.bookmarked && 'Bookmark'}
+                            </MenuItem>
+                            <MenuItem onClick={() => sendChange('read', !chapter.read)}>
+                                Mark as
+                                {' '}
+                                {chapter.read && 'unread'}
+                                {!chapter.read && 'read'}
+                            </MenuItem>
+                            <MenuItem onClick={() => sendChange('markPrevRead', true)}>
+                                Mark previous as Read
+                            </MenuItem>
+                        </Menu>
                     </CardContent>
                 </Card>
             </li>

webUI/react/src/components/ExtensionLangSelect.tsx

@@ -18,6 +18,7 @@ import FilterListIcon from '@material-ui/icons/FilterList';
 import { List, ListItemSecondaryAction, ListItemText } from '@material-ui/core';
 import ListItem from '@material-ui/core/ListItem';
 import { langCodeToName } from '../util/language';
+import cloneObject from '../util/cloneObject';
 
 const useStyles = makeStyles(() => createStyles({
     paper: {
@@ -54,7 +55,7 @@ export default function ExtensionLangSelect(props: IProps) {
         if (checked) {
             setMShownLangs([...mShownLangs, lang]);
         } else {
-            const clone = JSON.parse(JSON.stringify(mShownLangs));
+            const clone = cloneObject(mShownLangs);
             clone.splice(clone.indexOf(lang), 1);
             setMShownLangs(clone);
         }

webUI/react/src/components/MangaDetails.tsx

@@ -198,7 +198,7 @@ export default function MangaDetails(props: IProps) {
             <div className={classes.top}>
                 <div className={classes.leftRight}>
                     <div className={classes.leftSide}>
-                        <img src={serverAddress + manga.thumbnailUrl} alt="Manga Thumbnail" />
+                        <img src={`${serverAddress}${manga.thumbnailUrl}?x=${Math.random()}`} alt="Manga Thumbnail" />
                     </div>
                     <div className={classes.rightSide}>
                         <h1>

webUI/react/src/components/TemporaryDrawer.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles({
 interface IProps {
     drawerOpen: boolean
 
-    setDrawerOpen(state: boolean): void
+    setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {

webUI/react/src/components/Toast.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import Slide, { SlideProps } from '@material-ui/core/Slide';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert, { AlertProps, Color as Severity } from '@material-ui/lab/Alert';
+
+function removeToast(id: string) {
+    const container = document.querySelector(`#${id}`)!!;
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+}
+
+function Transition(props: SlideProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Slide {...props} direction="up" />;
+}
+
+function Alert(props: AlertProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+interface IToastProps{
+    message: string
+    severity: Severity
+}
+
+function Toast(props: IToastProps) {
+    const { message, severity } = props;
+    const [open, setOpen] = React.useState(true);
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <Snackbar
+            open={open}
+            onClose={handleClose}
+            autoHideDuration={3000}
+            TransitionComponent={Transition}
+            message="I love snacks"
+        >
+            <MuiAlert elevation={6} variant="filled" onClose={handleClose} severity={severity}>
+                {message}
+            </MuiAlert>
+        </Snackbar>
+    );
+}
+
+export default function makeToast(message: string, severity: Severity) {
+    const id = Math.floor(Math.random() * 1000);
+    const container = document.createElement('div');
+    container.id = `alert-${id}`;
+
+    document.body.appendChild(container);
+
+    ReactDOM.render(<Toast message={message} severity={severity} />, container);
+
+    setTimeout(() => removeToast(container.id), 3500);
+}

webUI/react/src/components/navbar/NavBar.tsx

@@ -12,9 +12,9 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
-import NavBarContext from '../context/NavbarContext';
+import NavBarContext from '../../context/NavbarContext';
-import DarkTheme from '../context/DarkTheme';
+import DarkTheme from '../../context/DarkTheme';
-import TemporaryDrawer from './TemporaryDrawer';
+import TemporaryDrawer from '../TemporaryDrawer';
 
 const useStyles = makeStyles((theme) => ({
     root: {

webUI/react/src/components/navbar/ReaderNavBar.tsx

@@ -23,13 +23,15 @@ import { Switch } from '@material-ui/core';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import Collapse from '@material-ui/core/Collapse';
 import Button from '@material-ui/core/Button';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import DarkTheme from '../context/DarkTheme';
+import DarkTheme from '../../context/DarkTheme';
-import NavBarContext from '../context/NavbarContext';
+import NavBarContext from '../../context/NavbarContext';
 
 const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
     // main container and root div need to change classes...
@@ -44,7 +46,7 @@ const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
         position: settings.staticNav ? 'sticky' : 'fixed',
         top: 0,
         left: 0,
-        minWidth: '300px',
+        width: '300px',
         height: '100vh',
         overflowY: 'auto',
         backgroundColor: '#0a0b0b',
@@ -137,16 +139,12 @@ const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
     },
 }));
 
-export interface IReaderSettings{
-    staticNav: boolean
-    showPageNumber: boolean
-    continuesPageGap: boolean
-}
-
 export const defaultReaderSettings = () => ({
     staticNav: false,
     showPageNumber: true,
     continuesPageGap: false,
+    loadNextonEnding: false,
+    readerType: 'ContinuesVertical',
 } as IReaderSettings);
 
 interface IProps {
@@ -171,7 +169,7 @@ export default function ReaderNavBar(props: IProps) {
     const [drawerVisible, setDrawerVisible] = useState(false || settings.staticNav);
     const [hideOpenButton, setHideOpenButton] = useState(false);
     const [prevScrollPos, setPrevScrollPos] = useState(0);
-    const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(false);
+    const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true);
 
     const theme = useTheme();
     const classes = useStyles(settings)();
@@ -205,32 +203,31 @@ export default function ReaderNavBar(props: IProps) {
 
     return (
         <>
-            <ClickAwayListener onClickAway={() => (drawerVisible && setDrawerOpen(false))}>
+            <Slide
-                <Slide
+                direction="right"
-                    direction="right"
+                in={drawerOpen}
-                    in={drawerOpen}
+                timeout={200}
-                    timeout={200}
+                appear={false}
-                    appear={false}
+                mountOnEnter
-                    mountOnEnter
+                unmountOnExit
-                    unmountOnExit
+                onEntered={() => setDrawerVisible(true)}
-                    onEntered={() => setDrawerVisible(true)}
+                onExited={() => setDrawerVisible(false)}
-                    onExited={() => setDrawerVisible(false)}
+            >
-                >
+                <div className={classes.root}>
-                    <div className={classes.root}>
+                    <header>
-                        <header>
+                        <IconButton
-                            <IconButton
+                            edge="start"
-                                edge="start"
+                            color="inherit"
-                                color="inherit"
+                            aria-label="menu"
-                                aria-label="menu"
+                            disableRipple
-                                disableRipple
+                            onClick={() => history.push(`/manga/${manga.id}`)}
-                                onClick={() => history.push(`/manga/${manga.id}`)}
+                        >
-                            >
+                            <CloseIcon />
-                                <CloseIcon />
+                        </IconButton>
-                            </IconButton>
+                        <Typography variant="h1">
-                            <Typography variant="h1">
+                            {title}
-                                {title}
+                        </Typography>
-                            </Typography>
+                        {!settings.staticNav
-                            {!settings.staticNav
                         && (
                             <IconButton
                                 edge="start"
@@ -242,74 +239,88 @@ export default function ReaderNavBar(props: IProps) {
                                 <KeyboardArrowLeftIcon />
                             </IconButton>
                         ) }
-                        </header>
+                    </header>
-                        <ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
+                    <ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
-                            <ListItemText primary="Reader Settings" />
+                        <ListItemText primary="Reader Settings" />
-                            <ListItemSecondaryAction>
+                        <ListItemSecondaryAction>
-                                <IconButton
+                            <IconButton
-                                    edge="start"
+                                edge="start"
-                                    color="inherit"
+                                color="inherit"
-                                    aria-label="menu"
+                                aria-label="menu"
-                                    disableRipple
+                                disableRipple
-                                    disableFocusRipple
+                                disableFocusRipple
-                                    onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)}
+                                onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)}
+                            >
+                                {settingsCollapseOpen && <KeyboardArrowUpIcon />}
+                                {!settingsCollapseOpen && <KeyboardArrowDownIcon />}
+                            </IconButton>
+                        </ListItemSecondaryAction>
+                    </ListItem>
+                    <Collapse in={settingsCollapseOpen} timeout="auto" unmountOnExit>
+                        <List>
+                            <ListItem>
+                                <ListItemText primary="Static Navigation" />
+                                <ListItemSecondaryAction>
+                                    <Switch
+                                        edge="end"
+                                        checked={settings.staticNav}
+                                        onChange={(e) => setSettingValue('staticNav', e.target.checked)}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <ListItem>
+                                <ListItemText primary="Show page number" />
+                                <ListItemSecondaryAction>
+                                    <Switch
+                                        edge="end"
+                                        checked={settings.showPageNumber}
+                                        onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <ListItem>
+                                <ListItemText primary="Load next chapter at ending" />
+                                <ListItemSecondaryAction>
+                                    <Switch
+                                        edge="end"
+                                        checked={settings.loadNextonEnding}
+                                        onChange={(e) => setSettingValue('loadNextonEnding', e.target.checked)}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <ListItem>
+                                <ListItemText primary="Reader Type" />
+                                <Select
+                                    value={settings.readerType}
+                                    onChange={(e) => setSettingValue('readerType', e.target.value)}
                                 >
-                                    {settingsCollapseOpen && <KeyboardArrowUpIcon />}
+                                    <MenuItem value="SingleLTR">Left to right</MenuItem>
-                                    {!settingsCollapseOpen && <KeyboardArrowDownIcon />}
+                                    <MenuItem value="SingleRTL">Right to left(WIP)</MenuItem>
-                                </IconButton>
+                                    <MenuItem value="SingleVertical">Vertical(WIP)</MenuItem>
-                            </ListItemSecondaryAction>
+                                    <MenuItem value="Webtoon">Webtoon</MenuItem>
-                        </ListItem>
+                                    <MenuItem value="ContinuesVertical">Continues Vertical</MenuItem>
-                        <Collapse in={settingsCollapseOpen} timeout="auto" unmountOnExit>
+                                    <MenuItem value="ContinuesHorizontal">Horizontal(WIP)</MenuItem>
-                            <List>
+                                </Select>
-                                <ListItem>
+                            </ListItem>
-                                    <ListItemText primary="Static Navigation" />
+                        </List>
-                                    <ListItemSecondaryAction>
+                    </Collapse>
-                                        <Switch
+                    <hr />
-                                            edge="end"
+                    <div className={classes.navigation}>
-                                            checked={settings.staticNav}
+                        <span>
-                                            onChange={(e) => setSettingValue('staticNav', e.target.checked)}
+                            Currently on page
-                                        />
+                            {' '}
-                                    </ListItemSecondaryAction>
+                            {curPage + 1}
-                                </ListItem>
+                            {' '}
-                                <ListItem>
+                            of
-                                    <ListItemText primary="Show page number" />
+                            {' '}
-                                    <ListItemSecondaryAction>
+                            {chapter.pageCount}
-                                        <Switch
+                        </span>
-                                            edge="end"
+                        <div className={classes.navigationChapters}>
-                                            checked={settings.showPageNumber}
+                            {chapter.index > 1
-                                            onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
-                                        />
-                                    </ListItemSecondaryAction>
-                                </ListItem>
-                                <ListItem>
-                                    <ListItemText primary="Continues Page gap" />
-                                    <ListItemSecondaryAction>
-                                        <Switch
-                                            edge="end"
-                                            checked={settings.continuesPageGap}
-                                            onChange={(e) => setSettingValue('continuesPageGap', e.target.checked)}
-                                        />
-                                    </ListItemSecondaryAction>
-                                </ListItem>
-                            </List>
-                        </Collapse>
-                        <hr />
-                        <div className={classes.navigation}>
-                            <span>
-                                Currently on page
-                                {' '}
-                                {curPage + 1}
-                                {' '}
-                                of
-                                {' '}
-                                {chapter.pageCount}
-                            </span>
-                            <div className={classes.navigationChapters}>
-                                {chapter.chapterIndex > 1
                             && (
                                 <Link
                                     style={{ gridArea: 'prev' }}
-                                    to={`/manga/${manga.id}/chapter/${chapter.chapterIndex - 1}`}
+                                    to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
                                 >
                                     <Button
                                         variant="outlined"
@@ -317,15 +328,15 @@ export default function ReaderNavBar(props: IProps) {
                                     >
                                         Chapter
                                         {' '}
-                                        {chapter.chapterIndex - 1}
+                                        {chapter.index - 1}
                                     </Button>
                                 </Link>
                             )}
-                                {chapter.chapterIndex < chapter.chapterCount
+                            {chapter.index < chapter.chapterCount
                             && (
                                 <Link
                                     style={{ gridArea: 'next' }}
-                                    to={`/manga/${manga.id}/chapter/${chapter.chapterIndex + 1}`}
+                                    to={`/manga/${manga.id}/chapter/${chapter.index + 1}`}
                                 >
                                     <Button
                                         variant="outlined"
@@ -333,15 +344,14 @@ export default function ReaderNavBar(props: IProps) {
                                     >
                                         Chapter
                                         {' '}
-                                        {chapter.chapterIndex + 1}
+                                        {chapter.index + 1}
                                     </Button>
                                 </Link>
                             )}
-                            </div>
                         </div>
                     </div>
-                </Slide>
+                </div>
-            </ClickAwayListener>
+            </Slide>
             <Zoom in={!drawerOpen}>
                 <Fade in={!hideOpenButton}>
                     <IconButton

webUI/react/src/components/reader/Page.tsx

@@ -11,23 +11,26 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useEffect, useRef, useState } from 'react';
 import LazyLoad from 'react-lazyload';
-import { IReaderSettings } from './ReaderNavBar';
 
 const useStyles = (settings: IReaderSettings) => makeStyles({
     loading: {
         margin: '100px auto',
         height: '100vh',
+        width: '100vw',
     },
     loadingImage: {
-        padding: settings.staticNav ? 'calc(50vh - 40px) calc(50vw - 340px)' : 'calc(50vh - 40px) calc(50vw - 40px)',
         height: '100vh',
-        width: '200px',
+        width: '70vw',
+        padding: '50px calc(50% - 20px)',
         backgroundColor: '#525252',
         marginBottom: 10,
     },
     image: {
         display: 'block',
-        marginBottom: settings.continuesPageGap ? '15px' : 0,
+        marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
+        minWidth: '50vw',
+        width: '100%',
+        maxWidth: '100%',
     },
 });
 
@@ -73,7 +76,7 @@ function LazyImage(props: IProps) {
 
     if (imageSrc.length === 0) {
         return (
-            <div className={classes.loadingImage}>
+            <div className={`${classes.image} ${classes.loadingImage}`}>
                 <CircularProgress thickness={5} />
             </div>
         );
@@ -85,7 +88,6 @@ function LazyImage(props: IProps) {
             ref={ref}
             src={imageSrc}
             alt={`Page #${index}`}
-            style={{ width: '100%' }}
         />
     );
 }
@@ -98,22 +100,12 @@ export default function Page(props: IProps) {
 
     return (
         <div style={{ margin: '0 auto' }}>
-            <LazyLoad
+            <LazyImage
-                offset={window.innerHeight}
+                src={src}
-                placeholder={(
+                index={index}
-                    <div className={classes.loading}>
+                setCurPage={setCurPage}
-                        <CircularProgress thickness={5} />
+                settings={settings}
-                    </div>
+            />
-                )}
-                once
-            >
-                <LazyImage
-                    src={src}
-                    index={index}
-                    setCurPage={setCurPage}
-                    settings={settings}
-                />
-            </LazyLoad>
         </div>
     );
 }

webUI/react/src/components/reader/PageNumber.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    pageNumber: {
+        display: settings.showPageNumber ? 'block' : 'none',
+        position: 'fixed',
+        bottom: '50px',
+        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+        width: '50px',
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        borderRadius: '10px',
+    },
+});
+
+interface IProps {
+    settings: IReaderSettings
+    curPage: number
+    pageCount: number
+}
+
+export default function PageNumber(props: IProps) {
+    const { settings, curPage, pageCount } = props;
+    const classes = useStyles(settings)();
+
+    return (
+        <div className={classes.pageNumber}>
+            {`${curPage + 1} / ${pageCount}`}
+        </div>
+    );
+}

webUI/react/src/components/reader/pager/HorizontalPager.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import Page from '../Page';
+
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+        height: '100vh',
+        overflowX: 'scroll',
+    },
+});
+
+interface IProps {
+    pages: Array<IReaderPage>
+    setCurPage: React.Dispatch<React.SetStateAction<number>>
+    settings: IReaderSettings
+}
+
+export default function HorizontalPager(props: IProps) {
+    const { pages, settings, setCurPage } = props;
+
+    const classes = useStyles();
+
+    return (
+        <div className={classes.reader}>
+            {
+                pages.map((page) => (
+                    <Page
+                        key={page.index}
+                        index={page.index}
+                        src={page.src}
+                        setCurPage={setCurPage}
+                        settings={settings}
+                    />
+                ))
+            }
+        </div>
+    );
+}

webUI/react/src/components/reader/pager/PagedPager.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useEffect, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
+import Page from '../Page';
+
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+        height: '100vh',
+    },
+});
+
+export default function PagedReader(props: IReaderProps) {
+    const {
+        pages, settings, setCurPage, curPage, manga, chapter,
+    } = props;
+
+    const classes = useStyles();
+    const history = useHistory();
+
+    const pageRef = useRef<HTMLDivElement>(null);
+
+    function nextPage() {
+        if (curPage < pages.length - 1) {
+            setCurPage(curPage + 1);
+        } else if (settings.loadNextonEnding) {
+            history.push(`/manga/${manga.id}/chapter/${chapter.index + 1}`);
+        }
+    }
+
+    function prevPage() {
+        if (curPage > 0) { setCurPage(curPage - 1); }
+    }
+
+    function keyboardControl(e:KeyboardEvent) {
+        switch (e.key) {
+            case 'ArrowRight':
+                nextPage();
+                break;
+            case 'ArrowLeft':
+                prevPage();
+                break;
+            default:
+                break;
+        }
+    }
+
+    function clickControl(e:MouseEvent) {
+        if (e.clientX > window.innerWidth / 2) {
+            nextPage();
+        } else {
+            prevPage();
+        }
+    }
+
+    useEffect(() => {
+        document.addEventListener('keyup', keyboardControl, false);
+        pageRef.current?.addEventListener('click', clickControl);
+
+        return () => {
+            document.removeEventListener('keyup', keyboardControl);
+            pageRef.current?.removeEventListener('click', clickControl);
+        };
+    }, [curPage, pageRef]);
+
+    return (
+        <div ref={pageRef} className={classes.reader}>
+            <Page
+                key={curPage}
+                index={curPage}
+                src={pages[curPage].src}
+                setCurPage={setCurPage}
+                settings={settings}
+            />
+        </div>
+    );
+}

webUI/react/src/components/reader/pager/VerticalPager.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import Page from '../Page';
+
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+    },
+});
+
+export default function VerticalReader(props: IReaderProps) {
+    const {
+        pages, settings, setCurPage, curPage, manga, chapter,
+    } = props;
+
+    const classes = useStyles();
+    const history = useHistory();
+
+    const handleLoadNextonEnding = () => {
+        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+            setCurPage(0);
+            history.push(`/manga/${manga.id}/chapter/${chapter.index + 1}`);
+        }
+    };
+    useEffect(() => {
+        if (settings.loadNextonEnding) { window.addEventListener('scroll', handleLoadNextonEnding); }
+
+        return () => {
+            window.removeEventListener('scroll', handleLoadNextonEnding);
+        };
+    }, []);
+
+    return (
+        <div className={classes.reader}>
+            {
+                pages.map((page) => (
+                    <Page
+                        key={page.index}
+                        index={page.index}
+                        src={page.src}
+                        setCurPage={setCurPage}
+                        settings={settings}
+                    />
+                ))
+            }
+        </div>
+    );
+}

webUI/react/src/index.tsx

@@ -10,7 +10,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';
 // roboto font
-import 'fontsource-roboto';
+import '@fontsource/roboto';
 
 ReactDOM.render(
     <React.StrictMode>

webUI/react/src/screens/Library.tsx

@@ -10,6 +10,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import MangaGrid from '../components/MangaGrid';
 import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
+import cloneObject from '../util/cloneObject';
 
 interface IMangaCategory {
     category: ICategory
@@ -98,7 +99,7 @@ export default function Library() {
                 client.get(`/api/v1/category/${tab.category.id}`)
                     .then((response) => response.data)
                     .then((data: IManga[]) => {
-                        const tabsClone = JSON.parse(JSON.stringify(tabs));
+                        const tabsClone = cloneObject(tabs);
                         tabsClone[index].mangas = data;
                         tabsClone[index].isFetched = true;
 

webUI/react/src/screens/Manga.tsx

@@ -7,14 +7,15 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useEffect, useState, useContext } from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
 import { useParams } from 'react-router-dom';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import { Virtuoso } from 'react-virtuoso';
 import ChapterCard from '../components/ChapterCard';
 import MangaDetails from '../components/MangaDetails';
 import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 import LoadingPlaceholder from '../components/LoadingPlaceholder';
+import makeToast from '../components/Toast';
 
 const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -26,6 +27,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     chapters: {
         listStyle: 'none',
         padding: 0,
+        width: '100vw',
+        minHeight: '200px',
         [theme.breakpoints.up('md')]: {
             width: '50vw',
             height: 'calc(100vh - 64px)',
@@ -43,40 +46,47 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export default function Manga() {
     const classes = useStyles();
+    const theme = useTheme();
 
     const { setTitle } = useContext(NavbarContext);
     useEffect(() => { setTitle('Manga'); }, []); // delegate setting topbar action to MangaDetails
 
-    const { id } = useParams<{id: string}>();
+    const { id } = useParams<{ id: string }>();
 
     const [manga, setManga] = useState<IManga>();
     const [chapters, setChapters] = useState<IChapter[]>([]);
+    const [fetchedChapters, setFetchedChapters] = useState(false);
+    const [noChaptersFound, setNoChaptersFound] = useState(false);
+    const [chapterUpdateTriggerer, setChapterUpdateTriggerer] = useState(0);
+
+    function triggerChaptersUpdate() {
+        setChapterUpdateTriggerer(chapterUpdateTriggerer + 1);
+    }
 
     useEffect(() => {
-        client.get(`/api/v1/manga/${id}/`)
+        if (manga === undefined || !manga.freshData) {
-            .then((response) => response.data)
+            client.get(`/api/v1/manga/${id}/?onlineFetch=${manga !== undefined}`)
-            .then((data: IManga) => {
+                .then((response) => response.data)
-                setManga(data);
+                .then((data: IManga) => {
-                setTitle(data.title);
+                    setManga(data);
-            });
+                    setTitle(data.title);
-    }, []);
+                });
+        }
+    }, [manga]);
 
     useEffect(() => {
-        client.get(`/api/v1/manga/${id}/chapters`)
+        const shouldFetchOnline = fetchedChapters && chapterUpdateTriggerer === 0;
+        client.get(`/api/v1/manga/${id}/chapters?onlineFetch=${shouldFetchOnline}`)
             .then((response) => response.data)
-            .then((data) => setChapters(data));
+            .then((data) => {
-    }, []);
+                if (data.length === 0 && fetchedChapters) {
-
+                    makeToast('No chapters found', 'warning');
-    const chapterCards = (
+                    setNoChaptersFound(true);
-        <LoadingPlaceholder
+                }
-            shouldRender={chapters.length > 0}
+                setChapters(data);
-        >
+            })
-            <ol className={classes.chapters}>
+            .then(() => setFetchedChapters(true));
-                {chapters.map((chapter) => (<ChapterCard chapter={chapter} />))}
+    }, [chapters.length, fetchedChapters, chapterUpdateTriggerer]);
-            </ol>
-        </LoadingPlaceholder>
-
-    );
 
     return (
         <div className={classes.root}>
@@ -85,7 +95,27 @@ export default function Manga() {
                 component={MangaDetails}
                 componentProps={{ manga }}
             />
-            {chapterCards}
+
+            <LoadingPlaceholder
+                shouldRender={chapters.length > 0 || noChaptersFound}
+            >
+                <Virtuoso
+                    style={{ // override Virtuoso default values and set them with class
+                        height: 'undefined',
+                    }}
+                    className={classes.chapters}
+                    totalCount={chapters.length}
+                    itemContent={(index:number) => (
+                        <ChapterCard
+                            chapter={chapters[index]}
+                            triggerChaptersUpdate={triggerChaptersUpdate}
+                        />
+                    )}
+                    useWindowScroll={window.innerWidth < 960}
+                    overscan={window.innerHeight * 0.5}
+                />
+            </LoadingPlaceholder>
+
         </div>
     );
 }

webUI/react/src/screens/Reader.tsx

@@ -10,38 +10,54 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import Page from '../components/Page';
+import HorizontalPager from '../components/reader/pager/HorizontalPager';
-import ReaderNavBar, { defaultReaderSettings, IReaderSettings } from '../components/ReaderNavBar';
+import Page from '../components/reader/Page';
+import PageNumber from '../components/reader/PageNumber';
+import WebtoonPager from '../components/reader/pager/PagedPager';
+import VerticalPager from '../components/reader/pager/VerticalPager';
+import ReaderNavBar, { defaultReaderSettings } from '../components/navbar/ReaderNavBar';
 import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 import useLocalStorage from '../util/useLocalStorage';
+import cloneObject from '../util/cloneObject';
 
 const useStyles = (settings: IReaderSettings) => makeStyles({
-    reader: {
+    root: {
-        display: 'flex',
+        width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        margin: '0 auto',
     },
 
     loading: {
         margin: '50px auto',
     },
-
-    pageNumber: {
-        display: settings.showPageNumber ? 'block' : 'none',
-        position: 'fixed',
-        bottom: '50px',
-        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-        width: '50px',
-        textAlign: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        borderRadius: '10px',
-    },
 });
 
+const getReaderComponent = (readerType: ReaderType) => {
+    switch (readerType) {
+        case 'ContinuesVertical':
+            return VerticalPager;
+            break;
+        case 'Webtoon':
+            return VerticalPager;
+            break;
+        case 'SingleVertical':
+            return WebtoonPager;
+            break;
+        case 'SingleRTL':
+            return WebtoonPager;
+            break;
+        case 'SingleLTR':
+            return WebtoonPager;
+            break;
+        case 'ContinuesHorizontal':
+            return HorizontalPager;
+        default:
+            return VerticalPager;
+            break;
+    }
+};
+
 const range = (n:number) => Array.from({ length: n }, (value, key) => key);
-const initialChapter = () => ({ pageCount: -1, chapterIndex: -1, chapterCount: 0 });
+const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 });
 
 export default function Reader() {
     const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
@@ -50,13 +66,26 @@ export default function Reader() {
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
 
-    const { chapterIndex, mangaId } = useParams<{chapterIndex: string, mangaId: string}>();
+    const { chapterIndex, mangaId } = useParams<{ chapterIndex: string, mangaId: string }>();
     const [manga, setManga] = useState<IMangaCard | IManga>({ id: +mangaId, title: '', thumbnailUrl: '' });
     const [chapter, setChapter] = useState<IChapter | IPartialChpter>(initialChapter());
     const [curPage, setCurPage] = useState<number>(0);
-
     const { setOverride, setTitle } = useContext(NavbarContext);
     useEffect(() => {
+        // make sure settings has all the keys
+        const settingsClone = cloneObject(settings) as any;
+        const defualtSettings = defaultReaderSettings();
+        let shouldUpdateSettings = false;
+        Object.keys(defualtSettings).forEach((key) => {
+            const keyOf = key as keyof IReaderSettings;
+            if (settings[keyOf] === undefined) {
+                settingsClone[keyOf] = defualtSettings[keyOf];
+                shouldUpdateSettings = true;
+            }
+        });
+        if (shouldUpdateSettings) { setSettings(settingsClone); }
+
+        // set the custom navbar
         setOverride(
             {
                 status: true,
@@ -88,6 +117,7 @@ export default function Reader() {
 
     useEffect(() => {
         setChapter(initialChapter);
+        setCurPage(0);
         client.get(`/api/v1/manga/${mangaId}/chapter/${chapterIndex}`)
             .then((response) => response.data)
             .then((data:IChapter) => {
@@ -102,20 +132,30 @@ export default function Reader() {
             </div>
         );
     }
+
+    const pages = range(chapter.pageCount).map((index) => ({
+        index,
+        src: `${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`,
+    }));
+
+    const ReaderComponent = getReaderComponent(settings.readerType);
+
     return (
-        <div className={classes.reader}>
+        <div className={classes.root}>
-            <div className={classes.pageNumber}>
+            <PageNumber
-                {`${curPage + 1} / ${chapter.pageCount}`}
+                settings={settings}
-            </div>
+                curPage={curPage}
-            {range(chapter.pageCount).map((index) => (
+                pageCount={chapter.pageCount}
-                <Page
+            />
-                    key={index}
+            <ReaderComponent
-                    index={index}
+                pages={pages}
-                    src={`${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`}
+                pageCount={chapter.pageCount}
-                    setCurPage={setCurPage}
+                setCurPage={setCurPage}
-                    settings={settings}
+                curPage={curPage}
-                />
+                settings={settings}
-            ))}
+                manga={manga}
+                chapter={chapter}
+            />
         </div>
     );
 }

webUI/react/src/screens/SearchSingle.tsx

@@ -27,7 +27,7 @@ export default function SearchSingle() {
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => { setTitle('Search'); setAction(<></>); }, []);
 
-    const { sourceId } = useParams<{sourceId: string}>();
+    const { sourceId } = useParams<{ sourceId: string }>();
     const classes = useStyles();
     const [error, setError] = useState<boolean>(false);
     const [mangas, setMangas] = useState<IMangaCard[]>([]);

webUI/react/src/screens/SourceMangas.tsx

@@ -15,7 +15,7 @@ export default function SourceMangas(props: { popular: boolean }) {
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => { setTitle('Source'); setAction(<></>); }, []);
 
-    const { sourceId } = useParams<{sourceId: string}>();
+    const { sourceId } = useParams<{ sourceId: string }>();
     const [mangas, setMangas] = useState<IMangaCard[]>([]);
     const [hasNextPage, setHasNextPage] = useState<boolean>(false);
     const [lastPageNum, setLastPageNum] = useState<number>(1);

webUI/react/src/typings.d.ts

@@ -50,24 +50,29 @@ interface IManga {
 
     inLibrary: boolean
     source: ISource
+
+    freshData: boolean
 }
 
 interface IChapter {
     id: number
     url: string
     name: string
-    date_upload: number
+    uploadDate: number
-    chapter_number: number
+    chapterNumber: number
     scanlator: String
     mangaId: number
-    chapterIndex: number
+    read: boolean
+    bookmarked: boolean
+    lastPageRead: number
+    index: number
     chapterCount: number
     pageCount: number
 }
 
 interface IPartialChpter {
     pageCount: number
-    chapterIndex: number
+    index: number
     chapterCount: number
 }
 
@@ -82,3 +87,33 @@ interface INavbarOverride {
     status: boolean
     value: any
 }
+
+type ReaderType =
+'ContinuesVertical'|
+'Webtoon' |
+'SingleVertical' |
+'SingleRTL' |
+'SingleLTR' |
+'ContinuesHorizontal';
+
+interface IReaderSettings{
+    staticNav: boolean
+    showPageNumber: boolean
+    loadNextonEnding: boolean
+    readerType: ReaderType
+}
+
+interface IReaderPage {
+    index: number
+    src: string
+}
+
+interface IReaderProps {
+    pages: Array<IReaderPage>
+    pageCount: number
+    setCurPage: React.Dispatch<React.SetStateAction<number>>
+    curPage: number
+    settings: IReaderSettings
+    manga: IMangaCard | IManga
+    chapter: IChapter | IPartialChpter
+}

webUI/react/src/util/cloneObject.tsx

@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+export default function cloneObject<T extends object>(obj: T) {
+    return JSON.parse(JSON.stringify(obj)) as T;
+}