diff --git a/enjoy/src/renderer/components/medias/media-loading-modal.tsx b/enjoy/src/renderer/components/medias/media-loading-modal.tsx
index 34c7e320a..2801356eb 100644
--- a/enjoy/src/renderer/components/medias/media-loading-modal.tsx
+++ b/enjoy/src/renderer/components/medias/media-loading-modal.tsx
@@ -14,24 +14,14 @@ import {
TabsList,
TabsTrigger,
} from "@renderer/components/ui";
-import { CheckCircleIcon, CircleAlertIcon, LoaderIcon } from "lucide-react";
+import { CircleAlertIcon, LoaderIcon } from "lucide-react";
import { t } from "i18next";
import { useNavigate } from "react-router-dom";
import { TranscriptionCreateForm, TranscriptionsList } from "../transcriptions";
import { SttEngineOptionEnum } from "@/types/enums";
export const MediaLoadingModal = () => {
- const navigate = useNavigate();
- const {
- media,
- decoded,
- decodeError,
- transcription,
- transcribing,
- transcribingProgress,
- transcribingOutput,
- generateTranscription,
- } = useContext(MediaShadowProviderContext);
+ const { decoded, transcription } = useContext(MediaShadowProviderContext);
return (
@@ -43,84 +33,109 @@ export const MediaLoadingModal = () => {
{t("itMayTakeAWhileToPrepareForTheFirstLoad")}
-
- {decoded ? (
- transcription?.result?.timeline ? (
-
-
- {t("transcribedSuccessfully")}
-
- ) : (
-
-
- {t("transcribe")}
-
- {t("downloadTranscript")}
-
-
-
- {
- generateTranscription({
- originalText: data.text,
- language: data.language,
- service: data.service as SttEngineOptionEnum | "upload",
- isolate: data.isolate,
- });
- }}
- onCancel={() => navigate(-1)}
- transcribing={transcribing}
- transcribingProgress={transcribingProgress}
- transcribingOutput={transcribingOutput}
- />
-
-
-
-
-
- )
- ) : (
- <>
- {decodeError ? (
-
-
-
-
-
-
{decodeError}
-
- {t("failedToDecodeWaveform")}:{" "}
- {media?.src}
-
-
-
- {media?.src ? (
- <>
-
- {t("decodingWaveform")}
-
- ) : (
- <>
-
- {t("cannotFindSourceFile")}
-
- )}
-
- )}
-
-
-
-
- )}
+
);
};
+
+const LoadingContent = () => {
+ const navigate = useNavigate();
+ const {
+ media,
+ decoded,
+ decodeError,
+ transcription,
+ transcribing,
+ transcribingProgress,
+ transcribingOutput,
+ generateTranscription,
+ } = useContext(MediaShadowProviderContext);
+ if (decoded) {
+ // Decoded and transcription created but not ready
+ if (transcription && !transcription.result?.timeline) {
+ return (
+
+
+ {t("transcribe")}
+
+ {t("downloadTranscript")}
+
+
+
+ {
+ generateTranscription({
+ originalText: data.text,
+ language: data.language,
+ service: data.service as SttEngineOptionEnum | "upload",
+ isolate: data.isolate,
+ });
+ }}
+ onCancel={() => navigate(-1)}
+ transcribing={transcribing}
+ transcribingProgress={transcribingProgress}
+ transcribingOutput={transcribingOutput}
+ />
+
+
+
+
+
+ );
+ } else {
+ return (
+
+
+
+ );
+ }
+ // Decode error
+ } else if (decodeError) {
+ return (
+ <>
+
+
+
+
+
+
{decodeError}
+
+ {t("failedToDecodeWaveform")}:{" "}
+ {media?.src}
+
+
+
+ {media?.src ? (
+ <>
+
+ {t("decodingWaveform")}
+
+ ) : (
+ <>
+
+ {t("cannotFindSourceFile")}
+
+ )}
+
+
+
+
+
+ );
+ }
+};
diff --git a/enjoy/src/renderer/hooks/use-transcriptions.tsx b/enjoy/src/renderer/hooks/use-transcriptions.tsx
index e9d793970..c7cae9be3 100644
--- a/enjoy/src/renderer/hooks/use-transcriptions.tsx
+++ b/enjoy/src/renderer/hooks/use-transcriptions.tsx
@@ -21,6 +21,7 @@ export const useTranscriptions = (media: AudioType | VideoType) => {
const { transcribe, output } = useTranscribe();
const [transcribingProgress, setTranscribingProgress] = useState(0);
const [transcribing, setTranscribing] = useState(false);
+ const [creating, setCreating] = useState(false);
const [transcribingOutput, setTranscribingOutput] = useState("");
const [service, setService] = useState(
sttEngine
@@ -42,40 +43,45 @@ export const useTranscriptions = (media: AudioType | VideoType) => {
async (): Promise => {
if (!media) return;
if (transcription?.targetId === media.id) return;
+ if (creating) return;
- const tr = await EnjoyApp.transcriptions.findOrCreate({
- targetId: media.id,
- targetType: media.mediaType,
- });
+ try {
+ setCreating(true);
+ const tr = await EnjoyApp.transcriptions.findOrCreate({
+ targetId: media.id,
+ targetType: media.mediaType,
+ });
- if (!tr?.result?.timeline) {
- tr.result = {
- originalText: tr.result?.originalText,
- };
- }
+ if (!tr?.result?.timeline) {
+ tr.result = {
+ originalText: tr.result?.originalText,
+ };
+ }
- const transcriptionOnline = await findTranscriptionOnline();
- if (transcriptionOnline && !tr?.result?.timeline) {
- return EnjoyApp.transcriptions
- .update(tr.id, {
+ const transcriptionOnline = await findTranscriptionOnline();
+ if (transcriptionOnline && !tr?.result?.timeline) {
+ await EnjoyApp.transcriptions.update(tr.id, {
state: "finished",
result: transcriptionOnline.result,
engine: transcriptionOnline.engine,
model: transcriptionOnline.model,
language: transcriptionOnline.language || media.language,
- })
- .then(() => {
- toast.success(t("downloadedTranscriptionFromCloud"));
- setTranscription(transcriptionOnline);
- return transcriptionOnline;
- })
- .catch((err) => {
- console.error(err);
- return tr;
});
- } else {
- setTranscription(tr);
- return tr;
+ setTranscription(transcriptionOnline);
+ toast.success(t("downloadedTranscriptionFromCloud"));
+ if (transcribing) {
+ abortGenerateTranscription();
+ }
+ return transcriptionOnline;
+ } else {
+ setTranscription(tr);
+ return tr;
+ }
+ } catch (err) {
+ console.error(err);
+ return null;
+ } finally {
+ setCreating(false);
}
};