Skip to content

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

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions