diff --git a/components/gallery/CreateEventGalleryForm.tsx b/components/gallery/CreateEventGalleryForm.tsx index 564c2db..376f3f4 100644 --- a/components/gallery/CreateEventGalleryForm.tsx +++ b/components/gallery/CreateEventGalleryForm.tsx @@ -12,6 +12,46 @@ interface EditEventFormProps { eventId: string | null; } +const extractDriveFileId = (link: string): string | null => { + const trimmed = link?.trim(); + if (!trimmed) return null; + + const match = trimmed.match(/\/d\/([a-zA-Z0-9_-]+)/) || + trimmed.match(/[?&]id=([a-zA-Z0-9_-]+)/) || + trimmed.match(/\/open\?id=([a-zA-Z0-9_-]+)/); + + return match?.[1] ?? null; +}; + +const buildDriveViewUrl = (id: string) => `https://drive.google.com/thumbnail?id=${id}&sz=w1000`; +const buildDriveDownloadUrl = (id: string) => `https://drive.google.com/uc?export=download&id=${id}`; +const buildDriveThumbnailUrl = (id: string) => `https://drive.google.com/thumbnail?id=${id}&sz=w1000`; +const buildDriveViewAuthUrl = (id: string) => `https://drive.google.com/uc?export=view&id=${id}&authuser=0`; + +const normalizeDriveImageUrl = (link: string): string => { + const trimmed = link?.trim() || ''; + const id = extractDriveFileId(trimmed); + if (!id) return trimmed; + return buildDriveViewUrl(id); +}; + + +const getDriveFallbackUrl = (currentUrl: string): string | null => { + const id = extractDriveFileId(currentUrl); + if (!id) return null; + + if (currentUrl.includes('thumbnail?id=')) { + return buildDriveViewAuthUrl(id); + } + if (currentUrl.includes('export=download')) { + return buildDriveThumbnailUrl(id); + } + if (currentUrl.includes('export=view')) { + return buildDriveDownloadUrl(id); + } + return buildDriveViewAuthUrl(id); +}; + const CreateEventGalleryForm: React.FC = ({ eventId }) => { const router = useRouter(); @@ -47,15 +87,11 @@ const CreateEventGalleryForm: React.FC = ({ eventId }) => { const remainingSlots = Math.max(0, 20 - existingImagesCount); const parsedLinks = React.useMemo(() => { - return linkInput.split(/[\n,]+/).map(l => l.trim()).filter(l => l !== '').map(link => { - if (link.includes("drive.google.com")) { - const match = link.match(/\/d\/([a-zA-Z0-9_-]+)/) || link.match(/id=([a-zA-Z0-9_-]+)/); - if (match && match[1]) { - return `https://drive.google.com/uc?export=view&id=${match[1]}`; -} - } - return link; - }); + return linkInput + .split(/[\n,]+/) + .map((link) => link.trim()) + .filter((link) => link !== '') + .map(normalizeDriveImageUrl); }, [linkInput]); const handleLinkInputChange = (e: ChangeEvent) => { @@ -161,7 +197,13 @@ const CreateEventGalleryForm: React.FC = ({ eventId }) => { alt={`Preview ${index + 1}`} className="w-full h-40 object-cover" onError={(e) => { - (e.target as HTMLImageElement).src = "https://placehold.co/150x150?text=Invalid+Image+Link"; + const img = e.currentTarget as HTMLImageElement; + const fallback = getDriveFallbackUrl(url); + if (fallback && fallback !== url) { + img.src = fallback; + return; + } + img.src = "https://placehold.co/150x150?text=Invalid+Image+Link"; }} /> - {`gallery-${index}`} e.preventDefault()} className="w-full h-64 object-cover rounded-md" + onLoad={() => console.log("Loaded:", item.src)} onError={(e) => { - (e.currentTarget as HTMLImageElement).src = + console.log("FAILED:", item.src); + e.currentTarget.src = "https://placehold.co/400x300?text=Image+Not+Found"; }} /> diff --git a/components/layouts/footer.tsx b/components/layouts/footer.tsx index 3991c71..3094b6f 100644 --- a/components/layouts/footer.tsx +++ b/components/layouts/footer.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; const Footer = () => { return ( -
© {new Date().getFullYear()}. Copyright 2025 © TamilCultureAssociation. Powered by MetatronCube. All Rights Reserved.
+
© {new Date().getFullYear()} TamilCultureAssociation. Powered by MetatronCube. All Rights Reserved.
); };