fix(pwa): stabilize TTS auto page follow

Author: Retsomm

pwa/src/components/Reader.tsx

@@ -1487,31 +1487,33 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
       return
     }
 
-    const highlights = (doc.defaultView as any)?.CSS?.highlights
-    const HighlightCtor = (doc.defaultView as any)?.Highlight
-    if (!highlights || !HighlightCtor) {
-      console.log('[TTS:follow] skip highlight: Custom Highlight API unavailable', { absoluteOffset })
-      return
-    }
-
     ensureTTSHighlightStyle(doc)
     const range = createRangeFromTextOffset(doc, absoluteOffset)
     if (!range) {
       console.log('[TTS:follow] skip highlight: range not found', { absoluteOffset })
+      followTTSRange(null, doc, absoluteOffset, allowAutoFollow)
       return
     }
-    highlights.set(TTS_HIGHLIGHT_ID, new HighlightCtor(range))
+
+    const highlights = (doc.defaultView as any)?.CSS?.highlights
+    const HighlightCtor = (doc.defaultView as any)?.Highlight
+    if (highlights && HighlightCtor) {
+      highlights.set(TTS_HIGHLIGHT_ID, new HighlightCtor(range))
+    } else {
+      console.log('[TTS:follow] Custom Highlight API unavailable, only auto-follow by progress', { absoluteOffset })
+    }
     followTTSRange(range, doc, absoluteOffset, allowAutoFollow)
   }
 
-  const followTTSRange = (range: Range, doc: Document, absoluteOffset: number, allowAutoFollow: boolean) => {
+  const followTTSRange = (range: Range | null, doc: Document, absoluteOffset: number, allowAutoFollow: boolean) => {
     const loc = (renditionRef.current as any)?.currentLocation?.()
     const displayed = loc?.start?.displayed as { page: number; total: number } | undefined
     const currentPage = displayed?.page ?? 1
     const totalPages = Math.max(displayed?.total ?? ttsChapterPageTotalRef.current, 1)
     const textLength = Math.max(ttsChapterTextLengthRef.current, 1)
     const continuousPage = absoluteOffset / textLength * totalPages + 1
     const estimatedPage = Math.min(totalPages, Math.max(1, Math.floor(continuousPage)))
+    const progressShouldAdvance = continuousPage >= currentPage + 0.9
 
     if (!allowAutoFollow) {
       console.log('[TTS:follow] skip next: 初始 highlight 不觸發翻頁', { absoluteOffset, currentPage, estimatedPage, totalPages })
@@ -1533,26 +1535,19 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
       return
     }
 
-    const rect = range.getBoundingClientRect()
-    if (rect.width === 0 && rect.height === 0) {
-      console.log('[TTS:follow] skip next: empty rect')
-      return
-    }
-
     const viewportWidth = doc.documentElement.clientWidth || doc.defaultView?.innerWidth || 0
     const viewportHeight = doc.documentElement.clientHeight || doc.defaultView?.innerHeight || 0
-    if (viewportWidth <= 0 || viewportHeight <= 0) {
-      console.log('[TTS:follow] skip next: invalid viewport', { viewportWidth, viewportHeight })
-      return
-    }
+    const rect = range?.getBoundingClientRect()
+    const hasUsableRect = !!rect && !(rect.width === 0 && rect.height === 0) && viewportWidth > 0 && viewportHeight > 0
 
-    const rectOutside =
+    const rectOutside = hasUsableRect && !!rect && (
       rect.left > viewportWidth * 0.82 ||
       rect.right > viewportWidth * 1.02 ||
       rect.top > viewportHeight * 0.92 ||
       rect.bottom > viewportHeight * 1.08
+    )
 
-    const shouldAdvance = rectOutside && continuousPage >= currentPage + 0.82
+    const shouldAdvance = progressShouldAdvance || (rectOutside && continuousPage >= currentPage + 0.82)
 
     console.log('[TTS:follow] check', {
       displayed,
@@ -1561,9 +1556,11 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
       continuousPage: Number(continuousPage.toFixed(2)),
       currentPage,
       totalPages,
-      rect: { left: Math.round(rect.left), right: Math.round(rect.right), top: Math.round(rect.top), bottom: Math.round(rect.bottom) },
+      rect: rect ? { left: Math.round(rect.left), right: Math.round(rect.right), top: Math.round(rect.top), bottom: Math.round(rect.bottom) } : null,
       viewport: { width: viewportWidth, height: viewportHeight },
+      hasUsableRect,
       rectOutside,
+      progressShouldAdvance,
       shouldAdvance,
     })
 

pwa/src/hooks/useTTS.ts

@@ -143,13 +143,24 @@ const useTTS = () => {
     }
     utterance.onend = () => {
       if (generationRef.current !== generation) return
-      const readChars = textOffsetRef.current + charIndexRef.current
       const totalChars = currentTextRef.current.length
-      const isTruncated = readChars < totalChars - 10  // 若距終點超過10字，視為提前截斷
+      const utteranceEnd = textOffsetRef.current + text.length
+      const boundaryEnd = textOffsetRef.current + charIndexRef.current
+      const readChars = charIndexRef.current > 0 && boundaryEnd < utteranceEnd - 10
+        ? boundaryEnd
+        : utteranceEnd
+      const hasMoreText = readChars < totalChars - 10
+      const isTruncated = charIndexRef.current > 0 && boundaryEnd < utteranceEnd - 10
       console.log(
-        isTruncated ? '[TTS] onend ⚠️ 疑似 iOS 截斷' : '[TTS] onend（正常結束）',
+        hasMoreText ? (isTruncated ? '[TTS] onend ⚠️ 疑似 iOS 截斷，繼續剩餘文字' : '[TTS] onend（區塊結束，繼續下一段）') : '[TTS] onend（正常結束）',
         { generation, charIndex: charIndexRef.current, offset: textOffsetRef.current, readChars, totalChars, remaining: totalChars - readChars }
       )
+      if (hasMoreText) {
+        textOffsetRef.current = readChars
+        charIndexRef.current = 0
+        playFromOffset(readChars)
+        return
+      }
       stopKeepalive()
       playingRef.current = false
       setPlaying(false)
@@ -174,7 +185,7 @@ const useTTS = () => {
           // generation 檢查並呼叫 onEndRef，否則會觸發下一章、再被 recovery 覆蓋造成重複朗讀
           const recoveryGen = ++generationRef.current
           setTimeout(() => {
-            if (playingRef.current && generationRef.current === recoveryGen) createAndPlay(remaining)
+            if (playingRef.current && generationRef.current === recoveryGen) playFromOffset(absolutePos)
           }, 300)
           return
         }
@@ -197,6 +208,19 @@ const useTTS = () => {
     startKeepalive()
   }
 
+  const playFromOffset = (offset: number) => {
+    const safeOffset = Math.max(0, Math.min(offset, currentTextRef.current.length))
+    const remaining = currentTextRef.current.slice(safeOffset)
+    if (!remaining.trim()) {
+      stop()
+      return
+    }
+    const [chunk] = splitTextByLength(remaining)
+    textOffsetRef.current = safeOffset
+    charIndexRef.current = 0
+    createAndPlay(chunk)
+  }
+
   const stop = () => {
     console.log('[TTS] stop() 被呼叫', { generation: generationRef.current })
     generationRef.current++ // 令所有舊 callback 失效
@@ -260,7 +284,7 @@ const useTTS = () => {
 
     textOffsetRef.current = absolutePos
     charIndexRef.current = 0
-    createAndPlay(remaining)
+    playFromOffset(absolutePos)
   }
 
   // 將文本分割為適合 utterance 的區塊（某些行動浏覽器對文字長度有限制）
@@ -310,15 +334,11 @@ const useTTS = () => {
     setPlaying(true)
     setPaused(false)
 
-    // 檢查文本長度，必要時分割
     const chunks = splitTextByLength(text)
     if (chunks.length > 1) {
       console.log('[TTS] 文本過長，已分割為', chunks.length, '個區塊', { totalLength: text.length, maxLength: MAX_UTTERANCE_LENGTH })
-      // 只播放第一個區塊，onEnd 時處理下一個區塊
-      createAndPlay(chunks[0])
-    } else {
-      createAndPlay(text)
     }
+    playFromOffset(0)
   }
 
   // 語速變更：若正在朗讀，從當前位置重啟（不觸發 onEnd、不重置 onBoundary）
@@ -335,7 +355,7 @@ const useTTS = () => {
     textOffsetRef.current = absolutePos
     charIndexRef.current = 0
     // playing 狀態維持 true，直接重建 utterance
-    createAndPlay(remaining)
+    playFromOffset(absolutePos)
   }
 
   const getProgress = () => textOffsetRef.current + charIndexRef.current