章节显示

src/components/SegmentCard.tsx

@@ -1,6 +1,6 @@
 import {MutableRefObject, useCallback, useEffect, useMemo, useRef} from 'react'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
-import {setFloatKeyPointsSegIdx, setSegmentFold, setTempData} from '../redux/envReducer'
+import {setFloatKeyPointsSegIdx, setNeedScroll, setSegmentFold, setTempData} from '../redux/envReducer'
 import classNames from 'classnames'
 import {FaClipboardList, FaComments} from 'react-icons/fa'
 import {SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../consts/const'
@@ -159,6 +159,7 @@ const SegmentCard = (props: {
     }
     return undefined
   }, [curSummaryType, segment.summaries])
+  const {move} = useSubtitle()
 
   const onFold = useCallback(() => {
     dispatch(setSegmentFold({
@@ -167,6 +168,21 @@ const SegmentCard = (props: {
     }))
   }, [dispatch, segment.fold, segment.startIdx])
 
+  const onChapterClick = useCallback(() => {
+    if (segment.items && segment.items.length > 0) {
+      // 展开当前segment
+      if (segment.fold) {
+        dispatch(setSegmentFold({
+          segmentStartIdx: segment.startIdx,
+          fold: false
+        }))
+      }
+      
+      const firstItem = segment.items[0]
+      move(firstItem.from, false)
+    }
+  }, [dispatch, move, segment.fold, segment.items, segment.startIdx])
+
   // 检测设置floatKeyPointsSegIdx
   useEffect(() => {
     if (summarizeFloat) { // 已启用
@@ -212,6 +228,10 @@ const SegmentCard = (props: {
 
   return <div
     className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1', showCurrent && 'shadow shadow-md')}>
+    {/* 章节标题 */}
+    {segment.chapterTitle && <div className='text-center py-1 px-2 bg-primary/10 rounded text-sm font-semibold text-primary border-b border-primary/20 cursor-pointer hover:bg-primary/20 transition-colors' onClick={onChapterClick}>
+      {segment.chapterTitle}
+    </div>}
     <div className='relative flex justify-center min-h-[20px]'>
       {segments != null && segments.length > 0 &&
         <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>

src/hooks/useSubtitleService.ts

@@ -31,6 +31,7 @@ const useSubtitleService = () => {
   const envReady = useAppSelector(state => state.env.envReady)
   const envData = useAppSelector((state: RootState) => state.env.envData)
   const data = useAppSelector((state: RootState) => state.env.data)
+  const chapters = useAppSelector((state: RootState) => state.env.chapters)
   const currentTime = useAppSelector((state: RootState) => state.currentTime.currentTime)
   const curIdx = useAppSelector((state: RootState) => state.env.curIdx)
   const eventBus = useContext(EventBusContext)
@@ -158,24 +159,78 @@ const useSubtitleService = () => {
         size = Math.max(size, WORDS_MIN)
 
         segments = []
-        let transcriptItems: TranscriptItem[] = []
-        let totalLength = 0
-        for (let i = 0; i < items.length; i++) {
-          const item = items[i]
-          transcriptItems.push(item)
-          totalLength += item.content.length
-          if (totalLength >= size || i === items.length-1) { // new segment or last
-            // add
-            segments.push({
-              items: transcriptItems,
-              startIdx: transcriptItems[0].idx,
-              endIdx: transcriptItems[transcriptItems.length - 1].idx,
-              text: getWholeText(transcriptItems.map(item => item.content)),
-              summaries: {},
+
+        // 如果有章节信息，按章节分割
+        if (chapters && chapters.length > 0) {
+          for (let chapterIdx = 0; chapterIdx < chapters.length; chapterIdx++) {
+            const chapter = chapters[chapterIdx]
+            const nextChapter = chapters[chapterIdx + 1]
+            
+            // 找到属于当前章节的字幕项
+            const chapterItems = items.filter(item => {
+              const itemTime = item.from
+              return itemTime >= chapter.from && (nextChapter ? itemTime < nextChapter.from : true)
             })
-            // reset
-            transcriptItems = []
-            totalLength = 0
+
+            if (chapterItems.length === 0) continue
+
+            // 如果章节内容过长，需要进一步分割
+            const chapterText = getWholeText(chapterItems.map(item => item.content))
+            if (chapterText.length <= size) {
+              // 章节内容不长，作为一个segment
+              segments.push({
+                items: chapterItems,
+                startIdx: chapterItems[0].idx,
+                endIdx: chapterItems[chapterItems.length - 1].idx,
+                text: chapterText,
+                chapterTitle: chapter.content,
+                summaries: {},
+              })
+            } else {
+              // 章节内容过长，需要分割成多个segment
+              let transcriptItems: TranscriptItem[] = []
+              let totalLength = 0
+              for (let i = 0; i < chapterItems.length; i++) {
+                const item = chapterItems[i]
+                transcriptItems.push(item)
+                totalLength += item.content.length
+                if (totalLength >= size || i === chapterItems.length - 1) {
+                  segments.push({
+                    items: transcriptItems,
+                    startIdx: transcriptItems[0].idx,
+                    endIdx: transcriptItems[transcriptItems.length - 1].idx,
+                    text: getWholeText(transcriptItems.map(item => item.content)),
+                    chapterTitle: chapter.content,
+                    summaries: {},
+                  })
+                  // reset
+                  transcriptItems = []
+                  totalLength = 0
+                }
+              }
+            }
+          }
+        } else {
+          // 没有章节信息，按原来的逻辑分割
+          let transcriptItems: TranscriptItem[] = []
+          let totalLength = 0
+          for (let i = 0; i < items.length; i++) {
+            const item = items[i]
+            transcriptItems.push(item)
+            totalLength += item.content.length
+            if (totalLength >= size || i === items.length-1) { // new segment or last
+              // add
+              segments.push({
+                items: transcriptItems,
+                startIdx: transcriptItems[0].idx,
+                endIdx: transcriptItems[transcriptItems.length - 1].idx,
+                text: getWholeText(transcriptItems.map(item => item.content)),
+                summaries: {},
+              })
+              // reset
+              transcriptItems = []
+              totalLength = 0
+            }
           }
         }
       } else { // 都放一个分段
@@ -189,7 +244,7 @@ const useSubtitleService = () => {
       }
     }
     dispatch(setSegments(segments))
-  }, [data?.body, dispatch, envData])
+  }, [data?.body, dispatch, envData, chapters])
 
   // 每0.5秒更新当前视频时间
   useInterval(() => {

src/typings.d.ts

@@ -100,6 +100,7 @@ interface Segment {
   endIdx: number
   text: string
   fold?: boolean
+  chapterTitle?: string // 章节标题
   summaries: {
     [type: string]: Summary
   }