sanity-plugin-mux-input 2.16.0 → 2.17.0

package/dist/index.mjs

@@ -973,7 +973,7 @@ function tryWithSuspend(block, onError) {
     return onError ? onError(errorOrPromise) : void 0;
   }
 }
-const Image = styled.img`
+const Image$1 = styled.img`
   transition: opacity 0.175s ease-out 0s;
   display: block;
   width: 100%;
@@ -1051,7 +1051,7 @@ function VideoThumbnail({
           }
         ),
         /* @__PURE__ */ jsx(
-          Image,
+          Image$1,
           {
             src: thumbnailSrc ?? void 0,
             alt: `Preview for ${staticImage ? "image" : "video"} ${asset.filename || asset.assetId}`,
@@ -3059,7 +3059,7 @@ function VideoPlayer({
   hlsConfig,
   ...props
 }) {
-  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), [error, setError] = useState(), playbackId = useMemo(() => {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), playerContainerRef = useRef(null), [error, setError] = useState(), playbackId = useMemo(() => {
     try {
       return getPlaybackId(asset, ["public", "signed", "drm"]);
     } catch {
@@ -3117,6 +3117,7 @@ function VideoPlayer({
     /* @__PURE__ */ jsxs(
       Card,
       {
+        ref: playerContainerRef,
         tone: "transparent",
         style: {
           aspectRatio,
@@ -3153,7 +3154,7 @@ function VideoPlayer({
                   crossOrigin: "anonymous",
                   metadata: {
                     player_name: "Sanity Admin Dashboard",
-                    player_version: "2.16.0",
+                    player_version: "2.17.0",
                     page_type: "Preview Player"
                   },
                   audio: isAudio,
@@ -4315,6 +4316,33 @@ function createUpChunkObservable(uuid2, uploadUrl2, source) {
     return upchunk.on("success", successHandler), upchunk.on("error", errorHandler), upchunk.on("progress", progressHandler), upchunk.on("offline", offlineHandler), upchunk.on("online", onlineHandler), () => upchunk.abort();
   });
 }
+function roundPxString(value) {
+  if (typeof value != "string") return;
+  const trimmed = value.trim();
+  if (!trimmed.endsWith("px")) return;
+  const n = Number(trimmed.slice(0, -2));
+  if (!Number.isFinite(n)) return;
+  let rounded = Math.round(n);
+  return rounded === 0 && (rounded = n < 0 ? -1 : 1), `${rounded}px`;
+}
+function sanitizeOverlaySettingsInPlace(settings) {
+  const inputs = settings.input;
+  if (inputs)
+    for (const input of inputs) {
+      const overlay = input.overlay_settings;
+      if (!overlay) continue;
+      const hm = roundPxString(overlay.horizontal_margin), vm = roundPxString(overlay.vertical_margin), w = roundPxString(overlay.width);
+      hm && (overlay.horizontal_margin = hm), vm && (overlay.vertical_margin = vm), w && (overlay.width = w);
+    }
+}
+function sanitizePxStringsInJson(json) {
+  return json.replace(/"(-?\d+(?:\.\d+)?)px"/g, (_match, num) => {
+    const n = Number(num);
+    if (!Number.isFinite(n)) return _match;
+    let rounded = Math.round(n);
+    return rounded === 0 && (rounded = n < 0 ? -1 : 1), `"${rounded}px"`;
+  });
+}
 function cancelUpload(client, uuid2) {
   return client.observable.request({
     url: `/addons/mux/uploads/${client.config().dataset}/${uuid2}`,
@@ -4325,7 +4353,8 @@ function cancelUpload(client, uuid2) {
 function uploadUrl({
   url,
   settings,
-  client
+  client,
+  watermark
 }) {
   return testUrl(url).pipe(
     switchMap((validUrl) => concat(
@@ -4335,9 +4364,9 @@ function uploadUrl({
           if (!json || !json.status)
             return throwError(new Error("Invalid credentials"));
           const uuid$1 = uuid(), muxBody = settings;
-          muxBody.input || (muxBody.input = [{ type: "video" }]), muxBody.input[0].url = validUrl;
+          muxBody.input || (muxBody.input = [{ type: "video" }]), muxBody.input[0].url = validUrl, sanitizeOverlaySettingsInPlace(muxBody);
           const query = {
-            muxBody: JSON.stringify(muxBody),
+            muxBody: sanitizePxStringsInJson(JSON.stringify(muxBody)),
             filename: validUrl.split("/").slice(-1)[0]
           }, dataset = client.config().dataset;
           return defer(
@@ -4365,7 +4394,8 @@ function uploadUrl({
 function uploadFile({
   settings,
   client,
-  file
+  file,
+  watermark
 }) {
   return testFile(file).pipe(
     switchMap((fileOptions) => concat(
@@ -4375,7 +4405,7 @@ function uploadFile({
           if (!json || !json.status)
             return throwError(() => new Error("Invalid credentials"));
           const uuid$1 = uuid(), body = settings;
-          return concat(
+          return sanitizeOverlaySettingsInPlace(body), concat(
             of({ type: "uuid", uuid: uuid$1 }),
             defer(
               () => client.observable.request({
@@ -4429,7 +4459,7 @@ function pollUpload(client, uuid2) {
     }, 2e3);
   });
 }
-async function updateAssetDocumentFromUpload(client, uuid2) {
+async function updateAssetDocumentFromUpload(client, uuid2, _watermark) {
   let upload, asset;
   try {
     upload = await pollUpload(client, uuid2);
@@ -4951,13 +4981,14 @@ function useMediaMetadata(stagedUpload) {
         setIsLoadingMetadata(!1);
       },
       () => {
-        const duration = videoElement.duration, width = videoElement.videoWidth, height = videoElement.videoHeight, isAudioOnly = width <= 0 && height <= 0;
+        const duration = videoElement.duration, width = videoElement.videoWidth, height = videoElement.videoHeight, isAudioOnly = width <= 0 && height <= 0, aspectRatio = width / height;
         setVideoAssetMetadata((old) => ({
           ...old,
           duration,
           width,
           height,
-          isAudioOnly
+          isAudioOnly,
+          aspectRatio
         }));
       }
     ], cleanupVideo = (videoEl) => {
@@ -4979,6 +5010,51 @@ function useMediaMetadata(stagedUpload) {
     isLoadingMetadata
   };
 }
+function convertWatermarkToMuxOverlay(watermark, options) {
+  if (!watermark.enabled || !watermark.imageUrl)
+    return null;
+  const size = watermark.size || 20, opacity = watermark.opacity ?? 0.7, toPxString = (valuePercent, axis) => {
+    const videoAspectRatio2 = options?.videoAspectRatio ?? 1.7777777777777777, isVertical = videoAspectRatio2 > 0 && videoAspectRatio2 < 1, base = axis === "x" ? isVertical ? 1080 : 1920 : isVertical ? 1920 : 1080, px = valuePercent / 100 * base;
+    let rounded = Math.round(px);
+    return rounded === 0 && (rounded = px < 0 ? -1 : 1), `${rounded}px`;
+  }, normalizeToPixels = (value, axis) => {
+    if (!value) return value;
+    const trimmed = value.trim();
+    if (trimmed.endsWith("px"))
+      return roundPxString(trimmed);
+    if (trimmed.endsWith("%")) {
+      const n = Number(trimmed.slice(0, -1));
+      return Number.isFinite(n) ? toPxString(n, axis) : value;
+    }
+    return value;
+  };
+  if (watermark.overlay_settings) {
+    const widthValue = watermark.overlay_settings.width, widthNormalized = options?.units === "px" ? normalizeToPixels(widthValue, "x") : widthValue;
+    return {
+      ...watermark.overlay_settings,
+      horizontal_margin: options?.units === "px" ? normalizeToPixels(watermark.overlay_settings.horizontal_margin, "x") ?? watermark.overlay_settings.horizontal_margin : watermark.overlay_settings.horizontal_margin,
+      vertical_margin: options?.units === "px" ? normalizeToPixels(watermark.overlay_settings.vertical_margin, "y") ?? watermark.overlay_settings.vertical_margin : watermark.overlay_settings.vertical_margin,
+      width: widthNormalized ?? `${size}%`,
+      opacity: watermark.overlay_settings.opacity ?? `${Math.round(opacity * 100)}%`
+    };
+  }
+  const position = watermark.position || { x: 50, y: 50 }, clampPercent = (value) => Math.max(-100, Math.min(100, value)), toPercentString = (value) => `${value === 0 || Object.is(value, -0) || Math.abs(value) < 1e-9 ? 0.01 : value}%`, watermarkWidthPercentOfVideoWidth = size, videoAspectRatio = options?.videoAspectRatio ?? 16 / 9, imageAspectRatio = watermark.imageAspectRatio ?? 1, watermarkHeightPercentOfVideoHeight = Math.max(
+    0,
+    Math.min(100, size * videoAspectRatio / imageAspectRatio)
+  ), halfWidth = watermarkWidthPercentOfVideoWidth / 2, halfHeight = watermarkHeightPercentOfVideoHeight / 2, leftMargin = clampPercent(
+    Math.min(position.x - halfWidth, 100 - watermarkWidthPercentOfVideoWidth)
+  ), topMargin = clampPercent(
+    Math.min(position.y - halfHeight, 100 - watermarkHeightPercentOfVideoHeight)
+  ), units = options?.units ?? "%", marginX = units === "px" ? toPxString(leftMargin, "x") : toPercentString(leftMargin), marginY = units === "px" ? toPxString(topMargin, "y") : toPercentString(topMargin), width = units === "px" ? toPxString(size, "x") : `${size}%`;
+  return {
+    vertical_align: "top",
+    vertical_margin: marginY,
+    horizontal_align: "left",
+    horizontal_margin: marginX,
+    width,
+    opacity: `${Math.round(opacity * 100)}%`
+  };
+}
 function formatBytes(bytes, si = !1, dp = 1) {
   const thresh = si ? 1e3 : 1024;
   if (Math.abs(bytes) < thresh)
@@ -4991,6 +5067,566 @@ function formatBytes(bytes, si = !1, dp = 1) {
   while (Math.round(Math.abs(bytes) * r) / r >= thresh && u2 < units.length - 1);
   return bytes.toFixed(dp) + " " + units[u2];
 }
+const RangeInput = styled.input`
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--card-border-color);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--card-focus-ring-color, #2276fc);
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--card-focus-ring-color, #2276fc);
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  &:hover::-webkit-slider-thumb {
+    background: var(--card-focus-ring-color, #1a5fc7);
+  }
+
+  &:hover::-moz-range-thumb {
+    background: var(--card-focus-ring-color, #1a5fc7);
+  }
+`, WatermarkOverlay = styled.div`
+  position: absolute;
+  max-width: 200px;
+  opacity: ${(props) => props.$opacity};
+  cursor: move;
+  user-select: none;
+  z-index: 10;
+  pointer-events: auto;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    pointer-events: none;
+  }
+
+  &:hover {
+    outline: 2px dashed rgba(255, 255, 255, 0.8);
+    outline-offset: 4px;
+  }
+`;
+function DraggableWatermark({
+  watermark,
+  onChange,
+  containerRef,
+  videoElementRef
+}) {
+  const [isDragging, setIsDragging] = useState(!1), [dragStart, setDragStart] = useState({ x: 0, y: 0 }), [startPosition, setStartPosition] = useState({ x: 0, y: 0 }), watermarkRef = useRef(null), debounceTimeoutRef = useRef(null), [localPosition, setLocalPosition] = useState(watermark.position || { x: 50, y: 50 }), position = localPosition, size = watermark.size || 20, opacity = watermark.opacity ?? 0.7, parseOpacityPercent = (value) => {
+    if (!value) return null;
+    const trimmed = value.trim();
+    if (!trimmed.endsWith("%")) return null;
+    const num = Number(trimmed.slice(0, -1));
+    return Number.isFinite(num) ? Math.max(0, Math.min(1, num / 100)) : null;
+  }, getVideoContentBox = useCallback(() => {
+    const container = containerRef?.current;
+    if (!container) return { x: 0, y: 0, width: 0, height: 0 };
+    const rect = container.getBoundingClientRect(), containerW = rect.width, containerH = rect.height, videoEl = videoElementRef?.current, videoW = videoEl?.videoWidth || 0, videoH = videoEl?.videoHeight || 0;
+    if (!videoW || !videoH || !containerW || !containerH)
+      return { x: 0, y: 0, width: containerW, height: containerH };
+    const scale = Math.min(containerW / videoW, containerH / videoH), contentW = videoW * scale, contentH = videoH * scale, offsetX = (containerW - contentW) / 2, offsetY = (containerH - contentH) / 2;
+    return { x: offsetX, y: offsetY, width: contentW, height: contentH };
+  }, [containerRef, videoElementRef]), parseOverlayValue = (value) => {
+    if (!value) return null;
+    const trimmed = value.trim(), px = trimmed.endsWith("px"), pct = trimmed.endsWith("%"), num = Number(trimmed.replace(/px|%/g, ""));
+    return Number.isFinite(num) ? px ? { n: num, unit: "px" } : pct ? { n: num, unit: "%" } : null : null;
+  }, computeManualStyle = (overlay) => {
+    const rect = containerRef?.current?.getBoundingClientRect(), w = rect?.width ?? 0, h = rect?.height ?? 0, isVertical = h > w, baseW = isVertical ? 1080 : 1920, baseH = isVertical ? 1920 : 1080, hm = parseOverlayValue(overlay.horizontal_margin), vm = parseOverlayValue(overlay.vertical_margin), ww = parseOverlayValue(overlay.width), manualOpacity = parseOpacityPercent(overlay.opacity), toCss = (v, axis) => {
+      if (v)
+        return v.unit === "%" ? `${v.n}%` : axis === "x" ? `${v.n * w / baseW}px` : `${v.n * h / baseH}px`;
+    }, computeHorizontalStyle = () => overlay.horizontal_align === "left" ? { left: toCss(hm, "x"), right: void 0, transform: "translate(0, 0)" } : overlay.horizontal_align === "right" ? { right: toCss(hm, "x"), left: void 0, transform: "translate(0, 0)" } : { left: "50%", right: void 0, transform: "translate(-50%, 0)" }, computeVerticalStyle = () => overlay.vertical_align === "top" ? { top: toCss(vm, "y"), bottom: void 0 } : overlay.vertical_align === "bottom" ? { bottom: toCss(vm, "y"), top: void 0 } : { top: "50%", bottom: void 0 }, hStyle = computeHorizontalStyle(), vStyle = computeVerticalStyle();
+    let transform = hStyle.transform;
+    return overlay.vertical_align === "middle" && (transform = overlay.horizontal_align === "center" ? "translate(-50%, -50%)" : "translate(0, -50%)"), {
+      position: "absolute",
+      ...hStyle,
+      ...vStyle,
+      transform,
+      width: ww ? toCss(ww, "x") : `${size}%`,
+      opacity: manualOpacity ?? opacity,
+      cursor: "default"
+    };
+  }, debouncedOnChange = useCallback(
+    (newWatermark) => {
+      debounceTimeoutRef.current && clearTimeout(debounceTimeoutRef.current), debounceTimeoutRef.current = setTimeout(() => {
+        onChange(newWatermark);
+      }, 300);
+    },
+    [onChange]
+  );
+  useEffect(() => () => {
+    debounceTimeoutRef.current && clearTimeout(debounceTimeoutRef.current);
+  }, []), useEffect(() => {
+    !isDragging && watermark.position && setLocalPosition(watermark.position);
+  }, [watermark.position, isDragging]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault(), setIsDragging(!0), setDragStart({ x: e.clientX, y: e.clientY }), setStartPosition({ x: position.x, y: position.y });
+    },
+    [position]
+  ), handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging || !containerRef?.current) return;
+      const rect = containerRef.current.getBoundingClientRect(), content = getVideoContentBox(), contentW = content.width || rect.width, contentH = content.height || rect.height, dx = e.clientX - dragStart.x, dy = e.clientY - dragStart.y, deltaXPercent = dx / contentW * 100, deltaYPercent = dy / contentH * 100;
+      let newX = startPosition.x + deltaXPercent, newY = startPosition.y + deltaYPercent;
+      newX = Math.max(0, Math.min(100, newX)), newY = Math.max(0, Math.min(100, newY)), setLocalPosition({ x: newX, y: newY }), debouncedOnChange({
+        ...watermark,
+        position: { x: newX, y: newY }
+      });
+    },
+    [
+      isDragging,
+      dragStart,
+      startPosition,
+      containerRef,
+      watermark,
+      debouncedOnChange,
+      getVideoContentBox
+    ]
+  ), handleMouseUp = useCallback(() => {
+    setIsDragging(!1), debounceTimeoutRef.current && (clearTimeout(debounceTimeoutRef.current), debounceTimeoutRef.current = null), onChange({
+      ...watermark,
+      position: localPosition
+    });
+  }, [watermark, localPosition, onChange]);
+  if (useEffect(() => {
+    if (isDragging)
+      return document.addEventListener("mousemove", handleMouseMove), document.addEventListener("mouseup", handleMouseUp), () => {
+        document.removeEventListener("mousemove", handleMouseMove), document.removeEventListener("mouseup", handleMouseUp);
+      };
+  }, [isDragging, handleMouseMove, handleMouseUp]), !watermark.imageUrl)
+    return null;
+  const hasManualOverlay = !!watermark.overlay_settings, opacityForRender = hasManualOverlay ? parseOpacityPercent(watermark.overlay_settings?.opacity) ?? opacity : opacity, contentBox = getVideoContentBox(), hasContentBox = contentBox.width > 0 && contentBox.height > 0;
+  return /* @__PURE__ */ jsx(
+    WatermarkOverlay,
+    {
+      ref: watermarkRef,
+      $opacity: opacityForRender,
+      onMouseDown: hasManualOverlay ? void 0 : handleMouseDown,
+      style: hasManualOverlay ? computeManualStyle(watermark.overlay_settings) : hasContentBox ? {
+        left: `${contentBox.x + position.x / 100 * contentBox.width}px`,
+        top: `${contentBox.y + position.y / 100 * contentBox.height}px`,
+        transform: "translate(-50%, -50%)",
+        width: `${Math.max(1, size / 100 * contentBox.width)}px`,
+        cursor: isDragging ? "grabbing" : "grab"
+      } : {
+        left: `${position.x}%`,
+        top: `${position.y}%`,
+        transform: "translate(-50%, -50%)",
+        width: `${size}%`,
+        cursor: isDragging ? "grabbing" : "grab"
+      },
+      children: /* @__PURE__ */ jsx("img", { src: watermark.imageUrl, alt: "Watermark", draggable: !1 })
+    }
+  );
+}
+function WatermarkControls({
+  watermark,
+  onChange,
+  onValidationChange,
+  previewContainerRef,
+  previewVideoRef
+}) {
+  const [urlInput, setUrlInput] = useState(watermark.imageUrl || ""), [urlError, setUrlError] = useState(null), [isValidating, setIsValidating] = useState(!1), [isValid, setIsValid] = useState(null), validationTimeoutRef = useRef(null), [mode, setMode] = useState(
+    watermark.overlay_settings ? "manual" : "canvas"
+  ), isUpdatingRef = useRef(!1), isValidExtension = (extension) => extension.endsWith(".png") || extension.endsWith(".jpg") || extension.endsWith(".jpeg"), validateUrl = useCallback(
+    (url) => {
+      if (validationTimeoutRef.current && clearTimeout(validationTimeoutRef.current), !url) {
+        setUrlError(null), setIsValid(null), setIsValidating(!1), onValidationChange?.(null), isUpdatingRef.current = !0, onChange({
+          ...watermark,
+          enabled: !1,
+          imageUrl: void 0,
+          overlay_settings: void 0
+        });
+        return;
+      }
+      setIsValidating(!0), setIsValid(null), setUrlError(null), validationTimeoutRef.current = setTimeout(() => {
+        try {
+          const pathname = new URL(url).pathname.toLowerCase();
+          if (isValidExtension(pathname)) {
+            setIsValid(!0), setUrlError(null), onValidationChange?.(null);
+            const img = new Image();
+            img.onload = () => {
+              const imageAspectRatio = img.naturalWidth && img.naturalHeight ? img.naturalWidth / img.naturalHeight : 1;
+              isUpdatingRef.current = !0, onChange({
+                ...watermark,
+                enabled: !0,
+                imageUrl: url,
+                imageAspectRatio
+              });
+            }, img.onerror = () => {
+              isUpdatingRef.current = !0, onChange({
+                ...watermark,
+                enabled: !0,
+                imageUrl: url,
+                imageAspectRatio: watermark.imageAspectRatio
+              });
+            }, img.src = url;
+          } else {
+            const errorMsg = "Mux only supports PNG and JPG watermark images. Please use a .png or .jpg file.";
+            setIsValid(!1), setUrlError(errorMsg), onValidationChange?.(errorMsg), isUpdatingRef.current = !0, onChange({
+              ...watermark,
+              enabled: !1,
+              imageUrl: void 0,
+              imageAspectRatio: void 0,
+              overlay_settings: void 0
+            });
+          }
+        } catch {
+          setIsValid(!1);
+          const errorMsg = "Please enter a valid URL (e.g., https://example.com/watermark.png)";
+          setUrlError(errorMsg), onValidationChange?.(errorMsg), isUpdatingRef.current = !0, onChange({
+            ...watermark,
+            enabled: !1,
+            imageUrl: void 0,
+            imageAspectRatio: void 0,
+            overlay_settings: void 0
+          });
+        } finally {
+          setIsValidating(!1);
+        }
+      }, 500);
+    },
+    [watermark, onChange, onValidationChange]
+  );
+  useEffect(() => () => {
+    validationTimeoutRef.current && clearTimeout(validationTimeoutRef.current);
+  }, []), useEffect(() => {
+    setMode(watermark.overlay_settings ? "manual" : "canvas");
+  }, [watermark.overlay_settings]);
+  const handleUrlChange = (e) => {
+    const url = e.target.value;
+    setUrlInput(url), watermark.imageUrl && url !== watermark.imageUrl && (isUpdatingRef.current = !0, onChange({
+      ...watermark,
+      enabled: !1,
+      imageUrl: void 0,
+      imageAspectRatio: void 0,
+      overlay_settings: void 0
+    })), validateUrl(url);
+  }, normalizeZeroPercent = (value) => {
+    if (!value) return value;
+    const trimmed = value.trim();
+    if (!trimmed.endsWith("%")) return value;
+    const n = Number(trimmed.slice(0, -1));
+    return Number.isFinite(n) ? n === 0 || Object.is(n, -0) || Math.abs(n) < 1e-9 ? "0.01%" : `${n}%` : value;
+  }, updateOverlaySettings = (next) => {
+    const merged = {
+      ...watermark.overlay_settings ?? {
+        vertical_align: "bottom",
+        vertical_margin: "2%",
+        horizontal_align: "right",
+        horizontal_margin: "2%",
+        width: `${watermark.size ?? 20}%`,
+        opacity: `${Math.round((watermark.opacity ?? 0.7) * 100)}%`
+      },
+      ...next
+    };
+    onChange({
+      ...watermark,
+      enabled: !0,
+      overlay_settings: {
+        ...merged,
+        horizontal_margin: normalizeZeroPercent(merged.horizontal_margin) || merged.horizontal_margin,
+        vertical_margin: normalizeZeroPercent(merged.vertical_margin) || merged.vertical_margin
+      }
+    });
+  }, getVideoContentBox = () => {
+    const container = previewContainerRef?.current;
+    if (!container) return { x: 0, y: 0, width: 0, height: 0 };
+    const rect = container.getBoundingClientRect(), containerW = rect.width, containerH = rect.height, videoEl = previewVideoRef?.current, videoW = videoEl?.videoWidth || 0, videoH = videoEl?.videoHeight || 0;
+    if (!videoW || !videoH || !containerW || !containerH)
+      return { x: 0, y: 0, width: containerW, height: containerH };
+    const scale = Math.min(containerW / videoW, containerH / videoH), contentW = videoW * scale, contentH = videoH * scale, offsetX = (containerW - contentW) / 2, offsetY = (containerH - contentH) / 2;
+    return { x: offsetX, y: offsetY, width: contentW, height: contentH };
+  };
+  return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: "Watermark Image URL" }),
+      /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "Enter a URL to a PNG or JPG image. Mux will download this image and overlay it on your video." }),
+      /* @__PURE__ */ jsxs(Box, { style: { position: "relative", width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "url",
+            value: urlInput,
+            onChange: handleUrlChange,
+            placeholder: "https://example.com/watermark.png",
+            style: {
+              padding: "8px 12px",
+              paddingRight: urlInput ? "96px" : isValid !== null ? "36px" : "12px",
+              border: urlError || isValid === !1 ? "1px solid #e74c3c" : isValid === !0 ? "1px solid #4caf50" : "1px solid #ccc",
+              borderRadius: "4px",
+              width: "100%",
+              maxWidth: "100%",
+              boxSizing: "border-box",
+              fontSize: "14px"
+            }
+          }
+        ),
+        (urlInput || isValidating || isValid !== null) && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              position: "absolute",
+              right: "8px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px"
+            },
+            children: [
+              urlInput && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  text: "Clear",
+                  mode: "bleed",
+                  tone: "critical",
+                  onClick: () => {
+                    setUrlInput(""), validateUrl("");
+                  },
+                  disabled: isValidating,
+                  style: { fontSize: "11px", height: "24px" }
+                }
+              ),
+              isValidating && /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "Validating..." }),
+              isValid === !0 && !isValidating && /* @__PURE__ */ jsx(CheckmarkCircleIcon, { style: { color: "#4caf50", fontSize: "18px" } }),
+              isValid === !1 && !isValidating && /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { color: "#e74c3c", fontSize: "18px" } })
+            ]
+          }
+        )
+      ] }),
+      urlError && /* @__PURE__ */ jsx(Card, { padding: 2, tone: "critical", radius: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { color: "#e74c3c", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(Text, { size: 0, style: { color: "#e74c3c" }, children: urlError })
+      ] }) })
+    ] }),
+    watermark.imageUrl && /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(Card, { padding: 3, tone: "transparent", border: !0, radius: 2, children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          justify: "space-between",
+          gap: 3,
+          style: { flexWrap: "wrap", alignItems: "flex-start" },
+          children: [
+            /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 240, flex: 1 }, children: [
+              /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: "Positioning mode" }),
+              /* @__PURE__ */ jsxs(Text, { size: 0, muted: !0, children: [
+                "Choose between dragging on the canvas or manually editing the Mux",
+                " ",
+                /* @__PURE__ */ jsx("code", { children: "overlay_settings" }),
+                " fields (as in",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "https://www.mux.com/docs/guides/add-watermarks-to-your-videos",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    children: "the docs"
+                  }
+                ),
+                ")."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, style: { flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  text: "Canvas",
+                  mode: mode === "canvas" ? "default" : "ghost",
+                  onClick: () => {
+                    setMode("canvas"), onChange({ ...watermark, enabled: !0, overlay_settings: void 0 });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  text: "Manual",
+                  mode: mode === "manual" ? "default" : "ghost",
+                  onClick: () => {
+                    setMode("manual");
+                    const overlay = convertWatermarkToMuxOverlay({ ...watermark, enabled: !0 });
+                    updateOverlaySettings(overlay ?? {});
+                  }
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      mode === "manual" && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "transparent", border: !0, radius: 2, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: "Mux overlay_settings" }),
+        /* @__PURE__ */ jsxs(Grid, { columns: [1, 2], gap: 3, style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "horizontal_align" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: watermark.overlay_settings?.horizontal_align || "right",
+                onChange: (e) => updateOverlaySettings({
+                  horizontal_align: e.target.value || "right"
+                }),
+                style: {
+                  width: "100%",
+                  padding: "8px 10px",
+                  border: "1px solid #ccc",
+                  borderRadius: 4
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "left", children: "left" }),
+                  /* @__PURE__ */ jsx("option", { value: "center", children: "center" }),
+                  /* @__PURE__ */ jsx("option", { value: "right", children: "right" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "horizontal_margin (e.g. 2% or 40px)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: watermark.overlay_settings?.horizontal_margin || "2%",
+                onChange: (e) => updateOverlaySettings({ horizontal_margin: e.currentTarget.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "vertical_align" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: watermark.overlay_settings?.vertical_align || "bottom",
+                onChange: (e) => updateOverlaySettings({
+                  vertical_align: e.target.value || "bottom"
+                }),
+                style: {
+                  width: "100%",
+                  padding: "8px 10px",
+                  border: "1px solid #ccc",
+                  borderRadius: 4
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "top", children: "top" }),
+                  /* @__PURE__ */ jsx("option", { value: "middle", children: "middle" }),
+                  /* @__PURE__ */ jsx("option", { value: "bottom", children: "bottom" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "vertical_margin (e.g. 2% or 40px)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: watermark.overlay_settings?.vertical_margin || "2%",
+                onChange: (e) => updateOverlaySettings({ vertical_margin: e.currentTarget.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "width (e.g. 25% or 80px)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: watermark.overlay_settings?.width || `${watermark.size ?? 20}%`,
+                onChange: (e) => updateOverlaySettings({ width: e.currentTarget.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "opacity (e.g. 90%)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: watermark.overlay_settings?.opacity || `${Math.round((watermark.opacity ?? 0.7) * 100)}%`,
+                onChange: (e) => updateOverlaySettings({ opacity: e.currentTarget.value })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "Margins and width accept either percentages or pixels, per the Mux guide." })
+      ] }) }),
+      mode === "canvas" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: (() => {
+            const sizePct = watermark.size || 20, contentW = getVideoContentBox().width;
+            return contentW ? `Size: ${Math.max(1, Math.round(sizePct / 100 * contentW))}px` : `Size: ${sizePct}%`;
+          })() }),
+          /* @__PURE__ */ jsx(
+            RangeInput,
+            {
+              type: "range",
+              value: (() => {
+                const sizePct = watermark.size || 20, contentW = getVideoContentBox().width;
+                return contentW ? Math.max(1, Math.round(sizePct / 100 * contentW)) : sizePct;
+              })(),
+              min: (() => {
+                const contentW = getVideoContentBox().width;
+                return contentW ? Math.max(1, Math.round(contentW * 0.05)) : 5;
+              })(),
+              max: (() => {
+                const contentW = getVideoContentBox().width;
+                return contentW ? Math.max(1, Math.round(contentW * 0.5)) : 50;
+              })(),
+              step: 1,
+              onChange: (e) => {
+                const raw = Number(e.target.value), contentW = getVideoContentBox().width, nextPct = contentW ? raw / contentW * 100 : raw, clampedPct = Math.max(5, Math.min(50, nextPct));
+                onChange({
+                  ...watermark,
+                  size: clampedPct
+                });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Text, { size: 1, weight: "medium", children: [
+            "Opacity: ",
+            Math.round((watermark.opacity ?? 0.7) * 100),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(
+            RangeInput,
+            {
+              type: "range",
+              value: watermark.opacity ?? 0.7,
+              min: 0,
+              max: 1,
+              step: 0.05,
+              onChange: (e) => onChange({
+                ...watermark,
+                opacity: Number(e.target.value)
+              })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Card, { padding: 2, tone: "transparent", border: !0, radius: 2, children: /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: mode === "manual" ? "Manual mode: edit the overlay_settings fields above" : "\u{1F4A1} Drag the watermark on the preview to position it" }) })
+    ] })
+  ] });
+}
 const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
   value: code,
   label: LanguagesList.getNativeName(code)
@@ -5432,7 +6068,7 @@ function UploadConfiguration({
   startUpload,
   onClose
 }) {
-  const id = useId(), autoTextTracks = useRef(
+  const id = useId(), [watermarkValidationError, setWatermarkValidationError] = useState(null), watermarkPreviewContainerRef = useRef(null), watermarkPreviewVideoRef = useRef(null), autoTextTracks = useRef(
     pluginConfig.video_quality === "plus" && pluginConfig.defaultAutogeneratedSubtitleLang ? [
       {
         _id: uuid(),
@@ -5468,6 +6104,8 @@ function UploadConfiguration({
           return Object.assign({}, prev, { [action.action]: action.value });
         case "drm_policy":
           return Object.assign({}, prev, { [action.action]: action.value });
+        case "watermark":
+          return Object.assign({}, prev, { watermark: action.value });
         // Updating individual tracks
         case "track": {
           const text_tracks = [...prev.text_tracks], target_track_i = text_tracks.findIndex(({ _id: _id2 }) => _id2 === action.id);
@@ -5535,7 +6173,12 @@ function UploadConfiguration({
   ]);
   const { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
   if (useEffect(() => {
-    skipConfig && startUpload(formatUploadConfig(config, secrets));
+    if (skipConfig) {
+      const { settings, watermark } = formatUploadConfig(config, secrets, {
+        videoAspectRatio: videoAssetMetadata?.aspectRatio
+      });
+      startUpload(settings, watermark);
+    }
   }, []), skipConfig) return null;
   const basicConfig = config.video_quality !== "plus" && config.video_quality !== "premium", playbackPolicySelected = config.public_policy || config.signed_policy || config.drm_policy, maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
@@ -5551,11 +6194,11 @@ function UploadConfiguration({
       header: "Configure Mux Upload",
       onClose,
       children: /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 2, children: [
-        validationError && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", radius: 2, marginBottom: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "flex-start", children: [
+        (validationError || watermarkValidationError) && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", radius: 2, marginBottom: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "flex-start", children: [
           /* @__PURE__ */ jsx(ErrorOutlineIcon, { width: 20, height: 20 }),
           /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
             /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Validation Error" }),
-            /* @__PURE__ */ jsx(Text, { size: 1, children: validationError })
+            /* @__PURE__ */ jsx(Text, { size: 1, children: validationError || watermarkValidationError })
           ] })
         ] }) }),
         /* @__PURE__ */ jsx(Label$1, { size: 3, children: "FILE TO UPLOAD" }),
@@ -5622,27 +6265,41 @@ function UploadConfiguration({
               }) })
             }
           ),
-          !basicConfig && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-            /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
-            maxSupportedResolution > 0 && /* @__PURE__ */ jsx(
-              ResolutionTierSelector,
+          !basicConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+              /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
+              maxSupportedResolution > 0 && /* @__PURE__ */ jsx(
+                ResolutionTierSelector,
+                {
+                  id,
+                  config,
+                  dispatch,
+                  maxSupportedResolution
+                }
+              ),
+              /* @__PURE__ */ jsx(StaticRenditionSelector, { id, config, dispatch }),
+              !disableTextTrackConfig && /* @__PURE__ */ jsx(
+                TextTracksEditor,
+                {
+                  tracks: config.text_tracks,
+                  dispatch,
+                  defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              WatermarkSection,
               {
-                id,
                 config,
                 dispatch,
-                maxSupportedResolution
-              }
-            ),
-            /* @__PURE__ */ jsx(StaticRenditionSelector, { id, config, dispatch }),
-            !disableTextTrackConfig && /* @__PURE__ */ jsx(
-              TextTracksEditor,
-              {
-                tracks: config.text_tracks,
-                dispatch,
-                defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
+                stagedUpload,
+                videoAssetMetadata,
+                watermarkPreviewContainerRef,
+                watermarkPreviewVideoRef,
+                onValidationChange: setWatermarkValidationError
               }
             )
-          ] }) })
+          ] })
         ] }),
         /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
           Button,
@@ -5652,7 +6309,12 @@ function UploadConfiguration({
             text: "Upload",
             tone: "positive",
             onClick: () => {
-              validationError || startUpload(formatUploadConfig(config, secrets));
+              if (!validationError) {
+                const { settings, watermark } = formatUploadConfig(config, secrets, {
+                  videoAspectRatio: videoAssetMetadata?.aspectRatio
+                });
+                startUpload(settings, watermark);
+              }
             }
           }
         ) })
@@ -5667,36 +6329,178 @@ function setAdvancedPlaybackPolicy(config, secrets) {
     drm_configuration_id: secrets.drmConfigId ?? void 0
   }) : console.error("Selected DRM Policy but missing DRM Configuration Id")), advanced_playback_policies;
 }
-function formatUploadConfig(config, secrets) {
+function formatUploadConfig(config, secrets, options) {
   const generated_subtitles = config.text_tracks.filter(isAutogeneratedTrack).map((track) => ({
     name: track.name,
     language_code: track.language_code
-  }));
+  })), inputs = [
+    {
+      type: "video",
+      generated_subtitles: generated_subtitles.length > 0 ? generated_subtitles : void 0
+    },
+    ...config.text_tracks.filter(isCustomTextTrack).reduce(
+      (acc, track) => (track.language_code && track.file && track.name && acc.push({
+        url: track.file.contents,
+        type: "text",
+        text_type: track.type === "subtitles" ? "subtitles" : void 0,
+        language_code: track.language_code,
+        name: track.name,
+        closed_captions: track.type === "captions"
+      }), acc),
+      []
+    )
+  ];
+  if (config.watermark?.imageUrl) {
+    const watermarkForMux = { ...config.watermark, enabled: !0 }, overlaySettings = convertWatermarkToMuxOverlay(watermarkForMux, {
+      videoAspectRatio: options?.videoAspectRatio ?? void 0,
+      units: "px"
+    });
+    overlaySettings && inputs.push({
+      url: config.watermark.imageUrl,
+      overlay_settings: overlaySettings
+    });
+  }
   return {
-    input: [
-      {
-        type: "video",
-        generated_subtitles: generated_subtitles.length > 0 ? generated_subtitles : void 0
-      },
-      ...config.text_tracks.filter(isCustomTextTrack).reduce(
-        (acc, track) => (track.language_code && track.file && track.name && acc.push({
-          url: track.file.contents,
-          type: "text",
-          text_type: track.type === "subtitles" ? "subtitles" : void 0,
-          language_code: track.language_code,
-          name: track.name,
-          closed_captions: track.type === "captions"
-        }), acc),
-        []
-      )
-    ],
-    static_renditions: config.static_renditions.length > 0 ? config.static_renditions.map((resolution) => ({ resolution })) : void 0,
-    advanced_playback_policies: setAdvancedPlaybackPolicy(config, secrets),
-    max_resolution_tier: config.max_resolution_tier,
-    video_quality: config.video_quality,
-    normalize_audio: config.normalize_audio
+    settings: {
+      input: inputs,
+      static_renditions: config.static_renditions.length > 0 ? config.static_renditions.map((resolution) => ({ resolution })) : void 0,
+      advanced_playback_policies: setAdvancedPlaybackPolicy(config, secrets),
+      max_resolution_tier: config.max_resolution_tier,
+      video_quality: config.video_quality,
+      normalize_audio: config.normalize_audio
+    },
+    watermark: config.watermark?.imageUrl ? { ...config.watermark, enabled: !0 } : void 0
   };
 }
+function WatermarkSection({
+  config,
+  dispatch,
+  stagedUpload,
+  videoAssetMetadata,
+  watermarkPreviewContainerRef,
+  watermarkPreviewVideoRef,
+  onValidationChange
+}) {
+  return videoAssetMetadata?.isAudioOnly !== !1 ? null : /* @__PURE__ */ jsx(
+    FormField$2,
+    {
+      title: "Watermark",
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Add a watermark overlay to your video using Mux's native watermark support.",
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://www.mux.com/docs/guides/add-watermarks-to-your-videos",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Learn more about Mux watermarks."
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        /* @__PURE__ */ jsx(
+          WatermarkControls,
+          {
+            watermark: config.watermark || { enabled: !1 },
+            onChange: (watermark) => {
+              dispatch({ action: "watermark", value: watermark });
+            },
+            onValidationChange,
+            previewContainerRef: watermarkPreviewContainerRef,
+            previewVideoRef: watermarkPreviewVideoRef
+          }
+        ),
+        config.watermark?.imageUrl && stagedUpload.type === "file" && // Canvas preview is only shown in "Canvas" mode (no explicit overlay_settings)
+        !config.watermark.overlay_settings && /* @__PURE__ */ jsx(
+          WatermarkPreview,
+          {
+            stagedUpload,
+            watermark: config.watermark,
+            videoAspectRatio: videoAssetMetadata.aspectRatio,
+            onWatermarkChange: (watermark) => {
+              dispatch({ action: "watermark", value: watermark });
+            },
+            previewContainerRef: watermarkPreviewContainerRef,
+            videoRef: watermarkPreviewVideoRef
+          }
+        )
+      ] })
+    }
+  );
+}
+const WatermarkPreview = memo(function({
+  stagedUpload,
+  watermark,
+  onWatermarkChange,
+  videoAspectRatio,
+  previewContainerRef,
+  videoRef
+}) {
+  useEffect(() => {
+    if (videoRef.current && stagedUpload.type === "file") {
+      const file = stagedUpload.files[0], url = URL.createObjectURL(file);
+      return videoRef.current.src = url, () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+  }, [stagedUpload, videoRef]);
+  const isVertical = videoAspectRatio != null && videoAspectRatio < 1;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      tone: "transparent",
+      border: !0,
+      style: {
+        overflow: "hidden",
+        // For vertical videos, center the preview and limit its width
+        display: "flex",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: previewContainerRef,
+          style: {
+            position: "relative",
+            // For vertical videos: limit width so the preview doesn't get too tall
+            // For horizontal videos: use full width
+            width: isVertical ? "auto" : "100%",
+            aspectRatio: videoAspectRatio ? String(videoAspectRatio) : "16/9",
+            ...isVertical ? { height: "400px", maxHeight: "50vh" } : { minHeight: "200px" },
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                ref: videoRef,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "fill",
+                  display: "block"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DraggableWatermark,
+              {
+                watermark,
+                onChange: onWatermarkChange,
+                containerRef: previewContainerRef,
+                videoElementRef: videoRef
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 function withFocusRing(component) {
   return styled(component)((props) => {
     const border = {
@@ -5935,7 +6739,7 @@ function Uploader(props) {
       window.removeEventListener("beforeunload", handleBeforeUnload), window.removeEventListener("pagehide", handleBeforeUnload), cleanup();
     };
   }, [props.client, props.asset?._id]);
-  const startUpload = (settings) => {
+  const startUpload = (settings, watermark) => {
     const { stagedUpload } = state;
     if (!stagedUpload || uploadRef.current) return;
     dispatch({ action: "commitUpload" });
@@ -5945,14 +6749,16 @@ function Uploader(props) {
         uploadObservable = uploadUrl({
           client: props.client,
           url: stagedUpload.url,
-          settings
+          settings,
+          watermark
         });
         break;
       case "file":
         uploadObservable = uploadFile({
           client: props.client,
           file: stagedUpload.files[0],
-          settings
+          settings,
+          watermark
         }).pipe(
           takeUntil(
             cancelUploadButton.observable.pipe(