# US-CONT-003: Biblioteca de Recursos Multimedia ## Información Básica | Campo | Valor | |-------|-------| | **ID** | US-CONT-003 | | **Épica** | EXT-006 - Gestión de Contenido | | **Título** | Sistema de Biblioteca y Gestión de Recursos Multimedia | | **Prioridad** | Alta (P1) | | **Story Points** | 6 SP | | **Estado** | NOT STARTED | | **Fase** | Mes 3 (Extensiones Primera Ola) | | **Presupuesto** | $3,400 MXN | --- ## Historia de Usuario **Como** profesor o creador de contenido **Quiero** una biblioteca centralizada para gestionar imágenes, videos, audios y PDFs con organización, búsqueda y optimización automática **Para** reutilizar recursos fácilmente, mantener contenido organizado y optimizar almacenamiento --- ## Valor de Negocio ### Impacto - **Eficiencia**: Reutilizar recursos reduce tiempo 50% - **Organización**: Búsqueda rápida vs carpetas caóticas - **Performance**: Compresión reduce bandwidth 60% - **Almacenamiento**: Deduplicación ahorra storage 30% ### Métricas de Éxito - >1000 recursos subidos en primer mes - >70% recursos reutilizados 2+ veces - Tiempo de búsqueda <5 segundos - >80% satisfacción con organización --- ## Criterios de Aceptación ### CA-01: Upload de Multimedia **Soportar formatos:** - **Imágenes**: JPG, PNG, GIF, WebP, SVG (máx 10MB) - **Videos**: MP4, WebM, MOV (máx 500MB) - **Audios**: MP3, WAV, OGG (máx 50MB) - **Documentos**: PDF (máx 20MB) **Features de upload:** - Drag & drop de archivos - Multi-upload (hasta 20 archivos simultáneos) - Upload desde URL externa - Copiar/pegar imágenes desde clipboard - Progress bar por archivo - Preview durante upload - Validación de formato y tamaño - Compresión automática (configurable) ### CA-02: Galería con Preview - Vista en grid (thumbnails) - Vista en lista (con metadata) - Preview al hover (quick look) - Lightbox para ver imagen completa - Video player inline para videos - Audio player para audios - PDF viewer inline - Información visible: nombre, tamaño, fecha, dimensiones ### CA-03: Organización por Carpetas - Crear carpetas y subcarpetas (ilimitado) - Arrastrar archivos entre carpetas - Mover múltiples archivos (multi-select) - Renombrar carpetas - Eliminar carpetas (mover contenido o eliminar todo) - Breadcrumbs para navegación - Árbol de carpetas colapsable - Carpetas favoritas (acceso rápido) ### CA-04: Búsqueda y Filtrado **Búsqueda por:** - Nombre de archivo (autocompletado) - Tags - Tipo de archivo (imagen, video, audio, PDF) - Fecha de subida (rangos) - Tamaño (rangos) - Dimensiones (para imágenes) - Subido por (usuario) **Ordenar por:** - Fecha (más reciente/antiguo) - Nombre (A-Z) - Tamaño (mayor/menor) - Uso (más/menos usado) **Filtros rápidos:** - Mis archivos - Archivos compartidos - Usados recientemente - Sin usar ### CA-05: Tags y Metadata - Agregar tags ilimitados por archivo - Tags sugeridos automáticamente (IA básica) - Título y descripción editables - Alt text para imágenes (accesibilidad) - Metadata automática: - Dimensiones (para imágenes) - Duración (para video/audio) - Páginas (para PDF) - Formato y codec - Copyright y licencia (opcional) - Edición bulk de metadata ### CA-06: Compresión Automática **Imágenes:** - Redimensionar si >2000px de ancho - Compresión inteligente (calidad 85%) - Generación de thumbnails (200x200, 400x400) - Conversión a WebP (opcional, para web) - Mantener original como backup **Videos:** - Transcodificar a H.264 si otro formato - Generar thumbnail de portada - Múltiples calidades (360p, 720p, 1080p) - Compresión adaptativa **PDFs:** - Optimización de tamaño - Generación de thumbnails de páginas ### CA-07: Conversión de Formatos - Imágenes: convertir entre JPG, PNG, WebP - Videos: convertir a MP4 estándar - Audios: normalizar a MP3 - PDFs: optimizar para web - Batch conversion (múltiples archivos) - Queue de trabajos de conversión ### CA-08: Integración con Servicios Externos **YouTube/Vimeo:** - Pegar URL para importar - Guardar metadata (título, descripción) - Embed code generado automáticamente **Google Drive/Dropbox:** - Conectar cuenta - Importar archivos - Sincronización bidireccional (opcional) **Unsplash/Pexels:** - Buscar imágenes stock gratis - Importar directamente a biblioteca - Atribución automática ### CA-09: Límites de Storage por Institución - Dashboard de uso de storage - % usado de quota - Alerta al llegar a 80% - Top archivos por tamaño - Sugerencias de limpieza (archivos sin usar) - Upgrade de plan (si SaaS) - Archivado a cold storage (>1 año sin usar) ### CA-10: Deduplicación Inteligente - Detectar archivos duplicados (hash MD5) - Alertar al subir duplicado - Opción de reemplazar o mantener ambos - Referenciar duplicados (ahorra storage) - Limpieza de duplicados batch ### CA-11: Compartir y Permisos - Compartir archivo con otros profesores - Permisos: Ver / Descargar / Editar - Compartir carpeta completa - Link público (con expiración opcional) - Password-protect para links - Analytics de compartición (vistas, descargas) ### CA-12: Uso y Referencias - Ver dónde se usa cada archivo (módulos, ejercicios) - "Usado en 5 lugares" con links - Prevenir eliminación si está en uso - Reemplazar archivo (actualiza todas las referencias) - Historial de uso ### CA-13: Exportación y Backup - Exportar archivos seleccionados como ZIP - Exportar carpeta completa - Backup automático a S3/similar - Recuperar archivos eliminados (papelera, 30 días) - Restaurar versiones anteriores (si US-CONT-004) ### CA-14: Performance y CDN - Storage en S3/MinIO/similar - CDN para servir archivos (CloudFlare, AWS CloudFront) - Lazy loading de galería (virtual scrolling) - Thumbnails pre-generados - Caché de metadata (Redis) - URLs firmadas para seguridad ### CA-15: Accesibilidad - Alt text requerido para imágenes - Transcripciones para videos (manual o automática) - Subtítulos para videos (SRT upload) - Tags descriptivos - Screen reader compatible - Navegación por teclado --- ## Especificaciones Técnicas ### Technology Stack ``` Frontend: - react-dropzone para drag & drop - react-image-gallery para lightbox - react-player para videos - pdf-viewer para PDFs Backend: - Multer para file upload - Sharp para procesamiento de imágenes - FFmpeg para videos - AWS S3 o MinIO para storage - CloudFront/CloudFlare para CDN Processing: - Bull queue para trabajos pesados - Worker threads para conversión ``` ### Frontend Components ``` src/features/media-library/ ├── components/ │ ├── MediaLibrary.tsx │ ├── FileUploader.tsx │ ├── MediaGrid.tsx │ ├── MediaList.tsx │ ├── FolderTree.tsx │ ├── SearchBar.tsx │ ├── Lightbox.tsx │ ├── VideoPlayer.tsx │ ├── PDFViewer.tsx │ └── StorageQuota.tsx └── hooks/ ├── useMediaLibrary.ts ├── useUpload.ts └── useSearch.ts ``` ### Backend API ```typescript POST /api/media/upload GET /api/media GET /api/media/:id PUT /api/media/:id DELETE /api/media/:id POST /api/media/folder GET /api/media/search?q=... GET /api/media/quota POST /api/media/convert ``` --- ## Diferenciación con Alcance Inicial ### Alcance Inicial (EAI) - Upload básico de imágenes - Sin organización - Sin biblioteca centralizada - Sin optimización ### Esta Historia (EXT-006) - **Biblioteca completa**: imágenes, videos, audios, PDFs - **Organización por carpetas** con búsqueda avanzada - **Tags y metadata** enriquecidos - **Compresión automática** y conversión - **Integración con servicios externos** - **Deduplicación y storage optimization** - **CDN y performance** - Esto es **media management profesional** --- ## Dependencias ### Depende de - **US-CONT-001**: Editor usa biblioteca - **US-CONT-002**: Ejercicios usan multimedia - **Infraestructura**: S3/MinIO, CDN --- ## Definición de Terminado (DoD) - [ ] Upload multi-formato funcional - [ ] Galería con preview - [ ] Sistema de carpetas - [ ] Búsqueda y filtrado avanzado - [ ] Tags y metadata - [ ] Compresión automática (Sharp) - [ ] Conversión de formatos (FFmpeg) - [ ] Integración YouTube/Vimeo - [ ] Storage limits y quota - [ ] Deduplicación - [ ] Sistema de permisos - [ ] Tracking de uso - [ ] CDN configurado - [ ] Papelera de reciclaje - [ ] Tests >80% coverage - [ ] Documentación - [ ] Video tutorial --- ## Estimación Detallada (6 SP) | Tarea | Horas | |-------|-------| | File uploader | 8h | | Galería y preview | 10h | | Sistema de carpetas | 8h | | Búsqueda y filtros | 8h | | Tags y metadata | 6h | | Compresión (Sharp) | 8h | | Conversión (FFmpeg) | 10h | | Integraciones externas | 8h | | Storage management | 6h | | Deduplicación | 6h | | Backend API | 10h | | CDN setup | 4h | | Testing | 10h | | Documentación | 4h | | **TOTAL** | **106h** | **Presupuesto**: $3,400 MXN **Duración**: 2-3 días --- ## Tags #ext-006 #media #biblioteca #multimedia #storage #cdn #compresion #s3 #mes-3 --- **Creado**: 2025-11-02 **Autor**: Sistema de Migración - Subagente EXT 4-6 **Origen**: EP005/US-005-11 + EP010/HU-EP010-03 **Compliance**: PF-001 (XXX líneas)