create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/cms/media/actions.ts

@@ -12,130 +12,12 @@ type Media = Database['public']['Tables']['media']['Row'];
 
 // --- recordMediaUpload and updateMediaItem functions to be updated similarly ---
 
-// Define the structure for a single variant, mirroring what /api/process-image returns
-interface ImageVariant {
-  objectKey: string;
-  url: string;
-  width: number;
-  height: number;
-  fileType: string;
-  sizeBytes: number;
-  variantLabel: string;
-}
-
-export async function recordMediaUpload(payload: {
-  fileName: string; // Original filename, can still be useful
-  // objectKey: string; // This might now be derived from the primary variant
-  // fileType: string; // This will come from the primary variant
-  // sizeBytes: number; // This will come from the primary variant
-  description?: string;
-  // width?: number; // This will come from the primary variant
-  // height?: number; // This will come from the primary variant
-  r2OriginalKey: string; // Key of the initially uploaded file in R2
-  r2Variants: ImageVariant[]; // Array of processed variants
-  originalImageDetails: ImageVariant; // Details of the original uploaded image from process-image
-  blurDataUrl?: string; // Optional, if generated and passed from client
-}, returnJustData?: boolean): Promise<{ success: true; data: Media } | { error: string } | void>  {
-  const supabase = createClient();
-  const { data: { user }, error: authError } = await supabase.auth.getUser();
-
-  if (authError || !user) {
-    if (returnJustData) return { error: "User not authenticated for media record." };
-    return encodedRedirect("error", "/cms/media", "User not authenticated for media record.");
-  }
-
-  const { data: profile } = await supabase
-    .from("profiles")
-    .select("role")
-    .eq("id", user.id)
-    .single();
-  if (!profile || !["ADMIN", "WRITER"].includes(profile.role)) {
-    if (returnJustData) return { error: "Forbidden: Insufficient permissions to record media." };
-    return encodedRedirect("error", "/cms/media", "Forbidden: Insufficient permissions to record media.");
-  }
-
-  // Determine the primary variant to use for the main table columns
-  // This logic can be adjusted. Prioritize 'original_avif', then 'xlarge_avif', then the first variant.
-  let primaryVariant =
-    payload.r2Variants.find(v => v.variantLabel === 'original_avif') ||
-    payload.r2Variants.find(v => v.variantLabel === 'xlarge_avif') ||
-    payload.r2Variants[0] || // Fallback to the first variant if specific ones aren't found
-    payload.originalImageDetails; // Fallback to original uploaded details if no variants
-
-  if (!primaryVariant) {
-    // This case should ideally not happen if originalImageDetails is always present
-    // but as a safeguard:
-    primaryVariant = payload.originalImageDetails || {
-        objectKey: payload.r2OriginalKey,
-        url: `YOUR_R2_PUBLIC_BASE_URL/${payload.r2OriginalKey}`, // Construct URL if needed
-        width: 0, // Or fetch if necessary, though client sends initial dimensions
-        height: 0,
-        fileType: 'application/octet-stream', // A generic fallback
-        sizeBytes: 0,
-        variantLabel: 'fallback_original'
-    };
-  }
-  
-  // Construct the full list of variants to store, including the original uploaded file details
-  const allVariantsToStore = [
-    ...(payload.originalImageDetails && payload.originalImageDetails.objectKey !== primaryVariant.objectKey ? [payload.originalImageDetails] : []),
-    ...payload.r2Variants,
-  ].filter((variant, index, self) =>
-    index === self.findIndex((v) => v.objectKey === variant.objectKey)
-  ); // Ensure unique variants by objectKey
-
-  // If no description provided for images, derive one from the filename (un-slug)
-  const deriveAltFromFilename = (name: string) => {
-    const lastDot = name.lastIndexOf('.');
-    const base = lastDot > 0 ? name.substring(0, lastDot) : name;
-    const spaced = base.replace(/[-+_\\]+/g, ' ').replace(/\s+/g, ' ').trim();
-    return spaced.replace(/\b\w+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1));
-  };
-
-  const computedDescription = payload.description
-    ?? ((primaryVariant.fileType?.startsWith('image/') || payload.originalImageDetails?.fileType?.startsWith('image/'))
-      ? deriveAltFromFilename(payload.fileName)
-      : null);
-
-  const mediaData: Omit<Media, 'id' | 'created_at' | 'updated_at'> & { uploader_id: string } = {
-    uploader_id: user.id,
-    file_name: payload.fileName, // Keep original file name for reference
-    object_key: primaryVariant.objectKey, // Key of the primary display version
-    file_path: primaryVariant.objectKey,
-    folder: (() => {
-      const match = primaryVariant.objectKey.match(/^(.*\/)?.*$/);
-      const path = match && match[1] ? match[1] : null;
-      return path;
-    })(),
-    // file_url is removed as it's not in the Media type; URLs are in variants
-    file_type: primaryVariant.fileType,
-    size_bytes: primaryVariant.sizeBytes,
-    description: computedDescription,
-    width: primaryVariant.width,
-    height: primaryVariant.height,
-    variants: allVariantsToStore as any, // Store all variants including the original
-    blur_data_url: payload.blurDataUrl || null, // Store if provided
-    // Ensure all other required fields for 'Media' type are present or nullable
-  };
 
-  const { data: newMedia, error } = await supabase
-    .from("media")
-    .insert(mediaData)
-    .select()
-    .single();
 
-  if (error) {
-    console.error("Error recording media upload:", error);
-    if (returnJustData) return { error: `Failed to record media: ${error.message}` };
-    return encodedRedirect("error", "/cms/media", `Failed to record media: ${error.message}`);
-  }
+import { recordMediaUpload as sharedRecordMediaUpload } from "@nextblock-cms/db";
 
-  revalidatePath("/cms/media");
-  if (returnJustData) {
-    return { success: true, data: newMedia as Media };
-  } else {
-    encodedRedirect("success", "/cms/media", "Media recorded successfully.");
-  }
+export async function recordMediaUpload(payload: any, returnJustData?: boolean) {
+  return sharedRecordMediaUpload(payload, returnJustData);
 }
 
 
@@ -213,10 +95,26 @@ export async function deleteMediaItem(mediaId: string, objectKey: string) {
       return encodedRedirect("error", "/cms/media", "R2 client is not configured for deletion.");
     }
 
+    // Fetch media to get variants
+    const { data: mediaToDelete } = await supabase
+      .from('media')
+      .select('variants')
+      .eq('id', mediaId)
+      .single();
+
+    const keysToDelete = [objectKey];
+    if (mediaToDelete?.variants && Array.isArray(mediaToDelete.variants)) {
+        mediaToDelete.variants.forEach((v: any) => {
+            if (v.objectKey) keysToDelete.push(v.objectKey);
+        });
+    }
+
     try {
-        const deleteCommand = new DeleteObjectCommand({
+        const deleteCommand = new DeleteObjectsCommand({
             Bucket: R2_BUCKET_NAME,
-            Key: objectKey,
+            Delete: {
+                Objects: keysToDelete.map(key => ({ Key: key })),
+            },
         });
         await s3Client.send(deleteCommand);
     } catch (r2Error: unknown) {
@@ -265,7 +163,30 @@ export async function deleteMultipleMediaItems(items: Array<{ id: string; object
     return { error: "R2 client is not configured for deletion." };
   }
 
-  const r2ObjectsToDelete = items.map(item => ({ Key: item.objectKey }));
+  // Fetch variants for all items
+  const { data: mediaItems } = await supabase
+    .from('media')
+    .select('id, object_key, variants')
+    .in('id', items.map(i => i.id));
+
+  const allKeysToDelete: string[] = [];
+  
+  // If we found the items in DB, use their variants data
+  if (mediaItems) {
+      mediaItems.forEach(item => {
+          allKeysToDelete.push(item.object_key);
+          if (item.variants && Array.isArray(item.variants)) {
+              item.variants.forEach((v: any) => {
+                  if (v.objectKey) allKeysToDelete.push(v.objectKey);
+              });
+          }
+      });
+  } else {
+      // Fallback to just the provided keys if DB fetch fails (unlikely)
+      items.forEach(item => allKeysToDelete.push(item.objectKey));
+  }
+
+  const r2ObjectsToDelete = allKeysToDelete.map(key => ({ Key: key }));
   const itemIdsToDelete = items.map(item => item.id);
   let r2DeletionError = null;
   let dbDeletionError = null;

package/templates/nextblock-template/app/cms/media/components/DeleteMediaButtonClient.tsx

@@ -6,7 +6,7 @@ import { DropdownMenuItem } from "@nextblock-cms/ui";
 import { Trash2 } from "lucide-react";
 import type { Database } from "@nextblock-cms/db";
 import { deleteMediaItem } from "../actions";
-import { ConfirmationModal } from '@/app/cms/components/ConfirmationModal';
+import { ConfirmationModal } from '../../components/ConfirmationModal';
 
 type Media = Database['public']['Tables']['media']['Row'];
 

package/templates/nextblock-template/app/cms/media/components/MediaEditForm.tsx

@@ -9,22 +9,21 @@ import { Spinner, Alert, AlertDescription } from '@nextblock-cms/ui';
 import { Input } from '@nextblock-cms/ui';
 import { Label } from '@nextblock-cms/ui';
 import { Textarea } from '@nextblock-cms/ui';
-import type { Database } from '@nextblock-cms/db';
-import { useAuth } from '@/context/AuthContext';
-import { useHotkeys } from '@/hooks/use-hotkeys';
+import type { Database } from '@nextblock-cms/db';
+import { useAuth } from '../../../../context/AuthContext';
+import { useHotkeys } from '../../../../hooks/use-hotkeys';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
 
 type Media = Database['public']['Tables']['media']['Row'];
 import { FileText } from 'lucide-react';
 
-interface MediaEditFormProps {
-  mediaItem: Media;
-  // The formAction will be updateMediaItem bound with the mediaItem.id
-  formAction: (formData: FormData) => Promise<{ error?: string; success?: boolean; media?: Media } | void>;
-}
-
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
-
-export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormProps) {
+interface MediaEditFormProps {
+  mediaItem: Media;
+  // The formAction will be updateMediaItem bound with the mediaItem.id
+  formAction: (formData: FormData) => Promise<{ error?: string; success?: boolean; media?: Media } | void>;
+}
+
+export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
@@ -76,19 +75,20 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
     return <div>Access Denied. You do not have permission to edit media.</div>;
   }
 
-  const formRef = React.useRef<HTMLFormElement>(null);
-  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <div className="md:col-span-1 space-y-4">
-        <h2 className="text-lg font-semibold">Media Preview</h2>
-        {mediaItem.file_type?.startsWith("image/") ? (
-          <Image
-            src={`${R2_BASE_URL}/${mediaItem.object_key}`}
-            alt={description || fileName}
-            width={400}
-            height={400}
+  const formRef = React.useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+  const previewUrl = resolveMediaUrl(mediaItem.file_path || mediaItem.object_key);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="md:col-span-1 space-y-4">
+        <h2 className="text-lg font-semibold">Media Preview</h2>
+        {mediaItem.file_type?.startsWith("image/") && previewUrl ? (
+          <Image
+            src={previewUrl}
+            alt={description || fileName}
+            width={400}
+            height={400}
             className="rounded-lg border object-contain aspect-square w-full max-w-sm mx-auto"
           />
         ) : (
@@ -159,4 +159,4 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
       </form>
     </div>
   );
-}
+}

package/templates/nextblock-template/app/cms/media/components/MediaGridClient.tsx

@@ -17,9 +17,10 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from "@nextblock-cms/ui";
-import MediaImage from "./MediaImage";
-import DeleteMediaButtonClient from "./DeleteMediaButtonClient"; // For single item deletion
-import { deleteMultipleMediaItems, moveSingleMediaItem } from "../actions"; // Server actions for bulk ops
+import MediaImage from "./MediaImage";
+import DeleteMediaButtonClient from "./DeleteMediaButtonClient"; // For single item deletion
+import { deleteMultipleMediaItems, moveSingleMediaItem } from "../actions"; // Server actions for bulk ops
+import { resolveMediaUrl } from "../../../../lib/media/resolveMediaUrl";
 
 interface MediaGridClientProps {
   initialMediaItems: Media[];
@@ -209,67 +210,71 @@ export default function MediaGridClient({ initialMediaItems, r2BaseUrl }: MediaG
            </p>
          </div>
       ) : (
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 mt-6">
-          {mediaItems.map((item) => (
-            <div
-              key={item.id}
-              className={`group relative border rounded-lg overflow-hidden shadow-sm aspect-square bg-muted/20 transition-all
-                ${isSelected(item.id) ? "ring-2 ring-primary ring-offset-2" : ""}`}
-            >
-              <div className="absolute top-2 left-2 z-10">
-                <Checkbox
-                  id={`select-${item.id}`}
-                  checked={isSelected(item.id)}
-                  onCheckedChange={(checked) => {
-                    handleSelectionChange(item.id, item.object_key, !!checked);
-                  }}
-                  aria-label={`Select ${item.file_name}`}
-                  className="bg-white/70 hover:bg-white border-slate-400 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-                />
-              </div>
-
-              {item.file_type?.startsWith("image/") ? (
-                <MediaImage
-                  src={`${r2BaseUrl}/${item.object_key}`}
-                  alt={item.description || item.file_name}
-                  width={item.width || 500} // Default width if null
-                  height={item.height || 500} // Default height if null
-                  blurDataURL={item.blur_data_url || undefined}
-                  className="h-full w-full object-contain transition-transform group-hover:scale-105"
-                />
-              ) : (
-                <div className="h-full w-full bg-muted flex flex-col items-center justify-center p-2">
-                  <FileText className="h-12 w-12 text-muted-foreground mb-2" />
-                  <p className="text-xs text-center text-muted-foreground truncate w-full" title={item.file_name}>
-                    {item.file_name}
-                  </p>
-                </div>
-              )}
-              <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2">
-                <div className="text-xs text-black truncate pt-1 ps-5" title={item.file_name}>{item.file_name}</div>
-                <div className="self-end">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="secondary" size="icon" className="text-white bg-black/40 hover:bg-black/60 h-7 w-7 rounded-full">
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem asChild>
-                            <Link href={`/cms/media/${item.id}/edit`} className="flex items-center cursor-pointer">
-                                <Edit3 className="mr-2 h-4 w-4" /> Edit Details
-                            </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DeleteMediaButtonClient mediaItem={item} />
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 mt-6">
+          {mediaItems.map((item) => {
+            const imageUrl = resolveMediaUrl(item.file_path || item.object_key, r2BaseUrl);
+
+            return (
+              <div
+                key={item.id}
+                className={`group relative border rounded-lg overflow-hidden shadow-sm aspect-square bg-muted/20 transition-all
+                  ${isSelected(item.id) ? "ring-2 ring-primary ring-offset-2" : ""}`}
+              >
+                <div className="absolute top-2 left-2 z-10">
+                  <Checkbox
+                    id={`select-${item.id}`}
+                    checked={isSelected(item.id)}
+                    onCheckedChange={(checked) => {
+                      handleSelectionChange(item.id, item.object_key, !!checked);
+                    }}
+                    aria-label={`Select ${item.file_name}`}
+                    className="bg-white/70 hover:bg-white border-slate-400 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+                  />
+                </div>
+
+                {item.file_type?.startsWith("image/") && imageUrl ? (
+                  <MediaImage
+                    src={imageUrl}
+                    alt={item.description || item.file_name}
+                    width={item.width || 500} // Default width if null
+                    height={item.height || 500} // Default height if null
+                    blurDataURL={item.blur_data_url || undefined}
+                    className="h-full w-full object-contain transition-transform group-hover:scale-105"
+                  />
+                ) : (
+                  <div className="h-full w-full bg-muted flex flex-col items-center justify-center p-2">
+                    <FileText className="h-12 w-12 text-muted-foreground mb-2" />
+                    <p className="text-xs text-center text-muted-foreground truncate w-full" title={item.file_name}>
+                      {item.file_name}
+                    </p>
+                  </div>
+                )}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2">
+                  <div className="text-xs text-black truncate pt-1 ps-5" title={item.file_name}>{item.file_name}</div>
+                  <div className="self-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="secondary" size="icon" className="text-white bg-black/40 hover:bg-black/60 h-7 w-7 rounded-full">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem asChild>
+                              <Link href={`/cms/media/${item.id}/edit`} className="flex items-center cursor-pointer">
+                                  <Edit3 className="mr-2 h-4 w-4" /> Edit Details
+                              </Link>
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DeleteMediaButtonClient mediaItem={item} />
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }