✨ feat: Add align to list view

caoccao · Aug 27, 2024 · a42c914 · a42c914
1 parent 6e0fabc
commit a42c914
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/src/lib/format.ts b/src/lib/format.ts
@@ -63,6 +63,13 @@ export function transformDuration(value: string | undefined | null): string {
   return "";
 }
 
+export function transformFPS(value: string | undefined | null): string {
+  if (value) {
+    return trimFractionZeros(value);
+  }
+  return "";
+}
+
 export function transformResolution(
   _value: any,
   rowData: Record<string, string>,

diff --git a/src/routes/list.svelte b/src/routes/list.svelte
@@ -48,6 +48,7 @@
     transformBitRate,
     transformDefault,
     transformDuration,
+    transformFPS,
     transformResolution,
     transformSamplingRate,
     transformSize,
@@ -60,17 +61,18 @@
   }
 
   class PropertyDefinition {
+    align: "left" | "right" | "center" | "justify";
     format: (
       value: any,
       rowData: Record<string, string>,
       rowIndex: number
     ) => string;
     headerForCardView: string | null;
     headerForListView: string | null;
-    name: string;
-    virtual: boolean;
     inCardView: boolean;
     inListView: boolean;
+    name: string;
+    virtual: boolean;
 
     constructor(
       name: string,
@@ -82,6 +84,7 @@
       headerForCardView: string | null = null,
       headerForListView: string | null = null
     ) {
+      this.align = "left";
       this.format = format;
       this.headerForCardView = headerForCardView;
       this.headerForListView = headerForListView;
@@ -99,6 +102,21 @@
       return this.headerForListView ?? this.name;
     }
 
+    setAlignCenter(): PropertyDefinition {
+      this.align = "center";
+      return this;
+    }
+
+    setAlignLeft(): PropertyDefinition {
+      this.align = "left";
+      return this;
+    }
+
+    setAlignRight(): PropertyDefinition {
+      this.align = "right";
+      return this;
+    }
+
     setHeaderForCardView(header: string | null): PropertyDefinition {
       this.headerForCardView = header;
       return this;
@@ -128,7 +146,7 @@
       return {
         name: this.name,
         header: this.getHeaderForCardView(),
-        align: "left",
+        align: this.align,
         format: this.format,
       };
     }
@@ -139,7 +157,7 @@
       return {
         name: `${stream}:${this.name}`,
         header: this.getHeaderForListView(),
-        align: "left",
+        align: this.align,
         format: this.format,
       };
     }
@@ -165,12 +183,15 @@
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("FileSize", transformSize, "Size", "File Size")
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("Duration", transformDuration)
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("Time", transformTime)
+      .setAlignRight()
       .setVirtual()
       .setInCardView()
       .setInListView(),
@@ -216,11 +237,13 @@
     new PropertyDefinition("Default").setHeaderForCardView("D"),
     new PropertyDefinition("Forced").setHeaderForCardView("F"),
     new PropertyDefinition("BitDepth")
+      .setAlignRight()
       .setHeaderForCardView("Depth")
       .setHeaderForListView("Video Bit Depth")
       .setInCardView()
       .setInListView(),
-    new PropertyDefinition("FrameRate")
+    new PropertyDefinition("FrameRate", transformFPS)
+      .setAlignRight()
       .setHeaderForCardView("FPS")
       .setHeaderForListView("FPS")
       .setInCardView()
@@ -231,9 +254,11 @@
       "Bit Rate",
       "Video Bit Rate"
     )
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("StreamSize", transformSize, "Size", "Video Size")
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("Width"),
@@ -256,11 +281,13 @@
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("Channel(s)")
+      .setAlignRight()
       .setHeaderForCardView("CH")
       .setHeaderForListView("CH")
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("BitDepth")
+      .setAlignRight()
       .setHeaderForCardView("Depth")
       .setHeaderForListView("Audio Bit Depth")
       .setInCardView()
@@ -271,6 +298,7 @@
       "Sampling",
       "Audio Sampling Rate"
     )
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("Default").setHeaderForCardView("D").setInCardView(),
@@ -286,9 +314,11 @@
       "Bit Rate",
       "Audio Bit Rate"
     )
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("StreamSize", transformSize, "Size", "Audio Size")
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
   ];
@@ -315,9 +345,11 @@
       "Bit Rate",
       "Text Bit Rate"
     )
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
     new PropertyDefinition("StreamSize", transformSize, "Size", "Text Size")
+      .setAlignRight()
       .setInCardView()
       .setInListView(),
   ];