Refactor layout

enjoy/src/i18n/en.json

@@ -178,7 +178,8 @@
     "preferences": "Preferences",
     "profile": "My Profile",
     "notes": "Note",
-    "help": "Help"
+    "help": "Help",
+    "collapse": "Collapse"
   },
   "form": {
     "lengthMustBeAtLeast": "{{field}} must be at least {{length}} characters",

enjoy/src/i18n/zh-CN.json

@@ -178,7 +178,8 @@
     "preferences": "软件设置",
     "profile": "个人主页",
     "notes": "笔记",
-    "help": "帮助"
+    "help": "帮助",
+    "collapse": "收起"
   },
   "form": {
     "lengthMustBeAtLeast": "{{field}} 长度不可超过 {{length}} 个字符",

enjoy/src/renderer/components/audios/audio-player.tsx

@@ -1,29 +1,16 @@
 import { useEffect, useContext } from "react";
-import { MediaPlayerProviderContext } from "@renderer/context";
-import {
-  MediaLoadingModal,
-  MediaCaption,
-  MediaPlayerControls,
-  MediaTabs,
-  MediaCurrentRecording,
-  MediaPlayer,
-  LoaderSpin,
-} from "@renderer/components";
+import { MediaShadowProviderContext } from "@renderer/context";
 import { useAudio } from "@renderer/hooks";
+import { MediaShadowPlayer } from "@renderer/components";
 
 export const AudioPlayer = (props: {
   id?: string;
   md5?: string;
   segmentIndex?: number;
 }) => {
   const { id, md5, segmentIndex } = props;
-  const {
-    media,
-    setMedia,
-    layout,
-    setCurrentSegmentIndex,
-    getCachedSegmentIndex,
-  } = useContext(MediaPlayerProviderContext);
+  const { media, setMedia, setCurrentSegmentIndex, getCachedSegmentIndex } =
+    useContext(MediaShadowProviderContext);
 
   const { audio } = useAudio({ id, md5 });
 
@@ -46,38 +33,10 @@ export const AudioPlayer = (props: {
   }, [media?.id]);
 
   if (!audio) return null;
-  if (!layout) return <LoaderSpin />;
 
   return (
-    <div data-testid="audio-player" className={layout.wrapper}>
-      <div className={`${layout.upperWrapper} mb-4`}>
-        <div className="grid grid-cols-5 xl:grid-cols-3 gap-3 xl:gap-6 px-3 xl:px-6 h-full">
-          <div
-            className={`col-span-2 xl:col-span-1 rounded-lg border shadow-lg ${layout.upperWrapper}`}
-          >
-            <MediaTabs />
-          </div>
-          <div className={`col-span-3 xl:col-span-2 ${layout.upperWrapper}`}>
-            <MediaCaption />
-          </div>
-        </div>
-      </div>
-
-      <div className={`flex flex-col`}>
-        <div className={`${layout.playerWrapper} py-2 px-3 xl:px-6`}>
-          <MediaCurrentRecording />
-        </div>
-
-        <div className={`${layout.playerWrapper} py-2 px-3 xl:px-6`}>
-          <MediaPlayer />
-        </div>
-
-        <div className={`${layout.panelWrapper} bg-background shadow-xl`}>
-          <MediaPlayerControls />
-        </div>
-      </div>
-
-      <MediaLoadingModal />
+    <div className="h-full" data-testid="audio-player">
+      <MediaShadowPlayer />
     </div>
   );
 };

enjoy/src/renderer/components/audios/audios-component.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useReducer, useContext } from "react";
 import {
   AudioCard,
-  AddMediaButton,
+  MediaAddButton,
   AudiosTable,
   AudioEditForm,
 } from "@renderer/components";
@@ -228,7 +228,7 @@ export const AudiosComponent = () => {
               onChange={(e) => setQuery(e.target.value)}
             />
 
-            <AddMediaButton type="Audio" />
+            <MediaAddButton type="Audio" />
             <AlertDialog>
               <AlertDialogTrigger asChild>
                 <Button variant="secondary">{t("cleanUp")}</Button>

enjoy/src/renderer/components/audios/audios-segment.tsx

@@ -4,7 +4,7 @@ import {
   AppSettingsProviderContext,
 } from "@renderer/context";
 import { Button, ScrollArea, ScrollBar } from "@renderer/components/ui";
-import { AudioCard, AddMediaButton } from "@renderer/components";
+import { AudioCard, MediaAddButton } from "@renderer/components";
 import { t } from "i18next";
 import { Link } from "react-router-dom";
 
@@ -62,7 +62,7 @@ export const AudiosSegment = (props: { limit?: number }) => {
 
       {audios.length === 0 ? (
         <div className="flex items-center justify-center h-48 border border-dashed rounded-lg">
-          <AddMediaButton />
+          <MediaAddButton />
         </div>
       ) : (
         <ScrollArea>

enjoy/src/renderer/components/chats/chat-input.tsx

@@ -51,6 +51,7 @@ export const ChatInput = () => {
     isPaused,
     askAgent,
     onCreateMessage,
+    shadowing,
   } = useContext(ChatSessionProviderContext);
   const { EnjoyApp } = useContext(AppSettingsProviderContext);
   const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -96,6 +97,7 @@ export const ChatInput = () => {
   useHotkeys(
     currentHotkeys.StartOrStopRecording,
     () => {
+      if (shadowing) return;
       if (isRecording) {
         stopRecording();
       } else {
@@ -107,9 +109,16 @@ export const ChatInput = () => {
     }
   );
 
-  useHotkeys(currentHotkeys.PlayNextSegment, () => askAgent(), {
-    preventDefault: true,
-  });
+  useHotkeys(
+    currentHotkeys.PlayNextSegment,
+    () => {
+      if (shadowing) return;
+      askAgent();
+    },
+    {
+      preventDefault: true,
+    }
+  );
 
   if (isRecording) {
     return (

enjoy/src/renderer/components/courses/chapter-content.tsx

@@ -83,15 +83,19 @@ export const ChapterContent = (props: {
           )}
         </div>
       </div>
-      <div className="select-text prose dark:prose-invert prose-em:font-bold prose-em:text-red-700 mx-auto">
+      <div className="select-text max-w-full prose dark:prose-invert prose-em:font-bold prose-em:text-red-700">
         <h2>
           {chapter.sequence}. {chapter?.title}
         </h2>
-        <MarkdownWrapper>{chapter?.content}</MarkdownWrapper>
+        <MarkdownWrapper className="max-w-full">
+          {chapter?.content}
+        </MarkdownWrapper>
         {translation && (
           <details>
             <summary>{t("translation")}</summary>
-            <MarkdownWrapper>{translation.content}</MarkdownWrapper>
+            <MarkdownWrapper className="max-w-full">
+              {translation.content}
+            </MarkdownWrapper>
           </details>
         )}
 

enjoy/src/renderer/components/courses/example-content.tsx

@@ -145,11 +145,15 @@ export const ExampleContent = (props: {
 
   return (
     <div className="flex flex-col gap-2 px-4 py-2 bg-background border rounded-lg shadow-sm w-full">
-      <MarkdownWrapper>{example.content}</MarkdownWrapper>
+      <MarkdownWrapper className="max-w-full">
+        {example.content}
+      </MarkdownWrapper>
       {translation && (
         <details>
           <summary>{t("translation")}</summary>
-          <MarkdownWrapper>{translation.content}</MarkdownWrapper>
+          <MarkdownWrapper className="max-w-full">
+            {translation.content}
+          </MarkdownWrapper>
         </details>
       )}
       <WavesurferPlayer id={example.id} src={example.audioUrl} />

enjoy/src/renderer/components/llm-chats/llm-message.tsx

@@ -213,11 +213,11 @@ export const LlmMessage = (props: { llmMessage: LlmMessageType }) => {
             </div>
           </div>
           <div className="flex flex-col gap-4 px-4 py-2 mb-2 bg-background border rounded-lg shadow-sm max-w-full">
-            <MarkdownWrapper className="select-text prose dark:prose-invert">
+            <MarkdownWrapper className="select-text max-w-full">
               {llmMessage.response}
             </MarkdownWrapper>
             {translation && (
-              <MarkdownWrapper className="select-text prose dark:prose-invert">
+              <MarkdownWrapper className="select-text max-w-full">
                 {translation}
               </MarkdownWrapper>
             )}

enjoy/src/renderer/components/medias/index.ts

@@ -1,14 +1,7 @@
-export * from "./media-player-controls";
-export * from "./media-caption";
-export * from "./media-info-panel";
-export * from "./media-recordings";
-export * from "./media-current-recording";
-export * from "./media-transcription";
-export * from "./media-transcription-read-button";
-export * from "./media-transcription-generate-button";
-export * from "./media-player";
-export * from "./media-provider";
-export * from "./media-tabs";
+export * from "./media-left-panel";
+export * from "./media-right-panel";
+export * from "./media-bottom-panel";
+
 export * from "./media-loading-modal";
-export * from "./add-media-button";
-export * from "./media-transcription-print";
+export * from "./media-add-button";
+export * from "./media-shadow-player";

enjoy/src/renderer/components/medias/add-media-button.tsx → enjoy/src/renderer/components/medias/media-add-button.tsx

@@ -20,7 +20,7 @@ import {
   DbProviderContext,
 } from "@renderer/context";
 
-export const AddMediaButton = (props: { type?: "Audio" | "Video" }) => {
+export const MediaAddButton = (props: { type?: "Audio" | "Video" }) => {
   const { type = "Audio" } = props;
   const { EnjoyApp } = useContext(AppSettingsProviderContext);
   const { addDblistener, removeDbListener } = useContext(DbProviderContext);

enjoy/src/renderer/components/medias/media-bottom-panel/index.ts

@@ -0,0 +1,4 @@
+export * from "./media-bottom-panel";
+export * from "./media-current-recording";
+export * from "./media-waveform";
+export * from "./media-player-controls";

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

@@ -0,0 +1,22 @@
+import {
+  MediaCurrentRecording,
+  MediaWaveform,
+  MediaPlayerControls,
+} from "@renderer/components";
+
+export const MediaBottomPanel = () => {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 flex flex-col pt-2 overflow-hidden">
+        <div className="flex-1 overflow-hidden px-4 py-2">
+          <MediaCurrentRecording />
+        </div>
+        <div className="flex-1 overflow-hidden px-4 py-2">
+          <MediaWaveform />
+        </div>
+      </div>
+
+      <MediaPlayerControls />
+    </div>
+  );
+};