Feat document layout (#1218)

* add layout config for document

* may config document layout for player

* set default

* update shadow media layout per document layout

enjoy/src/i18n/en.json

@@ -933,5 +933,8 @@
   "myPronunciation": "My pronunciation",
   "originalPronunciation": "Original pronunciation",
   "reloadApp": "reload app",
-  "exit": "Exit"
+  "exit": "Exit",
+  "layout": "Layout",
+  "horizontal": "Horizontal",
+  "vertical": "Vertical"
 }

enjoy/src/i18n/zh-CN.json

@@ -933,5 +933,8 @@
   "myPronunciation": "我的发音",
   "originalPronunciation": "原始发音",
   "reloadApp": "重载应用",
-  "exit": "退出"
+  "exit": "退出",
+  "layout": "布局",
+  "horizontal": "水平",
+  "vertical": "垂直"
 }

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

@@ -83,6 +83,11 @@ export class Document extends Model<Document> {
     return this.config.autoNextSpeech || false;
   }
 
+  @Column(DataType.VIRTUAL)
+  get layout(): "horizontal" | "vertical" {
+    return this.config.layout || "horizontal";
+  }
+
   @Column(DataType.VIRTUAL)
   get ttsConfig(): Record<string, any> {
     return this.config.tts || {};
@@ -310,6 +315,7 @@ export class Document extends Model<Document> {
       config = {
         autoTranslate: false,
         autoNextSpeech: true,
+        layout: "horizontal",
         tts: {
           engine: "enjoyai",
           model: "openai/tts-1",

enjoy/src/renderer/components/documents/document-config-form.tsx

@@ -7,6 +7,11 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Switch,
 } from "@renderer/components/ui";
 import { t } from "i18next";
@@ -19,6 +24,7 @@ const documentConfigSchema = z.object({
   config: z.object({
     autoTranslate: z.boolean(),
     autoNextSpeech: z.boolean(),
+    layout: z.enum(["horizontal", "vertical"]),
     tts: z.object({
       engine: z.string(),
       model: z.string(),
@@ -92,6 +98,27 @@ export const DocumentConfigForm = (props: {
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="config.layout"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("layout")}</FormLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t("horizontal")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="horizontal">
+                      {t("horizontal")}
+                    </SelectItem>
+                    <SelectItem value="vertical">{t("vertical")}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormItem>
+            )}
+          />
+
           <TTSForm form={form} />
         </div>
 

enjoy/src/renderer/context/document-provider.tsx

@@ -254,7 +254,7 @@ export function DocumentProvider({
       }}
     >
       <MediaShadowProvider
-        layout="compact"
+        layout={document?.config?.layout === "vertical" ? "normal" : "compact"}
         onCancel={() => togglePlayingSegment(null)}
       >
         <div ref={ref}>{children}</div>

enjoy/src/renderer/pages/document.tsx

@@ -58,7 +58,10 @@ const DocumentComponent = () => {
         </BreadcrumbList>
       </Breadcrumb>
 
-      <ResizablePanelGroup direction="horizontal" className="px-4 pb-4">
+      <ResizablePanelGroup
+        direction={document.layout || "horizontal"}
+        className="px-4 pb-4"
+      >
         <ResizablePanel id="document" order={0}>
           <ScrollArea
             className={`h-full px-4 pb-6 border rounded-lg shadow-lg ${
@@ -73,7 +76,9 @@ const DocumentComponent = () => {
           </ScrollArea>
         </ResizablePanel>
         <ResizableHandle
-          className={playingSegment ? "invisible mx-2" : "invisible"}
+          className={`${document.layout === "horizontal" ? "mx-2" : "my-2"} ${
+            playingSegment ? "invisible" : ""
+          }`}
         />
         <ResizablePanel
           id="player"

enjoy/src/types/document.d.ts

@@ -5,6 +5,7 @@ type DocumentEType = {
   title: string;
   metadata: Record<string, any>;
   config: Record<string, any>;
+  layout: "horizontal" | "vertical";
   autoTranslate: boolean;
   autoNextSpeech: boolean;
   ttsConfig: Record<string, any>;