Media Gallery

1import * as React from 'react';
2import { MasonryPhotoAlbum } from 'react-photo-album';
3import { MediaItem, MediaType } from './media-item';
4import { cn } from '@/lib/utils/deso';
5import 'react-photo-album/masonry.css';
6 
7interface MediaItem {
8  id: string;
9  imageUrl: string;
10  mediaType: MediaType;
11  viewCount: number;
12}
13 
14interface MediaGalleryProps {
15  mediaItems: MediaItem[];
16  onMediaClick?: (id: string) => void;
17  className?: string;
18  variant?: 'grid' | 'masonry';
19  columns?: number;
20  columnGap?: number;
21  mediaItemClassName?: string;
22}
23 
24// Convert MediaItem to react-photo-album Photo format
25const convertToPhotos = (mediaItems: MediaItem[]) => {
26  return mediaItems.map((item) => ({
27    src: item.imageUrl,
28    width: 300, // Base width for calculations
29    height: getHeightFromUrl(item.imageUrl), // Extract height from URL
30    key: item.id,
31    mediaType: item.mediaType,
32    viewCount: item.viewCount,
33  }));
34};
35 
36const columnClasses: Record<number, string> = {
37  2: 'grid-cols-2',
38  3: 'grid-cols-3',
39  4: 'grid-cols-4',
40  5: 'grid-cols-5',
41  6: 'grid-cols-6',
42};
43 
44// Extract height from Picsum URL format
45const getHeightFromUrl = (url: string): number => {
46  const match = url.match(/\/(\d+)\/(\d+)$/);
47  if (match) {
48    return parseInt(match[2], 10);
49  }
50  return 300; // fallback height
51};
52 
53export const MediaGallery = ({
54  mediaItems,
55  onMediaClick,
56  className,
57  mediaItemClassName,
58  variant = 'grid',
59  columns = 6,
60  columnGap = 4,
61}: MediaGalleryProps) => {
62  if (variant === 'masonry') {
63    const photos = convertToPhotos(mediaItems);
64    
65    return (
66      <div className={className}>
67        <MasonryPhotoAlbum
68          photos={photos}
69          spacing={8}
70          columns={(containerWidth) => {
71            if (containerWidth < 640) return 2;
72            if (containerWidth < 768) return 3;
73            if (containerWidth < 1024) return 4;
74            if (containerWidth < 1280) return 5;
75            return 6;
76          }}
77          render={{
78            photo: ({ onClick }, { photo, width, height }) => {
79              const mediaItem = mediaItems.find(item => item.id === photo.key);
80              if (!mediaItem) return null;
81              
82              return (
83                <div style={{ width, height, position: 'relative' }}>
84                  <MediaItem
85                    imageUrl={mediaItem.imageUrl}
86                    mediaType={mediaItem.mediaType}
87                    viewCount={mediaItem.viewCount}
88// … truncated