Continue Watching Row

Written by: Marlon Colca
Posted on 12 Sep 2025 - 22 days ago
nextjs typescript clones

Surface in‑progress items based on local resume data

Objetivo: mostrar elementos en progreso basados en los datos locales de reanudación.

Componente (extracto) 🧩

"use client";
import { useEffect, useMemo, useState } from "react";
import Row from "@/components/Row";
import { getAllMovies, type Movie } from "@/lib/catalog";

type Entry = { id: string; t: number; d?: number; u?: number };
function readEntries(): Entry[] {
  /* lee localStorage y parsea entradas */ return [];
}

export default function ContinueWatching() {
  const [entries, setEntries] = useState<Entry[]>([]);
  const movies = getAllMovies();
  useEffect(() => {
    setEntries(readEntries());
    const onStorage = () => setEntries(readEntries());
    window.addEventListener("storage", onStorage);
    return () => window.removeEventListener("storage", onStorage);
  }, []);
  const items: Movie[] = useMemo(() => {
    /* cruza ids con catálogo, filtra inicio/fin, ordena por u */ return [];
  }, [entries, movies]);
  if (!items.length) return null;
  return <Row title="Seguir viendo" items={items} />;
}

Integración 🔗

• Importa y coloca <ContinueWatching /> cerca del inicio de src/app/page.tsx, bajo el hero.

🔜 Coming up next

Assets and Licensing

Handle videos, posters and subtitles responsibly in an open‑source project

13 Sep 2025 - 21 days ago