{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "video-playlist-sidebar", "title": "Video Playlist Sidebar", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/video-playlist-sidebar/video-playlist-sidebar.component.ts", "content": "// YouTube and Vimeo style video playlist drawer with active playing indicator,\n// durations, auto-play next switch, loop/shuffle controls, and active lesson summary\n// card. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n Clock,\n Download,\n FileCode2,\n ListVideo,\n LucideAngularModule,\n Play,\n PlayCircle,\n Repeat,\n Repeat1,\n Search,\n Shuffle,\n SkipForward,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\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 { UiSwitchComponent } from '@/ui/switch/switch.component'\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-video-playlist-sidebar, [ui-video-playlist-sidebar]',\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 UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSwitchComponent,\n ],\n template: `\n
\n \n
\n
\n \n
\n
\n \n \n Video Playlist\n \n \n \n 1h 56m Total\n \n
\n UIPKGE Masterclass Series\n
\n\n \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 \n
\n
\n \n {{ completedCount() }} /\n {{ totalCount() }} Videos Completed\n \n {{ progressPercent() }}%\n
\n \n
\n\n \n
\n \n
\n \n \n \n Autoplay Next Video\n \n
\n\n \n
\n \n @if (isLooping()) {\n \n } @else {\n \n }\n Loop\n \n\n \n \n Shuffle\n \n
\n
\n
\n
\n\n \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

\n {{ activeVideo().summary }}\n

\n
\n\n \n
\n
\n \n {{ activeVideo().instructorAvatar }}\n
\n
\n

{{ activeVideo().instructor }}

\n

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

\n
\n
\n\n \n
\n \n @if (activeVideo().isCompleted) {\n \n } @else {\n \n }\n {{ activeVideo().isCompleted ? 'Completed' : 'Mark as Watched' }}\n \n\n \n Next\n \n \n
\n
\n
\n\n \n
\n
\n
\n

\n \n Lesson Exercise Files\n

\n {{ activeVideo().resources.length }} Files\n
\n\n
\n @for (res of activeVideo().resources; track res.id) {\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 \n @if (downloadedAssets()[res.id]) {\n \n } @else {\n \n }\n {{ downloadedAssets()[res.id] ? 'Saved' : 'Get' }}\n \n
\n }\n
\n
\n
\n \n\n \n
\n
\n
\n
\n

Playlist Queue

\n {{ totalCount() }} Videos\n
\n Click any lesson to play\n
\n\n \n
\n \n \n
\n
\n\n \n
\n @for (video of filteredVideos(); track video.id) {\n \n @if (activeVideoId() === video.id) {\n
\n }\n\n \n
\n
\n @if (activeVideoId() === video.id) {\n
\n \n \n \n
\n } @else if (video.isCompleted) {\n \n } @else {\n \n {{ video.index.toString().padStart(2, '0') }}\n \n }\n
\n\n \n
\n
\n \n
\n\n \n {{ video.duration }}\n
\n
\n\n \n
\n

\n {{ video.title }}\n

\n

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

\n
\n
\n\n \n
\n @if (activeVideoId() === video.id) {\n \n Playing\n \n } @else if (video.isCompleted) {\n
\n
\n }\n\n @if (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})\nexport class UiVideoPlaylistSidebarComponent {\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Download = Download\n protected readonly FileCode2 = FileCode2\n protected readonly ListVideo = ListVideo\n protected readonly Play = Play\n protected readonly PlayCircle = PlayCircle\n protected readonly Repeat = Repeat\n protected readonly Repeat1 = Repeat1\n protected readonly Search = Search\n protected readonly Shuffle = Shuffle\n protected readonly SkipForward = SkipForward\n\n @Input() set initialVideoId(v: string) {\n if (v !== undefined) this.activeVideoId.set(v)\n }\n @Input('class') className?: string\n\n readonly playlist = signal(initialPlaylist.map((v) => ({ ...v, resources: [...v.resources] })))\n readonly activeVideoId = signal('vid-03')\n readonly autoPlay = signal(true)\n readonly isLooping = signal(false)\n readonly isShuffled = signal(false)\n readonly searchQuery = signal('')\n readonly downloadedAssets = signal>({})\n\n private downloadTimers: Record> = {}\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n for (const t of Object.values(this.downloadTimers)) clearTimeout(t)\n })\n }\n\n readonly activeVideo = computed(() => {\n const list = this.playlist()\n return list.find((item) => item.id === this.activeVideoId()) ?? list[0]\n })\n\n readonly completedCount = computed(() => this.playlist().filter((item) => item.isCompleted).length)\n readonly totalCount = computed(() => this.playlist().length)\n\n readonly progressPercent = computed(() => {\n const total = this.totalCount()\n if (total === 0) return 0\n return Math.round((this.completedCount() / total) * 100)\n })\n\n readonly filteredVideos = computed(() => {\n const query = this.searchQuery().trim().toLowerCase()\n if (!query) return this.playlist()\n return this.playlist().filter(\n (item) =>\n item.title.toLowerCase().includes(query) ||\n item.instructor.toLowerCase().includes(query) ||\n item.category.toLowerCase().includes(query),\n )\n })\n\n get rootClass(): string {\n return cn('text-foreground mx-auto w-full max-w-2xl space-y-4', this.className)\n }\n\n loopButtonClass(): string {\n return cn(\n 'h-7.5 gap-1.5 px-2.5 text-xs font-medium',\n this.isLooping()\n ? 'border-primary/30 bg-primary/10 text-primary border font-semibold'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n shuffleButtonClass(): string {\n return cn(\n 'h-7.5 gap-1.5 px-2.5 text-xs font-medium',\n this.isShuffled()\n ? 'border-primary/30 bg-primary/10 text-primary border font-semibold'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n queueItemClass(id: string): string {\n return cn(\n 'group relative flex cursor-pointer items-center justify-between gap-3 p-3 transition-colors duration-150',\n this.activeVideoId() === id\n ? 'border-primary/50 bg-primary/10 ring-primary/20 shadow-xs ring-1'\n : 'hover:bg-muted/40',\n )\n }\n\n thumbnailClass(gradient: string): string {\n return cn(\n 'relative aspect-video w-24 shrink-0 overflow-hidden rounded-md border border-zinc-800 bg-zinc-950 bg-gradient-to-br shadow-xs sm:w-28',\n gradient,\n )\n }\n\n playWatermarkClass(id: string): string {\n return cn(\n 'size-5 transition-transform group-hover:scale-110',\n this.activeVideoId() === id ? 'text-primary fill-primary/20' : 'text-muted-foreground/80',\n )\n }\n\n videoTitleClass(id: string): string {\n return cn(\n 'truncate text-xs font-semibold transition-colors sm:text-sm',\n this.activeVideoId() === id ? 'text-primary font-bold' : 'text-foreground group-hover:text-primary',\n )\n }\n\n selectVideo(id: string): void {\n this.activeVideoId.set(id)\n }\n\n toggleComplete(id: string): void {\n this.playlist.update((prev) =>\n prev.map((item) => (item.id === id ? { ...item, isCompleted: !item.isCompleted } : item)),\n )\n }\n\n nextVideo(): void {\n const list = this.playlist()\n const currentIndex = list.findIndex((item) => item.id === this.activeVideoId())\n if (currentIndex === -1) return\n\n if (this.isShuffled()) {\n const remaining = list.filter((item) => item.id !== this.activeVideoId())\n if (remaining.length > 0) {\n const randomIndex = Math.floor(Math.random() * remaining.length)\n this.activeVideoId.set(remaining[randomIndex].id)\n }\n return\n }\n\n if (currentIndex < list.length - 1) {\n this.activeVideoId.set(list[currentIndex + 1].id)\n } else if (this.isLooping()) {\n this.activeVideoId.set(list[0].id)\n }\n }\n\n handleDownload(assetId: string): void {\n this.downloadedAssets.update((prev) => ({ ...prev, [assetId]: true }))\n clearTimeout(this.downloadTimers[assetId])\n this.downloadTimers[assetId] = setTimeout(() => {\n this.downloadedAssets.update((prev) => ({ ...prev, [assetId]: false }))\n }, 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/video-playlist-sidebar/video-playlist-sidebar.component.ts" }, { "path": "packages/registry-angular/blocks/video-playlist-sidebar/index.ts", "content": "export {\n UiVideoPlaylistSidebarComponent,\n type VideoResource,\n type PlaylistItem,\n} from './video-playlist-sidebar.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/video-playlist-sidebar/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "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/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" ] }