329 lines
13 KiB
TypeScript
329 lines
13 KiB
TypeScript
import React from 'react';
|
|
import { Download, Maximize2, Check, MessageSquare, Star, Heart } from 'lucide-react';
|
|
import { useInView } from 'react-intersection-observer';
|
|
import { useTheme } from '../../../contexts/ThemeContext';
|
|
import { AuthenticatedImage } from '../../common';
|
|
import { FeedbackIdentityModal } from '../../gallery/FeedbackIdentityModal';
|
|
import { feedbackService } from '../../../services/feedback.service';
|
|
import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
|
|
import type { Photo } from '../../../types';
|
|
|
|
interface GridPhotoProps {
|
|
photo: Photo;
|
|
isSelected: boolean;
|
|
isSelectionMode: boolean;
|
|
onClick: (e: React.MouseEvent) => void;
|
|
onDownload: (e: React.MouseEvent) => void;
|
|
onToggleSelect: () => void;
|
|
animationType?: string;
|
|
allowDownloads?: boolean;
|
|
slug?: string;
|
|
protectionLevel?: 'basic' | 'standard' | 'enhanced' | 'maximum';
|
|
useEnhancedProtection?: boolean;
|
|
feedbackEnabled?: boolean;
|
|
feedbackOptions?: {
|
|
allowLikes?: boolean;
|
|
allowRatings?: boolean;
|
|
allowComments?: boolean;
|
|
requireNameEmail?: boolean;
|
|
};
|
|
savedIdentity?: { name: string; email: string } | null;
|
|
onRequireIdentity?: (action: 'like', photoId: number) => void;
|
|
onQuickComment?: () => void;
|
|
onFeedbackChange?: () => void;
|
|
// Immediate UI like state and callback
|
|
liked?: boolean;
|
|
onLikeSuccess?: () => void;
|
|
}
|
|
|
|
const GridPhoto: React.FC<GridPhotoProps> = ({
|
|
photo,
|
|
isSelected,
|
|
isSelectionMode,
|
|
onClick,
|
|
onDownload,
|
|
onToggleSelect,
|
|
animationType = 'fade',
|
|
allowDownloads = true,
|
|
slug,
|
|
protectionLevel = 'standard',
|
|
useEnhancedProtection = false,
|
|
feedbackEnabled = false,
|
|
feedbackOptions,
|
|
savedIdentity,
|
|
onRequireIdentity,
|
|
onQuickComment,
|
|
onFeedbackChange,
|
|
liked = false,
|
|
onLikeSuccess
|
|
}) => {
|
|
// handled by parent layout; kept here for type completeness but not used
|
|
const { ref, inView } = useInView({
|
|
triggerOnce: true,
|
|
threshold: 0.1,
|
|
});
|
|
|
|
const animationClass = animationType === 'scale'
|
|
? 'transition-transform duration-300 hover:scale-105'
|
|
: animationType === 'fade'
|
|
? 'transition-opacity duration-300'
|
|
: '';
|
|
const likeCount = photo.like_count ?? 0;
|
|
const averageRating = photo.average_rating ?? 0;
|
|
const commentCount = photo.comment_count ?? 0;
|
|
const showFeedbackActions = feedbackEnabled && Boolean(feedbackOptions);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`relative group cursor-pointer aspect-square ${animationClass}`}
|
|
onClick={onClick}
|
|
style={{
|
|
opacity: !inView && animationType === 'fade' ? 0 : 1
|
|
}}
|
|
>
|
|
{inView ? (
|
|
<>
|
|
<AuthenticatedImage
|
|
src={photo.thumbnail_url || photo.url}
|
|
alt={photo.filename}
|
|
className="w-full h-full object-cover rounded-lg"
|
|
loading="lazy"
|
|
isGallery={true}
|
|
slug={slug}
|
|
photoId={photo.id}
|
|
requiresToken={photo.requires_token}
|
|
secureUrlTemplate={photo.secure_url_template}
|
|
protectFromDownload={!allowDownloads || useEnhancedProtection}
|
|
protectionLevel={protectionLevel}
|
|
useEnhancedProtection={useEnhancedProtection}
|
|
useCanvasRendering={protectionLevel === 'maximum'}
|
|
fragmentGrid={protectionLevel === 'enhanced' || protectionLevel === 'maximum'}
|
|
blockKeyboardShortcuts={useEnhancedProtection}
|
|
detectPrintScreen={useEnhancedProtection}
|
|
detectDevTools={protectionLevel === 'maximum'}
|
|
watermarkText={useEnhancedProtection ? 'Protected' : undefined}
|
|
onProtectionViolation={(violationType: string) => {
|
|
console.warn(`Protection violation on grid photo ${photo.id}: ${violationType}`);
|
|
}}
|
|
/>
|
|
|
|
<div className="absolute inset-0 bg-black/40 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
|
|
{!isSelectionMode && (
|
|
<>
|
|
<button
|
|
className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onClick(e);
|
|
}}
|
|
aria-label="View full size"
|
|
>
|
|
<Maximize2 className="w-5 h-5 text-neutral-800" />
|
|
</button>
|
|
{allowDownloads && (
|
|
<button
|
|
className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
|
|
onClick={onDownload}
|
|
aria-label="Download photo"
|
|
>
|
|
<Download className="w-5 h-5 text-neutral-800" />
|
|
</button>
|
|
)}
|
|
{showFeedbackActions && onQuickComment && (
|
|
<button
|
|
className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
|
|
onClick={(e) => { e.stopPropagation(); onQuickComment(); }}
|
|
aria-label="Comment on photo"
|
|
title="Comment"
|
|
>
|
|
<MessageSquare className="w-5 h-5 text-neutral-800" />
|
|
</button>
|
|
)}
|
|
{/* Quick feedback actions */}
|
|
{showFeedbackActions && feedbackOptions?.allowLikes && (
|
|
<button
|
|
className={`p-2 rounded-full transition-colors ${liked ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'}`}
|
|
onClick={async (e) => {
|
|
e.stopPropagation();
|
|
if (feedbackOptions?.requireNameEmail && !savedIdentity && onRequireIdentity) {
|
|
onRequireIdentity('like', photo.id);
|
|
return;
|
|
}
|
|
// Optimistic UI: mark as liked immediately
|
|
if (onLikeSuccess) onLikeSuccess();
|
|
try {
|
|
await feedbackService.submitFeedback(slug!, String(photo.id), {
|
|
feedback_type: 'like',
|
|
guest_name: savedIdentity?.name,
|
|
guest_email: savedIdentity?.email,
|
|
});
|
|
} catch (err) {
|
|
// Keep optimistic state; a refresh will reconcile
|
|
console.warn('Like submit failed, keeping optimistic UI', err);
|
|
}
|
|
if (onFeedbackChange) onFeedbackChange();
|
|
}}
|
|
aria-label="Like photo"
|
|
aria-pressed={liked}
|
|
title="Like"
|
|
>
|
|
<Heart className={`w-5 h-5 ${liked ? 'text-white fill-white' : 'text-neutral-800'}`} />
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Selection Checkbox (visible on hover or when selected) */}
|
|
<button
|
|
type="button"
|
|
aria-label={`Select ${photo.filename}`}
|
|
role="checkbox"
|
|
aria-checked={isSelected}
|
|
data-testid={`gallery-photo-checkbox-${photo.id}`}
|
|
className={`absolute top-2 right-2 z-20 transition-opacity ${
|
|
isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
|
|
}`}
|
|
onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
|
|
>
|
|
<div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
|
|
{isSelected && <Check className="w-4 h-4 text-white" />}
|
|
</div>
|
|
</button>
|
|
|
|
{/* Feedback Indicators (always visible, bottom-left). Show like immediately when user liked */}
|
|
{(commentCount > 0 || averageRating > 0 || likeCount > 0 || liked) && (
|
|
<div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-10`}>
|
|
{(likeCount > 0 || liked) && (
|
|
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
|
|
<Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
|
|
</span>
|
|
)}
|
|
{averageRating > 0 && (
|
|
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Rated">
|
|
<Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
|
|
</span>
|
|
)}
|
|
{commentCount > 0 && (
|
|
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented">
|
|
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{photo.type === 'collage' && (
|
|
<div className="absolute bottom-2 right-2">
|
|
<span className="px-2 py-1 bg-black/60 text-white text-xs rounded">
|
|
Collage
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="skeleton aspect-square w-full rounded-lg" />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const GridGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
|
|
photos,
|
|
slug,
|
|
onPhotoClick,
|
|
onOpenPhotoWithFeedback,
|
|
onFeedbackChange,
|
|
onDownload,
|
|
selectedPhotos = new Set(),
|
|
isSelectionMode = false,
|
|
onPhotoSelect,
|
|
allowDownloads = true,
|
|
protectionLevel = 'standard',
|
|
useEnhancedProtection = false,
|
|
feedbackEnabled = false,
|
|
feedbackOptions
|
|
}) => {
|
|
const { theme } = useTheme();
|
|
const gallerySettings = theme.gallerySettings || {};
|
|
const columns = gallerySettings.gridColumns || { mobile: 2, tablet: 3, desktop: 4 };
|
|
const spacing = gallerySettings.spacing || 'normal';
|
|
const animation = gallerySettings.photoAnimation || 'fade';
|
|
|
|
const [showIdentityModal, setShowIdentityModal] = React.useState(false);
|
|
const [pendingAction, setPendingAction] = React.useState<null | { type: 'like'; photoId: number }>(null);
|
|
const [likedPhotoIds, setLikedPhotoIds] = React.useState<Set<number>>(new Set());
|
|
const [savedIdentity, setSavedIdentity] = React.useState<{ name: string; email: string } | null>(null);
|
|
|
|
const spacingClass = spacing === 'tight' ? 'gap-2' : spacing === 'relaxed' ? 'gap-6' : 'gap-4';
|
|
|
|
const gridClass = `grid ${spacingClass}
|
|
grid-cols-${columns.mobile}
|
|
sm:grid-cols-${columns.tablet}
|
|
lg:grid-cols-${columns.desktop}
|
|
xl:grid-cols-${columns.desktop + 1}`;
|
|
|
|
return (
|
|
<div className={gridClass}>
|
|
{photos.map((photo, index) => (
|
|
<GridPhoto
|
|
key={photo.id}
|
|
photo={photo}
|
|
isSelected={selectedPhotos.has(photo.id)}
|
|
isSelectionMode={isSelectionMode}
|
|
onClick={() => onPhotoClick(index)}
|
|
onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo.id)}
|
|
onDownload={(e) => onDownload(photo, e)}
|
|
animationType={animation}
|
|
allowDownloads={allowDownloads}
|
|
slug={slug}
|
|
protectionLevel={protectionLevel}
|
|
useEnhancedProtection={useEnhancedProtection}
|
|
feedbackEnabled={feedbackEnabled}
|
|
feedbackOptions={feedbackOptions}
|
|
savedIdentity={savedIdentity}
|
|
onRequireIdentity={(action, photoId) => {
|
|
setPendingAction({ type: action, photoId });
|
|
setShowIdentityModal(true);
|
|
}}
|
|
onQuickComment={() => onOpenPhotoWithFeedback && onOpenPhotoWithFeedback(index)}
|
|
onFeedbackChange={onFeedbackChange}
|
|
liked={likedPhotoIds.has(photo.id)}
|
|
onLikeSuccess={() => {
|
|
setLikedPhotoIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(photo.id);
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
))}
|
|
<FeedbackIdentityModal
|
|
isOpen={showIdentityModal}
|
|
onClose={() => { setShowIdentityModal(false); setPendingAction(null); }}
|
|
onSubmit={async (name, email) => {
|
|
setSavedIdentity({ name, email });
|
|
setShowIdentityModal(false);
|
|
if (pendingAction) {
|
|
await feedbackService.submitFeedback(slug, String(pendingAction.photoId), {
|
|
feedback_type: pendingAction.type,
|
|
guest_name: name,
|
|
guest_email: email,
|
|
});
|
|
// Immediately reflect like UI
|
|
if (pendingAction.type === 'like') {
|
|
setLikedPhotoIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(pendingAction.photoId);
|
|
return next;
|
|
});
|
|
}
|
|
setPendingAction(null);
|
|
}
|
|
}}
|
|
feedbackType="like"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|