{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "podcast-audio-player", "title": "Podcast Audio Player", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/podcast-audio-player/podcast-audio-player.component.ts", "content": "// Spotify / Apple Podcasts style audio player: episode hero card, 32-bar visual SVG\n// waveform scrubber with chapter markers, transport controls with speed cycling,\n// chapter navigation grid, and show-notes accordion. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n BookOpen,\n Bookmark,\n BookmarkCheck,\n Check,\n Clock,\n Copy,\n Download,\n ExternalLink,\n FastForward,\n Headphones,\n Heart,\n ListMusic,\n LucideAngularModule,\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-angular'\nimport { cn } from '@/lib/utils'\nimport {\n UiAccordionComponent,\n UiAccordionContentComponent,\n UiAccordionItemComponent,\n UiAccordionTriggerComponent,\n} from '@/ui/accordion/accordion.component'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSliderComponent } from '@/ui/slider/slider.component'\n\nexport interface PodcastChapter {\n id: number\n title: string\n subtitle: string\n start: number\n end: number\n durationFormatted: string\n}\n\nexport interface PodcastPanelist {\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 PodcastReferenceLink {\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: PodcastChapter[] = [\n {\n id: 1,\n title: 'Intro & State of Tooling',\n subtitle: 'Why traditional CSS workflows break at scale',\n start: 0,\n end: 495,\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,\n end: 1360,\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,\n end: 2290,\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,\n end: 2912,\n durationFormatted: '10:22',\n },\n]\n\nconst panelists: PodcastPanelist[] = [\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: PodcastReferenceLink[] = [\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\nconst speedOptions = [1.0, 1.25, 1.5, 2.0]\n\nexport function formatPodcastTime(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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-podcast-audio-player, [ui-podcast-audio-player]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAccordionComponent,\n UiAccordionContentComponent,\n UiAccordionItemComponent,\n UiAccordionTriggerComponent,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiSliderComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n
\n \n \n
\n \n EP #48\n
\n
\n\n
\n
\n \n \n The Design Systems Podcast\n \n Season 4 · Episode #48 \n \n Lossless 320kbps\n \n
\n\n

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

\n\n
\n
\n
\n @for (person of panelists; track person.name) {\n \n \n {{ person.fallback }}\n \n }\n
\n Elena Rostova, Marcus Vance & Dr. Aris Thorne\n
\n ·\n
\n \n 48 mins\n
\n
\n
\n
\n\n
\n \n \n {{ likeCount() }}\n \n\n \n @if (isBookmarked()) {\n \n } @else {\n \n }\n \n\n \n @if (isCopied()) {\n \n } @else {\n \n }\n {{ isCopied() ? 'Link Copied' : 'Share' }}\n \n\n \n @if (isDownloaded()) {\n \n } @else {\n \n }\n \n
\n
\n \n \n\n \n
\n
\n
\n
\n
\n \n \n Now Playing · Chapter {{ currentChapter().id }} of {{ chapters.length }}\n \n
\n

\n {{ currentChapter().title }}\n

\n

\n {{ currentChapter().subtitle }}\n

\n
\n\n
\n \n {{ formattedCurrentTime() }}\n /\n {{ formattedTotalTime() }}\n \n {{ remainingTime() }}\n
\n
\n\n \n
\n \n
\n @for (barHeight of waveformBars; track $index) {\n
\n
\n
\n }\n
\n\n \n
\n
\n\n
\n @for (ch of chapters; track ch.id) {\n \n \n \n }\n
\n
\n\n
\n
\n {{ formattedCurrentTime() }}\n (Chapter progress: {{ currentChapterProgressRounded() }}%)\n
\n {{ formattedTotalTime() }}\n
\n \n\n \n
\n
\n \n \n {{ speedLabel() }}\n \n\n \n \n \n\n \n \n \n
\n\n
\n \n \n \n\n \n @if (isPlaying()) {\n \n } @else {\n \n }\n \n\n \n \n \n
\n\n
\n \n @if (isMuted() || volume() === 0) {\n \n } @else if (volume() < 50) {\n \n } @else {\n \n }\n \n\n
\n \n
\n \n {{ isMuted() ? '0%' : volume() + '%' }}\n \n
\n
\n\n \n\n \n
\n
\n
\n \n

Chapter Navigation

\n
\n 4 Chapters · 48m 32s Total \n
\n\n
\n @for (ch of chapters; track ch.id) {\n
\n
\n
\n \n CH {{ ch.id }}\n \n \n {{ formatTime(ch.start) }}\n \n
\n
\n {{ ch.title }}\n
\n
\n {{ ch.subtitle }}\n
\n
\n\n
\n @if (currentChapter().id === ch.id) {\n \n } @else {\n = ch.end\n ? 'bg-primary/40 h-1 w-full rounded-full'\n : 'bg-muted h-1 w-full rounded-full'\n \"\n >
\n }\n
\n
\n }\n
\n \n \n \n\n \n
\n
\n
\n
\n \n

\n Episode Show Notes & Comprehensive Guide\n

\n
\n Full Notes \n
\n

\n Deep dive references, color math formulas, guest bios, and resource bookmarks from this episode.\n

\n
\n\n
\n \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 \n \n \n @for (ch of chapters; track ch.id) {\n \n
\n
\n Chapter {{ ch.id }}: {{ ch.title }}\n
\n

{{ ch.subtitle }}

\n
\n\n \n \n {{ formatTime(ch.start) }}\n \n
\n }\n \n \n\n \n \n \n
\n @for (person of panelists; track person.name) {\n
\n
\n \n \n {{ person.fallback }}\n \n
\n
{{ person.name }}
\n
{{ person.role }}
\n \n {{ person.company }}\n \n
\n
\n

\n {{ person.bio }}\n

\n
\n {{ person.handle }}\n
\n
\n }\n
\n \n \n\n \n \n \n
\n @for (link of referenceLinks; track link.title) {\n \n
\n
\n \n {{ link.title }}\n \n \n \n {{ link.tag }}\n \n
\n

\n {{ link.description }}\n

\n
\n
\n {{ link.url }}\n
\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})\nexport class UiPodcastAudioPlayerComponent {\n protected readonly BookOpen = BookOpen\n protected readonly Bookmark = Bookmark\n protected readonly BookmarkCheck = BookmarkCheck\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly ExternalLink = ExternalLink\n protected readonly FastForward = FastForward\n protected readonly Headphones = Headphones\n protected readonly Heart = Heart\n protected readonly ListMusic = ListMusic\n protected readonly Mic = Mic\n protected readonly Pause = Pause\n protected readonly Play = Play\n protected readonly Radio = Radio\n protected readonly RotateCcw = RotateCcw\n protected readonly RotateCw = RotateCw\n protected readonly Share2 = Share2\n protected readonly SkipBack = SkipBack\n protected readonly SkipForward = SkipForward\n protected readonly Volume1 = Volume1\n protected readonly Volume2 = Volume2\n protected readonly VolumeX = VolumeX\n\n protected readonly waveformBars = waveformBars\n protected readonly chapters = chapters\n protected readonly panelists = panelists\n protected readonly referenceLinks = referenceLinks\n\n @Input('class') className?: string\n @Input() set initialTime(v: number | undefined) {\n if (v !== undefined) this.currentTime.set(v)\n }\n @Input() set initialPlaying(v: boolean) {\n if (v) this.startPlayback()\n else this.stopPlayback()\n }\n\n readonly isPlaying = signal(false)\n readonly currentTime = signal(860)\n readonly totalDuration = signal(2912)\n readonly volume = signal(80)\n readonly isMuted = signal(false)\n readonly playbackSpeed = signal(1.0)\n readonly isBookmarked = signal(false)\n readonly isLiked = signal(false)\n readonly likeCount = signal(342)\n readonly isCopied = signal(false)\n readonly isDownloaded = signal(false)\n\n private playInterval: ReturnType | null = null\n private copyTimer: ReturnType | undefined\n private downloadTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n if (this.playInterval) clearInterval(this.playInterval)\n clearTimeout(this.copyTimer)\n clearTimeout(this.downloadTimer)\n })\n }\n\n readonly formattedCurrentTime = computed(() => formatPodcastTime(this.currentTime()))\n readonly formattedTotalTime = computed(() => formatPodcastTime(this.totalDuration()))\n readonly remainingTime = computed(() => `-${formatPodcastTime(this.totalDuration() - this.currentTime())}`)\n readonly progressPercent = computed(() => (this.currentTime() / this.totalDuration()) * 100)\n\n readonly currentChapter = computed(() => {\n const t = this.currentTime()\n return chapters.find((c) => t >= c.start && t < c.end) ?? chapters[chapters.length - 1]\n })\n\n readonly currentChapterProgress = computed(() => {\n const ch = this.currentChapter()\n const elapsed = this.currentTime() - ch.start\n const total = ch.end - ch.start\n return Math.min(100, Math.max(0, (elapsed / total) * 100))\n })\n\n readonly currentChapterProgressRounded = computed(() => Math.round(this.currentChapterProgress()))\n\n readonly speedLabel = computed(() => {\n const s = this.playbackSpeed()\n return `${s.toFixed(s % 1 === 0 ? 1 : 2)}x`\n })\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full space-y-6', this.className)\n }\n\n waveformBarClass(index: number): string {\n const active = (index / waveformBars.length) * 100 <= this.progressPercent()\n const live = this.isPlaying() && Math.floor((this.progressPercent() / 100) * waveformBars.length) === index\n return cn(\n 'w-full max-w-[8px] rounded-full transition-[height] duration-150',\n active ? 'bg-primary' : 'bg-muted-foreground/25 group-hover/wave:bg-muted-foreground/35',\n live && 'ring-primary/40 scale-y-110 ring-2',\n )\n }\n\n chapterCardClass(ch: PodcastChapter): string {\n return cn(\n 'group flex cursor-pointer flex-col justify-between rounded-xl border p-3 text-xs transition-colors duration-200',\n this.currentChapter().id === ch.id\n ? 'border-primary/50 bg-primary/5 ring-primary/20 shadow-xs ring-1'\n : 'bg-card hover:bg-muted/40 border-border/70',\n )\n }\n\n formatTime(seconds: number): string {\n return formatPodcastTime(seconds)\n }\n\n togglePlay(): void {\n if (this.isPlaying()) this.stopPlayback()\n else this.startPlayback()\n }\n\n private startPlayback(): void {\n this.isPlaying.set(true)\n if (this.playInterval) clearInterval(this.playInterval)\n this.playInterval = setInterval(() => {\n if (this.currentTime() < this.totalDuration()) {\n this.currentTime.update((t) => t + 1)\n } else {\n this.stopPlayback()\n }\n }, 1000 / this.playbackSpeed())\n }\n\n private stopPlayback(): void {\n this.isPlaying.set(false)\n if (this.playInterval) {\n clearInterval(this.playInterval)\n this.playInterval = null\n }\n }\n\n seekTo(seconds: number): void {\n this.currentTime.set(Math.max(0, Math.min(seconds, this.totalDuration())))\n }\n\n handleWaveformClick(event: MouseEvent): void {\n const target = event.currentTarget as HTMLElement | null\n if (!target) return\n const rect = target.getBoundingClientRect()\n if (rect.width === 0) return\n const ratio = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width))\n this.seekTo(Math.round(ratio * this.totalDuration()))\n }\n\n skipSeconds(delta: number): void {\n this.seekTo(this.currentTime() + delta)\n }\n\n cycleSpeed(): void {\n const idx = speedOptions.indexOf(this.playbackSpeed())\n const next = speedOptions[(idx + 1) % speedOptions.length]\n this.playbackSpeed.set(next)\n if (this.isPlaying()) this.startPlayback()\n }\n\n skipToNextChapter(): void {\n const idx = chapters.findIndex((c) => c.id === this.currentChapter().id)\n if (idx < chapters.length - 1) this.seekTo(chapters[idx + 1].start)\n }\n\n skipToPrevChapter(): void {\n const ch = this.currentChapter()\n if (this.currentTime() - ch.start > 4) {\n this.seekTo(ch.start)\n } else {\n const idx = chapters.findIndex((c) => c.id === ch.id)\n if (idx > 0) this.seekTo(chapters[idx - 1].start)\n else this.seekTo(0)\n }\n }\n\n toggleMute(): void {\n this.isMuted.update((m) => !m)\n }\n\n toggleLike(): void {\n const next = !this.isLiked()\n this.isLiked.set(next)\n this.likeCount.update((c) => c + (next ? 1 : -1))\n }\n\n handleCopyLink(): void {\n try {\n void navigator.clipboard?.writeText(window.location.href)\n } catch {\n // Clipboard unavailable (jsdom) — still show feedback.\n }\n this.isCopied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.isCopied.set(false), 2000)\n }\n\n handleDownload(): void {\n this.isDownloaded.set(true)\n clearTimeout(this.downloadTimer)\n this.downloadTimer = setTimeout(() => this.isDownloaded.set(false), 3000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/podcast-audio-player/podcast-audio-player.component.ts" }, { "path": "packages/registry-angular/blocks/podcast-audio-player/index.ts", "content": "export {\n UiPodcastAudioPlayerComponent,\n formatPodcastTime,\n type PodcastChapter,\n type PodcastPanelist,\n type PodcastReferenceLink,\n} from './podcast-audio-player.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/podcast-audio-player/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/accordion.json", "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }