@devultur/convex 1.3.0 → 1.3.2

package/README.md

@@ -86,6 +86,42 @@ The PUT goes through `XMLHttpRequest` (`fetch` reports no upload progress), in p
 optional field of `DevulturMedia` and of `dv.media()`. It is informational: delivery URLs are derived from `id`,
 `kind`, `visibility` and `filename`.
 
+## Multiple workspaces
+
+An app that shows private media from several workspaces (an admin console that previews each one, for example) can
+send extra arguments with every viewer token request. Pass them in `tokenArgs`, and pass your own action in
+`issueViewerToken`: the component's `issueViewerToken` accepts only `sessionSecret`.
+
+```typescript
+// convex/admin.ts
+import { v } from "convex/values";
+import { components } from "./_generated/api";
+import { action } from "./_generated/server";
+
+export const issueWorkspaceViewerToken = action({
+  args: { sessionSecret: v.string(), workspaceId: v.id("workspaces") },
+  handler: async (ctx, { sessionSecret, workspaceId }) => {
+    await assertWorkspaceAccess(ctx, workspaceId); // your own check
+    return ctx.runAction(components.devultur.public.issueViewerToken, { sessionSecret });
+  },
+});
+```
+
+```tsx
+<DevulturProvider
+  api={api.devultur}
+  issueViewerToken={api.admin.issueWorkspaceViewerToken}
+  tokenArgs={{ workspaceId }}
+>
+  <WorkspaceMedia />
+</DevulturProvider>
+```
+
+The provider sends `{ sessionSecret, ...tokenArgs }` on the first issuance, on each renewal and on each re-issue.
+`tokenArgs` are compared by value, so a new object with the same values changes nothing. When they change, the
+provider drops the current token, private media wait for the new one, and a response for the previous arguments is
+ignored. Your action returns what the component's action returns: `{ token, expiresIn }` or the token string.
+
 ## Media library
 
 Every upload, whatever its kind, gets a record in the component's `media` table once its bytes are stored, so

package/dist/react.d.ts

@@ -3,9 +3,18 @@ import { Visibility, DevulturMedia, MediaUrlOptions, ProcessingPhase, FailureRea
 import { BakeOutputFormat, MediaUploadState, MediaUploadError, UploadProgress } from '@devultur/react';
 export { MediaUploadError, MediaUploadState, UploadProgress } from '@devultur/react';
 import { FunctionReference } from 'convex/server';
+import { Value } from 'convex/values';
 import { a as PdfjsLoader } from './pdf-render-CiCK6V1X.js';
 export { P as PdfjsModule } from './pdf-render-CiCK6V1X.js';
 
+/** What a viewer token action returns: the token with its lifetime, or the bare token (default lifetime). */
+type ViewerTokenResult = {
+    token: string;
+    expiresIn: number;
+} | string;
+/** Extra arguments sent with `sessionSecret` to the viewer token action. */
+type ViewerTokenArgs = Record<string, Value>;
+
 interface CropUploadRenderProps {
     /** The state machine of the full cycle (idle → uploading → ready / failed). */
     state: MediaUploadState;
@@ -107,6 +116,32 @@ interface MediaObjectUrl {
  */
 declare function useMediaObjectUrl(media: DevulturMedia | null | undefined, options?: UseMediaObjectUrlOptions): MediaObjectUrl;
 
+/**
+ * Every string `<Preview>`, `<PdfThumbnail>` and their PDF pages show or announce. Pass any subset as `labels` on a
+ * component or on `PdfPreviewProvider`; the component's wins over the provider's, which wins over the English defaults.
+ */
+interface PreviewLabels {
+    /** Accessible name of a pdf.js document: its title and page count. */
+    document: (title: string, pageCount: number) => string;
+    /** Accessible name of one pdf.js page. */
+    page: (page: number, pageCount: number) => string;
+    /** Announced (visually hidden) while a preview loads, when no `loading` is passed. */
+    loading: string;
+    /** Note after the last rendered page when a PDF has more than `maxPages`; `fallback` follows it. */
+    pageCap: (shown: number, total: number) => string;
+    /** `title` of the default fallback's download link when a fetch was refused or the type can't be previewed. */
+    error: (code: MediaFetchErrorCode) => string;
+    /** Accessible name of a `<PdfThumbnail>`, from its title. */
+    thumbnail: (title: string) => string;
+    /** Name of a PDF (pdf.js document, `<iframe>` title, thumbnail) with no `title` and no filename. */
+    untitledPdf: string;
+    /** Name of an image or audio preview with no `title` and no filename. */
+    untitledMedia: string;
+    /** Text of the default fallback's download link when the media has no filename. */
+    download: string;
+}
+declare const defaultPreviewLabels: PreviewLabels;
+
 interface PdfPreviewConfig {
     /**
      * Imports pdf.js. Without it, PDFs render in an `<iframe>` (the browser's own viewer) and `<PdfThumbnail>` renders
@@ -115,15 +150,18 @@ interface PdfPreviewConfig {
     pdfjs?: PdfjsLoader;
     /** URL of `pdf.worker.min.mjs`, set on `GlobalWorkerOptions.workerSrc` before a document opens. */
     workerSrc?: string;
+    /** Labels for every `<Preview>` and `<PdfThumbnail>` below it; a component's own `labels` win over these. */
+    labels?: Partial<PreviewLabels>;
 }
 /**
- * Renders the PDFs of every `<Preview>` and `<PdfThumbnail>` below it with pdf.js, on a `<canvas>`.
+ * Renders the PDFs of every `<Preview>` and `<PdfThumbnail>` below it with pdf.js, on a `<canvas>`, and gives them
+ * default `labels`.
  *
  * @example
  * import { loadPdfjs } from "@devultur/convex/pdfjs";
  * <PdfPreviewProvider pdfjs={loadPdfjs}>{children}</PdfPreviewProvider>
  */
-declare function PdfPreviewProvider({ pdfjs, workerSrc, children }: PdfPreviewConfig & {
+declare function PdfPreviewProvider({ pdfjs, workerSrc, labels, children, }: PdfPreviewConfig & {
     children: React.ReactNode;
 }): React.JSX.Element;
 
@@ -140,11 +178,13 @@ interface PdfThumbnailProps {
     fallback?: React.ReactNode;
     /** Shown until page 1 is drawn, including while off-screen. Default: nothing. */
     loading?: React.ReactNode;
-    /** Accessible name of the thumbnail. Default: the filename. */
+    /** Title the accessible name is built from (`labels.thumbnail`). Default: the filename. */
     title?: string;
     className?: string;
     /** Overrides the provider's `workerSrc`. */
     pdfWorkerSrc?: string;
+    /** Overrides `thumbnail` and `untitledPdf`; wins over `PdfPreviewProvider`'s `labels`. English by default. */
+    labels?: Partial<PreviewLabels>;
 }
 /**
  * Page 1 of a PDF on a small canvas, for lists and upload queues. Nothing is fetched until it nears the viewport.
@@ -164,9 +204,14 @@ interface PreviewProps {
     maxBytes?: number;
     /** Size cap for text previews. Default 1 MiB. */
     maxTextBytes?: number;
-    /** Shown for types that don't preview inline and when the fetch fails. Default: a `<DownloadLink>`. */
-    fallback?: React.ReactNode;
-    /** Shown while a private file is loading. Default: nothing. */
+    /**
+     * Shown for types that don't preview inline and when the fetch fails. Default: a `<DownloadLink>`.
+     * As a function it receives why: a `MediaFetchError` when the fetch was refused (`http_error`, `too_large`,
+     * `type_mismatch`) or the type doesn't preview inline (`unsupported_type`, nothing fetched), `null` otherwise
+     * (a network failure, a PDF pdf.js can't open, or the link after the `maxPages` note).
+     */
+    fallback?: React.ReactNode | ((error: MediaFetchError | null) => React.ReactNode);
+    /** Shown while a file loads. Default: `labels.loading`, visually hidden, in a `role="status"`. `null` → nothing. */
     loading?: React.ReactNode;
     /** Accessible name of the preview (`alt`, `title`, `aria-label`). Default: the filename (text: none). */
     title?: string;
@@ -178,6 +223,8 @@ interface PreviewProps {
     maxPages?: number;
     /** URL of pdf.js's worker for this preview; overrides `PdfPreviewProvider`'s `workerSrc`. */
     pdfWorkerSrc?: string;
+    /** Overrides any string shown or announced; wins over `PdfPreviewProvider`'s `labels`. English by default. */
+    labels?: Partial<PreviewLabels>;
 }
 /**
  * Renders a media inline by its content type: images in an `<img>`, PDFs on `<canvas>` pages with pdf.js under a
@@ -188,7 +235,7 @@ interface PreviewProps {
  * @example
  * <Preview media={document.file} maxBytes={20_000_000} className="h-[80vh] w-full" />
  */
-declare function Preview({ media, contentType, fallback, ...viewProps }: PreviewProps): React.JSX.Element | null;
+declare function Preview({ media, contentType, fallback, loading, labels, ...viewProps }: PreviewProps): React.JSX.Element | null;
 
 /** How a content type renders inline: `<img>`, a PDF view (pdf.js canvases or `<iframe>`), `<audio>` or `<pre>`. */
 type PreviewKind = "image" | "pdf" | "audio" | "text";
@@ -266,9 +313,23 @@ interface DevulturProviderProps {
     api: DevulturApi;
     /** Media worker base (e.g. `https://media.your-domain.com`). Required for `useMediaUrl`. */
     baseUrl?: string;
+    /**
+     * Extra arguments sent with `sessionSecret` on every viewer token issuance (first, renewal and re-issue), for
+     * example `{ workspaceId }`. Compared by value: when they change, the current token is dropped and a new one is
+     * issued. The component's own `issueViewerToken` accepts only `sessionSecret`, so pass your own action in
+     * `issueViewerToken` that takes these arguments.
+     */
+    tokenArgs?: ViewerTokenArgs;
+    /**
+     * Your own viewer token action, used instead of `api.issueViewerToken`. It receives `{ sessionSecret, ...tokenArgs }`
+     * and returns what the component's `issueViewerToken` returns.
+     */
+    issueViewerToken?: FunctionReference<"action", "public", {
+        sessionSecret: string;
+    }>;
     children: React.ReactNode;
 }
-declare function DevulturProvider({ api, baseUrl, children }: DevulturProviderProps): React.JSX.Element;
+declare function DevulturProvider({ api, baseUrl, tokenArgs, issueViewerToken, children }: DevulturProviderProps): React.JSX.Element;
 declare function useDevultur(): DevulturContextValue;
 declare function useDevulturProgress(): ProgressContextValue;
 /**
@@ -433,4 +494,4 @@ interface UseMediaUploadReturn {
  */
 declare function useMediaUpload(options?: UseMediaUploadOptions): UseMediaUploadReturn;
 
-export { type CaptionTrack, CropUpload, type CropUploadLabels, type CropUploadProps, type CropUploadRenderProps, DevulturProvider, DownloadLink, Image, MediaFetchError, type MediaFetchErrorCode, type MediaObjectUrl, type PdfPreviewConfig, PdfPreviewProvider, PdfThumbnail, type PdfThumbnailProps, PdfjsLoader, Preview, type PreviewKind, type PreviewProps, type UploadedMedia, type UseMediaObjectUrlOptions, type UseMediaUploadOptions, type UseMediaUploadReturn, type VideoProps, type VideoState, useDevultur, useDevulturMedia, useDevulturProgress, useMediaObjectUrl, useMediaUpload, useMediaUrl, useVideoProps, useVideoState };
+export { type CaptionTrack, CropUpload, type CropUploadLabels, type CropUploadProps, type CropUploadRenderProps, DevulturProvider, DownloadLink, Image, MediaFetchError, type MediaFetchErrorCode, type MediaObjectUrl, type PdfPreviewConfig, PdfPreviewProvider, PdfThumbnail, type PdfThumbnailProps, PdfjsLoader, Preview, type PreviewKind, type PreviewLabels, type PreviewProps, type UploadedMedia, type UseMediaObjectUrlOptions, type UseMediaUploadOptions, type UseMediaUploadReturn, type VideoProps, type VideoState, type ViewerTokenArgs, type ViewerTokenResult, defaultPreviewLabels, useDevultur, useDevulturMedia, useDevulturProgress, useMediaObjectUrl, useMediaUpload, useMediaUrl, useVideoProps, useVideoState };

package/dist/react.js

@@ -1,11 +1,10 @@
 "use client";
 
 // src/react.tsx
-import React7 from "react";
+import React8 from "react";
 import {
   buildMediaUrl,
   CaptionLocaleLabel,
-  DEFAULT_TOKEN_EXPIRY_SECONDS,
   MediaStatus,
   mediaCaptionPath,
   mediaPath as mediaPath2,
@@ -214,8 +213,76 @@ function deriveUploadState(local, videoState, retry) {
   }
 }
 
-// src/crop-upload.tsx
+// src/viewer-token.ts
 import React from "react";
+import { DEFAULT_TOKEN_EXPIRY_SECONDS } from "@devultur/core";
+import { convexToJson } from "convex/values";
+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 sortKeys(json) {
+  if (Array.isArray(json)) return json.map(sortKeys);
+  if (json === null || typeof json !== "object") return json;
+  return Object.fromEntries(
+    Object.keys(json).sort().map((name) => [name, sortKeys(json[name])])
+  );
+}
+function tokenArgsKey(tokenArgs) {
+  return JSON.stringify(sortKeys(convexToJson(tokenArgs ?? {})));
+}
+function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs }) {
+  const argsKey = tokenArgsKey(tokenArgs);
+  const stableArgs = React.useMemo(() => tokenArgs ?? {}, [argsKey]);
+  const [issued, setIssued] = React.useState(null);
+  const token = issued?.argsKey === argsKey ? issued.token : null;
+  const currentArgsKeyRef = React.useRef(argsKey);
+  const refreshTimerRef = React.useRef(null);
+  const inFlightRef = React.useRef(null);
+  React.useEffect(() => {
+    currentArgsKeyRef.current = argsKey;
+  }, [argsKey]);
+  React.useEffect(() => {
+    return () => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    };
+  }, []);
+  const request = React.useCallback(() => {
+    const renew = () => void request();
+    return issueViewerToken({ ...stableArgs, sessionSecret }).then((result) => {
+      if (currentArgsKeyRef.current !== argsKey) return null;
+      const { tokenValue, ttlMs } = extractTokenResult(result);
+      setIssued({ token: tokenValue, argsKey });
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+      refreshTimerRef.current = setTimeout(renew, Math.max(ttlMs - REFRESH_BUFFER_MS, MIN_REFRESH_MS));
+      return tokenValue;
+    });
+  }, [issueViewerToken, stableArgs, argsKey, sessionSecret]);
+  const issueOnce = React.useCallback(() => {
+    const inFlight = inFlightRef.current;
+    if (inFlight?.argsKey === argsKey) return inFlight.promise;
+    const promise = request();
+    const settle = () => {
+      if (inFlightRef.current?.promise === promise) inFlightRef.current = null;
+    };
+    promise.then(settle, settle);
+    inFlightRef.current = { argsKey, promise };
+    return promise;
+  }, [request, argsKey]);
+  React.useEffect(() => {
+    if (token) return;
+    issueOnce();
+  }, [token, issueOnce]);
+  const reissueToken = React.useCallback(() => issueOnce().catch(() => null), [issueOnce]);
+  return { token, reissueToken };
+}
+
+// src/crop-upload.tsx
+import React2 from "react";
 import { ImageCropper } from "@devultur/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
@@ -239,18 +306,18 @@ function CropUpload({
   children
 }) {
   const text = { ...DEFAULT_LABELS, ...labels };
-  const [pendingFile, setPendingFile] = React.useState(null);
-  const inputRef = React.useRef(null);
+  const [pendingFile, setPendingFile] = React2.useState(null);
+  const inputRef = React2.useRef(null);
   const { upload, state, cancel, reset } = useMediaUpload({ visibility, replaces, onComplete });
-  const pickFile = React.useCallback(() => inputRef.current?.click(), []);
-  const handleCrop = React.useCallback(
+  const pickFile = React2.useCallback(() => inputRef.current?.click(), []);
+  const handleCrop = React2.useCallback(
     (baked) => {
       setPendingFile(null);
       upload(baked);
     },
     [upload]
   );
-  const resetAll = React.useCallback(() => {
+  const resetAll = React2.useCallback(() => {
     setPendingFile(null);
     reset();
   }, [reset]);
@@ -303,7 +370,7 @@ function CropUpload({
 }
 
 // src/media-resource.ts
-import React2 from "react";
+import React3 from "react";
 import { mediaPath, mediaUrl } from "@devultur/core";
 var IDLE = { value: null, contentType: null, isLoading: false, error: null };
 var LOADING = { value: null, contentType: null, isLoading: true, error: null };
@@ -313,12 +380,12 @@ function useMediaResource(media, options) {
   const isPrivate = media?.visibility === "private";
   const isReady = !isPrivate || devultur.token !== null;
   const requestKey = media && isEnabled ? [devultur.baseUrl, media.visibility, mediaPath(media), contentType ?? "", maxBytes ?? ""].join("|") : null;
-  const [settled, setSettled] = React2.useState(null);
-  const inputsRef = React2.useRef({ media, devultur, options });
-  React2.useEffect(() => {
+  const [settled, setSettled] = React3.useState(null);
+  const inputsRef = React3.useRef({ media, devultur, options });
+  React3.useEffect(() => {
     inputsRef.current = { media, devultur, options };
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!requestKey || !isReady) return;
     const { media: target, devultur: context, options: current } = inputsRef.current;
     if (!target || !context.baseUrl) return;
@@ -380,11 +447,46 @@ function useMediaObjectUrl(media, options) {
 }
 
 // src/pdf-context.tsx
-import React3 from "react";
+import React4 from "react";
+
+// src/preview-labels.ts
+var ERROR_TEXT = {
+  http_error: "The file couldn't be loaded.",
+  too_large: "The file is too large to preview.",
+  unsupported_type: "This file type can't be previewed.",
+  type_mismatch: "The file's content doesn't match its type."
+};
+var defaultPreviewLabels = {
+  document: (title, pageCount) => `${title}, ${pageCount === 1 ? "1 page" : `${pageCount} pages`}`,
+  page: (page, pageCount) => `Page ${page} of ${pageCount}`,
+  loading: "Loading\u2026",
+  pageCap: (shown, total) => `Showing the first ${shown} of ${total} pages.`,
+  error: (code) => ERROR_TEXT[code],
+  thumbnail: (title) => title,
+  untitledPdf: "PDF",
+  untitledMedia: "Preview",
+  download: "Download"
+};
+function mergePreviewLabels(...sources) {
+  const merged = { ...defaultPreviewLabels };
+  for (const source of sources) {
+    for (const [key, value] of Object.entries(source ?? {})) {
+      if (value !== void 0) merged[key] = value;
+    }
+  }
+  return merged;
+}
+
+// src/pdf-context.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var PdfPreviewContext = React3.createContext({});
-function PdfPreviewProvider({ pdfjs, workerSrc, children }) {
-  const config = React3.useMemo(() => ({ pdfjs, workerSrc }), [pdfjs, workerSrc]);
+var PdfPreviewContext = React4.createContext({});
+function PdfPreviewProvider({
+  pdfjs,
+  workerSrc,
+  labels,
+  children
+}) {
+  const config = React4.useMemo(() => ({ pdfjs, workerSrc, labels }), [pdfjs, workerSrc, labels]);
   return /* @__PURE__ */ jsx2(PdfPreviewContext.Provider, { value: config, children });
 }
 var loadedModules = /* @__PURE__ */ new WeakMap();
@@ -396,9 +498,9 @@ function loadOnce(loader) {
   return loading;
 }
 function usePdfjs(workerSrcOverride) {
-  const { pdfjs: loader, workerSrc } = React3.useContext(PdfPreviewContext);
-  const [loaded, setLoaded] = React3.useState(null);
-  React3.useEffect(() => {
+  const { pdfjs: loader, workerSrc } = React4.useContext(PdfPreviewContext);
+  const [loaded, setLoaded] = React4.useState(null);
+  React4.useEffect(() => {
     if (!loader) return;
     let isCurrent = true;
     loadOnce(loader).then((pdfjs) => {
@@ -413,12 +515,16 @@ function usePdfjs(workerSrcOverride) {
   if (!loaded.pdfjs) return { status: "unavailable" };
   return { status: "ready", pdfjs: loaded.pdfjs, workerSrc: workerSrcOverride ?? workerSrc };
 }
+function usePreviewLabels(labels) {
+  const providerLabels = React4.useContext(PdfPreviewContext).labels;
+  return mergePreviewLabels(providerLabels, labels);
+}
 
 // src/pdf-thumbnail.tsx
-import React6 from "react";
+import React7 from "react";
 
 // src/pdf-hooks.ts
-import React4 from "react";
+import React5 from "react";
 
 // src/pdf-render.ts
 var MOBILE_MAX_CANVAS_PIXELS = 5242880;
@@ -462,8 +568,8 @@ var isRenderCancelled = (error) => error instanceof Error && error.name === "Ren
 
 // src/pdf-hooks.ts
 function useIsVisible(ref, rootMargin = "200px") {
-  const [isVisible, setIsVisible] = React4.useState(false);
-  React4.useEffect(() => {
+  const [isVisible, setIsVisible] = React5.useState(false);
+  React5.useEffect(() => {
     const element = ref.current;
     if (isVisible || !element) return;
     if (typeof IntersectionObserver === "undefined") {
@@ -484,12 +590,12 @@ function useIsVisible(ref, rootMargin = "200px") {
   return isVisible;
 }
 function usePdfDocument({ pdfjs, bytes, workerSrc }) {
-  const [state, setState] = React4.useState({
+  const [state, setState] = React5.useState({
     bytes: null,
     document: null,
     error: null
   });
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     let isCurrent = true;
     const loadingTask = openPdf(pdfjs, bytes, workerSrc);
     loadingTask.promise.then((document2) => {
@@ -508,8 +614,8 @@ function usePdfDocument({ pdfjs, bytes, workerSrc }) {
 }
 function usePageRender(options) {
   const { document: document2, pageNumber, canvasRef, width, isEnabled, shouldExtractText = false } = options;
-  const [state, setState] = React4.useState({ isRendered: false, text: "" });
-  React4.useEffect(() => {
+  const [state, setState] = React5.useState({ isRendered: false, text: "" });
+  React5.useEffect(() => {
     const canvas = canvasRef.current;
     if (!document2 || !isEnabled || !canvas) return;
     let isCurrent = true;
@@ -539,7 +645,7 @@ function usePageRender(options) {
 }
 
 // src/pdf-preview.tsx
-import React5 from "react";
+import React6 from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var VISUALLY_HIDDEN = {
   position: "absolute",
@@ -555,7 +661,7 @@ var VISUALLY_HIDDEN = {
 var DEFAULT_MAX_PAGES = 500;
 var keepBytes = (bytes) => bytes;
 function PdfPreview(props) {
-  const { media, expectedType, maxBytes, fallback, loading, title, className, pdfWorkerSrc, maxPages } = props;
+  const { media, expectedType, maxBytes, renderFallback, loading, labels, title, className, pdfWorkerSrc } = props;
   const pdfjsState = usePdfjs(pdfWorkerSrc);
   const { value: bytes, error } = useMediaResource(media, {
     isEnabled: true,
@@ -563,9 +669,9 @@ function PdfPreview(props) {
     contentType: expectedType,
     decode: keepBytes
   });
-  if (error) return /* @__PURE__ */ jsx3(Fragment, { children: fallback });
+  if (error) return /* @__PURE__ */ jsx3(Fragment, { children: renderFallback(error) });
   if (!bytes || pdfjsState.status === "loading") return /* @__PURE__ */ jsx3(Fragment, { children: loading });
-  const label = title ?? media.filename ?? "PDF";
+  const label = title ?? media.filename ?? labels.untitledPdf;
   if (pdfjsState.status === "unavailable") return /* @__PURE__ */ jsx3(PdfFrame, { bytes, label, className });
   return /* @__PURE__ */ jsx3(
     PdfCanvasDocument,
@@ -575,41 +681,56 @@ function PdfPreview(props) {
       bytes,
       label,
       className,
-      fallback,
+      renderFallback,
       loading,
-      maxPages: maxPages ?? DEFAULT_MAX_PAGES
+      labels,
+      maxPages: props.maxPages ?? DEFAULT_MAX_PAGES
     }
   );
 }
 function PdfCanvasDocument(props) {
-  const { pdfjs, workerSrc, bytes, label, className, fallback, loading, maxPages } = props;
+  const { pdfjs, workerSrc, bytes, label, className, renderFallback, loading, labels, maxPages } = props;
   const { document: document2, error } = usePdfDocument({ pdfjs, bytes, workerSrc });
-  const containerRef = React5.useRef(null);
-  const [width, setWidth] = React5.useState(null);
-  React5.useLayoutEffect(() => {
+  const containerRef = React6.useRef(null);
+  const [width, setWidth] = React6.useState(null);
+  React6.useLayoutEffect(() => {
     if (document2) setWidth(containerRef.current?.clientWidth ?? 0);
   }, [document2]);
-  if (error) return /* @__PURE__ */ jsx3(Fragment, { children: fallback });
+  if (error) return /* @__PURE__ */ jsx3(Fragment, { children: renderFallback(error) });
   if (!document2) return /* @__PURE__ */ jsx3(Fragment, { children: loading });
   const shownPageCount = Math.min(document2.numPages, Math.max(1, maxPages));
   const isTruncated = shownPageCount < document2.numPages;
   const pageNumbers = Array.from({ length: shownPageCount }, (_, index) => index + 1);
-  const pageCountLabel = document2.numPages === 1 ? "1 page" : `${document2.numPages} pages`;
-  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, role: "document", "aria-label": `${label}, ${pageCountLabel}`, className, children: [
-    width !== null && pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx3(PdfPageView, { document: document2, pageNumber, width }, pageNumber)),
-    isTruncated && /* @__PURE__ */ jsxs2("p", { children: [
-      "Showing the first ",
-      shownPageCount,
-      " of ",
-      document2.numPages,
-      " pages. ",
-      fallback
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: containerRef,
+      role: "document",
+      "aria-label": labels.document(label, document2.numPages),
+      className,
+      children: [
+        width !== null && pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx3(
+          PdfPageView,
+          {
+            document: document2,
+            pageNumber,
+            width,
+            label: labels.page(pageNumber, document2.numPages)
+          },
+          pageNumber
+        )),
+        isTruncated && /* @__PURE__ */ jsxs2("p", { children: [
+          labels.pageCap(shownPageCount, document2.numPages),
+          " ",
+          renderFallback(null)
+        ] })
+      ]
+    }
+  );
 }
-function PdfPageView({ document: document2, pageNumber, width }) {
-  const pageRef = React5.useRef(null);
-  const canvasRef = React5.useRef(null);
+function PdfPageView({ document: document2, pageNumber, width, label }) {
+  const pageRef = React6.useRef(null);
+  const canvasRef = React6.useRef(null);
   const isVisible = useIsVisible(pageRef);
   const { isRendered, text } = usePageRender({
     document: document2,
@@ -620,14 +741,14 @@ function PdfPageView({ document: document2, pageNumber, width }) {
     shouldExtractText: true
   });
   const placeholderStyle = isRendered ? void 0 : { aspectRatio: "1 / 1.4142", maxWidth: "100%" };
-  return /* @__PURE__ */ jsxs2("section", { ref: pageRef, "aria-label": `Page ${pageNumber} of ${document2.numPages}`, style: placeholderStyle, children: [
+  return /* @__PURE__ */ jsxs2("section", { ref: pageRef, "aria-label": label, style: placeholderStyle, children: [
     /* @__PURE__ */ jsx3("canvas", { ref: canvasRef, style: { display: "block", maxWidth: "100%" } }),
     text && /* @__PURE__ */ jsx3("p", { style: VISUALLY_HIDDEN, children: text })
   ] });
 }
 function PdfFrame({ bytes, label, className }) {
-  const [objectUrl, setObjectUrl] = React5.useState(null);
-  React5.useEffect(() => {
+  const [objectUrl, setObjectUrl] = React6.useState(null);
+  React6.useEffect(() => {
     const url = URL.createObjectURL(new Blob([bytes], { type: "application/pdf" }));
     setObjectUrl(url);
     return () => URL.revokeObjectURL(url);
@@ -642,9 +763,10 @@ var DEFAULT_THUMBNAIL_WIDTH = 96;
 var DEFAULT_THUMBNAIL_MAX_BYTES = 50 * 1024 * 1024;
 function PdfThumbnail(props) {
   const { media, contentType, width = DEFAULT_THUMBNAIL_WIDTH, fallback = null, loading = null } = props;
-  const containerRef = React6.useRef(null);
+  const containerRef = React7.useRef(null);
   const isVisible = useIsVisible(containerRef);
   const pdfjsState = usePdfjs(props.pdfWorkerSrc);
+  const labels = usePreviewLabels(props.labels);
   const expectedType = media ? expectedContentType(media, contentType) : null;
   const isPdf = previewKindOf(expectedType) === "pdf";
   const { value: bytes, error } = useMediaResource(media, {
@@ -665,7 +787,7 @@ function PdfThumbnail(props) {
         workerSrc: pdfjsState.workerSrc,
         bytes,
         width,
-        label: props.title ?? media.filename ?? "PDF",
+        label: labels.thumbnail(props.title ?? media.filename ?? labels.untitledPdf),
         fallback,
         loading
       }
@@ -674,7 +796,7 @@ function PdfThumbnail(props) {
   return /* @__PURE__ */ jsx4("div", { ref: containerRef, className: props.className, style: { width }, children: content() });
 }
 function ThumbnailCanvas({ pdfjs, workerSrc, bytes, width, label, fallback, loading }) {
-  const canvasRef = React6.useRef(null);
+  const canvasRef = React7.useRef(null);
   const { document: document2, error } = usePdfDocument({ pdfjs, bytes, workerSrc });
   const { isRendered } = usePageRender({ document: document2, pageNumber: 1, canvasRef, width, isEnabled: true });
   if (error) return /* @__PURE__ */ jsx4(Fragment2, { children: fallback });
@@ -689,21 +811,32 @@ import { VideoPlayer } from "@devultur/react";
 import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
 var DEFAULT_MAX_TEXT_BYTES = 1024 * 1024;
 var DEFAULT_MAX_BYTES = 50 * 1024 * 1024;
-function Preview({ media, contentType, fallback, ...viewProps }) {
+function Preview({ media, contentType, fallback, loading, labels, ...viewProps }) {
+  const text = usePreviewLabels(labels);
   if (!media) return null;
-  const fallbackNode = fallback === void 0 ? /* @__PURE__ */ jsx5(DownloadLink, { media, children: media.filename ?? "Download" }) : fallback;
   if (media.kind === "video") return /* @__PURE__ */ jsx5(VideoPreview, { media, className: viewProps.className });
+  const renderFallback = (error) => {
+    const fetchError = error instanceof MediaFetchError ? error : null;
+    if (typeof fallback === "function") return fallback(fetchError);
+    if (fallback !== void 0) return fallback;
+    return /* @__PURE__ */ jsx5(DefaultFallback, { media, error: fetchError, labels: text });
+  };
   const expectedType = expectedContentType(media, contentType);
   const kind = previewKindOf(expectedType);
-  if (!expectedType || !kind) return /* @__PURE__ */ jsx5(Fragment3, { children: fallbackNode });
-  const props = { ...viewProps, media, expectedType, fallback: fallbackNode };
+  if (!expectedType || !kind) return /* @__PURE__ */ jsx5(Fragment3, { children: renderFallback(unsupportedType(expectedType)) });
+  const loadingNode = loading === void 0 ? /* @__PURE__ */ jsx5(LoadingStatus, { text: text.loading }) : loading;
+  const props = { ...viewProps, media, expectedType, renderFallback, loading: loadingNode, labels: text };
   if (kind === "text") return /* @__PURE__ */ jsx5(TextPreview, { ...props });
-  if (kind === "pdf") {
-    const { maxBytes = DEFAULT_MAX_BYTES, loading = null } = props;
-    return /* @__PURE__ */ jsx5(PdfPreview, { ...props, maxBytes, loading });
-  }
+  if (kind === "pdf") return /* @__PURE__ */ jsx5(PdfPreview, { ...props, maxBytes: props.maxBytes ?? DEFAULT_MAX_BYTES });
   return /* @__PURE__ */ jsx5(BinaryPreview, { ...props, kind });
 }
+var unsupportedType = (contentType) => new MediaFetchError("unsupported_type", `Can't preview ${contentType ?? "an unknown type"} inline`);
+function DefaultFallback({ media, error, labels }) {
+  return /* @__PURE__ */ jsx5(DownloadLink, { media, title: error ? labels.error(error.code) : void 0, children: media.filename ?? labels.download });
+}
+function LoadingStatus({ text }) {
+  return /* @__PURE__ */ jsx5("span", { role: "status", style: VISUALLY_HIDDEN, children: text });
+}
 function VideoPreview({ media, className }) {
   const videoProps = useVideoProps(media);
   if (!videoProps) return null;
@@ -714,8 +847,9 @@ function BinaryPreview({
   kind,
   expectedType,
   maxBytes = DEFAULT_MAX_BYTES,
-  fallback,
-  loading = null,
+  renderFallback,
+  loading,
+  labels,
   title,
   className
 }) {
@@ -723,9 +857,9 @@ function BinaryPreview({
   const isPublicImage = kind === "image" && media.visibility === "public";
   const verified = useMediaObjectUrl(media, { enabled: !isPublicImage, contentType: expectedType, maxBytes });
   const objectUrl = isPublicImage ? url(media) : verified.objectUrl;
-  if (verified.error) return /* @__PURE__ */ jsx5(Fragment3, { children: fallback });
+  if (verified.error) return /* @__PURE__ */ jsx5(Fragment3, { children: renderFallback(verified.error) });
   if (!objectUrl) return /* @__PURE__ */ jsx5(Fragment3, { children: loading });
-  const label = title ?? media.filename ?? "Preview";
+  const label = title ?? media.filename ?? labels.untitledMedia;
   if (kind === "image") {
     return /* @__PURE__ */ jsx5("img", { src: objectUrl, alt: label, width: media.width, height: media.height, className });
   }
@@ -736,8 +870,8 @@ function TextPreview({
   media,
   expectedType,
   maxTextBytes = DEFAULT_MAX_TEXT_BYTES,
-  fallback,
-  loading = null,
+  renderFallback,
+  loading,
   title,
   className
 }) {
@@ -747,84 +881,36 @@ function TextPreview({
     contentType: expectedType,
     decode: decodeText
   });
-  if (error) return /* @__PURE__ */ jsx5(Fragment3, { children: fallback });
+  if (error) return /* @__PURE__ */ jsx5(Fragment3, { children: renderFallback(error) });
   if (text === null) return /* @__PURE__ */ jsx5(Fragment3, { children: loading });
   return /* @__PURE__ */ jsx5("pre", { title, className, children: text });
 }
 
 // src/react.tsx
 import { Fragment as Fragment4, jsx as jsx6 } from "react/jsx-runtime";
-var DevulturContext = React7.createContext(null);
-var DevulturApiContext = React7.createContext(null);
-var ProgressContext = React7.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] = React7.useState(null);
-  const [sessionSecret] = React7.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
-  const issueViewerToken = useAction(api.issueViewerToken);
+var DevulturContext = React8.createContext(null);
+var DevulturApiContext = React8.createContext(null);
+var ProgressContext = React8.createContext(null);
+function DevulturProvider({ api, baseUrl, tokenArgs, issueViewerToken, children }) {
+  const [sessionSecret] = React8.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
+  const issueViewerTokenAction = useAction(issueViewerToken ?? api.issueViewerToken);
+  const { token, reissueToken } = useViewerToken({
+    issueViewerToken: issueViewerTokenAction,
+    sessionSecret,
+    tokenArgs
+  });
   const createUploadUrlAction = useAction(api.createUploadUrl);
   const deleteMediaAction = useAction(api.deleteMedia);
   const confirmUploadAction = useAction(api.confirmUpload ?? api.createUploadUrl);
   const deleteVideoAction = useAction(api.deleteVideo ?? api.deleteMedia);
-  const refreshTimerRef = React7.useRef(null);
-  const reissueInFlightRef = React7.useRef(null);
-  const scheduleRefresh = React7.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]
-  );
-  React7.useEffect(() => {
-    if (token) return;
-    issueViewerToken({ sessionSecret }).then((result) => {
-      const { tokenValue, ttlMs } = extractTokenResult(result);
-      setToken(tokenValue);
-      scheduleRefresh(ttlMs);
-    });
-  }, [token, issueViewerToken, scheduleRefresh, sessionSecret]);
-  const reissueToken = React7.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]);
-  React7.useEffect(() => {
-    return () => {
-      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
-    };
-  }, []);
-  const uploadUrl = React7.useCallback(
+  const uploadUrl = React8.useCallback(
     async (file) => {
       const result = await createUploadUrlAction({ filename: file.name, contentType: file.type });
       return { url: result.url, key: result.key };
     },
     [createUploadUrlAction]
   );
-  const upload = React7.useCallback(
+  const upload = React8.useCallback(
     async (file, options) => {
       const dimensions = await readImageDimensions(file);
       const target = await createUploadUrlAction({
@@ -845,14 +931,14 @@ function DevulturProvider({ api, baseUrl, children }) {
     },
     [createUploadUrlAction, confirmUploadAction, api.confirmUpload]
   );
-  const url = React7.useCallback(
+  const url = React8.useCallback(
     (media, options) => {
       if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
       return mediaUrl2(baseUrl, media, { ...options, token: token ?? void 0 });
     },
     [baseUrl, token]
   );
-  const getCaptionsText = React7.useCallback(
+  const getCaptionsText = React8.useCallback(
     async (media, locale) => {
       if (!baseUrl) throw new Error("Devultur `getCaptionsText()` requires `baseUrl` on <DevulturProvider>");
       const path = mediaCaptionPath(media, locale);
@@ -871,7 +957,7 @@ function DevulturProvider({ api, baseUrl, children }) {
     },
     [baseUrl, token, reissueToken, sessionSecret]
   );
-  const deleteMedia = React7.useCallback(
+  const deleteMedia = React8.useCallback(
     (media) => {
       if (media.kind === "video" && api.deleteVideo) {
         deleteVideoAction({ videoId: media.id, visibility: media.visibility }).catch(console.error);
@@ -881,7 +967,7 @@ function DevulturProvider({ api, baseUrl, children }) {
     },
     [deleteMediaAction, deleteVideoAction, api.deleteVideo]
   );
-  const devulturValue = React7.useMemo(
+  const devulturValue = React8.useMemo(
     () => ({
       token,
       baseUrl: baseUrl ?? null,
@@ -921,13 +1007,13 @@ function ProgressBridge({
   const saveMutation = useMutation(save);
   const markCompleteMutation = useMutation(markComplete);
   const resetMutation = useMutation(reset);
-  const onSave = React7.useCallback(
+  const onSave = React8.useCallback(
     async (videoId, position) => {
       await saveMutation({ videoId, position });
     },
     [saveMutation]
   );
-  const onLoad = React7.useCallback(
+  const onLoad = React8.useCallback(
     async (videoId) => {
       const result = await convex.query(load, { videoId });
       if (!result) return null;
@@ -938,37 +1024,37 @@ function ProgressBridge({
     },
     [convex, load]
   );
-  const onMarkComplete = React7.useCallback(
+  const onMarkComplete = React8.useCallback(
     async (videoId) => {
       await markCompleteMutation({ videoId });
     },
     [markCompleteMutation]
   );
-  const onReset = React7.useCallback(
+  const onReset = React8.useCallback(
     async (videoId) => {
       await resetMutation({ videoId });
     },
     [resetMutation]
   );
-  const value = React7.useMemo(
+  const value = React8.useMemo(
     () => ({ save: onSave, load: onLoad, markComplete: onMarkComplete, reset: onReset }),
     [onSave, onLoad, onMarkComplete, onReset]
   );
   return /* @__PURE__ */ jsx6(ProgressContext, { value, children });
 }
 function useDevultur() {
-  const context = React7.use(DevulturContext);
+  const context = React8.use(DevulturContext);
   if (!context) throw new Error("useDevultur must be used within <DevulturProvider>");
   return context;
 }
 function useDevulturProgress() {
-  const context = React7.use(ProgressContext);
+  const context = React8.use(ProgressContext);
   if (!context) throw new Error("useDevulturProgress requires progress API in DevulturProvider");
   return context;
 }
 function useMediaUrl(key, options) {
   const { token, baseUrl } = useDevultur();
-  return React7.useMemo(() => {
+  return React8.useMemo(() => {
     if (!key) return null;
     if (!baseUrl) throw new Error("useMediaUrl requires `baseUrl` on <DevulturProvider>");
     const isPublic = visibilityFromKey(key) === "public";
@@ -996,7 +1082,7 @@ async function readImageDimensions(file) {
 function useVideoProps(media, options) {
   const { token, baseUrl, sessionSecret } = useDevultur();
   const locales = options?.locales;
-  return React7.useMemo(() => {
+  return React8.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;
@@ -1028,19 +1114,19 @@ function Image({
   ...imgProps
 }) {
   const { url, token, baseUrl, reissueToken, sessionSecret } = useDevultur();
-  const [failed, setFailed] = React7.useState(false);
-  const [blobSrc, setBlobSrc] = React7.useState(null);
-  const sessionRef = React7.useRef({ token, reissueToken });
-  React7.useEffect(() => {
+  const [failed, setFailed] = React8.useState(false);
+  const [blobSrc, setBlobSrc] = React8.useState(null);
+  const sessionRef = React8.useRef({ token, reissueToken });
+  React8.useEffect(() => {
     sessionRef.current = { token, reissueToken };
   });
   const isPrivate = media?.visibility === "private";
   const hasToken = token !== null;
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     setFailed(false);
     setBlobSrc(null);
   }, [media]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!isPrivate || failed || !media || !hasToken) return;
     let cancelled = false;
     let objectUrl = null;
@@ -1072,7 +1158,7 @@ function Image({
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
   }, [isPrivate, failed, media, hasToken, baseUrl, sessionSecret, width, height, fit, format, quality]);
-  const handleError = React7.useCallback(() => setFailed(true), []);
+  const handleError = React8.useCallback(() => setFailed(true), []);
   let src;
   if (failed || !media) {
     src = externalFallback ?? null;
@@ -1083,7 +1169,7 @@ function Image({
   }
   if (!src) return /* @__PURE__ */ jsx6(Fragment4, { children: fallback });
   if (render) {
-    return React7.cloneElement(render, {
+    return React8.cloneElement(render, {
       style: { ...render.props.style, backgroundImage: `url("${src}")` }
     });
   }
@@ -1101,7 +1187,7 @@ function Image({
 }
 function DownloadLink({ media, filename, children, ...anchorProps }) {
   const { url, token, baseUrl, sessionSecret, reissueToken } = useDevultur();
-  const handleClick = React7.useCallback(
+  const handleClick = React8.useCallback(
     async (event) => {
       if (media?.visibility !== "private" || !baseUrl) return;
       event.preventDefault();
@@ -1125,7 +1211,7 @@ function DownloadLink({ media, filename, children, ...anchorProps }) {
   return /* @__PURE__ */ jsx6("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
 }
 function useDevulturMedia(key) {
-  const apiCtx = React7.use(DevulturApiContext);
+  const apiCtx = React8.use(DevulturApiContext);
   if (!apiCtx?.getMedia) {
     throw new Error("useDevulturMedia requires getMedia in DevulturProvider api");
   }
@@ -1182,7 +1268,7 @@ function useVideoState(media, options) {
   const { token, baseUrl, sessionSecret } = useDevultur();
   const status = useDevulturMedia(media?.kind === "video" ? media.id : null);
   const locales = options?.locales;
-  return React7.useMemo(() => {
+  return React8.useMemo(() => {
     if (media?.kind !== "video") return { phase: "idle" };
     if (status.isFailed) {
       return {
@@ -1226,23 +1312,23 @@ function useVideoState(media, options) {
 }
 function useMediaUpload(options) {
   const { visibility, onComplete, onError, replaces, process, locales } = options ?? {};
-  const api = React7.use(DevulturApiContext);
+  const api = React8.use(DevulturApiContext);
   if (!api) throw new Error("useMediaUpload must be used within <DevulturProvider>");
   const createUploadUrlAction = useAction(api.createUploadUrl);
   const deleteMediaAction = useAction(api.deleteMedia);
   const confirmUploadAction = useAction(api.confirmUpload ?? api.createUploadUrl);
   const processVideoAction = useAction(api.processVideo ?? api.createUploadUrl);
-  const [phase, setPhase] = React7.useState("idle");
-  const [percent, setPercent] = React7.useState(0);
-  const [currentFile, setCurrentFile] = React7.useState(null);
-  const [media, setMedia] = React7.useState(null);
-  const [uploadFailure, setUploadFailure] = React7.useState(null);
-  const [processRequested, setProcessRequested] = React7.useState(false);
-  const abortRef = React7.useRef(null);
-  const lastFileRef = React7.useRef(null);
-  const lastKeyRef = React7.useRef(null);
+  const [phase, setPhase] = React8.useState("idle");
+  const [percent, setPercent] = React8.useState(0);
+  const [currentFile, setCurrentFile] = React8.useState(null);
+  const [media, setMedia] = React8.useState(null);
+  const [uploadFailure, setUploadFailure] = React8.useState(null);
+  const [processRequested, setProcessRequested] = React8.useState(false);
+  const abortRef = React8.useRef(null);
+  const lastFileRef = React8.useRef(null);
+  const lastKeyRef = React8.useRef(null);
   const videoState = useVideoState(media, { locales });
-  const triggerProcess = React7.useCallback(
+  const triggerProcess = React8.useCallback(
     (key) => {
       if (!api.processVideo) {
         throw new Error("useMediaUpload: processing a video requires `processVideo` in the <DevulturProvider> api");
@@ -1255,7 +1341,7 @@ function useMediaUpload(options) {
     },
     [api.processVideo, processVideoAction]
   );
-  const runUpload = React7.useCallback(
+  const runUpload = React8.useCallback(
     async (file) => {
       const controller = new AbortController();
       abortRef.current = controller;
@@ -1326,10 +1412,10 @@ function useMediaUpload(options) {
       onError
     ]
   );
-  const cancel = React7.useCallback(() => {
+  const cancel = React8.useCallback(() => {
     abortRef.current?.abort();
   }, []);
-  const reset = React7.useCallback(() => {
+  const reset = React8.useCallback(() => {
     abortRef.current?.abort();
     setPhase("idle");
     setPercent(0);
@@ -1338,15 +1424,15 @@ function useMediaUpload(options) {
     setUploadFailure(null);
     setProcessRequested(false);
   }, []);
-  const retry = React7.useCallback(() => {
+  const retry = React8.useCallback(() => {
     if (phase === "upload-failed" && lastFileRef.current) {
       runUpload(lastFileRef.current);
       return;
     }
     if (lastKeyRef.current) triggerProcess(lastKeyRef.current);
   }, [phase, runUpload, triggerProcess]);
-  React7.useEffect(() => () => abortRef.current?.abort(), []);
-  const state = React7.useMemo(
+  React8.useEffect(() => () => abortRef.current?.abort(), []);
+  const state = React8.useMemo(
     () => deriveUploadState(
       { phase, percent, file: currentFile, failure: uploadFailure, media, processRequested },
       videoState,
@@ -1354,7 +1440,7 @@ function useMediaUpload(options) {
     ),
     [phase, percent, currentFile, uploadFailure, media, processRequested, videoState, retry]
   );
-  const upload = React7.useCallback((file) => runUpload(file), [runUpload]);
+  const upload = React8.useCallback((file) => runUpload(file), [runUpload]);
   return { upload, state, cancel, reset };
 }
 export {
@@ -1366,6 +1452,7 @@ export {
   PdfPreviewProvider,
   PdfThumbnail,
   Preview,
+  defaultPreviewLabels,
   useDevultur,
   useDevulturMedia,
   useDevulturProgress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devultur/convex",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Convex component for Devultur media: media records, uploads, transcodes, watch progress and React bindings",
   "keywords": [
     "convex",
@@ -55,8 +55,8 @@
     "dist"
   ],
   "dependencies": {
-    "@devultur/core": "1.3.0",
-    "@devultur/react": "1.3.0"
+    "@devultur/core": "1.3.2",
+    "@devultur/react": "1.3.2"
   },
   "peerDependencies": {
     "convex": ">=1.25.0",