Media Card

1import * as React from 'react';
2import { cn, formatCount } from '@/lib/utils/deso';
3import { ImageIcon, PlayCircle, ImagesIcon, Music } from 'lucide-react';
4import { UserInfo } from './user-info';
5import { ProfilePicture } from './profile-picture';
6import { Timestamp } from './timestamp';
7import { PostText } from './post-text';
8import { PostEngagement } from './post-engagement';
9import { Profile } from '@/lib/schemas/deso';
10import ReactPlayer from 'react-player/lazy';
11 
12export type MediaType = 'image' | 'video' | 'audio' | 'carousel';
13 
14export interface MediaCardProps {
15  id: string;
16  imageUrl: string;
17  mediaType: MediaType;
18  viewCount: number;
19  duration?: string; 
20  showStats?: boolean;
21  showDuration?: boolean;
22  videoUrl?: string;
23  publicKey: string;
24  profile?: Profile;
25  timestamp: Date | string;
26  title: string;
27  description?: string;
28  compact?: boolean;
29  showIcon?: boolean;
30  onClick?: () => void;
31  className?: string;
32}
33 
34const mediaTypeConfig: {
35  [key in MediaType]: {
36    Icon: React.ComponentType<{ className?: string }>;
37  };
38} = {
39  image: { Icon: ImageIcon },
40  video: { Icon: PlayCircle },
41  audio: { Icon: Music },
42  carousel: { Icon: ImagesIcon },
43};
44 
45export const MediaCard = ({
46  id,
47  imageUrl,
48  mediaType,
49  viewCount,
50  duration,
51  showStats = true,
52  showDuration = true,
53  videoUrl,
54  publicKey,
55  profile,
56  timestamp,
57  title,
58  description,
59  onClick,
60  className,
61  compact = false,
62  showIcon = false,
63}: MediaCardProps) => {
64  const [isHovered, setIsHovered] = React.useState(false);
65  const [showVideo, setShowVideo] = React.useState(false);
66  const [fadeState, setFadeState] = React.useState<'thumbnail' | 'transitioning' | 'video'>('thumbnail');
67  const { Icon } = mediaTypeConfig[mediaType];
68 
69  // Handle fade transitions when hovering
70  React.useEffect(() => {
71    let timeoutId: NodeJS.Timeout;
72    
73    if (isHovered && videoUrl && mediaType === 'video') {
74      // Start fade out of thumbnail
75      setFadeState('transitioning');
76      timeoutId = setTimeout(() => {
77        // Show video and fade in
78        setShowVideo(true);
79        setFadeState('video');
80      }, 200); // 200ms for fade out, then show video
81    } else {
82      // Fade out video and show thumbnail
83      if (showVideo) {
84        setFadeState('transitioning');
85        setTimeout(() => {
86          setShowVideo(false);
87          setFadeState('thumbnail');
88        }, 200); // 200ms fade out before switching back
89      } else {
90        setFadeState('thumbnail');
91// … truncated