52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T8d00,"use client"; import React, { createContext, useContext, useEffect, useRef, useState, useCallback } from "react"; import { ChevronDown, ChevronUp, AlertCircle, Maximize2, Minimize2, Loader2, Pause, PictureInPicture2, Play, RotateCcw, RotateCw, Volume, Volume1, Volume2, VolumeOff } from "lucide-react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/8starlabs-ui/blocks/button"; interface VideoContextType { videoRef: React.RefObject; containerRef: React.RefObject; isPlaying: boolean; isBuffering: boolean; hasError: boolean; videoProgress: number; videoDuration: number; areControlsShown: boolean; isFullscreen: boolean; isPip: boolean; isVolumeControlOpen: boolean; repeatVideoAutomatically: boolean; autoPlayVideoUponVisible: boolean; autoHideControls: boolean; showCenterControls: boolean; attemptTogglePlay: () => void; toggleFullscreen: () => void; setIsPlaying: (playing: boolean) => void; setIsBuffering: (buffering: boolean) => void; setHasError: (hasError: boolean) => void; setVideoProgress: (progress: number) => void; setVideoDuration: (videoDuration: number) => void; setShowControls: (show: boolean) => void; showControlsTemporarily: () => void; setVolume: (x: number) => void; setIsMouseOverControls: (x: boolean) => void; toggleMute: (x: boolean) => void; togglePip: () => void; setIsVolumeControlOpen: (x: boolean) => void; clearControlsTimeout: () => void; } const VideoContext = createContext(null); // Reads the shared video context and guards against using controls outside VideoRoot. export function useVideo(): VideoContextType { const context = useContext(VideoContext); if (!context) { throw new Error("useVideo must be used within a VideoRoot"); } return context; } export function VideoProvider({ repeat, auto, autoHideControls = true, showCenterControls = true, children }: { repeat: boolean; auto: boolean; autoHideControls: boolean; showCenterControls?: boolean; children: React.ReactNode; }): React.ReactElement { // Shared video element ref and UI state consumed by viewport and control components. const videoRef = useRef(null); const containerRef = useRef(null); const lastVolumeRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [isBuffering, setIsBuffering] = useState(false); const [hasError, setHasError] = useState(false); const [videoProgress, setVideoProgress] = useState(0); const [videoDuration, setVideoDuration] = useState(0); const [areControlsShown, setShowControls] = useState(false); const controlsTimeoutRef = useRef(null); const [isFullscreen, setIsFullscreen] = useState(false); const isMouseOverControlsRef = useRef(false); const [isPip, setIsPip] = useState(false); const [isVolumeControlOpen, setIsVolumeControlOpen] = useState(false); const setIsMouseOverControls = (value: boolean) => { isMouseOverControlsRef.current = value; }; // Attempts to toggle playback, ignoring clicks while buffering or in an error state. const attemptTogglePlay = async () => { if (isBuffering || hasError) return; if (videoRef.current) { if (videoRef.current.paused) { try { await videoRef.current.play(); } catch (error) { console.warn( "Video playback failed. This is usually caused by an invalid/expired video URL or missing browser codecs:", error ); } } else { videoRef.current.pause(); } } setIsVolumeControlOpen(false); }; // Toggles fullscreen on the video wrapper const toggleFullscreen = () => { const container = containerRef.current; if (container) { if (!document.fullscreenElement) { container.requestFullscreen().catch((err) => console.error(err)); } else { document.exitFullscreen(); } } setIsVolumeControlOpen(false); }; // Writes the volume value directly to the underlying video element. const setVolume = (volume: number) => { if (!videoRef.current) return; videoRef.current.volume = volume; if (volume > 0) { lastVolumeRef.current = null; } }; // Writes the muted state directly to the underlying video element. const toggleMute = (muted: boolean) => { const videoElement = videoRef.current; if (!videoElement) return; if (muted) { lastVolumeRef.current = videoElement.volume; videoElement.muted = true; setVolume(0); return; } videoElement.muted = false; if (lastVolumeRef.current !== null) { setVolume(lastVolumeRef.current); lastVolumeRef.current = null; } }; const clearControlsTimeout = () => { if (controlsTimeoutRef.current) { clearTimeout(controlsTimeoutRef.current); } }; // Shows controls and refreshes the shared auto-hide timer. const showControlsTemporarily = () => { setShowControls(true); clearControlsTimeout(); if (!autoHideControls) { return; } if (!isMouseOverControlsRef.current) { controlsTimeoutRef.current = setTimeout(() => { setShowControls(false); }, 2500); } }; // Enters or exits browser picture-in-picture mode when supported. const togglePip = async () => { const videoElement = videoRef.current; if (!videoElement) return; // Some browsers or browser settings do not expose the PiP API. if (!document.pictureInPictureEnabled) { console.warn("Picture-in-Picture is not supported by this browser."); return; } try { if (document.pictureInPictureElement === videoElement) { // If this video is already in PiP, exit it. await document.exitPictureInPicture(); } else { // Otherwise, request the video to enter PiP mode. await videoElement.requestPictureInPicture(); } setIsPip(!isPip); } catch (error) { console.error("Failed to toggle Picture-in-Picture mode:", error); } finally { setIsVolumeControlOpen(false); } }; // Mirrors the browser fullscreen state back into React state. const handleFullscreenChange = () => { const container = containerRef.current; setIsFullscreen(!!container && document.fullscreenElement === container); setIsVolumeControlOpen(false); }; // Registers the fullscreen listener and syncs immediately for initial state. useEffect(() => { handleFullscreenChange(); document.addEventListener("fullscreenchange", handleFullscreenChange); return () => { document.removeEventListener("fullscreenchange", handleFullscreenChange); }; }, []); return ( {children} ); } // ----------------------------------------------------------------------------- // VideoRoot: Handles the Provider and the Inactivity Timeout Logic // ----------------------------------------------------------------------------- export interface VideoRootProps extends React.ComponentPropsWithoutRef<"div"> { repeat?: boolean; auto?: boolean; autoHideControls?: boolean; showCenterControls?: boolean; } export default function VideoRoot({ children, className = "", repeat = false, auto = false, autoHideControls = true, showCenterControls = true, ...props }: VideoRootProps) { // Composes provider state with the interactive container shell. return ( {children} ); } // Internal wrapper to access context for mouse events function VideoContainer({ children, className, ...props }: React.ComponentPropsWithoutRef<"div">) { const { containerRef, autoHideControls, setShowControls, showControlsTemporarily, clearControlsTimeout } = useVideo(); // Shows controls on movement and schedules auto-hide when the controls are not hovered. const handleMouseMove = () => { showControlsTemporarily(); }; // Clears pending auto-hide and hides controls when leaving the video area. const handleMouseLeave = () => { if (!autoHideControls) return; clearControlsTimeout(); setShowControls(false); }; return (

{children}

); } // ----------------------------------------------------------------------------- // VideoViewport: The actual HTML5 Video Tag // ----------------------------------------------------------------------------- const videoViewportVariants = cva("h-full w-full", { variants: { fit: { cover: "object-cover", contain: "object-contain", fill: "object-fill", none: "object-none", scaleDown: "object-scale-down" } }, defaultVariants: { fit: "cover" } }); const centerControlIconClassName = "h-[min(60px,16cqw)] w-[min(60px,16cqw)]"; export interface VideoViewportProps extends Omit, "controls">, VariantProps {} export function VideoViewport({ src, fit, className = "", ...props }: VideoViewportProps) { const { videoRef, setIsPlaying, setIsBuffering, setHasError, setVideoProgress, setVideoDuration, videoDuration, isPlaying, isBuffering, hasError, repeatVideoAutomatically, autoPlayVideoUponVisible, autoHideControls, showCenterControls, setIsVolumeControlOpen, showControlsTemporarily, areControlsShown, attemptTogglePlay } = useVideo(); const rafRef = useRef(null); const lastSyncedProgressRef = useRef(0); const shouldResumeAfterBufferRef = useRef(false); const areControlsVisible = !autoHideControls || areControlsShown; // Copies duration metadata from the video element into shared context. const syncDuration = useCallback( (videoEl: HTMLVideoElement) => { if (videoEl && videoEl.duration) { setVideoDuration(videoEl.duration); } }, [setVideoDuration] ); // Syncs duration when the source changes and metadata is already available. useEffect(() => { const videoElement = videoRef.current; if (!videoElement) return; if (videoElement.readyState >= 1) { syncDuration(videoElement); } }, [src, videoRef, syncDuration]); // Starts playback once the video enters the viewport when auto playback is enabled. useEffect(() => { const videoElement = videoRef.current; if (!videoElement || !autoPlayVideoUponVisible) return; const observer = new IntersectionObserver( ([entry]) => { if (!entry?.isIntersecting) return; videoElement.play().catch((error) => { console.warn("Video autoplay failed:", error); }); observer.disconnect(); }, { threshold: 0.35 } ); observer.observe(videoElement); return () => observer.disconnect(); }, [autoPlayVideoUponVisible, videoRef]); // Polls currentTime on animation frames so progress UI stays smooth. useEffect(() => { const videoElement = videoRef.current; if (!videoElement || !isPlaying) return; const updateLoop = () => { const currentTime = videoElement.currentTime; if (Math.abs(currentTime - lastSyncedProgressRef.current) >= 0.05) { lastSyncedProgressRef.current = currentTime; setVideoProgress(currentTime); } // Continue polling on the browser's next repaint. rafRef.current = requestAnimationFrame(updateLoop); }; rafRef.current = requestAnimationFrame(updateLoop); return () => { if (rafRef.current) { cancelAnimationFrame(rafRef.current); } }; }, [isPlaying, setVideoProgress, videoRef]); // Marks buffering and remembers that playback should resume afterward. const handleBufferingStart = useCallback(() => { const videoElement = videoRef.current; if (!videoElement) return; shouldResumeAfterBufferRef.current = true; setIsBuffering(true); }, [videoRef, setIsBuffering]); // Clears buffering and resumes playback if buffering interrupted active playback. const handleBufferingEnd = useCallback(() => { const videoElement = videoRef.current; if (!videoElement) return; if (shouldResumeAfterBufferRef.current) { shouldResumeAfterBufferRef.current = false; videoElement.play().catch((error) => { console.warn("Video playback could not resume after buffering:", error); }); } setIsBuffering(false); }, [videoRef, setIsBuffering]); // Resets the error state and asks the video element to reload the current source. const handleRetry = () => { const videoElement = videoRef.current; if (!videoElement) return; setHasError(false); setIsBuffering(true); shouldResumeAfterBufferRef.current = false; videoElement.load(); }; // Skips within the loaded media bounds and keeps shared progress in sync. const skipVideoBy = useCallback( (seconds: number) => { const videoElement = videoRef.current; if (!videoElement) return; const nextTime = Math.min( Math.max(videoElement.currentTime + seconds, 0), videoDuration ); videoElement.currentTime = nextTime; setVideoProgress(nextTime); }, [videoDuration, videoRef, setVideoProgress] ); return (

); } // ----------------------------------------------------------------------------- // VideoControls: The disappearing overlay wrapper // ----------------------------------------------------------------------------- export interface VideoControlsProps extends React.ComponentPropsWithoutRef<"div"> {} export function VideoControls({ children, className = "", ...props }: VideoControlsProps): React.ReactElement { const { areControlsShown, autoHideControls, setIsMouseOverControls } = useVideo(); const areControlsVisible = !autoHideControls || areControlsShown; // Tracks hover state so the container does not auto-hide controls mid-interaction. return (

setIsMouseOverControls(true)} onMouseLeave={() => setIsMouseOverControls(false)} id="video-controls" className={cn( "absolute bottom-0 left-0 right-0 px-3 pb-3 pt-3 transition-opacity duration-300", "bg-gradient-to-t from-black/95 to-transparent to-90%", areControlsVisible ? "opacity-100" : "opacity-0 pointer-events-none", className )} {...props} > {children}

); } // ----------------------------------------------------------------------------- // VideoSoundControl: Controls volume and mute // ----------------------------------------------------------------------------- export interface VideoSoundControlProps extends React.ComponentPropsWithoutRef<"button"> {} export function VideoSoundControl({ className = "", ...props }: VideoSoundControlProps) { const { videoRef, toggleMute, setVolume, isVolumeControlOpen, setIsVolumeControlOpen } = useVideo(); // Local state mirrors native video volume/mute events for instant UI feedback. const [localVolume, setLocalVolume] = useState(1); const [localMuted, setLocalMuted] = useState(false); // Drag state and slider ref let pointer movement update volume globally. const [isVolumeDragging, setIsVolumeDragging] = useState(false); const sliderRef = useRef(null); // Converts a pointer Y position within the vertical slider into a volume fraction. const setVolumeFromClientY = useCallback( (clientY: number) => { if (!sliderRef.current) return; const rect = sliderRef.current.getBoundingClientRect(); const y = Math.min(Math.max(clientY - rect.top, 0), rect.height); const frac = rect.height ? 1 - y / rect.height : 0; setVolume(frac); toggleMute(frac === 0); }, [setVolume, toggleMute] ); // Starts a volume drag and applies the first volume value immediately. const handleSliderPointerDown = ( event: React.PointerEvent ) => { setIsVolumeDragging(true); setIsVolumeControlOpen(true); setVolumeFromClientY(event.clientY); }; // Registers global pointer listeners while dragging outside the slider bounds. useEffect(() => { if (!isVolumeDragging) return; const handlePointerMove = (event: PointerEvent) => { setVolumeFromClientY(event.clientY); }; const handlePointerUp = () => { setIsVolumeDragging(false); }; window.addEventListener("pointermove", handlePointerMove); window.addEventListener("pointerup", handlePointerUp); return () => { window.removeEventListener("pointermove", handlePointerMove); window.removeEventListener("pointerup", handlePointerUp); }; }, [isVolumeDragging, setVolumeFromClientY]); // Keeps local mute and volume state synced with native media element changes. useEffect(() => { const videoElement = videoRef.current; if (!videoElement) return; const sync = () => { setLocalMuted(videoElement.muted); setLocalVolume(videoElement.volume); }; sync(); videoElement.addEventListener("volumechange", sync); return () => videoElement.removeEventListener("volumechange", sync); }, [videoRef]); // Chooses the volume icon that best matches the current mute/volume state. const iconToDisplay = (() => { if (localMuted) { return ; } else if (localVolume < 0.33) { return ; } else if (localVolume < 0.67) { return ; } else { return ; } })(); return (

); } export interface VideoPipTriggerProps extends React.ComponentPropsWithoutRef<"button"> {} export function VideoPipTrigger({ className = "", ...props }: VideoPipTriggerProps): React.ReactElement { const { isPip, togglePip } = useVideo(); // Renders the PiP toggle and tooltip using the shared PiP state. return ( ); } export interface VideoPlayTriggerProps extends React.ComponentPropsWithoutRef<"button"> {} export function VideoPlayTrigger({ className = "", ...props }: VideoPlayTriggerProps): React.ReactElement { const { isPlaying, isBuffering, attemptTogglePlay } = useVideo(); // Renders play, pause, or loading buttons based on playback state. return ( ); } export interface VideoFullscreenTriggerProps extends React.ComponentPropsWithoutRef<"button"> {} export function VideoFullscreenTrigger({ className = "", ...props }: VideoFullscreenTriggerProps): React.ReactElement { const { toggleFullscreen, isFullscreen } = useVideo(); // Renders fullscreen enter/exit buttons based on browser fullscreen state. return ( ); } export interface VideoProgressBarProps extends React.ComponentPropsWithoutRef<"div"> {} export function VideoProgressBar({ className = "", ...props }: VideoProgressBarProps): React.ReactElement { const { videoProgress, videoDuration } = useVideo(); // Displays elapsed time, seek slider, and total duration as one control group. return (

{formatTime(videoProgress)} {formatTime(videoDuration)}

); } function VideoSeekSlider({ className = "", ...props }: React.ComponentPropsWithoutRef<"div">): React.ReactElement { // Remembers whether playback should resume after the user finishes seeking. const wasPlayingRef = useRef(false); const { videoDuration, videoProgress, videoRef, setVideoProgress, setIsVolumeControlOpen } = useVideo(); const frac = videoDuration > 0 ? videoProgress / videoDuration : 0; const progressBarContainerRef = useRef(null); // Hover stores x pixels from the slider edge and the matching video timestamp. const [hover, setHover] = useState<{ x: number; time: number } | null>(null); const [isHovering, setIsHovering] = useState(false); const [isDragging, setIsDragging] = useState(false); // Converts a pointer X position into a clamped slider offset and progress fraction. const getXOffsetandFraction = useCallback( (clientX: number): { x: number; frac: number } | undefined => { if (!progressBarContainerRef.current || videoDuration === 0) return; const rect = progressBarContainerRef.current.getBoundingClientRect(); const x = Math.min(Math.max(clientX - rect.left, 0), rect.width); const frac = rect.width ? x / rect.width : 0; return { x, frac }; }, [videoDuration] ); // Seeks the video to a fraction of total duration and closes the volume control. const handleSeekVideo = useCallback( (newFrac: number) => { if (!videoRef.current || videoDuration === 0) return; const newTime = newFrac * videoDuration; videoRef.current.currentTime = newTime; setVideoProgress(newTime); setIsVolumeControlOpen(false); }, [videoDuration, videoRef, setVideoProgress, setIsVolumeControlOpen] ); // Updates the tooltip position and preview time from a pointer X position. const updateHoverFromClientX = useCallback( (clientX: number) => { const val = getXOffsetandFraction(clientX); if (!val) return; setHover({ x: val.x, time: val.frac * videoDuration }); }, [videoDuration, getXOffsetandFraction] ); // Shows and updates the hover tooltip while the pointer moves over the slider. const handleMouseMove = (event: React.MouseEvent) => { updateHoverFromClientX(event.clientX); setIsHovering(true); }; // Starts seeking, pauses playback during drag, and applies the first seek value. const handlePointerDown = (event: React.PointerEvent) => { const val = getXOffsetandFraction(event.clientX); if (!val) return; setHover({ x: val.x, time: val.frac * videoDuration }); setIsHovering(true); setIsDragging(true); if (!videoRef.current) return; wasPlayingRef.current = !videoRef.current.paused; videoRef.current.pause(); handleSeekVideo(val.frac); }; // Hides the tooltip on leave unless an active drag still needs feedback. const handleMouseLeave = () => { if (!isDragging) { setIsHovering(false); } }; // Updates both the seek position and tooltip while dragging globally. const handlePointerMove = useCallback( (event: PointerEvent) => { updateHoverFromClientX(event.clientX); const val = getXOffsetandFraction(event.clientX); if (!val) return; handleSeekVideo(val.frac); }, [updateHoverFromClientX, getXOffsetandFraction, handleSeekVideo] ); // Ends seeking and resumes playback if the video was playing before the drag. const handlePointerUp = useCallback(() => { setIsDragging(false); setIsHovering(false); if (videoRef.current && wasPlayingRef.current) { videoRef.current.play().catch((error) => { console.warn("Video playback could not resume after seeking:", error); }); } wasPlayingRef.current = false; }, [videoRef]); // Registers global drag listeners so seeking continues outside the slider bounds. useEffect(() => { if (!isDragging) return; window.addEventListener("pointermove", handlePointerMove); window.addEventListener("pointerup", handlePointerUp); return () => { window.removeEventListener("pointermove", handlePointerMove); window.removeEventListener("pointerup", handlePointerUp); }; }, [ isDragging, videoDuration, updateHoverFromClientX, handleSeekVideo, getXOffsetandFraction, handlePointerMove, handlePointerUp ]); return (

{hover && (

{formatTime(hover.time)} {`/ ${formatTime(videoDuration)}`}

)}

); } // Formats seconds into the m:ss timestamp used by the player controls. function formatTime(seconds: number): string { const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins}:${secs.toString().padStart(2, "0")}`; } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L52",null,{"namespace":"@8starlabs-ui","registryDependencies":["https://ui.8starlabs.com/r/button.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/8starlabs-ui/blocks/video-player.tsx","content":"$54","type":"registry:ui","target":"components/8starlabs-ui/video-player.tsx"}],"className":"h-[70svh] min-h-80"}]]}]