{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "lesson-video-player", "title": "Lesson Video Player", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/lesson-video-player/LessonVideoPlayer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowRight,\n Bookmark,\n BookmarkCheck,\n Check,\n CheckCircle2,\n ChevronRight,\n Clock,\n Download,\n FileCode2,\n FileText,\n Layers,\n Lightbulb,\n Maximize2,\n MessageSquare,\n MessageSquareQuote,\n Minimize2,\n Pause,\n Play,\n Plus,\n RotateCcw,\n RotateCw,\n Search,\n Subtitles,\n ThumbsUp,\n Trash2,\n Volume1,\n Volume2,\n VolumeX,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { Textarea } from '@/components/ui/textarea'\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?: {\n author: string\n role: string\n text: string\n isInstructor?: boolean\n }\n}\n\nconst initialTranscript: 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\nconst initialNotes: NoteItem[] = [\n {\n id: 'n-1',\n timestamp: 102, // 01:42\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, // 04:12\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, // 06:24\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\nconst initialQuestions: QuestionItem[] = [\n {\n id: 'q-1',\n timestamp: 225, // 03:45\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, // 06:20\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\nconst speedOptions = [0.75, 1.0, 1.25, 1.5, 1.75, 2.0]\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 LessonVideoPlayer() {\n // Video Playback State\n const [isPlaying, setIsPlaying] = React.useState(false)\n const [currentTime, setCurrentTime] = React.useState(384) // 06:24\n const [totalDuration] = React.useState(1120) // 18:40\n const [bufferedPercent] = React.useState(78)\n const [volume] = React.useState(85)\n const [isMuted, setIsMuted] = React.useState(false)\n const [playbackSpeed, setPlaybackSpeed] = React.useState(1.25)\n const [showCaptions, setShowCaptions] = React.useState(true)\n const [isFullscreen, setIsFullscreen] = React.useState(false)\n const [activeTab, setActiveTab] = React.useState('transcript')\n const [transcriptSearch, setTranscriptSearch] = React.useState('')\n const [isCompleted, setIsCompleted] = React.useState(false)\n const [isBookmarked, setIsBookmarked] = React.useState(false)\n const [copiedAsset, setCopiedAsset] = React.useState(null)\n\n // Notes and Q&A state\n const [notesList, setNotesList] = React.useState(initialNotes)\n const [newNoteText, setNewNoteText] = React.useState('')\n const [questionsList, setQuestionsList] = React.useState(initialQuestions)\n const [newQuestionText, setNewQuestionText] = React.useState('')\n\n // Video interval timer\n React.useEffect(() => {\n let interval: NodeJS.Timeout | null = null\n if (isPlaying) {\n interval = setInterval(() => {\n setCurrentTime((prev) => {\n if (prev < totalDuration) {\n return prev + 1\n }\n setIsPlaying(false)\n return prev\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 progressPercent = (currentTime / totalDuration) * 100\n\n const seekTo = (seconds: number) => {\n setCurrentTime(Math.max(0, Math.min(seconds, totalDuration)))\n }\n\n const handleSeekClick = (event: React.MouseEvent) => {\n const rect = event.currentTarget.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 toggleMute = () => {\n setIsMuted((prev) => !prev)\n }\n\n const activeTranscriptItem =\n initialTranscript.find((item) => currentTime >= item.start && currentTime < item.end) || initialTranscript[0]\n\n const filteredTranscript = initialTranscript.filter((item) => {\n const query = transcriptSearch.trim().toLowerCase()\n if (!query) return true\n return item.text.toLowerCase().includes(query) || item.speaker.toLowerCase().includes(query)\n })\n\n const handleAddNote = () => {\n const text = newNoteText.trim()\n if (!text) return\n setNotesList([\n {\n id: `note-${Date.now()}`,\n timestamp: currentTime,\n text,\n createdAt: 'Just now',\n },\n ...notesList,\n ])\n setNewNoteText('')\n }\n\n const handleDeleteNote = (id: string) => {\n setNotesList((prev) => prev.filter((n) => n.id !== id))\n }\n\n const handleAddQuestion = () => {\n const text = newQuestionText.trim()\n if (!text) return\n setQuestionsList([\n {\n id: `q-${Date.now()}`,\n timestamp: currentTime,\n author: 'You (Student)',\n avatar: 'ME',\n question: text,\n upvotes: 1,\n hasUpvoted: true,\n },\n ...questionsList,\n ])\n setNewQuestionText('')\n }\n\n const toggleUpvote = (id: string) => {\n setQuestionsList((prev) =>\n prev.map((q) => {\n if (q.id === id) {\n const hasUpvoted = !q.hasUpvoted\n return {\n ...q,\n hasUpvoted,\n upvotes: hasUpvoted ? q.upvotes + 1 : q.upvotes - 1,\n }\n }\n return q\n }),\n )\n }\n\n const handleCopyAsset = (name: string) => {\n setCopiedAsset(name)\n setTimeout(() => {\n setCopiedAsset(null)\n }, 2000)\n }\n\n return (\n
\n {/* Top Lesson Navigation & Course Header Bar */}\n
\n
\n {/* Left: Course Context & Lesson Title */}\n
\n
\n Design Systems with Tailwind CSS v4\n \n \n \n Module 1: Design Tokens Architecture\n \n \n
\n\n

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

\n
\n\n {/* Right: Progress Indicator & Navigation Buttons */}\n
\n {/* Course Progress Pill */}\n \n\n {/* Bookmark Button */}\n setIsBookmarked(!isBookmarked)}\n >\n {isBookmarked ? (\n \n ) : (\n \n )}\n \n\n {/* Complete Lesson Button */}\n setIsCompleted(!isCompleted)}\n >\n {isCompleted ? : }\n {isCompleted ? 'Completed' : 'Mark Complete'}\n \n\n {/* Next Lesson Button */}\n \n
\n
\n
\n\n {/* 2-Column Classroom Layout */}\n
\n {/* Left Column: Video Player Canvas + Takeaways & Downloads (8 cols) */}\n
\n {/* Video Screen Container (Dark Video Canvas) */}\n
\n {/* Top Video Overlay Info Bar */}\n
\n
\n \n 1080p 60fps HD\n \n \n Lesson 4 / 12\n \n
\n\n {/* Instructor Watermark */}\n
\n \n Sarah Connor\n ·\n Principal Design Engineer\n
\n
\n\n {/* Video Presentation Slide & Diagram Visual */}\n
\n {/* Simulated Code & Color Token Slide Matrix */}\n
\n
\n
\n
\n \n \n \n
\n \n tokens.config.css — OKLCH Palette Engine\n \n
\n \n APCA Lc 74 (AAA)\n \n
\n\n {/* Code Syntax Sample */}\n 
\n                  \n                    /* OKLCH Perceptual Uniformity Matrix */\n                    {'\\n'}\n                    @theme inline {'{\\n'}{' '}\n                    --color-primary:{' '}\n                    oklch(0.62 0.19 259.8);{' '}\n                    /* Brand Base */\n                    {'\\n'} --color-surface-dark:{' '}\n                    oklch(0.18 0.02 260.0);{' '}\n                    /* OLED Safe */\n                    {'\\n'}\n                    {'}'}\n                  \n
\n\n {/* Color Palette Swatch Strip */}\n
\n Lightness Ramp:\n
\n
\n
\n \n
\n
\n
\n
\n
\n\n {/* Big Center Play / Pause Floating Button */}\n setIsPlaying(!isPlaying)}\n >\n {isPlaying ? (\n \n ) : (\n \n )}\n \n
\n\n {/* Captions Subtitles Overlay Box */}\n {showCaptions && activeTranscriptItem && (\n
\n [{formatTime(activeTranscriptItem.start)}]{' '}\n {activeTranscriptItem.text}\n
\n )}\n\n {/* Custom Player Controls Bar (Bottom Overlay) */}\n
\n {/* Scrubber Timeline Bar */}\n \n {/* Background Full Track */}\n
\n {/* Buffer Progress */}\n \n {/* Played Progress */}\n \n
\n\n {/* Scrubber Dot Handle */}\n \n
\n\n {/* Controls Row: Play, Skip, Timestamps, Speed, Audio, Screen */}\n
\n {/* Left Controls */}\n
\n {/* Play / Pause */}\n setIsPlaying(!isPlaying)}\n >\n {isPlaying ? (\n \n ) : (\n \n )}\n \n\n {/* 15s Rewind */}\n skipSeconds(-15)}\n >\n \n \n\n {/* 15s Fast Forward */}\n skipSeconds(15)}\n >\n \n \n\n {/* Volume Toggle */}\n \n {isMuted || volume === 0 ? (\n \n ) : volume < 50 ? (\n \n ) : (\n \n )}\n \n\n {/* Timestamp Display */}\n
\n {formattedCurrentTime}\n /\n {formattedTotalTime}\n
\n
\n\n {/* Right Controls */}\n
\n {/* Speed Selector Button */}\n \n {playbackSpeed}x\n \n\n {/* Captions Subtitles Toggle */}\n setShowCaptions(!showCaptions)}\n >\n \n \n\n {/* Fullscreen Toggle */}\n setIsFullscreen(!isFullscreen)}\n >\n {isFullscreen ? : }\n \n
\n
\n
\n
\n\n {/* Lesson Key Takeaways & Downloadable Assets Row */}\n
\n {/* Key Takeaways Card */}\n \n \n
\n \n \n Key Takeaways\n \n \n OKLCH v4\n \n
\n \n Essential architectural concepts taught in this lecture\n \n \n \n
\n
\n 1\n
\n
\n Perceptual Uniformity:\n

\n OKLCH lightness remains constant across all hues, maintaining predictable contrast ratios across\n both dark and light palettes.\n

\n
\n
\n\n
\n
\n 2\n
\n
\n Display P3 Gamut Clamping:\n

\n Leverage vibrant P3 color gamuts on supported displays while automatically fallback-clamping for\n sRGB displays.\n

\n
\n
\n\n
\n
\n 3\n
\n
\n Chroma Scaling in Dark Mode:\n

\n Scale down chroma by 15-20% on deep dark backgrounds to prevent ocular fatigue and visual\n vibration.\n

\n
\n
\n \n \n\n {/* Downloadable Source Code & Assets Card */}\n \n \n
\n \n \n Lesson Assets & Code\n \n \n 3 Files\n \n
\n Starter boilerplate and token configuration files\n \n \n {/* Asset 1 */}\n
\n
\n
\n TS\n
\n
\n

tokens.config.ts

\n

14.2 KB · Tailwind v4 Theme

\n
\n
\n handleCopyAsset('tokens.config.ts')}\n >\n {copiedAsset === 'tokens.config.ts' ? (\n \n ) : (\n \n )}\n {copiedAsset === 'tokens.config.ts' ? 'Saved' : 'Download'}\n \n
\n\n {/* Asset 2 */}\n
\n
\n
\n FIG\n
\n
\n

palette-matrix.fig

\n

4.8 MB · Token Library

\n
\n
\n handleCopyAsset('palette-matrix.fig')}\n >\n {copiedAsset === 'palette-matrix.fig' ? (\n \n ) : (\n \n )}\n {copiedAsset === 'palette-matrix.fig' ? 'Saved' : 'Download'}\n \n
\n\n {/* Asset 3 */}\n
\n
\n
\n PDF\n
\n
\n

apca-contrast-guide.pdf

\n

1.1 MB · Cheat Sheet

\n
\n
\n handleCopyAsset('apca-contrast-guide.pdf')}\n >\n {copiedAsset === 'apca-contrast-guide.pdf' ? (\n \n ) : (\n \n )}\n {copiedAsset === 'apca-contrast-guide.pdf' ? 'Saved' : 'Download'}\n \n
\n \n \n
\n
\n\n {/* Right Column: Interactive Transcript & Notes Workspace (4 cols) */}\n
\n\n {/* Transcript Footer Notice */}\n
\n Click any line to jump to that timestamp in the lecture.\n
\n \n\n {/* TAB 2: Timestamped Notes Workspace */}\n \n {/* Note Composer */}\n
\n
\n \n Captures current playback time\n
\n\n setNewNoteText(v)}\n rows={2}\n className=\"resize-y text-xs leading-relaxed\"\n placeholder={`Write your thoughts or takeaway at ${formattedCurrentTime}...`}\n onKeyDown={(e) => {\n if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {\n handleAddNote()\n }\n }}\n />\n\n
\n Press ⌘+Enter to save\n \n \n Save Note\n \n
\n
\n\n {/* Saved Notes List */}\n
\n {notesList.map((note) => (\n \n
\n seekTo(note.timestamp)}\n >\n \n {formatTime(note.timestamp)}\n \n\n
\n {note.createdAt}\n handleDeleteNote(note.id)}\n >\n \n \n
\n
\n\n

{note.text}

\n
\n ))}\n\n {notesList.length === 0 && (\n
\n No personal notes yet. Add your first note above!\n
\n )}\n
\n \n\n {/* TAB 3: Q&A Community Discussion */}\n \n {/* Question Composer */}\n
\n
\n \n Tagged to this video time\n
\n\n setNewQuestionText(e.target.value)}\n placeholder=\"Ask a question about this topic...\"\n className=\"h-8 text-xs\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleAddQuestion()\n }\n }}\n />\n\n
\n \n Post Question\n \n
\n
\n\n {/* Questions Thread List */}\n
\n {questionsList.map((q) => (\n
\n {/* Question Header */}\n
\n
\n
\n {q.avatar}\n
\n
\n {q.author}\n seekTo(q.timestamp)}\n >\n [{formatTime(q.timestamp)}]\n \n
\n
\n\n {/* Upvote Button */}\n toggleUpvote(q.id)}\n >\n \n {q.upvotes}\n \n
\n\n {/* Question Text */}\n

{q.question}

\n\n {/* Instructor Answer if available */}\n {q.answer && (\n
\n
\n {q.answer.author}\n \n Instructor Verified\n \n
\n

{q.answer.text}

\n
\n )}\n
\n ))}\n
\n \n \n \n \n \n \n )\n}\n\nexport default LessonVideoPlayer\n", "type": "registry:block", "target": "~/components/blocks/LessonVideoPlayer.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "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/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/tabs.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "Online lecture video player with playback speed selector, interactive timestamped transcript, and note-taking drawer.", "categories": [ "education", "app", "media" ] }