@orthacms/media-admin 0.0.0-reserve.0

package/dist/lib/hooks/useUploadQueue/index.d.ts

@@ -0,0 +1,33 @@
+import type { UploadItem, UploadSummary } from '../../types/upload';
+import type { StagedUpload } from '../../infrastructure/mediaGateway';
+/**
+ * The Media Library's upload queue: turns a set of picked files into a list of
+ * progress-tracked items, uploading at most {@link UPLOAD_CONCURRENCY} at once.
+ *
+ * Each file is **its own request** (the gateway is one-file-per-call), so one
+ * rejection fails exactly one row and leaves the rest of the batch running —
+ * the old `Promise.all` lost the whole batch to a single bad file. Failed rows
+ * are individually retryable; in-flight ones are cancellable through an
+ * `AbortController`.
+ *
+ * The `File` objects and the runner's bookkeeping live in refs, not state: a
+ * progress event fires many times a second per file, and only the small
+ * {@link UploadItem} rows belong in a re-render.
+ *
+ * @param folderId - destination folder, captured **per file at enqueue time**
+ *   so navigating away mid-upload can't redirect in-flight files to a folder
+ *   the user merely happens to be looking at.
+ * @param onUploaded - called once per settled batch that may have changed the
+ *   library (the caller invalidates its queries there — once, not per file).
+ *   That includes a **cancelled** file: an abort only stops the client, so a
+ *   body the server already finished reading is committed either way.
+ */
+export declare function useUploadQueue(folderId: string, onUploaded: () => void): {
+    items: UploadItem[];
+    summary: UploadSummary;
+    enqueue: (uploads: StagedUpload[]) => void;
+    retry: (id: string) => void;
+    cancel: (id: string) => void;
+    dismissSettled: () => void;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/hooks/useUploadQueue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useUploadQueue/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAiBtE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,IAAI;;;uBAiHrD,YAAY,EAAE;gBAsBnB,MAAM;iBAeN,MAAM;;EAuElB"}

package/dist/lib/hooks/useUploadQueue/index.js

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { UPLOAD_CONCURRENCY, UPLOAD_STATUS } from '../../constants';
+import { httpMediaGateway } from '../../infrastructure/httpMediaGateway';
+import { apiMessage } from '../../infrastructure/apiMessage';
+/** Intl descriptor for an upload failure with no server-supplied reason. */
+const messages = defineMessages({
+    failed: {
+        id: 'media.upload.failed',
+        defaultMessage: 'Upload failed'
+    }
+});
+/** Statuses that are over — the ones "Dismiss" clears. */
+const SETTLED = [
+    UPLOAD_STATUS.Done,
+    UPLOAD_STATUS.Failed,
+    UPLOAD_STATUS.Cancelled
+];
+/**
+ * The Media Library's upload queue: turns a set of picked files into a list of
+ * progress-tracked items, uploading at most {@link UPLOAD_CONCURRENCY} at once.
+ *
+ * Each file is **its own request** (the gateway is one-file-per-call), so one
+ * rejection fails exactly one row and leaves the rest of the batch running —
+ * the old `Promise.all` lost the whole batch to a single bad file. Failed rows
+ * are individually retryable; in-flight ones are cancellable through an
+ * `AbortController`.
+ *
+ * The `File` objects and the runner's bookkeeping live in refs, not state: a
+ * progress event fires many times a second per file, and only the small
+ * {@link UploadItem} rows belong in a re-render.
+ *
+ * @param folderId - destination folder, captured **per file at enqueue time**
+ *   so navigating away mid-upload can't redirect in-flight files to a folder
+ *   the user merely happens to be looking at.
+ * @param onUploaded - called once per settled batch that may have changed the
+ *   library (the caller invalidates its queries there — once, not per file).
+ *   That includes a **cancelled** file: an abort only stops the client, so a
+ *   body the server already finished reading is committed either way.
+ */
+export function useUploadQueue(folderId, onUploaded) {
+    const intl = useIntl();
+    const [items, setItems] = useState([]);
+    // --- Runner bookkeeping (refs: mutated mid-flight, never rendered) --------
+    /** id → the file to send, its description, and the folder it was queued for. */
+    const filesRef = useRef(new Map());
+    /** id → abort handle, present only while that file is on the wire. */
+    const abortsRef = useRef(new Map());
+    /** Ids waiting for a slot, oldest first. */
+    const waitingRef = useRef([]);
+    const activeRef = useRef(0);
+    /** Whether the current batch has produced a success worth invalidating for. */
+    const successRef = useRef(false);
+    const nextIdRef = useRef(0);
+    // `pump` and `runOne` call each other; the ref breaks the cycle without
+    // rebuilding either callback on every render.
+    const runOneRef = useRef(() => undefined);
+    const onUploadedRef = useRef(onUploaded);
+    useEffect(() => {
+        onUploadedRef.current = onUploaded;
+    }, [onUploaded]);
+    const patch = useCallback((id, next) => {
+        setItems((prev) => prev.map((item) => (item.id === id ? { ...item, ...next } : item)));
+    }, []);
+    /** Fills every free slot, then settles the batch if nothing is left. */
+    const pump = useCallback(() => {
+        while (activeRef.current < UPLOAD_CONCURRENCY &&
+            waitingRef.current.length > 0) {
+            const id = waitingRef.current.shift();
+            if (id)
+                runOneRef.current(id);
+        }
+        if (activeRef.current === 0 && waitingRef.current.length === 0) {
+            if (successRef.current) {
+                successRef.current = false;
+                onUploadedRef.current();
+            }
+        }
+    }, []);
+    const runOne = useCallback((id) => {
+        const entry = filesRef.current.get(id);
+        if (!entry)
+            return;
+        const controller = new AbortController();
+        abortsRef.current.set(id, controller);
+        // Claim the slot synchronously — `pump`'s loop checks this counter
+        // again on its very next iteration.
+        activeRef.current += 1;
+        patch(id, { status: UPLOAD_STATUS.Uploading, progress: 0 });
+        void httpMediaGateway
+            .uploadFile(entry.folderId, entry.file, {
+            alt: entry.alt,
+            signal: controller.signal,
+            onProgress: (percent) => patch(id, { progress: percent })
+        })
+            .then(() => {
+            successRef.current = true;
+            patch(id, {
+                status: UPLOAD_STATUS.Done,
+                progress: 100,
+                error: undefined
+            });
+        })
+            .catch((error) => {
+            if (controller.signal.aborted) {
+                patch(id, { status: UPLOAD_STATUS.Cancelled });
+                // Cancelling aborts the *client*. If the server had
+                // already received the whole body it commits anyway, so
+                // the asset exists — it was simply never fetched, and
+                // stayed invisible until a manual reload. Refetch on a
+                // cancel too, so the grid tells the truth. (Deleting the
+                // committed asset isn't possible from here: the response
+                // that carries its id is what the abort threw away.)
+                successRef.current = true;
+                return;
+            }
+            patch(id, {
+                status: UPLOAD_STATUS.Failed,
+                progress: 0,
+                // The API's own sentence ("File exceeds the maximum
+                // upload size.") rather than the transport's status
+                // line, which told the author nothing actionable.
+                error: apiMessage(error) ??
+                    intl.formatMessage(messages.failed)
+            });
+        })
+            .finally(() => {
+            abortsRef.current.delete(id);
+            activeRef.current -= 1;
+            pump();
+        });
+    }, [intl, patch, pump]);
+    useEffect(() => {
+        runOneRef.current = runOne;
+    }, [runOne]);
+    /** Queues files for the folder open **now** and starts uploading. */
+    const enqueue = useCallback((uploads) => {
+        if (uploads.length === 0)
+            return;
+        const queued = uploads.map(({ file, alt }) => {
+            const id = `upload-${nextIdRef.current++}`;
+            filesRef.current.set(id, { file, alt, folderId });
+            waitingRef.current.push(id);
+            return {
+                id,
+                name: file.name,
+                size: file.size,
+                progress: 0,
+                status: UPLOAD_STATUS.Pending
+            };
+        });
+        setItems((prev) => [...prev, ...queued]);
+        pump();
+    }, [folderId, pump]);
+    /** Re-queues one failed or cancelled file. */
+    const retry = useCallback((id) => {
+        if (!filesRef.current.has(id))
+            return;
+        patch(id, {
+            status: UPLOAD_STATUS.Pending,
+            progress: 0,
+            error: undefined
+        });
+        waitingRef.current.push(id);
+        pump();
+    }, [patch, pump]);
+    /** Aborts an in-flight file, or drops one that hasn't started. */
+    const cancel = useCallback((id) => {
+        const controller = abortsRef.current.get(id);
+        if (controller) {
+            // The abort rejects the request; `runOne`'s catch marks it.
+            controller.abort();
+            return;
+        }
+        waitingRef.current = waitingRef.current.filter((queued) => queued !== id);
+        patch(id, { status: UPLOAD_STATUS.Cancelled });
+    }, [patch]);
+    /** Clears every finished row, leaving anything still uploading. */
+    const dismissSettled = useCallback(() => {
+        setItems((prev) => {
+            for (const item of prev) {
+                if (SETTLED.includes(item.status)) {
+                    filesRef.current.delete(item.id);
+                }
+            }
+            return prev.filter((item) => !SETTLED.includes(item.status));
+        });
+    }, []);
+    // Abort anything still in flight if the library unmounts, so a navigation
+    // away doesn't leave orphan requests writing to a dead component.
+    useEffect(() => {
+        const aborts = abortsRef.current;
+        return () => {
+            for (const controller of aborts.values())
+                controller.abort();
+        };
+    }, []);
+    const summary = useMemo(() => {
+        const counted = items.filter((item) => item.status !== UPLOAD_STATUS.Cancelled);
+        const totalBytes = counted.reduce((sum, item) => sum + item.size, 0);
+        const sentBytes = counted.reduce((sum, item) => sum + (item.size * item.progress) / 100, 0);
+        return {
+            inFlight: counted.filter((item) => item.status === UPLOAD_STATUS.Pending ||
+                item.status === UPLOAD_STATUS.Uploading).length,
+            done: counted.filter((item) => item.status === UPLOAD_STATUS.Done)
+                .length,
+            failed: counted.filter((item) => item.status === UPLOAD_STATUS.Failed).length,
+            total: counted.length,
+            // A zero-byte file would make this 0/0; treat an empty batch as done.
+            percent: totalBytes === 0
+                ? 100
+                : Math.round((sentBytes / totalBytes) * 100),
+            active: counted.some((item) => item.status === UPLOAD_STATUS.Pending ||
+                item.status === UPLOAD_STATUS.Uploading)
+        };
+    }, [items]);
+    return { items, summary, enqueue, retry, cancel, dismissSettled };
+}

package/dist/lib/hooks/useWysiwygAssetPicker/index.d.ts

@@ -0,0 +1,23 @@
+import type { AssetPicker } from '@ortha-cms/content-admin';
+/** Stable id of this contribution, so the slot registration reads once. */
+export declare const WYSIWYG_ASSET_PICKER_ID = "media.assetPicker";
+/**
+ * The Media Library, offered to content-admin's rich-text field as an
+ * {@link AssetPicker} — how an image block in a `wysiwyg` field gets a URL from
+ * the library instead of only from a pasted link.
+ *
+ * The editor's port is a **promise**, and the library's picker is a **dialog**,
+ * so this adapts one to the other: `pick()` opens the dialog and parks the
+ * resolver until the author confirms or dismisses. Everything a dialog needs to
+ * exist — the open flag, the mounted element — stays here; the editor sees one
+ * async function and knows nothing about React trees.
+ *
+ * The picked asset's URL is stored **as the image's `src`**, not as an asset id.
+ * That is the whole contract of the field: its value is HTML any consumer can
+ * render, with nothing to resolve. It also means an asset deleted from the
+ * library leaves a dead image in a document — worth stating plainly, because the
+ * alternative (an id the delivery layer resolves) would make the stored value
+ * unusable without this CMS.
+ */
+export declare function useWysiwygAssetPicker(): AssetPicker;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/hooks/useWysiwygAssetPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useWysiwygAssetPicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAqB,MAAM,0BAA0B,CAAC;AAK/E,2EAA2E;AAC3E,eAAO,MAAM,uBAAuB,sBAAsB,CAAC;AAK3D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,qBAAqB,IAAI,WAAW,CA4CnD"}

package/dist/lib/infrastructure/apiMessage/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The server's own explanation of a failure, or `undefined` when there isn't
+ * one.
+ *
+ * `toApiError` puts the **transport's** description in `ApiError.message`
+ * ("Request failed with status code 413") and the parsed **body** in
+ * `details` — so a call site that reads `error.message` shows the user a status
+ * code where the API sent a sentence ("File exceeds the maximum upload size.",
+ * "Invalid file name: a/b.txt"). Everything media renders to a human goes
+ * through here instead, falling back to its own copy when the body carries
+ * nothing usable.
+ *
+ * A `ValidationPipe` rejection puts several strings in `message`; the first is
+ * the one that names the offending field, so that is what is shown.
+ */
+export declare function apiMessage(error: unknown): string | undefined;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/infrastructure/apiMessage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/infrastructure/apiMessage/index.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAY7D"}

package/dist/lib/infrastructure/apiMessage/index.js

@@ -0,0 +1,30 @@
+import { ApiError } from '@orthacms/utils-admin';
+/**
+ * The server's own explanation of a failure, or `undefined` when there isn't
+ * one.
+ *
+ * `toApiError` puts the **transport's** description in `ApiError.message`
+ * ("Request failed with status code 413") and the parsed **body** in
+ * `details` — so a call site that reads `error.message` shows the user a status
+ * code where the API sent a sentence ("File exceeds the maximum upload size.",
+ * "Invalid file name: a/b.txt"). Everything media renders to a human goes
+ * through here instead, falling back to its own copy when the body carries
+ * nothing usable.
+ *
+ * A `ValidationPipe` rejection puts several strings in `message`; the first is
+ * the one that names the offending field, so that is what is shown.
+ */
+export function apiMessage(error) {
+    if (!(error instanceof ApiError))
+        return undefined;
+    const body = error.details;
+    const message = body?.message;
+    if (typeof message === 'string' && message.trim() !== '')
+        return message;
+    if (Array.isArray(message)) {
+        const first = message.find((entry) => typeof entry === 'string' && entry.trim() !== '');
+        if (typeof first === 'string')
+            return first;
+    }
+    return undefined;
+}

package/dist/lib/infrastructure/httpMediaGateway/index.d.ts

@@ -0,0 +1,9 @@
+import type { MediaGateway } from '../mediaGateway';
+/**
+ * The media {@link MediaGateway} over `apiClient`. The one place the plugin
+ * touches HTTP: it maps responses through the ACL, normalizes failures to
+ * `ApiError`, and translates the root sentinel to/from the wire's `null`.
+ * `apiClient` attaches `X-Workspace-Id` automatically inside the workspace shell.
+ */
+export declare const httpMediaGateway: MediaGateway;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/infrastructure/httpMediaGateway/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/infrastructure/httpMediaGateway/index.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAKR,YAAY,EAKf,MAAM,iBAAiB,CAAC;AAQzB;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,YAuK9B,CAAC"}

package/dist/lib/infrastructure/httpMediaGateway/index.js

@@ -0,0 +1,157 @@
+import { apiClient, toApiError } from '@orthacms/utils-admin';
+import { KIND_FILTER_ALL, ROOT_FOLDER_ID } from '../../constants';
+import { toMediaAsset, toMediaFolder } from '../mediaMapper';
+/** Translates the admin root sentinel to `undefined` (backend root = no id). */
+function folderParam(folderId) {
+    return folderId === ROOT_FOLDER_ID ? undefined : folderId;
+}
+/**
+ * The media {@link MediaGateway} over `apiClient`. The one place the plugin
+ * touches HTTP: it maps responses through the ACL, normalizes failures to
+ * `ApiError`, and translates the root sentinel to/from the wire's `null`.
+ * `apiClient` attaches `X-Workspace-Id` automatically inside the workspace shell.
+ */
+export const httpMediaGateway = {
+    async listFolders() {
+        try {
+            const { data } = await apiClient.get('/media/folders');
+            const folderCounts = new Map();
+            for (const folder of data.folders) {
+                folderCounts.set(folder.id, folder.assetCount);
+            }
+            folderCounts.set(ROOT_FOLDER_ID, data.rootAssetCount);
+            return { folders: data.folders.map(toMediaFolder), folderCounts };
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async listAssets({ folderId, search, kind, sort, page, pageSize }) {
+        try {
+            const term = search?.trim();
+            const { data } = await apiClient.get('/media/assets', {
+                // Omitted rather than sent empty: `axios` drops an
+                // `undefined` param, and the server reads a missing `search`
+                // as "no search" while `search=` would be a blank term it
+                // has to decide about. `kind` is omitted on the `all`
+                // sentinel for the same reason — the wire says nothing
+                // rather than saying "every kind".
+                params: {
+                    folderId: folderParam(folderId),
+                    search: term || undefined,
+                    kind: kind === KIND_FILTER_ALL ? undefined : kind,
+                    sort,
+                    page,
+                    pageSize
+                }
+            });
+            return {
+                items: data.items.map(toMediaAsset),
+                total: data.total,
+                page: data.page,
+                pageSize: data.pageSize
+            };
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async createFolder({ name, parentId }) {
+        try {
+            await apiClient.post('/media/folders', {
+                name,
+                parentId: folderParam(parentId)
+            });
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async renameFolder({ id, name }) {
+        try {
+            await apiClient.patch(`/media/folders/${id}`, { name });
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async deleteFolder(id) {
+        try {
+            await apiClient.delete(`/media/folders/${id}`);
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async uploadFile(folderId, file, options) {
+        const target = folderParam(folderId);
+        const form = new FormData();
+        form.append('file', file);
+        if (target)
+            form.append('folderId', target);
+        // Only sent when the author wrote one — an empty part would be a blank
+        // description, which the server normalizes away but which would still
+        // read as "described" to anyone auditing the request.
+        if (options?.alt && options.alt.trim() !== '') {
+            form.append('alt', options.alt);
+        }
+        try {
+            const { data } = await apiClient.post('/media/assets', form, {
+                signal: options?.signal,
+                onUploadProgress: (event) => {
+                    // `total` is absent on some proxies/streams; without it a
+                    // percentage would be a lie, so report nothing and let the
+                    // caller keep showing indeterminate progress.
+                    if (!event.total)
+                        return;
+                    options?.onProgress?.(Math.round((event.loaded / event.total) * 100));
+                }
+            });
+            return toMediaAsset(data);
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async renameAsset({ id, name }) {
+        try {
+            await apiClient.patch(`/media/assets/${id}`, { name });
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async updateAsset({ id, alt }) {
+        try {
+            await apiClient.patch(`/media/assets/${id}`, { alt });
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async moveAssets({ ids, folderId }) {
+        const target = folderId === ROOT_FOLDER_ID ? null : folderId;
+        try {
+            await Promise.all(ids.map((id) => apiClient.patch(`/media/assets/${id}`, { folderId: target })));
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async duplicateAssets(ids) {
+        try {
+            await Promise.all(ids.map((id) => apiClient.post(`/media/assets/${id}/duplicate`)));
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async deleteAssets(ids) {
+        try {
+            await apiClient.delete('/media/assets', { data: { ids } });
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    }
+};

package/dist/lib/infrastructure/httpMediaInsightsGateway/index.d.ts

@@ -0,0 +1,8 @@
+import type { MediaInsightsGateway } from '../mediaInsightsGateway';
+/**
+ * HTTP implementation of {@link MediaInsightsGateway} over the shared
+ * `apiClient` — same-origin, cookie-authed, implicitly workspace-scoped via the
+ * ambient `X-Workspace-Id` header. Failures normalise to `ApiError`.
+ */
+export declare const httpMediaInsightsGateway: MediaInsightsGateway;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/infrastructure/httpMediaInsightsGateway/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/infrastructure/httpMediaInsightsGateway/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAER,oBAAoB,EAGvB,MAAM,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,oBAkCtC,CAAC"}

package/dist/lib/infrastructure/httpMediaInsightsGateway/index.js

@@ -0,0 +1,35 @@
+import { apiClient, toApiError } from '@orthacms/utils-admin';
+/**
+ * HTTP implementation of {@link MediaInsightsGateway} over the shared
+ * `apiClient` — same-origin, cookie-authed, implicitly workspace-scoped via the
+ * ambient `X-Workspace-Id` header. Failures normalise to `ApiError`.
+ */
+export const httpMediaInsightsGateway = {
+    async storage() {
+        try {
+            const { data } = await apiClient.get('/insights/media/storage');
+            return data;
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async uploads(days) {
+        try {
+            const { data } = await apiClient.get('/insights/media/uploads', { params: { days } });
+            return data;
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    },
+    async altCoverage() {
+        try {
+            const { data } = await apiClient.get('/insights/media/alt');
+            return data;
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
+    }
+};