{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "lesson-video-player", "title": "Lesson Video Player", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/lesson-video-player/lesson-video-player.component.ts", "content": "// Online lecture video player with playback speed selector, interactive timestamped\n// transcript, and note-taking drawer. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, OnDestroy, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Bookmark,\n BookmarkCheck,\n Check,\n CheckCircle2,\n ChevronRight,\n Clock,\n Download,\n FileText,\n Layers,\n Lightbulb,\n LucideAngularModule,\n Maximize2,\n MessageSquare,\n Pause,\n Play,\n Plus,\n RotateCcw,\n RotateCw,\n Search,\n Subtitles,\n ThumbsUp,\n Trash2,\n Volume2,\n VolumeX,\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 UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport interface TranscriptItem {\n id: string\n start: number\n end: number\n speaker: string\n text: string\n}\n\nexport interface NoteItem {\n id: string\n timestamp: number\n text: string\n createdAt: string\n}\n\nexport interface QuestionItem {\n id: string\n timestamp: number\n author: string\n avatar: string\n question: string\n upvotes: number\n hasUpvoted?: boolean\n answer?: { author: string; role: string; text: string; isInstructor?: boolean }\n}\n\nexport const transcriptSeed: TranscriptItem[] = [\n {\n id: 't-1',\n start: 0,\n end: 75,\n speaker: 'Sarah Connor',\n text: 'Welcome back! In this lesson, we are tackling one of the trickiest parts of design systems: building resilient dark-mode token palettes using the OKLCH color space.',\n },\n {\n id: 't-2',\n start: 75,\n end: 220,\n speaker: 'Sarah Connor',\n text: 'Why do traditional HSL and sRGB color models fall short? Because perceptual brightness is non-uniform — pure blue at 50% lightness looks vastly darker to the human eye than pure yellow at 50% lightness.',\n },\n {\n id: 't-3',\n start: 220,\n end: 384,\n speaker: 'Sarah Connor',\n text: 'OKLCH solves this by decoupling perceived lightness (L) from chroma (C) and hue (H). When you step lightness down by 10%, the perceived luminance decreases identically regardless of hue angle.',\n },\n {\n id: 't-4',\n start: 384,\n end: 555,\n speaker: 'Sarah Connor',\n text: 'When calculating contrast in OKLCH, lightness is perceptually uniform across hues, which prevents dark-mode contrast crushing. Notice our formula on the slide.',\n },\n {\n id: 't-5',\n start: 555,\n end: 750,\n speaker: 'Sarah Connor',\n text: 'Next, let us discuss wide-gamut Display P3 displays. While P3 provides 25% richer saturation, we must ensure automatic fallback clamping for legacy sRGB monitors.',\n },\n {\n id: 't-6',\n start: 750,\n end: 945,\n speaker: 'Sarah Connor',\n text: 'In dark mode, human retinas are more sensitive to intense chroma saturation on dark surfaces. A solid heuristic is to reduce chroma by 15% to 20% on OLED dark backgrounds.',\n },\n {\n id: 't-7',\n start: 945,\n end: 1120,\n speaker: 'Sarah Connor',\n text: 'To wrap up, download the starter configuration below. In the next lesson, we will wire these token variables directly into our Tailwind CSS v4 @theme inline directives.',\n },\n]\n\nexport const notesSeed: NoteItem[] = [\n {\n id: 'n-1',\n timestamp: 102,\n text: 'Pure blue vs pure yellow in HSL: huge luminance mismatch. OKLCH fixes this at the root.',\n createdAt: '2 hours ago',\n },\n {\n id: 'n-2',\n timestamp: 252,\n text: 'Review color-mix in oklab formulas — can generate surface elevation tints with a single token!',\n createdAt: '1 hour ago',\n },\n {\n id: 'n-3',\n timestamp: 384,\n text: 'Lightness rule: Keep L >= 0.70 for primary brand text on dark surfaces to guarantee APCA Lc 60 minimum.',\n createdAt: 'Just now',\n },\n]\n\nexport const questionsSeed: QuestionItem[] = [\n {\n id: 'q-1',\n timestamp: 225,\n author: 'David K.',\n avatar: 'DK',\n question: 'Is browser support for OKLCH color-mix and raw oklch() ready for enterprise SaaS applications?',\n upvotes: 18,\n hasUpvoted: false,\n answer: {\n author: 'Sarah Connor',\n role: 'Instructor',\n isInstructor: true,\n text: 'Yes! OKLCH has 98%+ global browser support across all evergreen browsers. Tailwind CSS v4 uses it as the default token format natively.',\n },\n },\n {\n id: 'q-2',\n timestamp: 380,\n author: 'Elena R.',\n avatar: 'ER',\n question: 'How do you prevent high chroma vibration on dark OLED zinc-950 surfaces?',\n upvotes: 12,\n hasUpvoted: false,\n answer: {\n author: 'Sarah Connor',\n role: 'Instructor',\n isInstructor: true,\n text: 'Scale down chroma by multiplying C * 0.82 on dark tokens, while boosting lightness by +0.08 to preserve legibility without glare.',\n },\n },\n]\n\nexport function 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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-lesson-video-player, [ui-lesson-video-player]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiProgressComponent,\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n Design Systems with Tailwind CSS v4\n \n \n \n Module 1: Design Tokens Architecture\n \n \n
\n

\n Lesson 4: Building Resilient OKLCH Dark-Mode Token Palettes\n

\n
\n\n
\n \n\n \n @if (isBookmarked()) {\n \n } @else {\n \n }\n \n\n \n @if (isCompleted()) {\n \n } @else {\n \n }\n {{ isCompleted() ? 'Completed' : 'Mark Complete' }}\n \n\n \n
\n
\n
\n\n \n
\n \n
\n \n
\n
\n \n 1080p 60fps HD\n \n \n Lesson 4 / 12\n \n
\n \n \n Sarah Connor\n ·\n Principal Design Engineer\n
\n
\n\n
\n \n
\n
\n
\n \n \n \n
\n tokens.config.css — OKLCH Palette Engine\n
\n \n APCA Lc 74 (AAA)\n \n
\n /* OKLCH Perceptual Uniformity Matrix */\n@theme inline {\n --color-primary: oklch(0.62 0.19 259.8); /* Brand Base */\n --color-surface-dark: oklch(0.18 0.02 260.0); /* OLED Safe */\n}\n
\n Lightness Ramp:\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n \n @if (isPlaying()) {\n \n } @else {\n \n }\n \n \n\n @if (showCaptions() && activeTranscriptItem()) {\n \n [{{ formatTime(activeTranscriptItem()!.start) }}]\n {{ activeTranscriptItem()!.text }}\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 @if (isMuted()) {\n \n } @else {\n \n }\n \n \n {{ formattedCurrentTime() }}\n /\n {{ formattedTotalTime() }}\n
\n
\n
\n \n {{ playbackSpeed() }}x\n \n \n \n \n \n \n \n
\n \n \n \n\n \n
\n
\n
\n \n

Key Takeaways & Starter Files

\n
\n

Download the OKLCH token starter configuration for this lesson.

\n
\n
\n
    \n
  • \n \n OKLCH lightness is perceptually uniform — step L by 10% and every hue darkens identically.\n
    • \n
  • \n \n Reduce chroma 15–20% on OLED dark surfaces to stop high-chroma vibration and glare.\n
    • \n
  • \n \n Keep L ≥ 0.70 for primary brand text on dark surfaces to guarantee APCA Lc 60 minimum.\n
    • \n
\n
\n \n @if (copiedAsset() === 'tokens') {\n \n Copied!\n } @else {\n \n tokens.config.css\n }\n \n \n @if (copiedAsset() === 'figma') {\n \n Copied!\n } @else {\n \n Figma Variables (.json)\n }\n \n
\n
\n
\n \n\n \n \n \n \n `,\n})\nexport class UiLessonVideoPlayerComponent implements OnDestroy {\n protected readonly ArrowRight = ArrowRight\n protected readonly Bookmark = Bookmark\n protected readonly BookmarkCheck = BookmarkCheck\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronRight = ChevronRight\n protected readonly Clock = Clock\n protected readonly Download = Download\n protected readonly FileText = FileText\n protected readonly Layers = Layers\n protected readonly Lightbulb = Lightbulb\n protected readonly Maximize2 = Maximize2\n protected readonly MessageSquare = MessageSquare\n protected readonly Pause = Pause\n protected readonly Play = Play\n protected readonly Plus = Plus\n protected readonly RotateCcw = RotateCcw\n protected readonly RotateCw = RotateCw\n protected readonly Search = Search\n protected readonly Subtitles = Subtitles\n protected readonly ThumbsUp = ThumbsUp\n protected readonly Trash2 = Trash2\n protected readonly Volume2 = Volume2\n protected readonly VolumeX = VolumeX\n\n @Input('class') className?: string\n\n readonly isPlaying = signal(false)\n readonly currentTime = signal(384)\n readonly totalDuration = signal(1120)\n readonly bufferedPercent = signal(78)\n readonly volume = signal(85)\n readonly isMuted = signal(false)\n readonly playbackSpeed = signal(1.25)\n readonly speedOptions = [0.75, 1.0, 1.25, 1.5, 1.75, 2.0]\n readonly showCaptions = signal(true)\n readonly isFullscreen = signal(false)\n readonly activeTab = signal<'transcript' | 'notes' | 'qa'>('transcript')\n readonly transcriptSearch = signal('')\n readonly isCompleted = signal(false)\n readonly isBookmarked = signal(false)\n readonly copiedAsset = signal(null)\n\n readonly transcriptItems = signal(transcriptSeed.map((t) => ({ ...t })))\n readonly newNoteText = signal('')\n readonly notesList = signal(notesSeed.map((n) => ({ ...n })))\n readonly newQuestionText = signal('')\n readonly questionsList = signal(\n questionsSeed.map((q) => ({ ...q, answer: q.answer ? { ...q.answer } : undefined })),\n )\n\n private playInterval: ReturnType | null = null\n private copyTimer: ReturnType | undefined\n\n readonly formattedCurrentTime = computed(() => formatTime(this.currentTime()))\n readonly formattedTotalTime = computed(() => formatTime(this.totalDuration()))\n readonly progressPercent = computed(() => (this.currentTime() / this.totalDuration()) * 100)\n\n readonly activeTranscriptItem = computed(\n () =>\n this.transcriptItems().find((item) => this.currentTime() >= item.start && this.currentTime() < item.end) ??\n this.transcriptItems()[0],\n )\n\n readonly filteredTranscript = computed(() => {\n const query = this.transcriptSearch().trim().toLowerCase()\n if (!query) return this.transcriptItems()\n return this.transcriptItems().filter(\n (item) => item.text.toLowerCase().includes(query) || item.speaker.toLowerCase().includes(query),\n )\n })\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full space-y-5', this.className)\n }\n\n formatTime(seconds: number): string {\n return formatTime(seconds)\n }\n\n togglePlay(): void {\n this.isPlaying.update((v) => !v)\n if (this.isPlaying()) {\n this.playInterval = setInterval(() => {\n if (this.currentTime() < this.totalDuration()) {\n this.currentTime.update((t) => t + 1)\n } else {\n this.isPlaying.set(false)\n if (this.playInterval) clearInterval(this.playInterval)\n }\n }, 1000 / this.playbackSpeed())\n } else if (this.playInterval) {\n clearInterval(this.playInterval)\n }\n }\n\n seekTo(seconds: number): void {\n this.currentTime.set(Math.max(0, Math.min(seconds, this.totalDuration())))\n }\n\n handleSeekClick(event: MouseEvent): void {\n const target = event.currentTarget as HTMLElement\n const rect = target.getBoundingClientRect()\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 = this.speedOptions.indexOf(this.playbackSpeed())\n this.playbackSpeed.set(this.speedOptions[(idx + 1) % this.speedOptions.length]!)\n if (this.isPlaying()) {\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.isPlaying.set(false)\n if (this.playInterval) clearInterval(this.playInterval)\n }\n }, 1000 / this.playbackSpeed())\n }\n }\n\n toggleMute(): void {\n this.isMuted.update((v) => !v)\n }\n\n isActiveTranscript(item: TranscriptItem): boolean {\n return this.activeTranscriptItem()?.id === item.id\n }\n\n transcriptRowClass(item: TranscriptItem): string {\n return cn(\n 'w-full rounded-lg border p-3 text-left transition-colors',\n this.isActiveTranscript(item)\n ? 'border-primary/40 bg-primary/5'\n : 'border-transparent hover:bg-muted/40 hover:border-border',\n )\n }\n\n handleAddNote(): void {\n const text = this.newNoteText().trim()\n if (!text) return\n this.notesList.update((prev) => [\n { id: `note-${Date.now()}`, timestamp: this.currentTime(), text, createdAt: 'Just now' },\n ...prev,\n ])\n this.newNoteText.set('')\n }\n\n handleDeleteNote(id: string): void {\n this.notesList.update((prev) => prev.filter((n) => n.id !== id))\n }\n\n handleNoteKeyDown(event: KeyboardEvent): void {\n if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {\n event.preventDefault()\n this.handleAddNote()\n }\n }\n\n handleQuestionKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && !event.shiftKey && !event.metaKey && !event.ctrlKey) {\n event.preventDefault()\n this.handleAddQuestion()\n }\n }\n\n handleAddQuestion(): void {\n const text = this.newQuestionText().trim()\n if (!text) return\n this.questionsList.update((prev) => [\n {\n id: `q-${Date.now()}`,\n timestamp: this.currentTime(),\n author: 'You (Student)',\n avatar: 'ME',\n question: text,\n upvotes: 1,\n hasUpvoted: true,\n },\n ...prev,\n ])\n this.newQuestionText.set('')\n }\n\n toggleUpvote(q: QuestionItem): void {\n this.questionsList.update((prev) =>\n prev.map((item) =>\n item.id === q.id\n ? { ...item, upvotes: item.upvotes + (item.hasUpvoted ? -1 : 1), hasUpvoted: !item.hasUpvoted }\n : item,\n ),\n )\n }\n\n handleCopyAsset(name: string): void {\n this.copiedAsset.set(name)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedAsset.set(null), 2000)\n }\n\n ngOnDestroy(): void {\n if (this.playInterval) clearInterval(this.playInterval)\n clearTimeout(this.copyTimer)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/lesson-video-player/lesson-video-player.component.ts" }, { "path": "packages/registry-angular/blocks/lesson-video-player/index.ts", "content": "export {\n UiLessonVideoPlayerComponent,\n transcriptSeed,\n notesSeed,\n questionsSeed,\n formatTime,\n type TranscriptItem,\n type NoteItem,\n type QuestionItem,\n} from './lesson-video-player.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/lesson-video-player/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/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/tabs.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Online lecture video player with playback speed selector, interactive timestamped transcript, and note-taking drawer.", "categories": [ "education", "app", "media" ] }