chore: release 1.13.1

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "bilibili-subtitle",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "type": "module",
   "description": "哔哩哔哩字幕列表",
   "main": "index.js",

src/components/SegmentCard.tsx

@@ -13,6 +13,7 @@ import SegmentItem from './SegmentItem'
 import {stopPopFunc} from '../utils/util'
 import useSubtitle from '../hooks/useSubtitle'
 import DebateChat from './DebateChat'
+import { RootState } from '../store'
 
 const SummarizeItemOverview = (props: {
   segment: Segment
@@ -25,7 +26,7 @@ const SummarizeItemOverview = (props: {
 
   const {move} = useSubtitle()
   const time = parseStrTimeToSeconds(overviewItem.time)
-  const currentTime = useAppSelector(state => state.env.currentTime)
+  const currentTime = useAppSelector((state: RootState) => state.currentTime.currentTime)
   const isIn = useMemo(() => {
     if (currentTime != null) {
       // check in current segment

src/hooks/useSubtitleService.ts

@@ -4,15 +4,11 @@ import {
   setCurFetched,
   setCurIdx,
   setCurInfo,
-  setCurrentTime,
   setData,
-  setInfos,
   setNoVideo,
   setSegmentFold,
   setSegments,
-  setTitle,
   setTotalHeight,
-  setUrl,
   setTempData,
 } from '../redux/envReducer'
 import {EventBusContext} from '../Router'
@@ -20,6 +16,8 @@ import {EVENT_EXPAND, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_MIN, WORDS_RATE}
 import {useAsyncEffect, useInterval} from 'ahooks'
 import {getModelMaxTokens, getWholeText} from '../utils/bizUtil'
 import { useMessage } from './useMessageService'
+import { setCurrentTime } from '../redux/currentTimeReducer'
+import { RootState } from '../store'
 
 /**
  * Service是单例，类似后端的服务概念
@@ -31,10 +29,10 @@ const useSubtitleService = () => {
   const curFetched = useAppSelector(state => state.env.curFetched)
   const fold = useAppSelector(state => state.env.fold)
   const envReady = useAppSelector(state => state.env.envReady)
-  const envData = useAppSelector(state => state.env.envData)
-  const data = useAppSelector(state => state.env.data)
-  const currentTime = useAppSelector(state => state.env.currentTime)
-  const curIdx = useAppSelector(state => state.env.curIdx)
+  const envData = useAppSelector((state: RootState) => state.env.envData)
+  const data = useAppSelector((state: RootState) => state.env.data)
+  const currentTime = useAppSelector((state: RootState) => state.currentTime.currentTime)
+  const curIdx = useAppSelector((state: RootState) => state.env.curIdx)
   const eventBus = useContext(EventBusContext)
   const needScroll = useAppSelector(state => state.env.needScroll)
   const segments = useAppSelector(state => state.env.segments)
@@ -113,19 +111,22 @@ const useSubtitleService = () => {
 
   // 更新当前位置
   useEffect(() => {
-    let curIdx
+    let newCurIdx
     if (((data?.body) != null) && currentTime) {
       for (let i=0; i<data.body.length; i++) {
         const item = data.body[i]
         if (item.from && currentTime < item.from) {
           break
         } else {
-          curIdx = i
+          newCurIdx = i
         }
       }
     }
-    dispatch(setCurIdx(curIdx))
-  }, [currentTime, data?.body, dispatch])
+    // 只有当索引发生变化时才更新状态
+    if (newCurIdx !== curIdx) {
+      dispatch(setCurIdx(newCurIdx))
+    }
+  }, [currentTime, data?.body, dispatch, curIdx])
 
   // 需要滚动 => segment自动展开
   useEffect(() => {
@@ -193,7 +194,10 @@ const useSubtitleService = () => {
   // 每0.5秒更新当前视频时间
   useInterval(() => {
     sendInject(null, 'GET_VIDEO_STATUS', {}).then(status => {
-      dispatch(setCurrentTime(status.currentTime))
+      // 只有当时间发生显著变化时才更新状态（差异大于0.1秒），避免不必要的重新渲染
+      if (currentTime == null || Math.abs(status.currentTime - currentTime) > 0.1) {
+        dispatch(setCurrentTime(status.currentTime))
+      }
     })
   }, 500)
 

src/redux/currentTimeReducer.ts

@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+interface CurrentTimeState {
+  currentTime?: number
+}
+
+const initialState: CurrentTimeState = {
+  currentTime: undefined
+}
+
+export const slice = createSlice({
+  name: 'currentTime',
+  initialState,
+  reducers: {
+    setCurrentTime: (state, action: PayloadAction<number | undefined>) => {
+      state.currentTime = action.payload
+    }
+  }
+})
+
+export const { setCurrentTime } = slice.actions
+
+export default slice.reducer 

src/redux/envReducer.ts

@@ -23,7 +23,6 @@ interface EnvState {
   totalHeight: number
   curIdx?: number // 从0开始
   needScroll?: boolean
-  currentTime?: number
   infos?: any[]
   curInfo?: any
   curFetched?: boolean
@@ -263,9 +262,6 @@ export const slice = createSlice({
     setNeedScroll: (state, action: PayloadAction<boolean>) => {
       state.needScroll = action.payload
     },
-    setCurrentTime: (state, action: PayloadAction<number | undefined>) => {
-      state.currentTime = action.payload
-    },
     setUrl: (state, action: PayloadAction<string | undefined>) => {
       state.url = action.payload
     },
@@ -337,7 +333,6 @@ export const {
   setCurIdx,
   setEnvData,
   setEnvReady,
-  setCurrentTime,
   setInfos,
   setCurInfo,
   setCurFetched,

src/store.ts

@@ -1,9 +1,11 @@
 import {configureStore} from '@reduxjs/toolkit'
 import envReducer from './redux/envReducer'
+import currentTimeReducer from './redux/currentTimeReducer'
 
 const store = configureStore({
   reducer: {
     env: envReducer,
+    currentTime: currentTimeReducer,
   },
 })