@devultur/convex 0.0.0-stage → 1.0.0

package/dist/react.js

@@ -0,0 +1,756 @@
+"use client";
+
+// src/react.tsx
+import React2 from "react";
+import {
+  buildMediaUrl,
+  CaptionLocaleLabel,
+  DEFAULT_TOKEN_EXPIRY_SECONDS,
+  MediaStatus,
+  mediaCaptionPath,
+  mediaPath,
+  mediaUrl,
+  SESSION_HEADER,
+  visibilityFromKey
+} from "@devultur/core";
+import { UploadHttpError, uploadFileWithProgress } from "@devultur/react";
+import { useAction, useConvex, useMutation, useQuery } from "convex/react";
+
+// src/image-recovery.ts
+async function isSessionMismatch(response) {
+  try {
+    const data = await response.clone().json();
+    return data.code === "session_mismatch";
+  } catch {
+    return false;
+  }
+}
+
+// src/media-upload-derive.ts
+function deriveUploadState(local, videoState, retry) {
+  const { phase, percent, file, failure, media, processRequested } = local;
+  if (phase === "uploading") return { phase: "uploading", percent, file };
+  if (phase === "upload-failed" && failure) {
+    return {
+      phase: "failed",
+      stage: "upload",
+      reason: failure.reason,
+      retriable: failure.retriable,
+      message: failure.message,
+      retry
+    };
+  }
+  if (phase === "idle" || !media) return { phase: "idle" };
+  if (media.kind !== "video" || !processRequested) return { phase: "ready", media };
+  switch (videoState.phase) {
+    case "processing":
+      return { phase: "processing", media, step: videoState.step, percent: videoState.percent };
+    case "ready":
+      return {
+        phase: "ready",
+        media,
+        playlist: videoState.playlist,
+        duration: videoState.duration,
+        captions: videoState.captions,
+        playerProps: videoState.playerProps
+      };
+    case "failed":
+      return {
+        phase: "failed",
+        stage: "transcode",
+        reason: videoState.reason,
+        retriable: videoState.retriable,
+        message: videoState.message,
+        retry
+      };
+    default:
+      return { phase: "queued", media };
+  }
+}
+
+// src/crop-upload.tsx
+import React from "react";
+import { ImageCropper } from "@devultur/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  zoom: "Zoom",
+  confirm: "Crop and upload",
+  processing: "Processing\u2026",
+  cancel: "Cancel"
+};
+function CropUpload({
+  aspectRatio,
+  visibility,
+  outputFormat,
+  maxWidth,
+  minSourceWidth,
+  replaces,
+  onComplete,
+  onReject,
+  accept = ["image/*"],
+  cropperClassName,
+  labels,
+  children
+}) {
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const [pendingFile, setPendingFile] = React.useState(null);
+  const inputRef = React.useRef(null);
+  const { upload, state, cancel, reset } = useMediaUpload({ visibility, replaces, onComplete });
+  const pickFile = React.useCallback(() => inputRef.current?.click(), []);
+  const handleCrop = React.useCallback(
+    (baked) => {
+      setPendingFile(null);
+      upload(baked);
+    },
+    [upload]
+  );
+  const resetAll = React.useCallback(() => {
+    setPendingFile(null);
+    reset();
+  }, [reset]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: accept.join(","),
+        hidden: true,
+        onChange: (event) => {
+          const file = event.target.files?.[0];
+          if (file) setPendingFile(file);
+          event.target.value = "";
+        }
+      }
+    ),
+    pendingFile && /* @__PURE__ */ jsx(
+      ImageCropper,
+      {
+        file: pendingFile,
+        aspectRatio,
+        outputFormat,
+        maxWidth,
+        minSourceWidth,
+        onCrop: handleCrop,
+        onReject,
+        className: cropperClassName,
+        children: ({ zoom, setZoom, confirm, isBaking }) => /* @__PURE__ */ jsxs("div", { className: "dv-crop-controls", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 1,
+              max: 3,
+              step: 0.01,
+              value: zoom,
+              onChange: (event) => setZoom(Number(event.target.value)),
+              "aria-label": text.zoom
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: confirm, disabled: isBaking, children: isBaking ? text.processing : text.confirm }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPendingFile(null), children: text.cancel })
+        ] })
+      }
+    ),
+    children?.({ state, pickFile, pendingFile, cancel, reset: resetAll })
+  ] });
+}
+
+// src/react.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var DevulturContext = React2.createContext(null);
+var DevulturApiContext = React2.createContext(null);
+var ProgressContext = React2.createContext(null);
+var REFRESH_BUFFER_MS = 5 * 60 * 1e3;
+var MIN_REFRESH_MS = 6e4;
+var DEFAULT_TTL_MS = DEFAULT_TOKEN_EXPIRY_SECONDS * 1e3;
+function extractTokenResult(result) {
+  const tokenValue = typeof result === "string" ? result : result.token;
+  const ttlMs = typeof result === "string" ? DEFAULT_TTL_MS : result.expiresIn * 1e3;
+  return { tokenValue, ttlMs };
+}
+function DevulturProvider({ api, baseUrl, children }) {
+  const [token, setToken] = React2.useState(null);
+  const [sessionSecret] = React2.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
+  const issueViewerToken = useAction(api.issueViewerToken);
+  const createUploadUrlAction = useAction(api.createUploadUrl);
+  const deleteMediaAction = useAction(api.deleteMedia);
+  const deleteVideoAction = useAction(api.deleteVideo ?? api.deleteMedia);
+  const refreshTimerRef = React2.useRef(null);
+  const reissueInFlightRef = React2.useRef(null);
+  const scheduleRefresh = React2.useCallback(
+    (ttlMs) => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+      const refreshIn = Math.max(ttlMs - REFRESH_BUFFER_MS, MIN_REFRESH_MS);
+      refreshTimerRef.current = setTimeout(() => {
+        issueViewerToken({ sessionSecret }).then((result) => {
+          const { tokenValue, ttlMs: nextTtl } = extractTokenResult(result);
+          setToken(tokenValue);
+          scheduleRefresh(nextTtl);
+        });
+      }, refreshIn);
+    },
+    [issueViewerToken, sessionSecret]
+  );
+  React2.useEffect(() => {
+    if (token) return;
+    issueViewerToken({ sessionSecret }).then((result) => {
+      const { tokenValue, ttlMs } = extractTokenResult(result);
+      setToken(tokenValue);
+      scheduleRefresh(ttlMs);
+    });
+  }, [token, issueViewerToken, scheduleRefresh, sessionSecret]);
+  const reissueToken = React2.useCallback(() => {
+    if (reissueInFlightRef.current) return reissueInFlightRef.current;
+    const pending = issueViewerToken({ sessionSecret }).then((result) => {
+      const { tokenValue, ttlMs } = extractTokenResult(result);
+      setToken(tokenValue);
+      scheduleRefresh(ttlMs);
+      reissueInFlightRef.current = null;
+      return tokenValue;
+    }).catch(() => {
+      reissueInFlightRef.current = null;
+      return null;
+    });
+    reissueInFlightRef.current = pending;
+    return pending;
+  }, [issueViewerToken, scheduleRefresh, sessionSecret]);
+  React2.useEffect(() => {
+    return () => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    };
+  }, []);
+  const uploadUrl = React2.useCallback(
+    async (file) => {
+      const result = await createUploadUrlAction({ filename: file.name, contentType: file.type });
+      return { url: result.url, key: result.key };
+    },
+    [createUploadUrlAction]
+  );
+  const upload = React2.useCallback(
+    async (file, options) => {
+      const dimensions = await readImageDimensions(file);
+      const result = await createUploadUrlAction({
+        filename: file.name,
+        contentType: file.type,
+        visibility: options?.visibility
+      });
+      const uploadResponse = await fetch(result.url, {
+        method: "PUT",
+        body: file,
+        headers: { "Content-Type": file.type }
+      });
+      if (!uploadResponse.ok) throw new Error(`Upload failed: ${uploadResponse.status}`);
+      return {
+        id: result.id,
+        kind: result.kind,
+        visibility: result.visibility,
+        filename: file.name,
+        ...dimensions
+      };
+    },
+    [createUploadUrlAction]
+  );
+  const url = React2.useCallback(
+    (media, options) => {
+      if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
+      return mediaUrl(baseUrl, media, { ...options, token: token ?? void 0 });
+    },
+    [baseUrl, token]
+  );
+  const getCaptionsText = React2.useCallback(
+    async (media, locale) => {
+      if (!baseUrl) throw new Error("Devultur `getCaptionsText()` requires `baseUrl` on <DevulturProvider>");
+      const path = mediaCaptionPath(media, locale);
+      if (!path) throw new Error("getCaptionsText: the reference is not a video");
+      const isPrivate = media.visibility === "private";
+      const fetchWith = (viewerToken) => fetch(buildMediaUrl(baseUrl, path, { token: viewerToken }), {
+        headers: sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0
+      });
+      let response = await fetchWith(isPrivate ? token ?? void 0 : void 0);
+      if (isPrivate && response.status === 401 && await isSessionMismatch(response)) {
+        const fresh = await reissueToken();
+        if (fresh) response = await fetchWith(fresh);
+      }
+      if (!response.ok) throw new Error(`Captions fetch failed: ${response.status}`);
+      return response.text();
+    },
+    [baseUrl, token, reissueToken, sessionSecret]
+  );
+  const deleteMedia = React2.useCallback(
+    (media) => {
+      if (media.kind === "video" && api.deleteVideo) {
+        deleteVideoAction({ videoId: media.id, visibility: media.visibility }).catch(console.error);
+        return;
+      }
+      deleteMediaAction({ key: mediaPath(media) }).catch(console.error);
+    },
+    [deleteMediaAction, deleteVideoAction, api.deleteVideo]
+  );
+  const devulturValue = React2.useMemo(
+    () => ({
+      token,
+      baseUrl: baseUrl ?? null,
+      sessionSecret,
+      uploadUrl,
+      upload,
+      url,
+      getCaptionsText,
+      deleteMedia,
+      reissueToken
+    }),
+    [token, baseUrl, sessionSecret, uploadUrl, upload, url, getCaptionsText, deleteMedia, reissueToken]
+  );
+  let content = /* @__PURE__ */ jsx2(DevulturApiContext, { value: api, children: /* @__PURE__ */ jsx2(DevulturContext, { value: devulturValue, children }) });
+  if (api.saveProgress && api.loadProgress && api.markComplete && api.resetProgress) {
+    content = /* @__PURE__ */ jsx2(
+      ProgressBridge,
+      {
+        save: api.saveProgress,
+        load: api.loadProgress,
+        markComplete: api.markComplete,
+        reset: api.resetProgress,
+        children: content
+      }
+    );
+  }
+  return content;
+}
+function ProgressBridge({
+  save,
+  load,
+  markComplete,
+  reset,
+  children
+}) {
+  const convex = useConvex();
+  const saveMutation = useMutation(save);
+  const markCompleteMutation = useMutation(markComplete);
+  const resetMutation = useMutation(reset);
+  const onSave = React2.useCallback(
+    async (videoId, position) => {
+      await saveMutation({ videoId, position });
+    },
+    [saveMutation]
+  );
+  const onLoad = React2.useCallback(
+    async (videoId) => {
+      const result = await convex.query(load, { videoId });
+      if (!result) return null;
+      return {
+        lastPosition: result.lastPosition,
+        completedAt: result.completedAt ? new Date(result.completedAt) : null
+      };
+    },
+    [convex, load]
+  );
+  const onMarkComplete = React2.useCallback(
+    async (videoId) => {
+      await markCompleteMutation({ videoId });
+    },
+    [markCompleteMutation]
+  );
+  const onReset = React2.useCallback(
+    async (videoId) => {
+      await resetMutation({ videoId });
+    },
+    [resetMutation]
+  );
+  const value = React2.useMemo(
+    () => ({ save: onSave, load: onLoad, markComplete: onMarkComplete, reset: onReset }),
+    [onSave, onLoad, onMarkComplete, onReset]
+  );
+  return /* @__PURE__ */ jsx2(ProgressContext, { value, children });
+}
+function useDevultur() {
+  const context = React2.use(DevulturContext);
+  if (!context) throw new Error("useDevultur must be used within <DevulturProvider>");
+  return context;
+}
+function useDevulturProgress() {
+  const context = React2.use(ProgressContext);
+  if (!context) throw new Error("useDevulturProgress requires progress API in DevulturProvider");
+  return context;
+}
+function useMediaUrl(key, options) {
+  const { token, baseUrl } = useDevultur();
+  return React2.useMemo(() => {
+    if (!key) return null;
+    if (!baseUrl) throw new Error("useMediaUrl requires `baseUrl` on <DevulturProvider>");
+    const isPublic = visibilityFromKey(key) === "public";
+    return buildMediaUrl(baseUrl, key, { ...options, token: isPublic ? void 0 : token ?? void 0 });
+  }, [key, baseUrl, token, options]);
+}
+async function readImageDimensions(file) {
+  if (typeof createImageBitmap !== "function" || !file.type.startsWith("image/")) return {};
+  try {
+    const bitmap = await createImageBitmap(file);
+    const dimensions = { width: bitmap.width, height: bitmap.height };
+    bitmap.close();
+    return dimensions;
+  } catch {
+    return {};
+  }
+}
+function useVideoProps(media, options) {
+  const { token, baseUrl, sessionSecret } = useDevultur();
+  const locales = options?.locales;
+  return React2.useMemo(() => {
+    if (media?.kind !== "video") return null;
+    if (!baseUrl) throw new Error("useVideoProps requires `baseUrl` on <DevulturProvider>");
+    const viewerToken = media.visibility === "private" ? token ?? void 0 : void 0;
+    const captions = (locales ?? []).flatMap((locale) => {
+      const path = mediaCaptionPath(media, locale);
+      if (!path) return [];
+      const label = CaptionLocaleLabel[locale] ?? locale;
+      return [{ locale, label, src: buildMediaUrl(baseUrl, path, { token: viewerToken }) }];
+    });
+    return {
+      src: buildMediaUrl(baseUrl, mediaPath(media), { token: viewerToken }),
+      token: viewerToken,
+      captions,
+      sessionSecret: media.visibility === "private" ? sessionSecret : void 0
+    };
+  }, [media, baseUrl, token, locales, sessionSecret]);
+}
+function Image({
+  media,
+  width,
+  height,
+  fit,
+  format,
+  quality,
+  fallback = null,
+  externalFallback,
+  render,
+  alt,
+  ...imgProps
+}) {
+  const { url, reissueToken, sessionSecret } = useDevultur();
+  const [failed, setFailed] = React2.useState(false);
+  const [blobSrc, setBlobSrc] = React2.useState(null);
+  const retriedRef = React2.useRef(false);
+  const isPrivate = media?.visibility === "private";
+  React2.useEffect(() => {
+    retriedRef.current = false;
+    setFailed(false);
+    setBlobSrc(null);
+  }, [media]);
+  React2.useEffect(() => {
+    if (!isPrivate || failed || !media) return;
+    let cancelled = false;
+    let objectUrl = null;
+    const targetUrl = url(media, { width, height, fit, format, quality });
+    (async () => {
+      try {
+        const response = await fetch(targetUrl, {
+          headers: sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0
+        });
+        if (response.ok) {
+          objectUrl = URL.createObjectURL(await response.blob());
+          if (cancelled) {
+            URL.revokeObjectURL(objectUrl);
+            return;
+          }
+          setBlobSrc(objectUrl);
+          return;
+        }
+        if (response.status === 401 && !retriedRef.current && await isSessionMismatch(response)) {
+          retriedRef.current = true;
+          await reissueToken();
+          return;
+        }
+      } catch {
+      }
+      if (!cancelled) setFailed(true);
+    })();
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [isPrivate, failed, media, url, sessionSecret, reissueToken, width, height, fit, format, quality]);
+  const handleError = React2.useCallback(() => setFailed(true), []);
+  let src;
+  if (failed || !media) {
+    src = externalFallback ?? null;
+  } else if (isPrivate) {
+    src = blobSrc;
+  } else {
+    src = url(media, { width, height, fit, format, quality });
+  }
+  if (!src) return /* @__PURE__ */ jsx2(Fragment, { children: fallback });
+  if (render) {
+    return React2.cloneElement(render, {
+      style: { ...render.props.style, backgroundImage: `url("${src}")` }
+    });
+  }
+  return /* @__PURE__ */ jsx2(
+    "img",
+    {
+      src,
+      alt,
+      width: width ?? media?.width,
+      height: height ?? media?.height,
+      onError: handleError,
+      ...imgProps
+    }
+  );
+}
+function DownloadLink({ media, filename, children, ...anchorProps }) {
+  const { url, token, baseUrl, sessionSecret, reissueToken } = useDevultur();
+  const handleClick = React2.useCallback(
+    async (event) => {
+      if (media?.visibility !== "private" || !baseUrl) return;
+      event.preventDefault();
+      const headers = sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0;
+      const buildUrl = (viewerToken) => mediaUrl(baseUrl, media, { download: filename ?? true, token: viewerToken });
+      let response = await fetch(buildUrl(token ?? void 0), { headers });
+      if (response.status === 401 && await isSessionMismatch(response)) {
+        const fresh = await reissueToken();
+        if (fresh) response = await fetch(buildUrl(fresh), { headers });
+      }
+      if (!response.ok) return;
+      const objectUrl = URL.createObjectURL(await response.blob());
+      const anchor = document.createElement("a");
+      anchor.href = objectUrl;
+      anchor.download = filename ?? media.filename ?? "download";
+      anchor.click();
+      URL.revokeObjectURL(objectUrl);
+    },
+    [media, baseUrl, token, filename, sessionSecret, reissueToken]
+  );
+  if (!media) return null;
+  return /* @__PURE__ */ jsx2("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
+}
+function useDevulturMedia(key) {
+  const apiCtx = React2.use(DevulturApiContext);
+  if (!apiCtx?.getMedia) {
+    throw new Error("useDevulturMedia requires getMedia in DevulturProvider api");
+  }
+  const record = useQuery(apiCtx.getMedia, key ? { key } : "skip");
+  if (!record) {
+    return {
+      status: MediaStatus.IDLE,
+      progress: null,
+      error: null,
+      failureReason: null,
+      retriable: null,
+      isQueued: false,
+      isTranscoding: false,
+      isCaptioning: false,
+      isReady: false,
+      isFailed: false,
+      playlistUrl: null,
+      thumbnailKey: null,
+      captionLocales: [],
+      duration: null,
+      isLoading: record === void 0
+    };
+  }
+  const status = record.transcodeStatus ?? MediaStatus.IDLE;
+  const isReady = status === MediaStatus.READY;
+  const isFailed = status === MediaStatus.FAILED;
+  const progress = record.transcodeProgress ? {
+    current: record.transcodeProgress.current,
+    total: record.transcodeProgress.total,
+    percent: record.transcodeProgress.total > 0 ? Math.round(
+      record.transcodeProgress.current / record.transcodeProgress.total * 100
+    ) : 0,
+    phase: record.transcodeProgress.phase
+  } : null;
+  return {
+    status,
+    progress,
+    error: record.transcodeError ?? null,
+    failureReason: isFailed ? record.failureReason ?? "internal" : null,
+    retriable: isFailed ? record.retriable ?? true : null,
+    isQueued: status === MediaStatus.QUEUED,
+    isTranscoding: status === MediaStatus.TRANSCODING,
+    isCaptioning: status === MediaStatus.CAPTIONING,
+    isReady,
+    isFailed,
+    playlistUrl: record.playlistUrl ?? null,
+    thumbnailKey: record.thumbnailKey ?? null,
+    captionLocales: record.captionLocales ?? [],
+    duration: record.duration ?? null,
+    isLoading: false
+  };
+}
+function useVideoState(media, options) {
+  const { token, baseUrl, sessionSecret } = useDevultur();
+  const status = useDevulturMedia(media?.kind === "video" ? media.id : null);
+  const locales = options?.locales;
+  return React2.useMemo(() => {
+    if (media?.kind !== "video") return { phase: "idle" };
+    if (status.isFailed) {
+      return {
+        phase: "failed",
+        reason: status.failureReason ?? "internal",
+        message: status.error ?? "Video processing failed",
+        retriable: status.retriable ?? true
+      };
+    }
+    if (status.isReady) {
+      if (!baseUrl) throw new Error("useVideoState requires `baseUrl` on <DevulturProvider>");
+      const viewerToken = media.visibility === "private" ? token ?? void 0 : void 0;
+      const playlist = buildMediaUrl(baseUrl, mediaPath(media), { token: viewerToken });
+      const captions = (locales ?? status.captionLocales).flatMap((locale) => {
+        const path = mediaCaptionPath(media, locale);
+        if (!path) return [];
+        const label = CaptionLocaleLabel[locale] ?? locale;
+        return [{ locale, label, src: buildMediaUrl(baseUrl, path, { token: viewerToken }) }];
+      });
+      return {
+        phase: "ready",
+        media,
+        playlist,
+        duration: status.duration ?? 0,
+        captions,
+        playerProps: {
+          src: playlist,
+          token: viewerToken,
+          captions,
+          sessionSecret: media.visibility === "private" ? sessionSecret : void 0
+        }
+      };
+    }
+    if (status.isQueued) return { phase: "queued" };
+    if (status.isTranscoding || status.isCaptioning) {
+      const step = status.progress?.phase ?? (status.isCaptioning ? "captioning" : "encoding");
+      return { phase: "processing", step, percent: status.progress?.percent ?? 0 };
+    }
+    return { phase: "idle" };
+  }, [media, status, baseUrl, token, locales, sessionSecret]);
+}
+function useMediaUpload(options) {
+  const { visibility, onComplete, onError, replaces, process, locales } = options ?? {};
+  const api = React2.use(DevulturApiContext);
+  if (!api) throw new Error("useMediaUpload must be used within <DevulturProvider>");
+  const createUploadUrlAction = useAction(api.createUploadUrl);
+  const deleteMediaAction = useAction(api.deleteMedia);
+  const processVideoAction = useAction(api.processVideo ?? api.createUploadUrl);
+  const [phase, setPhase] = React2.useState("idle");
+  const [percent, setPercent] = React2.useState(0);
+  const [currentFile, setCurrentFile] = React2.useState(null);
+  const [media, setMedia] = React2.useState(null);
+  const [uploadFailure, setUploadFailure] = React2.useState(null);
+  const [processRequested, setProcessRequested] = React2.useState(false);
+  const abortRef = React2.useRef(null);
+  const lastFileRef = React2.useRef(null);
+  const lastKeyRef = React2.useRef(null);
+  const videoState = useVideoState(media, { locales });
+  const triggerProcess = React2.useCallback(
+    (key) => {
+      if (!api.processVideo) {
+        throw new Error("useMediaUpload: processing a video requires `processVideo` in the <DevulturProvider> api");
+      }
+      lastKeyRef.current = key;
+      setProcessRequested(true);
+      processVideoAction({ key }).catch((err) => {
+        console.error("useMediaUpload: could not request the transcode", err);
+      });
+    },
+    [api.processVideo, processVideoAction]
+  );
+  const runUpload = React2.useCallback(
+    async (file) => {
+      const controller = new AbortController();
+      abortRef.current = controller;
+      lastFileRef.current = file;
+      setUploadFailure(null);
+      setMedia(null);
+      setProcessRequested(false);
+      setCurrentFile(file);
+      setPercent(0);
+      setPhase("uploading");
+      const fail = (reason, message) => {
+        const failure = { stage: "upload", reason, retriable: true, message };
+        setUploadFailure(failure);
+        setPhase("upload-failed");
+        onError?.(failure);
+        return null;
+      };
+      let result;
+      try {
+        result = await createUploadUrlAction({
+          filename: file.name,
+          contentType: file.type,
+          visibility
+        });
+      } catch (err) {
+        return fail("rejected", err instanceof Error ? err.message : "Could not start the upload");
+      }
+      const dimensions = await readImageDimensions(file);
+      try {
+        await uploadFileWithProgress(result.url, file, { onProgress: setPercent, signal: controller.signal });
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") {
+          setPhase("idle");
+          setCurrentFile(null);
+          setPercent(0);
+          return null;
+        }
+        const rejected = err instanceof UploadHttpError && (err.status === 413 || err.status === 415);
+        return fail(rejected ? "rejected" : "network", err instanceof Error ? err.message : "The upload failed");
+      }
+      const uploaded = {
+        id: result.id,
+        kind: result.kind,
+        visibility: result.visibility,
+        filename: file.name,
+        ...dimensions
+      };
+      setMedia(uploaded);
+      setPhase("uploaded");
+      if (replaces) deleteMediaAction({ key: mediaPath(replaces) }).catch(() => {
+      });
+      onComplete?.(uploaded);
+      if ((process ?? true) && uploaded.kind === "video") triggerProcess(result.key);
+      return uploaded;
+    },
+    [createUploadUrlAction, deleteMediaAction, triggerProcess, visibility, replaces, process, onComplete, onError]
+  );
+  const cancel = React2.useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  const reset = React2.useCallback(() => {
+    abortRef.current?.abort();
+    setPhase("idle");
+    setPercent(0);
+    setCurrentFile(null);
+    setMedia(null);
+    setUploadFailure(null);
+    setProcessRequested(false);
+  }, []);
+  const retry = React2.useCallback(() => {
+    if (phase === "upload-failed" && lastFileRef.current) {
+      runUpload(lastFileRef.current);
+      return;
+    }
+    if (lastKeyRef.current) triggerProcess(lastKeyRef.current);
+  }, [phase, runUpload, triggerProcess]);
+  React2.useEffect(() => () => abortRef.current?.abort(), []);
+  const state = React2.useMemo(
+    () => deriveUploadState(
+      { phase, percent, file: currentFile, failure: uploadFailure, media, processRequested },
+      videoState,
+      retry
+    ),
+    [phase, percent, currentFile, uploadFailure, media, processRequested, videoState, retry]
+  );
+  const upload = React2.useCallback((file) => runUpload(file), [runUpload]);
+  return { upload, state, cancel, reset };
+}
+export {
+  CropUpload,
+  DevulturProvider,
+  DownloadLink,
+  Image,
+  useDevultur,
+  useDevulturMedia,
+  useDevulturProgress,
+  useMediaUpload,
+  useMediaUrl,
+  useVideoProps,
+  useVideoState
+};