lostecho/everyone-can-use-english
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix transcription read recording time (#981)

Browse Source 
* fix recording save

* fix compare hotkey
This commit is contained in:
an-lee
2024-08-16 16:33:36 +08:00
committed by GitHub
parent 22c5ba32d5
commit 4a6e4173db
3 changed files with 79 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
enjoy/src/renderer/components/medias/media-current-recording.tsx
View File

@@ -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) {

4
enjoy/src/renderer/components/medias/media-player-controls.tsx
View File

@@ -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,

56
enjoy/src/renderer/components/medias/media-transcription-read-button.tsx
View File

@@ -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()}