fix(getWorkflowInfo): extracted

extracted

Author: snomiao

app/page.tsx

@@ -11,7 +11,7 @@ import TimeAgo from "timeago-react";
 import useManifestPWA from "use-manifest-pwa";
 import { useSnapshot } from "valtio";
 import { persistState } from "./persistState";
-import { readWorkflowInfo, saveWorkflowInfo } from "./utils/exif";
+import { readWorkflowInfo, setWorkflowInfo } from "./utils/exif";
 
 /**
  * @author snomiao <[email protected]> 2024
@@ -41,7 +41,7 @@ export default function Home() {
 
   useSWR(
     "/filelist",
-    async () => workingDir && (await scanFilelist(workingDir)),
+    async () => workingDir && (await scanFilelist(workingDir))
   );
 
   const monaco = useMonaco();
@@ -51,7 +51,7 @@ export default function Home() {
     if (!monaco || !editor) return;
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
       const savebtn = window.document.querySelector(
-        "#save-workflow",
+        "#save-workflow"
       ) as HTMLButtonElement;
       savebtn?.click();
       // editor.getAction("editor.action.formatDocument")!.run();
@@ -82,7 +82,7 @@ export default function Home() {
           await readWorkflowInfo(e).catch((err) => {
             toast.error(`FAIL to read ${e.name}\nCause:${String(err)}`);
             return null;
-          }),
+          })
       )
       .filter() // filter empty
       .toArray();
@@ -276,7 +276,7 @@ export default function Home() {
             <video
               src={tasklist[snap.editing_index]?.previewUrl ?? ""}
               className="h-[3em] w-[3em] inline object-contain rounded"
-              alt="Preview Editing Video"
+              // alt="Preview Editing Video"
               controls
               muted
             />
@@ -285,7 +285,7 @@ export default function Home() {
             <audio
               src={tasklist[snap.editing_index]?.previewUrl ?? ""}
               className="h-[3em] w-[10em] inline rounded"
-              alt="Preview Editing Audio"
+              // alt="Preview Editing Audio"
               controls
             />
           ) : (
@@ -326,8 +326,8 @@ export default function Home() {
                 {!workingDir
                   ? "(download)"
                   : snap.editing_filename === tasklist[snap.editing_index]?.name
-                    ? "(overwrite)"
-                    : "(save as)"}
+                  ? "(overwrite)"
+                  : "(save as)"}
               </span>
             </button>
           </div>
@@ -382,7 +382,7 @@ export default function Home() {
     const buffer = await file.arrayBuffer();
 
     try {
-      const newBuffer = saveWorkflowInfo(buffer, file.type, modifiedMetadata);
+      const newBuffer = setWorkflowInfo(buffer, file.type, modifiedMetadata);
       const fileToSave = new File([newBuffer], filename, { type: file.type });
 
       if (workingDir) {
@@ -391,15 +391,17 @@ export default function Home() {
         download(fileToSave);
       }
     } catch (error) {
-      const msg = "Error processing file: " + error.message;
+      const msg = `Error processing file: ${
+        error instanceof Error ? error.message : String(error)
+      }`;
       alert(msg);
       throw error;
     }
   }
 
   async function writeToWorkingDir(
     workingDir: FileSystemDirectoryHandle,
-    file: File,
+    file: File
   ) {
     const h = await workingDir.getFileHandle(file.name, {
       create: true,
@@ -458,7 +460,7 @@ function tryPrettyJson(json: string) {
 
 function chooseNthFileToEdit(
   tasklist: Awaited<ReturnType<typeof readWorkflowInfo>>[],
-  i: number,
+  i: number
 ) {
   if (!tasklist[i]) {
     persistState.editing_index = -1;

app/utils/exif.ts

@@ -2,17 +2,10 @@ import { getFlacMetadata, setFlacMetadata } from "./exif-flac";
 import { getMp4Metadata, setMp4Metadata } from "./exif-mp4";
 import { getPngMetadata, setPngMetadata } from "./exif-png";
 import { getWebpMetadata, setWebpMetadata } from "./exif-webp";
-
-export async function readWorkflowInfo(
-  e: File | FileSystemFileHandle,
-): Promise<{
-  name: string;
-  workflowJson: string;
-  previewUrl: string;
-  file: File;
-  lastModified: number;
-}> {
-  if (!(e instanceof File)) e = await e.getFile();
+export function getWorkflowInfo(
+  buffer: ArrayBuffer,
+  fileType: string
+): { workflowJson: string } {
   const handlers: Record<
     string,
     (buffer: ArrayBuffer) => Record<string, string>
@@ -24,13 +17,27 @@ export async function readWorkflowInfo(
     "video/mp4": getMp4Metadata,
   };
 
-  const handler = handlers[e.type];
-  if (!handler) throw new Error(`Unsupported file type: ${e.type}`);
+  const handler = handlers[fileType];
+  if (!handler) throw new Error(`Unsupported file type: ${fileType}`);
 
-  const metadata = handler(await e.arrayBuffer());
+  const metadata = handler(buffer);
+  const workflowJson = metadata?.workflow || metadata?.Workflow;
+  return { workflowJson };
+}
+
+export async function readWorkflowInfo(
+  e: File | FileSystemFileHandle
+): Promise<{
+  name: string;
+  workflowJson: string;
+  previewUrl: string;
+  file: File;
+  lastModified: number;
+}> {
+  if (!(e instanceof File)) e = await e.getFile();
+  const { workflowJson } = getWorkflowInfo(await e.arrayBuffer(), e.type);
 
   const previewUrl = URL.createObjectURL(e);
-  const workflowJson = metadata?.workflow || metadata?.Workflow;
   return {
     name: e.name,
     workflowJson,
@@ -47,10 +54,10 @@ export async function readWorkflowInfo(
  * @param metadata The metadata to save
  * @returns The modified file buffer
  */
-export function saveWorkflowInfo(
+export function setWorkflowInfo(
   buffer: ArrayBuffer,
   fileType: string,
-  metadata: Record<string, string>,
+  metadata: Record<string, string>
 ): Uint8Array {
   const handlers: Record<
     string,