ContinueWatching

A horizontal row of cards for content the user has started watching. Shows 16:9 thumbnails, progress bars, episode info (e.g. S1 E3), and a play icon. Requires a logged-in user session with watch history.

Preview

Each card shows a thumbnail, progress bar at the bottom, content title, episode name or S/E label, and a play icon. Progress is calculated from currentTime / duration.

Installation

ContinueWatching is part of the Content Page bundle. Install it with:

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-content-page.json

Usage

Pass the logged-in user session. The component reads userSession.sessions and renders nothing if the user is not logged in or has no watch history.

import ContinueWatching from "@/components/zezo/Content/Styles/Cards/ContinueWatching/ContinueWatching";
import type { IWhoami } from "@zezosoft/zezo-ott-api-client";

// userSession must have a sessions array with watch history
<ContinueWatching userSession={userSession} />

// Returns null when:
// - userSession is null/undefined
// - userSession.sessions is empty or missing

Props

PropTypeRequiredDescription
userSessionIWhoami | nullYesLogged-in user with sessions array (watch history)

Session structure

Each item in userSession.sessions should include:

{
  _id: string;
  content: IContentData;      // Full content object with name, slug, type, poster, etc.
  currentTime?: number;       // Seconds watched (or watch_time)
  watch_time?: number;        // Alternative to currentTime
  duration?: number;          // Total duration in seconds
  episode?: number;           // Episode number
  season?: number;            // Season number
  episodeName?: string;       // Optional episode title
}

Features

  • 16:9 thumbnail with progress bar at the bottom (theme primary color)
  • Play icon overlay (bottom-left)
  • Content name and episode info (S1 E3 or episode name)
  • Responsive Swiper: 1.4 → 2.3 → 3.2 → 4.0 → 4.8 cards visible
  • Links to /details/[type]/[slug]
  • Renders nothing when user is not logged in or has no sessions