fix: address beta feedback - gallery layout fixes, Russian locale, email logo (#249)
- Add Russian (Русский) to admin settings language dropdown - Fix Premium layout hero using thumbnail instead of hero_url - Hide "Uncategorized" section header in Story layout for uncategorized photos - Add PhotoLightbox to Story layout so photo clicks open full-screen view - Use full-res images in StoryPhotoCard instead of thumbnails - Defer public gallery auto-login text until settings/locale are loaded - Add validation and debug logging for email logo URL construction Co-authored-by: Paul Nothaft <paul@MacStudio-von-Paul.local>
This commit is contained in:
Paul Nothaft
@@ -153,9 +153,11 @@ async function wrapEmailHtml(htmlBody, subject, language = 'en') {
|
||||
|
||||
const hoverColor = darkenColor(primaryColor, 0.15);
|
||||
|
||||
// If no custom logo, use default PicPeak logo
|
||||
const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:3000';
|
||||
const logoFullUrl = `${frontendUrl}${logoUrl || '/picpeak-logo-transparent.png'}`;
|
||||
// Build full logo URL - ensure logoUrl is a valid non-empty string
|
||||
const frontendUrl = (process.env.FRONTEND_URL || 'http://localhost:3000').replace(/\/+$/, '');
|
||||
const logoPath = (typeof logoUrl === 'string' && logoUrl.trim()) ? logoUrl : '/picpeak-logo-transparent.png';
|
||||
const logoFullUrl = `${frontendUrl}${logoPath.startsWith('/') ? '' : '/'}${logoPath}`;
|
||||
logger.debug('Email logo URL:', { frontendUrl, logoPath, logoFullUrl });
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
|
||||
@@ -343,7 +343,7 @@ export const GalleryPremiumLayout: React.FC<GalleryPremiumLayoutProps> = ({
|
||||
<div
|
||||
className="gallery-premium-hero-bg"
|
||||
style={{
|
||||
backgroundImage: heroPhoto ? `url(${heroPhoto.thumbnail_url || heroPhoto.url})` : undefined
|
||||
backgroundImage: heroPhoto ? `url(${heroPhoto.hero_url || heroPhoto.url})` : undefined
|
||||
}}
|
||||
/>
|
||||
<div className="gallery-premium-hero-overlay" />
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
StoryFeedbackSheet,
|
||||
StoryScrollToTop
|
||||
} from './story';
|
||||
import { PhotoLightbox } from '../PhotoLightbox';
|
||||
|
||||
import './GalleryStoryLayout.css';
|
||||
|
||||
@@ -71,6 +72,7 @@ export const GalleryStoryLayout: React.FC<GalleryStoryLayoutProps> = ({
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [favorites, setFavorites] = useState<Set<number>>(new Set());
|
||||
const [selectedPhotoForFeedback, setSelectedPhotoForFeedback] = useState<Photo | null>(null);
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
const [comments, setComments] = useState<Record<number, Array<{ id: string; author: string; text: string; date: string }>>>({});
|
||||
const [ratings, setRatings] = useState<Record<number, number>>({});
|
||||
const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
|
||||
@@ -112,7 +114,7 @@ export const GalleryStoryLayout: React.FC<GalleryStoryLayoutProps> = ({
|
||||
|
||||
// Group by category
|
||||
filteredPhotos.forEach(photo => {
|
||||
const categoryName = photo.category_name || t('gallery.uncategorized', 'Gallery');
|
||||
const categoryName = photo.category_name || '';
|
||||
if (!photosByCategory[categoryName]) {
|
||||
photosByCategory[categoryName] = [];
|
||||
}
|
||||
@@ -163,6 +165,11 @@ export const GalleryStoryLayout: React.FC<GalleryStoryLayoutProps> = ({
|
||||
setSelectedPhotoForFeedback(photo);
|
||||
}, []);
|
||||
|
||||
const handleOpenLightbox = useCallback((photo: Photo) => {
|
||||
const index = photos.findIndex(p => p.id === photo.id);
|
||||
setLightboxIndex(index >= 0 ? index : 0);
|
||||
}, [photos]);
|
||||
|
||||
const handleCloseFeedback = useCallback(() => {
|
||||
setSelectedPhotoForFeedback(null);
|
||||
}, []);
|
||||
@@ -312,7 +319,7 @@ export const GalleryStoryLayout: React.FC<GalleryStoryLayoutProps> = ({
|
||||
photos={scene.photos}
|
||||
favorites={favorites}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
onPhotoClick={handleOpenFeedback}
|
||||
onPhotoClick={handleOpenLightbox}
|
||||
slug={slug}
|
||||
allowDownloads={allowDownloads}
|
||||
protectionLevel={protectionLevel}
|
||||
@@ -328,7 +335,7 @@ export const GalleryStoryLayout: React.FC<GalleryStoryLayoutProps> = ({
|
||||
index={index}
|
||||
isFavorite={favorites.has(photo.id)}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
onClick={() => handleOpenFeedback(photo)}
|
||||
onClick={() => handleOpenLightbox(photo)}
|
||||
slug={slug}
|
||||
galleryId={`gallery-${scene.id}`}
|
||||
allowDownloads={allowDownloads}
|
||||
@@ -359,6 +366,22 @@ export const GalleryStoryLayout: React.FC<GalleryStoryLayoutProps> = ({
|
||||
)}
|
||||
</footer>
|
||||
|
||||
{/* Lightbox */}
|
||||
{lightboxIndex !== null && (
|
||||
<PhotoLightbox
|
||||
photos={photos}
|
||||
initialIndex={lightboxIndex}
|
||||
onClose={() => setLightboxIndex(null)}
|
||||
slug={slug}
|
||||
feedbackEnabled={feedbackEnabled}
|
||||
allowDownloads={allowDownloads}
|
||||
protectionLevel={protectionLevel}
|
||||
useEnhancedProtection={useEnhancedProtection}
|
||||
useCanvasRendering={useCanvasRendering}
|
||||
onFeedbackChange={onFeedbackChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Feedback Sheet */}
|
||||
{feedbackEnabled && (
|
||||
<StoryFeedbackSheet
|
||||
|
||||
@@ -60,7 +60,7 @@ export const StoryPhotoCard: React.FC<StoryPhotoCardProps> = ({
|
||||
className="block w-full h-full"
|
||||
>
|
||||
<AuthenticatedImage
|
||||
src={photo.thumbnail_url || photo.url}
|
||||
src={photo.url}
|
||||
alt={photo.filename}
|
||||
onLoad={() => setIsLoaded(true)}
|
||||
className={`w-full h-full object-cover transition-all duration-700 ease-out will-change-transform ${
|
||||
|
||||
@@ -18,27 +18,29 @@ export const StoryScene: React.FC<StorySceneProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<section className={`story-scene ${fullWidth ? 'full-width' : ''} ${className}`}>
|
||||
<div className="story-scene-header">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="story-scene-title"
|
||||
>
|
||||
{title}
|
||||
</motion.h2>
|
||||
{subtitle && (
|
||||
<motion.p
|
||||
{title && (
|
||||
<div className="story-scene-header">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="story-scene-subtitle"
|
||||
className="story-scene-title"
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
{title}
|
||||
</motion.h2>
|
||||
{subtitle && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="story-scene-subtitle"
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -247,6 +247,7 @@ export const GeneralTab: React.FC<GeneralTabProps> = ({
|
||||
<option value="en">English</option>
|
||||
<option value="de">Deutsch</option>
|
||||
<option value="pt">Português (Brasil)</option>
|
||||
<option value="ru">Русский</option>
|
||||
</select>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||
{t('settings.general.defaultLanguageHelp')}
|
||||
|
||||
@@ -106,7 +106,7 @@ export const GalleryPage: React.FC = () => {
|
||||
}, [resolvedSlug]);
|
||||
|
||||
// Fetch branding settings
|
||||
const { data: settingsData } = useQuery({
|
||||
const { data: settingsData, isLoading: isLoadingSettings } = useQuery({
|
||||
queryKey: ['gallery-settings'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/public/settings');
|
||||
@@ -177,7 +177,7 @@ export const GalleryPage: React.FC = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (galleryInfo && isGalleryPublic(galleryInfo.requires_password) && !isAuthenticated && !autoLoginAttempted) {
|
||||
if (galleryInfo && isGalleryPublic(galleryInfo.requires_password) && !isAuthenticated && !autoLoginAttempted && !isLoadingSettings) {
|
||||
setAutoLoginAttempted(true);
|
||||
setIsLoggingIn(true);
|
||||
login(resolvedSlug, '')
|
||||
@@ -194,7 +194,7 @@ export const GalleryPage: React.FC = () => {
|
||||
setIsLoggingIn(false);
|
||||
});
|
||||
}
|
||||
}, [galleryInfo, isAuthenticated, autoLoginAttempted, login, resolvedSlug, isResolvingIdentifier]);
|
||||
}, [galleryInfo, isAuthenticated, autoLoginAttempted, login, resolvedSlug, isResolvingIdentifier, isLoadingSettings]);
|
||||
|
||||
// Calculate days until expiration (null if no expiration set)
|
||||
const daysUntilExpiration = galleryInfo?.expires_at
|
||||
@@ -526,15 +526,23 @@ export const GalleryPage: React.FC = () => {
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center space-y-3">
|
||||
<h2 className="text-base sm:text-lg lg:text-xl font-semibold">
|
||||
{t('gallery.publicGalleryTitle', 'This gallery is publicly accessible')}
|
||||
</h2>
|
||||
<p className="text-sm text-neutral-600">
|
||||
{t('gallery.publicGallerySubtitle', 'Loading the photos now...')}
|
||||
</p>
|
||||
<div className="flex justify-center py-4">
|
||||
<Loading size="sm" text={t('gallery.loading')} />
|
||||
</div>
|
||||
{isLoadingSettings ? (
|
||||
<div className="flex justify-center py-4">
|
||||
<Loading size="sm" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="text-base sm:text-lg lg:text-xl font-semibold">
|
||||
{t('gallery.publicGalleryTitle', 'This gallery is publicly accessible')}
|
||||
</h2>
|
||||
<p className="text-sm text-neutral-600">
|
||||
{t('gallery.publicGallerySubtitle', 'Loading the photos now...')}
|
||||
</p>
|
||||
<div className="flex justify-center py-4">
|
||||
<Loading size="sm" text={t('gallery.loading')} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{loginError && (
|
||||
<p className="text-xs text-red-600">{loginError}</p>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user