EPUB 电子书转有声书方案设计

/**
 * textSplitter.ts
 * EPUB 有声书文本处理工具
 */

/** 跳过的非正文元素选择器 */
const SKIP_SELECTORS = [
  '[epub|type="pagebreak"]',
  '.page-break',
  '.page-number',
  '.footnote',
  '.endnote',
  'sup.reference',
  '.fn-ref',
]

/** 判断 DOM 元素是否为可朗读的正文 */
export function isReadableElement(el: Element): boolean {
  // 跳过隐藏元素
  if (!(el as HTMLElement).offsetParent && el.tagName !== 'BODY') return false
  // 跳过非正文选择器匹配的元素
  if (SKIP_SELECTORS.some(sel => el.matches(sel) || el.closest(sel))) return false
  // 跳过空元素
  const text = (el.textContent || '').trim()
  if (!text) return false
  // 跳过纯数字（可能是页码）
  if (/^\d{1,4}$/.test(text)) return false
  return true
}

/** 将文本按句子分割（支持中英文混合） */
export function splitSentences(text: string): string[] {
  // 预处理：合并多余空白
  const normalized = text.replace(/\s+/g, ' ').trim()
  if (!normalized) return []

  // 分句正则：匹配常见句子结束标点
  // 中文：。！？； ｜ 英文：. ! ? ; 后跟空格或换行
  // 特殊处理：省略号…… / ... 不在此处分句；引号收尾 »「」』" 算前句
  const SENTENCE_END = /([。！？；]|(?<!\d)\.(?!\d)|[!?;])(?=\s|$|[“”「」『』‘’‚‛""''»«])/g

  const sentences: string[] = []
  let lastIdx = 0
  let match: RegExpExecArray | null

  // 使用 exec 循环以支持全局正则
  const regex = new RegExp(SENTENCE_END.source, 'g')
  while ((match = regex.exec(normalized)) !== null) {
    const endIdx = match.index + match[0].length
    const sentence = normalized.slice(lastIdx, endIdx).trim()
    if (sentence.length >= 2) {
      sentences.push(sentence)
    }
    lastIdx = endIdx
  }

  // 收尾片段
  const tail = normalized.slice(lastIdx).trim()
  if (tail.length >= 2) {
    sentences.push(tail)
  }

  return sentences
}

/** 从 epubjs Rendition 当前视图提取可朗读段落的纯文本序列 */
export function extractReadableText(doc: Document): string[] {
  const paragraphs: string[] = []
  // 遍历块级元素
  const blocks = doc.body.querySelectorAll(
    'p, h1, h2, h3, h4, h5, h6, div, li, td, th, blockquote, pre'
  )
  for (const block of blocks) {
    if (!isReadableElement(block)) continue
    const text = (block.textContent || '').replace(/\s+/g, ' ').trim()
    if (text.length >= 2) {
      paragraphs.push(text)
    }
  }
  return paragraphs
}

/** 完整流程：提取段落 → 逐段分句 → 扁平化为全局句子数组 */
export function extractSentences(doc: Document): SentenceItem[] {
  const paragraphs = extractReadableText(doc)
  const sentences: SentenceItem[] = []
  let globalIdx = 0
  for (let pIdx = 0; pIdx < paragraphs.length; pIdx++) {
    const parts = splitSentences(paragraphs[pIdx]!)
    for (let sIdx = 0; sIdx < parts.length; sIdx++) {
      sentences.push({
        globalIndex: globalIdx++,
        paragraphIndex: pIdx,
        sentenceInParagraph: sIdx,
        text: parts[sIdx]!,
      })
    }
  }
  return sentences
}

export interface SentenceItem {
  globalIndex: number       // 全局唯一序号
  paragraphIndex: number    // 段落序号
  sentenceInParagraph: number // 段内句序号
  text: string              // 纯文本句子
}

/**
 * domMarker.ts
 * EPUB DOM 中的句子标记与高亮管理
 */

const MARK_ATTR = 'data-tts-idx'
const ACTIVE_CLASS = 'tts-sentence-active'
const PLAYED_CLASS = 'tts-sentence-played'

/**
 * 在当前 epubjs 视图中为每个句子包裹 <span> 标记
 * 索引与 AudioSentence.globalIndex 一一对应
 */
export function markSentencesInDOM(
  doc: Document,
  sentences: SentenceItem[]
): void {
  // 先清除旧标记
  clearAllMarks(doc)

  const blocks = doc.body.querySelectorAll(
    'p, h1, h2, h3, h4, h5, h6, div, li, td, th, blockquote, pre'
  )
  const blockList = Array.from(blocks).filter(el => {
    const text = (el.textContent || '').trim()
    return text.length >= 2
  })

  let sentenceIdx = 0
  for (const block of blockList) {
    const text = block.textContent || ''
    const parts = splitSentences(text)

    // 在原 DOM 中查找并包裹每个句子
    for (const part of parts) {
      const wrapper = doc.createElement('span')
      wrapper.setAttribute(MARK_ATTR, String(sentenceIdx))
      // 在原文本中定位并包裹
      if (wrapTextInElement(block, part, wrapper)) {
        sentenceIdx++
      }
    }
  }
}

/**
 * 在容器元素中查找文本子串并用 span 包裹
 * 使用 TreeWalker 遍历文本节点，找到匹配位置后分割替换
 */
function wrapTextInElement(
  container: Element,
  searchText: string,
  wrapper: HTMLSpanElement
): boolean {
  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT)
  const textNodes: Text[] = []
  let node: Text | null
  while ((node = walker.nextNode() as Text | null)) {
    textNodes.push(node)
  }

  // 拼接所有文本以定位
  const fullText = textNodes.map(n => n.textContent || '').join('')
  const idx = fullText.indexOf(searchText)
  if (idx < 0) return false

  // 找到跨越的文本节点并插入 span
  let currentPos = 0
  let startNode: Text | null = null
  let startOffset = 0
  let endNode: Text | null = null
  let endOffset = 0

  for (const tn of textNodes) {
    const len = (tn.textContent || '').length
    if (!startNode && currentPos + len > idx) {
      startNode = tn
      startOffset = idx - currentPos
    }
    if (!endNode && currentPos + len >= idx + searchText.length) {
      endNode = tn
      endOffset = idx + searchText.length - currentPos
      break
    }
    currentPos += len
  }

  if (!startNode || !endNode) return false

  const range = document.createRange()
  range.setStart(startNode, startOffset)
  range.setEnd(endNode, endOffset)
  range.surroundContents(wrapper)
  range.detach()
  return true
}

/** 高亮当前朗读的句子 */
export function highlightSentence(doc: Document, sentenceIdx: number): void {
  // 移除上一个高亮
  const prev = doc.querySelector(`.${ACTIVE_CLASS}`) as HTMLElement | null
  if (prev) {
    prev.classList.remove(ACTIVE_CLASS)
    prev.classList.add(PLAYED_CLASS)
  }

  // 添加新高亮
  const el = doc.querySelector(`[${MARK_ATTR}="${sentenceIdx}"]`) as HTMLElement | null
  if (el) {
    el.classList.add(ACTIVE_CLASS)
  }
}

/** 清除所有标记（还原 DOM） */
export function clearAllMarks(doc: Document): void {
  const marks = doc.querySelectorAll(`[${MARK_ATTR}]`)
  marks.forEach(mark => {
    const parent = mark.parentNode
    if (!parent) return
    while (mark.firstChild) {
      parent.insertBefore(mark.firstChild, mark)
    }
    parent.removeChild(mark)
  })
}

/** 检查指定句子是否在当前视口内 */
export function isSentenceInViewport(
  doc: Document,
  sentenceIdx: number,
  viewerEl: HTMLElement
): boolean {
  const el = doc.querySelector(`[${MARK_ATTR}="${sentenceIdx}"]`)
  if (!el) return true // 未找到元素时不触发翻页
  const rect = el.getBoundingClientRect()
  const viewerRect = viewerEl.getBoundingClientRect()
  // 句子底部超出视口底部 → 需要翻页
  return rect.bottom <= viewerRect.bottom
}

/**
 * useAudiobook.ts
 * 有声书核心调度 Hook
 *
 * 职责：
 * 1. 管理音频队列（预缓冲 + 播放）
 * 2. 协调 TTS 合成 → DOM 高亮 → 自动翻页
 * 3. 进度持久化 + 断点恢复
 */

import { useEffect, useRef, useCallback } from 'react'
import { useAudiobookStore } from '../store/useAudiobookStore'
import {
  extractSentences,
  type SentenceItem,
} from '../utils/textSplitter'
import {
  markSentencesInDOM,
  highlightSentence,
  clearAllMarks,
  isSentenceInViewport,
} from '../utils/domMarker'

const PREBUFFER_SIZE = 5       // 预缓冲句子数
const SAVE_INTERVAL = 5000     // 进度保存间隔（毫秒）

export function useAudiobook(
  rendition: any,              // epubjs Rendition 实例
  book: any,                   // epubjs Book 实例
  viewerRef: React.RefObject<HTMLDivElement>,
  bookPath: string             // EPUB 文件路径
) {
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const saveTimerRef = useRef<ReturnType<typeof setInterval>>()
  const storeRef = useRef(useAudiobookStore.getState())

  // 订阅 store 最新值
  useEffect(() => {
    return useAudiobookStore.subscribe(s => { storeRef.current = s })
  }, [])

  // ── 初始化 / 销毁 audio 元素 ──
  useEffect(() => {
    const audio = new Audio()
    audioRef.current = audio
    return () => {
      audio.pause()
      audioRef.current = null
    }
  }, [])

  // ── 开始朗读当前章节 ──
  const startReading = useCallback(async () => {
    const store = useAudiobookStore.getState()
    const doc = rendition?.getContents()?.[0]?.document as Document | undefined
    if (!doc) return

    // 1. 提取文本 + 分句
    const sentences = extractSentences(doc)
    if (sentences.length === 0) return

    // 2. 标记 DOM
    markSentencesInDOM(doc, sentences)

    // 3. 更新 store
    store.setSentences(sentences)
    store.setIsActive(true)
    store.setIsPlaying(true)

    // 4. 从断点恢复或从头开始
    const progress = store.currentProgress
    const startIdx = progress?.sentenceIndex ?? 0

    // 5. 预缓冲前 N 句
    await prebufferRange(startIdx, Math.min(startIdx + PREBUFFER_SIZE, sentences.length))
  }, [rendition, bookPath])

  // ── 预缓冲指定范围的句子 ──
  const prebufferRange = useCallback(async (fromIdx: number, toIdx: number) => {
    const store = useAudiobookStore.getState()
    const { sentences, voiceEngineId, voiceId, speed } = store

    for (let i = fromIdx; i < toIdx && i < sentences.length; i++) {
      const sentence = sentences[i]
      if (!sentence || sentence.audioStatus !== 'pending') continue

      store.updateSentenceStatus(i, 'synthesizing')

      try {
        // 调用 TTS IPC
        const result = await window.api.tts.speak(sentence.text, {
          engineId: voiceEngineId,
          voiceId: voiceId,
          speed: speed,
        })

        if (result.success && result.filePath) {
          store.addAudioChunk({ sentenceIdx: i, audioUrl: result.filePath, duration: result.duration ?? 0 })
          store.updateSentenceStatus(i, 'ready')
        }
      } catch (e) {
        console.warn(`[Audiobook] 合成句子 ${i} 失败:`, e)
        store.updateSentenceStatus(i, 'failed')
      }
    }
  }, [])

  // ── 播放循环 ──
  const playLoop = useCallback(async () => {
    const audio = audioRef.current
    if (!audio) return

    const store = useAudiobookStore.getState()
    const { sentences, audioQueue } = store

    for (let i = store.currentSentenceIdx; i < sentences.length; i++) {
      // 检查是否需要预缓冲
      const remainingReady = audioQueue.filter(
        c => c.sentenceIdx >= i && c.sentenceIdx < i + PREBUFFER_SIZE
      ).length
      if (remainingReady < 3) {
        prebufferRange(i + PREBUFFER_SIZE - remainingReady, i + PREBUFFER_SIZE)
      }

      // 等待当前句合成完成
      let chunk = audioQueue.find(c => c.sentenceIdx === i)
      while (!chunk) {
        await new Promise(r => setTimeout(r, 200))
        chunk = audioQueue.find(c => c.sentenceIdx === i)
      }

      // 播放
      store.setCurrentSentenceIdx(i)
      await playAudioUrl(audio, chunk.audioUrl, store.speed)

      // 高亮
      const doc = rendition.getContents()?.[0]?.document
      if (doc) {
        highlightSentence(doc, i)

        // 检查自动翻页
        if (viewerRef.current && !isSentenceInViewport(doc, i, viewerRef.current)) {
          await rendition.next()
        }
      }

      // 进度持久化
      store.updateProgress(i)
    }
  }, [rendition, viewerRef, prebufferRange])

  // ── 播放单个音频 URL ──
  const playAudioUrl = useCallback((
    audio: HTMLAudioElement,
    url: string,
    speed: number
  ): Promise<void> => {
    return new Promise((resolve) => {
      audio.src = url
      audio.playbackRate = speed
      audio.onended = () => resolve()
      audio.onerror = () => resolve() // 跳过失败的句子
      audio.play().catch(() => resolve())
    })
  }, [])

  // ── epubjs relocated 事件 → 对新页面重新标记句子 ──
  useEffect(() => {
    if (!rendition) return
    const handler = (loc: any) => {
      const store = useAudiobookStore.getState()
      if (!store.isActive) return

      // 延迟等待 DOM 渲染
      setTimeout(() => {
        const doc = rendition.getContents()?.[0]?.document as Document | undefined
        if (!doc) return

        const sentences = extractSentences(doc)
        markSentencesInDOM(doc, sentences)
        store.appendSentences(sentences)

        // 恢复高亮
        highlightSentence(doc, store.currentSentenceIdx)
      }, 200)
    }
    rendition.on('relocated', handler)
    return () => { rendition.off?.('relocated', handler) }
  }, [rendition])

  // ── 进度定时保存 ──
  useEffect(() => {
    saveTimerRef.current = setInterval(() => {
      const { isActive, currentSentenceIdx, sentences } = useAudiobookStore.getState()
      if (!isActive) return
      persistProgress(currentSentenceIdx)
    }, SAVE_INTERVAL)
    return () => { if (saveTimerRef.current) clearInterval(saveTimerRef.current) }
  }, [])

  return { startReading, playLoop }
}

/** 持久化进度到 SQLite */
async function persistProgress(sentenceIdx: number): Promise<void> {
  const store = useAudiobookStore.getState()
  try {
    await window.api.db.run(
      `INSERT OR REPLACE INTO audiobook_progress
       (book_path, cfi, sentence_index, voice_engine_id, voice_id, speed, updated_at)
       VALUES (?, ?, ?, ?, ?, ?, ?)`,
      [
        store.currentBookPath,
        store.currentCfi,
        sentenceIdx,
        store.voiceEngineId,
        store.voiceId,
        store.speed,
        Date.now(),
      ]
    )
  } catch { /* 非 Electron 环境 */ }
}

/**
 * useAudiobookStore.ts
 * 有声书全局状态管理
 */

import { create } from 'zustand'

interface Sentence {
  globalIndex: number
  text: string
  audioStatus: 'pending' | 'synthesizing' | 'ready' | 'failed'
}

interface AudioChunk {
  sentenceIdx: number
  audioUrl: string    // unbox-file:// 或 blob URL
  duration: number
}

interface AudiobookBookmark {
  id: number
  bookPath: string
  cfi: string
  sentenceIndex: number
  label: string
  voiceEngineId?: string
  voiceId?: string
  speed?: number
  createdAt: number
}

interface AudiobookProgress {
  bookPath: string
  cfi: string
  sentenceIndex: number
  voiceEngineId?: string
  voiceId?: string
  speed: number
}

interface AudiobookState {
  // ── 激活状态 ──
  isActive: boolean
  isPlaying: boolean

  // ── 书籍信息 ──
  currentBookPath: string
  currentCfi: string

  // ── 句子数据 ──
  sentences: Sentence[]
  currentSentenceIdx: number

  // ── 音频队列 ──
  audioQueue: AudioChunk[]

  // ── TTS 配置 ──
  voiceEngineId: string    // 当前使用的 TTS 引擎 ID
  voiceId: string          // 当前使用的语音 ID
  speed: number            // 播放速度 0.5-4.0

  // ── UI 偏好 ──
  sleepTimerMinutes: number | null       // 定时关闭（分钟）
  sleepTimerStartedAt: number | null     // 定时器启动时间戳
  textFollowMode: boolean                // 文本跟随模式（自动滚动到高亮句）

  // ── 书签 ──
  bookmarks: AudiobookBookmark[]

  // ── 进度 ──
  currentProgress: AudiobookProgress | null

  // Actions
  setIsActive: (v: boolean) => void
  setIsPlaying: (v: boolean) => void
  initBook: (bookPath: string) => void
  setSentences: (sentences: Sentence[]) => void
  appendSentences: (sentences: Sentence[]) => void
  setCurrentSentenceIdx: (idx: number) => void
  updateSentenceStatus: (idx: number, status: Sentence['audioStatus']) => void
  addAudioChunk: (chunk: AudioChunk) => void
  setVoiceEngine: (engineId: string, voiceId: string) => void
  setSpeed: (speed: number) => void
  setSleepTimer: (minutes: number | null) => void
  setTextFollowMode: (v: boolean) => void
  setBookmarks: (bookmarks: AudiobookBookmark[]) => void
  updateProgress: (sentenceIdx: number) => void
  reset: () => void
}

// apps/desktop/src/main/tts/VoiceManager.ts

interface DownloadTask {
  engineId: string
  voiceId: string
  url: string                    // Hugging Face / 各引擎官方下载源
  targetPath: string             // 本地目标路径
  expectedSize?: number
  expectedSha256?: string        // 完整性校验
  status: 'pending' | 'downloading' | 'verifying' | 'completed' | 'failed' | 'cancelled'
  progress: number               // 0-100
  bytesDownloaded: number
  totalBytes: number
  error?: string
}

class VoiceManager {
  private tasks: Map<string, DownloadTask> = new Map()
  private downloadQueue: string[] = []
  private activeDownloads = 0
  private readonly MAX_CONCURRENT = 2

  /**
   * 开始下载语音模型
   * @returns taskId 用于查询进度和取消
   */
  async startDownload(engineId: string, voiceId: string): Promise<string> {
    const taskId = `${engineId}:${voiceId}`
    if (this.tasks.has(taskId) && this.tasks.get(taskId)!.status === 'downloading') {
      return taskId
    }

    const url = this.resolveDownloadUrl(engineId, voiceId)
    const targetPath = this.resolveTargetPath(engineId, voiceId)

    const task: DownloadTask = {
      engineId, voiceId, url, targetPath,
      status: 'pending', progress: 0,
      bytesDownloaded: 0, totalBytes: 0,
    }
    this.tasks.set(taskId, task)
    this.downloadQueue.push(taskId)
    this.processQueue()
    return taskId
  }

  /** 获取下载进度 */
  getProgress(taskId: string): DownloadTask | undefined {
    return this.tasks.get(taskId)
  }

  /** 取消下载 */
  cancelDownload(taskId: string): void { /* ... */ }

  /** 删除已下载的模型 */
  async deleteModel(engineId: string, voiceId: string): Promise<void> { /* ... */ }

  /** 校验模型完整性 */
  async verifyModel(engineId: string, voiceId: string): Promise<boolean> { /* ... */ }

  /** 获取本地已下载模型清单 */
  getLocalManifest(): LocalManifest { /* ... */ }

  private async processQueue(): Promise<void> { /* 并发控制 + fetch + 进度广播 */ }

  /** 解析下载源 URL */
  private resolveDownloadUrl(engineId: string, voiceId: string): string {
    const SOURCES: Record<string, string> = {
      'kokoro': 'https://huggingface.co/csukuangfj/kokoro-multi-lang-v1_0/resolve/main/',
      'sherpa-onnx': 'https://github.com/k2-fsa/sherpa-onnx/releases/download/tts-models/',
      'supertonic': 'https://huggingface.co/Supertone/supertonic/resolve/main/assets/onnx/',
      'piper': 'https://huggingface.co/rhasspy/piper-voices/resolve/v1.0.0/',
    }
    return SOURCES[engineId] ?? ''
  }

  private resolveTargetPath(engineId: string, voiceId: string): string {
    // → {userData}/tts-models/{engineId}/{voiceId}
  }
}

// preload/index.ts 补充
api.tts = {
  // ... 原有合成接口

  /** 开始下载语音模型，返回 taskId */
  downloadVoice: (engineId: string, voiceId: string)
    => ipcRenderer.invoke('tts:download-voice', engineId, voiceId),

  /** 获取下载进度 */
  onDownloadProgress: (callback: (task: DownloadTask) => void) => {
    const listener = (_event: any, task: DownloadTask) => callback(task)
    ipcRenderer.on('tts:download-progress', listener)
    return () => ipcRenderer.removeListener('tts:download-progress', listener)
  },

  /** 取消下载 */
  cancelDownload: (taskId: string)
    => ipcRenderer.invoke('tts:cancel-download', taskId),
}

// relocated 事件处理
rendition.on('relocated', (loc: any) => {
  if (!audiobookStore.isActive) return

  const newHref = loc.start?.href  // 新章节的 href
  const newCfi = loc.start?.cfi

  // 更新 CFI
  audiobookStore.setCurrentCfi(newCfi)

  setTimeout(() => {
    const doc = rendition.getContents()?.[0]?.document
    if (!doc) return

    // 新章节 → 提取新句子并追加
    const newSentences = extractSentences(doc)
    markSentencesInDOM(doc, newSentences)
    audiobookStore.appendSentences(newSentences)

    // 恢复上一句高亮（可能在新页面中）
    highlightSentence(doc, audiobookStore.currentSentenceIdx)
  }, 200)
})

// AudiobookPlayer 中的字幕行
{subtitle && currentSentence && (
  <div className="audiobook-subtitle" style={{
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    padding: '6px 12px',
    fontSize: '13px',
    color: '#ccc',
    background: 'rgba(0,0,0,0.3)',
    borderRadius: '4px',
  }}>
    {currentSentence.text.length > 80
      ? currentSentence.text.slice(0, 77) + '...'
      : currentSentence.text
    }
  </div>
)}