docs: spec de vista grid estilo YouTube para la seccion Videos
This commit is contained in:
urieljareth
@@ -0,0 +1,104 @@
|
||||
# Diseño: vista de grid estilo YouTube para la sección Vídeos
|
||||
|
||||
Fecha: 2026-08-22
|
||||
Estado: aprobado en conversación
|
||||
|
||||
## Problema
|
||||
|
||||
La sección Vídeos solo tiene visualización de tabla. Para navegar el catálogo
|
||||
visualmente (miniaturas grandes, explorar por canal/tema) falta una vista tipo
|
||||
YouTube: grid de tarjetas con miniatura 16:9, duración y metadatos compactos.
|
||||
|
||||
## Objetivo
|
||||
|
||||
Añadir un conmutador tabla ⇄ grid en la sección Vídeos. El grid replica el
|
||||
look de YouTube (tarjetas 16:9) manteniendo toda la funcionalidad existente:
|
||||
filtros, orden, selección masiva ("Download .md" / "Audio") y paginación.
|
||||
|
||||
## Decisiones tomadas en conversación
|
||||
|
||||
| Pregunta | Decisión |
|
||||
|---|---|
|
||||
| ¿Selección masiva en grid? | Sí, checkboxes como en la tabla; la barra masiva se comparte |
|
||||
| ¿"Square" literal o estilo YouTube? | Miniatura 16:9 estilo YouTube (no recorte 1:1) |
|
||||
| ¿Vista inicial y persistencia? | Tabla por defecto; la elección se recuerda en `localStorage` |
|
||||
| ¿Estructura en index.html? | Dos bloques hermanos alternados con `x-if`; filtros/barra/paginación compartidos |
|
||||
|
||||
## Cambios
|
||||
|
||||
### 1. Estado y persistencia (`static/app.js`)
|
||||
|
||||
- Nuevo campo en el store de `videos`: `view`, valores `'table' | 'grid'`,
|
||||
default `'table'`.
|
||||
- En `init()`: leer `localStorage["videos-view"]` y aceptarlo solo si es
|
||||
`'table'` o `'grid'` (mismo patrón defensivo que `videos-size`).
|
||||
- Método `setVideoView(v)`: asigna y guarda en `localStorage`. No toca
|
||||
`syncURL`/`hydrateURL`: es preferencia de UI como `videos-size`, no estado
|
||||
navegable.
|
||||
|
||||
### 2. Conmutador de vista (`index.html`)
|
||||
|
||||
- Control segmentado de dos botones icono (lista / grid) alineado a la
|
||||
derecha, en una fila fina inmediatamente encima del contenedor de
|
||||
resultados.
|
||||
- Una sola instancia visible en ambas vistas: fuera del `<thead>` de la
|
||||
tabla a propósito, porque el grid no tiene cabecera donde colgarlo.
|
||||
- Botón activo con `accent-grad btn-primary`, el mismo tratamiento que usa el
|
||||
número de página activo en la paginación; aria-pressed en cada botón.
|
||||
|
||||
### 3. Tarjetas del grid (`index.html`)
|
||||
|
||||
- Contenedor: `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4`.
|
||||
- Tarjeta: bloque `glass` redondeado, cursor-pointer, hover con borde rose
|
||||
(mismo lenguaje que las tarjetas de canales). Click → `openVideo(id)`;
|
||||
clase `row-selected` si está seleccionada.
|
||||
- Miniatura: `/api/thumbnails/{id}`, `aspect-video w-full object-cover`,
|
||||
esquinas superiores redondeadas, mismo `onerror="this.style.visibility='hidden'"`
|
||||
que la tabla.
|
||||
- Badge de duración abajo-derecha sobre la miniatura: `ts(v.duration)`,
|
||||
font-mono text-xs, fondo negro semitransparente.
|
||||
- Checkbox de selección arriba-izquierda sobre la miniatura: aparece al
|
||||
hover de la tarjeta o permanece visible si está seleccionada; click con
|
||||
`.stop` → `toggleSelect(id)`.
|
||||
- Cuerpo:
|
||||
- Título con clamp a 2 líneas (`line-clamp-2`), text-zinc-100.
|
||||
- Línea de metadatos: `chanName(channel_id)` · `fmtNum(view_count)` vistas ·
|
||||
`videoDate(v)` (con `~` si estimada; tooltip `videoDateTitle(v)`).
|
||||
- Pills de estado y candado de bloqueo idénticos a los de la tabla
|
||||
(`statusClass`, `isBlocked`, `blockLabel`, `blockTitle`).
|
||||
|
||||
### 4. Comportamiento compartido (sin cambios)
|
||||
|
||||
- Filtros, barra masiva, paginación y select de orden: intactos, aplican a
|
||||
ambas vistas.
|
||||
- Estados loading/vacío duplicados dentro del bloque del grid con los mismos
|
||||
mensajes ("loading…", "No videos match these filters.", "Clear filters").
|
||||
- Las acciones por vídeo `.md`/`Process`/`Clip` **no** se duplican en las
|
||||
tarjetas: quedan en la tabla y en la vista de detalle (look limpio tipo
|
||||
YouTube; un click abre el detalle que las tiene todas).
|
||||
|
||||
## Errores cubiertos
|
||||
|
||||
| Caso | Comportamiento |
|
||||
|---|---|
|
||||
| Miniatura ausente | `onerror` oculta el `<img>`; la tarjeta conserva proporción por el contenedor aspect-video |
|
||||
| Valor inválido/corrupto en localStorage | Se ignora y cae a `'table'` |
|
||||
| Selección activa + cambio de vista | `videos.selected` no se toca; la barra masiva sigue funcionando en ambas |
|
||||
|
||||
## Fuera de alcance
|
||||
|
||||
- No se toca backend ni endpoints: `/api/videos` ya devuelve todos los campos
|
||||
que la tarjeta necesita.
|
||||
- Sin acciones por tarjeta, sin hover-preview de vídeo, sin infinite scroll.
|
||||
- Sin tests automatizados nuevos: el repo no tiene infra de tests de frontend
|
||||
(pytest es backend sin red). Verificación manual.
|
||||
|
||||
## Verificación manual
|
||||
|
||||
Con `start-server.bat`:
|
||||
|
||||
1. Alternar tabla ⇄ grid: ambas renderizan los mismos vídeos del filtro activo.
|
||||
2. Marcar 3 tarjetas → barra masiva aparece → "Download .md" encola el job.
|
||||
3. Paginar en grid: sin repeticiones ni saltos (mismo desempate que tabla).
|
||||
4. Recargar la página: la vista elegida se conserva; primera visita → tabla.
|
||||
5. La tabla existente funciona exactamente igual que antes del cambio.
|
||||
Reference in New Issue
Block a user