Improve (#1278)

* try to fix ResizeObserver loop completed with undelivered notifications.

* handle recrodings sync all

* handle some errors

enjoy/src/main/db/handlers/recordings-handler.ts

@@ -49,25 +49,21 @@ class RecordingsHandler {
   }
 
   private async findOne(_event: IpcMainEvent, where: WhereOptions<Recording>) {
-    return Recording.scope("withoutDeleted")
-      .findOne({
-        include: PronunciationAssessment,
-        order: [["createdAt", "DESC"]],
-        where: {
-          ...where,
-        },
-      })
-      .then((recording) => {
-        if (!recording) {
-          throw new Error(t("models.recording.notFound"));
-        }
+    const recording = await Recording.scope("withoutDeleted").findOne({
+      include: PronunciationAssessment,
+      order: [["createdAt", "DESC"]],
+      where: {
+        ...where,
+      },
+    });
+    if (!recording) {
+      throw new Error(t("models.recording.notFound"));
+    }
+    if (!recording.isSynced) {
+      recording.sync().catch(() => {});
+    }
 
-        if (!recording.isSynced) {
-          recording.sync();
-        }
-
-        return recording.toJSON();
-      });
+    return recording.toJSON();
   }
 
   private async sync(_event: IpcMainEvent, id: string) {
@@ -96,9 +92,7 @@ class RecordingsHandler {
     });
 
     try {
-      recordings.forEach(async (recording) => {
-        await recording.sync();
-      });
+      await Promise.all(recordings.map((recording) => recording.sync()));
     } catch (err) {
       logger.error("failed to sync recordings", err.message);
 

enjoy/src/renderer/components/login/github-login-form.tsx

@@ -126,7 +126,7 @@ export const GithubLoginForm = () => {
             alt="github"
           />
         </div>
-        {oauthInfo ? (
+        {oauthInfo?.userCode ? (
           <div className="grid gap-8">
             <div className="flex items-center justify-center gap-2 text-5xl">
               {oauthInfo.userCode.split("").map((char, index) => {

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

@@ -454,13 +454,18 @@ export const MediaCurrentRecording = () => {
     if (!ref?.current) return;
     if (!player) return;
 
+    let rafId: number;
     const observer = new ResizeObserver(() => {
-      debouncedCalContainerSize();
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        debouncedCalContainerSize();
+      });
     });
     observer.observe(ref.current);
 
     return () => {
       observer.disconnect();
+      cancelAnimationFrame(rafId);
     };
   }, [ref, player]);
 
@@ -801,13 +806,18 @@ const MediaRecorder = () => {
   useEffect(() => {
     if (!ref?.current) return;
 
+    let rafId: number;
     const observer = new ResizeObserver(() => {
-      debouncedCalContainerSize();
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        debouncedCalContainerSize();
+      });
     });
     observer.observe(ref.current);
 
     return () => {
       observer.disconnect();
+      cancelAnimationFrame(rafId);
     };
   }, [ref]);
 

enjoy/src/renderer/components/medias/media-bottom-panel/media-waveform.tsx

@@ -139,13 +139,19 @@ export const MediaWaveform = () => {
     setWaveformContainerRef(ref);
 
     if (!wavesurfer) return;
+
+    let rafId: number;
     const observer = new ResizeObserver(() => {
-      debouncedCalContainerSize();
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        debouncedCalContainerSize();
+      });
     });
     observer.observe(ref.current);
 
     return () => {
       observer.disconnect();
+      cancelAnimationFrame(rafId);
     };
   }, [ref, wavesurfer]);
 

enjoy/src/renderer/components/widgets/lookup/dict-lookup-result.tsx

@@ -1,14 +1,11 @@
 import { useEffect, useState, useContext } from "react";
-import {
-  AppSettingsProviderContext,
-  DictProviderContext,
-  ThemeProviderContext,
-} from "@/renderer/context";
+import { DictProviderContext, ThemeProviderContext } from "@/renderer/context";
 import Frame, { useFrame } from "react-frame-component";
 import { getExtension } from "@/utils";
 import { DictDefinitionNormalizer } from "@renderer/lib/dict";
 import { LoaderSpin } from "@renderer/components";
 import { t } from "i18next";
+import debounce from "lodash/debounce";
 
 const MIME: Record<string, string> = {
   css: "text/css",
@@ -137,14 +134,25 @@ export const DictLookupResultInner = ({
   const [html, setHtml] = useState("");
   const [hash, setHash] = useState("");
 
+  const debouncedResize = debounce(onResize, 100);
+
   useEffect(() => {
     if (autoHeight) {
+      let rafId: number;
       const resizeObserver = new ResizeObserver(() => {
-        const html = innerDocument.getElementsByTagName("html")[0];
-        onResize(html.scrollHeight);
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => {
+          const html = innerDocument.getElementsByTagName("html")[0];
+          debouncedResize(html.scrollHeight);
+        });
       });
 
       resizeObserver.observe(innerDocument.getElementById("inner-dict"));
+
+      return () => {
+        resizeObserver.disconnect();
+        cancelAnimationFrame(rafId);
+      };
     }
   }, []);