{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "podcast-audio-player", "title": "Podcast Audio Player", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/podcast-audio-player/PodcastAudioPlayer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Bookmark,\n BookmarkCheck,\n BookOpen,\n Check,\n Clock,\n Copy,\n Download,\n ExternalLink,\n FastForward,\n Headphones,\n Heart,\n ListMusic,\n Mic,\n Pause,\n Play,\n Radio,\n RotateCcw,\n RotateCw,\n Share2,\n SkipBack,\n SkipForward,\n Volume1,\n Volume2,\n VolumeX,\n} from 'lucide-react'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\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 { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\n\nexport interface Chapter {\n id: number\n title: string\n subtitle: string\n start: number\n end: number\n durationFormatted: string\n}\n\nexport interface Panelist {\n name: string\n role: string\n company: string\n avatar: string\n fallback: string\n bio: string\n handle: string\n}\n\nexport interface ReferenceLink {\n title: string\n description: string\n url: string\n tag: string\n}\n\nconst waveformBars = [\n 32, 48, 65, 88, 60, 42, 75, 96, 85, 62, 50, 78, 92, 100, 84, 60, 38, 70, 88, 95, 80, 54, 42, 68, 85, 92, 76, 60, 46,\n 64, 82, 45,\n]\n\nconst chapters: Chapter[] = [\n {\n id: 1,\n title: 'Intro & State of Tooling',\n subtitle: 'Why traditional CSS workflows break at scale',\n start: 0, // 00:00\n end: 495, // 08:15\n durationFormatted: '08:15',\n },\n {\n id: 2,\n title: 'The Monorepo Pivot',\n subtitle: 'Moving away from monolithic npm component packages',\n start: 495, // 08:15\n end: 1360, // 22:40\n durationFormatted: '14:25',\n },\n {\n id: 3,\n title: 'OKLCH Math & Contrast Engines',\n subtitle: 'Perceptual uniformity, APCA contrast & wide-gamut P3',\n start: 1360, // 22:40\n end: 2290, // 38:10\n durationFormatted: '15:30',\n },\n {\n id: 4,\n title: 'Q&A & Future Standards',\n subtitle: 'Audience questions, migration playbooks & CSS Color 5',\n start: 2290, // 38:10\n end: 2912, // 48:32\n durationFormatted: '10:22',\n },\n]\n\nconst panelists: Panelist[] = [\n {\n name: 'Elena Rostova',\n role: 'Staff Design Engineer',\n company: 'Linear',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',\n fallback: 'ER',\n bio: 'Pioneered Linear dark mode tokens, high-density keyboard workflows, and micro-interactions.',\n handle: '@erostova',\n },\n {\n name: 'Marcus Vance',\n role: 'Head of UI Architecture',\n company: 'Vercel',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80',\n fallback: 'MV',\n bio: 'Core architect on headless design systems, token compilers, and zero-runtime CSS workflows.',\n handle: '@marcusvance',\n },\n {\n name: 'Dr. Aris Thorne',\n role: 'Color Science Lead',\n company: 'W3C CSS Working Group',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80',\n fallback: 'AT',\n bio: 'Author on CSS Color Module 4 & 5, APCA contrast metric integration, and gamut mapping algorithms.',\n handle: '@aristhorne',\n },\n]\n\nconst referenceLinks: ReferenceLink[] = [\n {\n title: 'OKLCH Color Space Visualizer',\n description: 'Interactive gamut mapper, lightness ramp generator, and P3 inspector.',\n url: 'https://oklch.com',\n tag: 'Tooling',\n },\n {\n title: 'W3C CSS Color Module Level 4',\n description: 'Official W3C specification defining oklch(), oklab(), and wide-gamut coordinates.',\n url: 'https://www.w3.org/TR/css-color-4/',\n tag: 'Specification',\n },\n {\n title: 'UIPKGE Component Registry Architecture',\n description: 'The unbundled registry distribution model for Vue and React design systems.',\n url: 'https://uipkge.dev',\n tag: 'Architecture',\n },\n {\n title: 'APCA Accessible Perceptual Contrast Algorithm',\n description: 'Next-generation readability standard replacing legacy WCAG 2 ratio formulas.',\n url: 'https://git.apcacontrast.com',\n tag: 'Accessibility',\n },\n]\n\nfunction formatTime(seconds: number): string {\n const m = Math.floor(seconds / 60)\n const s = Math.floor(seconds % 60)\n return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`\n}\n\nexport function PodcastAudioPlayer({ className }: { className?: string }) {\n // Audio Playback State\n const [isPlaying, setIsPlaying] = React.useState(false)\n const [currentTime, setCurrentTime] = React.useState(860) // 14:20\n const totalDuration = 2912 // 48:32\n const [volume, setVolume] = React.useState(80)\n const [isMuted, setIsMuted] = React.useState(false)\n const [playbackSpeed, setPlaybackSpeed] = React.useState(1.0)\n const speedOptions = [1.0, 1.25, 1.5, 2.0]\n const [isBookmarked, setIsBookmarked] = React.useState(false)\n const [isLiked, setIsLiked] = React.useState(false)\n const [likeCount, setLikeCount] = React.useState(342)\n const [isCopied, setIsCopied] = React.useState(false)\n const [isDownloaded, setIsDownloaded] = React.useState(false)\n\n // Timer Effect\n React.useEffect(() => {\n let interval: ReturnType | null = null\n if (isPlaying) {\n interval = setInterval(() => {\n setCurrentTime((prev) => {\n if (prev < totalDuration) {\n return prev + 1\n } else {\n setIsPlaying(false)\n return prev\n }\n })\n }, 1000 / playbackSpeed)\n }\n return () => {\n if (interval) clearInterval(interval)\n }\n }, [isPlaying, playbackSpeed, totalDuration])\n\n const formattedCurrentTime = formatTime(currentTime)\n const formattedTotalTime = formatTime(totalDuration)\n const remainingTime = `-${formatTime(totalDuration - currentTime)}`\n const progressPercent = (currentTime / totalDuration) * 100\n\n const currentChapter = React.useMemo(() => {\n return chapters.find((c) => currentTime >= c.start && currentTime < c.end) || chapters[chapters.length - 1]\n }, [currentTime])\n\n const currentChapterProgress = React.useMemo(() => {\n const ch = currentChapter\n const elapsed = currentTime - ch.start\n const total = ch.end - ch.start\n return Math.min(100, Math.max(0, (elapsed / total) * 100))\n }, [currentTime, currentChapter])\n\n const seekTo = (seconds: number) => {\n setCurrentTime(Math.max(0, Math.min(seconds, totalDuration)))\n }\n\n const handleWaveformClick = (event: React.MouseEvent) => {\n const target = event.currentTarget\n const rect = target.getBoundingClientRect()\n const clickX = event.clientX - rect.left\n const ratio = Math.max(0, Math.min(1, clickX / rect.width))\n seekTo(Math.round(ratio * totalDuration))\n }\n\n const skipSeconds = (delta: number) => {\n seekTo(currentTime + delta)\n }\n\n const cycleSpeed = () => {\n const currentIndex = speedOptions.indexOf(playbackSpeed)\n const nextIndex = (currentIndex + 1) % speedOptions.length\n setPlaybackSpeed(speedOptions[nextIndex])\n }\n\n const skipToNextChapter = () => {\n const currentIndex = chapters.findIndex((c) => c.id === currentChapter.id)\n if (currentIndex < chapters.length - 1) {\n seekTo(chapters[currentIndex + 1].start)\n }\n }\n\n const skipToPrevChapter = () => {\n const ch = currentChapter\n if (currentTime - ch.start > 4) {\n seekTo(ch.start)\n } else {\n const currentIndex = chapters.findIndex((c) => c.id === ch.id)\n if (currentIndex > 0) {\n seekTo(chapters[currentIndex - 1].start)\n } else {\n seekTo(0)\n }\n }\n }\n\n const toggleMute = () => {\n setIsMuted((prev) => !prev)\n }\n\n const toggleLike = () => {\n setIsLiked((prev) => {\n const next = !prev\n setLikeCount((c) => (next ? c + 1 : c - 1))\n return next\n })\n }\n\n const handleCopyLink = () => {\n setIsCopied(true)\n setTimeout(() => {\n setIsCopied(false)\n }, 2000)\n }\n\n const handleDownload = () => {\n setIsDownloaded(true)\n setTimeout(() => {\n setIsDownloaded(false)\n }, 3000)\n }\n\n return (\n \n {/* EPISODE HERO CARD */}\n \n \n
\n {/* Left Column: Cover Art & Episode Details */}\n
\n {/* Podcast Cover Artwork Thumbnail */}\n
\n {/* Animated Soundwave/Vinyl Graphic */}\n
\n
\n \n
\n
\n EP #48\n
\n
\n\n {/* Episode Meta & Titles */}\n
\n
\n \n \n The Design Systems Podcast\n \n \n Season 4 · Episode #48\n \n \n Lossless 320kbps\n \n
\n\n

\n Deconstructing OKLCH & Zero-Dependency Component Registries\n

\n\n
\n {/* Hosts Avatars */}\n
\n
\n \n \n {panelists[0].fallback}\n \n \n \n {panelists[1].fallback}\n \n \n \n {panelists[2].fallback}\n \n
\n Elena Rostova, Marcus Vance & Dr. Aris Thorne\n
\n ·\n
\n \n 48 mins\n
\n
\n
\n
\n\n {/* Right Column: Primary Hero Actions */}\n
\n {/* Like Button */}\n \n \n {likeCount}\n \n\n {/* Bookmark Button */}\n setIsBookmarked((b) => !b)}\n >\n {isBookmarked ? (\n \n ) : (\n \n )}\n \n\n {/* Share / Copy Link */}\n \n {isCopied ? : }\n {isCopied ? 'Link Copied' : 'Share'}\n \n\n {/* Download Episode */}\n \n {isDownloaded ? : }\n \n
\n
\n \n \n\n {/* AUDIO PLAYER CONTROLS (CENTERPIECE) */}\n \n \n {/* Currently Playing Chapter Header */}\n
\n
\n
\n \n \n Now Playing · Chapter {currentChapter.id} of {chapters.length}\n \n
\n

{currentChapter.title}

\n

{currentChapter.subtitle}

\n
\n\n
\n \n {formattedCurrentTime}\n /\n {formattedTotalTime}\n \n {remainingTime}\n
\n
\n\n {/* 32-BAR VISUAL SVG AUDIO WAVEFORM SCRUBBER */}\n
\n \n {/* Background SVG Waveform Bars */}\n
\n {waveformBars.map((barHeight, index) => {\n const isPlayed = (index / waveformBars.length) * 100 <= progressPercent\n const isCurrentBar = isPlaying && Math.floor((progressPercent / 100) * waveformBars.length) === index\n\n return (\n
\n {/* Single Audio Bar */}\n \n
\n )\n })}\n
\n\n {/* Interactive Timeline Cursor Scrubber Line */}\n \n
\n
\n\n {/* Chapter Notch Markers on Waveform Bottom */}\n
\n {chapters.map((ch) => (\n \n \n \n ))}\n
\n
\n\n {/* Bottom Time & Chapter Range Indicators */}\n
\n
\n {formattedCurrentTime}\n (Chapter progress: {Math.round(currentChapterProgress)}%)\n
\n {formattedTotalTime}\n
\n
\n\n {/* MAIN PLAYBACK CONTROLS BAR */}\n
\n {/* Left: Secondary Tools (Speed & Chapter Navigation) */}\n
\n {/* Speed Selector Button */}\n \n \n {playbackSpeed.toFixed(playbackSpeed % 1 === 0 ? 1 : 2)}x\n \n\n {/* Previous Chapter */}\n \n \n \n\n {/* Next Chapter */}\n \n \n \n
\n\n {/* Center: Core Transport Buttons (15s Rewind, Play/Pause, 15s Fast Forward) */}\n
\n {/* 15s Rewind */}\n skipSeconds(-15)}\n >\n \n \n\n {/* Primary Play / Pause Circle Button */}\n setIsPlaying((p) => !p)}\n >\n {isPlaying ? (\n \n ) : (\n \n )}\n \n\n {/* 15s Fast Forward */}\n skipSeconds(15)}\n >\n \n \n
\n\n {/* Right: Volume Slider Controls */}\n
\n \n {isMuted || volume === 0 ? (\n \n ) : volume < 50 ? (\n \n ) : (\n \n )}\n \n\n
\n {\n if (isMuted) setIsMuted(false)\n setVolume(val[0])\n }}\n min={0}\n max={100}\n step={1}\n className=\"cursor-pointer\"\n />\n
\n \n {isMuted ? '0%' : `${volume}%`}\n \n
\n
\n\n \n\n {/* CHAPTER NAVIGATION BAR */}\n
\n
\n
\n \n

Chapter Navigation

\n
\n 4 Chapters · 48m 32s Total\n
\n\n
\n {chapters.map((ch) => {\n const isActive = currentChapter.id === ch.id\n return (\n seekTo(ch.start)}\n >\n
\n
\n \n CH {ch.id}\n \n \n {formatTime(ch.start)}\n \n
\n
{ch.title}
\n
{ch.subtitle}
\n
\n\n {/* Active Chapter Progress Mini Indicator */}\n
\n {isActive ? (\n \n ) : (\n = ch.end ? 'bg-primary/40' : 'bg-muted',\n ].join(' ')}\n />\n )}\n
\n
\n )\n })}\n
\n \n \n \n\n {/* EPISODE SHOW NOTES & GUEST LINKS ACCORDION */}\n \n \n
\n
\n \n \n Episode Show Notes & Comprehensive Guide\n \n
\n \n Full Notes\n \n
\n \n Deep dive references, color math formulas, guest bios, and resource bookmarks from this episode.\n \n \n\n \n \n {/* Accordion Item 1: Episode Summary */}\n \n \n
\n \n 1\n \n Executive Summary & Key Takeaways\n
\n \n \n

\n In this episode, we break down why traditional HSL and sRGB color models fall short when building\n modern, accessible multi-theme design systems. We explore how the OKLCH color space decouples\n perceptual lightness from chroma and hue, eliminating contrast inversion bugs when shifting from light\n to OLED dark mode.\n

\n\n
\n
\n
Perceptual Uniformity
\n

\n Lightness (L) in OKLCH remains consistent regardless of hue angle, unlike HSL where yellow appears\n far brighter than blue.\n

\n
\n\n
\n
Zero-Dependency Registries
\n

\n Unbundled component distribution gives engineering teams 100% source code ownership with zero\n semantic version drift.\n

\n
\n\n
\n
Tailwind v4 @theme
\n

\n Direct CSS variable binding with OKLCH tokens unlocks dynamic color-mix tints without JavaScript\n runtime overhead.\n

\n
\n
\n \n \n\n {/* Accordion Item 2: Detailed Chapter Breakdown */}\n \n \n
\n \n 2\n \n Timestamped Chapter Breakdown & Discussion Topics\n
\n \n \n {chapters.map((ch) => (\n \n
\n
\n \n Chapter {ch.id}: {ch.title}\n \n
\n

{ch.subtitle}

\n
\n\n seekTo(ch.start)}\n >\n \n {formatTime(ch.start)}\n \n \n ))}\n \n \n\n {/* Accordion Item 3: Featured Panelists & Guests */}\n \n \n
\n \n 3\n \n Featured Hosts & Guest Panel\n
\n \n \n
\n {panelists.map((person) => (\n \n
\n \n \n {person.fallback}\n \n
\n
{person.name}
\n
{person.role}
\n \n {person.company}\n \n
\n
\n

{person.bio}

\n
{person.handle}
\n
\n ))}\n \n \n \n\n {/* Accordion Item 4: Mentioned Resources & External Links */}\n \n \n
\n \n 4\n \n Mentioned Resources & Specifications\n
\n \n \n
\n {referenceLinks.map((link) => (\n \n
\n
\n \n {link.title}\n \n \n \n {link.tag}\n \n
\n

{link.description}

\n
\n
{link.url}
\n \n ))}\n
\n \n \n \n \n\n \n
\n \n Produced by The Design Systems Guild · All rights reserved\n
\n\n
\n \n
\n \n \n \n )\n}\n\nexport default PodcastAudioPlayer\n", "type": "registry:block", "target": "~/components/blocks/PodcastAudioPlayer.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/accordion.json", "https://uipkge.dev/r/react/avatar.json", "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/separator.json", "https://uipkge.dev/r/react/slider.json" ], "description": "Spotify and Apple Podcasts style audio player with 32-bar visual SVG waveform scrubber, chapter markers, playback speed controls, and show notes accordion.", "categories": [ "media", "app", "audio" ] }