Feat copy fulltext of transcription (#1221)

* copy fulltext of transcription

* fix warning

* fix react warning

enjoy/src/i18n/en.json

@@ -936,5 +936,7 @@
   "exit": "Exit",
   "layout": "Layout",
   "horizontal": "Horizontal",
-  "vertical": "Vertical"
+  "vertical": "Vertical",
+  "copied": "Copied",
+  "copyFullText": "Copy full text"
 }

enjoy/src/i18n/zh-CN.json

@@ -936,5 +936,7 @@
   "exit": "退出",
   "layout": "布局",
   "horizontal": "水平",
-  "vertical": "垂直"
+  "vertical": "垂直",
+  "copied": "已复制",
+  "copyFullText": "复制全文"
 }

enjoy/src/renderer/components/medias/media-left-panel/media-recordings.tsx

@@ -149,7 +149,7 @@ export const MediaRecordings = () => {
           #{currentSegmentIndex + 1}/{transcription?.result?.timeline?.length}
         </div>
         <DropdownMenu>
-          <DropdownMenuTrigger>
+          <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="sm">
               <SquareMenuIcon className="w-5 h-5 text-muted-foreground" />
             </Button>

enjoy/src/renderer/components/medias/media-left-panel/media-transcription-print.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { forwardRef, useContext } from "react";
 import { Button, toast } from "@renderer/components/ui";
 import { t } from "i18next";
 import {
@@ -9,7 +9,10 @@ import { AlignmentResult } from "echogarden/dist/api/API.d.js";
 import { convertWordIpaToNormal } from "@/utils";
 import template from "./transcription.template.html?raw";
 
-export const MediaTranscriptionPrint = () => {
+export const MediaTranscriptionPrint = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>((_, ref) => {
   const { media, transcription } = useContext(MediaShadowProviderContext);
   const { EnjoyApp, learningLanguage, ipaMappings } = useContext(
     AppSettingsProviderContext
@@ -74,8 +77,15 @@ export const MediaTranscriptionPrint = () => {
   }
 
   return (
-    <Button variant="ghost" className="block w-full" onClick={download}>
+    <Button
+      ref={ref}
+      variant="ghost"
+      className="block w-full"
+      onClick={download}
+    >
       {t("print")}
     </Button>
   );
-};
+});
+
+MediaTranscriptionPrint.displayName = "MediaTranscriptionPrint";

enjoy/src/renderer/components/medias/media-left-panel/media-transcription.tsx

@@ -12,6 +12,7 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  toast,
 } from "@renderer/components/ui";
 import {
   LoaderIcon,
@@ -30,6 +31,7 @@ import {
   TranscriptionEditButton,
 } from "@renderer/components";
 import { Sentence } from "@renderer/components";
+import { useCopyToClipboard } from "@uidotdev/usehooks";
 
 export const MediaTranscription = (props: { display?: boolean }) => {
   const { display } = props;
@@ -58,6 +60,7 @@ export const MediaTranscription = (props: { display?: boolean }) => {
       segment: SegmentType;
     }[]
   >([]);
+  const [_, copyToClipboard] = useCopyToClipboard();
 
   const fetchSegmentStats = async () => {
     if (!media) return;
@@ -88,6 +91,15 @@ export const MediaTranscription = (props: { display?: boolean }) => {
     }, 300);
   };
 
+  const handleCopyFullText = () => {
+    if (!transcription?.result) return;
+    const fullText = (transcription.result as AlignmentResult).timeline
+      .map((s) => s.text)
+      .join("\n\n");
+    copyToClipboard(fullText);
+    toast.success(t("copied"));
+  };
+
   useEffect(() => {
     if (!transcription?.result) return;
 
@@ -168,6 +180,15 @@ export const MediaTranscription = (props: { display?: boolean }) => {
                 <DropdownMenuItem asChild>
                   <MediaTranscriptionPrint />
                 </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Button
+                    variant="ghost"
+                    className="block w-full"
+                    onClick={handleCopyFullText}
+                  >
+                    {t("copyFullText")}
+                  </Button>
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>