feat: allow to enable or disable mini progress

Author: suemor233

electron-builder.yml

@@ -71,3 +71,4 @@ releaseInfo:
     添加检查更新发生错误的提示信息
     修复初次播放视频时无法显示设置的问题
     修复自动匹配字幕无法显示的问题
+    添加开关 mini 进度条设置

src/main/lib/ffmpeg.ts

@@ -88,7 +88,6 @@ export default class FFmpeg {
 
     const fileName = `${Date.now()}-${nanoid(10)}-${index}.ass`
     const outputPath = path.join(subtitlesPath(), fileName)
-
     return new Promise<string>((resolve, reject) => {
       this.ffmpeg
         .clone() // Ensure a new instance for each command

src/renderer/src/atoms/settings/player.ts

@@ -16,6 +16,7 @@ const createPlayerDefaultSettings = () => {
   return {
     enableTraditionalToSimplified: false,
     enableAutomaticEpisodeSwitching: true,
+    enableMiniProgress: true,
     danmakuFontSize: getSelectedDefaultValue(danmakuFontSizeList) ?? '26',
     danmakuDuration: getSelectedDefaultValue(danmakuDurationList) ?? '15000',
     danmakuEndArea: getSelectedDefaultValue(danmakuEndAreaList)!,

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

@@ -10,7 +10,7 @@ import type { CommentModel } from '@renderer/request/models/comment'
 import type { Danmu, IPlayerOptions } from '@suemor/xgplayer'
 import XgPlayer from '@suemor/xgplayer'
 import { useAtomValue } from 'jotai'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { useDanmakuData } from '../loading/hooks'
 import { danmakuConfig, playerBaseConfigForClient, playerBaseConfigForWeb } from './config'
@@ -29,15 +29,15 @@ export const useXgPlayer = (url: string) => {
   const isLoadDanmaku = useAtomValue(isLoadDanmakuAtom)
   const video = useAtomValue(videoAtom)
   const playerSettings = usePlayerSettingsValue()
-  const { danmakuDuration, danmakuFontSize, danmakuEndArea } = playerSettings
-  const { setResponsiveDanmakuConfig } = useXgPlayerUtils()
+  const { danmakuDuration, danmakuFontSize, danmakuEndArea, enableMiniProgress } = playerSettings
+  const { setResponsiveSettingsUpdate } = useXgPlayerUtils()
   const { mergedDanmakuData } = useDanmakuData()
   useEffect(() => {
-    setResponsiveDanmakuConfig(playerInstance)
+    setResponsiveSettingsUpdate(playerInstance)
     return () => {
       dismiss()
     }
-  }, [playerSettings])
+  }, [setResponsiveSettingsUpdate])
 
   useEffect(() => {
     const handleInitalizePlayer = async () => {
@@ -55,6 +55,7 @@ export const useXgPlayer = (url: string) => {
         }
         const xgplayerConfig = {
           ...(isWeb ? playerBaseConfigForWeb : playerBaseConfigForClient),
+          miniprogress: enableMiniProgress,
           el: playerRef.current,
           url,
           startTime,
@@ -70,7 +71,6 @@ export const useXgPlayer = (url: string) => {
               .map((danmaku) => danmaku?.content)
               .flatMap((danmaku) => danmaku.comments) ?? []
         }
-
         xgplayerConfig.danmu = {
           ...danmakuConfig,
           comments: parseDanmakuData({
@@ -123,19 +123,22 @@ export const useXgPlayer = (url: string) => {
 export const useXgPlayerUtils = () => {
   const playerSettings = usePlayerSettingsValue()
 
-  const setResponsiveDanmakuConfig = (playerInstance: PlayerType | null) => {
-    if (playerInstance?.isPlaying) {
-      const { danmakuDuration, danmakuEndArea, danmakuFontSize } = playerSettings
-      playerInstance.danmu?.setFontSize(+danmakuFontSize, 24)
-      playerInstance.danmu?.setAllDuration('all', +danmakuDuration)
-      playerInstance.danmu?.setArea({
-        start: 0,
-        end: +danmakuEndArea,
-      })
-    }
-  }
+  const setResponsiveSettingsUpdate = useCallback(
+    (playerInstance: PlayerType | null) => {
+      if (playerInstance?.isPlaying) {
+        const { danmakuDuration, danmakuEndArea, danmakuFontSize } = playerSettings
+        playerInstance.danmu?.setFontSize(+danmakuFontSize, 24)
+        playerInstance.danmu?.setAllDuration('all', +danmakuDuration)
+        playerInstance.danmu?.setArea({
+          start: 0,
+          end: +danmakuEndArea,
+        })
+      }
+    },
+    [playerSettings],
+  )
 
   return {
-    setResponsiveDanmakuConfig,
+    setResponsiveSettingsUpdate,
   }
 }

src/renderer/src/components/modules/player/setting/items/damaku/AddDanmaku.tsx

@@ -29,7 +29,7 @@ export const AddDanmaku = () => {
   const { danmaku } = useSettingConfig()
   const { danmakuDuration } = usePlayerSettingsValue()
   const player = usePlayerInstance()
-  const { setResponsiveDanmakuConfig } = useXgPlayerUtils()
+  const { setResponsiveSettingsUpdate } = useXgPlayerUtils()
   const { mutate, isPending } = useMutation({
     mutationFn: async (url: string) => {
       const matchedDanmaku = await apiClient.comment.getExtcomment({ url })
@@ -109,9 +109,9 @@ export const AddDanmaku = () => {
       player.danmu?.clear()
 
       player.danmu?.updateComments(mergedDanmakus, true)
-      setResponsiveDanmakuConfig(player)
+      setResponsiveSettingsUpdate(player)
     },
-    [danmakuDuration, player, setResponsiveDanmakuConfig],
+    [danmakuDuration, player, setResponsiveSettingsUpdate],
   )
 
   const handleImportDanmakuFile = useCallback(async () => {
@@ -157,12 +157,12 @@ export const AddDanmaku = () => {
     toast({
       title: `导入成功`,
     })
-  }, [danmaku, danmakuDuration, hash, player, setResponsiveDanmakuConfig, toast])
+  }, [danmaku, danmakuDuration, hash, player, setResponsiveSettingsUpdate, toast])
   return (
     <div className="space-y-6 pt-1">
       <form className="mt-1 flex flex-col gap-3" onSubmit={handleOnSubmit}>
         <Label htmlFor="width" className="text-zinc-600">
-          从第三方网址导入
+          从第三方网址导入弹幕
         </Label>
         <Input
           id="width"

src/renderer/src/components/modules/player/setting/items/damaku/DanmakuSource.tsx

@@ -59,7 +59,7 @@ const SourceList = memo(() => {
   const { danmaku } = useSettingConfig()
   const video = useAtomValue(videoAtom)
   const player = usePlayerInstance()
-  const { setResponsiveDanmakuConfig } = useXgPlayerUtils()
+  const { setResponsiveSettingsUpdate } = useXgPlayerUtils()
   const handleCheckDanmaku = debounce((params: { checked: CheckedState; source: string }) => {
     const { checked, source } = params
     if (checked === 'indeterminate') {
@@ -89,7 +89,7 @@ const SourceList = memo(() => {
       player.danmu?.clear()
 
       player.danmu?.updateComments(parsedDanmaku, true)
-      setResponsiveDanmakuConfig(player)
+      setResponsiveSettingsUpdate(player)
 
       db.history.update(video.hash, {
         danmaku,

src/renderer/src/components/modules/settings/views/Layout.tsx

@@ -13,7 +13,7 @@ export const FieldsCardLayout: FC<FieldsCardLayoutProps> = ({ children, title, c
   return (
     <section
       className={cn(
-        'min-h-20 space-y-3 rounded-lg border bg-zinc-50 p-3 dark:bg-zinc-900',
+        'min-h-20 space-y-4 rounded-lg border bg-zinc-50 p-3 dark:bg-zinc-900',
         className,
       )}
     >

src/renderer/src/components/modules/settings/views/player/VideoSetting.tsx

@@ -19,6 +19,15 @@ export const VideoSetting = () => {
           }}
         />
       </FieldLayout>
+
+      <FieldLayout title="底部迷你进度条">
+        <SettingSwitch
+          value={playerSetting.enableMiniProgress}
+          onCheckedChange={(value) => {
+            setPlayerSetting((prev) => ({ ...prev, enableMiniProgress: value }))
+          }}
+        />
+      </FieldLayout>
     </FieldsCardLayout>
   )
 }