Refactor transcription buttons (#686)

* refactor transcription buttons

* fix style

enjoy/src/renderer/components/medias/index.ts

@@ -7,6 +7,7 @@ export * from "./media-recorder";
 export * from "./media-transcription";
 export * from "./media-transcription-read-button";
 export * from "./media-transcription-form";
+export * from "./media-transcription-generate-button";
 export * from "./media-player";
 export * from "./media-provider";
 export * from "./media-tabs";

enjoy/src/renderer/components/medias/media-transcription-form.tsx

@@ -25,15 +25,21 @@ import { t } from "i18next";
 import { useContext, useState } from "react";
 import { LoaderIcon } from "lucide-react";
 
-export const MediaTranscriptionForm = () => {
+export const MediaTranscriptionForm = (props: {
+  children?: React.ReactNode;
+}) => {
   const [open, setOpen] = useState(false);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline" size="sm">
-          <span className="capitalize">{t("edit")}</span>
-        </Button>
+        {props.children ? (
+          props.children
+        ) : (
+          <Button variant="outline" size="sm">
+            <span className="capitalize">{t("edit")}</span>
+          </Button>
+        )}
       </DialogTrigger>
       <DialogContent className="max-w-screen-sm xl:max-w-screen-md">
         <TranscriptionForm setOpen={setOpen} />

enjoy/src/renderer/components/medias/media-transcription-generate-button.tsx

@@ -0,0 +1,68 @@
+import { useContext, useRef, useState } from "react";
+import { MediaPlayerProviderContext } from "@renderer/context";
+import { t } from "i18next";
+import {
+  Button,
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@renderer/components/ui";
+import { LoaderIcon } from "lucide-react";
+
+export const MediaTranscriptionGenerateButton = (props: {
+  children: React.ReactNode;
+}) => {
+  const { media, generateTranscription, transcribing, transcription } =
+    useContext(MediaPlayerProviderContext);
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger disabled={transcribing} asChild>
+        {props.children ? (
+          props.children
+        ) : (
+          <Button
+            disabled={transcribing}
+            variant="outline"
+            className="min-w-max"
+          >
+            {(transcribing || transcription.state === "processing") && (
+              <LoaderIcon className="animate-spin w-4 mr-2" />
+            )}
+            <span>
+              {transcription.result ? t("regenerate") : t("transcribe")}
+            </span>
+          </Button>
+        )}
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t("transcribe")}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("transcribeMediaConfirmation", {
+              name: media.name,
+            })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() =>
+              generateTranscription({
+                originalText: "",
+              })
+            }
+          >
+            {t("transcribe")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

enjoy/src/renderer/components/medias/media-transcription-read-button.tsx

@@ -53,7 +53,9 @@ import { Caption, RecordingDetail } from "@renderer/components";
 const TEN_MINUTES = 60 * 10;
 let interval: NodeJS.Timeout;
 
-export const MediaTranscriptionReadButton = () => {
+export const MediaTranscriptionReadButton = (props: {
+  children: React.ReactNode;
+}) => {
   const [open, setOpen] = useState(false);
   const [deleting, setDeleting] = useState<RecordingType>(null);
   const { EnjoyApp } = useContext(AppSettingsProviderContext);
@@ -107,9 +109,13 @@ export const MediaTranscriptionReadButton = () => {
     <>
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
-          <Button variant="outline" size="sm" className="hidden lg:block">
-            {t("readThrough")}
-          </Button>
+          {props.children ? (
+            props.children
+          ) : (
+            <Button variant="outline" size="sm" className="hidden lg:block">
+              {t("readThrough")}
+            </Button>
+          )}
         </DialogTrigger>
         <DialogContent
           onPointerDownOutside={(event) => event.preventDefault()}

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

@@ -7,27 +7,26 @@ import {
 import { t } from "i18next";
 import {
   Button,
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogContent,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogCancel,
-  AlertDialogAction,
   PingPoint,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
 } from "@renderer/components/ui";
 import {
   LoaderIcon,
   CheckCircleIcon,
   MicIcon,
   PencilLineIcon,
+  SquareMenuIcon,
 } from "lucide-react";
 import { AlignmentResult } from "echogarden/dist/api/API.d.js";
 import { formatDuration } from "@renderer/lib/utils";
-import { MediaTranscriptionForm } from "./media-transcription-form";
-import { MediaTranscriptionReadButton } from "./media-transcription-read-button";
+import {
+  MediaTranscriptionForm,
+  MediaTranscriptionReadButton,
+  MediaTranscriptionGenerateButton,
+} from "@renderer/components";
 
 export const MediaTranscription = () => {
   const containerRef = useRef<HTMLDivElement>();
@@ -38,7 +37,6 @@ export const MediaTranscription = () => {
     wavesurfer,
     setCurrentSegmentIndex,
     transcription,
-    generateTranscription,
     transcribing,
     transcribingProgress,
   } = useContext(MediaPlayerProviderContext);
@@ -120,48 +118,46 @@ export const MediaTranscription = () => {
             <span className="capitalize">{t("transcript")}</span>
           </div>
           <div className="flex space-x-2">
-            <MediaTranscriptionReadButton />
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  disabled={
-                    transcribing || transcription.state === "processing"
-                  }
-                  className="capitalize"
-                >
-                  {(transcribing || transcription.state === "processing") && (
-                    <LoaderIcon className="animate-spin w-4 mr-2" />
-                  )}
-                  {transcription.result ? t("regenerate") : t("transcribe")}
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>{t("transcribe")}</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    {t("transcribeMediaConfirmation", {
-                      name: media.name,
-                    })}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-                  <AlertDialogAction
-                    onClick={() =>
-                      generateTranscription({
-                        originalText: "",
-                      })
-                    }
-                  >
-                    {t("transcribe")}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-
-            <MediaTranscriptionForm />
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <SquareMenuIcon className="w-5 h-5 text-muted-foreground" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-36">
+                <DropdownMenuItem asChild>
+                  <MediaTranscriptionReadButton>
+                    <Button variant="ghost" className="block w-full">
+                      {t("readThrough")}
+                    </Button>
+                  </MediaTranscriptionReadButton>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <MediaTranscriptionGenerateButton>
+                    <Button
+                      variant="ghost"
+                      className="w-full"
+                      disabled={transcribing}
+                    >
+                      {(!transcribing ||
+                        transcription.state === "processing") && (
+                        <LoaderIcon className="animate-spin w-4 mr-2" />
+                      )}
+                      <span>
+                        {transcription.result
+                          ? t("regenerate")
+                          : t("transcribe")}
+                      </span>
+                    </Button>
+                  </MediaTranscriptionGenerateButton>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <MediaTranscriptionForm>
+                    <Button variant="ghost" className="block w-full">
+                      {t("edit")}
+                    </Button>
+                  </MediaTranscriptionForm>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
       </div>