# MULTIMEDIA-MASTER-MATRIX.md
## Matriz Maestra de Multimedia - Trading Platform Frontend

**Proyecto:** trading-platform
**Fecha:** 2026-01-25

---

## Resumen Ejecutivo

| Tipo Media | Componentes | Operaciones Soportadas | Estado General |
|------------|-------------|------------------------|----------------|
| **Video** | 2 | GET (streaming), POST (upload falta) | ⚠️ 70% |
| **Charts** | 7+ | Render (Canvas/SVG) | ✅ 90% |
| **Imágenes** | 5+ | GET (carga), POST (upload falta) | ⚠️ 60% |
| **Icons SVG** | 120+ | Inline (optimizado) | ✅ 100% |
| **PDF** | 2 | GET (preview/download) | ⚠️ 50% |
| **Audio** | 0 | NINGUNA | ❌ 0% |

---

## 1. Video (HTML5 Nativo)

### Componentes con Video

| Componente | Epic | Operación | Formato | API Endpoint | Backend | Estado |
|------------|------|-----------|---------|--------------|---------|--------|
| **VideoProgressPlayer** | OQI-002 | GET (streaming) | MP4, WebM | `lesson.videoUrl` (directo) | ✅ Sirve archivos | ✅ Implementado |
| VideoProgressPlayer | OQI-002 | POST (upload) | - | POST /education/videos/upload | ❌ NO EXISTE | ❌ BLOQUEANTE |
| Lesson.tsx | OQI-002 | GET (embebido) | MP4, WebM | `lesson.videoUrl` | ✅ Sirve archivos | ✅ Implementado |

### Detalles: VideoProgressPlayer.tsx

**Características Implementadas:**
- ✅ HTML5 `<video>` nativo (554 líneas de código)
- ✅ **11 states:** isPlaying, currentTime, duration, volume, isMuted, isFullscreen, playbackSpeed, showBookmarks, bookmarks[], notes[], loopRegion
- ✅ **Bookmarks:** Agregar/eliminar marcadores con timestamps
- ✅ **Notas:** Notas in-app persistentes
- ✅ **Velocidades:** 0.5x, 0.75x, 1x, 1.25x, 1.5x, 1.75x, 2x
- ✅ **Loop region:** Inicio/fin, auto-replay
- ✅ **Auto-resume:** Continuar desde última posición
- ✅ **Tracking:** 95% watched = completed
- ✅ **Fullscreen:** API nativa
- ✅ **6 atajos de teclado:** Space (play/pause), ArrowLeft/Right (5s), M (mute), F (fullscreen), B (bookmark)

**Gaps:**
- ❌ Live streaming (WebRTC/HLS)
- ❌ Progressive download
- ❌ YouTube/Vimeo integration
- ❌ Multi-quality (1080p/720p/480p)
- ❌ Captions/subtítulos (VTT)

**Multimedia Persistida:**

| Dato | API | Tabla BD (assumed) |
|------|-----|-------------------|
| Progress (0-100%) | POST /education/lessons/:id/progress | lesson_progress |
| Bookmarks | POST /api/bookmarks (assumed) | video_bookmarks |
| Notas | POST /api/notes (assumed) | video_notes |
| Completion | POST /education/lessons/:id/complete | lesson_progress |

---

## 2. Charts (Canvas 2D + SVG)

### Componentes con Charts

| Componente | Epic | Tecnología | Tipo Chart | Datos | Estado |
|------------|------|------------|------------|-------|--------|
| **CandlestickChart** | OQI-003 | **lightweight-charts** (Canvas) | Candlestick + Volume | GET /trading/market/klines/:symbol | ✅ 100% |
| CandlestickChartWithML | OQI-003 | lightweight-charts | Candlestick + ML overlays | GET /trading/market/klines + ML APIs | ✅ 100% |
| **AllocationChart** | OQI-008 | **Custom SVG** | Pie/Donut | portfolios.allocations | ✅ 100% |
| **PerformanceChart** | OQI-008 | **Custom Canvas 2D** | Line chart | GET /portfolio/portfolios/:id/performance | ✅ 100% |
| BacktestResultsVisualization | OQI-006 | recharts | Bar + Line (equity curve) | GET /api/v1/backtest/results/:strategyId | ✅ 100% |
| Reports (Inversión) | OQI-004 | recharts | Line (performance) | GET /investment/accounts/:accountId/performance | ✅ 100% |
| StrategyComparisonChart | OQI-006 | recharts | Multi-line | Backtest data | ✅ 100% |

### Librerías Usadas

| Librería | Versión | Uso | Componentes | Performance |
|----------|---------|-----|-------------|-------------|
| **lightweight-charts** | 4.1.1 | Trading charts (candlestick, volume) | CandlestickChart, CandlestickChartWithML | ⚡ Excelente (Canvas nativo, 60fps) |
| **recharts** | 2.x | Analytics charts (bar, line, pie) | BacktestResults, Reports, StrategyComparison | ✅ Buena (SVG) |
| **Custom SVG** | - | Allocation donut (optimizado) | AllocationChart | ⚡ Excelente (sin deps) |
| **Custom Canvas 2D** | - | Performance line chart | PerformanceChart | ⚡ Excelente (sin deps) |

**Decisión Arquitectónica:**
- Trading charts (real-time, alta frecuencia) → **lightweight-charts** (Canvas, performance)
- Analytics (estático, interactivo) → **recharts** (SVG, accesible)
- Simple charts → **Custom SVG/Canvas** (sin deps, bundle pequeño)

---

## 3. Imágenes

### Componentes con Imágenes

| Componente | Epic | Tipo Imagen | Operación | Formato | API | Estado |
|------------|------|-------------|-----------|---------|-----|--------|
| CourseCard | OQI-002 | Thumbnail | GET (carga) | JPG, PNG | `course.thumbnailUrl` | ✅ Implementado |
| CourseDetail | OQI-002 | Cover image | GET (carga) | JPG, PNG | `course.coverImageUrl` | ✅ Implementado |
| ProductCard | OQI-004 | Product image | GET (carga) | JPG, PNG | `product.imageUrl` | ✅ Implementado |
| Leaderboard | OQI-002 | Avatares | GET (carga) | JPG, PNG | `user.avatarUrl` | ✅ Implementado |
| SecuritySettings | OQI-001 | Avatar usuario | GET (carga) | JPG, PNG | `session.avatarUrl` (inline) | ✅ Implementado |
| Creator Dashboard (NO EXISTE) | OQI-002 | Course thumbnail | POST (upload) | JPG, PNG | POST /api/upload/image | ❌ FALTA |
| Profile Settings (assumed) | OQI-001 | Avatar usuario | POST (upload) | JPG, PNG | POST /api/user/avatar | ❌ FALTA |

### Optimización de Imágenes

| Aspecto | Estado Actual | Gap |
|---------|---------------|-----|
| **Compresión** | ❌ No automática | Implementar sharp/imagemagick en backend |
| **Responsive images** | ❌ No (1 tamaño) | srcset con 3 sizes (thumb/medium/large) |
| **Lazy loading** | ⚠️ Parcial (React lazy) | Intersection Observer para below-fold |
| **WebP support** | ❌ No | Servir WebP + fallback JPG |
| **CDN** | ❌ No | CloudFront/Cloudflare |

---

## 4. Iconografía (SVG Inline)

### Librerías de Icons

| Librería | Cantidad | Uso | Bundle Impact | Performance |
|----------|----------|-----|---------------|-------------|
| **Lucide React** | ~50 icons | UI general (Eye, Loader, Check, Mail, Lock, etc.) | ✅ Tree-shakeable | ⚡ Excelente (SVG inline) |
| **Heroicons** | ~30 icons | Complementario | ✅ Tree-shakeable | ⚡ Excelente |
| **Custom SVG** | ~40 icons | OAuth logos, device types, badges | ✅ Inline (0 HTTP) | ⚡ Excelente |

**Total:** ~120 icons inline (sin round-trips HTTP)

### Paleta de Colores (Tailwind)

| Color | Hex | Uso |
|-------|-----|-----|
| Primary (Azul) | #3B82F6 | Botones, links, focus states |
| Success (Verde) | #22C55E | Success messages, checkmarks |
| Error (Rojo) | #EF4444 | Errors, warnings |
| Warning (Ámbar) | #FBBF24 | Alerts |
| Neutros (Grises) | 13 variantes | Texto, backgrounds, borders |

**Ventaja:** 0 KB de imágenes descargadas para icons, excelente performance.

---

## 5. PDF (Preview y Download)

### Componentes con PDF

| Componente | Epic | Operación | Backend API | Librería | Estado |
|------------|------|-----------|-------------|----------|--------|
| **CertificatePreview** | OQI-002 | GET (preview) | GET /api/certificates/:id | ❌ Ninguna (iframe src) | ⚠️ 50% (básico) |
| InvoiceDetail | OQI-005 | GET (download) | GET /payments/invoices/:invoiceId/pdf | ❌ Ninguna (download link) | ✅ Implementado |
| Reports (assumed) | OQI-004 | POST (generar) | POST /investment/reports/generate | ❌ NO EXISTE | ❌ FALTA |

### Gaps de PDF

| Gap | Descripción | Prioridad |
|-----|-------------|-----------|
| **PDF generation** | Generar PDFs dinámicos (reportes, certificados) | P2 |
| **Preview interactivo** | Viewer con zoom, scroll, página (react-pdf) | P3 |
| **Firmas digitales** | Certificados firmados | P4 |
| **Templates** | Sistema de templates para PDFs | P3 |

---

## 6. Audio (NO IMPLEMENTADO)

### Estado

| Aspecto | Estado | Gap |
|---------|--------|-----|
| **Audio player** | ❌ NO EXISTE | Implementar audio player para podcasts/lessons |
| **Podcast support** | ❌ NO EXISTE | Sistema completo de podcasts educativos |
| **Voice notes** | ❌ NO EXISTE | Grabar/reproducir notas de voz |
| **Text-to-speech** | ❌ NO EXISTE | TTS para accesibilidad (lessons) |
| **Voice input** | ❌ NO EXISTE | Speech-to-text para chat LLM |

**Recomendación:** Fase 4 (Q4 2026+), prioridad P4-P5.

---

## 7. Multimedia por Epic (Resumen)

| Epic | Video | Charts | Imágenes | Icons | PDF | Audio | Total |
|------|-------|--------|----------|-------|-----|-------|-------|
| OQI-001 (Auth) | - | - | Avatares (inline) | ✅ 15 | - | - | 15 |
| OQI-002 (Educación) | ✅ 1 (avanzado) | - | Thumbnails (5+) | ✅ 10 | ⚠️ 1 | ❌ | 17 |
| OQI-003 (Trading) | - | ✅ 2 (candlestick) | - | ✅ 40 | - | - | 42 |
| OQI-004 (Inversión) | - | ✅ 1 (recharts) | Product images | ✅ 8 | ⚠️ 1 | - | 10 |
| OQI-005 (Pagos) | - | - | Card brands | ✅ 12 | ✅ 1 | - | 13 |
| OQI-006 (ML Signals) | - | ✅ 3 (recharts) | - | ✅ 15 | - | - | 18 |
| OQI-007 (LLM Agent) | - | - | - | ✅ 8 | - | ❌ (voice) | 8 |
| OQI-008 (Portfolio) | - | ✅ 2 (SVG+Canvas) | - | ✅ 10 | - | - | 12 |
| OQI-009 (MT4) | - | - | Device icons | ✅ 2 | - | - | 2 |

---

## 8. Bundle Size Impact

| Tipo Media | Bundle Size | Carga HTTP | Performance Impact |
|------------|-------------|------------|-------------------|
| **Video** | 0 KB (lazy loaded) | On-demand (HLS/MP4) | ⚡ Excelente (streaming) |
| **Charts (lightweight-charts)** | ~180 KB (gzip) | 1x bundle | ✅ Buena (60fps) |
| **Charts (recharts)** | ~95 KB (gzip) | 1x bundle | ✅ Buena (SVG) |
| **Icons SVG inline** | ~8 KB (gzip, tree-shaken) | 0 HTTP (inline) | ⚡ Excelente |
| **Imágenes** | 0 KB (bundle) | On-demand (5-50 KB/img) | ⚠️ Mejorable (sin WebP) |
| **PDF** | 0 KB (lazy loaded) | On-demand | ✅ Buena |

**Total bundle multimedia:** ~283 KB (gzip) - **Excelente**

---

## 9. Recomendaciones de Optimización

### Prioridad Alta (Q1 2026)

1. **WebP Support** (20h)
   - Servir WebP con fallback JPG
   - 30-50% reducción tamaño imágenes
   - API: POST /api/upload/image → convertir automático

2. **Video Upload** (60h - BLOQUEANTE)
   - POST /education/videos/upload
   - S3 storage + CloudFront
   - Transcoding automático (1080p/720p/480p)

3. **Image Upload** (30h)
   - POST /api/upload/image
   - Compresión automática (sharp)
   - Thumbnail generation (3 sizes)

### Prioridad Media (Q2 2026)

4. **Lazy Loading Avanzado** (10h)
   - Intersection Observer para images
   - Blur placeholder (LQIP)
   - 50-70% mejora tiempo carga inicial

5. **PDF Generation** (40h)
   - Reportes dinámicos (inversión, portfolio)
   - Certificados con firma digital
   - Templates customizables

6. **Live Streaming** (80h)
   - WebRTC/HLS para clases síncronas
   - Chat en vivo integrado
   - Grabación automática

### Prioridad Baja (Q3-Q4 2026)

7. **Audio Player** (30h)
   - Sistema de podcasts educativos
   - Playback speed, bookmarks
   - Download offline

8. **Voice Input** (20h)
   - Speech-to-text para LLM chat
   - Web Speech API
   - Accesibilidad

---

## 10. Multimedia Storage (Actual vs Recomendado)

| Tipo | Actual | Recomendado | Costo Estimado |
|------|--------|-------------|----------------|
| **Video** | ❓ Desconocido | **S3 + CloudFront** | $0.023/GB storage + $0.085/GB transfer |
| **Imágenes** | ❓ Desconocido | **S3 + CloudFront** | $0.023/GB storage + $0.085/GB transfer |
| **PDF** | ❓ Desconocido | **S3** | $0.023/GB storage |
| **Audio** | ❌ N/A | **S3 + CloudFront** | $0.023/GB storage + $0.085/GB transfer |

**Costo mensual estimado (1,000 usuarios activos):**
- Videos (100 GB): $2.30 storage + $50 transfer = **$52.30/mes**
- Imágenes (20 GB): $0.46 storage + $10 transfer = **$10.46/mes**
- PDFs (5 GB): $0.12 storage = **$0.12/mes**
- **TOTAL:** ~$63/mes (bajo, escalable)

---

**Actualizado:** 2026-01-25
**Próxima actualización:** Después de implementar video upload + image optimization