{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "video-playlist-sidebar", "title": "Video Playlist Sidebar", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/video-playlist-sidebar/VideoPlaylistSidebar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Check,\n CheckCircle2,\n Clock,\n Download,\n FileCode2,\n ListVideo,\n Play,\n PlayCircle,\n Repeat,\n Repeat1,\n Search,\n Shuffle,\n SkipForward,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Switch } from '@/components/ui/switch'\n\nexport interface VideoResource {\n id: string\n name: string\n size: string\n type: 'code' | 'figma' | 'pdf'\n}\n\nexport interface PlaylistItem {\n id: string\n index: number\n title: string\n instructor: string\n instructorRole: string\n instructorAvatar: string\n duration: string\n durationSec: number\n category: string\n summary: string\n isCompleted: boolean\n thumbnailGradient: string\n resources: VideoResource[]\n}\n\nconst initialPlaylist: PlaylistItem[] = [\n {\n id: 'vid-01',\n index: 1,\n title: '01. Introduction to Component Registries',\n instructor: 'Marcus Vance',\n instructorRole: 'Principal Design Engineer',\n instructorAvatar: 'MV',\n duration: '14:20',\n durationSec: 860,\n category: 'Architecture',\n summary: 'Understanding unbundled component distribution, registry manifests, and own-your-code paradigms.',\n isCompleted: true,\n thumbnailGradient: 'from-slate-800 to-zinc-950',\n resources: [\n { id: 'res-1a', name: 'registry-schema-spec.pdf', size: '1.2 MB', type: 'pdf' },\n { id: 'res-1b', name: 'starter-registry.json', size: '48 KB', type: 'code' },\n ],\n },\n {\n id: 'vid-02',\n index: 2,\n title: '02. Headless Reka UI Primitives',\n instructor: 'Elena Rostova',\n instructorRole: 'Staff Frontend Engineer',\n instructorAvatar: 'ER',\n duration: '18:45',\n durationSec: 1125,\n category: 'Accessibility',\n summary: 'Composition with asChild, polymorphic slot mechanics, and ARIA state tree management.',\n isCompleted: true,\n thumbnailGradient: 'from-zinc-800 to-slate-950',\n resources: [\n { id: 'res-2a', name: 'reka-composition-cheatsheet.pdf', size: '2.4 MB', type: 'pdf' },\n { id: 'res-2b', name: 'accessible-dialog.vue', size: '14 KB', type: 'code' },\n ],\n },\n {\n id: 'vid-03',\n index: 3,\n title: '03. Building with OKLCH Tokens',\n instructor: 'Sarah Connor',\n instructorRole: 'Design Systems Architect',\n instructorAvatar: 'SC',\n duration: '22:10',\n durationSec: 1330,\n category: 'Color Systems',\n summary: 'Perceptually uniform color spaces, wide-gamut Display P3 gamut mapping, and dark mode contrast.',\n isCompleted: false,\n thumbnailGradient: 'from-slate-850 to-zinc-950',\n resources: [\n { id: 'res-3a', name: 'tokens.config.css', size: '14.2 KB', type: 'code' },\n { id: 'res-3b', name: 'oklch-palette-matrix.fig', size: '4.8 MB', type: 'figma' },\n { id: 'res-3c', name: 'apca-contrast-guide.pdf', size: '1.1 MB', type: 'pdf' },\n ],\n },\n {\n id: 'vid-04',\n index: 4,\n title: '04. Micro-Interactions & Spring Physics',\n instructor: 'Alex Chen',\n instructorRole: 'Motion Design Lead',\n instructorAvatar: 'AC',\n duration: '19:35',\n durationSec: 1175,\n category: 'Motion & Physics',\n summary: 'Crafting tactile UI states, gesture dampening, spring curves, and 120fps hardware acceleration.',\n isCompleted: false,\n thumbnailGradient: 'from-zinc-800 to-zinc-950',\n resources: [\n { id: 'res-4a', name: 'spring-curves-preset.ts', size: '8.4 KB', type: 'code' },\n { id: 'res-4b', name: 'gesture-lab.fig', size: '3.6 MB', type: 'figma' },\n ],\n },\n {\n id: 'vid-05',\n index: 5,\n title: '05. Multi-Framework Parity Testing',\n instructor: 'Marcus Vance',\n instructorRole: 'Principal Design Engineer',\n instructorAvatar: 'MV',\n duration: '16:50',\n durationSec: 1010,\n category: 'Testing & Quality',\n summary: 'Automating visual regression tests and unit tests across dual Vue 3 and React 19 packages.',\n isCompleted: false,\n thumbnailGradient: 'from-slate-800 to-slate-950',\n resources: [\n { id: 'res-5a', name: 'parity-test-matrix.ts', size: '22.0 KB', type: 'code' },\n { id: 'res-5b', name: 'playwright.config.ts', size: '6.5 KB', type: 'code' },\n ],\n },\n {\n id: 'vid-06',\n index: 6,\n title: '06. CI/CD Deployment to Cloudflare',\n instructor: 'David Kim',\n instructorRole: 'DevOps & Cloud Engineer',\n instructorAvatar: 'DK',\n duration: '25:15',\n durationSec: 1515,\n category: 'DevOps & Edge',\n summary: 'Automating multi-framework build chains, registry sync, and edge deployment via Wrangler.',\n isCompleted: false,\n thumbnailGradient: 'from-zinc-850 to-zinc-950',\n resources: [\n { id: 'res-6a', name: 'wrangler.toml', size: '3.4 KB', type: 'code' },\n { id: 'res-6b', name: 'deploy-pipeline.yml', size: '5.1 KB', type: 'code' },\n ],\n },\n]\n\nexport interface VideoPlaylistSidebarProps extends React.HTMLAttributes {}\n\nexport function VideoPlaylistSidebar({ className, ...props }: VideoPlaylistSidebarProps) {\n const [playlist, setPlaylist] = React.useState(initialPlaylist)\n const [activeVideoId, setActiveVideoId] = React.useState('vid-03')\n const [autoPlay, setAutoPlay] = React.useState(true)\n const [isLooping, setIsLooping] = React.useState(false)\n const [isShuffled, setIsShuffled] = React.useState(false)\n const [searchQuery, setSearchQuery] = React.useState('')\n const [downloadedAssets, setDownloadedAssets] = React.useState>({})\n\n const activeVideo = React.useMemo(() => {\n return playlist.find((item) => item.id === activeVideoId) || playlist[0]\n }, [playlist, activeVideoId])\n\n const completedCount = React.useMemo(() => {\n return playlist.filter((item) => item.isCompleted).length\n }, [playlist])\n\n const totalCount = playlist.length\n const progressPercent = totalCount === 0 ? 0 : Math.round((completedCount / totalCount) * 100)\n\n const filteredVideos = React.useMemo(() => {\n const query = searchQuery.trim().toLowerCase()\n if (!query) return playlist\n return playlist.filter(\n (item) =>\n item.title.toLowerCase().includes(query) ||\n item.instructor.toLowerCase().includes(query) ||\n item.category.toLowerCase().includes(query),\n )\n }, [playlist, searchQuery])\n\n const selectVideo = (id: string) => {\n setActiveVideoId(id)\n }\n\n const toggleComplete = (id: string) => {\n setPlaylist((prev) => prev.map((item) => (item.id === id ? { ...item, isCompleted: !item.isCompleted } : item)))\n }\n\n const nextVideo = () => {\n const currentIndex = playlist.findIndex((item) => item.id === activeVideoId)\n if (currentIndex === -1) return\n\n if (isShuffled) {\n const remaining = playlist.filter((item) => item.id !== activeVideoId)\n if (remaining.length > 0) {\n const randomIndex = Math.floor(Math.random() * remaining.length)\n setActiveVideoId(remaining[randomIndex].id)\n }\n return\n }\n\n if (currentIndex < playlist.length - 1) {\n setActiveVideoId(playlist[currentIndex + 1].id)\n } else if (isLooping) {\n setActiveVideoId(playlist[0].id)\n }\n }\n\n const handleDownload = (assetId: string) => {\n setDownloadedAssets((prev) => ({ ...prev, [assetId]: true }))\n setTimeout(() => {\n setDownloadedAssets((prev) => ({ ...prev, [assetId]: false }))\n }, 2000)\n }\n\n return (\n \n {/* Main Playlist Control Card */}\n \n \n {/* Badge row */}\n
\n
\n \n \n Video Playlist\n \n \n \n 1h 56m Total\n \n
\n UIPKGE Masterclass Series\n
\n\n {/* Title & Subtitle */}\n
\n \n Mastering Full-Stack UI Engineering\n \n \n Curated playlist on headless primitives, OKLCH token systems, fluid motion physics, and registry CI\n pipelines.\n \n
\n\n {/* Progress bar and counter */}\n
\n
\n \n {completedCount} /{' '}\n {totalCount} Videos Completed\n \n {progressPercent}%\n
\n \n
\n\n {/* Toolbar: Autoplay switch, Loop & Shuffle toggles */}\n
\n {/* Autoplay next switch */}\n
\n \n \n \n Autoplay Next Video\n \n
\n\n {/* Loop and Shuffle Buttons */}\n
\n setIsLooping(!isLooping)}\n >\n {isLooping ? : }\n Loop\n \n\n setIsShuffled(!isShuffled)}\n >\n \n Shuffle\n \n
\n
\n \n \n\n {/* Currently Active Video Card */}\n \n
\n \n
\n
\n \n \n Now Playing\n \n \n Lesson {activeVideo.index} of {totalCount}\n \n
\n \n {activeVideo.duration}\n \n
\n\n
\n \n {activeVideo.title}\n \n {activeVideo.summary}\n
\n\n {/* Instructor and Metadata */}\n
\n
\n
\n {activeVideo.instructorAvatar}\n
\n
\n

{activeVideo.instructor}

\n

\n {activeVideo.instructorRole} · {activeVideo.category}\n

\n
\n
\n\n {/* Video status controls */}\n
\n toggleComplete(activeVideo.id)}\n >\n {activeVideo.isCompleted ? (\n \n ) : (\n \n )}\n {activeVideo.isCompleted ? 'Completed' : 'Mark as Watched'}\n \n\n \n
\n
\n \n\n {/* Downloadable Lesson Exercise Files */}\n \n
\n
\n

\n \n Lesson Exercise Files\n

\n {activeVideo.resources.length} Files\n
\n\n
\n {activeVideo.resources.map((res) => (\n \n
\n \n {res.type === 'code' ? 'TS' : res.type === 'figma' ? 'FIG' : 'PDF'}\n \n
\n

{res.name}

\n

{res.size}

\n
\n
\n\n handleDownload(res.id)}\n >\n {downloadedAssets[res.id] ? (\n \n ) : (\n \n )}\n {downloadedAssets[res.id] ? 'Saved' : 'Get'}\n \n
\n ))}\n
\n
\n \n \n\n {/* Playlist Queue & List Header */}\n \n \n
\n
\n Playlist Queue\n \n {totalCount} Videos\n \n
\n Click any lesson to play\n
\n\n {/* Search / Filter input */}\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Filter playlist by title, instructor, or topic...\"\n className=\"border-input bg-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border pr-3 pl-8 text-xs shadow-xs outline-none focus-visible:ring-[3px]\"\n />\n
\n \n\n {/* Video Items List */}\n \n {filteredVideos.map((video) => {\n const isActive = activeVideoId === video.id\n return (\n selectVideo(video.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n selectVideo(video.id)\n }\n }}\n >\n {/* Left active highlight bar */}\n {isActive &&
}\n\n {/* Left Section: Index / Status Indicator + Video Thumbnail */}\n
\n {/* Play / Equalizer / Completed Status Icon */}\n
\n {isActive ? (\n /* Animated Equalizer Sound Bars */\n
\n \n \n \n
\n ) : video.isCompleted ? (\n \n ) : (\n \n {video.index.toString().padStart(2, '0')}\n \n )}\n
\n\n {/* 16:9 Video Thumbnail Preview */}\n \n {/* Center Play Watermark */}\n
\n \n
\n\n {/* Duration Badge (Bottom-Right) */}\n
\n {video.duration}\n
\n
\n\n {/* Video Title & Instructor Info */}\n
\n \n {video.title}\n

\n

\n {video.instructor}\n ·\n {video.category}\n

\n
\n
\n\n {/* Right Section: Status Badge & Quick Watch Toggle */}\n
\n {isActive ? (\n \n Playing\n \n ) : video.isCompleted ? (\n
\n \n )\n })}\n\n {filteredVideos.length === 0 && (\n
No lessons match your search criteria.
\n )}\n \n\n \n Mastering Full-Stack UI Engineering\n \n {completedCount}/{totalCount} Completed ({progressPercent}%)\n \n \n \n \n )\n}\n\nexport default VideoPlaylistSidebar\n", "type": "registry:block", "target": "~/components/blocks/VideoPlaylistSidebar.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/switch.json" ], "description": "YouTube and Vimeo style video playlist drawer with active playing indicator, durations, auto-play next switch, loop/shuffle controls, and active lesson summary card.", "categories": [ "media", "app", "education" ] }