No photos uploaded yet
{t('gallery.noMedia', 'No media uploaded yet')}
Failed to load image
Failed to load media
- {t('upload.fileRequirements', { limit: maxFilesPerUpload })} + {t('upload.fileRequirementsMedia', { limit: maxFilesPerUpload }) || t('upload.fileRequirements', { limit: maxFilesPerUpload })}
= ({ eventId, onUploadCompl ref={fileInputRef} type="file" multiple - accept="image/jpeg,image/png,image/webp" + accept="image/jpeg,image/png,image/webp,video/mp4,video/quicktime,video/webm" onChange={handleFileSelect} className="hidden" /> @@ -255,7 +261,11 @@ export const PhotoUpload: React.FC = ({ eventId, onUploadCompl className="flex items-center justify-between p-2 bg-neutral-50 rounded-lg" > - + {file.type.startsWith('video/') ? ( + + ) : ( + + )} {file.name} @@ -288,7 +298,9 @@ export const PhotoUpload: React.FC = ({ eventId, onUploadCompl disabled={selectedFiles.length === 0 || isUploading} leftIcon={isUploading ? : } > - {isUploading ? t('upload.uploading') : t('common.upload') + ` ${selectedFiles.length} ${t(selectedFiles.length === 1 ? 'common.photo' : 'common.photos')}`} + {isUploading + ? t('upload.uploading') + : t('upload.uploadAction', { count: selectedFiles.length }) || `Upload ${selectedFiles.length} files`} diff --git a/frontend/src/components/admin/PhotoUploadModal.tsx b/frontend/src/components/admin/PhotoUploadModal.tsx index fe92ace..939b0bb 100644 --- a/frontend/src/components/admin/PhotoUploadModal.tsx +++ b/frontend/src/components/admin/PhotoUploadModal.tsx @@ -33,7 +33,7 @@ export const PhotoUploadModal: React.FC = ({ {/* Fixed Header */} - {t('events.uploadPhotos')} + {t('upload.uploadMedia', t('events.uploadPhotos'))} = ({ ); }; -PhotoUploadModal.displayName = 'PhotoUploadModal'; \ No newline at end of file +PhotoUploadModal.displayName = 'PhotoUploadModal'; diff --git a/frontend/src/components/admin/index.ts b/frontend/src/components/admin/index.ts index 21ae03b..9a75a32 100644 --- a/frontend/src/components/admin/index.ts +++ b/frontend/src/components/admin/index.ts @@ -17,6 +17,7 @@ export { AdminPhotoViewer } from './AdminPhotoViewer'; export { PhotoFilters } from './PhotoFilters'; export { PasswordResetModal } from './PasswordResetModal'; export { AdminAuthenticatedImage } from './AdminAuthenticatedImage'; +export { AdminAuthenticatedVideo } from './AdminAuthenticatedVideo'; export { ThemeCustomizerEnhanced } from './ThemeCustomizerEnhanced'; export { ThemeDisplay } from './ThemeDisplay'; export { ThemeEditorModal } from './ThemeEditorModal'; @@ -29,4 +30,4 @@ export { BackupHistory } from './BackupHistory'; export { RestoreWizard } from './RestoreWizard'; export { FeedbackSettings } from './FeedbackSettings'; export { FeedbackModerationPanel } from './FeedbackModerationPanel'; -export { WordFilterManager } from './WordFilterManager'; \ No newline at end of file +export { WordFilterManager } from './WordFilterManager'; diff --git a/frontend/src/components/common/AuthenticatedVideo.tsx b/frontend/src/components/common/AuthenticatedVideo.tsx new file mode 100644 index 0000000..90532c1 --- /dev/null +++ b/frontend/src/components/common/AuthenticatedVideo.tsx @@ -0,0 +1,125 @@ +import React, { useEffect, useState } from 'react'; +import { buildResourceUrl } from '../../utils/url'; +import { + getActiveGallerySlug, + getGalleryToken, + inferGallerySlugFromLocation, + resolveSlugFromRequestUrl, +} from '../../utils/galleryAuthStorage'; + +interface AuthenticatedVideoProps extends React.VideoHTMLAttributes { + src: string; + fallbackSrc?: string; + slug?: string; +} + +export const AuthenticatedVideo: React.FC = ({ + src, + fallbackSrc, + slug, + ...props +}) => { + const [videoSrc, setVideoSrc] = useState(''); + const [error, setError] = useState(false); + + useEffect(() => { + let aborted = false; + const objectUrls: string[] = []; + + if (!src) { + setVideoSrc(''); + setError(true); + return; + } + + const resolveSlug = (candidateSrc?: string): string | null => { + if (slug) { + return slug; + } + const fromUrl = candidateSrc ? resolveSlugFromRequestUrl(candidateSrc) : null; + if (fromUrl) { + return fromUrl; + } + return getActiveGallerySlug() || inferGallerySlugFromLocation(); + }; + + const fetchWithAuth = async (rawUrl: string | undefined | null): Promise => { + if (!rawUrl) { + throw new Error('No URL provided'); + } + + const fullUrl = rawUrl.startsWith('/') + ? buildResourceUrl(rawUrl) + : rawUrl; + + const headers: Record = {}; + const slugForRequest = resolveSlug(rawUrl); + const token = getGalleryToken(slugForRequest); + if (token) { + headers.Authorization = `Bearer ${token}`; + } + + const response = await fetch(fullUrl, { + credentials: 'include', + headers: Object.keys(headers).length ? headers : undefined, + }); + + if (!response.ok) { + throw new Error(`Failed to fetch media: ${response.status} ${response.statusText}`); + } + + const blob = await response.blob(); + const objectUrl = URL.createObjectURL(blob); + objectUrls.push(objectUrl); + return objectUrl; + }; + + const load = async () => { + try { + const primaryUrl = await fetchWithAuth(src); + if (!aborted) { + setVideoSrc(primaryUrl); + setError(false); + } + } catch (err) { + if (fallbackSrc && fallbackSrc !== src) { + try { + const fallbackUrl = await fetchWithAuth(fallbackSrc); + if (!aborted) { + setVideoSrc(fallbackUrl); + setError(false); + } + return; + } catch (_) { + // ignore and set error below + } + } + if (!aborted) { + setError(true); + setVideoSrc(''); + } + } + }; + + load(); + + return () => { + aborted = true; + objectUrls.forEach((url) => URL.revokeObjectURL(url)); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [src, fallbackSrc, slug]); + + if (error || !videoSrc) { + return null; + } + + return ( + + ); +}; diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts index 7e84bdc..4ea4299 100644 --- a/frontend/src/components/common/index.ts +++ b/frontend/src/components/common/index.ts @@ -16,7 +16,8 @@ export { SkipLink } from './SkipLink'; export { DynamicFavicon } from './DynamicFavicon'; export { LanguageSelector } from './LanguageSelector'; export { AuthenticatedImage } from './AuthenticatedImage'; +export { AuthenticatedVideo } from './AuthenticatedVideo'; export { ProtectedImage } from './ProtectedImage'; export { ProtectionWarning } from './ProtectionWarning'; export { ReCaptcha } from './ReCaptcha'; -export { PasswordGenerator } from './PasswordGenerator'; \ No newline at end of file +export { PasswordGenerator } from './PasswordGenerator'; diff --git a/frontend/src/components/gallery/GallerySidebar.tsx b/frontend/src/components/gallery/GallerySidebar.tsx index f86660a..43a87ca 100644 --- a/frontend/src/components/gallery/GallerySidebar.tsx +++ b/frontend/src/components/gallery/GallerySidebar.tsx @@ -9,8 +9,8 @@ interface GallerySidebarProps { isOpen: boolean; onClose: () => void; categories: PhotoCategory[]; - selectedCategoryId: number | null; - onCategoryChange: (categoryId: number | null) => void; + selectedCategoryId: number | string | null; + onCategoryChange: (categoryId: number | string | null) => void; searchTerm: string; onSearchChange: (term: string) => void; sortBy: 'date' | 'name' | 'size' | 'rating'; @@ -22,7 +22,7 @@ interface GallerySidebarProps { onDownloadSelected: () => void; isDownloading: boolean; allowDownloads?: boolean; - photoCounts?: Record; + photoCounts?: Record; totalPhotos: number; isMobile: boolean; galleryLayout?: string; @@ -34,6 +34,9 @@ interface GallerySidebarProps { likeCount?: number; favoriteCount?: number; ratedCount?: number; + mediaFilter?: 'all' | 'photo' | 'video'; + onMediaFilterChange?: (filter: 'all' | 'photo' | 'video') => void; + showMediaFilter?: boolean; } export const GallerySidebar: React.FC = ({ @@ -64,7 +67,10 @@ export const GallerySidebar: React.FC = ({ onFilterChange, likeCount = 0, favoriteCount = 0, - ratedCount = 0 + ratedCount = 0, + mediaFilter = 'all', + onMediaFilterChange, + showMediaFilter = false }) => { const { t } = useTranslation(); const sidebarRef = useRef(null); @@ -288,6 +294,47 @@ export const GallerySidebar: React.FC = ({ )} + {showMediaFilter && onMediaFilterChange && ( + + + + {t('gallery.mediaType', 'Media')} + + + { + onMediaFilterChange('all'); + if (isMobile) onClose(); + }} + > + {t('gallery.allMedia', 'All')} + + { + onMediaFilterChange('photo'); + if (isMobile) onClose(); + }} + > + {t('gallery.photosOnly', 'Photos')} + + { + onMediaFilterChange('video'); + if (isMobile) onClose(); + }} + > + {t('gallery.videosOnly', 'Videos')} + + + + )} + {/* Sort Section - Hidden for carousel and timeline layouts */} {galleryLayout !== 'carousel' && galleryLayout !== 'timeline' && ( diff --git a/frontend/src/components/gallery/GalleryView.tsx b/frontend/src/components/gallery/GalleryView.tsx index 65fd57f..c2a352d 100644 --- a/frontend/src/components/gallery/GalleryView.tsx +++ b/frontend/src/components/gallery/GalleryView.tsx @@ -44,7 +44,7 @@ export const GalleryView: React.FC = ({ slug, event }) => { const { t } = useTranslation(); const { logout } = useGalleryAuth(); const { setTheme, theme } = useTheme(); - const [selectedCategoryId, setSelectedCategoryId] = useState(null); + const [selectedCategoryId, setSelectedCategoryId] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const [sortBy, setSortBy] = useState<'date' | 'name' | 'size' | 'rating'>('date'); const [brandingSettings, setBrandingSettings] = useState(null); @@ -57,8 +57,22 @@ export const GalleryView: React.FC = ({ slug, event }) => { const { watermarkEnabled } = useWatermarkSettings(); const [protectionLevel, setProtectionLevel] = useState<'basic' | 'standard' | 'enhanced' | 'maximum'>('standard'); const [filterType, setFilterType] = useState('all'); + const [mediaFilter, setMediaFilter] = useState<'all' | 'photo' | 'video'>('all'); const [guestId, setGuestId] = useState(''); const [staticHeroPhoto, setStaticHeroPhoto] = useState(null); + + const resolveMediaType = (photo: Photo) => { + if (photo.media_type === 'video' || photo.media_type === 'photo') { + return photo.media_type; + } + if (photo.mime_type && photo.mime_type.startsWith('video/')) { + return 'video'; + } + if ((photo as any).type === 'video') { + return 'video'; + } + return 'photo'; + }; // Generate a unique guest ID for this session useEffect(() => { @@ -176,6 +190,25 @@ export const GalleryView: React.FC = ({ slug, event }) => { } }, [settingsData]); + const availableMediaTypes = useMemo(() => { + const types = new Set<'photo' | 'video'>(); + (data?.photos || []).forEach((photo) => { + const mediaType = resolveMediaType(photo); + if (mediaType === 'photo' || mediaType === 'video') { + types.add(mediaType); + } + }); + return types; + }, [data?.photos]); + + const showMediaFilter = availableMediaTypes.has('photo') && availableMediaTypes.has('video'); + + useEffect(() => { + if (!showMediaFilter && mediaFilter !== 'all') { + setMediaFilter('all'); + } + }, [showMediaFilter, mediaFilter]); + // Determine a stable hero photo from the initial (unfiltered) load useEffect(() => { if (!staticHeroPhoto && data?.photos && filterType === 'all') { @@ -185,7 +218,8 @@ export const GalleryView: React.FC = ({ slug, event }) => { hero = data.photos.find(p => p.id === heroId) || null; } if (!hero && data.photos.length > 0) { - hero = data.photos[0]; + const firstPhoto = data.photos.find(p => resolveMediaType(p) === 'photo'); + hero = firstPhoto || data.photos[0]; } if (hero) { setStaticHeroPhoto(hero); @@ -259,6 +293,12 @@ export const GalleryView: React.FC = ({ slug, event }) => { if (!data?.photos) return []; let photos = [...data.photos]; + + if (mediaFilter === 'photo') { + photos = photos.filter(photo => resolveMediaType(photo) !== 'video'); + } else if (mediaFilter === 'video') { + photos = photos.filter(photo => resolveMediaType(photo) === 'video'); + } // Apply category filter if (selectedCategoryId) { @@ -323,7 +363,7 @@ export const GalleryView: React.FC = ({ slug, event }) => { } return photos; - }, [data?.photos, selectedCategoryId, searchTerm, sortBy, watermarkEnabled, slug, filterType]); + }, [data?.photos, selectedCategoryId, searchTerm, sortBy, watermarkEnabled, slug, filterType, mediaFilter]); const likeCount = useMemo( () => data?.photos?.filter(p => (p.like_count ?? 0) > 0).length || 0, @@ -388,14 +428,20 @@ export const GalleryView: React.FC = ({ slug, event }) => { // Calculate photo counts per category const photoCounts = useMemo(() => { if (!data?.photos) return {}; - const counts: Record = {}; - data.photos.forEach(photo => { + const counts: Record = {}; + data.photos + .filter(photo => { + if (mediaFilter === 'photo') return resolveMediaType(photo) !== 'video'; + if (mediaFilter === 'video') return resolveMediaType(photo) === 'video'; + return true; + }) + .forEach(photo => { if (photo.category_id) { counts[photo.category_id] = (counts[photo.category_id] || 0) + 1; } }); return counts; - }, [data?.photos]); + }, [data?.photos, mediaFilter]); // Track search usage with debouncing useEffect(() => { @@ -497,6 +543,9 @@ export const GalleryView: React.FC = ({ slug, event }) => { feedbackEnabled={feedbackEnabled} filterType={filterType} onFilterChange={setFilterType} + mediaFilter={mediaFilter} + onMediaFilterChange={setMediaFilter} + showMediaFilter={showMediaFilter} likeCount={likeCount} favoriteCount={favoriteCount} ratedCount={ratedCount} @@ -582,16 +631,19 @@ export const GalleryView: React.FC = ({ slug, event }) => { onCategoryChange={setSelectedCategoryId} searchTerm={searchTerm} onSearchChange={setSearchTerm} - sortBy={sortBy} - onSortChange={setSortBy} - photoCount={filteredPhotos.length} - // Feedback filter props - feedbackEnabled={feedbackEnabled} - currentFilter={filterType} - onFilterChange={setFilterType} - /> - - ) : null} + sortBy={sortBy} + onSortChange={setSortBy} + photoCount={filteredPhotos.length} + // Feedback filter props + feedbackEnabled={feedbackEnabled} + currentFilter={filterType} + onFilterChange={setFilterType} + mediaFilter={mediaFilter} + onMediaFilterChange={setMediaFilter} + showMediaFilter={showMediaFilter} + /> + + ) : null} {/* Photo Grid */} diff --git a/frontend/src/components/gallery/PhotoFilterBar.tsx b/frontend/src/components/gallery/PhotoFilterBar.tsx index ba5b1a3..6caec6f 100644 --- a/frontend/src/components/gallery/PhotoFilterBar.tsx +++ b/frontend/src/components/gallery/PhotoFilterBar.tsx @@ -32,6 +32,9 @@ interface PhotoFilterBarProps { feedbackEnabled?: boolean; currentFilter?: FilterType; onFilterChange?: (filter: FilterType) => void; + mediaFilter?: 'all' | 'photo' | 'video'; + onMediaFilterChange?: (filter: 'all' | 'photo' | 'video') => void; + showMediaFilter?: boolean; } export const PhotoFilterBar: React.FC = ({ @@ -47,6 +50,9 @@ export const PhotoFilterBar: React.FC = ({ feedbackEnabled = false, currentFilter = 'all', onFilterChange, + mediaFilter = 'all', + onMediaFilterChange, + showMediaFilter = false }) => { const { t } = useTranslation(); const [showSortMenu, setShowSortMenu] = useState(false); @@ -148,7 +154,7 @@ export const PhotoFilterBar: React.FC = ({ leftIcon={} className="text-xs md:text-sm whitespace-nowrap flex-shrink-0" > - {t('gallery.allPhotos')} ({photos.length}) + {showMediaFilter ? t('gallery.allMedia', 'All media') : t('gallery.allPhotos')} ({photos.length}) {categories.map((category) => { const categoryPhotoCount = photos.filter(p => p.category_id === category.id).length; @@ -226,10 +232,44 @@ export const PhotoFilterBar: React.FC = ({ )} - {photoCount} {photoCount === 1 ? t('common.photo') : t('common.photos')} + {photoCount} {t('common.media', 'media')} )} + + {showMediaFilter && onMediaFilterChange && ( + + + {t('gallery.mediaType', 'Media')} + + + onMediaFilterChange('all')} + className="text-xs md:text-sm" + > + {t('gallery.allMedia', 'All')} + + onMediaFilterChange('photo')} + className="text-xs md:text-sm" + > + {t('gallery.photosOnly', 'Photos')} + + onMediaFilterChange('video')} + className="text-xs md:text-sm" + > + {t('gallery.videosOnly', 'Videos')} + + + + )} {/* Mobile/Tablet: compact horizontal icons with headline below categories */} {feedbackEnabled && onFilterChange && ( diff --git a/frontend/src/components/gallery/PhotoLightbox.tsx b/frontend/src/components/gallery/PhotoLightbox.tsx index 8d07881..d4f65e8 100644 --- a/frontend/src/components/gallery/PhotoLightbox.tsx +++ b/frontend/src/components/gallery/PhotoLightbox.tsx @@ -3,7 +3,7 @@ import { useDevToolsProtection } from '../../hooks/useDevToolsProtection'; import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut, MessageSquare, Heart, Star } from 'lucide-react'; import type { Photo } from '../../types'; import { useDownloadPhoto } from '../../hooks/useGallery'; -import { AuthenticatedImage } from '../common'; +import { AuthenticatedImage, AuthenticatedVideo } from '../common'; import { PhotoFeedback } from './PhotoFeedback'; import { feedbackService } from '../../services/feedback.service'; import { FeedbackIdentityModal } from './FeedbackIdentityModal'; @@ -64,6 +64,11 @@ export const PhotoLightbox: React.FC = ({ const downloadPhotoMutation = useDownloadPhoto(); const currentPhoto = photos[currentIndex]; + const isVideo = currentPhoto + ? (currentPhoto.media_type === 'video' || + (currentPhoto.mime_type && currentPhoto.mime_type.startsWith('video/')) || + currentPhoto.type === 'video') + : false; // DevTools protection for the lightbox when enhanced protection is enabled useDevToolsProtection({ @@ -361,27 +366,31 @@ export const PhotoLightbox: React.FC = ({ - - - - - {Math.round(zoom * 100)}% - - = 3} - className="p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed" - aria-label="Zoom in" - > - - - - + {!isVideo && ( + <> + + + + + {Math.round(zoom * 100)}% + + = 3} + className="p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed" + aria-label="Zoom in" + > + + + + + + )} {allowDownloads && ( = ({ {/* Image container */} 1 ? (isDragging ? 'grabbing' : 'grab') : 'default', + cursor: isVideo ? 'default' : zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default', right: isDesktopFeedback ? `${desktopFeedbackWidth}px` : 0, }} > - { - 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', { - photoId: currentPhoto.id, - violationType, - protectionLevel, - zoom - }); - } - - // For maximum protection, close lightbox on violation - if (protectionLevel === 'maximum' && - ['devtools_detected', 'print_screen_detected', 'canvas_access_blocked'].includes(violationType)) { - onClose(); - } - }} - /> + {isVideo ? ( + + ) : ( + { + 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', { + photoId: currentPhoto.id, + violationType, + protectionLevel, + zoom + }); + } + + // For maximum protection, close lightbox on violation + if (protectionLevel === 'maximum' && + ['devtools_detected', 'print_screen_detected', 'canvas_access_blocked'].includes(violationType)) { + onClose(); + } + }} + /> + )} {/* Touch/swipe indicators for mobile */} diff --git a/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx b/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx index 01763fb..ffb828a 100644 --- a/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx +++ b/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Download, Maximize2, Check, MessageSquare, Star, Heart } from 'lucide-react'; +import { Download, Maximize2, Check, MessageSquare, Star, Heart, Video } from 'lucide-react'; import { useInView } from 'react-intersection-observer'; import { useTheme } from '../../../contexts/ThemeContext'; import { AuthenticatedImage } from '../../common'; @@ -155,6 +155,10 @@ const GridPhoto: React.FC = ({ ? 'opacity-100 md:opacity-100' : 'opacity-0 md:opacity-0'; + const isVideo = (photo.media_type === 'video') || + (photo.mime_type && photo.mime_type.startsWith('video/')) || + photo.type === 'video'; + const handlePhotoClick = (e: React.MouseEvent) => { if (isTouchDevice && !overlayVisible && !isSelectionMode) { e.preventDefault(); @@ -318,6 +322,15 @@ const GridPhoto: React.FC = ({ )} + {isVideo && ( + + + + {t('common.video', 'Video')} + + + )} + {photo.type === 'collage' && ( diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json index 5e52533..e3ef0f2 100644 --- a/frontend/src/i18n/locales/de.json +++ b/frontend/src/i18n/locales/de.json @@ -26,6 +26,9 @@ "uploaded": "Hochgeladen", "photo": "Foto", "photos": "Fotos", + "video": "Video", + "videos": "Videos", + "media": "Medien", "restore": "Wiederherstellen", "actions": "Aktionen", "refresh": "Aktualisieren", @@ -49,12 +52,15 @@ "eventSpecific": "(Veranstaltungsspezifisch)", "clickToUpload": "Klicken zum Hochladen oder per Drag & Drop", "fileRequirements": "JPEG, PNG oder WebP (max. 50MB pro Datei, {{limit}} Dateien pro Upload)", + "fileRequirementsMedia": "JPEG-, PNG- oder WebP-Bilder sowie MP4/MOV/WEBM-Videos (max. 50MB pro Datei, {{limit}} Dateien pro Upload)", + "unsupportedFiles": "Einige Dateien wurden übersprungen, da das Format nicht unterstützt wird (JPEG/PNG/WebP/MP4/MOV/WEBM verwenden).", "selectedFiles": "Ausgewählte Dateien", "uploading": "Wird hochgeladen...", "uploadComplete": "Upload abgeschlossen!", "uploadFailed": "Upload fehlgeschlagen", "someFilesFailed": "Einige Dateien konnten nicht hochgeladen werden", "uploadPhotos": "Fotos hochladen", + "uploadMedia": "Fotos & Videos hochladen", "importExternal": "Aus externem Ordner importieren", "externalImportInfo": "Alle Bilder aus dem ausgewählten Ordner werden importiert.", "selectExternalFolder": "Externen Ordner unter /external-media auswählen", @@ -64,7 +70,9 @@ "tooManyFiles": "Maximal {{limit}} Dateien können gleichzeitig hochgeladen werden", "limitInfo": "{{selected}} von {{limit}} Dateien ausgewählt ({{remaining}} verbleibend)", "limitReached": "Upload-Limit erreicht ({{limit}} Dateien pro Vorgang)", - "uploadingChunks": "Lade {{count}} Dateien in {{total}} Teilen hoch..." + "uploadingChunks": "Lade {{count}} Dateien in {{total}} Teilen hoch...", + "mediaCategory": "Medienkategorie", + "uploadAction": "{{count}} Dateien hochladen" }, "navigation": { "dashboard": "Dashboard", @@ -513,6 +521,13 @@ "selectAll": "Alle auswählen", "deselectAll": "Auswahl aufheben", "downloadSelected": "{{count}} ausgewählte herunterladen", + "deleteSelected": "Ausgewählte löschen", + "photosCount": "{{count}} Foto", + "photosCount_plural": "{{count}} Fotos", + "searchByFilename": "Nach Dateinamen suchen...", + "uncategorized": "Ohne Kategorie", + "sortAscending": "Aufsteigend sortieren", + "sortDescending": "Absteigend sortieren", "remaining": "verbleibend", "selectPhotosHint": "Tipp: Verwenden Sie Strg+Klick (Cmd+Klick auf Mac), um schnell mehrere Fotos auszuwählen", "filters": "Filter", @@ -521,7 +536,12 @@ "toggleMenu": "Menü umschalten", "allCategories": "Alle Kategorien", "categories": "Kategorien", + "mediaType": "Medien", + "allMedia": "Alle Medien", + "photosOnly": "Fotos", + "videosOnly": "Videos", "download": "Herunterladen", + "noMedia": "Noch keine Medien hochgeladen", "searchPlaceholder": "Fotos suchen...", "sortBy": "Sortieren nach", "sortByDate": "Nach Datum sortieren", diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index f94b2b9..d6e69e2 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -26,6 +26,9 @@ "uploaded": "Uploaded", "photo": "photo", "photos": "photos", + "video": "video", + "videos": "videos", + "media": "media", "restore": "Restore", "actions": "Actions", "refresh": "Refresh", @@ -49,12 +52,15 @@ "eventSpecific": "(Event specific)", "clickToUpload": "Click to upload or drag and drop", "fileRequirements": "JPEG, PNG or WebP (max 50MB per file, {{limit}} files per upload)", + "fileRequirementsMedia": "JPEG, PNG or WebP images, plus MP4/MOV/WEBM videos (max 50MB per file, {{limit}} files per upload)", + "unsupportedFiles": "Some files were skipped because the format is not supported (use JPEG/PNG/WebP/MP4/MOV/WEBM).", "selectedFiles": "Selected files", "uploading": "Uploading...", "uploadComplete": "Upload complete!", "uploadFailed": "Upload failed", "someFilesFailed": "Some files failed to upload", "uploadPhotos": "Upload Photos", + "uploadMedia": "Upload Photos & Videos", "importExternal": "Import from External Folder", "externalImportInfo": "All pictures from the selected folder will be imported.", "selectExternalFolder": "Select external folder under /external-media", @@ -64,7 +70,9 @@ "tooManyFiles": "Maximum {{limit}} files can be uploaded at once", "limitInfo": "{{selected}} of {{limit}} files selected ({{remaining}} remaining)", "limitReached": "Upload limit reached ({{limit}} files per batch)", - "uploadingChunks": "Uploading {{count}} files in {{total}} batches..." + "uploadingChunks": "Uploading {{count}} files in {{total}} batches...", + "mediaCategory": "Media category", + "uploadAction": "Upload {{count}} files" }, "navigation": { "dashboard": "Dashboard", @@ -178,6 +186,13 @@ "selectAll": "Select All", "deselectAll": "Deselect All", "downloadSelected": "Download {{count}} Selected", + "deleteSelected": "Delete Selected", + "photosCount": "{{count}} photo", + "photosCount_plural": "{{count}} photos", + "searchByFilename": "Search by filename...", + "uncategorized": "Uncategorized", + "sortAscending": "Sort ascending", + "sortDescending": "Sort descending", "remaining": "remaining", "selectPhotosHint": "Tip: Use Ctrl+Click (Cmd+Click on Mac) to quickly select multiple photos", "filters": "Filters", @@ -186,7 +201,12 @@ "toggleMenu": "Toggle menu", "allCategories": "All Categories", "categories": "Categories", + "mediaType": "Media", + "allMedia": "All media", + "photosOnly": "Photos", + "videosOnly": "Videos", "download": "Download", + "noMedia": "No media uploaded yet", "searchPlaceholder": "Search photos...", "sortBy": "Sort By", "sortByDate": "Sort by Date", diff --git a/frontend/src/pages/admin/EventDetailsPage.tsx b/frontend/src/pages/admin/EventDetailsPage.tsx index 6e2033b..fd1c63d 100644 --- a/frontend/src/pages/admin/EventDetailsPage.tsx +++ b/frontend/src/pages/admin/EventDetailsPage.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { @@ -208,6 +208,26 @@ export const EventDetailsPage: React.FC = () => { enabled: !!id && (activeTab === 'photos' || isEditing), }); + const mediaTypes = useMemo(() => { + const types = new Set<'photo' | 'video'>(); + photos.forEach((p: any) => { + const mediaType = (p.media_type as 'photo' | 'video' | undefined) + || ((p.mime_type && String(p.mime_type).startsWith('video/')) || p.type === 'video' ? 'video' : 'photo'); + if (mediaType === 'video' || mediaType === 'photo') { + types.add(mediaType); + } + }); + return types; + }, [photos]); + + const showMediaFilter = mediaTypes.has('photo') && mediaTypes.has('video'); + + useEffect(() => { + if (!showMediaFilter && photoFilters.media_type) { + setPhotoFilters(prev => ({ ...prev, media_type: undefined })); + } + }, [showMediaFilter, photoFilters.media_type]); + // Fetch categories for the event const { data: categories = [] } = useQuery({ queryKey: ['admin-event-categories', id], @@ -1237,6 +1257,12 @@ export const EventDetailsPage: React.FC = () => { onCategoryChange={(categoryId) => setPhotoFilters(prev => ({ ...prev, category_id: categoryId }))} onSearchChange={(search) => setPhotoFilters(prev => ({ ...prev, search }))} onSortChange={(sort, order) => setPhotoFilters(prev => ({ ...prev, sort, order }))} + mediaType={photoFilters.media_type || 'all'} + onMediaTypeChange={(mediaType) => setPhotoFilters(prev => ({ + ...prev, + media_type: mediaType === 'all' ? undefined : mediaType + }))} + showMediaFilter={showMediaFilter} /> {/* Actions Bar */} diff --git a/frontend/src/services/photos.service.ts b/frontend/src/services/photos.service.ts index 6556af1..839c6eb 100644 --- a/frontend/src/services/photos.service.ts +++ b/frontend/src/services/photos.service.ts @@ -7,11 +7,13 @@ export interface AdminPhoto { url: string; thumbnail_url: string | null; type: string; - category_id: number | null; + category_id: number | string | null; category_name: string | null; category_slug: string | null; size: number; uploaded_at: string; + media_type?: 'photo' | 'video'; + mime_type?: string | null; view_count?: number; download_count?: number; // Feedback fields @@ -23,8 +25,9 @@ export interface AdminPhoto { } export interface PhotoFilters { - category_id?: number | null; + category_id?: number | string | null; type?: string; + media_type?: 'photo' | 'video'; search?: string; sort?: 'date' | 'name' | 'size' | 'rating'; order?: 'asc' | 'desc'; @@ -39,6 +42,7 @@ class PhotosService { params.append('category_id', filters.category_id?.toString() || ''); } if (filters.type) params.append('type', filters.type); + if (filters.media_type) params.append('media_type', filters.media_type); if (filters.search) params.append('search', filters.search); if (filters.sort) params.append('sort', filters.sort); if (filters.order) params.append('order', filters.order); diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index 3281c64..a9d88b0 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -55,8 +55,10 @@ export interface Photo { secure_url_template?: string; download_url_template?: string; requires_token?: boolean; - type: 'collage' | 'individual'; - category_id?: number; + type: 'collage' | 'individual' | 'video'; + media_type?: 'photo' | 'video'; + mime_type?: string; + category_id?: number | string | null; category_name?: string; category_slug?: string; size: number; @@ -71,7 +73,7 @@ export interface Photo { } export interface PhotoCategory { - id: number; + id: number | string; name: string; slug: string; is_global: boolean; diff --git a/video-test-data/bear-320x240.mp4 b/video-test-data/bear-320x240.mp4 new file mode 100644 index 0000000..1becba2 --- /dev/null +++ b/video-test-data/bear-320x240.mp4 @@ -0,0 +1 @@ +404: Not Found \ No newline at end of file diff --git a/video-test-data/bear-320x240.webm b/video-test-data/bear-320x240.webm new file mode 100644 index 0000000..a1b4150 Binary files /dev/null and b/video-test-data/bear-320x240.webm differ
{file.name} @@ -288,7 +298,9 @@ export const PhotoUpload: React.FC = ({ eventId, onUploadCompl disabled={selectedFiles.length === 0 || isUploading} leftIcon={isUploading ? : } > - {isUploading ? t('upload.uploading') : t('common.upload') + ` ${selectedFiles.length} ${t(selectedFiles.length === 1 ? 'common.photo' : 'common.photos')}`} + {isUploading + ? t('upload.uploading') + : t('upload.uploadAction', { count: selectedFiles.length }) || `Upload ${selectedFiles.length} files`}
- {photoCount} {photoCount === 1 ? t('common.photo') : t('common.photos')} + {photoCount} {t('common.media', 'media')}