Video Reel

1'use client';
2 
3import React, { useState, useRef, useEffect } from 'react';
4import { ChevronUp, ChevronDown, Play, Pause, Volume2, VolumeX } from 'lucide-react';
5import { cn } from '@/lib/utils/deso';
6import { Button } from '@/components/ui/button';
7import { UserInfo } from './user-info';
8import { PostText } from './post-text';
9import { PostEngagement } from './post-engagement';
10import { Profile } from '@/lib/schemas/deso';
11import ReactPlayer from 'react-player/lazy';
12import { Timestamp } from './timestamp';
13 
14export interface VideoReelItem {
15  id: string;
16  videoUrl: string;
17  publicKey: string;
18  profile?: Profile;
19  text?: string;
20  timestamp: Date;
21  engagement: {
22    likes: number;
23    comments: number;
24    reposts: number;
25    diamonds: number;
26    diamondValue?: string;
27    views: number;
28  };
29  isLiked?: boolean;
30  isReposted?: boolean;
31}
32 
33export interface VideoReelProps {
34  videos: VideoReelItem[];
35  variant?: 'single' | 'carousel' | 'carousel-with-arrows' | 'full-height';
36  className?: string;
37  autoPlay?: boolean;
38  showEngagement?: boolean;
39  onLike?: (videoId: string) => void;
40  onComment?: (videoId: string) => void;
41  onRepost?: (videoId: string) => void;
42  onDiamond?: (videoId: string) => void;
43  showVideoProgress?: boolean;
44}
45 
46export function VideoReel({
47  videos,
48  variant = 'single',
49  className,
50  autoPlay = true,
51  showEngagement = true,
52  onLike,
53  onComment,
54  onRepost,
55  onDiamond,
56  showVideoProgress = true,
57}: VideoReelProps) {
58  const [currentIndex, setCurrentIndex] = useState(0);
59  const [isScrolling, setIsScrolling] = useState(false);
60  const [visibleVideoIds, setVisibleVideoIds] = useState<Set<string>>(new Set());
61  const [pausedVideoIds, setPausedVideoIds] = useState<Set<string>>(new Set());
62  const [showPlayIcon, setShowPlayIcon] = useState<Set<string>>(new Set());
63  const [mutedVideoIds, setMutedVideoIds] = useState<Set<string>>(new Set(videos.map(v => v.id))); // Start all muted
64  const [videoDurations, setVideoDurations] = useState<Map<string, number>>(new Map());
65  const [videoProgress, setVideoProgress] = useState<Map<string, number>>(new Map());
66  const containerRef = useRef<HTMLDivElement>(null);
67  const videoRefs = useRef<Map<string, HTMLDivElement>>(new Map());
68  const playerRefs = useRef<Map<string, any>>(new Map());
69  const currentVideo = videos[currentIndex];
70 
71  const handleScroll = (e: React.WheelEvent) => {
72    if ((variant === 'carousel' || variant === 'full-height') && videos.length > 1 && !isScrolling) {
73// … truncated