"use client"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { ChevronLeft, ChevronRight, Pause, Play, Volume2, VolumeX, } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import type { ComponentProps, HTMLAttributes, MouseEventHandler, ReactNode, VideoHTMLAttributes, } from "react"; import { createContext, useCallback, useContext, useEffect, useRef, useState, } from "react"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { cn } from "@/lib/utils"; // Explicit type for reel items export type ReelItem = { id: string | number; type: "video" | "image"; src: string; duration: number; // Duration in seconds for both video and image alt?: string; title?: string; description?: string; }; type ReelContextType = { currentIndex: number; setCurrentIndex: (index: number) => void; isPlaying: boolean; setIsPlaying: (playing: boolean) => void; isMuted: boolean; setIsMuted: (muted: boolean) => void; progress: number; setProgress: (progress: number) => void; duration: number; setDuration: (duration: number) => void; data: ReelItem[]; currentItem: ReelItem; isNavigating: boolean; setIsNavigating: (navigating: boolean) => void; isTransitioning: boolean; setIsTransitioning: (transitioning: boolean) => void; }; const ReelContext = createContext(undefined); const useReelContext = () => { const context = useContext(ReelContext); if (!context) { throw new Error("useReelContext must be used within a Reel"); } return context; }; export type ReelProps = HTMLAttributes & { data: ReelItem[]; defaultIndex?: number; index?: number; onIndexChange?: (index: number) => void; defaultPlaying?: boolean; playing?: boolean; onPlayingChange?: (playing: boolean) => void; defaultMuted?: boolean; muted?: boolean; onMutedChange?: (muted: boolean) => void; autoPlay?: boolean; }; export const Reel = ({ className, data, defaultIndex = 0, index: controlledIndex, onIndexChange: controlledOnIndexChange, defaultPlaying, playing: controlledPlaying, onPlayingChange: controlledOnPlayingChange, defaultMuted = true, muted: controlledMuted, onMutedChange: controlledOnMutedChange, autoPlay = true, ...props }: ReelProps) => { const [currentIndex, setCurrentIndexState] = useControllableState({ defaultProp: defaultIndex, prop: controlledIndex, onChange: controlledOnIndexChange, }); const [isPlaying, setIsPlaying] = useControllableState({ defaultProp: defaultPlaying ?? autoPlay, prop: controlledPlaying, onChange: controlledOnPlayingChange, }); const [isMuted, setIsMuted] = useControllableState({ defaultProp: defaultMuted, prop: controlledMuted, onChange: controlledOnMutedChange, }); const [progress, setProgress] = useState(0); const [duration, setDuration] = useState(0); const [isNavigating, setIsNavigating] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const setCurrentIndex = useCallback( (index: number) => { setIsTransitioning(true); setProgress(0); // Reset progress immediately to prevent showing 100% during transition setCurrentIndexState(index); }, [setCurrentIndexState] ); const currentItem = data[currentIndex]; return (

); }; export type ReelContentProps = Omit< HTMLAttributes, "children" > & { children: (item: ReelItem, index: number) => ReactNode; }; export const ReelContent = ({ className, children, ...props }: ReelContentProps) => { const { currentIndex, currentItem, setIsTransitioning } = useReelContext(); const renderContent = () => { if (typeof children === "function") { return children(currentItem, currentIndex); } const childrenArray = Array.isArray(children) ? children : [children]; return childrenArray[currentIndex]; }; return (

{ // Mark transition as complete when fade-in completes setIsTransitioning(false); }} transition={{ duration: 0.3 }} > {renderContent()}

); }; export type ReelItemProps = HTMLAttributes; export const ReelItem = ({ className, ...props }: ReelItemProps) => (

); export type ReelVideoProps = VideoHTMLAttributes; const MS_TO_SECONDS = 1000; const PERCENTAGE = 100; export const ReelVideo = ({ className, ...props }: ReelVideoProps) => { const videoRef = useRef(null); const { isPlaying, isMuted, setDuration, setProgress, currentIndex, setCurrentIndex, data, progress, currentItem, isTransitioning, } = useReelContext(); const animationFrameRef = useRef(undefined); const startTimeRef = useRef(undefined); const pausedProgressRef = useRef(0); const duration = currentItem.duration; // Set duration when component mounts or currentIndex changes useEffect(() => { setDuration(duration); // Don't reset progress here anymore - it's handled in ReelContent after transition if (!isTransitioning) { pausedProgressRef.current = 0; } }, [duration, setDuration, isTransitioning]); // Handle muting useEffect(() => { const video = videoRef.current; if (!video) { return; } video.muted = isMuted; }, [isMuted]); // Store progress when pausing useEffect(() => { if (!isPlaying) { pausedProgressRef.current = progress; } }, [isPlaying, progress]); // Handle play/pause with duration-based progress useEffect(() => { const video = videoRef.current; if (!video) { return; } if (isPlaying && !isTransitioning) { video.play().catch(() => { // Ignore autoplay errors }); // Start progress animation only when not transitioning const elapsedTime = (pausedProgressRef.current * duration) / PERCENTAGE; startTimeRef.current = performance.now() - elapsedTime * MS_TO_SECONDS; const updateProgress = (currentTime: number) => { const elapsed = (currentTime - (startTimeRef.current || 0)) / MS_TO_SECONDS; const newProgress = (elapsed / duration) * PERCENTAGE; if (newProgress >= PERCENTAGE) { const totalItems = data?.length || 0; if (currentIndex < totalItems - 1) { setCurrentIndex(currentIndex + 1); } else { setCurrentIndex(0); } } else { setProgress(newProgress); animationFrameRef.current = requestAnimationFrame(updateProgress); } }; animationFrameRef.current = requestAnimationFrame(updateProgress); } else if (!isTransitioning) { video.pause(); } return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } }; }, [ isPlaying, duration, currentIndex, setProgress, setCurrentIndex, data, isTransitioning, ]); // biome-ignore lint/correctness/useExhaustiveDependencies: Reset video when index changes useEffect(() => { const video = videoRef.current; if (video) { video.currentTime = 0; } }, [currentIndex]); return (

reel

Instalação

Dependências

Registry dependencies