@firecms/media_manager 3.1.0-canary.02232f4

package/src/components/MediaAssetDetails.tsx

@@ -0,0 +1,353 @@
+import React, { useCallback, useState } from "react";
+import { useCreateFormex } from "@firecms/formex";
+import {
+    Button,
+    Typography,
+    cls,
+    CloseIcon,
+    DeleteIcon,
+    DownloadIcon,
+    IconButton,
+    TextField,
+    Chip,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent
+} from "@firecms/ui";
+import { useSnackbarController, useStorageSource, useTranslation } from "@firecms/core";
+import { MediaAsset } from "../types";
+
+export interface MediaAssetDetailsProps {
+    asset: MediaAsset;
+    onClose: () => void;
+    onUpdate: (assetId: string, data: Partial<MediaAsset>) => Promise<void>;
+    onDelete: (assetId: string) => Promise<void>;
+}
+
+/**
+ * Side panel component for viewing and editing media asset details.
+ */
+export function MediaAssetDetails({
+    asset,
+    onClose,
+    onUpdate,
+    onDelete
+}: MediaAssetDetailsProps) {
+    const snackbarController = useSnackbarController();
+    const storageSource = useStorageSource();
+    const [saving, setSaving] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [tagInput, setTagInput] = useState("");
+    const { t } = useTranslation();
+
+    const { values, setFieldValue, dirty } = useCreateFormex<Partial<MediaAsset>>({
+        initialValues: {
+            title: asset.title ?? "",
+            altText: asset.altText ?? "",
+            caption: asset.caption ?? "",
+            tags: asset.tags ?? []
+        }
+    });
+
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        try {
+            await onUpdate(asset.id, values);
+            snackbarController.open({
+                type: "success",
+                message: t("media_asset_updated")
+            });
+        } catch (error) {
+            snackbarController.open({
+                type: "error",
+                message: t("media_error_updating", { message: error instanceof Error ? error.message : String(error) })
+            });
+        } finally {
+            setSaving(false);
+        }
+    }, [asset.id, values, onUpdate, snackbarController]);
+
+    const handleDelete = useCallback(async () => {
+        setDeleting(true);
+        try {
+            await onDelete(asset.id);
+            snackbarController.open({
+                type: "success",
+                message: t("media_asset_deleted")
+            });
+            onClose();
+        } catch (error) {
+            snackbarController.open({
+                type: "error",
+                message: t("media_error_deleting", { message: error instanceof Error ? error.message : String(error) })
+            });
+        } finally {
+            setDeleting(false);
+            setDeleteDialogOpen(false);
+        }
+    }, [asset.id, onDelete, snackbarController, onClose]);
+
+    const handleDownload = useCallback(async () => {
+        try {
+            const downloadConfig = await storageSource.getDownloadURL(asset.storagePath, asset.bucket);
+            if (downloadConfig.url) {
+                window.open(downloadConfig.url, "_blank");
+            }
+        } catch (error) {
+            snackbarController.open({
+                type: "error",
+                message: t("media_error_getting_url")
+            });
+        }
+    }, [asset, storageSource, snackbarController]);
+
+    const handleAddTag = useCallback(() => {
+        const tag = tagInput.trim();
+        if (tag && !values.tags?.includes(tag)) {
+            setFieldValue("tags", [...(values.tags ?? []), tag]);
+            setTagInput("");
+        }
+    }, [tagInput, values.tags, setFieldValue]);
+
+    const handleRemoveTag = useCallback((tagToRemove: string) => {
+        setFieldValue("tags", values.tags?.filter((t: string) => t !== tagToRemove) ?? []);
+    }, [values.tags, setFieldValue]);
+
+    const formatSize = (bytes: number): string => {
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    };
+
+    const formatDate = (date: Date): string => {
+        return new Intl.DateTimeFormat(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "numeric"
+        }).format(date);
+    };
+
+    const isImage = asset.mimeType.startsWith("image/");
+    const isVideo = asset.mimeType.startsWith("video/");
+
+    return (
+        <>
+            <div className={cls(
+                "fixed inset-y-0 right-0 w-full sm:w-96 lg:w-[480px]",
+                "bg-surface-50 dark:bg-surface-900",
+                "border-l border-surface-accent-200 dark:border-surface-accent-700",
+                "shadow-xl z-50",
+                "flex flex-col",
+                "animate-slide-in-right"
+            )}>
+                {/* Header */}
+                <div className="flex items-center justify-between p-4 border-b border-surface-accent-200 dark:border-surface-accent-700">
+                    <Typography variant="subtitle1" className="font-medium truncate flex-1 mr-2">
+                        {asset.title || asset.fileName}
+                    </Typography>
+                    <div className="flex items-center gap-1">
+                        <IconButton onClick={handleDownload}>
+                            <DownloadIcon size="small" />
+                        </IconButton>
+                        <IconButton
+                            onClick={() => setDeleteDialogOpen(true)}
+                            className="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
+                        >
+                            <DeleteIcon size="small" />
+                        </IconButton>
+                        <IconButton onClick={onClose}>
+                            <CloseIcon size="small" />
+                        </IconButton>
+                    </div>
+                </div>
+
+                {/* Preview */}
+                <div className="p-4 bg-surface-accent-100 dark:bg-surface-accent-800 flex items-center justify-center min-h-48 max-h-64">
+                    {isImage && asset.downloadURL ? (
+                        <img
+                            src={asset.downloadURL}
+                            alt={asset.altText || asset.fileName}
+                            className="max-w-full max-h-full object-contain"
+                        />
+                    ) : isVideo && asset.downloadURL ? (
+                        <video
+                            src={asset.downloadURL}
+                            className="max-w-full max-h-full"
+                            controls
+                        />
+                    ) : (
+                        <div className="text-surface-accent-400">
+                            {t("media_preview_not_available")}
+                        </div>
+                    )}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-auto p-4 space-y-4">
+                    {/* Metadata */}
+                    <div className="grid grid-cols-2 gap-3">
+                        {asset.dimensions && (
+                            <div>
+                                <Typography variant="caption" className="text-surface-accent-500">
+                                    {t("media_dimensions")}
+                                </Typography>
+                                <Typography variant="body2">
+                                    {asset.dimensions.width} × {asset.dimensions.height} px
+                                </Typography>
+                            </div>
+                        )}
+                        <div>
+                            <Typography variant="caption" className="text-surface-accent-500">
+                                {t("media_size")}
+                            </Typography>
+                            <Typography variant="body2">
+                                {formatSize(asset.size)}
+                            </Typography>
+                        </div>
+                        <div>
+                            <Typography variant="caption" className="text-surface-accent-500">
+                                {t("media_type")}
+                            </Typography>
+                            <Typography variant="body2">
+                                {asset.mimeType}
+                            </Typography>
+                        </div>
+                        <div>
+                            <Typography variant="caption" className="text-surface-accent-500">
+                                {t("media_created")}
+                            </Typography>
+                            <Typography variant="body2">
+                                {formatDate(asset.createdAt)}
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <hr className="border-surface-accent-200 dark:border-surface-accent-700" />
+
+                    {/* Editable Fields */}
+                    <TextField
+                        label={t("media_file_name")}
+                        value={asset.fileName}
+                        disabled
+                        size="small"
+                    />
+
+                    <TextField
+                        label={t("media_title")}
+                        value={values.title ?? ""}
+                        onChange={(e) => setFieldValue("title", e.target.value)}
+                        size="small"
+                    />
+
+                    <div>
+                        <TextField
+                            label={t("media_alt_text")}
+                            value={values.altText ?? ""}
+                            onChange={(e) => setFieldValue("altText", e.target.value)}
+                            size="small"
+                        />
+                        <Typography variant="caption" className="text-surface-accent-500 mt-1">
+                            {t("media_recommended_seo")}
+                        </Typography>
+                    </div>
+
+                    <TextField
+                        label={t("media_caption")}
+                        value={values.caption ?? ""}
+                        onChange={(e) => setFieldValue("caption", e.target.value)}
+                        size="small"
+                        multiline
+                    />
+
+                    {/* Tags */}
+                    <div>
+                        <Typography variant="caption" className="text-surface-accent-500 mb-1 block">
+                            {t("media_tags")}
+                        </Typography>
+                        <div className="flex flex-wrap gap-1 mb-2">
+                            {values.tags?.map((tag: string) => (
+                                <Chip
+                                    key={tag}
+                                    size="small"
+                                    colorScheme="blueLighter"
+                                    onClick={() => handleRemoveTag(tag)}
+                                >
+                                    {tag} ×
+                                </Chip>
+                            ))}
+                        </div>
+                        <div className="flex gap-2">
+                            <TextField
+                                placeholder={t("media_add_tag")}
+                                value={tagInput}
+                                onChange={(e) => setTagInput(e.target.value)}
+                                size="small"
+                                className="flex-1"
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        handleAddTag();
+                                    }
+                                }}
+                            />
+                            <Button
+                                variant="text"
+                                size="small"
+                                onClick={handleAddTag}
+                                disabled={!tagInput.trim()}
+                            >
+                                {t("media_add")}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="flex-shrink-0 p-4 border-t border-surface-accent-200 dark:border-surface-accent-700">
+                    <Button
+                        variant="filled"
+                        onClick={handleSave}
+                        disabled={!dirty || saving}
+                        className="w-full"
+                    >
+                        {saving ? <CircularProgress size="small" /> : t("media_save_changes")}
+                    </Button>
+                </div>
+            </div>
+
+            {/* Delete Confirmation Dialog */}
+            <Dialog
+                open={deleteDialogOpen}
+                onOpenChange={setDeleteDialogOpen}
+            >
+                <DialogContent>
+                    <Typography variant="subtitle1" className="font-medium mb-2">
+                        {t("media_delete_asset")}
+                    </Typography>
+                    <Typography className="text-surface-accent-600 dark:text-surface-accent-400">
+                        {t("media_delete_confirmation", { name: asset.title || asset.fileName })}
+                    </Typography>
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        variant="text"
+                        onClick={() => setDeleteDialogOpen(false)}
+                        disabled={deleting}
+                    >
+                        {t("cancel")}
+                    </Button>
+                    <Button
+                        variant="filled"
+                        color="error"
+                        onClick={handleDelete}
+                        disabled={deleting}
+                    >
+                        {deleting ? <CircularProgress size="small" /> : t("delete")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/components/MediaLibraryCard.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import {
+    Card,
+    Typography,
+    cls,
+    ImageIcon
+} from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
+
+export interface MediaLibraryCardProps {
+    group?: string;
+    context?: unknown;
+}
+
+/**
+ * Card component displayed on the home page that links to the Media Library.
+ */
+export function MediaLibraryCard({ group }: MediaLibraryCardProps) {
+    const { t } = useTranslation();
+
+    // Only render in the "Media" group
+    if (group !== "Media") return null;
+
+    return (
+        <Link to="/media" className="no-underline">
+            <Card
+                className={cls(
+                    "p-4 cursor-pointer",
+                    "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800",
+                    "transition-colors duration-200",
+                    "flex flex-col gap-2"
+                )}
+            >
+                <div className="flex items-center gap-3">
+                    <div className={cls(
+                        "w-10 h-10 rounded-lg",
+                        "bg-primary/10 dark:bg-primary/20",
+                        "flex items-center justify-center"
+                    )}>
+                        <ImageIcon className="text-primary" size="medium" />
+                    </div>
+                    <div className="flex-1">
+                        <Typography variant="subtitle2" className="font-medium">
+                            {t("media_library")}
+                        </Typography>
+                        <Typography
+                            variant="caption"
+                            className="text-surface-accent-600 dark:text-surface-accent-400"
+                        >
+                            {t("media_library_description")}
+                        </Typography>
+                    </div>
+                </div>
+            </Card>
+        </Link>
+    );
+}

package/src/components/MediaLibraryView.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useRef, useState } from "react";
+import {
+    Button,
+    Container,
+    SearchBar,
+    Typography,
+    cls,
+    AddIcon,
+    CircularProgress,
+    RefreshIcon,
+    IconButton,
+    Tooltip,
+    AppsIcon,
+    Icon
+} from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
+import { useMediaManager } from "../MediaManagerProvider";
+import { MediaAssetCard } from "./MediaAssetCard";
+import { MediaAssetDetails } from "./MediaAssetDetails";
+import { MediaUploadDialog } from "./MediaUploadDialog";
+
+export interface MediaLibraryViewProps {
+    maxFileSize?: number;
+    acceptedMimeTypes?: string[];
+}
+
+/**
+ * Main view component for the Media Library.
+ * Displays a grid of assets with search, upload, and management capabilities.
+ */
+export function MediaLibraryView({
+                                     maxFileSize,
+                                     acceptedMimeTypes
+                                 }: MediaLibraryViewProps) {
+    const controller = useMediaManager();
+    const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+    const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const { t } = useTranslation();
+
+    const handleSearch = useCallback((query?: string) => {
+        controller.searchAssets(query ?? "");
+    }, [controller]);
+
+    const handleUploadClick = useCallback(() => {
+        setUploadDialogOpen(true);
+    }, []);
+
+    const handleFileSelect = useCallback(async (files: File[]) => {
+        for (const file of files) {
+            await controller.uploadFile(file);
+        }
+        setUploadDialogOpen(false);
+    }, [controller]);
+
+    const handleRefresh = useCallback(() => {
+        controller.refreshAssets();
+    }, [controller]);
+
+    return (
+        <div className="h-full flex flex-col overflow-hidden">
+            {/* Header */}
+            <div
+                className="flex-shrink-0 border-b border-surface-accent-200 dark:border-surface-accent-700 bg-surface-50 dark:bg-surface-900">
+                <Container maxWidth="6xl" className="py-4">
+                    <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <Typography variant="h5" className="font-semibold">
+                                {t("media_library")}
+                            </Typography>
+                            {controller.totalCount !== undefined && (
+                                <Typography
+                                    variant="caption"
+                                    className="bg-surface-accent-100 dark:bg-surface-accent-800 px-2 py-0.5 rounded-full"
+                                >
+                                    {t("media_assets_count", { count: controller.totalCount.toString() })}
+                                </Typography>
+                            )}
+                        </div>
+
+                        <div className="flex items-center gap-2 w-full sm:w-auto">
+                            <SearchBar
+                                onTextSearch={handleSearch}
+                                placeholder={t("media_search_assets")}
+                                className="flex-1 sm:w-64"
+                            />
+
+                            <div
+                                className="flex items-center gap-1 border-l border-surface-accent-200 dark:border-surface-accent-700 pl-2 ml-2">
+                                <Tooltip title={t("media_grid_view")}>
+                                    <IconButton
+                                        onClick={() => setViewMode("grid")}
+                                        className={cls(
+                                            viewMode === "grid" && "bg-surface-accent-100 dark:bg-surface-accent-800"
+                                        )}
+                                    >
+                                        <AppsIcon size="small"/>
+                                    </IconButton>
+                                </Tooltip>
+                                <Tooltip title={t("media_list_view")}>
+                                    <IconButton
+                                        onClick={() => setViewMode("list")}
+                                        className={cls(
+                                            viewMode === "list" && "bg-surface-accent-100 dark:bg-surface-accent-800"
+                                        )}
+                                    >
+                                        <Icon iconKey="list" size="small"/>
+                                    </IconButton>
+                                </Tooltip>
+                            </div>
+
+                            <Tooltip title={t("media_refresh")}>
+                                <IconButton onClick={handleRefresh} disabled={controller.loading}>
+                                    <RefreshIcon size="small"/>
+                                </IconButton>
+                            </Tooltip>
+
+                            <Button
+                                variant="filled"
+                                onClick={handleUploadClick}
+                            >
+                                <AddIcon size="small"/>
+                                {t("media_upload")}
+                            </Button>
+                        </div>
+                    </div>
+                </Container>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-auto">
+                <Container maxWidth="6xl" className="py-6">
+                    {controller.loading && controller.assets.length === 0 ? (
+                        <div className="flex items-center justify-center h-64">
+                            <CircularProgress/>
+                        </div>
+                    ) : controller.error ? (
+                        <div className="flex flex-col items-center justify-center h-64 gap-4">
+                            <Typography className="text-red-500">
+                                {t("media_error_loading", { message: controller.error.message })}
+                            </Typography>
+                            <Button onClick={handleRefresh}>
+                                {t("media_try_again")}
+                            </Button>
+                        </div>
+                    ) : controller.assets.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-64 gap-4">
+                            <Typography className="text-surface-accent-500">
+                                {t("media_no_assets")}
+                            </Typography>
+                            <Button onClick={handleUploadClick}>
+                                <AddIcon size="small"/>
+                                {t("media_upload_first_file")}
+                            </Button>
+                        </div>
+                    ) : (
+                        <div className={cls(
+                            viewMode === "grid"
+                                ? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"
+                                : "flex flex-col gap-2"
+                        )}>
+                            {controller.assets.map(asset => (
+                                <MediaAssetCard
+                                    key={asset.id}
+                                    asset={asset}
+                                    viewMode={viewMode}
+                                    onClick={() => controller.selectAsset(asset)}
+                                    selected={controller.selectedAsset?.id === asset.id}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </Container>
+            </div>
+
+            {/* Details Panel */}
+            {controller.selectedAsset && (
+                <MediaAssetDetails
+                    asset={controller.selectedAsset}
+                    onClose={() => controller.selectAsset(undefined)}
+                    onUpdate={controller.updateAsset}
+                    onDelete={controller.deleteAsset}
+                />
+            )}
+
+            {/* Upload Dialog */}
+            <MediaUploadDialog
+                open={uploadDialogOpen}
+                onClose={() => setUploadDialogOpen(false)}
+                onUpload={handleFileSelect}
+                maxFileSize={maxFileSize}
+                acceptedMimeTypes={acceptedMimeTypes}
+            />
+        </div>
+    );
+}