nino/manga-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Colas por usuario y sin pantalla negra mientras carga la página siguiente

Browse Source 
- Descargas y reescalados tienen usuarios (download_users): Colas y la biblioteca descargada muestran
  solo lo de cada uno. Un manga ya descargado por otro se lee desde el disco y entra en tu biblioteca
  al empezar a leerlo; borrar uno compartido solo lo quita de la tuya. Lo anterior se asigna a quien lo
  lee, sigue o tiene en una lista (o al primer usuario).
- Lector: si la página siguiente no ha llegado, la actual se queda con un indicador hasta que llega
  (máx. 4 s); si no, la nueva aparece con fundido y un indicador en vez de negro. Precarga de 6
  páginas por delante, ya decodificadas.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
nino
2026-11-01 16:20:09 -06:00
co-authored by Claude Opus 5.5
parent 84a60a6501
commit 09354f675e
4 changed files with 114 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/style.css
+8 -1
View File
@@ -101,7 +101,14 @@ input:focus, select:focus { border-color: var(--accent); }
.rbar select { padding: 5px 8px; }
.rbar input[type=range] { flex: 1; max-width: 520px; accent-color: var(--accent); }
#pages img { filter: var(--page-filter, none); transition: filter .2s; }
#pages img { filter: var(--page-filter, none); transition: filter .2s, opacity .25s; }
/* Página que aún no ha llegado: indicador de carga y fundido al aparecer */
#pages .stage img.pending { opacity: 0; }
.paged.waiting::after, .paged .stage.loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent);
animation: pgspin .8s linear infinite; z-index: 6; pointer-events: none; }
.paged .stage.loading { min-height: 100%; }
@keyframes pgspin { to { transform: rotate(360deg); } }
.paged { height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; user-select: none; }
.paged img { max-width: 100%; max-height: 100%; object-fit: contain; }
.paged.fit-width { height: auto; min-height: 100vh; align-items: flex-start; }