Multimedia Tracker

# Tracker Multimedia Personal

App web local para registrar, importar y calificar series, anime, manga, peliculas, carreras de F1, partidos de futbol y cualquier evento multimedia que quieras seguir con memoria propia.

## Estado actual

- Dashboard en Next.js, TypeScript, Tailwind CSS, Prisma y SQLite.
- Dashboard principal fluido para aprovechar todo el ancho disponible de la ventana.
- Biblioteca con filtros responsivos por titulo, tipo, estado, plataforma, tags, rango de overall, cantidad de episodios/unidades y estado de ratings. El tipo y el orden elegidos se recuerdan entre navegaciones y futuras visitas; al volver con el enlace Biblioteca se restaura el ultimo tipo aplicado, y `Limpiar` vuelve explicitamente a todos los tipos sin perder el orden guardado.
- Vista de detalle con temporadas/arcos, grilla de calificaciones y editor modal por unidad.
- Openings/endings por titulo: permite pegar enlaces de YouTube o Spotify, guardarlos como opening o ending y reproducirlos desde la ficha en dos reproductores grandes separados para Openings y Endings; YouTube usa un reproductor visual propio con poster, play/pausa, progreso, volumen y pantalla completa (sin sustituirlo por los controles compactos del iframe), Spotify conserva su embed, y cuando hay varios temas aparece una cola compacta OP/ED para alternar entre ellos. La ficha de escritorio reserva mas ancho al panel musical para que el bloque no quede partido.
- Selector de vistas de notas dentro del detalle: tarjetas clasicas, wrapped compacto, matriz/heatmap por temporada, linea de calidad, distribucion de notas y poster resumen.
- Vista de detalle con chips claros para distinguir fuente principal, fuente de metadatos/datos visibles y fuente de episodios cuando un titulo combina APIs.
- Ranking visual por titulo con mejores unidades, peor unidad y una pestana cinematografica inspirada en posters de ranking; la capa de contraste de cada tarjeta cubre toda su altura incluso cuando el podio solo tiene dos unidades calificadas.
- Calendario mensual en `/calendar` con eventos agrupados por fecha de estreno/publicacion, filtros por titulo, tipo, estado y estado de rating, navegacion de mes anterior/siguiente y estadisticas del mes visible.
- Historico global en `/historico` con top de mejores capitulos, episodios, peliculas o eventos ya calificados, ordenado por nota, enlazado a cada ficha y presentado en tres columnas en escritorio; el podio coloca al campeon elevado en el centro, con acabados diferenciados de oro, plata y bronce.
- Biblioteca musical en `/musica` para escuchar desde una sola pantalla todos los openings y endings agregados en las fichas. Incluye lista numerada, seleccion de tema, botones Anterior/Siguiente y, para YouTube, los mismos controles propios de play/pausa, progreso, volumen y pantalla completa disponibles en la ficha.
- Menu contextual propio en toda la web: clic derecho abre navegacion rapida y, sobre una tarjeta o ficha, permite abrirla, copiar el titulo y cambiar su tipo real entre Anime, Serie, Manga, Pelicula, F1, Futbol u Otro. `Shift + clic derecho` conserva el menu nativo del navegador.
- La pestana de ranking cinematografico incluye modos internos: Top cine, Temporadas, Hall of Fame 10/10 y Top 20 compacto, con estadisticas rapidas de perfectos, mejor bloque, peor nota y pendientes.
- Preview lateral de ranking adaptado al ancho del panel de detalle.
- Panel lateral de importacion automatica y carga manual ocultable hacia la derecha para ampliar la biblioteca, con boton de reapertura fuera de las tarjetas para no tapar el overall.
- Ratings decimales de 1.0 a 10.0 por episodio, capitulo, carrera, partido o evento, con 19 rangos continuos de color desde vino oscuro hasta violeta, sin redondear ni interpolar la nota.
- Overall general automatico y overall por temporada/arco.
- Completado automatico: al guardar una nota, si todas las unidades del titulo ya tienen calificacion, el estado del titulo pasa a `Completado`.
- Carga manual de imagen por URL o archivo para unidades; esas imagenes alimentan el ranking.
- Busqueda universal de importacion: una sola consulta revisa las APIs compatibles y fusiona coincidencias entre fuentes.
- Sincronizacion manual desde la ficha de cada titulo importado para traer nuevos episodios, capitulos, sinopsis, fechas e imagenes cuando la API original los publica; si el titulo combina fuentes, `Actualizar API` conserva la fuente principal como estructura de temporadas, consulta fuentes enlazadas en paralelo y usa la mejor fuente de metadatos disponible para rellenar episodios genericos, sinopsis o imagenes faltantes sin crear capitulos extra en temporadas que la fuente principal no reporta.
- Exportacion JSON desde `/api/export`.

## Diseno de escritorio 1920x1080

- Interfaz centrada en PC 1920x1080 con un lienzo fluido que ocupa todo el ancho disponible, ritmo de espaciado consistente y paneles menos pesados.
- Tipografias locales: Manrope para interfaz, controles y datos; DM Serif Display para titulos y composiciones editoriales. Ambas se empaquetan con la app mediante Fontsource.
- Navegacion compacta con acceso a Biblioteca, Agenda, Historico y Musica; los creditos de APIs se movieron al pie para no competir con las acciones principales.
- Dashboard con hero mas corto, filtros principales en una sola fila, filtros avanzados plegables y panel lateral con pestanas Importar/Manual.
- Ficha con poster mas visible, sinopsis limitada, resumen de ratings integrado, acciones agrupadas, bloque de notas prioritario y playlist/preview de ranking ligeramente ampliados en 1920 px, sin scroll lateral interno que corte su contenido, y administracion de temporadas/unidades plegable.
- Pendientes representados con superficies oscuras y discretas; la grilla principal usa ocho tarjetas por fila en el espacio habitual de escritorio.
- Vistas Matriz, Wrapped, Linea, Distribucion y Poster pulidas para lectura de escritorio. Poster pasa a ancho completo y Linea requiere al menos tres notas para evitar tendencias enganosas.
- Ranking lateral mostrado antes de Openings/Endings, con tarjetas mas legibles y enlace directo; la vista cinematografica usa composiciones mas amplias, textos completos y metadatos con singular/plural correcto.
- Historico global con hero de alto contraste, podio metalico con el primer puesto elevado al centro y clasificacion restante en una grilla editorial de tres columnas en escritorio.
- Calendario presentado como Agenda mensual, con navegacion Anterior/Hoy/Siguiente, metricas compactas y cronologia visual por dia.


## APIs soportadas

- TMDb: series y peliculas. Requiere `TMDB_READ_TOKEN` gratuito para busqueda e importacion enriquecida. La busqueda incluye resultados marcados como adultos en TMDb para que coincida con fichas visibles directamente en su web. Al actualizar, rescata metadatos desde el endpoint detallado de episodios cuando la temporada solo trae marcadores como `Episodio 10`; si mas adelante TMDb publica una sinopsis localizada, reemplaza la sinopsis japonesa de rescate por la version nueva.
- AniList: anime y manga. No requiere token para busqueda publica. En anime usa `streamingEpisodes` para miniaturas y las combina con Jikan cuando existe `idMal`.
- Jikan: datos publicos de MyAnimeList para anime/manga y episodios de anime. No requiere token. Su lista de episodios trae titulos y fechas, pero no sinopsis ni imagen por episodio.
- MangaDex: busqueda publica de manga e importacion de capitulos. No requiere token. Puede traer titulos/fechas y una miniatura desde la primera pagina del capitulo; no expone sinopsis por capitulo.
- TVmaze: series y listas de episodios. No requiere token.
- OpenF1: reuniones y sesiones de Formula 1 desde 2023 en adelante. No requiere token para datos historicos.

El buscador de importacion funciona como agregador universal: ya no necesitas elegir AniList, Jikan, MangaDex, TMDb, TVmaze u OpenF1 a mano. Solo separa tres areas amplias: Entretenimiento, Manga y F1. En Entretenimiento consulta TMDb, TVmaze, AniList y Jikan al mismo tiempo, sin pedirte decidir si algo es anime, serie, pelicula, especial u OVA. Cada resultado conserva su fuente principal y la interfaz muestra que fuentes lo complementan; las coincidencias compatibles se usan como multi soporte para completar titulo, sinopsis, poster, backdrop o conteo, pero no sustituyen ni ocultan la tarjeta propia de TMDb, AniList, Jikan o TVmaze. En la ficha del titulo tambien se marca la fuente principal con chips visibles, para evitar que una mezcla como TVmaze + TMDb parezca solo una lista de nombres. TMDb puede enriquecer AniList/Jikan/TVmaze y AniList/Jikan/TVmaze tambien pueden enriquecer un resultado de TMDb cuando haga falta.

Futbol sigue disponible para registro manual. Una integracion automatica puede sumarse despues con una API que tenga plan gratuito estable y limites claros.

## Requisitos

- Node.js instalado.
- npm instalado.

## Configuracion

1. Instala dependencias:

```bash
npm install
```

2. Crea `.env` tomando como base `.env.example`:

```bash
DATABASE_URL="file:./dev.db"
TMDB_READ_TOKEN=""
```

`TMDB_READ_TOKEN` es opcional, pero se necesita para importar series y peliculas desde TMDb. TVmaze, AniList, Jikan, MangaDex y OpenF1 funcionan sin token.

3. Prepara SQLite y Prisma:

```bash
npm run db:migrate
npm run prisma:generate
```

4. Ejecuta la app:

```bash
npm run dev
```

La app queda disponible normalmente en `http://localhost:3000`.

## Solucion de problemas

- En Microsoft Edge, algunas extensiones pueden modificar el `<body>` antes de que React hidrate la app y provocar un aviso de hydration mismatch con atributos como `bis_register` o `__processed_*`. El layout usa `suppressHydrationWarning` en el `<body>` para ignorar esas mutaciones externas sin cambiar el comportamiento de la app.

## Uso rapido

- Importa un titulo desde el panel lateral con una busqueda universal; puedes buscar en Entretenimiento, Manga o F1.
- Oculta o muestra el panel lateral desde la pantalla principal cuando quieras enfocarte solo en la biblioteca.
- Haz clic derecho en cualquier parte para abrir el menu del tracker. Sobre una tarjeta o dentro de una ficha aparecen las acciones del titulo, incluido `Cambiar tipo`; usa `Shift + clic derecho` cuando necesites el menu original del navegador.
- Combina filtros por overall minimo/maximo, episodios minimos/maximos, titulos con/sin ratings y ordenamientos por overall, episodios o titulo. La app guarda automaticamente el ultimo tipo y el ultimo orden seleccionados en el navegador para restaurarlos al volver a la Biblioteca.
- Entra al detalle del titulo para calificar episodios, capitulos o sesiones.
- Agrega openings y endings desde la ficha del titulo pegando un enlace de YouTube o Spotify; puedes indicar si es Opening o Ending, asignar numero y titulo opcional, reproducirlo ahi mismo o abrirlo en su plataforma desde reproductores grandes separados por tipo. El reproductor propio de YouTube mantiene sus controles de play/pausa, progreso, volumen y pantalla completa durante toda la reproduccion; el iframe de YouTube queda como fuente de video y no reemplaza la interfaz. Si el navegador bloquea el autoplay con audio, el video comienza silenciado y muestra el boton Activar sonido. Si guardas OP 1, OP 2, OP 3 o ED 1, ED 2, ED 3, la ficha muestra una cola compacta para cambiar el tema activo sin llenar el panel de iframes. Acepta youtube.com, youtu.be, music.youtube.com, enlaces de playlist de YouTube, open.spotify.com y URIs tipo `spotify:track:...`. Los enlaces cortos `spotify.link` muestran un aviso porque no se pueden convertir a reproductor embebido sin resolver la redireccion externa. La lista siempre muestra primero el Opening y luego el Ending de cada numero, sin importar el orden en que los agregues.
- Abre `Calendario` desde la barra superior para revisar que unidades tienen fecha dentro del mes, moverte entre meses y filtrar por tipo, estado, busqueda o ratings pendientes.
- Abre `Historico` para ver el top global de mejores unidades ya calificadas en toda tu biblioteca.
- Abre `Musica` para reproducir en una sola cola los openings y endings guardados desde cada serie, pelicula o ficha.
- Cambia el modo de visualizacion de notas desde la ficha del titulo: usa Tarjetas para editar con amplitud, Wrapped para lectura compacta, Matriz para comparar temporadas, Linea para ver subidas/bajadas, Distribucion para rangos de notas y Poster para una vista visual compartible.
- Pulsa `Actualizar API` en la ficha de un titulo importado cuando quieras refrescar datos de series, anime, manga o eventos que sigan cambiando con el tiempo; en fichas con varias fuentes enlazadas tambien mezcla datos frescos de la fuente principal y de metadatos, guarda la relacion entre proveedores para futuros refrescos y actualiza ficha/ranking al terminar.
- En titulos de AniList ya importados, `Actualizar API` completa miniaturas de episodios si AniList las tiene disponibles.
- Usa `Ver ranking cinematografico` para abrir la pestana visual de ranking y alternar entre Top cine, Temporadas, 10/10 y Top 20 compacto.
- Agrega temporadas, unidades sueltas, imagenes y comentarios cuando quieras completar el recuerdo.

## Formula de calificacion

- Cada unidad calificable puede tener nota decimal entre 1.0 y 10.0 y comentario.
- El overall general es el promedio simple de todas las unidades calificadas.
- El overall de temporada/arco es el promedio simple de las unidades calificadas dentro de esa temporada.
- Las unidades sin calificar aparecen como pendientes.
- Los colores usan limites inferiores inclusivos y superiores exclusivos, sin redondeo: `[1.0,1.5) #7F1D1D`, `[1.5,2.0) #991B1B`, `[2.0,2.5) #B91C1C`, `[2.5,3.0) #DC2626`, `[3.0,3.5) #EF4444`, `[3.5,4.0) #F87171`, `[4.0,4.5) #EA580C`, `[4.5,5.0) #F97316`, `[5.0,5.5) #F59E0B`, `[5.5,6.0) #FBBF24`, `[6.0,6.5) #CA8A04`, `[6.5,7.0) #EAB308`, `[7.0,7.5) #FACC15`, `[7.5,8.0) #FDE047`, `[8.0,8.5) #22C55E`, `[8.5,9.0) #10B981`, `[9.0,9.5) #06B6D4`, `[9.5,10.0) #3B82F6` y `10.0 #8B5CF6`.

## Scripts

- `npm run dev`: inicia el servidor de desarrollo.
- `npm run build`: compila la aplicacion.
- `npm run start`: ejecuta la app compilada.
- `npm run lint`: ejecuta verificacion de tipos con TypeScript.
- `npm test`: ejecuta TypeScript y las pruebas de dominio locales.
- `npm run test:domain`: prueba calendario, filtros, agrupacion, estadisticas, ratings y parsing de tags sin depender de APIs externas.
- `npm run test:all`: ejecuta `npm test` y despues el smoke test de SQLite/Prisma.
- `npm run smoke`: crea y elimina un item temporal para verificar SQLite, Prisma y ratings.
- `npm run check:apis`: valida conectividad con TMDb, AniList, Jikan, MangaDex, TVmaze y OpenF1 sin imprimir credenciales.
- `npm run check:episode-apis`: inspecciona que campos reales de episodios/capitulos publican AniList, Jikan y MangaDex con Las Quintillizas como muestra.
- `npm run db:migrate`: aplica las migraciones versionadas sobre SQLite.
- `npm run db:push`: sincroniza el esquema Prisma con SQLite.
- `npm run prisma:generate`: genera el cliente Prisma.

Built With

• css
• node.js
• react