fix :huawei touch not working

apps/reader/next.config.js

@@ -43,6 +43,14 @@ const config = {
     locales: ['en-US', 'zh-CN'],
     defaultLocale: 'en-US',
   },
+  async rewrites() {
+    return [
+      {
+        source: '/github/download/:path*',
+        destination: 'https://raw.githubusercontent.com/:path*', // The :path parameter is used here so will not be automatically passed in the query
+      },
+    ]
+  },
   ...(IS_DOCKER && {
     output: 'standalone',
     experimental: {
@@ -55,11 +63,12 @@ const base = withPWA(withTM(withBundleAnalyzer(config)))
 
 const dev = base
 const docker = base
-const prod = withSentryConfig(
-  base,
-  // Make sure adding Sentry options is the last code to run before exporting, to
-  // ensure that your source maps include changes from all other Webpack plugins
-  sentryWebpackPluginOptions,
-)
+// const prod = withSentryConfig(
+//   base,
+//   // Make sure adding Sentry options is the last code to run before exporting, to
+//   // ensure that your source maps include changes from all other Webpack plugins
+//   sentryWebpackPluginOptions,
+// )
+const prod = base
 
 module.exports = IS_DEV ? dev : IS_DOCKER ? docker : prod

apps/reader/src/components/Reader.tsx

@@ -20,14 +20,14 @@ import { navbarState } from '@flow/reader/state'
 import { db } from '../db'
 import { handleFiles } from '../file'
 import {
-  hasSelection,
   useBackground,
   useColorScheme,
   useDisablePinchZooming,
   useMobile,
   useSync,
   useTranslation,
   useTypography,
+  useTouchEvent,
 } from '../hooks'
 import { BookTab, reader, useReaderSnapshot } from '../models'
 import { isTouchScreen } from '../platform'
@@ -336,49 +336,7 @@ function BookPane({ tab, onMouseDown }: BookPaneProps) {
 
   useEventListener(iframe, 'keydown', handleKeyDown(tab))
 
-  useEventListener(iframe, 'touchstart', (e) => {
-    const x0 = e.targetTouches[0]?.clientX ?? 0
-    const y0 = e.targetTouches[0]?.clientY ?? 0
-    const t0 = Date.now()
-
-    if (!iframe) return
-
-    // When selecting text with long tap, `touchend` is not fired,
-    // so instead of use `addEventlistener`, we should use `on*`
-    // to remove the previous listener.
-    iframe.ontouchend = function handleTouchEnd(e: TouchEvent) {
-      iframe.ontouchend = undefined
-      const selection = iframe.getSelection()
-      if (hasSelection(selection)) return
-
-      const x1 = e.changedTouches[0]?.clientX ?? 0
-      const y1 = e.changedTouches[0]?.clientY ?? 0
-      const t1 = Date.now()
-
-      const deltaX = x1 - x0
-      const deltaY = y1 - y0
-      const deltaT = t1 - t0
-
-      const absX = Math.abs(deltaX)
-      const absY = Math.abs(deltaY)
-
-      if (absX < 10) return
-
-      if (absY / absX > 2) {
-        if (deltaT > 100 || absX < 30) {
-          return
-        }
-      }
-
-      if (deltaX > 0) {
-        tab.prev()
-      }
-
-      if (deltaX < 0) {
-        tab.next()
-      }
-    }
-  })
+  useTouchEvent({iframe: iframe, tab: tab});
 
   useDisablePinchZooming(iframe)
 

apps/reader/src/file.ts

@@ -86,14 +86,26 @@ async function toDataUrl(url: string) {
   return readBlob((r) => r.readAsDataURL(buffer))
 }
 
+function proxyGithubUrl(url: string) {
+  if (url.includes('github.com/')) {
+    return url.replace(/^http(s?):\/\/github\.com/, '/github/download').replace('/raw/', '/')
+  }
+
+  if (url.includes('raw.githubusercontent.com/')) {
+    return url.replace('https://raw.githubusercontent.com', '/github/download')
+  }
+
+  return url
+}
+
 export async function fetchBook(url: string) {
-  const filename = /\/([^/]*\.epub)$/i.exec(url)?.[1] ?? ''
+  const filename = decodeURIComponent(/\/([^/]*\.epub)$/i.exec(url)?.[1] ?? '')
   const books = await db?.books.toArray()
   const book = books?.find((b) => b.name === filename)
 
   return (
     book ??
-    fetch(url)
+    fetch(proxyGithubUrl(url))
       .then((res) => res.blob())
       .then((blob) => addBook(new File([blob], filename)))
   )

apps/reader/src/hooks/index.ts

@@ -11,3 +11,4 @@ export * from './useMobile'
 export * from './useTextSelection'
 export * from './useTranslation'
 export * from './useTypography'
+export * from './useTouchEvent'

apps/reader/src/hooks/useTouchEvent.ts

@@ -0,0 +1,69 @@
+import { useEventListener } from '@literal-ui/hooks'
+import { useCallback, useRef } from 'react'
+
+import { AsRef, BookTab } from '../models/reader'
+
+import { hasSelection } from './useTextSelection'
+
+export function useTouchEvent(props: { iframe?: Window & AsRef; tab: BookTab }) {
+  const { iframe, tab } = props;
+  const params = useRef({ x: -1, y: -1, t: 0, expired: false })
+
+  const handleTouchEnd = useCallback(function (e: TouchEvent) {
+    if (!iframe) return
+    iframe.ontouchend = undefined
+    console.log('params:', params.current)
+    const selection = iframe.getSelection()
+
+    if (hasSelection(selection)) return
+    if (params.current.expired) return
+
+    params.current.expired = true
+
+    const x1 = e.changedTouches[0]?.clientX ?? 0
+    const y1 = e.changedTouches[0]?.clientY ?? 0
+    const t1 = Date.now()
+
+    const { x, y, t } = params.current;
+
+    const deltaX = x1 - x
+    const deltaY = y1 - y
+    const deltaT = t1 - t
+
+    const absX = Math.abs(deltaX)
+    const absY = Math.abs(deltaY)
+
+    if (absX < 10) return
+
+    if (absY / absX > 2) {
+      if (deltaT > 100 || absX < 30) {
+        return
+      }
+    }
+
+    if (deltaX > 0) {
+      tab.prev()
+    }
+
+    if (deltaX < 0) {
+      tab.next()
+    }
+  }, [tab, iframe]);
+
+
+  useEventListener(iframe, 'touchstart', (e) => {
+    const x0 = e.targetTouches[0]?.clientX ?? 0
+    const y0 = e.targetTouches[0]?.clientY ?? 0
+    const t0 = Date.now()
+
+    params.current = { x: x0, y: y0, t: t0, expired: false }
+
+    // When selecting text with long tap, `touchend` is not fired,
+    // so instead of use `addEventlistener`, we should use `on*`
+    // to remove the previous listener.
+    if (!iframe) return
+    iframe.ontouchend = handleTouchEnd
+  });
+
+  useEventListener(iframe, 'touchend', handleTouchEnd)
+}

apps/reader/src/models/reader.ts

@@ -74,7 +74,7 @@ class BaseTab {
 }
 
 // https://github.com/pmndrs/valtio/blob/92f3311f7f1a9fe2a22096cd30f9174b860488ed/src/vanilla.ts#L6
-type AsRef = { $$valtioRef: true }
+export type AsRef = { $$valtioRef: true }
 
 export class BookTab extends BaseTab {
   epub?: Book