trading-platform/orchestration/tareas/2026-01-25/TASK-2026-01-25-002-FRONTEND-COMPREHENSIVE-AUDIT/entregables/MULTIMEDIA-MASTER-MATRIX.md

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