Skip to content

Show time-remaining countdown on stream card (e.g. "2 days left" / "Ended") #33

@Omoboi-dev

Description

@Omoboi-dev

The card shows a raw date range (e.g. Jun 3 2026 → Jun 10 2026); a relative countdown is far more readable.

What to do

  • Add a helper in src/lib/format.ts, e.g. formatTimeRemaining(endSec: number, nowSec?: number): string returning "Ended" when past end_time, otherwise the largest sensible unit — "2 days left", "5 hours left", "30 minutes left" (singular/plural handled, mirroring formatDuration).
  • Use it in src/components/StreamCard.tsx in place of the raw date line; keep the absolute dates on hover via a title attribute. Reuse the ended boolean the card already derives.
  • Accuracy to the minute is fine; no need to tick every second.

Acceptance criteria

  • Active streams show a relative countdown.
  • Streams past end_time show "Ended".
  • Exact dates remain accessible (tooltip).
  • formatTimeRemaining has unit tests (pairs with Set up Vitest for frontend unit testing #11).
  • pnpm exec tsc --noEmit passes.

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions