feat(reader): Implement chapter-limited smooth Scroll View

apps/reader/locales/en-US.ts

@@ -33,6 +33,7 @@ export default {
   'typography.page_view': 'Page View',
   'typography.page_view.single_page': 'Single Page',
   'typography.page_view.double_page': 'Double Page',
+  'typography.page_view.scroll': 'Scroll',
   'typography.font_family': 'Font Family',
   'typography.font_size': 'Font Size',
   'typography.font_weight': 'Font Weight',

apps/reader/locales/ja-JP.ts

@@ -33,6 +33,7 @@ export default {
   'typography.page_view': 'ページ表示',
   'typography.page_view.single_page': '片ページ',
   'typography.page_view.double_page': '見開きページ',
+  'typography.page_view.scroll': 'スクロール',
   'typography.font_family': 'フォントファミリー',
   'typography.font_size': 'フォントサイズ',
   'typography.font_weight': 'フォントウェイト',

apps/reader/locales/zh-CN.ts

@@ -33,6 +33,7 @@ export default {
   'typography.page_view': '视图',
   'typography.page_view.single_page': '单页',
   'typography.page_view.double_page': '双页',
+  'typography.page_view.scroll': '滚动',
   'typography.font_family': '字体',
   'typography.font_size': '字号',
   'typography.font_weight': '字重',

apps/reader/src/components/Reader.tsx

@@ -14,8 +14,7 @@ import { useSetRecoilState } from 'recoil'
 import useTilg from 'tilg'
 import { useSnapshot } from 'valtio'
 
-import { RenditionSpread } from '@flow/epubjs/types/rendition'
-import { navbarState } from '@flow/reader/state'
+import { navbarState, PageViewMode } from '@flow/reader/state'
 
 import { db } from '../db'
 import { handleFiles } from '../file'
@@ -46,17 +45,34 @@ import * as pages from './pages'
 function handleKeyDown(tab?: BookTab) {
   return (e: KeyboardEvent) => {
     try {
-      switch (e.code) {
-        case 'ArrowLeft':
-        case 'ArrowUp':
-          tab?.prev()
-          break
-        case 'ArrowRight':
-        case 'ArrowDown':
-          tab?.next()
-          break
-        case 'Space':
-          e.shiftKey ? tab?.prev() : tab?.next()
+      const pageViewMode = tab?.book.configuration?.typography?.pageViewMode;
+
+      if (e.code === 'Space') {
+        e.shiftKey ? tab?.prev() : tab?.next();
+        return;
+      }
+
+      if (pageViewMode === PageViewMode.Scrolled) {
+        switch (e.code) {
+          case 'ArrowLeft':
+            tab?.prev();
+            break;
+          case 'ArrowRight':
+            tab?.next();
+            break;
+        }
+      } else {
+        // Paginated modes
+        switch (e.code) {
+          case 'ArrowLeft':
+          case 'ArrowUp':
+            tab?.prev();
+            break;
+          case 'ArrowRight':
+          case 'ArrowDown':
+            tab?.next();
+            break;
+        }
       }
     } catch (error) {
       // ignore `rendition is undefined` error
@@ -224,6 +240,9 @@ function BookPane({ tab, onMouseDown }: BookPaneProps) {
       // `display: hidden` will lead `rect` to 0
       if (size !== 0 && prevSize.current !== 0) {
         reader.resize()
+      } else if (size !== 0) {
+        // initial render
+        tab.rendition?.resize()
       }
       prevSize.current = size
     })
@@ -259,8 +278,26 @@ function BookPane({ tab, onMouseDown }: BookPaneProps) {
      * then call {@link updateCustomStyle} to update custom style
      * according to the latest layout
      */
-    rendition?.spread(typography.spread ?? RenditionSpread.Auto)
-  }, [typography.spread, rendition])
+    switch (typography.pageViewMode) {
+      case PageViewMode.Scrolled:
+        rendition?.flow('scrolled')
+        rendition?.spread('none') // Spread is not applicable in scrolled mode
+        break
+      case PageViewMode.SinglePage:
+        rendition?.flow('paginated')
+        rendition?.spread('none')
+        break
+      case PageViewMode.DoublePage:
+        rendition?.flow('paginated')
+        rendition?.spread('auto')
+        break
+      case PageViewMode.Auto:
+      default:
+        rendition?.flow('auto')
+        rendition?.spread('auto')
+        break
+    }
+  }, [typography.pageViewMode, rendition])
 
   useEffect(() => applyCustomStyle(), [applyCustomStyle])
 
@@ -331,10 +368,12 @@ function BookPane({ tab, onMouseDown }: BookPaneProps) {
   })
 
   useEventListener(iframe, 'wheel', (e) => {
-    if (e.deltaY < 0) {
-      tab.prev()
-    } else {
-      tab.next()
+    if (typography.pageViewMode !== PageViewMode.Scrolled) {
+      if (e.deltaY < 0) {
+        tab.prev()
+      } else {
+        tab.next()
+      }
     }
   })
 

apps/reader/src/components/viewlets/TypographyView.tsx

@@ -2,13 +2,13 @@ import clsx from 'clsx'
 import { useCallback, useRef, useState } from 'react'
 import { MdAdd, MdRemove } from 'react-icons/md'
 
-import { RenditionSpread } from '@flow/epubjs/types/rendition'
 import { useTranslation } from '@flow/reader/hooks'
 import { reader, useReaderSnapshot } from '@flow/reader/models'
 import {
   defaultSettings,
   TypographyConfiguration,
   useSettings,
+  PageViewMode,
 } from '@flow/reader/state'
 import { keys } from '@flow/reader/utils'
 
@@ -30,7 +30,7 @@ export const TypographyView: React.FC<PaneViewProps> = (props) => {
 
   const [localFonts, setLocalFonts] = useState<string[]>()
 
-  const { fontFamily, fontSize, fontWeight, lineHeight, zoom, spread } =
+  const { fontFamily, fontSize, fontWeight, lineHeight, zoom, pageViewMode } =
     scope === TypographyScope.Book
       ? focusedBookTab?.book.configuration?.typography ?? defaultSettings
       : settings
@@ -102,17 +102,20 @@ export const TypographyView: React.FC<PaneViewProps> = (props) => {
       >
         <Select
           name={t('page_view')}
-          value={spread ?? RenditionSpread.Auto}
+          value={pageViewMode ?? PageViewMode.Auto}
           onChange={(e) => {
-            setTypography('spread', e.target.value as RenditionSpread)
+            setTypography('pageViewMode', e.target.value as PageViewMode)
           }}
         >
-          <option value={RenditionSpread.None}>
+          <option value={PageViewMode.SinglePage}>
             {t('page_view.single_page')}
           </option>
-          <option value={RenditionSpread.Auto}>
+          <option value={PageViewMode.DoublePage}>
             {t('page_view.double_page')}
           </option>
+          <option value={PageViewMode.Scrolled}>
+            {t('page_view.scroll')}
+          </option>
         </Select>
         <TextField
           as="input"

apps/reader/src/state.ts

@@ -3,6 +3,13 @@ import { atom, AtomEffect, useRecoilState } from 'recoil'
 
 import { RenditionSpread } from '@flow/epubjs/types/rendition'
 
+export enum PageViewMode {
+  Auto = 'auto',
+  SinglePage = 'single-page',
+  DoublePage = 'double-page',
+  Scrolled = 'scrolled',
+}
+
 function localStorageEffect<T>(key: string, defaultValue: T): AtomEffect<T> {
   return ({ setSelf, onSet }) => {
     if (IS_SERVER) return
@@ -36,7 +43,7 @@ export interface TypographyConfiguration {
   fontWeight?: number
   fontFamily?: string
   lineHeight?: number
-  spread?: RenditionSpread
+  pageViewMode?: PageViewMode
   zoom?: number
 }