feat: support parsing json format danmaku files

Author: suemor233

.gitignore

@@ -4,4 +4,5 @@ out
 .DS_Store
 *.log*
 .eslintcache
-.env
+.env
+*.mas.*

electron-builder.yml

@@ -70,4 +70,6 @@ releaseInfo:
   releaseNotes: |
     修复 windows 下以英文开头的网络路径无法识别的问题
     修复 windows 通过拖拽窗口退出最大化状态按扭无法切换的问题
-    
+    优化调整弹幕字体大小的体验
+    支持导入 JSON 格式弹幕文件
+    修复手动导入弹幕后会导致取消勾选弹幕失效

src/main/lib/danmaku.ts

@@ -1,14 +1,33 @@
-export const parseBilibiliDanmaku = (params: { danmakus: BilibliDanmakuItem[] }) => {
-  const { danmakus } = params
-  return danmakus.map((item) => {
-    const [time, type, _, color, timestamp] = item.$.p.split(',').map(Number)
-    const txt = item._
-    return {
-      cid: timestamp,
-      m: txt,
-      p: `${time},${type},${decimalToHex(color)},${timestamp}`,
+import { parseStringPromise } from 'xml2js'
+
+export const parseBilibiliDanmaku = async (params: {
+  fileData: string
+  type: '.xml' | '.json'
+}) => {
+  const { fileData, type } = params
+  switch (type) {
+    case '.xml': {
+      const result = (await parseStringPromise(fileData)) as BilibiliXmlDanmakus
+      const danmakus = result.i.d
+      return danmakus?.map((item) => {
+        const [time, type, _, color, timestamp] = item.$.p.split(',').map(Number)
+        const txt = item._
+        return {
+          cid: timestamp,
+          m: txt,
+          p: `${time},${type},${decimalToHex(color)},${timestamp}`,
+        }
+      })
+    }
+    case '.json': {
+      const danmakus = JSON.parse(fileData) as BilibiliJsonDanmakuItem[]
+      return danmakus.map((item) => ({
+        cid: item.ctime,
+        m: item.content,
+        p: `${((item?.progress ?? 0) / 1000).toFixed(1)},${item.mode},${decimalToHex(item.color)},${item.id}`,
+      }))
     }
-  })
+  }
 }
 
 type Mode = 'top' | 'bottom' | 'scroll'
@@ -18,7 +37,7 @@ export const DanmuPosition: Record<number, Mode> = {
   5: 'top',
 }
 
-export interface BilibliDanmakuItem {
+export interface BilibliXmlDanmakuItem {
   _: string
   $: {
     p: string
@@ -34,10 +53,27 @@ export interface BilibiliXmlDanmakus {
     state: string[]
     real_name: string[]
     source: string[]
-    d: BilibliDanmakuItem[]
+    d: BilibliXmlDanmakuItem[]
   }
 }
 
-export const decimalToHex = (decimal: number): string => {
+interface BilibiliJsonDanmakuItem {
+  id: number // 评论的唯一标识符
+  mode: number // 弹幕的显示模式（例如滚动、顶部、底部等）
+  progress?: number // 弹幕的显示进度
+  fontsize: number // 字体大小
+  color: number // 字体颜色，通常为十进制表示的 RGB 值
+  midHash: string // 用户的哈希值，可能是用于匿名标识用户
+  content: string // 弹幕内容
+  ctime: number // 创建时间，通常是 UNIX 时间戳
+  weight: number // 权重，可能影响弹幕的显示优先级
+  idStr: string // 字符串形式的唯一标识符
+  attr: number // 弹幕的附加属性
+}
+
+export const decimalToHex = (decimal?: number): string => {
+  if (!decimal) {
+    return '#FFFFFF'
+  }
   return `#${decimal.toString(16).padStart(6, '0').toUpperCase()}`
 }

src/main/tipc/player.ts

@@ -2,7 +2,6 @@ import fs from 'node:fs'
 import path from 'node:path'
 
 import { MARCHEN_PROTOCOL_PREFIX } from '@main/constants/protocol'
-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'
@@ -11,7 +10,6 @@ import { showFileSelectionDialog } from '@main/modules/showDialog'
 import { calculateFileHashByBuffer } from '@renderer/lib/calc-file-hash'
 import { dialog } from 'electron'
 import naturalCompare from 'string-natural-compare'
-import { parseStringPromise } from 'xml2js'
 
 import { t } from './_instance'
 
@@ -180,18 +178,28 @@ export const playerRoute = {
     isDialogOpen = true
     try {
       const filePath = await showFileSelectionDialog({
-        filters: [{ name: '弹幕文件', extensions: ['xml'] }],
+        filters: [{ name: '弹幕文件', extensions: ['xml', 'json'] }],
       })
       if (!filePath) {
-        return
+        return {
+          ok: 0,
+          message: '请选择弹幕文件',
+        }
+      }
+      const extName = path.extname(filePath).toLowerCase()
+      if (extName !== '.xml' && extName !== '.json') {
+        return {
+          ok: 0,
+          message: '请选择正确的弹幕文件',
+        }
       }
       const fileData = fs.readFileSync(filePath, 'utf-8')
-      const result = (await parseStringPromise(fileData)) as BilibiliXmlDanmakus
       return {
         ok: 1,
         data: {
-          danmaku: parseBilibiliDanmaku({
-            danmakus: result.i.d,
+          danmaku: await parseBilibiliDanmaku({
+            fileData,
+            type: extName,
           }),
           source: filePath,
         },

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

@@ -7,7 +7,7 @@ import { useToast } from '@renderer/components/ui/toast'
 import { db } from '@renderer/database/db'
 import type { DB_Danmaku, DB_History } from '@renderer/database/schemas/history'
 import { tipcClient } from '@renderer/lib/client'
-import { parseDanmakuData } from '@renderer/lib/danmaku'
+import { mergeDanmaku, parseDanmakuData } from '@renderer/lib/danmaku'
 import queryClient from '@renderer/lib/query-client'
 import { isWeb } from '@renderer/lib/utils'
 import { apiClient } from '@renderer/request'
@@ -98,20 +98,18 @@ export const AddDanmaku = () => {
       if (!player) {
         return
       }
-      const oldDanmaku = player.danmu?.config.comments
+      const mergedDanmakuData = mergeDanmaku(danmaku)
 
       const parsedDanmaku = parseDanmakuData({
-        danmuData,
+        danmuData: [...(mergedDanmakuData ?? []), ...(danmuData ?? [])],
         duration: +danmakuDuration,
       })
-
-      const mergedDanmakus = [...(oldDanmaku || []), ...(parsedDanmaku || [])]
       player.danmu?.clear()
 
-      player.danmu?.updateComments(mergedDanmakus, true)
+      player.danmu?.updateComments(parsedDanmaku, true)
       setResponsiveSettingsUpdate(player)
     },
-    [danmakuDuration, player, setResponsiveSettingsUpdate],
+    [danmaku, danmakuDuration, player, setResponsiveSettingsUpdate],
   )
 
   const handleImportDanmakuFile = useCallback(async () => {
@@ -174,7 +172,7 @@ export const AddDanmaku = () => {
       {!isWeb && (
         <div className="flex flex-col gap-3">
           <Label htmlFor="width" className="text-zinc-600">
-            从弹幕文件导入，支持 XML 格式
+            从弹幕文件导入，支持 XML 和 JSON 格式
           </Label>
           <Button size="sm" variant="outline" onClick={handleImportDanmakuFile}>
             点击导入弹幕文件

src/renderer/src/components/modules/settings/views/player/list.ts

@@ -1,27 +1,35 @@
-import type { SelectGroup } from "@renderer/components/modules/shared/setting/SettingSelect"
+import type { SelectGroup } from '@renderer/components/modules/shared/setting/SettingSelect'
 
 export const danmakuFontSizeList = [
   {
-    label: '极小',
+    label: '80%',
     value: '22',
   },
   {
-    label: '较小',
+    label: '90%',
     value: '24',
   },
   {
-    label: '适中',
+    label: '100%',
     value: '26',
     default: true,
   },
   {
-    label: '较大',
+    label: '110%',
     value: '28',
   },
   {
-    label: '极大',
+    label: '120%',
     value: '30',
   },
+  {
+    label: '130%',
+    value: '32',
+  },
+  {
+    label: '140%',
+    value: '34',
+  },
 ] satisfies SelectGroup[]
 
 export const danmakuDurationList = [