{/* Player overlay */} {showPlayer && (

setShowPlayer(false)} muted={false} />

)}

) } `,children:(0,n.jsx)(e.code,{className:"language-tsx",children:`"use client" import React, { useState } from "react" import { RetroVideoPlayer } from "@/delta/retro-video-player" import { Button } from "@/components/ui/button" export function RetroVideoPlayerDemo() { const [showPlayer, setShowPlayer] = useState(false) return (

{/* Player overlay */} {showPlayer && (

setShowPlayer(false)} muted={false} />

)}

) } `})})}),` `,(0,n.jsx)(e.h2,{id:"installation",children:"Installation"}),` `,(0,n.jsxs)(d,{defaultValue:"cli",children:[(0,n.jsxs)(m,{children:[(0,n.jsx)(c,{value:"cli",children:"CLI"}),(0,n.jsx)(c,{value:"manual",children:"Manual"})]}),(0,n.jsx)(i,{value:"cli",children:(0,n.jsx)(e.pre,{__rawstring__:`npx shadcn@latest add https://deltacomponents.dev/r/retro-video-player.json `,__npmCommand__:`npx shadcn@latest add https://deltacomponents.dev/r/retro-video-player.json `,__yarnCommand__:`yarn dlx shadcn@latest add https://deltacomponents.dev/r/retro-video-player.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://deltacomponents.dev/r/retro-video-player.json `,__bunCommand__:`bunx --bun shadcn@latest add https://deltacomponents.dev/r/retro-video-player.json `,children:(0,n.jsx)(e.code,{className:"language-bash",children:`npx shadcn@latest add https://deltacomponents.dev/r/retro-video-player.json `})})}),(0,n.jsx)(i,{value:"manual",children:(0,n.jsxs)(u,{children:[(0,n.jsx)(a,{children:"Install the following dependencies:"}),(0,n.jsx)(e.pre,{__rawstring__:`npm install [dependencies] `,__npmCommand__:`npm install [dependencies] `,__yarnCommand__:`yarn add [dependencies] `,__pnpmCommand__:`pnpm add [dependencies] `,__bunCommand__:`bun add [dependencies] `,children:(0,n.jsx)(e.code,{className:"language-bash",children:`npm install [dependencies] `})}),(0,n.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(s,{name:"retro-video-player",children:(0,n.jsx)(e.pre,{__src__:"registry/media/retro-video-player.tsx",__rawstring__:`"use client" import * as React from "react" import { CornersOut, Minus, SpeakerHigh, SpeakerX } from "@phosphor-icons/react" import { Rnd } from "react-rnd" import { cn } from "@/lib/utils" interface RetroVideoPlayerProps { title?: string src: string defaultWidth?: number defaultHeight?: number minWidth?: number minHeight?: number className?: string videoClassName?: string headerClassName?: string contentClassName?: string defaultOpen?: boolean onClose?: () => void showControls?: boolean autoPlay?: boolean muted?: boolean } export function RetroVideoPlayer({ title = "Parallel Cam", src, defaultWidth = 350, defaultHeight = 500, minWidth = 250, minHeight = 350, className, videoClassName, headerClassName, contentClassName, defaultOpen = true, onClose, showControls = false, autoPlay = true, muted: initialMuted, }: RetroVideoPlayerProps) { // Set default muted state based on if explicit value was provided const muted = initialMuted !== undefined ? initialMuted : false const videoRef = React.useRef(null) const containerRef = React.useRef(null) const [isPlaying, setIsPlaying] = React.useState(autoPlay) const [isMuted, setIsMuted] = React.useState(muted) const [isFullscreen, setIsFullscreen] = React.useState(false) const [isDragging, setIsDragging] = React.useState(false) const handleClose = () => { if (onClose) { onClose() } } const togglePlayPause = (e?: React.MouseEvent | React.TouchEvent) => { if (e) { e.stopPropagation() // Prevent event bubbling } if (!videoRef.current) return if (videoRef.current.paused) { // Try to play with audio const playPromise = videoRef.current.play() // Handle autoplay restrictions if (playPromise !== undefined) { playPromise.catch((error) => { // Auto-play was prevented - try again with muted if (error.name === "NotAllowedError") { videoRef.current!.muted = true setIsMuted(true) videoRef .current!.play() .catch((e) => console.error("Failed to play even with muted", e)) } }) } setIsPlaying(true) } else { videoRef.current.pause() setIsPlaying(false) } } const toggleMute = (e: React.MouseEvent | React.TouchEvent) => { e.stopPropagation() // Prevent triggering play/pause if (!videoRef.current) return const newMutedState = !videoRef.current.muted videoRef.current.muted = newMutedState setIsMuted(newMutedState) } const toggleFullscreen = (e: React.MouseEvent | React.TouchEvent) => { e.stopPropagation() // Prevent triggering play/pause if (!containerRef.current) return if (!isFullscreen) { try { // Try standard fullscreen API first if (containerRef.current.requestFullscreen) { containerRef.current.requestFullscreen() } // iOS Safari specific else if ((containerRef.current as any).webkitRequestFullscreen) { ;(containerRef.current as any).webkitRequestFullscreen() } // For older browsers else if ((containerRef.current as any).mozRequestFullScreen) { ;(containerRef.current as any).mozRequestFullScreen() } // For Edge/IE else if ((containerRef.current as any).msRequestFullscreen) { ;(containerRef.current as any).msRequestFullscreen() } setIsFullscreen(true) } catch (error) { console.error("Failed to enter fullscreen:", error) } } else { try { // Try standard fullscreen API first if (document.exitFullscreen) { document.exitFullscreen() } // iOS Safari specific else if ((document as any).webkitExitFullscreen) { ;(document as any).webkitExitFullscreen() } // For older browsers else if ((document as any).mozCancelFullScreen) { ;(document as any).mozCancelFullScreen() } // For Edge/IE else if ((document as any).msExitFullscreen) { ;(document as any).msExitFullscreen() } setIsFullscreen(false) } catch (error) { console.error("Failed to exit fullscreen:", error) } } } // Ensure proper unmounting React.useEffect(() => { return () => { if (videoRef.current) { videoRef.current.pause() videoRef.current.src = "" videoRef.current.load() } } }, []) // Handle autoplay with sound (try unmute after user interaction) React.useEffect(() => { if (autoPlay && !muted && videoRef.current) { const handleUserInteraction = () => { if (videoRef.current && videoRef.current.muted) { // Try to unmute after user interaction videoRef.current.muted = false setIsMuted(false) } // Remove listeners after first interaction document.removeEventListener("click", handleUserInteraction) document.removeEventListener("touchstart", handleUserInteraction) } document.addEventListener("click", handleUserInteraction) document.addEventListener("touchstart", handleUserInteraction) return () => { document.removeEventListener("click", handleUserInteraction) document.removeEventListener("touchstart", handleUserInteraction) } } }, [autoPlay, muted]) // Update playing state when video state changes React.useEffect(() => { const video = videoRef.current if (!video) return const handlePlay = () => setIsPlaying(true) const handlePause = () => setIsPlaying(false) video.addEventListener("play", handlePlay) video.addEventListener("pause", handlePause) return () => { video.removeEventListener("play", handlePlay) video.removeEventListener("pause", handlePause) } }, []) // Monitor fullscreen changes React.useEffect(() => { const handleFullscreenChange = () => { setIsFullscreen(!!document.fullscreenElement) } document.addEventListener("fullscreenchange", handleFullscreenChange) return () => { document.removeEventListener("fullscreenchange", handleFullscreenChange) } }, []) return ( setIsDragging(true)} onDragStop={() => setIsDragging(false)} disableDragging={isFullscreen} enableResizing={!isFullscreen} >

{title}

{/* Sound toggle button */} {/* Close button - visible on both mobile and desktop */} {onClose && ( )}

{ e.preventDefault() togglePlayPause() } : undefined } >

) } `,children:(0,n.jsx)(e.code,{className:"language-tsx",children:`"use client" import * as React from "react" import { CornersOut, Minus, SpeakerHigh, SpeakerX } from "@phosphor-icons/react" import { Rnd } from "react-rnd" import { cn } from "@/lib/utils" interface RetroVideoPlayerProps { title?: string src: string defaultWidth?: number defaultHeight?: number minWidth?: number minHeight?: number className?: string videoClassName?: string headerClassName?: string contentClassName?: string defaultOpen?: boolean onClose?: () => void showControls?: boolean autoPlay?: boolean muted?: boolean } export function RetroVideoPlayer({ title = "Parallel Cam", src, defaultWidth = 350, defaultHeight = 500, minWidth = 250, minHeight = 350, className, videoClassName, headerClassName, contentClassName, defaultOpen = true, onClose, showControls = false, autoPlay = true, muted: initialMuted, }: RetroVideoPlayerProps) { // Set default muted state based on if explicit value was provided const muted = initialMuted !== undefined ? initialMuted : false const videoRef = React.useRef(null) const containerRef = React.useRef(null) const [isPlaying, setIsPlaying] = React.useState(autoPlay) const [isMuted, setIsMuted] = React.useState(muted) const [isFullscreen, setIsFullscreen] = React.useState(false) const [isDragging, setIsDragging] = React.useState(false) const handleClose = () => { if (onClose) { onClose() } } const togglePlayPause = (e?: React.MouseEvent | React.TouchEvent) => { if (e) { e.stopPropagation() // Prevent event bubbling } if (!videoRef.current) return if (videoRef.current.paused) { // Try to play with audio const playPromise = videoRef.current.play() // Handle autoplay restrictions if (playPromise !== undefined) { playPromise.catch((error) => { // Auto-play was prevented - try again with muted if (error.name === "NotAllowedError") { videoRef.current!.muted = true setIsMuted(true) videoRef .current!.play() .catch((e) => console.error("Failed to play even with muted", e)) } }) } setIsPlaying(true) } else { videoRef.current.pause() setIsPlaying(false) } } const toggleMute = (e: React.MouseEvent | React.TouchEvent) => { e.stopPropagation() // Prevent triggering play/pause if (!videoRef.current) return const newMutedState = !videoRef.current.muted videoRef.current.muted = newMutedState setIsMuted(newMutedState) } const toggleFullscreen = (e: React.MouseEvent | React.TouchEvent) => { e.stopPropagation() // Prevent triggering play/pause if (!containerRef.current) return if (!isFullscreen) { try { // Try standard fullscreen API first if (containerRef.current.requestFullscreen) { containerRef.current.requestFullscreen() } // iOS Safari specific else if ((containerRef.current as any).webkitRequestFullscreen) { ;(containerRef.current as any).webkitRequestFullscreen() } // For older browsers else if ((containerRef.current as any).mozRequestFullScreen) { ;(containerRef.current as any).mozRequestFullScreen() } // For Edge/IE else if ((containerRef.current as any).msRequestFullscreen) { ;(containerRef.current as any).msRequestFullscreen() } setIsFullscreen(true) } catch (error) { console.error("Failed to enter fullscreen:", error) } } else { try { // Try standard fullscreen API first if (document.exitFullscreen) { document.exitFullscreen() } // iOS Safari specific else if ((document as any).webkitExitFullscreen) { ;(document as any).webkitExitFullscreen() } // For older browsers else if ((document as any).mozCancelFullScreen) { ;(document as any).mozCancelFullScreen() } // For Edge/IE else if ((document as any).msExitFullscreen) { ;(document as any).msExitFullscreen() } setIsFullscreen(false) } catch (error) { console.error("Failed to exit fullscreen:", error) } } } // Ensure proper unmounting React.useEffect(() => { return () => { if (videoRef.current) { videoRef.current.pause() videoRef.current.src = "" videoRef.current.load() } } }, []) // Handle autoplay with sound (try unmute after user interaction) React.useEffect(() => { if (autoPlay && !muted && videoRef.current) { const handleUserInteraction = () => { if (videoRef.current && videoRef.current.muted) { // Try to unmute after user interaction videoRef.current.muted = false setIsMuted(false) } // Remove listeners after first interaction document.removeEventListener("click", handleUserInteraction) document.removeEventListener("touchstart", handleUserInteraction) } document.addEventListener("click", handleUserInteraction) document.addEventListener("touchstart", handleUserInteraction) return () => { document.removeEventListener("click", handleUserInteraction) document.removeEventListener("touchstart", handleUserInteraction) } } }, [autoPlay, muted]) // Update playing state when video state changes React.useEffect(() => { const video = videoRef.current if (!video) return const handlePlay = () => setIsPlaying(true) const handlePause = () => setIsPlaying(false) video.addEventListener("play", handlePlay) video.addEventListener("pause", handlePause) return () => { video.removeEventListener("play", handlePlay) video.removeEventListener("pause", handlePause) } }, []) // Monitor fullscreen changes React.useEffect(() => { const handleFullscreenChange = () => { setIsFullscreen(!!document.fullscreenElement) } document.addEventListener("fullscreenchange", handleFullscreenChange) return () => { document.removeEventListener("fullscreenchange", handleFullscreenChange) } }, []) return ( setIsDragging(true)} onDragStop={() => setIsDragging(false)} disableDragging={isFullscreen} enableResizing={!isFullscreen} >

{title}

{/* Sound toggle button */} {/* Close button - visible on both mobile and desktop */} {onClose && ( )}

{ e.preventDefault() togglePlayPause() } : undefined } >

) } `})})})]})})]}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.pre,{__rawstring__:`"use client" import * as React from "react" import { RetroVideoPlayer } from "@/registry/components/retro-video-player" export function Component() { return } `,children:(0,n.jsx)(e.code,{className:"language-tsx",children:`"use client" import * as React from "react" import { RetroVideoPlayer } from "@/registry/components/retro-video-player" export function Component() { return } `})}),` `,(0,n.jsx)(e.h2,{id:"api-reference",children:"API Reference"}),` `,(0,n.jsx)(e.h3,{id:"parameters",children:"Parameters"}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"prop"}),(0,n.jsx)(e.td,{children:"type"}),(0,n.jsx)(e.td,{children:"description"})]})})]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(g,{...t})}):g(t)}function o(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return F(_);})(); ;return Component;

Retro Video Player

Installation

Usage

API Reference

Parameters