feat: add video playback support in lightbox and photo grid

- Lightbox renders <video> with controls for video assets
- PhotoGrid shows video indicator overlay on video thumbnails
- Skip video preloading in lightbox (streams on demand)
- Add video-related CSS styles
- Update catch-all page to pass video URLs to components
This commit is contained in:
ralksta
2026-05-29 17:05:12 +02:00
parent e9063d3a71
commit 5dffadbe3c
5 changed files with 81 additions and 21 deletions

View File

@@ -15,9 +15,11 @@ import { FadeIn } from '@/components/FadeIn';
export interface PhotoItem {
id: string;
type: 'image' | 'video';
thumbUrl: string;
previewUrl: string;
originalUrl: string;
videoUrl?: string;
exifUrl: string;
blurDataURL?: string;
dominantColor?: string;
@@ -173,6 +175,14 @@ export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridPr
? { placeholder: 'blur' as const, blurDataURL: asset.blurDataURL }
: {})}
/>
{asset.type === 'video' && (
<div className="photo-grid__item-play" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="12" r="12" fillOpacity="0.55" />
<polygon points="10,8 10,16 17,12" fill="white" />
</svg>
</div>
)}
{(asset.camera || asset.lens) && (
<div className="photo-grid__item-exif" aria-hidden="true">
{[asset.camera, asset.lens, asset.focalLength].filter(Boolean).join(' · ')}