Resume Playback and Progress UI

Written by: Marlon Colca
Posted on 10 Sep 2025 - 24 days ago
nextjs typescript clones

Persist and restore playback position, and reflect it in the catalog UI.

Objetivo: guardar/restaurar la posición de reproducción y mostrar el avance en las tarjetas.

Archivos 🗂️

• src/hooks/useResume.ts: guarda { t, d, u } en localStorage como vp:pos:<key>.
• src/components/VideoPlayer.tsx: invoca useResume(videoEl, storageKey, true).
• src/components/MovieCard.tsx: lee el avance y dibuja una barra.

Comportamiento ⚙️

• Guarda aprox. cada 2s mientras reproduce; omite videos cortos (< 20s).
• Limpia al inicio/fin o al terminar.
• Al cargar, hace seek a la última posición válida.

¿Por qué localStorage? 💾

• Simple, offline y sin backend para el demo. Luego puedes sincronizar por usuario en tu servidor.

🔜 Coming up next

Autoplay, Fullscreen, and Shortcuts

Improve ergonomics with autoplay, best‑effort fullscreen, keyboard controls, and an optional “unmute” overlay.

11 Sep 2025 - 23 days ago