fix: embedded subtitles were loaded multiple times

Author: suemor233

electron-builder.yml

@@ -70,3 +70,5 @@ releaseInfo:
   releaseNotes: |
     修复视频导入失败的问题
     初次访问 web 版本提示优化
+    修复内嵌字幕多次加载的问题
+    

src/main/tipc/player.ts

@@ -148,8 +148,19 @@ export const playerRoute = {
   getSubtitlesBody: t.procedure
     .input<{ path: string; index: number }>()
     .action(async ({ input }) => {
-      const ffmpeg = new FFmpeg(getFilePathFromProtocolURL(input.path))
-      return ffmpeg.extractSubtitles(input.index)
+      try {
+        const ffmpeg = new FFmpeg(getFilePathFromProtocolURL(input.path))
+        const data = await ffmpeg.extractSubtitles(input.index)
+        return {
+          ok: 1,
+          data,
+        }
+      } catch (error: any) {
+        return {
+          ok: 0,
+          message: error?.message || '',
+        }
+      }
     }),
   matchSubtitleFile: t.procedure.input<{ path: string }>().action(async ({ input }) => {
     const filePath = getFilePathFromProtocolURL(input.path)

src/renderer/src/components/modules/player/initialize/Subtitle.tsx

@@ -1,23 +1,23 @@
 import { isWeb } from '@renderer/lib/utils'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
-import { usePlayerInstance, useSubtitleInstance } from '../Context'
+import { usePlayerInstance } from '../Context'
 import { useSubtitle } from '../setting/items/subtitle/hooks'
 
 export const InitializeSubtitle = () => {
-  const { initializeSubtitle, subtitlesInstance, isFetching } = useSubtitle()
+  const { initializeSubtitle, isFetching } = useSubtitle()
   const player = usePlayerInstance()
-  const [subtitle] = useSubtitleInstance()
-
+  const onceRef = useRef(false)
   useEffect(() => {
-    if (!player || isFetching || isWeb || subtitle) {
+    if (isWeb) {
+      return
+    }
+    if (!player || isFetching || onceRef.current) {
       return
     }
 
+    onceRef.current = true
     initializeSubtitle()
-    return () => {
-      subtitlesInstance?.freeTrack()
-    }
   }, [player, isFetching])
   return null
 }

src/renderer/src/components/modules/player/setting/items/subtitle/hooks.ts

@@ -1,5 +1,6 @@
 import { MARCHEN_PROTOCOL_PREFIX } from '@main/constants/protocol'
 import { videoAtom } from '@renderer/atoms/player'
+import { useToast } from '@renderer/components/ui/toast'
 import { db } from '@renderer/database/db'
 import { tipcClient } from '@renderer/lib/client'
 import { isWeb } from '@renderer/lib/utils'
@@ -21,6 +22,7 @@ export const useSubtitle = () => {
   const player = usePlayerInstance()
   const [subtitlesInstance, setSubtitlesInstance] = useSubtitleInstance()
   const setVideo = useSetAtom(videoAtom)
+  const { toast } = useToast()
   const [isLoadingEmbeddedSubtitle, setIsLoadingEmbeddedSubtitle] = useAtom(
     setIsLoadingEmbeddedSubtitleAtom,
   )
@@ -149,13 +151,16 @@ export const useSubtitle = () => {
 
         setIsLoadingEmbeddedSubtitle(true)
         // 通过 ipc 获取被选中的动漫内嵌字幕
-        const subtitlePath = await tipcClient?.getSubtitlesBody({
+        const subtitleData = await tipcClient?.getSubtitlesBody({
           path: url,
           index,
         })
-
+        const subtitlePath = subtitleData?.data
         if (!subtitlePath || !data?.tags?.[index]) {
-          return
+          toast({
+            title: '视频内嵌字幕加载失败',
+          })
+          throw new Error(subtitleData?.message ?? '字幕加载失败')
         }
 
         const newTags = [
@@ -172,10 +177,8 @@ export const useSubtitle = () => {
             tags: newTags,
           },
         })
-
         await setSubtitlesOctopus(subtitlePath)
-        setIsLoadingEmbeddedSubtitle(false)
-      } catch {
+      } finally {
         setIsLoadingEmbeddedSubtitle(false)
       }
     },