Merge pull request #105 from solidSpoon/0105修复

solidSpoon · web-flow · commit fc07a5c01ef5 · 2025-01-05T15:10:02.000+08:00
修复英文字幕不能隐藏的问题
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "dash-player",
     "productName": "DashPlayer",
-    "version": "5.1.1",
+    "version": "5.1.2",
     "description": "My Electron application description",
     "main": ".vite/build/main.js",
     "scripts": {
diff --git a/src/fronted/components/playerSubtitle/PlayerSubtitle.tsx b/src/fronted/components/playerSubtitle/PlayerSubtitle.tsx
@@ -1,6 +1,6 @@
 import usePlayerController from '@/fronted/hooks/usePlayerController';
 import React, { ReactElement } from 'react';
-import PlayerTranslatableLine from '@/fronted/components/playerSubtitle/PlayerTranslatableLine';
+import FullscreenTranslatableLine from '@/fronted/components/srt-cops/fullscreen-translatable-line';
 import PlayerNormalLine from '@/fronted/components/playerSubtitle/PlayerNormalLine';
 import StrUtil from '@/common/utils/str-util';
 
@@ -22,7 +22,7 @@ const PlayerSubtitle = () => {
         return tempEle.map((item, index) => {
             if (index === 0) {
                 return (
-                    <PlayerTranslatableLine
+                    <FullscreenTranslatableLine
                         adjusted={srtTender?.adjusted(sentence) ?? false}
                         clearAdjust={clearAdjust}
                         key={`first-${sentence.key}`}
diff --git a/src/fronted/components/playerSubtitle/PlayerTranslatableLine.tsx b/src/fronted/components/playerSubtitle/PlayerTranslatableLine.tsx
diff --git a/src/fronted/components/srt-cops/atoms/translatable-line-core.tsx b/src/fronted/components/srt-cops/atoms/translatable-line-core.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Word from './Word';
+import Word from './word';
 import useSetting from '../../../hooks/useSetting';
 import { cn } from '@/fronted/lib/utils';
 import { FONT_SIZE } from '../../../styles/style';
@@ -10,12 +10,14 @@ import useCopyModeController from '../../../hooks/useCopyModeController';
 interface TranslatableSubtitleLineCoreParam {
     sentence: Sentence;
     show: boolean;
+    hoverDark?: boolean;
 }
 
-const TranslatableLine = ({
-                              sentence,
-                              show
-                          }: TranslatableSubtitleLineCoreParam) => {
+const TranslatableLineCore = ({
+                                  sentence,
+                                  show,
+                                  hoverDark
+                              }: TranslatableSubtitleLineCoreParam) => {
     const text = sentence.text;
     const sentenceStruct = sentence.struct;
     const fontSize = useSetting((state) =>
@@ -41,7 +43,7 @@ const TranslatableLine = ({
     ) : (
         <div
             className={cn(
-                'flex flex-wrap justify-center items-end w-0 flex-1 px-10 pt-2.5 pb-2.5 gap-x-2 gap-y-1',
+                'flex flex-wrap justify-center items-end  px-10 pt-2.5 pb-2.5 gap-x-2 gap-y-1',
                 FONT_SIZE['ms1-large'],
                 fontSize === 'fontSizeSmall' && FONT_SIZE['ms1-small'],
                 fontSize === 'fontSizeMedium' && FONT_SIZE['ms1-medium'],
@@ -64,7 +66,8 @@ const TranslatableLine = ({
                                         requestPop={() =>
                                             handleRequestPop(partId)
                                         }
-                                        show
+                                        show={show}
+                                        alwaysDark={hoverDark}
                                     />
                                 );
                             }
@@ -82,4 +85,8 @@ const TranslatableLine = ({
     );
 };
 
-export default TranslatableLine;
+export default TranslatableLineCore;
+
+TranslatableLineCore.defaultProps = {
+    hoverDark: false
+};
diff --git a/src/fronted/components/srt-cops/atoms/word-pop.tsx b/src/fronted/components/srt-cops/atoms/word-pop.tsx
diff --git a/src/fronted/components/srt-cops/atoms/word.tsx b/src/fronted/components/srt-cops/atoms/word.tsx
@@ -1,8 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 import * as turf from '@turf/turf';
 import {Feature, Polygon} from '@turf/turf';
-import {twMerge} from 'tailwind-merge';
-import WordPop from './WordPop';
+import WordPop from './word-pop';
 import {playUrl, playWord} from '@/common/utils/AudioPlayer';
 import usePlayerController from '../../../hooks/usePlayerController';
 import useSWR from "swr";
@@ -18,7 +17,6 @@ export interface WordParam {
     pop: boolean;
     requestPop: () => void;
     show: boolean;
-    hoverColor?: string;
     alwaysDark?: boolean;
 }
 
@@ -102,7 +100,7 @@ const Word = ({word, original, pop, requestPop, show, alwaysDark}: WordParam) =>
     };
 
     return (
-        <div className={twMerge('flex gap-1')}>
+        <div className={cn('flex gap-1')}>
             <div
                 ref={eleRef}
                 className="rounded select-none"
@@ -146,6 +144,5 @@ const Word = ({word, original, pop, requestPop, show, alwaysDark}: WordParam) =>
 export default Word;
 
 Word.defaultProps = {
-    hoverColor: 'bg-stone-100',
     alwaysDark: false,
 }
diff --git a/src/fronted/components/srt-cops/fullscreen-translatable-line.tsx b/src/fronted/components/srt-cops/fullscreen-translatable-line.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { AiOutlineFieldTime } from 'react-icons/ai';
+import useSetting from '@/fronted/hooks/useSetting';
+import usePlayerController from '@/fronted/hooks/usePlayerController';
+import { p } from '@/common/utils/Util';
+import { FONT_SIZE } from '@/fronted/styles/style';
+import { cn } from '@/fronted/lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/fronted/components/ui/tooltip';
+import { Button } from '@/fronted/components/ui/button';
+import { Sentence } from '@/common/types/SentenceC';
+import TranslatableLineCore from '@/fronted/components/srt-cops/atoms/translatable-line-core';
+import { Bookmark } from 'lucide-react';
+import useFavouriteClip, { mapClipKey } from '@/fronted/hooks/useFavouriteClip';
+import useFile from '@/fronted/hooks/useFile';
+
+interface PlayerTranslatableSubtitleLineParam {
+    sentence: Sentence;
+    adjusted: boolean;
+    clearAdjust: () => void;
+}
+
+const FullscreenTranslatableLine = ({
+                                        sentence,
+                                        adjusted,
+                                        clearAdjust
+                                    }: PlayerTranslatableSubtitleLineParam) => {
+    const fontSize = useSetting((state) =>
+        state.values.get('appearance.fontSize')
+    );
+    const show = usePlayerController((state) => state.showEn);
+    const text = sentence.text;
+    const isFavourite = useFavouriteClip((s) => s.lineClip.get(mapClipKey(useFile.getState().srtHash, sentence.index)) ?? false);
+
+    return (!p(text) || !show) ? (
+        <div />
+    ) : (
+        <div
+            className={cn(
+                'flex justify-center items-center',
+                // 'bg-background/50 text-foreground',
+                FONT_SIZE['ms1-large'],
+                fontSize === 'fontSizeSmall' && FONT_SIZE['ms1-small'],
+                fontSize === 'fontSizeMedium' &&
+                FONT_SIZE['ms1-medium'],
+                fontSize === 'fontSizeLarge' && FONT_SIZE['ms1-large']
+            )}
+        >
+            <div
+                className={cn(
+                    'flex justify-center items-end px-2.5 gap-x-2 gap-y-1 bg-black/50 text-white rounded'
+                )}
+            >
+                {adjusted && (
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    onClick={clearAdjust}
+                                    variant={'ghost'} size={'icon'} className={'w-8 h-8 mb-2.5 flex-shrink-0'}>
+                                    <AiOutlineFieldTime className={cn('fill-gray-300')} />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                点击重置当前句子时间戳
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                )}
+                <TranslatableLineCore sentence={sentence} show={show} hoverDark />
+
+                {adjusted && (
+                    <div className={cn('w-10 h-full flex-shrink-0 py-2.5')}>
+                        {isFavourite && (
+                            <Bookmark className={cn('w-5 h-5 text-white ml-auto')} />
+                        )}
+                    </div>
+                )}
+            </div>
+
+        </div>
+    );
+};
+
+export default FullscreenTranslatableLine;
diff --git a/src/fronted/components/srt-cops/translatable-line-podcast.tsx b/src/fronted/components/srt-cops/translatable-line-podcast.tsx
@@ -3,7 +3,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/fron
 import { Button } from '@/fronted/components/ui/button';
 import { cn } from '@/fronted/lib/utils';
 import { Sentence } from '@/common/types/SentenceC';
-import TranslatableLineCore from '@/fronted/components/srt-cops/atoms/TranslatableLineCore';
+import TranslatableLineCore from '@/fronted/components/srt-cops/atoms/translatable-line-core';
 
 interface TranslatableLinePodcastParam {
     sentence: Sentence;
diff --git a/src/fronted/components/srt-cops/translatable-line.tsx b/src/fronted/components/srt-cops/translatable-line.tsx
@@ -10,7 +10,7 @@ import { Sentence } from '@/common/types/SentenceC';
 import useFavouriteClip, { mapClipKey } from '@/fronted/hooks/useFavouriteClip';
 import useFile from '@/fronted/hooks/useFile';
 import { Bookmark } from 'lucide-react';
-import TranslatableLineCore from '@/fronted/components/srt-cops/atoms/TranslatableLineCore';
+import TranslatableLineCore from '@/fronted/components/srt-cops/atoms/translatable-line-core';
 
 interface TranslatableSubtitleLineParam {
     sentence: Sentence;
@@ -52,15 +52,15 @@ const TranslatableLine = ({
                 fontSize === 'fontSizeLarge' && FONT_SIZE['ms1-large']
             )}
         >
-            <div className={cn('w-10 h-full translate-x-2.5 flex justify-center items-center')}>
+            <div className={cn('w-10 m-2.5 h-10 flex-shrink-0')}>
                 {adjusted && (
                     <TooltipProvider>
                         <Tooltip>
                             <TooltipTrigger asChild>
                                 <Button
                                     onClick={clearAdjust}
-                                    variant={'ghost'} size={'icon'} className={'p-1'}>
-                                    <AiOutlineFieldTime className={cn('w-full h-full fill-black')} />
+                                    variant={'ghost'} size={'icon'}>
+                                    <AiOutlineFieldTime className={cn('fill-black')} />
                                 </Button>
                             </TooltipTrigger>
                             <TooltipContent>
@@ -71,7 +71,7 @@ const TranslatableLine = ({
                 )}
             </div>
             <TranslatableLineCore sentence={sentence} show={show || hovered} />
-            <div className={cn('w-10 h-full flex items-end justify-center pb-2')}>
+            <div className={cn('w-10 h-full flex items-end justify-center pb-2 flex-shrink-0')}>
                 {isFavourite && (
                     <Bookmark className={cn('w-5 h-5  text-yellow-500 dark:text-yellow-600')} />
                 )}

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "dash-player",`
`3`	`3`	`"productName": "DashPlayer",`
`4`		`- "version": "5.1.1",`
	`4`	`+ "version": "5.1.2",`
`5`	`5`	`"description": "My Electron application description",`
`6`	`6`	`"main": ".vite/build/main.js",`
`7`	`7`	`"scripts": {`