"use client" /** * HoverVideoPlayer Component * * A React component that plays video on hover/touch with advanced features like: * - Lazy loading and intersection observer support * - Mobile touch support * - Picture-in-Picture * - Custom overlay support * - Thumbnail support * - Playback controls * * @example * ```tsx * } * loadingOverlay={} * enableControls * /> * ``` */ import React, { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react" import Image from "next/image" import { Maximize, Minimize, Pause, Play, Volume2, VolumeX } from "lucide-react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" const hoverTransition = { duration: 0.18, ease: [0.2, 0, 0, 1], } as const const hoverSpring = { type: "spring", duration: 0.3, bounce: 0, } as const // Types interface VideoPlayerState { isHovering: boolean isPlaying: boolean isLoading: boolean progress: number muted: boolean volume: number isPiP: boolean isMobile: boolean controlsVisible: boolean showThumbnail: boolean isInView: boolean } interface HoverVideoPlayerProps { videoSrc: string thumbnailSrc?: string hoverOverlay?: React.ReactNode pausedOverlay?: React.ReactNode loadingOverlay?: React.ReactNode playbackStartDelay?: number restartOnPaused?: boolean unloadVideoOnPaused?: boolean playbackRangeStart?: number playbackRangeEnd?: number muted?: boolean loop?: boolean preload?: "auto" | "metadata" | "none" className?: string style?: React.CSSProperties onHoverStart?: () => void onHoverEnd?: () => void enableControls?: boolean cropTop?: number cropBottom?: number isVimeo?: boolean } interface HoverVideoPlayerContextType { isPlaying: boolean isHovering: boolean isLoading: boolean progress: number volume: number muted: boolean isPiP: boolean isMobile: boolean controlsVisible: boolean videoRef: React.RefObject togglePlay: () => void toggleMute: () => void togglePiP: () => void setVolume: (value: number) => void setProgress: (value: number) => void setVideoLoading: (isLoading: boolean) => void setVideoPlaying: (isPlaying: boolean) => void cropTop: number cropBottom: number thumbnailSrc?: string } interface VimeoPlayer { destroy: () => void ready: () => Promise setVolume: (volume: number) => Promise play: () => Promise pause: () => Promise on: (event: string, callback: (...args: any[]) => void) => void off: (event: string, callback: (...args: any[]) => void) => void } interface VimeoConstructor { Player: { new (element: HTMLElement, options: any): VimeoPlayer } } // Context const HoverVideoPlayerContext = createContext(null) /** * Custom hook to access HoverVideoPlayer context * @throws {Error} If used outside of HoverVideoPlayerContext */ const useHoverVideoPlayer = () => { const context = useContext(HoverVideoPlayerContext) if (!context) { throw new Error( "useHoverVideoPlayer must be used within a HoverVideoPlayer" ) } return context } // Add this helper function before the HoverVideoPlayer component function debounce any>( func: T, wait: number ): { (...args: Parameters): void cancel: () => void } { let timeoutId: NodeJS.Timeout | null = null const debouncedFn = (...args: Parameters) => { if (timeoutId) clearTimeout(timeoutId) timeoutId = setTimeout(() => func(...args), wait) } debouncedFn.cancel = () => { if (timeoutId) { clearTimeout(timeoutId) timeoutId = null } } return debouncedFn } // Add this helper function function isVimeoUrl(url: string): boolean { return url.includes("player.vimeo.com/video/") || url.includes("vimeo.com/") } // Add this helper function function loadVimeoSDK(): Promise { return new Promise((resolve, reject) => { if ((window as any).Vimeo) { resolve((window as any).Vimeo) return } const script = document.createElement("script") script.src = "https://player.vimeo.com/api/player.js" script.async = true script.onload = () => resolve((window as any).Vimeo) script.onerror = reject document.body.appendChild(script) }) } // Main Component const HoverVideoPlayer: React.FC = ({ videoSrc, thumbnailSrc, hoverOverlay, pausedOverlay, loadingOverlay, playbackStartDelay = 0, restartOnPaused = false, unloadVideoOnPaused = false, playbackRangeStart, playbackRangeEnd, muted: initialMuted = false, loop = true, preload = "metadata", className, style, onHoverStart, onHoverEnd, enableControls = false, cropTop = 0, cropBottom = 0, isVimeo = false, }) => { const isVimeoVideo = isVimeo || isVimeoUrl(videoSrc) // Refs for DOM elements and timing const containerRef = useRef(null) const videoRef = useRef(null) const playbackTimeoutRef = useRef(null) const lastPlayAttemptRef = useRef(0) // Consolidated state management const [state, setState] = useState({ isHovering: false, isPlaying: false, isLoading: false, progress: 0, muted: initialMuted, volume: 1, isPiP: false, isMobile: false, controlsVisible: false, showThumbnail: true, isInView: false, }) // Mobile detection const checkMobile = useMemo( () => debounce(() => { setState((prev) => ({ ...prev, isMobile: window.innerWidth <= 768 })) }, 200), [] ) // Event Handlers const handleTouchStart = useCallback(() => { if (state.isMobile) { setState((prev) => ({ ...prev, controlsVisible: !prev.controlsVisible })) } }, [state.isMobile]) const handleHoverStart = useCallback(() => { if (!state.isMobile) { console.log("Hover start") setState((prev) => ({ ...prev, isHovering: true })) onHoverStart?.() } }, [state.isMobile, onHoverStart]) const handleHoverEnd = useCallback(() => { if (!state.isMobile) { console.log("Hover end") setState((prev) => ({ ...prev, isHovering: false })) onHoverEnd?.() } }, [state.isMobile, onHoverEnd]) // Video Playback Controls const playVideo = useCallback(() => { if (!videoRef.current || !state.isInView) { console.log("PlayVideo blocked:", { hasVideo: !!videoRef.current, isInView: state.isInView, }) return } const video = videoRef.current console.log("Attempting to play video:", { readyState: video.readyState, paused: video.paused, currentSrc: video.currentSrc, }) // Reset loading state when attempting to play setState((prev) => ({ ...prev, isLoading: true })) // Ensure video is ready to play const attemptPlay = () => { video .play() .then(() => { console.log("Video play success") setState((prev) => ({ ...prev, isLoading: false, isPlaying: true, showThumbnail: false, })) }) .catch((error) => { console.log("Video play error:", error.name) if (error.name === "NotAllowedError") { // User interaction required - show thumbnail setState((prev) => ({ ...prev, isLoading: false, showThumbnail: true, })) } else if (error.name !== "AbortError") { console.error("HoverVideoPlayer: Playback error:", error) setState((prev) => ({ ...prev, isLoading: false, showThumbnail: true, })) } }) } if (video.readyState >= 3) { console.log("Video ready, attempting immediate play") attemptPlay() } else { console.log("Video not ready, waiting for canplay event") const handleCanPlay = () => { console.log("Canplay event fired") video.removeEventListener("canplay", handleCanPlay) attemptPlay() } video.addEventListener("canplay", handleCanPlay) } }, [state.isInView]) const pauseVideo = useCallback(() => { if (!videoRef.current) return videoRef.current.pause() setState((prev) => ({ ...prev, isPlaying: false, showThumbnail: true, })) if (restartOnPaused) { videoRef.current.currentTime = playbackRangeStart || 0 } }, [restartOnPaused, playbackRangeStart]) // Effects // Mobile detection effect useEffect(() => { checkMobile() window.addEventListener("resize", checkMobile) return () => { window.removeEventListener("resize", checkMobile) checkMobile.cancel() } }, [checkMobile]) // Intersection Observer effect useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { const isNowInView = entry.isIntersecting setState((prev) => ({ ...prev, isInView: isNowInView })) if (!isNowInView) { pauseVideo() } }) }, { root: null, rootMargin: "50px", threshold: 0.1, } ) if (containerRef.current) { observer.observe(containerRef.current) } return () => observer.disconnect() }, [pauseVideo]) // Video event handlers effect useEffect(() => { const video = videoRef.current if (!video || !state.isInView) return const handlers = { loadstart: () => { console.log("Video loadstart") setState((prev) => ({ ...prev, isLoading: true })) }, loadeddata: () => { console.log("Video loadeddata", { readyState: video.readyState, duration: video.duration, paused: video.paused, isHovering: state.isHovering, controlsVisible: state.controlsVisible, }) setState((prev) => ({ ...prev, isLoading: false })) // Only attempt to play if we're hovering or controls are visible if (state.isHovering || state.controlsVisible) { console.log("Video loaded and hover/controls active, attempting play") playVideo() } }, canplay: () => { console.log("Video canplay event") }, playing: () => { console.log("Video playing") setState((prev) => ({ ...prev, isLoading: false, isPlaying: true, showThumbnail: false, })) }, pause: () => { console.log("Video paused") setState((prev) => ({ ...prev, isPlaying: false, showThumbnail: true, })) }, error: (e: Event) => { const videoError = (e.target as HTMLVideoElement).error console.error("Video error:", { code: videoError?.code, message: videoError?.message, currentSrc: video.currentSrc, }) setState((prev) => ({ ...prev, isLoading: false, showThumbnail: true, })) }, } // Add event listeners Object.entries(handlers).forEach(([event, handler]) => { video.addEventListener(event, handler) }) // Set initial source and load the video if (!video.src) { console.log("Setting video source:", videoSrc) video.src = videoSrc video.load() } return () => { Object.entries(handlers).forEach(([event, handler]) => { video.removeEventListener(event, handler) }) } }, [ state.isInView, state.isHovering, state.controlsVisible, playVideo, videoSrc, ]) // Playback control effect useEffect(() => { console.log("Playback control effect:", { isInView: state.isInView, isMobile: state.isMobile, controlsVisible: state.controlsVisible, isHovering: state.isHovering, }) if (!state.isInView) { console.log("Not in view, skipping playback") return } if (isVimeoVideo) { return } let playbackTimeout: NodeJS.Timeout | undefined if (state.isMobile) { if (state.controlsVisible) { console.log("Mobile controls visible, playing") playVideo() } else { console.log("Mobile controls hidden, pausing") pauseVideo() } } else if (state.isHovering) { console.log( "Hovering, scheduling playback with delay:", playbackStartDelay ) playbackTimeout = setTimeout(() => { console.log("Playback delay completed, attempting to play") playVideo() }, playbackStartDelay) } else { console.log("Not hovering, pausing") pauseVideo() } return () => { if (playbackTimeout) { console.log("Clearing playback timeout") clearTimeout(playbackTimeout) } } }, [ state.isInView, state.isMobile, state.controlsVisible, state.isHovering, playVideo, pauseVideo, playbackStartDelay, isVimeoVideo, ]) // Volume effect useEffect(() => { const video = videoRef.current if (!video) return video.muted = state.muted video.volume = state.volume }, [state.muted, state.volume]) // Control handlers const togglePlayPause = useCallback(() => { if (state.isPlaying) { pauseVideo() } else { playVideo() } }, [state.isPlaying, pauseVideo, playVideo]) const toggleMute = useCallback(() => { setState((prev) => ({ ...prev, muted: !prev.muted })) }, []) const togglePiP = useCallback(async () => { if (!document.pictureInPictureEnabled) return try { if (document.pictureInPictureElement) { await document.exitPictureInPicture() setState((prev) => ({ ...prev, isPiP: false })) } else if (videoRef.current) { await videoRef.current.requestPictureInPicture() setState((prev) => ({ ...prev, isPiP: true })) } } catch (error) { console.error("PiP error:", error) } }, []) const setVideoLoading = useCallback((isLoading: boolean) => { setState((prev) => ({ ...prev, isLoading })) }, []) const setVideoPlaying = useCallback((isPlaying: boolean) => { setState((prev) => ({ ...prev, isPlaying, showThumbnail: !isPlaying, })) }, []) // Context value const contextValue = useMemo( () => ({ isPlaying: state.isPlaying, isHovering: state.isHovering, isLoading: state.isLoading, progress: state.progress, volume: state.volume, muted: state.muted, isPiP: state.isPiP, isMobile: state.isMobile, controlsVisible: state.controlsVisible, videoRef, togglePlay: togglePlayPause, toggleMute, togglePiP, setVolume: (value) => setState((prev) => ({ ...prev, volume: value })), setProgress: (value) => setState((prev) => ({ ...prev, progress: value })), setVideoLoading, setVideoPlaying, cropTop, cropBottom, thumbnailSrc, }), [ state, togglePlayPause, toggleMute, togglePiP, setVideoLoading, setVideoPlaying, cropTop, cropBottom, thumbnailSrc, ] ) // Render return ( {/* Video Element */} {state.isInView && ( )} {/* Thumbnail */} {thumbnailSrc && } {/* Overlays */} {pausedOverlay && ( {pausedOverlay} )} {loadingOverlay && ( {loadingOverlay} )} {hoverOverlay && !state.isMobile && ( {hoverOverlay} )} {/* Controls */} {enableControls && (

)} ) } /** * Video component that handles the actual video element */ const HoverVideoPlayerVideo: React.FC<{ src: string unloadVideoOnPaused: boolean loop: boolean preload: string }> = ({ src, loop, preload }) => { const { videoRef, muted, cropTop, cropBottom, isHovering, isMobile, controlsVisible, setVideoLoading, setVideoPlaying, } = useHoverVideoPlayer() const isVimeoVideo = isVimeoUrl(src) const containerRef = useRef(null) const playerRef = useRef(null) const shouldPlayVimeo = isMobile ? controlsVisible : isHovering const shouldPlayVimeoRef = useRef(shouldPlayVimeo) useEffect(() => { shouldPlayVimeoRef.current = shouldPlayVimeo }, [shouldPlayVimeo]) useEffect(() => { if (!isVimeoVideo || !containerRef.current) return const videoId = src.split("/").pop() || "" let player: VimeoPlayer | null = null setVideoLoading(true) loadVimeoSDK() .then((Vimeo) => { if (!containerRef.current) return player = new Vimeo.Player(containerRef.current, { id: videoId, autopause: false, muted, loop, responsive: true, controls: false, autoplay: false, volume: 1, }) playerRef.current = player player.ready().then(() => { console.log("Vimeo video loaded") setVideoLoading(false) if (shouldPlayVimeoRef.current) { player ?.play() .then(() => setVideoPlaying(true)) .catch((error) => { setVideoPlaying(false) console.error("Vimeo play error:", error) }) } }) player.on("play", () => { console.log("Vimeo video playing") setVideoLoading(false) setVideoPlaying(true) }) player.on("pause", () => { console.log("Vimeo video paused") setVideoPlaying(false) }) player.on("error", (err) => { setVideoLoading(false) setVideoPlaying(false) console.error("Vimeo player error:", err) }) }) .catch((error) => { setVideoLoading(false) console.error("Failed to load Vimeo SDK:", error) }) return () => { if (player) { player.destroy() playerRef.current = null } } }, [isVimeoVideo, src, muted, loop, setVideoLoading, setVideoPlaying]) useEffect(() => { if (!isVimeoVideo) return const player = playerRef.current if (!player) return if (shouldPlayVimeo) { setVideoLoading(true) player .play() .then(() => { setVideoLoading(false) setVideoPlaying(true) }) .catch((error) => { setVideoLoading(false) setVideoPlaying(false) console.error("Vimeo play error:", error) }) } else { player .pause() .then(() => setVideoPlaying(false)) .catch((error) => { console.error("Vimeo pause error:", error) }) } }, [isVimeoVideo, shouldPlayVimeo, setVideoLoading, setVideoPlaying]) if (isVimeoVideo) { return

} return (

Hover Video Player

Instalação

Dependências