@adminide-stack/yantra-mobile 12.0.128 → 12.0.129-alpha.1

package/lib/features/canvas/VideoGeneratorExperience.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect}from'react';import {View,Text,StyleSheet,ActivityIndicator,ScrollView,TextInput}from'react-native';import {useSafeInsets}from'./withRemoteSafeArea.js';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {useKeyboardLiftHeight,KeyboardAwareScreen,KeyboardComposerDock,COMPOSER_INPUT_NATIVE_ID}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {resultUrl,friendlyMediaError,generationImageUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {STATIC_VIDEO_MODELS,normalizeModels,promptAudioModels,videoDurationOptions,buildVideoGenerateParams}from'./generationModels.js';import {DEFAULT_PROMO_PRESET,lookupPromoPreset,defaultNarration,EMPTY_PROMO_CONTEXT,defaultPromoQuality,PROMO_PRESETS,PROMO_DURATIONS,PROMO_PLAYBOOKS,PROMO_ASPECT_RATIOS,designPromoProject,PROMO_CONNECTOR,producePromoVideo}from'./promoVideo.js';import {PromoContextFields,PromoProductionFields}from'./PromoContextFields.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Pressable,pressedStyle,Segmented,RADIUS,SPACE,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect}from'react';import {View,Text,StyleSheet,ActivityIndicator,ScrollView,TextInput}from'react-native';import {useSafeInsets}from'./withRemoteSafeArea.js';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {useKeyboardLiftHeight,KeyboardAwareScreen,KeyboardComposerDock,COMPOSER_INPUT_NATIVE_ID}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {resultUrl,friendlyMediaError,generationImageUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {STATIC_VIDEO_MODELS,normalizeModels,promptAudioModels,videoDurationOptions,buildVideoGenerateParams}from'./generationModels.js';import {PROMO_ASPECT_RATIOS,DEFAULT_PROMO_PRESET,lookupPromoPreset,defaultNarration,EMPTY_PROMO_CONTEXT,defaultPromoQuality,PROMO_PRESETS,PROMO_DURATIONS,PROMO_PLAYBOOKS,designPromoProject,PROMO_CONNECTOR,producePromoVideo}from'./promoVideo.js';import {PromoContextFields,PromoProductionFields}from'./PromoContextFields.js';import {runTrackedGeneration}from'./generationTasks.js';import {imageLaneCall}from'./generatorReferences.js';import {DirectorPill,DirectorSheet}from'./generator/DirectorSheet.js';import {EMPTY_DIRECTION,directedPrompt}from'./generator/direction.js';import {ShotPanel,ShotStructureButton}from'./generator/ShotPanel.js';import {briefWorthStructuring}from'./generator/shot.js';import {useShotSpec}from'./generator/useShotSpec.js';import {RunLogCard}from'./generator/RunLogCard.js';import {logStep,finishRun,failRun,startRun}from'./generator/runLog.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Pressable,pressedStyle,Segmented,RADIUS,SPACE,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -26,15 +26,20 @@ function VideoGeneratorExperience({
   item,
   restyle = false,
   initialPrompt = "",
+  initialAspect,
+  initialResolution,
+  initialReferenceUrl,
+  boardId,
   runAction,
   onClose,
   onGenerated,
   onPromoDesigned
 }) {
+  var _a;
   const theme = useCanvasTheme();
   const styles = useMemo(() => makeStyles(theme), [theme]);
   const imageReference = (mode === "video" || mode === "promo") && (item == null ? void 0 : item.type) === "image" ? unwrapProxyUrl(item.src) : null;
-  const [referenceUrl, setReferenceUrl] = useState(imageReference);
+  const [referenceUrl, setReferenceUrl] = useState(imageReference != null ? imageReference : initialReferenceUrl ? unwrapProxyUrl(initialReferenceUrl) : null);
   const [videoSourceUrl, setVideoSourceUrl] = useState(restyle && (item == null ? void 0 : item.type) === "video" ? unwrapProxyUrl(item.src) : null);
   const [capturing, setCapturing] = useState(mode === "video" && (item == null ? void 0 : item.type) === "video" && !restyle);
   const [frameSec, setFrameSec] = useState(1);
@@ -42,7 +47,17 @@ function VideoGeneratorExperience({
   const [selectedModel, setSelectedModel] = useState("");
   const [videoDuration, setVideoDuration] = useState(0);
   const [prompt, setPrompt] = useState(initialPrompt);
-  const [aspect, setAspect] = useState(mode === "image" ? "1:1" : "16:9");
+  const [aspect, setAspect] = useState(() => {
+    const allowed = mode === "promo" ? PROMO_ASPECT_RATIOS : ASPECTS;
+    if (initialAspect && allowed.includes(initialAspect)) return initialAspect;
+    return mode === "image" ? "1:1" : "16:9";
+  });
+  const [videoResolution, setVideoResolution] = useState(initialResolution || "1080p");
+  const [direction, setDirection] = useState(EMPTY_DIRECTION);
+  const [directorOpen, setDirectorOpen] = useState(false);
+  const [runLog, setRunLog] = useState(null);
+  const runLogRef = useRef(null);
+  const shot = useShotSpec(runAction);
   const [promoPreset, setPromoPreset] = useState(mode === "promo" && (item == null ? void 0 : item.type) === "video" ? "footage-remix" : DEFAULT_PROMO_PRESET);
   const [promoDuration, setPromoDuration] = useState(lookupPromoPreset(mode === "promo" && (item == null ? void 0 : item.type) === "video" ? "footage-remix" : DEFAULT_PROMO_PRESET).defaultDurationSeconds);
   const [promoCaptions, setPromoCaptions] = useState(true);
@@ -98,13 +113,13 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
     let cancelled = false;
     const job = mode === "image" ? runAction("yantra-image-generation", "YANTRA_GEMINI_IMAGE_LIST_MODELS", {}) : mode === "audio" ? runAction("yantra-audio", "YANTRA_AUDIO_LIST_MODELS", {}) : runAction("yantra-video-generation", "YANTRA_VIDEO_GENERATION_LIST_MODELS", {});
     job.then((result) => {
-      var _a, _b;
+      var _a2, _b;
       if (cancelled) return;
       let list = normalizeModels(result);
       if (mode === "audio") list = promptAudioModels(list);
       if (mode === "video" && list.length === 0) list = STATIC_VIDEO_MODELS;
       setModels(list);
-      const prefer = restyle && mode === "video" ? (_a = list.find((m) => m.supportsVideoInput)) == null ? void 0 : _a.id : (_b = list[0]) == null ? void 0 : _b.id;
+      const prefer = restyle && mode === "video" ? (_a2 = list.find((m) => m.supportsVideoInput)) == null ? void 0 : _a2.id : (_b = list[0]) == null ? void 0 : _b.id;
       if (prefer) setSelectedModel((current) => current || prefer);
     }).catch(() => {
       if (cancelled) return;
@@ -119,6 +134,12 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
   }, [mode, restyle, runAction]);
   const selectedModelInfo = models.find((m) => m.id === selectedModel);
   const durationChoices = mode === "video" ? videoDurationOptions(selectedModelInfo) : [];
+  const resolutions = mode === "video" ? (_a = selectedModelInfo == null ? void 0 : selectedModelInfo.resolutions) != null ? _a : [] : [];
+  const effectiveResolution = resolutions.length ? resolutions.includes(videoResolution) ? videoResolution : resolutions.includes("1080p") ? "1080p" : resolutions[resolutions.length - 1] : void 0;
+  const putRunLog = (next) => {
+    runLogRef.current = next;
+    setRunLog(next);
+  };
   useEffect(() => {
     if (videoDuration && !durationChoices.includes(videoDuration)) setVideoDuration(0);
   }, [durationChoices, videoDuration]);
@@ -131,16 +152,44 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
     }
     setBusy(true);
     setNotice(null);
-    const job = mode === "image" ? runAction("yantra-image-generation", "YANTRA_GEMINI_IMAGE_GENERATE", __spreadValues({
+    const {
+      compiled: capturedShot,
+      snapshot: shotSnapshot
+    } = mode === "video" ? shot.capture() : {
+      compiled: null,
+      snapshot: null
+    };
+    const sent = mode === "video" ? directedPrompt((capturedShot == null ? void 0 : capturedShot.prompt) || text, direction) : text;
+    if (capturedShot) shot.clear();
+    putRunLog(logStep(startRun(`Generate ${mode === "promo" ? "marketing video" : mode}`), "Submitting\u2026"));
+    const job = mode === "image" ? runTrackedGeneration(__spreadProps(__spreadValues({
+      run: runAction,
+      connector: "yantra-image-generation"
+    }, imageLaneCall({
       prompt: text,
-      aspectRatio: aspect
-    }, selectedModel ? {
-      model: selectedModel
-    } : {})).then((result) => generationImageUrl(result)) : mode === "audio" ? runAction("yantra-audio", "YANTRA_AUDIO_RUN_PROMPT", __spreadValues({
-      prompt: text
-    }, selectedModel ? {
-      model: selectedModel
-    } : {})).then((result) => resultUrl(result, "YANTRA_AUDIO_RUN_PROMPT")) : mode === "promo" ? producePromoVideo((action, params) => runAction(PROMO_CONNECTOR, action, params), __spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
+      aspectRatio: aspect,
+      model: selectedModel || void 0,
+      stills: referenceUrl ? [unwrapProxyUrl(referenceUrl)] : [],
+      role: "reference"
+    })), {
+      mode: "image",
+      prompt: text,
+      boardId,
+      resolveUrl: generationImageUrl
+    })) : mode === "audio" ? runTrackedGeneration({
+      run: runAction,
+      connector: "yantra-audio",
+      action: "YANTRA_AUDIO_RUN_PROMPT",
+      params: __spreadValues({
+        prompt: text
+      }, selectedModel ? {
+        model: selectedModel
+      } : {}),
+      mode: "audio",
+      prompt: text,
+      boardId,
+      resolveUrl: (result) => resultUrl(result, "YANTRA_AUDIO_RUN_PROMPT")
+    }) : mode === "promo" ? producePromoVideo((action, params) => runAction(PROMO_CONNECTOR, action, params), __spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
       prompt: text,
       preset: promoPreset,
       durationSeconds: promoDuration,
@@ -162,21 +211,47 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
       narratorVoice: promoNarrator
     } : {}), promoUseCases.trim() ? {
       useCases: promoUseCases
-    } : {}), (msg) => setPromoProgress(msg), void 0, () => cancelledRef.current).then((promo) => promo.url) : runAction("yantra-video-generation", "YANTRA_VIDEO_GENERATION_GENERATE", buildVideoGenerateParams({
-      prompt: text,
-      aspectRatio: aspect,
-      model: selectedModel || void 0,
-      durationSeconds: videoDuration || void 0,
-      referenceImageUrl: referenceUrl ? unwrapProxyUrl(referenceUrl) : void 0,
-      referenceVideoUrl: videoSourceUrl ? unwrapProxyUrl(videoSourceUrl) : void 0
-    })).then((result) => generationMediaUrl(result));
-    job.then((url) => onGenerated(url, {
-      prompt: text,
-      aspect,
-      mode
-    })).catch((err) => {
+    } : {}), (msg) => {
+      setPromoProgress(msg);
+      if (runLogRef.current) putRunLog(logStep(runLogRef.current, msg));
+    }, void 0, () => cancelledRef.current).then((promo) => promo.url) : runTrackedGeneration({
+      run: runAction,
+      connector: "yantra-video-generation",
+      action: "YANTRA_VIDEO_GENERATION_GENERATE",
+      params: buildVideoGenerateParams({
+        prompt: sent,
+        // The spec's framing wins when it has one: the compiled prompt was written against it.
+        aspectRatio: (capturedShot == null ? void 0 : capturedShot.aspectRatio) || aspect,
+        model: selectedModel || void 0,
+        durationSeconds: (capturedShot == null ? void 0 : capturedShot.durationSeconds) || videoDuration || void 0,
+        referenceImageUrl: referenceUrl ? unwrapProxyUrl(referenceUrl) : void 0,
+        referenceVideoUrl: videoSourceUrl ? unwrapProxyUrl(videoSourceUrl) : void 0,
+        resolution: effectiveResolution,
+        // Constraints ride the provider's negative_prompt, never the prompt.
+        negativePrompt: capturedShot == null ? void 0 : capturedShot.negativePrompt
+      }),
+      mode: "video",
+      prompt: sent,
+      boardId,
+      resolveUrl: generationMediaUrl
+    });
+    if (mode !== "promo" && runLogRef.current) putRunLog(logStep(runLogRef.current, `Generating ${mode}\u2026`));
+    job.then((url) => {
+      onGenerated(url, {
+        prompt: text,
+        aspect,
+        mode
+      });
+      if (runLogRef.current) {
+        const seconds = (capturedShot == null ? void 0 : capturedShot.durationSeconds) || videoDuration;
+        putRunLog(finishRun(runLogRef.current, mode === "video" ? `Generated a ${seconds ? `${seconds}s ` : ""}${(capturedShot == null ? void 0 : capturedShot.aspectRatio) || aspect}${effectiveResolution ? ` ${effectiveResolution}` : ""} video and placed it on the board.` : `Generated ${mode === "image" ? "an image" : mode === "audio" ? "audio" : "a marketing video"} and placed it on the board.`));
+      }
+    }).catch((err) => {
       if (cancelledRef.current || err instanceof Error && err.message === "cancelled") return;
-      setNotice(friendlyMediaError(err, `${mode} generation`));
+      const message = friendlyMediaError(err, `${mode} generation`);
+      setNotice(message);
+      if (runLogRef.current) putRunLog(failRun(runLogRef.current, message));
+      if (shotSnapshot == null ? void 0 : shotSnapshot.spec) shot.restore(shotSnapshot);
     }).finally(() => {
       setBusy(false);
       setPromoProgress(null);
@@ -196,7 +271,7 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
       /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, children: title }),
       /* @__PURE__ */ jsx(View, { style: styles.headerSpacer })
     ] }),
-    /* @__PURE__ */ jsxs(Pressable, { style: [styles.stage, mode === "promo" && styles.stageCompact], onPress: dismissKeyboard, accessible: false, children: [
+    /* @__PURE__ */ jsxs(Pressable, { style: [styles.stage, (mode === "promo" || mode === "video" && shot.spec) && styles.stageCompact], onPress: dismissKeyboard, accessible: false, children: [
       referenceUrl ? /* @__PURE__ */ jsx(Image, { source: {
         uri: referenceUrl
       }, style: StyleSheet.absoluteFill, contentFit: "contain" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: stageIcon, size: 48, color: "rgba(255,255,255,0.22)" }),
@@ -219,6 +294,11 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
       ] }) }, sec)) })
     ] }) : null,
     keyboardOpen ? null : /* @__PURE__ */ jsx(Pressable, { onPress: dismissKeyboard, accessible: false, children: /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) }),
+    runLog && !busy && !keyboardOpen ? /* @__PURE__ */ jsx(View, { style: styles.runLog, children: /* @__PURE__ */ jsx(RunLogCard, { run: runLog }) }) : null,
+    mode === "video" && shot.spec && shot.constraints && !keyboardOpen ? /* @__PURE__ */ jsx(ScrollView, { style: styles.promoScroll, contentContainerStyle: styles.shotBlock, keyboardShouldPersistTaps: "handled", children: /* @__PURE__ */ jsx(ShotPanel, { spec: shot.spec, constraints: shot.constraints, onChange: shot.setSpec, onDiscard: () => {
+      const brief = shot.discard();
+      if (brief) setPrompt(brief);
+    }, onRestructure: () => void shot.structure(shot.brief.current, selectedModel), busy: shot.busy }) }) : null,
     mode === "promo" && !keyboardOpen ? (
       // Promo has many settings: they scroll in their own region, grouped and labelled,
       // so the wall of chips becomes a short form.
@@ -289,13 +369,20 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
         "s"
       ] }) }, secs))
     ] }) : null,
+    mode === "video" && !keyboardOpen ? /* @__PURE__ */ jsxs(View, { style: styles.aspectRow, children: [
+      resolutions.map((res) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setVideoResolution(res), style: ({
+        pressed
+      }) => [styles.chip, effectiveResolution === res && styles.chipOn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Resolution ${res}`, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, effectiveResolution === res && styles.chipLabelOn], children: res }) }, res)),
+      /* @__PURE__ */ jsx(DirectorPill, { value: direction, onPress: () => setDirectorOpen(true) }),
+      !shot.spec && briefWorthStructuring(prompt) && runAction ? /* @__PURE__ */ jsx(ShotStructureButton, { busy: shot.busy, onPress: () => void shot.structure(prompt, selectedModel) }) : null
+    ] }) : null,
     mode !== "audio" ? /* @__PURE__ */ jsx(View, { style: styles.segmentRow, children: /* @__PURE__ */ jsx(Segmented, { options: (mode === "promo" ? PROMO_ASPECT_RATIOS : ASPECTS).map((value) => ({
       id: value,
       label: value
     })), value: aspect, onChange: (value) => setAspect(value), style: styles.segmented }) }) : null,
     /* @__PURE__ */ jsx(KeyboardComposerDock, { closedInset: insets.bottom, onSwipeUp: () => {
-      var _a;
-      return (_a = inputRef.current) == null ? void 0 : _a.focus();
+      var _a2;
+      return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, children: /* @__PURE__ */ jsx(View, { style: styles.composer, children: /* @__PURE__ */ jsxs(View, { style: styles.composerField, children: [
       /* @__PURE__ */ jsx(TextInput, { ref: inputRef, nativeID: COMPOSER_INPUT_NATIVE_ID, value: prompt, onChangeText: setPrompt, placeholder: mode === "image" ? "Describe the image\u2026" : mode === "audio" ? "Describe the audio\u2026" : mode === "promo" ? "Describe the promo\u2026" : "Describe the video\u2026", placeholderTextColor: theme.mutedForeground, style: styles.input, multiline: true, editable: !busy }),
       mode === "promo" && onPromoDesigned && !lookupPromoPreset(promoPreset).produceOnly ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
@@ -325,9 +412,13 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
         pressed
       }) => [styles.send, (!prompt.trim() || busy || capturing) && styles.sendDisabled, pressedStyle(pressed && !busy)], accessibilityRole: "button", accessibilityLabel: `Generate ${mode}`, children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.primaryForeground }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-up", size: 20, color: theme.primaryForeground }) })
     ] }) }) }),
-    notice ? /* @__PURE__ */ jsxs(View, { style: styles.notice, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: notice }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => setNotice(null), hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: styles.noticeDismiss, children: "OK" }) })
+    directorOpen && mode === "video" ? /* @__PURE__ */ jsx(DirectorSheet, { value: direction, onChange: setDirection, onClose: () => setDirectorOpen(false), prompt }) : null,
+    notice || shot.error ? /* @__PURE__ */ jsxs(View, { style: styles.notice, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: notice || shot.error }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+        setNotice(null);
+        shot.dismissError();
+      }, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: styles.noticeDismiss, children: "OK" }) })
     ] }) : null
   ] });
 }
@@ -376,6 +467,15 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   promoScroll: {
     flex: 1
   },
+  shotBlock: {
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.md,
+    paddingBottom: SPACE.lg
+  },
+  runLog: {
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.md
+  },
   groupLabel: __spreadProps(__spreadValues({}, TYPE.label), {
     color: theme.mutedForeground,
     paddingHorizontal: SPACE.lg,