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 missingProps
| Prop | Type | Required | Description |
|---|---|---|---|
| userSession | IWhoami | null | Yes | Logged-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
