Fix bugs (#436)

* fix recording style

* refine prompt

enjoy/src/commands/analyze.command.ts

@@ -26,28 +26,21 @@ export const analyzeCommand = async (
 
   const prompt = ChatPromptTemplate.fromMessages([
     ["system", SYSTEM_PROMPT],
-    ["human", TRANSLATION_PROMPT],
+    ["human", text],
   ]);
 
-  const response = await prompt.pipe(chatModel).invoke({
-    native_language: "Chinese",
-    text,
-  });
+  const response = await prompt.pipe(chatModel).invoke({});
 
   return response.text;
 };
 
-const SYSTEM_PROMPT = `You are a language coach of English, and you are helping a student to learn {native_language}.`;
-const TRANSLATION_PROMPT = `
-{text}
+const SYSTEM_PROMPT = `你是我的英语教练，我将提供英语文本，你将帮助我分析文本的句子结构、语法和词汇/短语，并对文本进行详细解释。请用中文回答，并按以下格式返回结果：
 
-Please analyze the text above, including sentence structure, grammar, and vocabulary/phrases, and provide a detailed explanation of the text. Please reply in {native_language} and return the result only in the following format:
+  ### 句子结构
+  (解释句子的每个元素)
 
-  ### Sentence structure
-  (explain every element of the sentence)
+  ### 语法
+  (解释句子的语法)
 
-  ### Grammar
-  (explain the grammar of the sentence)
-
-  ### Vocabulary/phrases 
-  (explain the key vocabulary and phrases used)`;
+  ### 词汇/短语
+  (解释使用的关键词汇和短语)`;

enjoy/src/renderer/components/medias/media-caption-tabs.tsx

@@ -348,7 +348,7 @@ const TranslationTabContent = (props: { text: string }) => {
           setTranslation(result);
         }
       })
-      .catch((err) => t("translationFailed", { error: err.message }))
+      .catch((err) => toast.error(err.message))
       .finally(() => {
         setTranslating(false);
       });
@@ -422,7 +422,7 @@ const AnalysisTabContent = (props: { text: string }) => {
           setAnalysisResult(result);
         }
       })
-      .catch((err) => t("analysisFailed", { error: err.message }))
+      .catch((err) => toast.error(err.message))
       .finally(() => {
         setAnalyzing(false);
       });

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

@@ -222,7 +222,7 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
 
   const calContainerWidth = () => {
     const w = document
-      .querySelector(".media-recording-container")
+      .querySelector(".media-recording-wrapper")
       ?.getBoundingClientRect()?.width;
     if (!w) return;
 
@@ -371,10 +371,15 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
   ]);
 
   useEffect(() => {
-    if (!ref?.current) return;
+    if (!width) return;
 
-    ref.current.style.width = `${width}px`;
-  }, [width]);
+    const container: HTMLDivElement = document.querySelector(
+      ".media-recording-container"
+    );
+    if (!container) return;
+
+    container.style.width = `${width}px`;
+  }, [width, currentRecording, isRecording]);
 
   useEffect(() => {
     calContainerWidth();
@@ -387,7 +392,7 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
         calContainerWidth();
       });
     };
-  }, []);
+  }, [currentRecording, isRecording]);
 
   useHotkeys(
     ["Ctrl+R", "Meta+R"],
@@ -428,9 +433,9 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
     );
 
   return (
-    <div className="flex space-x-4 media-recording-container">
-      <div className="border rounded-xl shadow-lg flex-1 relative">
-        <div ref={ref}></div>
+    <div className="flex space-x-4 media-recording-wrapper">
+      <div className="border rounded-xl shadow-lg flex-1 relative media-recording-container">
+        <div className="w-full" ref={ref}></div>
 
         <div className="absolute right-2 top-1">
           <span className="text-sm">{formatDuration(currentTime || 0)}</span>

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

@@ -87,7 +87,7 @@ export const MediaPlayer = () => {
 
   const calContainerWidth = () => {
     const w = document
-      .querySelector(".media-player-container")
+      .querySelector(".media-player-wrapper")
       ?.getBoundingClientRect()?.width;
     if (!w) return;
 
@@ -122,7 +122,10 @@ export const MediaPlayer = () => {
   }, [ref]);
 
   useEffect(() => {
-    if (!ref?.current) return;
+    const container: HTMLDivElement = document.querySelector(
+      ".media-player-container"
+    );
+    if (!container) return;
 
     ref.current.style.width = `${width}px`;
   }, [width]);
@@ -141,11 +144,11 @@ export const MediaPlayer = () => {
   }, []);
 
   return (
-    <div
-      data-testid="media-player-container"
-      className="flex space-x-4 media-player-container"
-    >
-      <div className="flex-1 border rounded-xl shadow-lg relative">
+    <div className="flex space-x-4 media-player-wrapper">
+      <div
+        data-testid="media-player-container"
+        className="flex-1 border rounded-xl shadow-lg relative media-player-container"
+      >
         <div ref={ref} />
         <div className="absolute right-2 top-1">
           <span className="text-sm">{formatDuration(currentTime || 0)}</span>

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

@@ -109,10 +109,10 @@ export const MediaRecorder = (props: { height?: number }) => {
           setDuration(0);
           interval = setInterval(() => {
             setDuration((duration) => {
-              if (duration >= 300) {
+              if (duration >= 3000) {
                 setIsRecording(false);
               }
-              return duration + 1;
+              return duration + 0.1;
             });
           }, 100);
         } else {
@@ -135,7 +135,7 @@ export const MediaRecorder = (props: { height?: number }) => {
     <div className="h-full w-full flex items-center space-x-4">
       <div className="flex-1 h-full border rounded-xl shadow-lg relative">
         <span className="absolute bottom-2 right-2 serif">
-          {duration / 10}
+          {duration.toFixed(1)}
           <span className="text-xs"> / 300</span>
         </span>
         <div className="h-full" ref={ref}></div>