{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-video-modal-walkthrough", "title": "Hero Video Modal Walkthrough", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-video-modal-walkthrough/hero-video-modal-walkthrough.component.ts", "content": "// Product walkthrough hero with an interactive video modal player: chapter\n// timestamps, playback speed controls, mute/play toggles and social proof.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { BookOpen, LucideAngularModule, Maximize2, Pause, Play, Star, Volume2, VolumeX, X } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\nexport interface HeroVideoChapter {\n id: string\n title: string\n timestamp: string\n description: string\n}\n\nconst chapters: HeroVideoChapter[] = [\n {\n id: 'intro',\n title: '1. Architecture & Registry Engine',\n timestamp: '0:45',\n description: 'Learn how unbundled components provide 100% source ownership without npm dependencies.',\n },\n {\n id: 'tokens',\n title: '2. OKLCH Theme & Token System',\n timestamp: '1:30',\n description: 'Explore the fluid color space engine and dynamic contrast balancing in Tailwind v4.',\n },\n {\n id: 'parity',\n title: '3. Dual-Framework Parity Model',\n timestamp: '2:15',\n description: 'Deep dive into mirror synchronization between Vue 3.5 SFC and React 19 TSX.',\n },\n]\n\nconst avatarTiles = [\n { initials: 'RF', tone: 'bg-primary/20 text-primary' },\n { initials: 'PC', tone: 'bg-success/20 text-success' },\n { initials: 'EK', tone: 'bg-info/20 text-info' },\n { initials: 'SH', tone: 'bg-warning/20 text-warning' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-video-modal-walkthrough, [ui-hero-video-modal-walkthrough]',\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: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],\n template: `\n
\n \n \n\n
\n \n
\n \n \n Interactive 3-Minute Architecture Walkthrough\n \n\n

\n See how top engineering teams build with UIPKGE.\n

\n\n

\n Watch a full walkthrough of our design engineering principles, OKLCH token engine, and dual-framework\n component architecture.\n

\n\n \n
\n \n\n \n \n Read Architecture RFC\n \n
\n\n \n
\n
\n @for (avatar of avatars; track avatar.initials) {\n \n {{ avatar.initials }}\n
\n }\n
\n
\n @for (star of stars; track star) {\n \n }\n 4.9/5 by 1,400+ Design Engineers\n
\n
\n
\n\n \n
\n \n \n \n \n
\n\n \n
\n \n \n Full HD • 60 FPS\n \n \n Total runtime: 3m 30s\n \n
\n\n \n
\n \n \n
\n

\n Click to Launch Interactive Player\n

\n \n\n \n
\n @for (chapter of chapterList; track chapter.id; let idx = $index) {\n \n
\n {{ chapterShortTitle(chapter.title) }}\n {{ chapter.timestamp }}\n
\n
\n }\n \n \n \n \n \n\n \n @if (isModalOpen()) {\n
\n \n \n
\n
\n \n {{ currentChapter().title }}\n
\n \n \n \n
\n\n \n
\n
\n UIPKGE Architecture Masterclass\n OKLCH Engine v2.4\n
\n\n \n
\n \n @if (!isPlaying()) {\n \n } @else {\n \n }\n
\n

\n {{ currentChapter().description }}\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 @if (isMuted()) {\n \n } @else {\n \n }\n \n {{ currentChapter().timestamp }} / 3:30\n
\n\n
\n \n {{ playbackSpeed() }}x\n \n \n \n \n
\n
\n
\n \n\n \n
\n @for (ch of chapterList; track ch.id; let idx = $index) {\n \n }\n
\n \n \n }\n
\n `,\n})\nexport class UiHeroVideoModalWalkthroughComponent {\n protected readonly BookOpen = BookOpen\n protected readonly Maximize2 = Maximize2\n protected readonly Pause = Pause\n protected readonly Play = Play\n protected readonly Star = Star\n protected readonly Volume2 = Volume2\n protected readonly VolumeX = VolumeX\n protected readonly X = X\n\n protected readonly chapterList = chapters\n protected readonly avatars = avatarTiles\n protected readonly stars = [1, 2, 3, 4, 5]\n\n @Input('class') className?: string\n\n readonly isModalOpen = signal(false)\n readonly isPlaying = signal(true)\n readonly isMuted = signal(false)\n readonly playbackSpeed = signal<1 | 1.5 | 2>(1)\n readonly activeChapterIndex = signal(0)\n readonly progressPercent = signal(38)\n\n currentChapter(): HeroVideoChapter {\n return chapters[this.activeChapterIndex()] ?? chapters[0]!\n }\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n chapterShortTitle(title: string): string {\n return title.split('.')[1] ?? title\n }\n\n chapterFooterClass(idx: number): string {\n return cn(\n 'border-border border-r p-3 text-left font-mono text-xs transition-colors last:border-r-0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset',\n this.activeChapterIndex() === idx\n ? 'bg-background text-foreground font-semibold'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n openModal(index = 0): void {\n this.activeChapterIndex.set(index)\n this.isModalOpen.set(true)\n this.isPlaying.set(true)\n }\n\n openModalFromStrip(event: Event, index: number): void {\n event.stopPropagation()\n this.openModal(index)\n }\n\n closeModal(): void {\n this.isModalOpen.set(false)\n this.isPlaying.set(false)\n }\n\n togglePlay(): void {\n this.isPlaying.update((v) => !v)\n }\n\n toggleMuted(): void {\n this.isMuted.update((v) => !v)\n }\n\n cyclePlaybackSpeed(): void {\n this.playbackSpeed.update((s) => (s === 1 ? 1.5 : s === 1.5 ? 2 : 1))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-video-modal-walkthrough/hero-video-modal-walkthrough.component.ts" }, { "path": "packages/registry-angular/blocks/hero-video-modal-walkthrough/index.ts", "content": "export { UiHeroVideoModalWalkthroughComponent, type HeroVideoChapter } from './hero-video-modal-walkthrough.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-video-modal-walkthrough/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" ], "description": "Product walkthrough hero section with interactive video modal player, chapter timestamps navigation, playback speed controls, and social proof.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "hero" }