ensure transcription created before transcribe (#344)

enjoy/src/renderer/components/audios/audio-detail.tsx

@@ -69,8 +69,28 @@ export const AudioDetail = (props: { id?: string; md5?: string }) => {
     }
   };
 
+  const findOrCreateTranscription = async () => {
+    if (!audio) return;
+    if (transcription) return;
+
+    return EnjoyApp.transcriptions
+      .findOrCreate({
+        targetId: audio.id,
+        targetType: "Audio",
+      })
+      .then((transcription) => {
+        setTranscription(transcription);
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      });
+  };
+
   const generateTranscription = async () => {
     if (transcribing) return;
+    if (!transcription) {
+      await findOrCreateTranscription();
+    }
 
     setTranscribing(true);
     setTranscribingProgress(0);
@@ -90,6 +110,10 @@ export const AudioDetail = (props: { id?: string; md5?: string }) => {
   };
 
   const findTranscriptionFromWebApi = async () => {
+    if (!transcription) {
+      await findOrCreateTranscription();
+    }
+
     const res = await webApi.transcriptions({
       targetMd5: audio.md5,
     });
@@ -162,14 +186,7 @@ export const AudioDetail = (props: { id?: string; md5?: string }) => {
   useEffect(() => {
     if (!audio) return;
 
-    EnjoyApp.transcriptions
-      .findOrCreate({
-        targetId: audio.id,
-        targetType: "Audio",
-      })
-      .then((transcription) => {
-        setTranscription(transcription);
-      });
+    findOrCreateTranscription();
   }, [audio]);
 
   useEffect(() => {

enjoy/src/renderer/components/videos/video-detail.tsx

@@ -71,8 +71,22 @@ export const VideoDetail = (props: { id?: string; md5?: string }) => {
     }
   };
 
+  const findOrCreateTranscription = async () => {
+    return EnjoyApp.transcriptions
+      .findOrCreate({
+        targetId: video.id,
+        targetType: "Video",
+      })
+      .then((transcription) => {
+        setTranscription(transcription);
+      });
+  };
+
   const generateTranscription = async () => {
     if (transcribing) return;
+    if (!transcription) {
+      await findOrCreateTranscription();
+    }
 
     setTranscribing(true);
     setTranscribingProgress(0);
@@ -92,6 +106,10 @@ export const VideoDetail = (props: { id?: string; md5?: string }) => {
   };
 
   const findTranscriptionFromWebApi = async () => {
+    if (!transcription) {
+      await findOrCreateTranscription();
+    }
+
     const res = await webApi.transcriptions({
       targetMd5: video.md5,
     });
@@ -168,14 +186,7 @@ export const VideoDetail = (props: { id?: string; md5?: string }) => {
   useEffect(() => {
     if (!video) return;
 
-    EnjoyApp.transcriptions
-      .findOrCreate({
-        targetId: video.id,
-        targetType: "Video",
-      })
-      .then((transcription) => {
-        setTranscription(transcription);
-      });
+    findOrCreateTranscription();
   }, [video]);
 
   useEffect(() => {