From 4a6e4173dbcd3b5a1721173bf44b7493494ba1f7 Mon Sep 17 00:00:00 2001
From: an-lee <an.lee.work@gmail.com>
Date: Fri, 16 Aug 2024 16:33:36 +0800
Subject: [PATCH] Fix transcription read recording time (#981)

* fix recording save

* fix compare hotkey
---
 .../medias/media-current-recording.tsx        | 73 ++++++++++++-------
 .../medias/media-player-controls.tsx          |  4 +-
 .../media-transcription-read-button.tsx       | 56 +++++++-------
 3 files changed, 79 insertions(+), 54 deletions(-)

diff --git a/enjoy/src/renderer/components/medias/media-current-recording.tsx b/enjoy/src/renderer/components/medias/media-current-recording.tsx
index 60209915..67574e29 100644
--- a/enjoy/src/renderer/components/medias/media-current-recording.tsx
+++ b/enjoy/src/renderer/components/medias/media-current-recording.tsx
@@ -704,49 +704,70 @@ export const MediaRecordButton = () => {
     currentSegmentIndex,
   } = useContext(MediaPlayerProviderContext);
   const { EnjoyApp } = useContext(AppSettingsProviderContext);
+  const [active, setActive] = useState(false);
+  const ref = useRef(null);
+
+  const createRecording = async (blob: Blob) => {
+    const currentSegment =
+      transcription?.result?.timeline?.[currentSegmentIndex];
+    if (!currentSegment) return;
+
+    EnjoyApp.recordings
+      .create({
+        targetId: media.id,
+        targetType: media.mediaType,
+        blob: {
+          type: recordingBlob.type.split(";")[0],
+          arrayBuffer: await blob.arrayBuffer(),
+        },
+        referenceId: currentSegmentIndex,
+        referenceText: currentSegment.text,
+      })
+      .then(() =>
+        toast.success(t("recordingSaved"), { position: "bottom-right" })
+      )
+      .catch((err) =>
+        toast.error(t("failedToSaveRecording" + " : " + err.message))
+      );
+  };
 
   /*
    * Save recording
+   * when recording is stopped
+   * And only when record button is active
    */
   useEffect(() => {
     if (!media) return;
     if (!transcription) return;
+    if (!active) return;
     if (!recordingBlob) return;
 
-    toast.promise(
-      async () => {
-        const currentSegment =
-          transcription?.result?.timeline?.[currentSegmentIndex];
-        if (!currentSegment) return;
-
-        await EnjoyApp.recordings.create({
-          targetId: media.id,
-          targetType: media.mediaType,
-          blob: {
-            type: recordingBlob.type.split(";")[0],
-            arrayBuffer: await recordingBlob.arrayBuffer(),
-          },
-          referenceId: currentSegmentIndex,
-          referenceText: currentSegment.text,
-        });
-      },
-      {
-        loading: t("savingRecording"),
-        success: t("recordingSaved"),
-        error: (e) => t("failedToSaveRecording" + " : " + e.message),
-        position: "bottom-right",
-      }
-    );
-  }, [recordingBlob, media, transcription]);
+    createRecording(recordingBlob);
+  }, [recordingBlob, media, transcription, active]);
 
   useEffect(() => {
+    if (!active) return;
     if (recordingTime >= 60) {
       stopRecording();
     }
-  }, [recordingTime]);
+  }, [active, recordingTime]);
+
+  useEffect(() => {
+    const rect = ref.current?.getBoundingClientRect();
+    if (!rect) return;
+
+    const elementAtPoint = document.elementFromPoint(
+      rect.left + rect.width / 2,
+      rect.top + rect.height / 2
+    );
+    setActive(
+      elementAtPoint == ref.current || ref.current.contains(elementAtPoint)
+    );
+  }, [ref, isRecording]);
 
   return (
     <Button
+      ref={ref}
       variant="ghost"
       onClick={() => {
         if (isRecording) {
diff --git a/enjoy/src/renderer/components/medias/media-player-controls.tsx b/enjoy/src/renderer/components/medias/media-player-controls.tsx
index 4a998df4..f7e949b2 100644
--- a/enjoy/src/renderer/components/medias/media-player-controls.tsx
+++ b/enjoy/src/renderer/components/medias/media-player-controls.tsx
@@ -426,7 +426,9 @@ export const MediaPlayerControls = () => {
   useHotkeys(
     currentHotkeys.Compare,
     () => {
-      findAndClickElement("media-compare-button");
+      // The button is hidden as default in small screens
+      // It's fine to fire the click event directly even other modal is open
+      document.getElementById("media-compare-button")?.click();
     },
     {
       preventDefault: true,
diff --git a/enjoy/src/renderer/components/medias/media-transcription-read-button.tsx b/enjoy/src/renderer/components/medias/media-transcription-read-button.tsx
index 9ccef816..fe16a004 100644
--- a/enjoy/src/renderer/components/medias/media-transcription-read-button.tsx
+++ b/enjoy/src/renderer/components/medias/media-transcription-read-button.tsx
@@ -2,7 +2,7 @@ import {
   AppSettingsProviderContext,
   MediaPlayerProviderContext,
 } from "@renderer/context";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -293,6 +293,32 @@ const RecorderButton = (props: { onRecorded: () => void }) => {
   const { EnjoyApp } = useContext(AppSettingsProviderContext);
   const [access, setAccess] = useState<boolean>(false);
 
+  const createRecording = async (blob: Blob) => {
+    const currentSegment =
+      transcription?.result?.timeline?.[currentSegmentIndex];
+    if (!currentSegment) return;
+
+    EnjoyApp.recordings
+      .create({
+        targetId: media.id,
+        targetType: media.mediaType,
+        blob: {
+          type: recordingBlob.type.split(";")[0],
+          arrayBuffer: await blob.arrayBuffer(),
+        },
+        referenceId: -1,
+        referenceText: transcription.result.timeline
+          .map((s: TimelineEntry) => s.text)
+          .join("\n"),
+      })
+      .then(() =>
+        toast.success(t("recordingSaved"), { position: "bottom-right" })
+      )
+      .catch((err) =>
+        toast.error(t("failedToSaveRecording" + " : " + err.message))
+      );
+  };
+
   const askForMediaAccess = () => {
     EnjoyApp.system.preferences.mediaAccess("microphone").then((access) => {
       if (access) {
@@ -313,32 +339,7 @@ const RecorderButton = (props: { onRecorded: () => void }) => {
     if (!transcription) return;
     if (!recordingBlob) return;
 
-    toast.promise(
-      async () => {
-        const currentSegment =
-          transcription?.result?.timeline?.[currentSegmentIndex];
-        if (!currentSegment) return;
-
-        await EnjoyApp.recordings.create({
-          targetId: media.id,
-          targetType: media.mediaType,
-          blob: {
-            type: recordingBlob.type.split(";")[0],
-            arrayBuffer: await recordingBlob.arrayBuffer(),
-          },
-          referenceId: -1,
-          referenceText: transcription.result.timeline
-            .map((s: TimelineEntry) => s.text)
-            .join("\n"),
-        });
-      },
-      {
-        loading: t("savingRecording"),
-        success: t("recordingSaved"),
-        error: (e) => t("failedToSaveRecording" + " : " + e.message),
-        position: "bottom-right",
-      }
-    );
+    createRecording(recordingBlob);
   }, [recordingBlob, media, transcription]);
 
   useEffect(() => {
@@ -404,6 +405,7 @@ const RecorderButton = (props: { onRecorded: () => void }) => {
   return (
     <div className="h-16 flex items-center justify-center px-6">
       <Button
+        disabled={!access}
         variant="ghost"
         className="aspect-square p-0 h-12 rounded-full bg-red-500 hover:bg-red-500/90"
         onClick={() => startRecording()}