Enhance bootcamp with rich text editor, curriculum management, and video toggle

Phase 1: Rich Text Editor with Code Syntax Highlighting
- Add TipTap CodeBlock extension with lowlight for syntax highlighting
- Support multiple languages (JavaScript, TypeScript, Python, Java, C++, HTML, CSS, JSON)
- Add copy-to-clipboard button on code blocks
- Add line numbers display with CSS
- Replace textarea with RichTextEditor in CurriculumEditor
- Add DOMPurify sanitization in Bootcamp display
- Add dark theme syntax highlighting styles

Phase 2: Admin Curriculum Management Page
- Create dedicated ProductCurriculum page at /admin/products/:id/curriculum
- Three-column layout: Modules (3) | Lessons (5) | Editor (4)
- Full-page UX with drag-and-drop reordering
- Add "Manage Curriculum" button for bootcamp products in AdminProducts
- Breadcrumb navigation back to products

Phase 3: Product-Level Video Source Toggle
- Add youtube_url and embed_code columns to bootcamp_lessons table
- Add video_source and video_source_config columns to products table
- Update ProductCurriculum with separate YouTube URL and Embed Code fields
- Create smart VideoPlayer component in Bootcamp.tsx
- Support YouTube ↔ Embed switching with smart fallback
- Show "Konten tidak tersedia" warning when no video configured
- Maintain backward compatibility with existing video_url field

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2025-12-30 17:07:31 +07:00
parent 52ec0b9b86
commit da71acb431
10 changed files with 1114 additions and 34 deletions

View File

@@ -0,0 +1,41 @@
-- ============================================
-- Add Video Source Columns for YouTube/Embed Toggle
-- ============================================
-- This migration adds support for dual video sources (YouTube and Embed)
-- at the product level, allowing quick switching between sources
-- Add video source columns to bootcamp_lessons table
ALTER TABLE bootcamp_lessons
ADD COLUMN IF NOT EXISTS youtube_url TEXT,
ADD COLUMN IF NOT EXISTS embed_code TEXT;
-- Migrate existing video_url to youtube_url
UPDATE bootcamp_lessons
SET youtube_url = video_url
WHERE video_url IS NOT NULL
AND youtube_url IS NULL;
-- Note: Keep old video_url column for backward compatibility
-- Can drop after verification if desired
-- Add video_source column to products table
ALTER TABLE products
ADD COLUMN IF NOT EXISTS video_source TEXT DEFAULT 'youtube',
ADD COLUMN IF NOT EXISTS video_source_config JSONB DEFAULT '{}';
-- Add constraint to ensure valid sources
ALTER TABLE products
DROP CONSTRAINT IF EXISTS products_video_source_check;
ALTER TABLE products
ADD CONSTRAINT products_video_source_check
CHECK (video_source IN ('youtube', 'embed'));
-- Create index for faster queries
CREATE INDEX IF NOT EXISTS idx_products_video_source ON products(video_source);
-- Add comments for documentation
COMMENT ON COLUMN products.video_source IS 'Active video source for bootcamp lessons: youtube or embed';
COMMENT ON COLUMN products.video_source_config IS 'Configuration metadata for video source settings';
COMMENT ON COLUMN bootcamp_lessons.youtube_url IS 'YouTube video URL for the lesson';
COMMENT ON COLUMN bootcamp_lessons.embed_code IS 'Custom embed code (Adilo, Vimeo, iframe) for the lesson';