@adminide-stack/yantra-mobile 12.0.69-alpha.8 → 12.0.69

package/lib/features/canvas/VideoEditExperience.js

@@ -0,0 +1,824 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {useState,useCallback,useMemo}from'react';import {StyleSheet,View,Pressable,Text,ActivityIndicator,ScrollView,TextInput}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {resultUrl,friendlyMediaError}from'./videoEditor/mediaActions.js';import {VIDEO_EDIT_CATEGORIES,VIDEO_EDIT_ACTIONS,resultKind,INSTANT_HINT}from'./videoEditor/videoEditOps.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function VideoEditExperience({
+  src,
+  name,
+  items = [],
+  runAction,
+  onClose,
+  onApplied
+}) {
+  var _a, _b;
+  const [history, setHistory] = useState([src]);
+  const [appliedKind, setAppliedKind] = useState("video");
+  const [busy, setBusy] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const [probe, setProbe] = useState(null);
+  const [playing, setPlaying] = useState(false);
+  const [category, setCategory] = useState("basic");
+  const [op, setOp] = useState("trim");
+  const [form, setForm] = useState(defaultForm);
+  const current = history[history.length - 1];
+  const edited = history.length > 1;
+  const ops = (_b = (_a = VIDEO_EDIT_CATEGORIES.find((c) => c.id === category)) == null ? void 0 : _a.ops) != null ? _b : [];
+  const patch = useCallback((key, value) => {
+    setForm((prev) => __spreadProps(__spreadValues({}, prev), {
+      [key]: value
+    }));
+  }, []);
+  const apply = useCallback(() => {
+    if (!runAction) {
+      setNotice("Editing needs the host connector \u2014 not wired in this host.");
+      return;
+    }
+    if (busy) return;
+    const action = VIDEO_EDIT_ACTIONS[op];
+    const params = paramsFor(op, form);
+    setBusy(opLabel(op));
+    setPlaying(false);
+    setProbe(null);
+    runAction("yantra-video-editing", action, __spreadValues({
+      input_url: current
+    }, params)).then((result) => {
+      var _a2;
+      if (op === "probe") {
+        setProbe(JSON.stringify((_a2 = result.data) != null ? _a2 : result, null, 2));
+        return;
+      }
+      setHistory((h) => [...h, resultUrl(result, action)]);
+      setAppliedKind(resultKind(op));
+      setNotice(null);
+    }).catch((err) => setNotice(friendlyMediaError(err, "video edit"))).finally(() => setBusy(null));
+  }, [busy, current, form, op, runAction]);
+  const done = () => {
+    if (edited) onApplied(current, appliedKind);
+    else onClose();
+  };
+  const videos = useMemo(() => items.filter((i) => i.type === "video" && i.src !== current), [items, current]);
+  const images = useMemo(() => items.filter((i) => i.type === "image"), [items]);
+  const audios = useMemo(() => items.filter((i) => i.type === "audio"), [items]);
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, testID: "video-editor", children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#F7F7FA" }) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, numberOfLines: 1, children: (name == null ? void 0 : name.trim()) || "Edit video" }),
+      /* @__PURE__ */ jsxs(View, { style: styles.headerActions, children: [
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setHistory((h) => h.length > 1 ? h.slice(0, -1) : h), hitSlop: 10, disabled: !edited || busy !== null, accessibilityRole: "button", accessibilityLabel: "Undo", style: !edited || busy ? styles.disabled : null, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "undo-variant", size: 21, color: "#F7F7FA" }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: done, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Done", children: /* @__PURE__ */ jsx(Text, { style: styles.done, children: edited ? "Done" : "Close" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.stage, children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video-outline", size: 56, color: "#2A2440" }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => setPlaying((p) => !p), style: styles.playBtn, accessibilityRole: "button", accessibilityLabel: playing ? "Pause" : "Play", disabled: true, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: playing ? "pause" : "play", size: 26, color: "#0A0A0C" }) }),
+      busy ? /* @__PURE__ */ jsxs(View, { style: styles.busyVeil, children: [
+        /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F7F7FA" }),
+        /* @__PURE__ */ jsxs(Text, { style: styles.busyLabel, children: [
+          busy,
+          "\u2026"
+        ] })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.panel, children: [
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.chipRow, style: styles.chipScroll, children: VIDEO_EDIT_CATEGORIES.map((cat) => {
+        const active = category === cat.id;
+        return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+          setCategory(cat.id);
+          setOp(cat.ops[0].op);
+          setProbe(null);
+        }, style: [styles.catChip, active && styles.catChipOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.catLabel, active && styles.catLabelOn], children: cat.label }) }, cat.id);
+      }) }),
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.chipRow, style: styles.chipScroll, children: ops.map((entry) => {
+        const active = op === entry.op;
+        return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+          setOp(entry.op);
+          setProbe(null);
+        }, style: [styles.opChip, active && styles.opChipOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.opLabel, active && styles.opLabelOn], children: entry.label }) }, entry.op);
+      }) }),
+      /* @__PURE__ */ jsxs(ScrollView, { style: styles.controls, contentContainerStyle: styles.controlsInner, children: [
+        /* @__PURE__ */ jsx(OpControls, { op, form, patch, videos, images, audios }),
+        probe ? /* @__PURE__ */ jsx(Text, { style: styles.probe, children: probe }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: apply, disabled: busy !== null, style: [styles.apply, busy && styles.disabled], accessibilityRole: "button", accessibilityLabel: "Apply edit", children: /* @__PURE__ */ jsxs(Text, { style: styles.applyLabel, children: [
+        "Apply ",
+        opLabel(op)
+      ] }) })
+    ] }),
+    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" }) })
+    ] }) : null
+  ] });
+}
+const defaultForm = () => ({
+  trimStart: 0,
+  trimEnd: 10,
+  speed: 1.5,
+  codec: "h264",
+  resolution: "720p",
+  gifFps: 10,
+  gifWidth: 360,
+  thumbTime: 0,
+  fps: 30,
+  cropX: "0",
+  cropY: "0",
+  cropW: "iw",
+  cropH: "ih",
+  padW: "1280",
+  padH: "720",
+  padColor: "black",
+  rotateDeg: 90,
+  flipH: false,
+  flipV: false,
+  fadeInMs: 500,
+  fadeOutMs: 500,
+  blur: 5,
+  denoise: "medium",
+  stabilize: 30,
+  delogoX: 0,
+  delogoY: 0,
+  delogoW: 100,
+  delogoH: 50,
+  brightness: 0,
+  contrast: 1,
+  saturation: 1,
+  volume: 1,
+  lufs: -16,
+  delayMs: 0,
+  overlayText: "",
+  overlayX: "10",
+  overlayY: "10",
+  overlaySize: 24,
+  overlayImage: "",
+  pipUrl: "",
+  subtitleUrl: "",
+  chroma: "#00ff00",
+  chromaSim: 0.1,
+  loop: 2,
+  tags: "title=My Video",
+  extraUrls: [],
+  stackDir: "h",
+  transitionUrl: "",
+  transitionFx: "fade",
+  transitionMs: 1e3,
+  addAudioUrl: "",
+  extractFps: 1,
+  slideSec: 2,
+  sheetCols: 5,
+  sheetRows: 5
+});
+function paramsFor(op, f) {
+  switch (op) {
+    case "trim":
+      return {
+        start_secs: f.trimStart,
+        end_secs: f.trimEnd
+      };
+    case "speed":
+      return {
+        factor: f.speed
+      };
+    case "transcode":
+      return {
+        codec: f.codec,
+        resolution: f.resolution
+      };
+    case "gif":
+      return {
+        fps: f.gifFps,
+        width: f.gifWidth
+      };
+    case "thumbnail":
+      return {
+        time_secs: f.thumbTime
+      };
+    case "fps":
+      return {
+        fps: f.fps
+      };
+    case "crop":
+      return {
+        x: f.cropX,
+        y: f.cropY,
+        width: f.cropW,
+        height: f.cropH
+      };
+    case "pad":
+      return {
+        width: f.padW,
+        height: f.padH,
+        color: f.padColor
+      };
+    case "rotate":
+      return {
+        degrees: f.rotateDeg,
+        flip_h: f.flipH,
+        flip_v: f.flipV
+      };
+    case "fade":
+      return {
+        fade_in_ms: f.fadeInMs,
+        fade_out_ms: f.fadeOutMs
+      };
+    case "blur":
+      return {
+        radius: f.blur
+      };
+    case "denoise":
+      return {
+        strength: f.denoise
+      };
+    case "stabilize":
+      return {
+        smoothing: f.stabilize
+      };
+    case "delogo":
+      return {
+        x: f.delogoX,
+        y: f.delogoY,
+        width: f.delogoW,
+        height: f.delogoH
+      };
+    case "color_adjust":
+      return {
+        brightness: f.brightness,
+        contrast: f.contrast,
+        saturation: f.saturation
+      };
+    case "volume":
+      return {
+        level: f.volume
+      };
+    case "audio_normalize":
+      return {
+        i: f.lufs
+      };
+    case "audio_delay":
+      return {
+        delay_ms: f.delayMs
+      };
+    case "overlay_text":
+      return {
+        text: f.overlayText,
+        x: f.overlayX,
+        y: f.overlayY,
+        font_size: f.overlaySize
+      };
+    case "overlay_image":
+      return {
+        overlay_image: f.overlayImage
+      };
+    case "picture_in_picture":
+      return {
+        overlay: f.pipUrl
+      };
+    case "burn_subtitles":
+      return {
+        subtitle_file: f.subtitleUrl
+      };
+    case "chroma_key":
+      return {
+        color: f.chroma,
+        similarity: f.chromaSim
+      };
+    case "loop":
+      return {
+        count: f.loop
+      };
+    case "metadata": {
+      const tags = {};
+      f.tags.split("\n").forEach((line) => {
+        const eq = line.indexOf("=");
+        if (eq > 0) tags[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
+      });
+      return {
+        tags
+      };
+    }
+    case "concat":
+      return {
+        input_urls: f.extraUrls
+      };
+    case "stack":
+      return {
+        input_urls: f.extraUrls,
+        direction: f.stackDir
+      };
+    case "transition":
+      return {
+        input2_url: f.transitionUrl,
+        effect: f.transitionFx,
+        duration_ms: f.transitionMs
+      };
+    case "add_audio":
+      return {
+        audio_input_url: f.addAudioUrl
+      };
+    case "extract_frames":
+      return {
+        fps: f.extractFps
+      };
+    case "slideshow":
+      return {
+        duration_per_image: f.slideSec
+      };
+    case "contact_sheet":
+      return {
+        cols: f.sheetCols,
+        rows: f.sheetRows
+      };
+    default:
+      return {};
+  }
+}
+function opLabel(op) {
+  for (const cat of VIDEO_EDIT_CATEGORIES) {
+    const hit = cat.ops.find((o) => o.op === op);
+    if (hit) return hit.label;
+  }
+  return op;
+}
+function OpControls({
+  op,
+  form,
+  patch,
+  videos,
+  images,
+  audios
+}) {
+  const hint = INSTANT_HINT[op];
+  if (hint) return /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint });
+  if (op === "trim") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(Stepper, { label: "Start", value: `${form.trimStart.toFixed(1)}s`, onLess: () => patch("trimStart", Math.max(0, form.trimStart - 0.5)), onMore: () => patch("trimStart", Math.min(form.trimEnd - 0.5, form.trimStart + 0.5)) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "End", value: `${form.trimEnd.toFixed(1)}s`, onLess: () => patch("trimEnd", Math.max(form.trimStart + 0.5, form.trimEnd - 0.5)), onMore: () => patch("trimEnd", form.trimEnd + 0.5) })
+    ] });
+  }
+  if (op === "speed") {
+    return /* @__PURE__ */ jsx(View, { style: styles.row, children: [0.25, 0.5, 1.5, 2, 4].map((factor) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("speed", factor), style: [styles.choice, form.speed === factor && styles.choiceOn], children: /* @__PURE__ */ jsxs(Text, { style: [styles.choiceLabel, form.speed === factor && styles.choiceLabelOn], children: [
+      factor,
+      "\xD7"
+    ] }) }, factor)) });
+  }
+  if (op === "transcode") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      ["h264", "h265", "av1"].map((codec) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("codec", codec), style: [styles.choice, form.codec === codec && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, form.codec === codec && styles.choiceLabelOn], children: codec.toUpperCase() }) }, codec)),
+      ["720p", "1080p", "4k"].map((res) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("resolution", res), style: [styles.choice, form.resolution === res && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, form.resolution === res && styles.choiceLabelOn], children: res }) }, res))
+    ] });
+  }
+  if (op === "gif") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(Stepper, { label: "FPS", value: `${form.gifFps}`, onLess: () => patch("gifFps", Math.max(5, form.gifFps - 1)), onMore: () => patch("gifFps", Math.min(24, form.gifFps + 1)) }),
+      [360, 480, 640].map((w) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("gifWidth", w), style: [styles.choice, form.gifWidth === w && styles.choiceOn], children: /* @__PURE__ */ jsxs(Text, { style: [styles.choiceLabel, form.gifWidth === w && styles.choiceLabelOn], children: [
+        w,
+        "px"
+      ] }) }, w))
+    ] });
+  }
+  if (op === "thumbnail") {
+    return /* @__PURE__ */ jsx(Stepper, { label: "At", value: `${form.thumbTime.toFixed(1)}s`, onLess: () => patch("thumbTime", Math.max(0, form.thumbTime - 0.5)), onMore: () => patch("thumbTime", form.thumbTime + 0.5) });
+  }
+  if (op === "fps") {
+    return /* @__PURE__ */ jsx(View, { style: styles.row, children: [24, 30, 60].map((n) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("fps", n), style: [styles.choice, form.fps === n && styles.choiceOn], children: /* @__PURE__ */ jsxs(Text, { style: [styles.choiceLabel, form.fps === n && styles.choiceLabelOn], children: [
+      n,
+      " fps"
+    ] }) }, n)) });
+  }
+  if (op === "crop") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.grid, children: [
+      /* @__PURE__ */ jsx(Field, { label: "X", value: form.cropX, onChange: (v) => patch("cropX", v) }),
+      /* @__PURE__ */ jsx(Field, { label: "Y", value: form.cropY, onChange: (v) => patch("cropY", v) }),
+      /* @__PURE__ */ jsx(Field, { label: "Width", value: form.cropW, onChange: (v) => patch("cropW", v) }),
+      /* @__PURE__ */ jsx(Field, { label: "Height", value: form.cropH, onChange: (v) => patch("cropH", v) })
+    ] });
+  }
+  if (op === "pad") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.grid, children: [
+      /* @__PURE__ */ jsx(Field, { label: "Width", value: form.padW, onChange: (v) => patch("padW", v) }),
+      /* @__PURE__ */ jsx(Field, { label: "Height", value: form.padH, onChange: (v) => patch("padH", v) }),
+      /* @__PURE__ */ jsx(Field, { label: "Color", value: form.padColor, onChange: (v) => patch("padColor", v) })
+    ] });
+  }
+  if (op === "rotate") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      [90, 180, 270].map((deg) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("rotateDeg", deg), style: [styles.choice, form.rotateDeg === deg && styles.choiceOn], children: /* @__PURE__ */ jsxs(Text, { style: [styles.choiceLabel, form.rotateDeg === deg && styles.choiceLabelOn], children: [
+        deg,
+        "\xB0"
+      ] }) }, deg)),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("flipH", !form.flipH), style: [styles.choice, form.flipH && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, form.flipH && styles.choiceLabelOn], children: "Flip H" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("flipV", !form.flipV), style: [styles.choice, form.flipV && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, form.flipV && styles.choiceLabelOn], children: "Flip V" }) })
+    ] });
+  }
+  if (op === "fade") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(Stepper, { label: "In", value: `${form.fadeInMs}ms`, onLess: () => patch("fadeInMs", Math.max(0, form.fadeInMs - 100)), onMore: () => patch("fadeInMs", form.fadeInMs + 100) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "Out", value: `${form.fadeOutMs}ms`, onLess: () => patch("fadeOutMs", Math.max(0, form.fadeOutMs - 100)), onMore: () => patch("fadeOutMs", form.fadeOutMs + 100) })
+    ] });
+  }
+  if (op === "blur") {
+    return /* @__PURE__ */ jsx(Stepper, { label: "Radius", value: `${form.blur}`, onLess: () => patch("blur", Math.max(1, form.blur - 1)), onMore: () => patch("blur", form.blur + 1) });
+  }
+  if (op === "denoise") {
+    return /* @__PURE__ */ jsx(View, { style: styles.row, children: ["light", "medium", "strong"].map((level) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("denoise", level), style: [styles.choice, form.denoise === level && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, form.denoise === level && styles.choiceLabelOn], children: level }) }, level)) });
+  }
+  if (op === "stabilize") {
+    return /* @__PURE__ */ jsx(Stepper, { label: "Smooth", value: `${form.stabilize}`, onLess: () => patch("stabilize", Math.max(1, form.stabilize - 5)), onMore: () => patch("stabilize", Math.min(60, form.stabilize + 5)) });
+  }
+  if (op === "delogo") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.grid, children: [
+      /* @__PURE__ */ jsx(Stepper, { label: "X", value: `${form.delogoX}`, onLess: () => patch("delogoX", Math.max(0, form.delogoX - 8)), onMore: () => patch("delogoX", form.delogoX + 8) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "Y", value: `${form.delogoY}`, onLess: () => patch("delogoY", Math.max(0, form.delogoY - 8)), onMore: () => patch("delogoY", form.delogoY + 8) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "W", value: `${form.delogoW}`, onLess: () => patch("delogoW", Math.max(8, form.delogoW - 8)), onMore: () => patch("delogoW", form.delogoW + 8) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "H", value: `${form.delogoH}`, onLess: () => patch("delogoH", Math.max(8, form.delogoH - 8)), onMore: () => patch("delogoH", form.delogoH + 8) })
+    ] });
+  }
+  if (op === "color_adjust") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(Stepper, { label: "Bright", value: form.brightness.toFixed(1), onLess: () => patch("brightness", Math.round((form.brightness - 0.1) * 10) / 10), onMore: () => patch("brightness", Math.round((form.brightness + 0.1) * 10) / 10) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "Contrast", value: form.contrast.toFixed(1), onLess: () => patch("contrast", Math.max(0, Math.round((form.contrast - 0.1) * 10) / 10)), onMore: () => patch("contrast", Math.round((form.contrast + 0.1) * 10) / 10) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "Sat", value: form.saturation.toFixed(1), onLess: () => patch("saturation", Math.max(0, Math.round((form.saturation - 0.1) * 10) / 10)), onMore: () => patch("saturation", Math.round((form.saturation + 0.1) * 10) / 10) })
+    ] });
+  }
+  if (op === "volume") {
+    return /* @__PURE__ */ jsx(View, { style: styles.row, children: [0.25, 0.5, 1, 1.5, 2].map((level) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("volume", level), style: [styles.choice, form.volume === level && styles.choiceOn], children: /* @__PURE__ */ jsxs(Text, { style: [styles.choiceLabel, form.volume === level && styles.choiceLabelOn], children: [
+      Math.round(level * 100),
+      "%"
+    ] }) }, level)) });
+  }
+  if (op === "audio_normalize") {
+    return /* @__PURE__ */ jsx(Stepper, { label: "LUFS", value: `${form.lufs}`, onLess: () => patch("lufs", form.lufs - 1), onMore: () => patch("lufs", form.lufs + 1) });
+  }
+  if (op === "audio_delay") {
+    return /* @__PURE__ */ jsx(Stepper, { label: "Delay", value: `${form.delayMs}ms`, onLess: () => patch("delayMs", Math.max(0, form.delayMs - 50)), onMore: () => patch("delayMs", form.delayMs + 50) });
+  }
+  if (op === "overlay_text") {
+    return /* @__PURE__ */ jsxs(View, { children: [
+      /* @__PURE__ */ jsx(Field, { label: "Text", value: form.overlayText, onChange: (v) => patch("overlayText", v) }),
+      /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+        /* @__PURE__ */ jsx(Field, { label: "X", value: form.overlayX, onChange: (v) => patch("overlayX", v) }),
+        /* @__PURE__ */ jsx(Field, { label: "Y", value: form.overlayY, onChange: (v) => patch("overlayY", v) }),
+        /* @__PURE__ */ jsx(Stepper, { label: "Size", value: `${form.overlaySize}`, onLess: () => patch("overlaySize", Math.max(10, form.overlaySize - 2)), onMore: () => patch("overlaySize", form.overlaySize + 2) })
+      ] })
+    ] });
+  }
+  if (op === "overlay_image") {
+    return /* @__PURE__ */ jsx(PickRow, { label: "Overlay image", items: images, selected: form.overlayImage, onSelect: (url) => patch("overlayImage", url), empty: "Add an image to the board first." });
+  }
+  if (op === "picture_in_picture") {
+    return /* @__PURE__ */ jsx(PickRow, { label: "PiP clip", items: [...videos, ...images], selected: form.pipUrl, onSelect: (url) => patch("pipUrl", url), empty: "Add another clip or image to the board." });
+  }
+  if (op === "burn_subtitles") {
+    return /* @__PURE__ */ jsx(Field, { label: "Subtitle URL", value: form.subtitleUrl, onChange: (v) => patch("subtitleUrl", v) });
+  }
+  if (op === "chroma_key") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(Field, { label: "Color", value: form.chroma, onChange: (v) => patch("chroma", v) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "Sim", value: form.chromaSim.toFixed(2), onLess: () => patch("chromaSim", Math.max(0, Math.round((form.chromaSim - 0.05) * 100) / 100)), onMore: () => patch("chromaSim", Math.round((form.chromaSim + 0.05) * 100) / 100) })
+    ] });
+  }
+  if (op === "loop") {
+    return /* @__PURE__ */ jsx(Stepper, { label: "Count", value: `${form.loop}`, onLess: () => patch("loop", Math.max(1, form.loop - 1)), onMore: () => patch("loop", form.loop + 1) });
+  }
+  if (op === "metadata") {
+    return /* @__PURE__ */ jsx(Field, { label: "Tags (key=value)", value: form.tags, onChange: (v) => patch("tags", v), multiline: true });
+  }
+  if (op === "concat" || op === "stack") {
+    return /* @__PURE__ */ jsxs(View, { children: [
+      op === "stack" ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("stackDir", "h"), style: [styles.choice, form.stackDir === "h" && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, form.stackDir === "h" && styles.choiceLabelOn], children: "Horizontal" }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("stackDir", "v"), style: [styles.choice, form.stackDir === "v" && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, form.stackDir === "v" && styles.choiceLabelOn], children: "Vertical" }) })
+      ] }) : null,
+      /* @__PURE__ */ jsx(PickMulti, { items: videos, selected: form.extraUrls, onChange: (urls) => patch("extraUrls", urls), empty: "Add more videos to the board." })
+    ] });
+  }
+  if (op === "slideshow") {
+    return /* @__PURE__ */ jsx(Stepper, { label: "Each", value: `${form.slideSec}s`, onLess: () => patch("slideSec", Math.max(0.5, form.slideSec - 0.5)), onMore: () => patch("slideSec", form.slideSec + 0.5) });
+  }
+  if (op === "transition") {
+    return /* @__PURE__ */ jsxs(View, { children: [
+      /* @__PURE__ */ jsx(PickRow, { label: "Second clip", items: videos, selected: form.transitionUrl, onSelect: (url) => patch("transitionUrl", url), empty: "Add another video to the board." }),
+      /* @__PURE__ */ jsx(View, { style: styles.row, children: ["fade", "wipeleft", "slideright", "circlecrop"].map((fx) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patch("transitionFx", fx), style: [styles.choice, form.transitionFx === fx && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, form.transitionFx === fx && styles.choiceLabelOn], children: fx }) }, fx)) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "Ms", value: `${form.transitionMs}`, onLess: () => patch("transitionMs", Math.max(200, form.transitionMs - 200)), onMore: () => patch("transitionMs", form.transitionMs + 200) })
+    ] });
+  }
+  if (op === "add_audio") {
+    return /* @__PURE__ */ jsx(PickRow, { label: "Audio", items: audios, selected: form.addAudioUrl, onSelect: (url) => patch("addAudioUrl", url), empty: "Add an audio item to the board." });
+  }
+  if (op === "extract_frames") {
+    return /* @__PURE__ */ jsx(Stepper, { label: "FPS", value: `${form.extractFps}`, onLess: () => patch("extractFps", Math.max(1, form.extractFps - 1)), onMore: () => patch("extractFps", form.extractFps + 1) });
+  }
+  if (op === "contact_sheet") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(Stepper, { label: "Cols", value: `${form.sheetCols}`, onLess: () => patch("sheetCols", Math.max(1, form.sheetCols - 1)), onMore: () => patch("sheetCols", form.sheetCols + 1) }),
+      /* @__PURE__ */ jsx(Stepper, { label: "Rows", value: `${form.sheetRows}`, onLess: () => patch("sheetRows", Math.max(1, form.sheetRows - 1)), onMore: () => patch("sheetRows", form.sheetRows + 1) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Apply to run this edit." });
+}
+function Field({
+  label,
+  value,
+  onChange,
+  multiline
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles.field, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.fieldLabel, children: label }),
+    /* @__PURE__ */ jsx(TextInput, { value, onChangeText: onChange, style: [styles.fieldInput, multiline && styles.fieldMulti], placeholderTextColor: "#5A5A66", autoCapitalize: "none", autoCorrect: false, multiline })
+  ] });
+}
+function Stepper({
+  label,
+  value,
+  onLess,
+  onMore
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles.stepper, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.stepperLabel, children: label }),
+    /* @__PURE__ */ jsx(Pressable, { onPress: onLess, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} less`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 15, color: "#F7F7FA" }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.stepperValue, children: value }),
+    /* @__PURE__ */ jsx(Pressable, { onPress: onMore, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} more`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 15, color: "#F7F7FA" }) })
+  ] });
+}
+function PickRow({
+  label,
+  items,
+  selected,
+  onSelect,
+  empty
+}) {
+  if (items.length === 0) return /* @__PURE__ */ jsx(Text, { style: styles.hint, children: empty });
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.fieldLabel, children: label }),
+    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.row, children: items.map((item) => {
+      const on = item.src === selected;
+      return /* @__PURE__ */ jsx(Pressable, { onPress: () => onSelect(item.src), style: [styles.choice, on && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, on && styles.choiceLabelOn], numberOfLines: 1, children: item.generatedAssetName || item.type }) }, item.id);
+    }) })
+  ] });
+}
+function PickMulti({
+  items,
+  selected,
+  onChange,
+  empty
+}) {
+  if (items.length === 0) return /* @__PURE__ */ jsx(Text, { style: styles.hint, children: empty });
+  return /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.row, children: items.map((item) => {
+    const on = selected.includes(item.src);
+    return /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(on ? selected.filter((u) => u !== item.src) : [...selected, item.src]), style: [styles.choice, on && styles.choiceOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.choiceLabel, on && styles.choiceLabelOn], numberOfLines: 1, children: item.generatedAssetName || item.type }) }, item.id);
+  }) });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: "#0A0A0C"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 12
+  },
+  headerTitle: {
+    flex: 1,
+    color: "#F7F7FA",
+    fontSize: 15,
+    fontWeight: "600",
+    textAlign: "center"
+  },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16
+  },
+  done: {
+    color: "#8B7CFF",
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  disabled: {
+    opacity: 0.35
+  },
+  stage: {
+    flex: 1,
+    marginHorizontal: 14,
+    borderRadius: 18,
+    backgroundColor: "#0F0F14",
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  playBtn: {
+    position: "absolute",
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: "#F7F7FA",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  busyVeil: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    backgroundColor: "rgba(10, 10, 12, 0.55)"
+  }),
+  busyLabel: {
+    color: "#E8E8EE",
+    fontSize: 12.5
+  },
+  panel: {
+    maxHeight: "48%",
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "rgba(255,255,255,0.08)",
+    paddingBottom: 10
+  },
+  chipScroll: {
+    flexGrow: 0
+  },
+  chipRow: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    gap: 6,
+    flexDirection: "row"
+  },
+  catChip: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 999,
+    backgroundColor: "#1F1F24"
+  },
+  catChipOn: {
+    backgroundColor: "#F7F7FA"
+  },
+  catLabel: {
+    color: "#9A9AA5",
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  catLabelOn: {
+    color: "#0A0A0C"
+  },
+  opChip: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 999,
+    backgroundColor: "#16161A"
+  },
+  opChipOn: {
+    backgroundColor: "#8B7CFF"
+  },
+  opLabel: {
+    color: "#C8C8D0",
+    fontSize: 12,
+    fontWeight: "500"
+  },
+  opLabelOn: {
+    color: "#0A0A0C"
+  },
+  controls: {
+    maxHeight: 140,
+    marginTop: 6
+  },
+  controlsInner: {
+    paddingHorizontal: 14,
+    paddingBottom: 8,
+    gap: 8
+  },
+  apply: {
+    marginHorizontal: 14,
+    marginTop: 4,
+    height: 40,
+    borderRadius: 10,
+    backgroundColor: "#8B7CFF",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  applyLabel: {
+    color: "#0A0A0C",
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flexWrap: "wrap",
+    paddingVertical: 4
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  hint: {
+    color: "#9A9AA5",
+    fontSize: 13,
+    lineHeight: 18
+  },
+  probe: {
+    color: "#C8C8D0",
+    fontSize: 11,
+    fontFamily: "Menlo",
+    marginTop: 6
+  },
+  choice: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 9,
+    backgroundColor: "#1F1F24",
+    maxWidth: 140
+  },
+  choiceOn: {
+    backgroundColor: "#8B7CFF"
+  },
+  choiceLabel: {
+    color: "#F7F7FA",
+    fontSize: 12.5,
+    fontWeight: "500"
+  },
+  choiceLabelOn: {
+    color: "#0A0A0C"
+  },
+  field: {
+    minWidth: 88,
+    flexGrow: 1
+  },
+  fieldLabel: {
+    color: "#9A9AA5",
+    fontSize: 11,
+    marginBottom: 4
+  },
+  fieldInput: {
+    color: "#F7F7FA",
+    fontSize: 13,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 9,
+    backgroundColor: "#1F1F24"
+  },
+  fieldMulti: {
+    minHeight: 56,
+    textAlignVertical: "top"
+  },
+  stepper: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 9,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 9,
+    backgroundColor: "#1F1F24"
+  },
+  stepperLabel: {
+    color: "#9A9AA5",
+    fontSize: 11.5
+  },
+  stepperValue: {
+    color: "#F7F7FA",
+    fontSize: 12.5,
+    fontVariant: ["tabular-nums"],
+    minWidth: 44,
+    textAlign: "center"
+  },
+  notice: {
+    position: "absolute",
+    left: 20,
+    right: 20,
+    bottom: 24,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    borderRadius: 12,
+    backgroundColor: "rgba(248, 250, 252, 0.96)"
+  },
+  noticeText: {
+    flex: 1,
+    color: "#0f172a",
+    fontSize: 13
+  },
+  noticeDismiss: {
+    color: "#6C5CE7",
+    fontSize: 13,
+    fontWeight: "600"
+  }
+});export{VideoEditExperience};//# sourceMappingURL=VideoEditExperience.js.map