Merge pull request #115 from the-luap/fix/codeql-v4-upgrade

feat: pre-generated watermarks and mobile upload button improvements
2026-01-15 15:03:25 -05:00
parent 1c8f686c19 ae181cf92f
commit c6fdd38e84
25 changed files with 1159 additions and 107 deletions
@@ -7,7 +7,7 @@ import {
  resolveSlugFromRequestUrl,
 } from '../../utils/galleryAuthStorage';

-interface AuthenticatedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+interface AuthenticatedImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onLoad'> {
  src: string;
  fallbackSrc?: string;
  useWatermark?: boolean;
@@ -29,6 +29,7 @@ interface AuthenticatedImageProps extends React.ImgHTMLAttributes<HTMLImageEleme
  detectDevTools?: boolean;
  protectionLevel?: 'basic' | 'standard' | 'enhanced' | 'maximum';
  useEnhancedProtection?: boolean;
+  onLoad?: () => void;
 }

 export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
@@ -54,6 +55,7 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
  detectDevTools,
  protectionLevel,
  useEnhancedProtection,
+  onLoad,
  ...props
 }) => {
  const unusedProps = {
@@ -221,6 +223,7 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
    img.onload = () => {
      imageRef.current = img;
      drawToCanvas();
+      onLoad?.();
    };

    img.onerror = (e) => {
@@ -235,7 +238,7 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
      img.onload = null;
      img.onerror = null;
    };
-  }, [imageSrc, useCanvasRendering, drawToCanvas]);
+  }, [imageSrc, useCanvasRendering, drawToCanvas, onLoad]);

  if (isLoading) {
    return (
@@ -282,5 +285,5 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
    );
  }

-  return <img src={imageSrc} alt={alt} {...props} />;
+  return <img src={imageSrc} alt={alt} onLoad={onLoad} {...props} />;
 };
@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getApiBaseUrl, buildResourceUrl } from '../../utils/url';

+const DEFAULT_TITLE = 'PicPeak - Photo Sharing Platform';
+
 export const DynamicFavicon: React.FC = () => {
  const { data: settings } = useQuery({
    queryKey: ['public-settings'],
@@ -19,6 +21,7 @@ export const DynamicFavicon: React.FC = () => {
    staleTime: 5 * 60 * 1000, // 5 minutes
  });

+  // Update favicon when branding settings change
  useEffect(() => {
    if (settings?.branding_favicon_url) {
      // Remove existing favicon links
@@ -29,13 +32,27 @@ export const DynamicFavicon: React.FC = () => {
      const link = document.createElement('link');
      link.rel = 'icon';
      link.type = 'image/png';
-      link.href = settings.branding_favicon_url.startsWith('http') 
-        ? settings.branding_favicon_url 
+      link.href = settings.branding_favicon_url.startsWith('http')
+        ? settings.branding_favicon_url
        : buildResourceUrl(settings.branding_favicon_url);
-      
+
      document.head.appendChild(link);
    }
  }, [settings?.branding_favicon_url]);

+  // Update document title when company name or tagline changes
+  useEffect(() => {
+    const companyName = settings?.branding_company_name?.trim();
+    const tagline = settings?.branding_company_tagline?.trim();
+
+    if (companyName && tagline) {
+      document.title = `${companyName} - ${tagline}`;
+    } else if (companyName) {
+      document.title = companyName;
+    } else {
+      document.title = DEFAULT_TITLE;
+    }
+  }, [settings?.branding_company_name, settings?.branding_company_tagline]);
+
  return null;
 };
@@ -366,7 +366,10 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                    className={`${heroLogoSize.className} w-auto object-contain mx-auto`}
                    style={{
                      ...(heroLogoSize.style || {}),
-                      filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
+                      // Only apply brightness/invert filter to default logo; custom logos display as-is
+                      filter: brandingSettings?.logo_url
+                        ? 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
+                        : 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
                    }}
                  />
                  {shouldShowCompanyName() && brandingSettings?.company_name && (
@@ -441,7 +444,7 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
            </p>
          )}
          <p className="text-xs sm:text-sm text-neutral-500">
-            {brandingSettings?.footer_text || '© 2024 Your Company. All rights reserved.'}
+            {brandingSettings?.footer_text || `© ${new Date().getFullYear()}${brandingSettings?.company_name ? ` ${brandingSettings.company_name}` : ''}. All rights reserved.`}
            {!brandingSettings?.hide_powered_by && (
              <> | Powered by <span className="font-semibold">PicPeak</span></>
            )}
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Upload, Star } from 'lucide-react';
+import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star } from 'lucide-react';
 import { Button } from '../common';
 import { PhotoCategory } from '../../types';
 import { useTranslation } from 'react-i18next';
@@ -139,24 +139,6 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({

        {/* Content */}
        <div className="gallery-sidebar-content flex-1 overflow-y-auto">
-          {/* Upload Section - Only show on mobile when uploads are allowed */}
-          {isMobile && allowUploads && onUploadClick && (
-            <div className="p-4 border-b border-neutral-200">
-              <Button
-                variant="outline"
-                size="sm"
-                leftIcon={<Upload className="w-4 h-4" />}
-                onClick={() => {
-                  onUploadClick();
-                  onClose();
-                }}
-                className="w-full"
-              >
-                {t('upload.uploadPhotos')}
-              </Button>
-            </div>
-          )}
-
          {/* Search Section - Hidden for carousel layout */}
          {galleryLayout !== 'carousel' && (
            <div className="gallery-sidebar-section gallery-sidebar-search p-4 border-b border-neutral-200">
@@ -203,7 +203,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
        company_name: settingsData.branding_company_name || '',
        company_tagline: settingsData.branding_company_tagline || '',
        support_email: settingsData.branding_support_email || '',
-        footer_text: settingsData.branding_footer_text || '© 2024 Your Company. All rights reserved.',
+        footer_text: settingsData.branding_footer_text || '',
        watermark_enabled: settingsData.branding_watermark_enabled || false,
        logo_url: settingsData.branding_logo_url || null,
        logo_size: settingsData.branding_logo_size || 'medium',
@@ -380,12 +380,12 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
      }
    });
    
-    // Transform URLs for watermarks if enabled
+    // Transform full-size URLs for watermarks if enabled
+    // Note: Thumbnails are watermarked server-side at the thumbnail endpoint
    if (watermarkEnabled) {
      photos = photos.map(photo => ({
        ...photo,
-        url: `/gallery/${slug}/photo/${photo.id}`,
-        thumbnail_url: `/gallery/${slug}/photo/${photo.id}` // Use watermarked version for thumbnails too
+        url: `/api/gallery/${slug}/photo/${photo.id}`
      }));
    }
    
@@ -608,9 +608,9 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
            );
          }
          
-          // Upload button only on desktop when sidebar is shown
+          // Upload button for sidebar layouts (shown on both mobile and desktop)
          const allowUploads = data?.event?.allow_user_uploads || event?.allow_user_uploads;
-          if (allowUploads && showSidebar && !isMobile) {
+          if (allowUploads && showSidebar) {
            items.push(
              <Button
                key="upload-button"
@@ -619,7 +619,8 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
                leftIcon={<Upload className="w-4 h-4" />}
                onClick={() => setShowUploadModal(true)}
              >
-                {t('upload.uploadPhotos')}
+                <span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
+                <span className="sm:hidden">{t('common.upload')}</span>
              </Button>
            );
          }
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useDevToolsProtection } from '../../hooks/useDevToolsProtection';
-import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut, MessageSquare, Heart, Star } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut, MessageSquare, Heart, Star, Loader2 } from 'lucide-react';
 import type { Photo } from '../../types';
 import { useDownloadPhoto } from '../../hooks/useGallery';
 import { AuthenticatedImage } from '../common';
@@ -62,12 +62,18 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
  const [showIdentityModal, setShowIdentityModal] = useState(false);
  const [pendingAction, setPendingAction] = useState<null | { type: 'like' | 'rating'; rating?: number }>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);

  useEffect(() => {
    const onResize = () => setIsSmallScreen(window.innerWidth < 640);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
+
+  // Reset image loaded state when changing photos
+  useEffect(() => {
+    setImageLoaded(false);
+  }, [currentIndex]);
  
  const downloadPhotoMutation = useDownloadPhoto();
  const currentPhoto = photos[currentIndex];
@@ -488,6 +494,13 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
          right: isDesktopFeedback ? `${desktopFeedbackWidth}px` : 0,
        }}
      >
+        {/* Loading spinner */}
+        {!imageLoaded && currentPhoto.media_type !== 'video' && (
+          <div className="absolute inset-0 flex items-center justify-center z-10">
+            <Loader2 className="w-12 h-12 text-white animate-spin" />
+          </div>
+        )}
+
        {currentPhoto.media_type === 'video' ? (
          <VideoPlayer
            src={currentPhoto.url}
@@ -505,8 +518,10 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
            style={{
              transform: `scale(${zoom}) translate(${dragOffset.x / zoom}px, ${dragOffset.y / zoom}px)`,
              transition: isDragging ? 'none' : 'transform 0.2s',
+              opacity: imageLoaded ? 1 : 0,
            }}
            draggable={false}
+            onLoad={() => setImageLoaded(true)}
            useWatermark={useEnhancedProtection}
            watermarkText={useEnhancedProtection ? `${currentPhoto.filename} - Protected` : undefined}
            isGallery={true}
@@ -524,7 +539,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
            detectDevTools={protectionLevel === 'enhanced' || protectionLevel === 'maximum'}
            onProtectionViolation={(violationType) => {
              console.warn(`Protection violation in lightbox for photo ${currentPhoto.id}: ${violationType}`);
-            
+
            // Track analytics
            if (typeof window !== 'undefined' && (window as any).umami) {
              (window as any).umami.track('lightbox_protection_violation', {
@@ -534,7 +549,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
                zoom
              });
            }
-            
+
            // For maximum protection, close lightbox on violation
            if (protectionLevel === 'maximum' &&
                ['devtools_detected', 'print_screen_detected', 'canvas_access_blocked'].includes(violationType)) {
@@ -142,8 +142,11 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
                } 
                alt="Event logo" 
                className="h-20 sm:h-24 lg:h-32 mx-auto"
-                style={{ 
-                  filter: 'brightness(0) invert(1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5))'
+                style={{
+                  // Only apply brightness/invert filter to default logo; custom logos display as-is
+                  filter: eventLogo
+                    ? 'drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5))'
+                    : 'brightness(0) invert(1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5))'
                }}
              />
            </div>
@@ -778,6 +778,10 @@
    "enableDevtoolsProtection": "Entwicklertools erkennen",
    "useCanvasRendering": "Canvas-Rendering (erweiterter Schutz)",
    "protectionInfo": "Schutzfunktionen helfen, unerlaubte Downloads zu verhindern, können jedoch nicht alle Methoden blockieren.",
+    "protectionLevelBasic": "Einfach - Nur Rechtsklick-Sperre",
+    "protectionLevelStandard": "Standard - Tastenkombinationen blockiert",
+    "protectionLevelEnhanced": "Erweitert - Bildschirmfoto-Erkennung",
+    "protectionLevelMaximum": "Maximum - DevTools-Erkennung & Canvas-Rendering",
    "heroPhoto": "Hero-Foto",
    "heroPhotoHelp": "Wählen Sie ein hervorgehobenes Foto für das Hero-Galerie-Layout",
    "selectHeroPhoto": "Hero-Foto auswählen",
@@ -1032,6 +1036,48 @@
      "saveSettings": "Sicherheitseinstellungen speichern",
      "saveSecuritySettings": "Sicherheitseinstellungen speichern"
    },
+    "events": {
+      "title": "Veranstaltungserstellung",
+      "requiredFields": "Pflichtfelder",
+      "requiredFieldsDescription": "Konfigurieren Sie, welche Kontaktfelder beim Erstellen neuer Veranstaltungen erforderlich sind.",
+      "requireCustomerName": "Kundenname erforderlich",
+      "requireCustomerNameHelp": "Kundenname muss für neue Veranstaltungen angegeben werden",
+      "requireCustomerEmail": "Kunden-E-Mail erforderlich",
+      "requireCustomerEmailHelp": "Kunden-E-Mail muss für neue Veranstaltungen angegeben werden",
+      "customerEmailWarning": "Erforderlich für das Versenden von Galerie-Einladungen",
+      "requireAdminEmail": "Admin-E-Mail erforderlich",
+      "requireAdminEmailHelp": "Admin-E-Mail muss für neue Veranstaltungen angegeben werden",
+      "adminEmailWarning": "Erforderlich für den Erhalt von Veranstaltungsbenachrichtigungen",
+      "saveSettings": "Veranstaltungseinstellungen speichern",
+      "noteTitle": "Hinweis",
+      "noteText": "Diese Einstellungen betreffen nur die Erstellung neuer Veranstaltungen. Bestehende Veranstaltungen sind nicht betroffen. Standardmäßig sind alle Felder erforderlich."
+    },
+    "imageSecurity": {
+      "title": "Bildschutz",
+      "saveSuccess": "Bildschutz-Einstellungen gespeichert",
+      "saveError": "Fehler beim Speichern der Einstellungen",
+      "loadError": "Fehler beim Laden der Bildschutz-Einstellungen",
+      "defaultProtection": "Standard-Schutzeinstellungen",
+      "defaultProtectionHelp": "Diese Einstellungen gelten für alle neuen Veranstaltungen. Einzelne Veranstaltungen können diese Standardwerte überschreiben.",
+      "protectionLevel": "Standard-Schutzstufe",
+      "imageQuality": "Standard-Bildqualität",
+      "fragmentationLevel": "Fragmentierungsstufe",
+      "enableDevtools": "DevTools-Erkennung standardmäßig aktivieren",
+      "enableCanvas": "Canvas-Rendering standardmäßig aktivieren (erweiterter Schutz)",
+      "rateLimiting": "Ratenbegrenzung",
+      "rateLimitingHelp": "Begrenzen Sie, wie viele Bilder angefordert werden können, um Scraping zu verhindern.",
+      "requestsPerMinute": "Anfragen pro Minute",
+      "requestsPer5Minutes": "Anfragen pro 5 Min.",
+      "requestsPerHour": "Anfragen pro Stunde",
+      "securityMonitoring": "Sicherheitsüberwachung",
+      "suspiciousThreshold": "Schwellenwert für verdächtige Aktivitäten",
+      "autoBlockThreshold": "Automatische Sperrschwelle",
+      "enableMonitoring": "Sicherheitsüberwachung aktivieren",
+      "blockSuspiciousIps": "Verdächtige IPs automatisch blockieren",
+      "logEvents": "Sicherheitsereignisse in Datenbank protokollieren",
+      "infoTitle": "Über Bildschutz",
+      "infoText": "Diese Schutzfunktionen helfen, gelegentliches Herunterladen und Kopieren zu verhindern, können aber nicht alle Methoden blockieren. Entschlossene Benutzer finden möglicherweise trotzdem Wege, Bilder zu erfassen. Erwägen Sie die Verwendung von Wasserzeichen und rechtlichen Vereinbarungen für umfassenden Schutz."
+    },
    "categories": {
      "title": "Kategorien",
      "about": "Über Fotokategorien",
@@ -1209,7 +1255,31 @@
    "customizeTheme": "Design anpassen",
    "saveTheme": "Design speichern",
    "previewLayout": "Vorschau-Layout",
-    "livePreview": "Live-Vorschau"
+    "livePreview": "Live-Vorschau",
+    "whiteLabel": "White Label",
+    "hidePoweredBy": "\"Powered by PicPeak\" Branding ausblenden",
+    "hidePoweredByHelp": "Entfernen Sie die PicPeak-Kennzeichnung aus Galerie-Fußzeilen für ein vollständig personalisiertes Erscheinungsbild",
+    "logoCustomization": "Logo-Anpassung",
+    "changeLogo": "Logo ändern",
+    "logoSizeSmall": "Klein (32px)",
+    "logoSizeMedium": "Mittel (48px)",
+    "logoSizeLarge": "Groß (64px)",
+    "logoSizeXLarge": "Extra Groß (96px)",
+    "logoSizeCustom": "Benutzerdefiniert",
+    "logoMaxHeight": "Maximale Höhe (Pixel)",
+    "logoMaxHeightHelp": "Legen Sie eine benutzerdefinierte maximale Höhe für das Logo fest (20-200 Pixel)",
+    "logoPosition": "Logo-Position im Header",
+    "positionLeft": "Links",
+    "positionCenter": "Mitte",
+    "positionRight": "Rechts",
+    "logoDisplayMode": "Anzeigemodus",
+    "logoOnly": "Nur Logo",
+    "textOnly": "Nur Firmenname",
+    "logoAndText": "Logo und Firmenname",
+    "showLogoInHeader": "Logo im Galerie-Header anzeigen",
+    "showLogoInHeaderHelp": "Logo in der Hauptkopfzeile anzeigen",
+    "showLogoInHero": "Logo im Hero-Bereich anzeigen",
+    "showLogoInHeroHelp": "Logo in Hero-Bereichen anzeigen (für Nicht-Raster-Layouts)"
  },
  "admin": {
    "title": "Admin-Panel",
@@ -452,6 +452,10 @@
    "enableDevtoolsProtection": "Detect developer tools",
    "useCanvasRendering": "Canvas rendering (advanced protection)",
    "protectionInfo": "Protection features help prevent unauthorized downloads but cannot block all methods.",
+    "protectionLevelBasic": "Basic - Right-click blocking only",
+    "protectionLevelStandard": "Standard - Keyboard shortcuts blocked",
+    "protectionLevelEnhanced": "Enhanced - Print screen detection",
+    "protectionLevelMaximum": "Maximum - DevTools detection & canvas rendering",
    "heroPhoto": "Hero Photo",
    "heroPhotoHelp": "Select a featured photo for the hero gallery layout",
    "selectHeroPhoto": "Select Hero Photo",
@@ -1014,7 +1018,31 @@
    "customizeTheme": "Customize Theme",
    "saveTheme": "Save Theme",
    "previewLayout": "Preview Layout",
-    "livePreview": "Live Preview"
+    "livePreview": "Live Preview",
+    "whiteLabel": "White Label",
+    "hidePoweredBy": "Hide \"Powered by PicPeak\" branding",
+    "hidePoweredByHelp": "Remove the PicPeak attribution from gallery footers for a fully white-labeled experience",
+    "logoCustomization": "Logo Customization",
+    "changeLogo": "Change Logo",
+    "logoSizeSmall": "Small (32px)",
+    "logoSizeMedium": "Medium (48px)",
+    "logoSizeLarge": "Large (64px)",
+    "logoSizeXLarge": "Extra Large (96px)",
+    "logoSizeCustom": "Custom",
+    "logoMaxHeight": "Maximum Height (pixels)",
+    "logoMaxHeightHelp": "Set a custom maximum height for the logo (20-200 pixels)",
+    "logoPosition": "Logo Position in Header",
+    "positionLeft": "Left",
+    "positionCenter": "Center",
+    "positionRight": "Right",
+    "logoDisplayMode": "Display Mode",
+    "logoOnly": "Logo Only",
+    "textOnly": "Company Name Only",
+    "logoAndText": "Logo and Company Name",
+    "showLogoInHeader": "Show logo in gallery header",
+    "showLogoInHeaderHelp": "Display the logo in the main header bar",
+    "showLogoInHero": "Show logo in hero section",
+    "showLogoInHeroHelp": "Display the logo in hero sections (for non-grid layouts)"
  },
  "admin": {
    "title": "Admin Panel",
@@ -15,7 +15,7 @@ export const BrandingPage: React.FC = () => {
  const [brandingSettings, setBrandingSettings] = useState<BrandingSettings>({
    company_name: '',
    company_tagline: '',
-    footer_text: '© 2024 Your Company. All rights reserved.',
+    footer_text: '',
    support_email: '',
    watermark_enabled: false,
    watermark_position: 'bottom-right',
@@ -307,7 +307,7 @@ export const BrandingPage: React.FC = () => {
                onChange={(e) => handleBrandingChange('footer_text', e.target.value)}
                className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
                rows={2}
-                placeholder="© 2024 Your Company. All rights reserved."
+                placeholder={`© ${new Date().getFullYear()} Your Company. All rights reserved.`}
              />
            </div>
          </div>
@@ -144,7 +144,7 @@ export const LegalPage: React.FC = () => {
            </Link>
          </div>
          <p className="text-sm text-neutral-500 mt-4">
-            © 2024 PicPeak. All rights reserved.
+            © {new Date().getFullYear()} PicPeak. All rights reserved.
          </p>
        </div>
      </footer>
@@ -12,10 +12,10 @@ interface PhotoUrlOptions {
 */
 export function getPhotoUrl({ slug, photo, watermarkEnabled = false, token }: PhotoUrlOptions): string {
  if (watermarkEnabled && token) {
-    // Use the watermarked photo endpoint
-    return `/gallery/${slug}/photo/${photo.id}`;
+    // Use the watermarked photo endpoint (needs /api prefix)
+    return `/api/gallery/${slug}/photo/${photo.id}`;
  }
-  
+
  // Use the static photo URL
  return photo.url;
 }