@riducms/admin 0.2.2 → 0.3.0

package/src/features/uploads/upload-control.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+	import { Dialog } from "bits-ui";
+	import { Button, Input, buttonVariants } from "@riducms/ui";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { isRecord, type SchemaUploadSettings } from "@riducms/protocol";
+	import XIcon from "~icons/lucide/x";
+	import CopyIcon from "~icons/lucide/copy";
+	import FileIcon from "~icons/lucide/file";
+	import type { UploadDraft } from "@admin/features/uploads/upload-draft.svelte";
+	import RenditionPreview from "@admin/features/uploads/rendition-preview.svelte";
+	import UploadThumbnail from "@admin/features/uploads/upload-thumbnail.svelte";
+	import "@admin/features/uploads/upload.scss";
+
+	let {
+		draft,
+		settings,
+		editable = false,
+	}: { draft: UploadDraft; settings: SchemaUploadSettings; editable?: boolean } = $props();
+	const i18n = getAdminI18n();
+	let chooser: HTMLInputElement;
+	let urlMode = $state(false);
+	let remoteURL = $state("");
+	let dragging = $state(false);
+	let dialog = $state<"edit" | "sizes">("edit");
+	let dialogOpen = $state(false);
+	let copied = $state(false);
+	const sizes = $derived(
+		isRecord(draft.document?.sizes)
+			? Object.entries(draft.document.sizes).filter(
+					(entry): entry is [string, Record<string, unknown>] => isRecord(entry[1])
+				)
+			: []
+	);
+	const renditions = $derived<[string, Record<string, unknown>][]>(
+		draft.document ? [[i18n.t("uploads:original"), draft.document], ...sizes] : sizes
+	);
+	const bytes = $derived(draft.file?.size ?? Number(draft.document?.filesize ?? 0));
+	const dimensions = $derived(
+		draft.source
+			? `${Math.round(((draft.currentImage.cropWidth || 100) / 100) * draft.source.width)} × ${Math.round(((draft.currentImage.cropHeight || 100) / 100) * draft.source.height)}`
+			: `${draft.document?.width} × ${draft.document?.height}`
+	);
+
+	$effect(() => {
+		const editingImage = draft.editingImage;
+		if (!editable) {
+			dragging = false;
+			urlMode = false;
+			remoteURL = "";
+			if (editingImage || draft.busy) draft.endImageEdit();
+			if (dialog === "edit") dialogOpen = false;
+		}
+		if (dialog === "edit" && dialogOpen && !editingImage) dialogOpen = false;
+	});
+	$effect(() => () => draft.endImageEdit());
+
+	function closeImageEditor() {
+		dialogOpen = false;
+		draft.endImageEdit();
+	}
+
+	async function importURL() {
+		if (!editable || draft.busy) return;
+		await draft.fromURL(remoteURL, settings);
+		if (draft.file) {
+			urlMode = false;
+			remoteURL = "";
+		}
+	}
+
+	function choose(event: Event) {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		const file = event.currentTarget.files?.[0];
+		if (editable && !draft.busy && file) draft.select(file, settings);
+		event.currentTarget.value = "";
+	}
+
+	function drop(event: DragEvent) {
+		event.preventDefault();
+		dragging = false;
+		const file = event.dataTransfer?.files[0];
+		if (editable && !draft.busy && file) draft.select(file, settings);
+	}
+
+	async function copyURL() {
+		try {
+			await navigator.clipboard.writeText(
+				new URL(String(draft.document?.url ?? ""), window.location.origin).href
+			);
+			copied = true;
+		} catch {
+			copied = false;
+		}
+	}
+</script>
+
+<!-- File drops are an alternative to the keyboard-accessible chooser below. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	role="region"
+	aria-label={i18n.t("uploads:assetPreview")}
+	class={["ridu-upload", { "ridu-upload--dragging": dragging }]}
+	ondragover={(event) => {
+		event.preventDefault();
+		if (editable) dragging = true;
+	}}
+	ondragleave={(event) => {
+		if (!event.currentTarget.contains(event.relatedTarget as Node | null)) dragging = false;
+	}}
+	ondrop={drop}
+>
+	<input
+		bind:this={chooser}
+		hidden
+		type="file"
+		accept={settings.mimeTypes.join(",")}
+		aria-label={i18n.t("uploads:chooseFile")}
+		tabindex="-1"
+		disabled={!editable || draft.busy}
+		onchange={choose}
+	/>
+
+	{#if draft.present}
+		<div class="ridu-upload-thumbnail">
+			{#if draft.mimeType.startsWith("image/")}
+				<UploadThumbnail {draft} />
+			{:else}
+				<FileIcon />
+			{/if}
+		</div>
+		<div class="ridu-upload-details">
+			<div class="ridu-upload-name">
+				{#if draft.file}
+					<Input
+						aria-label={i18n.t("uploads:filename")}
+						disabled={!editable}
+						bind:value={() => draft.filename, draft.setFilename}
+					/>
+				{:else}
+					<a href={String(draft.document?.url ?? "")} target="_blank" rel="noreferrer">
+						{draft.filename}
+					</a>
+					<Button
+						variant="ghost"
+						size="icon-xs"
+						aria-label={i18n.t(copied ? "general:copied" : "general:copy")}
+						onclick={copyURL}
+					>
+						<CopyIcon />
+					</Button>
+				{/if}
+			</div>
+			<p>
+				{i18n.formatNumber(bytes / 1024, {
+					maximumFractionDigits: 0,
+				})}KB
+				{#if draft.mimeType.startsWith("image/")}
+					· {dimensions}
+				{/if}
+				· {draft.mimeType}
+			</p>
+			<div class="ridu-upload-actions">
+				{#if !draft.file && sizes.length}
+					<Button
+						size="xs"
+						variant="secondary"
+						onclick={() => {
+							dialog = "sizes";
+							dialogOpen = true;
+						}}
+					>
+						{i18n.t("uploads:previewSizes")}
+					</Button>
+				{/if}
+				{#if editable && draft.editableImage}
+					<Button
+						size="xs"
+						variant="secondary"
+						disabled={draft.busy}
+						onclick={() => {
+							dialog = "edit";
+							dialogOpen = true;
+							draft.beginImageEdit();
+						}}
+					>
+						{i18n.t("uploads:editImage")}
+					</Button>
+				{/if}
+			</div>
+		</div>
+		{#if editable}
+			<Button
+				class="ridu-upload-remove"
+				size="icon-xs"
+				variant="ghost"
+				aria-label={i18n.t("uploads:removeFilename", { filename: draft.filename })}
+				disabled={draft.busy}
+				onclick={draft.remove}
+			>
+				<XIcon />
+			</Button>
+		{/if}
+	{:else if urlMode}
+		<div class="ridu-upload-url">
+			<Input
+				type="url"
+				aria-label={i18n.t("uploads:pasteURL")}
+				placeholder="https://"
+				bind:value={remoteURL}
+				disabled={!editable || draft.busy}
+				onkeydown={(event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						importURL();
+					}
+				}}
+			/>
+			<Button
+				size="sm"
+				variant="secondary"
+				disabled={!editable || draft.busy || !remoteURL.trim()}
+				onclick={importURL}
+			>
+				{i18n.t(draft.busy ? "uploads:importing" : "uploads:addFile")}
+			</Button>
+			<Button
+				size="icon-sm"
+				variant="ghost"
+				aria-label={i18n.t("general:cancel")}
+				onclick={() => {
+					urlMode = false;
+					draft.cancelPending();
+				}}
+			>
+				<XIcon />
+			</Button>
+		</div>
+	{:else}
+		<div class="ridu-upload-choose">
+			<Button
+				size="sm"
+				variant="secondary"
+				disabled={!editable || draft.busy}
+				onclick={() => chooser.click()}
+			>
+				{i18n.t("uploads:chooseFile")}
+			</Button>
+			<Button
+				size="sm"
+				variant="secondary"
+				disabled={!editable || draft.busy}
+				onclick={() => {
+					urlMode = true;
+				}}
+			>
+				{i18n.t("uploads:pasteURL")}
+			</Button>
+			<span>{i18n.t("uploads:dropFile")}</span>
+		</div>
+	{/if}
+</div>
+{#if draft.error}
+	<p role="alert" class="ridu-upload-error">{draft.error}</p>
+{/if}
+
+<Dialog.Root
+	open={dialogOpen}
+	onOpenChange={(open) => {
+		if (!open) {
+			dialogOpen = false;
+			if (dialog === "edit") draft.endImageEdit();
+			else draft.cancelPending();
+		}
+	}}
+>
+	<Dialog.Portal>
+		<Dialog.Overlay class="ridu-upload-drawer-overlay" />
+		<Dialog.Content class="ridu-upload-drawer">
+			<header class="ridu-upload-drawer-header">
+				<Dialog.Title level={2} class="ridu-upload-drawer-title">
+					{i18n.t(dialog === "edit" ? "uploads:editingFilename" : "uploads:sizesFor", {
+						filename: draft.filename,
+					})}
+				</Dialog.Title>
+				{#if dialog === "sizes"}
+					<Dialog.Close type="button" class={buttonVariants({ variant: "outline", size: "sm" })}>
+						{i18n.t("general:close")}
+					</Dialog.Close>
+				{/if}
+			</header>
+			<Dialog.Description class="ridu-upload-description">
+				{i18n.t(
+					dialog === "edit" ? "uploads:imageEditDescription" : "uploads:previewGeneratedSizes"
+				)}
+			</Dialog.Description>
+
+			{#if dialog === "edit"}
+				{#if draft.source}
+					{#await import("@admin/features/uploads/image-editor.svelte")}
+						<p class="ridu-upload-drawer-message">{i18n.t("uploads:loadingAssetPreview")}</p>
+					{:then { default: Editor }}
+						<Editor
+							source={draft.source}
+							initial={draft.currentImage}
+							oncancel={closeImageEditor}
+							onapply={(edit) => {
+								if (!editable) {
+									closeImageEditor();
+									return;
+								}
+								draft.applyImage(edit);
+								closeImageEditor();
+							}}
+						/>
+					{:catch}
+						<div class="ridu-upload-drawer-message">
+							<p role="alert">{i18n.t("uploads:previewLoadFailed")}</p>
+							<Dialog.Close class={buttonVariants({ variant: "outline" })}>
+								{i18n.t("general:cancel")}
+							</Dialog.Close>
+						</div>
+					{/await}
+				{:else}
+					<div class="ridu-upload-drawer-message">
+						<p role={draft.error ? "alert" : "status"}>
+							{draft.error ?? i18n.t("uploads:loadingAssetPreview")}
+						</p>
+						<Button variant="outline" onclick={closeImageEditor}>
+							{i18n.t("general:cancel")}
+						</Button>
+					</div>
+				{/if}
+			{:else if dialog === "sizes"}
+				{#if draft.document}
+					<RenditionPreview {renditions} document={draft.document} />
+				{/if}
+			{/if}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

package/src/features/uploads/upload-document-contracts.ts

@@ -0,0 +1,30 @@
+import type { UploadImageEdit } from "@riducms/protocol";
+export type { UploadImageEdit } from "@riducms/protocol";
+
+export const uploadImageEditFields = [
+	"focalX",
+	"focalY",
+	"cropX",
+	"cropY",
+	"cropWidth",
+	"cropHeight",
+] as const satisfies readonly (keyof UploadImageEdit)[];
+
+export const uploadMetadataFields = [
+	"filename",
+	"mimeType",
+	"filesize",
+	"url",
+	"objectKey",
+	"width",
+	"height",
+	"sizes",
+	"source",
+	...uploadImageEditFields,
+] as const;
+
+const uploadMetadataFieldSet = new Set<string>(uploadMetadataFields);
+
+export function isUploadMetadataField(name: string) {
+	return uploadMetadataFieldSet.has(name);
+}

package/src/features/uploads/upload-draft.svelte.ts

@@ -0,0 +1,294 @@
+import type { AdminI18n } from "@riducms/plugin";
+import type { AdminClient, AdminDocument } from "@admin/core/api/admin-client";
+import { type SchemaUploadSettings, type UploadImageEdit } from "@riducms/protocol";
+
+export interface UploadSource {
+	url: string;
+	width: number;
+	height: number;
+}
+
+export const originalImageEdit = (): UploadImageEdit => ({
+	focalX: 50,
+	focalY: 50,
+	cropX: 0,
+	cropY: 0,
+	cropWidth: 0,
+	cropHeight: 0,
+});
+
+export function documentImageEdit(document?: AdminDocument): UploadImageEdit {
+	const edit = originalImageEdit();
+	for (const field of Object.keys(edit) as (keyof UploadImageEdit)[]) {
+		const value = document?.[field];
+		if (typeof value === "number") edit[field] = value;
+	}
+	return edit;
+}
+
+/** The document owns this draft; an editor dialog works on a separate copy. */
+export class UploadDraft {
+	#document = $state.raw<AdminDocument>();
+	#file = $state.raw<File>();
+	#filename = $state("");
+	#image = $state.raw<UploadImageEdit>();
+	#source = $state.raw<UploadSource>();
+	#removed = $state(false);
+	#busy = $state(false);
+	#editingImage = $state(false);
+	#error = $state<string>();
+	#request?: AbortController;
+	#generation = 0;
+	#revision = 0;
+
+	constructor(
+		private readonly client: AdminClient,
+		private readonly collection: () => string,
+		private readonly i18n: AdminI18n
+	) {}
+
+	get revision() {
+		return this.#revision;
+	}
+
+	get document() {
+		return this.#document;
+	}
+
+	get file() {
+		return this.#file;
+	}
+
+	get filename() {
+		return this.#filename;
+	}
+
+	get image() {
+		return this.#image;
+	}
+
+	get source() {
+		return this.#source;
+	}
+
+	get busy() {
+		return this.#busy;
+	}
+
+	get editingImage() {
+		return this.#editingImage;
+	}
+
+	get error() {
+		return this.#error;
+	}
+
+	get removed() {
+		return this.#removed;
+	}
+
+	get present() {
+		return !this.#removed && (this.#file !== undefined || this.#document !== undefined);
+	}
+
+	get mimeType() {
+		return this.#file?.type ?? String(this.#document?.mimeType ?? "");
+	}
+
+	get editableImage() {
+		return this.mimeType === "image/jpeg" || this.mimeType === "image/png";
+	}
+
+	get previewURL() {
+		return this.#source?.url ?? String(this.#document?.url ?? "");
+	}
+
+	get currentImage() {
+		return this.#image ?? documentImageEdit(this.#file ? undefined : this.#document);
+	}
+
+	get dirty() {
+		return (
+			this.#file !== undefined ||
+			this.#removed ||
+			this.#image !== undefined ||
+			this.#filename !== String(this.#document?.filename ?? "")
+		);
+	}
+
+	setFilename = (name: string) => {
+		this.#revision++;
+		this.#filename = name;
+	};
+
+	reset = (document?: AdminDocument) => {
+		this.#revision++;
+		this.dispose();
+		this.#document = document;
+		this.#file = undefined;
+		this.#filename = String(document?.filename ?? "");
+		this.#image = undefined;
+		this.#removed = false;
+		this.#busy = false;
+		this.#error = undefined;
+	};
+
+	remove = () => {
+		this.#revision++;
+		this.dispose();
+		this.#file = undefined;
+		this.#image = undefined;
+		this.#filename = "";
+		this.#removed = this.#document !== undefined;
+		this.#error = undefined;
+		this.#busy = false;
+	};
+
+	select = async (file: File, settings: SchemaUploadSettings) => {
+		this.cancelPending();
+		const generation = this.#generation;
+		this.#busy = true;
+		this.#error = undefined;
+		try {
+			if (file.size > settings.maxFileSize) throw new Error(this.i18n.t("uploads:fileTooLarge"));
+			if (
+				!settings.mimeTypes.some(
+					(type) =>
+						type === file.type || (type.endsWith("/*") && file.type.startsWith(type.slice(0, -1)))
+				)
+			) {
+				throw new Error(this.i18n.t("uploads:fileTypeDenied"));
+			}
+			const url = URL.createObjectURL(file);
+			let source: UploadSource;
+			try {
+				source = await imageSource(url, file.type);
+			} catch (cause) {
+				URL.revokeObjectURL(url);
+				throw cause;
+			}
+			if (generation !== this.#generation) {
+				URL.revokeObjectURL(url);
+				return;
+			}
+			if (this.#source) URL.revokeObjectURL(this.#source.url);
+			this.#revision++;
+			this.#source = source;
+			this.#file = file;
+			this.#filename = file.name;
+			this.#image = undefined;
+			this.#removed = false;
+		} catch (cause) {
+			if (generation === this.#generation)
+				this.#error =
+					cause instanceof Error ? cause.message : this.i18n.t("uploads:fileOpenFailed");
+		} finally {
+			if (generation === this.#generation) this.#busy = false;
+		}
+	};
+
+	fromURL = async (url: string, settings: SchemaUploadSettings) => {
+		this.#request?.abort();
+		const request = new AbortController();
+		this.#request = request;
+		this.#busy = true;
+		this.#error = undefined;
+		try {
+			const file = await this.client.previewUploadFromURL(this.collection(), url, {
+				id: this.#document?.id,
+				signal: request.signal,
+			});
+			if (!request.signal.aborted)
+				await this.select(new File([file.blob], file.filename, { type: file.blob.type }), settings);
+		} catch (cause) {
+			if (!request.signal.aborted)
+				this.#error =
+					cause instanceof Error ? cause.message : this.i18n.t("uploads:fileDownloadFailed");
+		} finally {
+			if (this.#request === request) {
+				this.#request = undefined;
+				this.#busy = false;
+			}
+		}
+	};
+
+	loadSource = async () => {
+		if (this.#source || !this.#document || !this.editableImage) return;
+		const request = new AbortController();
+		this.#request?.abort();
+		this.#request = request;
+		this.#busy = true;
+		this.#error = undefined;
+		try {
+			const blob = await this.client.readUploadSource(this.collection(), this.#document.id, {
+				signal: request.signal,
+			});
+			if (request.signal.aborted) return;
+			const url = URL.createObjectURL(blob);
+			let source: UploadSource;
+			try {
+				source = await imageSource(url, blob.type);
+			} catch (cause) {
+				URL.revokeObjectURL(url);
+				throw cause;
+			}
+			if (request.signal.aborted) {
+				URL.revokeObjectURL(url);
+				return;
+			}
+			this.#source = source;
+		} catch (cause) {
+			if (!request.signal.aborted)
+				this.#error =
+					cause instanceof Error ? cause.message : this.i18n.t("uploads:previewLoadFailed");
+		} finally {
+			if (this.#request === request) {
+				this.#request = undefined;
+				this.#busy = false;
+			}
+		}
+	};
+
+	beginImageEdit = () => {
+		if (!this.editableImage) return;
+		this.#editingImage = true;
+		return this.loadSource();
+	};
+
+	endImageEdit = () => {
+		this.#editingImage = false;
+		this.cancelPending();
+	};
+
+	applyImage = (edit: UploadImageEdit) => {
+		this.#revision++;
+		const original = documentImageEdit(this.#file ? undefined : this.#document);
+		this.#image = Object.keys(original).every(
+			(key) => original[key as keyof UploadImageEdit] === edit[key as keyof UploadImageEdit]
+		)
+			? undefined
+			: { ...edit };
+	};
+
+	cancelPending = () => {
+		this.#generation++;
+		this.#request?.abort();
+		this.#request = undefined;
+		this.#busy = false;
+	};
+
+	dispose = () => {
+		this.#editingImage = false;
+		this.cancelPending();
+		if (this.#source) URL.revokeObjectURL(this.#source.url);
+		this.#source = undefined;
+	};
+}
+
+async function imageSource(url: string, mimeType: string): Promise<UploadSource> {
+	if (!mimeType.startsWith("image/")) return { url, width: 0, height: 0 };
+	const image = new Image();
+	image.src = url;
+	await image.decode();
+	return { url, width: image.naturalWidth, height: image.naturalHeight };
+}

package/src/features/uploads/upload-metadata-fields.scss

@@ -0,0 +1,32 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-upload-metadata {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 20px;
+	}
+
+	.ridu-upload-metadata__field {
+		display: grid;
+		align-content: start;
+		gap: 5px;
+		min-inline-size: 0;
+		color: var(--ink-label);
+		font-size: var(--font-size-body);
+	}
+
+	.ridu-upload-metadata__select {
+		inline-size: 100%;
+	}
+
+	.ridu-upload-metadata__placeholder {
+		color: var(--ink-placeholder);
+	}
+
+	@media (max-width: ui.$small) {
+		.ridu-upload-metadata {
+			grid-template-columns: minmax(0, 1fr);
+		}
+	}
+}