feat: add loading subtitle prompt in the video sheet

Author: suemor233

electron-builder.yml

@@ -72,3 +72,8 @@ releaseInfo:
     修复初次播放视频时无法显示设置的问题
     修复自动匹配字幕无法显示的问题
     添加开关 mini 进度条设置
+    修复自动匹配字幕导入报错
+    修复加载视频时出现报错
+    修复重置 App 后字幕无法加载
+    修复弹幕来源取消勾选后，下次播放视频无法生效的问题
+    添加加载字幕提示

package.json

@@ -63,6 +63,7 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@sentry/react": "^8.42.0",
     "@suemor/xgplayer": "^3.0.21",
     "@tanstack/react-query": "^5.62.9",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import path from 'node:path'
 
 import ffmpegPath from '@ffmpeg-installer/ffmpeg'
 import ffprobePath from '@ffprobe-installer/ffprobe'
-import { screenshotsPath, subtitlesPath } from '@main/constants/app'
+import { createStorageFolder, screenshotsPath, subtitlesPath } from '@main/constants/app'
 import ffmpeg from 'fluent-ffmpeg'
 import { nanoid } from 'nanoid'
 
@@ -14,6 +14,7 @@ export default class FFmpeg {
   ffmpeg: ffmpeg.FfmpegCommand
 
   constructor(inputPath: string) {
+    createStorageFolder()
     this.ffmpeg = ffmpeg(inputPath)
   }
 

src/main/lib/ffmpeg.ts

@@ -1,6 +1,11 @@
+import path from 'node:path'
+
 import { getRendererHandlers } from '@main/windows/setting'
 import logger from 'electron-log'
 
+import FFmpeg from './ffmpeg'
+import { getFilePathFromProtocolURL } from './protocols'
+
 export async function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
@@ -41,3 +46,20 @@ export function quickLaunchViaVideo() {
     getRendererHandlers()?.importAnime.send({ path: filePath })
   }
 }
+
+export async function coverSubtitleToAss(targetPath: string) {
+  const filePath = getFilePathFromProtocolURL(targetPath)
+  const extName = path.extname(filePath)
+  if (!extName) {
+    return
+  }
+  if (extName === '.ass' || extName === '.ssa') {
+    return {
+      fileName: path.basename(filePath),
+      filePath,
+    }
+  }
+  const ffmepg = new FFmpeg(filePath)
+  const outPutPath = await ffmepg.coverToAssSubtitle()
+  return outPutPath
+}

src/main/lib/utils.ts

@@ -6,6 +6,7 @@ import type { BilibiliXmlDanmakus } from '@main/lib/danmaku'
 import { parseBilibiliDanmaku } from '@main/lib/danmaku'
 import FFmpeg from '@main/lib/ffmpeg'
 import { getFilePathFromProtocolURL } from '@main/lib/protocols'
+import { coverSubtitleToAss } from '@main/lib/utils'
 import { showFileSelectionDialog } from '@main/modules/showDialog'
 import { calculateFileHashByBuffer } from '@renderer/lib/calc-file-hash'
 import { dialog } from 'electron'
@@ -139,21 +140,7 @@ export const playerRoute = {
     if (!filePath) {
       return
     }
-    const extName = path.extname(filePath)
-    if (!extName) {
-      return
-    }
-    if (extName === '.ass' || extName === '.ssa') {
-      return {
-        fileName: path.basename(filePath),
-        filePath,
-      }
-    }
-
-    const ffmepg = new FFmpeg(filePath)
-    const outPutPath = ffmepg.coverToAssSubtitle()
-
-    return outPutPath
+    return coverSubtitleToAss(filePath)
   }),
   getSubtitlesIntroFromAnime: t.procedure.input<{ path: string }>().action(async ({ input }) => {
     const ffmpeg = new FFmpeg(getFilePathFromProtocolURL(input.path))
@@ -181,6 +168,7 @@ export const playerRoute = {
         fileName: file,
         filePath: path.join(directoryPath, file),
       }))
+
     return matchedFiles
   }),
   immportDanmakuFile: t.procedure.action(async () => {

src/main/tipc/player.ts

@@ -1,14 +1,13 @@
-import path from 'node:path'
-
 import { getFilePathFromProtocolURL } from '@main/lib/protocols'
+import { coverSubtitleToAss } from '@main/lib/utils'
 
 import { t } from './_instance'
 
 export const utilsRoute = {
   getFilePathFromProtocolURL: t.procedure.input<{ path: string }>().action(async ({ input }) => {
     return getFilePathFromProtocolURL(input.path)
   }),
-  getFileNameFromPath: t.procedure.input<{ path: string }>().action(async ({ input }) => {
-    return path.basename(input.path)
+  coverSubtitleToAss: t.procedure.input<{ path: string }>().action(async ({ input }) => {
+    return coverSubtitleToAss(input.path)
   }),
 }

src/main/tipc/utils.ts

@@ -35,7 +35,7 @@ export const initialMatchedVideo = {
   animeId: 0,
 }
 
-export const playerSettingSheetAtom = atom(false)
+export const playerSettingSheetAtom = atomWithReset(false)
 
 export type MatchedVideoType = typeof initialMatchedVideo
 
@@ -52,11 +52,13 @@ export const useClearPlayingVideo = () => {
   const resetVideo = useResetAtom(videoAtom)
   const resetProgress = useResetAtom(loadingDanmuProgressAtom)
   const resetCurrentMatchedVideo = useResetAtom(currentMatchedVideoAtom)
+  const resetPlayerSettingSheet = useResetAtom(playerSettingSheetAtom)
 
   return () => {
     resetVideo()
     resetProgress()
     resetCurrentMatchedVideo()
+    resetPlayerSettingSheet()
   }
 }
 

src/renderer/src/atoms/player.ts

@@ -211,19 +211,16 @@ export const useDanmakuData = () => {
 
           const handleIsSelected = () => {
             // 如果历史记录中有选中的弹幕库，就返回 true
-            if (historyDanmaku?.selected) {
-              return true
-            }
 
-            if (!related.url.includes('bilibili')) {
-              return true
+            if (related.url.includes('bilibili')) {
+              return (
+                related.url ===
+                thirdPartyDanmakuUrlData?.find((item) => item.url.includes('bilibili'))?.url
+              )
             }
+            return historyDanmaku?.selected
 
             // bilibili 弹幕库感觉有重复的弹幕，目前只默认加载一个 bilibili 弹幕库
-            return (
-              related.url ===
-              thirdPartyDanmakuUrlData?.find((item) => item.url.includes('bilibili'))?.url
-            )
           }
           // 使用弹幕缓存
           if (historyDanmaku && !history?.newBangumi) {
@@ -301,7 +298,11 @@ export const useDanmakuData = () => {
       }
 
       // 官方弹幕库和第三方弹幕库都加载成功后，返回所有弹幕数据
-      if (!onlyLoadDandanplayDanmaku && results.every((result) => result.data !== undefined)) {
+      if (
+        !onlyLoadDandanplayDanmaku &&
+        results.every((result) => result.data !== undefined) &&
+        thirdPartyResult.length === thirdPartyDanmakuUrlData.length
+      ) {
         return [dandanplayDanmakuData, ...thirdPartyDanmakuData, ...manualResult]
       }
 

src/renderer/src/components/modules/player/loading/hooks.ts

@@ -1,4 +1,3 @@
-
 import { playerSettingSheetAtom, videoAtom } from '@renderer/atoms/player'
 import { jotaiStore } from '@renderer/atoms/store'
 import {
@@ -24,12 +23,12 @@ import { useSubtitle } from './hooks'
 
 export const SubtitleImport = () => {
   const player = usePlayerInstance()
-  const { subtitlesData, fetchSubtitleBody } = useSubtitle()
+  const { subtitlesData, fetchSubtitleBody, isLoadingEmbeddedSubtitle } = useSubtitle()
   const { toast } = useToast()
   const { hash } = useAtomValue(videoAtom)
   const fileInputRef = useRef<HTMLInputElement | null>(null)
   const { data: defaultValue, isFetching } = useQuery({
-    queryKey: ['subtitlesDefaultValue', hash],
+    queryKey: ['subtitlesDefaultValue', hash, isLoadingEmbeddedSubtitle],
     queryFn: async () => {
       const history = await db.history.get(hash)
       return history?.subtitles?.defaultId?.toString() ?? '-1'
@@ -48,33 +47,47 @@ export const SubtitleImport = () => {
     }
   }, [player])
 
-  const importSubtitleFromBrowser = (e: ChangeEvent<HTMLInputElement>) => {
+  const importSubtitleFromBrowser = async (e: ChangeEvent<HTMLInputElement>) => {
     const changeEvent = e as unknown as ChangeEvent<HTMLInputElement>
     const file = changeEvent.target?.files?.[0]
 
     if (!file) {
       return
     }
     const url = URL.createObjectURL(file)
-    fetchSubtitleBody({ path: url, fileName: file.name })
-    toast({
-      title: '导入字幕成功',
-      duration: 1500,
-    })
-    jotaiStore.set(playerSettingSheetAtom, false)
+    try {
+      await fetchSubtitleBody({ path: url, fileName: file.name })
+      toast({
+        title: '导入字幕成功',
+        duration: 1500,
+      })
+      jotaiStore.set(playerSettingSheetAtom, false)
+    } catch {
+      toast({
+        title: '导入字幕失败',
+        duration: 1500,
+      })
+    }
   }
 
   const importSubtitleFromClient = async () => {
     const subtitlePath = await tipcClient?.importSubtitle()
     if (!subtitlePath) {
       return
     }
-    fetchSubtitleBody({ path: subtitlePath.filePath, fileName: subtitlePath.fileName })
-    toast({
-      title: '导入字幕成功',
-      duration: 1500,
-    })
-    jotaiStore.set(playerSettingSheetAtom, false)
+    try {
+      await fetchSubtitleBody({ path: subtitlePath.filePath, fileName: subtitlePath.fileName })
+      toast({
+        title: '导入字幕成功',
+        duration: 1500,
+      })
+      jotaiStore.set(playerSettingSheetAtom, false)
+    } catch {
+      toast({
+        title: '导入字幕失败',
+        duration: 1500,
+      })
+    }
   }
 
   if (!defaultValue || isFetching) {
@@ -85,17 +98,20 @@ export const SubtitleImport = () => {
       <Select
         defaultValue={defaultValue.toString()}
         onValueChange={(id) => fetchSubtitleBody({ id: +id })}
+        disabled={isLoadingEmbeddedSubtitle}
       >
         <SelectTrigger className="w-[200px]">
           <SelectValue placeholder="选中字幕" />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem value={'-1'}>关闭</SelectItem>
+            <SelectItem value={'-1'}>
+              {isLoadingEmbeddedSubtitle ? '正在加载字幕中...' : '关闭'}
+            </SelectItem>
             {subtitlesData?.tags?.map((subtitle) => {
               return (
                 <SelectItem value={subtitle.id.toString()} key={subtitle.id}>
-                  {subtitle.title}
+                  {isLoadingEmbeddedSubtitle ? '正在加载字幕中...' : subtitle.title}
                 </SelectItem>
               )
             })}
@@ -124,4 +140,4 @@ export const SubtitleImport = () => {
       )}
     </>
   )
-}
+}