196 lines
4.3 KiB
Markdown
196 lines
4.3 KiB
Markdown
# ✅ RESUMEN - Gestor de Recursos Multimedia
|
|
|
|
**Fecha:** 2025-01-06
|
|
**Estado:** ✅ Implementado
|
|
|
|
---
|
|
|
|
## 🎯 FUNCIONALIDADES IMPLEMENTADAS
|
|
|
|
### 1. Página de Gestión de Recursos ✅
|
|
|
|
**Archivo:** `admin-panel/src/pages/MediaManagerPage.tsx`
|
|
|
|
**Funcionalidades:**
|
|
- ✅ Listar todos los recursos multimedia
|
|
- ✅ Filtros por tipo (imagen/vídeo)
|
|
- ✅ Búsqueda por título/descripción
|
|
- ✅ Vista en grid con preview
|
|
- ✅ Información detallada (tamaño, formato, tags)
|
|
- ✅ Eliminar recursos
|
|
- ✅ Ver recursos en nueva pestaña
|
|
- ✅ Alerta de recursos huérfanos
|
|
|
|
### 2. Upload de Recursos ✅
|
|
|
|
**Funcionalidades:**
|
|
- ✅ Subir imágenes (JPEG, PNG, GIF, WebP, SVG)
|
|
- ✅ Subir vídeos (MP4, WebM, OGG)
|
|
- ✅ Límite de 50MB por archivo
|
|
- ✅ Metadatos: título, descripción, alt_text, tags, prioridad
|
|
- ✅ Generación automática de nombres únicos
|
|
- ✅ Guardado en `storage/media/`
|
|
- ✅ Inserción en base de datos
|
|
|
|
### 3. Backend API ✅
|
|
|
|
**Archivo:** `backend/src/routes/media.js`
|
|
|
|
**Endpoints:**
|
|
- ✅ `POST /api/media/upload` - Subir recurso (autenticado)
|
|
- ✅ `GET /api/media` - Listar recursos (con filtros y paginación)
|
|
- ✅ `GET /api/media/:id` - Obtener recurso específico
|
|
- ✅ `DELETE /api/media/:id` - Eliminar recurso
|
|
- ✅ `GET /api/media/orphaned/list` - Recursos huérfanos
|
|
|
|
**Características:**
|
|
- ✅ Validación de tipos MIME
|
|
- ✅ Límite de tamaño (50MB)
|
|
- ✅ Hash MD5 para nombres únicos
|
|
- ✅ Servir archivos estáticos en `/storage/media/`
|
|
- ✅ Eliminación física y lógica
|
|
|
|
---
|
|
|
|
## 📁 ESTRUCTURA
|
|
|
|
### Directorios
|
|
|
|
```
|
|
backend/
|
|
├── storage/
|
|
│ └── media/ # Archivos subidos
|
|
│ └── {hash}.{ext}
|
|
└── src/
|
|
└── routes/
|
|
└── media.js # API de recursos
|
|
|
|
admin-panel/
|
|
└── src/
|
|
└── pages/
|
|
└── MediaManagerPage.tsx
|
|
```
|
|
|
|
### Base de Datos
|
|
|
|
**Tabla:** `tes_content.media_resources`
|
|
|
|
**Campos principales:**
|
|
- `id` - UUID
|
|
- `type` - image | video
|
|
- `file_url` - URL pública
|
|
- `path` - Ruta física
|
|
- `filename` - Nombre del archivo
|
|
- `title`, `description`, `alt_text`
|
|
- `tags` - Array de tags
|
|
- `priority` - critica | alta | media | baja
|
|
- `file_size`, `format`
|
|
- `status` - published | archived
|
|
|
|
---
|
|
|
|
## 🔧 CONFIGURACIÓN
|
|
|
|
### Variables de Entorno
|
|
|
|
```env
|
|
MEDIA_STORAGE_DIR=/ruta/a/storage/media # Opcional
|
|
```
|
|
|
|
### Límites
|
|
|
|
- **Tamaño máximo:** 50MB por archivo
|
|
- **Tipos permitidos:**
|
|
- Imágenes: JPEG, PNG, GIF, WebP, SVG
|
|
- Vídeos: MP4, WebM, OGG
|
|
|
|
---
|
|
|
|
## 🚀 USO
|
|
|
|
### Subir Recurso
|
|
|
|
1. Ir a `/media` en panel admin
|
|
2. Click en "Subir Recurso"
|
|
3. Seleccionar archivo
|
|
4. Completar metadatos (opcional)
|
|
5. Click en "Subir"
|
|
|
|
### Gestionar Recursos
|
|
|
|
1. Ver lista de recursos en grid
|
|
2. Filtrar por tipo o buscar
|
|
3. Ver preview de imágenes
|
|
4. Eliminar recursos no usados
|
|
5. Ver alerta de recursos huérfanos
|
|
|
|
### Recursos Huérfanos
|
|
|
|
Los recursos huérfanos son aquellos que:
|
|
- Están publicados
|
|
- No tienen asociaciones en `content_resource_associations`
|
|
|
|
Se muestran en una alerta amarilla en la parte superior.
|
|
|
|
---
|
|
|
|
## 📊 ESTADO ACTUAL
|
|
|
|
### Funcionalidades
|
|
|
|
- ✅ Upload de imágenes/vídeos
|
|
- ✅ Listado con filtros
|
|
- ✅ Eliminación de recursos
|
|
- ✅ Detección de recursos huérfanos
|
|
- ✅ Servir archivos estáticos
|
|
- ⏳ Asociación a contenido (siguiente paso)
|
|
|
|
### Próximos Pasos
|
|
|
|
1. **Asociar recursos a contenido:**
|
|
- Desde editor de protocolos
|
|
- Desde editor de guías
|
|
- Seleccionar recursos existentes
|
|
|
|
2. **Gestión avanzada:**
|
|
- Editar metadatos
|
|
- Reemplazar archivo
|
|
- Versiones de recursos
|
|
|
|
3. **Optimización:**
|
|
- Thumbnails automáticos
|
|
- Compresión de imágenes
|
|
- Transcoding de vídeos
|
|
|
|
---
|
|
|
|
## ✅ VERIFICACIÓN
|
|
|
|
### Probar Upload
|
|
|
|
```bash
|
|
# 1. Ir a http://localhost:5174/media
|
|
# 2. Click en "Subir Recurso"
|
|
# 3. Seleccionar una imagen
|
|
# 4. Completar formulario
|
|
# 5. Click en "Subir"
|
|
```
|
|
|
|
### Verificar API
|
|
|
|
```bash
|
|
# Listar recursos
|
|
TOKEN=$(curl -s -X POST http://localhost:3000/api/auth/login \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"email":"admin@emerges-tes.local","password":"Admin123!"}' \
|
|
| python3 -c "import sys, json; print(json.load(sys.stdin)['token'])")
|
|
|
|
curl -X GET "http://localhost:3000/api/media" \
|
|
-H "Authorization: Bearer $TOKEN"
|
|
```
|
|
|
|
---
|
|
|
|
**✅ Gestor de recursos multimedia implementado y funcionando!**
|
|
|