Feat: rewrite Reader in vanjs (#1194)

* setup van.js

* scrollbar

* Reader Footer

* move state to reader object

* scroll to previous progress

* image modal

* TTS bubble

* swipe gestures

* binoic reading & remove extra spacing

* tap to scroll

* tap & scroll to move page

* page reader move chapter

* display page in footer

* hide progress bar in page reader mode

* remember postion when switch reader mode

* refactor: move initial scroll out of scrollbar

* scroll bar in page reader mode

* chapter ending content

* fix: tts controller

* fix: tts highlight & stopping

* optional tts

* custom js

* update preview reader

* cleanup

* fix: css

.prettierignore

@@ -1,2 +1,3 @@
 **/node_modules
-android
+android/**/js/van.js
+android/**/js/text-vibe.js

android/app/src/main/assets/css/index.css

@@ -3,7 +3,6 @@ html {
   overflow-x: hidden;
   padding-top: var(--StatusBar-currentHeight);
   word-wrap: break-word;
-  padding: 0;
 }
 
 ::selection {
@@ -19,7 +18,6 @@ html {
 body {
   margin-left: 0;
   margin-right: 0;
-  padding: 0;
   padding-bottom: 40px;
 
   font-size: var(--readerSettings-textSize);
@@ -30,17 +28,23 @@ body {
   font-family: var(--readerSettings-fontFamily);
 }
 
-chapter {
-  width: 100%;
-  display: block;
+body.page-reader { 
+  overflow: hidden;
+  padding: 0;
 }
 
-chapter > * {
-  max-width: 100vw;
+#LNReader-chapter {
   padding-left: var(--readerSettings-padding);
   padding-right: var(--readerSettings-padding);
 }
 
+body.page-reader > #LNReader-chapter{
+  height: calc(90vh);
+  column-width: calc(100vw - var(--readerSettings-padding) * 2);
+  column-gap: calc(var(--readerSettings-padding) * 2);
+  transition: 200ms;
+}
+
 hr {
   margin-top: 20px;
   margin-bottom: 20px;
@@ -82,30 +86,29 @@ td {
   visibility: hidden;
 }
 
-.nextButton,
-.infoText {
+.next-button,
+.info-text {
   margin-left: var(--readerSettings-padding);
   margin-right: var(--readerSettings-padding);
-  width: calc(100% - var(--readerSettings-padding) * 2);
   border-radius: 50px;
   border-width: 1;
   color: var(--theme-onPrimary);
   background-color: var(--theme-primary);
   font-family: var(--readerSettings-fontFamily);
   font-size: 16px;
   border-width: 0;
-  user-select: none;
 }
 
-.nextButton {
+.next-button {
   min-height: 40px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   padding: 0 16px;
+  width: calc(100% - var(--readerSettings-padding) * 2);
 }
 
-.infoText {
+.info-text {
   background-color: transparent;
   text-align: center;
   border: none;
@@ -115,11 +118,6 @@ td {
   padding-bottom: 16px;
 }
 
-.chapterCtn {
-  min-height: var(--chapterCtn-height);
-  margin-bottom: auto;
-}
-
 .d-none {
   display: none;
 }
@@ -159,23 +157,6 @@ td {
   right: unset;
 }
 
-#TTS-Controller {
-  display: block;
-}
-
-#ToolWrapper.horizontal > #TTS-Controller {
-  margin-left: 4px;
-}
-
-#TTS-Controller button {
-  background: var(--theme-surface-0-9);
-  border: 0;
-}
-
-#TTS-Controller svg {
-  fill: var(--theme-onSurface);
-}
-
 #ToolWrapper > #ScrollBar {
   margin-top: 8px;
   width: 2.4rem;
@@ -320,115 +301,11 @@ td {
   text-align: right;
 }
 
-.highlight {
-  color: var(--theme-onSecondary);
+.highlight, .highlight *{
+  color: var(--theme-onSecondary) !important;
   background-color: var(--theme-secondary);
 }
 
-.contextMenu {
-  position: fixed;
-  background: var(--theme-surface-0-9);
-  height: 0;
-  top: var(--top);
-  left: var(--left);
-  overflow: hidden;
-  -webkit-backdrop-filter: blur(1px);
-  backdrop-filter: blur(1px);
-  -webkit-animation: menuAnimation 0.4s 0s both;
-  animation: menuAnimation 0.4s 0s both;
-  transform-origin: left;
-  list-style: none;
-  margin: 4px;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  z-index: 999999999;
-}
-
-.contextMenu-item {
-  padding: 4px;
-}
-
-.contextMenu-button {
-  color: var(--theme-onSurface);
-  background: 0;
-  border: 0;
-  border-radius: 4px;
-  white-space: nowrap;
-  padding: 6px 24px 6px 7px;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  width: 100%;
-  -webkit-animation: menuItemAnimation 0.2s 0s both;
-  animation: menuItemAnimation 0.2s 0s both;
-  font-family: var(--readerSettings-fontFamily);
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: var(--theme-rippleColor);
-}
-
-.contextMenu-button svg {
-  fill: var(--theme-onSurface);
-}
-
-.contextMenu-button span {
-  margin-left: 4px;
-}
-
-@-webkit-keyframes menuAnimation {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-
-  100% {
-    height: var(--height);
-    opacity: 1;
-    border-radius: 8px;
-    transform: scale(1);
-  }
-}
-
-@keyframes menuAnimation {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-
-  100% {
-    height: var(--height);
-    opacity: 1;
-    border-radius: 8px;
-    transform: scale(1);
-  }
-}
-
-@-webkit-keyframes menuItemAnimation {
-  0% {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes menuItemAnimation {
-  0% {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 #Image-Modal {
   position: fixed;
   left: 0;
@@ -450,3 +327,41 @@ td {
   display: block;
   width: 100%;
 }
+
+#TTS-Controller {
+  position: fixed;
+  top: 50%;
+  left: 20px;
+  opacity: 0.5;
+}
+
+#TTS-Controller button {
+  background: var(--theme-surface-0-9);
+  outline: none;
+  border-width: 0;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  padding: 4px;
+  border-radius: 100%;
+  transition: 1s;
+}
+
+#TTS-Controller.active{
+  opacity: 1;
+}
+
+#TTS-Controller.active button {
+  padding: 16px;
+}
+
+#TTS-Controller svg {
+  fill: var(--theme-onSurface);
+  width: 20px;
+  height: 20px;
+}
+
+#TTS-Controller.active svg {
+  width: 24px;
+  height: 24px;
+}