Fix some minor bugs (#880)

* avoid recording sync in the mean time * update chapter title * refactor transcription form * refactor codes * fix current segment index cached
2024-07-24 16:56:35 +08:00
parent 7ed5a1f670
commit 7a7cf9e39b
9 changed files with 86 additions and 91 deletions
--- a/enjoy/src/renderer/components/audios/audio-player.tsx
+++ b/enjoy/src/renderer/components/audios/audio-player.tsx
@@ -43,7 +43,7 @@ export const AudioPlayer = (props: {
    return () => {
      setCurrentSegmentIndex(0);
    };
-  }, [media]);
+  }, [media?.id]);

  if (!audio) return null;
  if (!layout) return <LoaderSpin />;
--- a/enjoy/src/renderer/components/courses/chapter-content.tsx
+++ b/enjoy/src/renderer/components/courses/chapter-content.tsx
@@ -84,7 +84,9 @@ export const ChapterContent = (props: {
        </div>
      </div>
      <div className="select-text prose dark:prose-invert prose-em:font-bold prose-em:text-red-700 mx-auto">
-        <h2>{chapter?.title}</h2>
+        <h2>
+          {chapter.sequence}. {chapter?.title}
+        </h2>
        <MarkdownWrapper>{chapter?.content}</MarkdownWrapper>
        {translation && (
          <details>
@@ -96,9 +98,7 @@ export const ChapterContent = (props: {
        {chapter.examples.length > 0 && (
          <>
            <h3>{t("examples")}</h3>
-            <div className="text-sm mb-4">
-              {t("howToFinishChapter")}
-            </div>
+            <div className="text-sm mb-4">{t("howToFinishChapter")}</div>
          </>
        )}
        <div className="grid gap-4">
--- a/enjoy/src/renderer/components/medias/media-caption.tsx
+++ b/enjoy/src/renderer/components/medias/media-caption.tsx
@@ -355,6 +355,7 @@ export const MediaCaption = () => {
    };
  }, []);

+  if (!transcription) return null;
  if (!caption) return null;

  return (
--- a/enjoy/src/renderer/components/medias/media-provider.tsx
+++ b/enjoy/src/renderer/components/medias/media-provider.tsx
@@ -44,12 +44,17 @@ export const MediaProvider = () => {
    player.current.textTracks.clear();
    player.current.textTracks.add(
      new TextTrack({
+        label: "Transcription",
        content: srt,
        kind: "subtitles",
        type: "srt",
        language: transcription.result.language,
      })
    );
+
+    return () => {
+      setMediaProvider(null);
+    };
  }, [player, transcription]);

  if (!media?.src) return null;
--- a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-form.tsx
+++ b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-form.tsx
@@ -98,7 +98,7 @@ export const PronunciationAssessmentForm = () => {
    } else {
      arrayBuffer = await new Blob([file[0]]).arrayBuffer();
    }
-    const recording = await EnjoyApp.recordings.create({
+    return await EnjoyApp.recordings.create({
      language,
      referenceText,
      blob: {
@@ -106,15 +106,6 @@ export const PronunciationAssessmentForm = () => {
        arrayBuffer,
      },
    });
-
-    try {
-      await EnjoyApp.recordings.sync(recording.id);
-      return recording;
-    } catch (err) {
-      toast.error(err.message);
-      EnjoyApp.recordings.destroy(recording.id);
-      return;
-    }
  };

  return (
--- a/enjoy/src/renderer/components/transcriptions/transcription-create-form.tsx
+++ b/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,
  FormDescription,
  FormField,
@@ -28,7 +31,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";
 import { milisecondsToTimestamp } from "@/utils";

@@ -67,6 +70,7 @@ export const TranscriptionCreateForm = (props: {
      isolate: false,
    },
  });
+  const [collapsibleOpen, setCollapsibleOpen] = useState(false);

  const handleSubmit = (data: z.infer<typeof transcriptionSchema>) => {
    const { service, text } = data;
@@ -218,30 +222,6 @@ export const TranscriptionCreateForm = (props: {
              name="text"
              render={({ field }) => (
                <FormItem className="grid w-full items-center">
-                  <FormLabel>{t("uploadTranscriptFile")}</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("");
-                      }
-                    }}
-                  />
-                  <FormDescription>
-                    {t("uploadTranscriptFileDescription")}
-                  </FormDescription>
                  {field.value != undefined && (
                    <>
                      <FormLabel>{t("transcript")}</FormLabel>
@@ -256,6 +236,44 @@ export const TranscriptionCreateForm = (props: {
                </FormItem>
              )}
            />
+          </>
+        )}
+        <Collapsible open={collapsibleOpen} onOpenChange={setCollapsibleOpen}>
+          <CollapsibleContent className="mb-4 space-y-4">
+            {form.watch("service") === "upload" && (
+              <FormField
+                control={form.control}
+                name="text"
+                render={({ field }) => (
+                  <FormItem className="grid w-full items-center">
+                    <FormLabel>{t("uploadTranscriptFile")}</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("");
+                        }
+                      }}
+                    />
+                    <FormDescription>
+                      {t("uploadTranscriptFileDescription")}
+                    </FormDescription>
+                  </FormItem>
+                )}
+              />
+            )}
            <FormField
              control={form.control}
              name="isolate"
@@ -273,8 +291,25 @@ export const TranscriptionCreateForm = (props: {
                </FormItem>
              )}
            />
-          </>
-        )}
+          </CollapsibleContent>
+          <div className="flex justify-center">
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm">
+                {collapsibleOpen ? (
+                  <>
+                    <ChevronUpIcon className="h-4 w-4" />
+                    <span className="ml-2">{t("lessOptions")}</span>
+                  </>
+                ) : (
+                  <>
+                    <ChevronDownIcon className="h-4 w-4" />
+                    <span className="ml-2">{t("moreOptions")}</span>
+                  </>
+                )}
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+        </Collapsible>

        <TranscribeProgress
          service={form.watch("service")}
--- a/enjoy/src/renderer/context/course-provider.tsx
+++ b/enjoy/src/renderer/context/course-provider.tsx
@@ -3,6 +3,7 @@ import {
  Sheet,
  SheetClose,
  SheetContent,
+  SheetDescription,
  SheetHeader,
  SheetTitle,
  toast,
@@ -78,6 +79,7 @@ export const CourseProvider = ({
          >
            <SheetHeader className="flex items-center justify-center h-14">
              <SheetTitle className="sr-only">Shadow</SheetTitle>
+              <SheetDescription className="sr-only"></SheetDescription>
              <SheetClose>
                <ChevronDownIcon />
              </SheetClose>
--- a/enjoy/src/renderer/context/media-player-provider.tsx
+++ b/enjoy/src/renderer/context/media-player-provider.tsx
@@ -194,9 +194,10 @@ export const MediaPlayerProvider = ({
  const getCachedSegmentIndex = async () => {
    if (!media) return;

-    const index = await EnjoyApp.cacheObjects.get(
-      `${media.mediaType.toLowerCase()}-${media.id}-last-segment-index`
-    );
+    const cachedId = `${media.mediaType.toLowerCase()}-${
+      media.id
+    }-last-segment-index`;
+    const index = await EnjoyApp.cacheObjects.get(cachedId);

    return index || 0;
  };
@@ -204,10 +205,10 @@ export const MediaPlayerProvider = ({
  const setCachedSegmentIndex = (index: number) => {
    if (!media) return;

-    return EnjoyApp.cacheObjects.set(
-      `${media.mediaType.toLowerCase()}-${media.id}-last-segment-index`,
-      index
-    );
+    const cachedId = `${media.mediaType.toLowerCase()}-${
+      media.id
+    }-last-segment-index`;
+    return EnjoyApp.cacheObjects.set(cachedId, index);
  };

  const { notes, createNote } = useNotes({
@@ -563,7 +564,7 @@ export const MediaPlayerProvider = ({
  /* cache last segment index */
  useEffect(() => {
    if (!media) return;
-    if (!currentSegmentIndex) return;
+    if (typeof currentSegmentIndex !== "number") return;

    setCachedSegmentIndex(currentSegmentIndex);
  }, [currentSegmentIndex]);
--- a/enjoy/src/renderer/hooks/use-transcriptions.tsx
+++ b/enjoy/src/renderer/hooks/use-transcriptions.tsx
@@ -208,46 +208,6 @@ export const useTranscriptions = (media: AudioType | VideoType) => {
    return timeline;
  };

-  const findTranscriptionFromWebApi = async () => {
-    if (!transcription) {
-      await findOrCreateTranscription();
-    }
-
-    const res = await webApi.transcriptions({
-      targetMd5: media.md5,
-    });
-
-    const transcript = (res?.transcriptions || []).filter((t) =>
-      ["base", "small", "medium", "large", "whisper-1", "original"].includes(
-        t.model
-      )
-    )?.[0];
-
-    if (!transcript) {
-      return Promise.reject("Transcription not found");
-    }
-
-    if (!transcript.result["timeline"]) {
-      return Promise.reject("Transcription not aligned");
-    }
-
-    return EnjoyApp.transcriptions.update(transcription.id, {
-      state: "finished",
-      result: transcript.result,
-      engine: transcript.engine,
-      model: transcript.model,
-    });
-  };
-
-  const findOrGenerateTranscription = async () => {
-    try {
-      await findTranscriptionFromWebApi();
-    } catch (err) {
-      console.warn(err);
-      await generateTranscription();
-    }
-  };
-
  /*
   * find or create transcription
   */