Add video metadata display

apps/desktop/src/routes/editor/Header.tsx

@@ -27,6 +27,10 @@ import Titlebar from "~/components/titlebar/Titlebar";
 import { initializeTitlebar, setTitlebar } from "~/utils/titlebar-state";
 import type { UnlistenFn } from "@tauri-apps/api/event";
 import { getCurrentWindow, ProgressBarStatus } from "@tauri-apps/api/window";
+import IconLucideHardDrive from "~icons/lucide/hard-drive";
+import IconLucideCheck from "~icons/lucide/check";
+import IconLucideLoaderCircle from "~icons/lucide/loader-circle";
+import IconLucideRotateCcw from "~icons/lucide/rotate-ccw";
 
 export function Header() {
   const currentWindow = getCurrentWindow();
@@ -239,6 +243,17 @@ import { getRequestEvent } from "solid-js/web";
 function ExportButton() {
   const { videoId, project, prettyName } = useEditorContext();
 
+  const [metadata] = createResource(async () => {
+    const result = await commands.getVideoMetadata(videoId, null).catch((e) => {
+      console.error(`Failed to get metadata: ${e}`);
+    });
+    if (!result) return;
+
+    const { duration, size } = result;
+    console.log(`Metadata for video: duration=${duration}, size=${size}`);
+    return { duration, size };
+  });
+
   const exportVideo = createMutation(() => ({
     mutationFn: async (useCustomMuxer: boolean) => {
       const path = await save({
@@ -304,6 +319,7 @@ function ExportButton() {
   }));
 
   return (
+    <div class="flex flex-col items-end gap-1">
     <Button
       variant="primary"
       size="md"
@@ -313,6 +329,24 @@ function ExportButton() {
     >
       Export
     </Button>
+      <Show when={metadata()}>
+        {(meta) => (
+          <div class="text-xs text-gray-400 dark:text-gray-500 flex items-center gap-3 px-2 py-1 rounded-md">
+            <span class="flex items-center">
+              <IconCapCamera class="w-3.5 h-3.5 mr-1 opacity-70" />
+              {Math.floor(meta().duration / 60)}:{Math.floor(meta().duration % 60)
+                .toString()
+                .padStart(2, "0")}
+            </span>
+            <div class="w-[1px] h-3 bg-gray-300 dark:bg-gray-500/50"></div>
+            <span class="flex items-center">
+              <IconLucideHardDrive class="w-3.5 h-3.5 mr-1 opacity-70" />
+              {meta().size.toFixed(2)} MB
+            </span>
+          </div>
+        )}
+      </Show>
+    </div>
   );
 }
 

apps/storybook/vite.config.ts.timestamp-1735325995918-46a167c39672.mjs

@@ -0,0 +1,11 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/onyedikachi/Documents/codes/algora-bounties/Cap/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/index.js";
+import solid from "file:///Users/onyedikachi/Documents/codes/algora-bounties/Cap/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]_@[email protected][email protected]_/node_modules/vite-plugin-solid/dist/esm/index.mjs";
+import capUIPlugin from "file:///Users/onyedikachi/Documents/codes/algora-bounties/Cap/packages/ui-solid/vite.js";
+var vite_config_default = defineConfig({
+  plugins: [solid(), capUIPlugin]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvb255ZWRpa2FjaGkvRG9jdW1lbnRzL2NvZGVzL2FsZ29yYS1ib3VudGllcy9DYXAvYXBwcy9zdG9yeWJvb2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9vbnllZGlrYWNoaS9Eb2N1bWVudHMvY29kZXMvYWxnb3JhLWJvdW50aWVzL0NhcC9hcHBzL3N0b3J5Ym9vay92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvb255ZWRpa2FjaGkvRG9jdW1lbnRzL2NvZGVzL2FsZ29yYS1ib3VudGllcy9DYXAvYXBwcy9zdG9yeWJvb2svdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuaW1wb3J0IHNvbGlkIGZyb20gXCJ2aXRlLXBsdWdpbi1zb2xpZFwiO1xuaW1wb3J0IGNhcFVJUGx1Z2luIGZyb20gXCJAY2FwL3VpLXNvbGlkL3ZpdGVcIjtcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW3NvbGlkKCksIGNhcFVJUGx1Z2luXSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFpWSxTQUFTLG9CQUFvQjtBQUM5WixPQUFPLFdBQVc7QUFDbEIsT0FBTyxpQkFBaUI7QUFFeEIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLE1BQU0sR0FBRyxXQUFXO0FBQ2hDLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==

packages/ui-solid/src/auto-imports.d.ts

@@ -14,12 +14,14 @@ declare global {
   const IconCapCircleCheck: typeof import('~icons/cap/circle-check.jsx')['default']
   const IconCapCirclePlus: typeof import('~icons/cap/circle-plus.jsx')['default']
   const IconCapCircleX: typeof import('~icons/cap/circle-x.jsx')['default']
+  const IconCapClock: typeof import('~icons/cap/clock.jsx')['default']
   const IconCapCopy: typeof import('~icons/cap/copy.jsx')['default']
   const IconCapCorners: typeof import('~icons/cap/corners.jsx')['default']
   const IconCapCrop: typeof import('~icons/cap/crop.jsx')['default']
   const IconCapCursor: typeof import('~icons/cap/cursor.jsx')['default']
   const IconCapEditor: typeof import('~icons/cap/editor.jsx')['default']
   const IconCapEnlarge: typeof import('~icons/cap/enlarge.jsx')['default']
+  const IconCapFile: typeof import('~icons/cap/file.jsx')['default']
   const IconCapFrameFirst: typeof import('~icons/cap/frame-first.jsx')['default']
   const IconCapFrameLast: typeof import('~icons/cap/frame-last.jsx')['default']
   const IconCapHotkeys: typeof import('~icons/cap/hotkeys.jsx')['default']
@@ -53,6 +55,7 @@ declare global {
   const IconLucideEdit: typeof import('~icons/lucide/edit.jsx')['default']
   const IconLucideEye: typeof import('~icons/lucide/eye.jsx')['default']
   const IconLucideFolder: typeof import('~icons/lucide/folder.jsx')['default']
+  const IconLucideHardDrive: typeof import('~icons/lucide/hard-drive.jsx')['default']
   const IconLucideLayoutGrid: typeof import('~icons/lucide/layout-grid.jsx')['default']
   const IconLucideLoaderCircle: typeof import('~icons/lucide/loader-circle.jsx')['default']
   const IconLucideMessageSquarePlus: typeof import('~icons/lucide/message-square-plus.jsx')['default']