refactor: 调整弹幕的加载

duan602728596 · Apr 24, 2023 · f07ea5b · f07ea5b
1 parent a1c4cad
commit f07ea5b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 87 deletions.
diff --git a/packages/48tools/src/pages/PlayerWindow/LiveInfo/LiveInfo.tsx b/packages/48tools/src/pages/PlayerWindow/LiveInfo/LiveInfo.tsx
@@ -1,23 +1,9 @@
 import { ipcRenderer } from 'electron';
-import {
-  Fragment,
-  useState,
-  type ReactElement,
-  type ReactNode,
-  type Dispatch as D,
-  type SetStateAction as S,
-  type MouseEvent
-} from 'react';
+import type { ReactElement, ReactNode, MouseEvent } from 'react';
 import * as PropTypes from 'prop-types';
-import { Avatar, Button, Tag, Tooltip, Space, message } from 'antd';
-import type { UseMessageReturnType } from '@48tools-types/antd';
-import {
-  ToolTwoTone as IconToolTwoTone,
-  UnorderedListOutlined as IconUnorderedListOutlined,
-  StopOutlined as IconStopOutlined
-} from '@ant-design/icons';
+import { Avatar, Button, Tag, Tooltip } from 'antd';
+import { ToolTwoTone as IconToolTwoTone } from '@ant-design/icons';
 import { source } from '../../../utils/snh48';
-import { getDanmuLocal, setDanmuLocal } from '../function/danmuLocal';
 import type { PlayerInfo } from '../PlayerWindow';
 import type { LiveRoomInfo } from '../../48/services/interface';
 
@@ -29,15 +15,6 @@ interface LiveInfoProps {
 /* 显示直播信息 */
 function LiveInfo(props: LiveInfoProps): ReactElement {
   const { playerInfo, info }: LiveInfoProps = props;
-  const [messageApi, messageContextHolder]: UseMessageReturnType = message.useMessage();
-  const [dl, setDl]: [boolean, D<S<boolean>>] = useState(getDanmuLocal());
-
-  // 设置弹幕
-  function handleDanmuSwitchClick(value: boolean, event: MouseEvent): void {
-    setDl(value);
-    setDanmuLocal(value);
-    messageApi.info(`${ value ? '开启' : '关闭' }弹幕加载，下次观看录播时生效。`);
-  }
 
   // 打开开发者工具
   function handleOpenDeveloperToolsClick(event: MouseEvent): void {
@@ -59,47 +36,22 @@ function LiveInfo(props: LiveInfoProps): ReactElement {
   }
 
   return (
-    <Fragment>
-      <header className="shrink-0 mb-[8px]">
-        <h1 className="inline-block mb-[8px] mr-[6px] text-[16px]">{ playerInfo.title }</h1>
-        {
-          playerInfo.liveMode === 1
-            ? <Tag color="blue">录屏</Tag>
-            : (playerInfo.liveType === 2 ? <Tag color="volcano">电台</Tag> : <Tag color="purple">视频</Tag>)
-        }
-        <div className="flex">
-          <div className="grow">{ infoRender() }</div>
-          <div className="shrink-0">
-            <Space>
-              {
-                dl ? (
-                  <Tooltip title="关闭弹幕加载功能">
-                    <Button type="primary"
-                      danger={ true }
-                      icon={ <IconStopOutlined /> }
-                      aria-label="关闭弹幕加载功能"
-                      onClick={ (event: MouseEvent): void => handleDanmuSwitchClick(false, event) }
-                    />
-                  </Tooltip>
-                ) : (
-                  <Tooltip title="开启弹幕加载功能">
-                    <Button type="primary"
-                      icon={ <IconUnorderedListOutlined /> }
-                      aria-label="开启弹幕加载功能"
-                      onClick={ (event: MouseEvent): void => handleDanmuSwitchClick(true, event) }
-                    />
-                  </Tooltip>
-                )
-              }
-              <Tooltip title="开发者工具">
-                <Button type="text" icon={ <IconToolTwoTone /> } aria-label="开发者工具" onClick={ handleOpenDeveloperToolsClick } />
-              </Tooltip>
-            </Space>
-          </div>
+    <header className="shrink-0 mb-[8px]">
+      <h1 className="inline-block mb-[8px] mr-[6px] text-[16px]">{ playerInfo.title }</h1>
+      {
+        playerInfo.liveMode === 1
+          ? <Tag color="blue">录屏</Tag>
+          : (playerInfo.liveType === 2 ? <Tag color="volcano">电台</Tag> : <Tag color="purple">视频</Tag>)
+      }
+      <div className="flex">
+        <div className="grow">{ infoRender() }</div>
+        <div className="shrink-0">
+          <Tooltip title="开发者工具">
+            <Button type="text" icon={ <IconToolTwoTone /> } aria-label="开发者工具" onClick={ handleOpenDeveloperToolsClick } />
+          </Tooltip>
         </div>
-      </header>
-      { messageContextHolder }
-    </Fragment>
+      </div>
+    </header>
   );
 }
 

diff --git a/packages/48tools/src/pages/PlayerWindow/Video/RecordVideo.tsx b/packages/48tools/src/pages/PlayerWindow/Video/RecordVideo.tsx
@@ -5,7 +5,6 @@ import { source, engineUserAgent } from '../../../utils/snh48';
 import { requestDownloadFile } from '../../48/services/pocket48';
 import { formatTsUrl } from '../../48/Pocket48/Pocket48Record/Pocket48Record';
 import { danmuStore } from '../function/DanmuStore';
-import { getDanmuLocal } from '../function/danmuLocal';
 import type { PlayerInfo } from '../PlayerWindow';
 import type { LiveRoomInfo } from '../../48/services/interface';
 import type { DanmuItem } from '../types';
@@ -63,10 +62,10 @@ function RecordVideo(props: RecordVideoProps): ReactElement {
 
   // 生成弹幕文件
   function createVideoTrack(): void {
-    if (videoLoaded && danmuList.length && videoRef.current && getDanmuLocal()) {
+    if (videoLoaded && danmuList.length && videoRef.current) {
       const track: TextTrack = videoRef.current.addTextTrack('subtitles', '弹幕', 'zh');
 
-      track.mode = 'showing';
+      track.mode = 'hidden';
 
       for (const item of danmuList) {
         const vttcue: VTTCue = new VTTCue(item.currentTime, item.currentTime + 3, `${ item.nickname }：${ item.message }`);

diff --git a/packages/48tools/src/pages/PlayerWindow/function/danmuLocal.ts b/packages/48tools/src/pages/PlayerWindow/function/danmuLocal.ts