Improve transcription form (#730)

* add collapsible component

* hide subtitle upload as default when transcribe

* fix typo

enjoy/package.json

@@ -92,6 +92,7 @@
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",

enjoy/src/i18n/en.json

@@ -623,5 +623,6 @@
   "allLanguages": "All languages",
   "search": "Search",
   "noData": "No data",
-  "selectedFiles": "Selected files"
+  "selectedFiles": "Selected files",
+  "moreOptions": "More options"
 }

enjoy/src/i18n/zh-CN.json

@@ -623,5 +623,6 @@
   "allLanguages": "全部语言",
   "search": "搜索",
   "noData": "没有数据",
-  "selectedFiles": "已选中文件"
+  "selectedFiles": "已选中文件",
+  "moreOptions": "更多选项"
 }

enjoy/src/renderer/components/transcriptions/transcription-create-form.tsx

@@ -3,11 +3,14 @@ import {
   AppSettingsProviderContext,
 } from "@renderer/context";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import {
   Button,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
   Form,
   FormField,
   FormItem,
@@ -26,7 +29,7 @@ import {
 } from "@renderer/components/ui";
 import { t } from "i18next";
 import { LANGUAGES } from "@/constants";
-import { LoaderIcon } from "lucide-react";
+import { ChevronDownIcon, ChevronUpIcon, LoaderIcon } from "lucide-react";
 import { parseText } from "media-captions";
 
 const transcriptionSchema = z.object({
@@ -51,6 +54,7 @@ export const TranscriptionCreateForm = (props: {
   } = props;
   const { learningLanguage } = useContext(AppSettingsProviderContext);
   const { whisperConfig } = useContext(AISettingsProviderContext);
+  const [collapsibleOpen, setCollapsibleOpen] = useState(false);
 
   const form = useForm<z.infer<typeof transcriptionSchema>>({
     resolver: zodResolver(transcriptionSchema),
@@ -171,51 +175,66 @@ export const TranscriptionCreateForm = (props: {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="text"
-          render={({ field }) => (
-            <FormItem className="grid w-full items-center gap-1.5">
-              <FormLabel>
-                {t("uploadTranscriptFile")}({t("optinal")})
-              </FormLabel>
-              <Input
-                disabled={transcribing}
-                type="file"
-                accept=".txt,.srt,.vtt"
-                onChange={async (event) => {
-                  const file = event.target.files[0];
-
-                  if (file) {
-                    parseSubtitle(file)
-                      .then((text) => {
-                        field.onChange(text);
-                      })
-                      .catch((error) => {
-                        toast.error(error.message);
-                      });
-                  } else {
-                    field.onChange("");
-                  }
-                }}
-              />
-              {field.value != undefined && (
-                <>
+        <Collapsible open={collapsibleOpen} onOpenChange={setCollapsibleOpen}>
+          <CollapsibleContent>
+            <FormField
+              control={form.control}
+              name="text"
+              render={({ field }) => (
+                <FormItem className="grid w-full items-center gap-1.5">
                   <FormLabel>
-                    {t("transcript")}
+                    {t("uploadTranscriptFile")}({t("optinal")})
                   </FormLabel>
-                  <Textarea
-                    className="h-36"
-                    {...field}
+                  <Input
                     disabled={transcribing}
+                    type="file"
+                    accept=".txt,.srt,.vtt"
+                    onChange={async (event) => {
+                      const file = event.target.files[0];
+
+                      if (file) {
+                        parseSubtitle(file)
+                          .then((text) => {
+                            field.onChange(text);
+                          })
+                          .catch((error) => {
+                            toast.error(error.message);
+                          });
+                      } else {
+                        field.onChange("");
+                      }
+                    }}
                   />
-                </>
+                  {field.value != undefined && (
+                    <>
+                      <FormLabel>{t("transcript")}</FormLabel>
+                      <Textarea
+                        className="h-36"
+                        {...field}
+                        disabled={transcribing}
+                      />
+                    </>
+                  )}
+                  <FormMessage />
+                </FormItem>
               )}
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        {transcribing && (
+            />
+          </CollapsibleContent>
+          <div className="flex justify-center my-4">
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <span className="">{t("moreOptions")}</span>
+                {collapsibleOpen ? (
+                  <ChevronUpIcon className="h-4 w-4" />
+                ) : (
+                  <ChevronDownIcon className="h-4 w-4" />
+                )}
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+        </Collapsible>
+
+        {transcribing && form.watch("service") === "local" && (
           <div className="mb-4">
             <div className="flex items-center space-x-4 mb-2">
               <PingPoint colorClassName="bg-yellow-500" />

enjoy/src/renderer/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -1,35 +1,36 @@
 export * from "./accordion";
 export * from "./alert";
+export * from "./alert-dialog";
+export * from "./aspect-ratio";
+export * from "./avatar";
 export * from "./badage";
 export * from "./button";
+export * from "./card";
+export * from "./collapsible";
+export * from "./command";
+export * from "./dialog";
+export * from "./dropdown-menu";
+export * from "./floating-toolbar";
+export * from "./form";
+export * from "./hover-card";
+export * from "./input";
+export * from "./label";
 export * from "./menubar";
+export * from "./ping-point";
+export * from "./popover";
 export * from "./progress";
 export * from "./radial-progress";
-export * from "./separator";
-export * from "./tabs";
-export * from "./table";
-export * from "./label";
-export * from "./form";
-export * from "./input";
-export * from "./avatar";
-export * from "./alert-dialog";
-export * from "./card";
-export * from "./toggle";
 export * from "./radio-group";
 export * from "./scroll-area";
-export * from "./dialog";
-export * from "./aspect-ratio";
-export * from "./skeleton";
-export * from "./popover";
-export * from "./slider";
-export * from "./tooltip";
-export * from "./textarea";
-export * from "./ping-point";
-export * from "./dropdown-menu";
-export * from "./switch";
 export * from "./select";
+export * from "./separator";
 export * from "./sheet";
-export * from "./hover-card";
-export * from "./floating-toolbar";
+export * from "./slider";
+export * from "./skeleton";
 export * from "./sonner";
-export * from "./command";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./textarea";
+export * from "./toggle";
+export * from "./tooltip";

yarn.lock

@@ -6044,7 +6044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-collapsible@npm:1.1.0":
+"@radix-ui/react-collapsible@npm:1.1.0, @radix-ui/react-collapsible@npm:^1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-collapsible@npm:1.1.0"
   dependencies:
@@ -14331,6 +14331,7 @@ __metadata:
     "@radix-ui/react-alert-dialog": "npm:^1.1.1"
     "@radix-ui/react-aspect-ratio": "npm:^1.1.0"
     "@radix-ui/react-avatar": "npm:^1.1.0"
+    "@radix-ui/react-collapsible": "npm:^1.1.0"
     "@radix-ui/react-dropdown-menu": "npm:^2.1.1"
     "@radix-ui/react-hover-card": "npm:^1.1.1"
     "@radix-ui/react-icons": "npm:^1.3.0"