Refactor video animation functions and enhance lightbox automation for better video extension handling

Author: cliat

cli.ts

@@ -176,7 +176,6 @@ export async function imageCreateCommand(
       {
         animationPrompt,
         conversationId: createResult.conversationId,
-        branchPath: createResult.branchPath,
         extendCount,
         outputVideo: outputVideo!,
       },
@@ -654,7 +653,6 @@ async function createImageAnimations(
   options: {
     animationPrompt: string;
     conversationId: string;
-    branchPath: string;
     extendCount: number;
     outputVideo: string;
   },
@@ -709,7 +707,6 @@ async function createImageAnimation(
     imageIndex: number;
     animationPrompt: string;
     conversationId: string;
-    branchPath: string;
     extendCount: number;
     videoPath: string;
   },
@@ -719,7 +716,6 @@ async function createImageAnimation(
     image,
     options.animationPrompt,
   );
-  let currentBranchPath = options.branchPath;
   let currentVideo = await pickFirstCompletedVideo(
     client,
     animatedDraft.videos,
@@ -729,12 +725,10 @@ async function createImageAnimation(
 
   for (let i = 0; i < options.extendCount; i += 1) {
     await pauseBetweenMutationJobs();
-    const extendedDraft = await client.extendVideo(
-      options.conversationId,
-      currentBranchPath,
+    const extendedDraft = await extendVideoWithLightbox(
+      sessionName,
       currentVideo,
     );
-    currentBranchPath = extendedDraft.branchPath;
     currentVideo = await pickFirstCompletedVideo(
       client,
       extendedDraft.videos,
@@ -769,7 +763,7 @@ async function createImageAnimation(
   };
 }
 
-type LightboxAnimateResult = {
+type LightboxMediaResult = {
   ok: boolean;
   before?: string;
   after?: string;
@@ -789,9 +783,12 @@ async function animateImageWithLightbox(
     `https://www.meta.ai/create/${image.id}`,
   );
 
-  const result = await runPlaywrightCliCodeJson<LightboxAnimateResult>(
+  const result = await runPlaywrightCliCodeJson<LightboxMediaResult>(
     sessionName,
-    await buildCustomAnimateCode(animationPrompt, image.id),
+    await buildLightboxAutomationCode("metaAiCustomAnimate", {
+      prompt: animationPrompt,
+      sourceMediaId: image.id,
+    }),
   );
 
   if (!result.ok || !result.videoId) {
@@ -802,35 +799,70 @@ async function animateImageWithLightbox(
   }
 
   return {
-    videos: [{
-      id: result.videoId,
-      url: null,
-      thumbnail: null,
-      prompt: animationPrompt,
-      sourceMedia: {
-        id: image.id,
-        url: image.url,
-        thumbnail: image.thumbnail ?? null,
-      },
-    }],
+    videos: [buildGeneratedVideoDraft(result.videoId, animationPrompt, image)],
   };
 }
 
-async function buildCustomAnimateCode(
-  prompt: string,
-  sourceMediaId: string,
+async function extendVideoWithLightbox(
+  sessionName: string,
+  video: CompletedVideo,
+): Promise<{ videos: GeneratedVideo[] }> {
+  await gotoPlaywrightCliSession(
+    sessionName,
+    `https://www.meta.ai/create/${video.id}`,
+  );
+
+  const result = await runPlaywrightCliCodeJson<LightboxMediaResult>(
+    sessionName,
+    await buildLightboxAutomationCode("metaAiExtendAnimation", {
+      sourceMediaId: video.id,
+    }),
+  );
+
+  if (!result.ok || !result.videoId) {
+    const detail = result.reason ? ` ${result.reason}` : "";
+    throw new Error(
+      `Meta video extend did not return a video media id.${detail}`,
+    );
+  }
+
+  return {
+    videos: [buildGeneratedVideoDraft(result.videoId, "Extend", video)],
+  };
+}
+
+async function buildLightboxAutomationCode(
+  functionName: "metaAiCustomAnimate" | "metaAiExtendAnimation",
+  input: Record<string, unknown>,
 ): Promise<string> {
   const scriptPath = await getCustomAnimateScriptPath();
-  const input = { prompt, sourceMediaId };
 
   return `async (page) => {
     await page.addScriptTag({ path: ${JSON.stringify(scriptPath)} });
     return await page.evaluate(async (input) => {
-      return await window.metaAiCustomAnimate(input);
+      return await window[${JSON.stringify(functionName)}](input);
     }, ${JSON.stringify(input)});
   }`;
 }
 
+function buildGeneratedVideoDraft(
+  id: string,
+  prompt: string,
+  sourceMedia: GeneratedImage | CompletedVideo,
+): GeneratedVideo {
+  return {
+    id,
+    url: null,
+    thumbnail: null,
+    prompt,
+    sourceMedia: {
+      id: sourceMedia.id,
+      url: sourceMedia.url,
+      thumbnail: sourceMedia.thumbnail ?? null,
+    },
+  };
+}
+
 async function getCustomAnimateScriptPath(): Promise<string> {
   const scriptUrl = new URL("./lib/meta_lightbox_animate.js", import.meta.url);
   if (scriptUrl.protocol === "file:") {

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliat/meta-ai",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "license": "MIT",
   "exports": {
     ".": "./mod.ts",

lib/history.ts

@@ -266,14 +266,7 @@ async function fetchMediaLibraryPage(
 }> {
   const response = await fetch(META_GRAPHQL_URL, {
     method: "POST",
-    headers: {
-      "Accept": "multipart/mixed, application/json",
-      "Content-Type": "application/json",
-      "Cookie": auth.cookieHeader,
-      "Origin": "https://meta.ai",
-      "Referer": META_CREATE_URL,
-      "User-Agent": auth.userAgent,
-    },
+    headers: buildHistoryGraphqlHeaders(auth),
     body: JSON.stringify({
       doc_id: DOC_MEDIA_LIBRARY_FEED,
       variables: {
@@ -489,14 +482,7 @@ async function deleteHistoryPrompt(
 ): Promise<void> {
   const response = await fetch(META_GRAPHQL_URL, {
     method: "POST",
-    headers: {
-      "Accept": "multipart/mixed, application/json",
-      "Content-Type": "application/json",
-      "Cookie": auth.cookieHeader,
-      "Origin": "https://meta.ai",
-      "Referer": META_CREATE_URL,
-      "User-Agent": auth.userAgent,
-    },
+    headers: buildHistoryGraphqlHeaders(auth),
     body: JSON.stringify({
       doc_id: DOC_DELETE_CONVERSATION,
       variables: {
@@ -541,6 +527,17 @@ async function deleteHistoryPrompt(
   }
 }
 
+function buildHistoryGraphqlHeaders(auth: HistoryFetchAuth): HeadersInit {
+  return {
+    "Accept": "multipart/mixed, application/json",
+    "Content-Type": "application/json",
+    "Cookie": auth.cookieHeader,
+    "Origin": "https://meta.ai",
+    "Referer": META_CREATE_URL,
+    "User-Agent": auth.userAgent,
+  };
+}
+
 function getMediaLibraryFeedPayload(
   value: unknown,
 ): Record<string, unknown> | null {

lib/meta_api.ts

@@ -363,23 +363,7 @@ export class MetaAiClient {
 
       for (const statusRecord of collectStatusRecords(payload)) {
         const previous = latestById.get(statusRecord.mediaId);
-        if (!previous) {
-          latestById.set(statusRecord.mediaId, statusRecord);
-          continue;
-        }
-
-        const previousHasUrl = asOptionalString(previous.generatedVideo?.url);
-        const currentHasUrl = asOptionalString(
-          statusRecord.generatedVideo?.url,
-        );
-        if (!previousHasUrl && currentHasUrl) {
-          latestById.set(statusRecord.mediaId, statusRecord);
-          continue;
-        }
-
-        if (
-          previous.status !== "COMPLETE" && statusRecord.status === "COMPLETE"
-        ) {
+        if (shouldReplaceStatusRecord(previous, statusRecord)) {
           latestById.set(statusRecord.mediaId, statusRecord);
         }
       }
@@ -444,6 +428,23 @@ export class MetaAiClient {
   }
 }
 
+function shouldReplaceStatusRecord(
+  previous: StatusRecord | undefined,
+  current: StatusRecord,
+): boolean {
+  if (!previous) {
+    return true;
+  }
+
+  const previousHasUrl = asOptionalString(previous.generatedVideo?.url);
+  const currentHasUrl = asOptionalString(current.generatedVideo?.url);
+  if (!previousHasUrl && currentHasUrl) {
+    return true;
+  }
+
+  return previous.status !== "COMPLETE" && current.status === "COMPLETE";
+}
+
 function coerceGeneratedVideo(
   value: Record<string, unknown>,
 ): Partial<GeneratedVideo> {

lib/meta_lightbox_animate.js

@@ -21,8 +21,40 @@
       };
     }
 
+    return await submitAndReadNewVideoId(
+      animateButton,
+      sourceMediaId,
+      "Custom animate stayed on the source media page.",
+    );
+  };
+
+  globalThis.metaAiExtendAnimation = async function (input) {
+    const { sourceMediaId } = input;
+    let extendButton = await waitForButton("Extend", 20);
+    if (!extendButton) {
+      const extendPanelButton = await waitForButton("Extend animation", 100);
+      extendPanelButton?.click();
+      extendButton = await waitForButton("Extend", 100);
+    }
+
+    if (!extendButton) {
+      return {
+        ok: false,
+        reason: "Extend submit button was not enabled.",
+        buttons: listButtons(),
+      };
+    }
+
+    return await submitAndReadNewVideoId(
+      extendButton,
+      sourceMediaId,
+      "Video extend stayed on the source media page.",
+    );
+  };
+
+  async function submitAndReadNewVideoId(button, sourceMediaId, staleReason) {
     const before = location.href;
-    animateButton.click();
+    button.click();
     for (let i = 0; i < 1200 && location.href === before; i += 1) {
       await sleep(100);
     }
@@ -34,11 +66,9 @@
       before,
       after,
       videoId,
-      reason: videoId === sourceMediaId
-        ? "Custom animate stayed on the source media page."
-        : undefined,
+      reason: videoId === sourceMediaId ? staleReason : undefined,
     };
-  };
+  }
 
   async function waitForButton(text, attempts) {
     for (let i = 0; i < attempts; i += 1) {