upgrade echogarden dep (#535)

* upgrade echogarden dep

* avoid duplicate render when after recording

* update trim threshold when compare recording

* update recording trim threhold when saving

enjoy/package.json

@@ -62,7 +62,7 @@
     "autoprefixer": "^10.4.19",
     "electron": "^30.0.0",
     "electron-playwright-helpers": "^1.7.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "flora-colossus": "^2.0.0",
@@ -129,7 +129,7 @@
     "dayjs": "^1.11.10",
     "decamelize": "^6.0.0",
     "decamelize-keys": "^2.0.1",
-    "echogarden": "^0.12.2",
+    "echogarden": "^1.0.2",
     "electron-context-menu": "^3.6.1",
     "electron-log": "^5.1.2",
     "electron-settings": "^4.0.3",

enjoy/src/main/db/models/recording.ts

@@ -314,9 +314,11 @@ export class Recording extends Model<Recording> {
 
     // trim audio
     let trimmedSamples = echogarden.trimAudioStart(
-      denoisedAudio.audioChannels[0]
+      denoisedAudio.audioChannels[0],
+      0,
+      -30
     );
-    trimmedSamples = echogarden.trimAudioEnd(trimmedSamples);
+    trimmedSamples = echogarden.trimAudioEnd(trimmedSamples, 0, -30);
     denoisedAudio.audioChannels[0] = trimmedSamples;
 
     duration = Math.round(echogarden.getRawAudioDuration(denoisedAudio) * 1000);
@@ -331,7 +333,7 @@ export class Recording extends Model<Recording> {
       "recordings",
       `${Date.now()}.wav`
     );
-    await fs.outputFile(file, echogarden.encodeWaveBuffer(denoisedAudio));
+    await fs.outputFile(file, echogarden.encodeRawAudioToWave(denoisedAudio));
 
     // hash file
     const md5 = await hashFile(file, { algo: "md5" });

enjoy/src/main/echogarden.ts

@@ -3,8 +3,8 @@ import * as Echogarden from "echogarden/dist/api/API.js";
 import { AlignmentOptions } from "echogarden/dist/api/API";
 import { AudioSourceParam } from "echogarden/dist/audio/AudioUtilities";
 import {
-  encodeWaveBuffer,
-  decodeWaveBuffer,
+  encodeRawAudioToWave,
+  decodeWaveToRawAudio,
   ensureRawAudio,
   getRawAudioDuration,
   trimAudioStart,
@@ -16,9 +16,7 @@ import url from "url";
 import settings from "@main/settings";
 import fs from "fs-extra";
 import ffmpegPath from "ffmpeg-static";
-import { enjoyUrlToPath, hashFile, pathToEnjoyUrl } from "./utils";
-import { extractFrequencies } from "@/utils";
-import waveform from "./waveform";
+import { enjoyUrlToPath, pathToEnjoyUrl } from "./utils";
 
 Echogarden.setGlobalOption(
   "ffmpegPath",
@@ -37,8 +35,8 @@ const logger = log.scope("echogarden");
 class EchogardenWrapper {
   public align: typeof Echogarden.align;
   public denoise: typeof Echogarden.denoise;
-  public encodeWaveBuffer: typeof encodeWaveBuffer;
-  public decodeWaveBuffer: typeof decodeWaveBuffer;
+  public encodeRawAudioToWave: typeof encodeRawAudioToWave;
+  public decodeWaveToRawAudio: typeof decodeWaveToRawAudio;
   public ensureRawAudio: typeof ensureRawAudio;
   public getRawAudioDuration: typeof getRawAudioDuration;
   public trimAudioStart: typeof trimAudioStart;
@@ -47,8 +45,8 @@ class EchogardenWrapper {
   constructor() {
     this.align = Echogarden.align;
     this.denoise = Echogarden.denoise;
-    this.encodeWaveBuffer = encodeWaveBuffer;
-    this.decodeWaveBuffer = decodeWaveBuffer;
+    this.encodeRawAudioToWave = encodeRawAudioToWave;
+    this.decodeWaveToRawAudio = decodeWaveToRawAudio;
     this.ensureRawAudio = ensureRawAudio;
     this.getRawAudioDuration = getRawAudioDuration;
     this.trimAudioStart = trimAudioStart;
@@ -85,7 +83,7 @@ class EchogardenWrapper {
   async transcode(url: string, sampleRate = 16000): Promise<string> {
     const filePath = enjoyUrlToPath(url);
     const rawAudio = await this.ensureRawAudio(filePath, sampleRate);
-    const audioBuffer = this.encodeWaveBuffer(rawAudio);
+    const audioBuffer = this.encodeRawAudioToWave(rawAudio);
 
     const outputFilePath = path.join(settings.cachePath(), `${Date.now()}.wav`);
     fs.writeFileSync(outputFilePath, audioBuffer);

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

@@ -28,7 +28,6 @@ import {
   SheetContent,
   SheetHeader,
   SheetClose,
-  ScrollArea,
 } from "@renderer/components/ui";
 import {
   GitCompareIcon,
@@ -110,7 +109,7 @@ export const MediaCurrentRecording = () => {
     if (!frequencies || !peaks) return;
 
     // Trim the peaks from start to end, so we can render the voicable part of the recording
-    const minValue = 0.01;
+    const minValue = 0.015;
     let voiceStartIndex = 0;
     let voiceEndIndex = peaks.length - 1;
 
@@ -304,6 +303,7 @@ export const MediaCurrentRecording = () => {
   }, [ref, currentRecording, isRecording, layout?.playerHeight]);
 
   useEffect(() => {
+    setCurrentTime(0);
     setIsComparing(false);
     removeComparingPitchContour();
   }, [currentRecording]);
@@ -617,13 +617,13 @@ export const MediaCurrentRecording = () => {
           className="rounded-t-2xl shadow-lg max-h-screen overflow-y-scroll"
           displayClose={false}
         >
-            <SheetHeader className="flex items-center justify-center -mt-4 mb-2">
-              <SheetClose>
-                <ChevronDownIcon />
-              </SheetClose>
-            </SheetHeader>
+          <SheetHeader className="flex items-center justify-center -mt-4 mb-2">
+            <SheetClose>
+              <ChevronDownIcon />
+            </SheetClose>
+          </SheetHeader>
 
-            <RecordingDetail recording={currentRecording} />
+          <RecordingDetail recording={currentRecording} />
         </SheetContent>
       </Sheet>
     </div>

enjoy/src/renderer/components/medias/media-recordings.tsx

@@ -53,7 +53,7 @@ export const MediaRecordings = () => {
 
   useEffect(() => {
     setCurrentRecording(recordings[0]);
-  }, [currentSegmentIndex, recordings]);
+  }, [currentSegmentIndex, recordings?.[0]?.id]);
 
   return (
     <div ref={containerRef} data-testid="media-recordings-result">