[Teams] Team demo videos + /admin/teams polish

[gregv]

Summary

Adds a per-team demo video (YouTube / Vimeo / Loom / Google Drive) across the public event pages, the results page, the hacker-facing `/manageteam` form, and the `/admin/teams` console — paired with a focused round of admin UX polish that materially helps during demo/judging day.

Pairs with backend PR opportunity-hack/backend-ohack.dev#217, which adds `demo_video_url` to `edit_team()` and the `POST /api/team//demo-video` self-serve endpoint.

What changed

Public surfaces (CWV-safe — no eager iframes)

• `TeamList` on `/hack/[event_id]` renders a new `LiteVideoThumbnail` per card (single lazy `` of the YouTube hqdefault.jpg, NOT an iframe). Click opens a single page-level `` with the existing `VideoDisplay`. Per-card iframes were rejected — 30+ embeds would push ~45 MB and trash LCP/CLS.
• `HackathonResults` on `/hack/[id]/results` embeds the demo inline (3-5 winner cards only; `VideoDisplay` iframe now has `loading="lazy"`).

Hacker self-serve (`/hack/[event_id]/manageteam`)

• New Demo Video section in `TeamStatusPanel` beside the existing DevPost section.
• Validates URL is one of the 4 supported providers client-side, posts to the new backend endpoint, and shows a live `LiteVideoThumbnail` preview.

Admin (`/admin/teams`) — scoped polish, not a redesign

• New Demo Video column in the team table — thumbnail when set, "+ Add" CTA when missing.
• New inline-edit Popover (`TeamFieldPopover`) for the column: paste a URL, see a live preview, save without opening the full 5-tab Dialog. Component is parameterized so it can be reused for the DevPost column later.
• New filter chip row above the table: `All` / `Winning` / `In review` / `Active` / `Missing DevPost` / `Missing Video`. Pure client-side over the existing `filteredTeams` array.
• New Demo Video URL TextField in the full edit Dialog with live preview underneath.
• Extracted a `patchTeam(partial)` helper so the full Dialog save and the inline Popover share one PATCH path; quick-edits update local state optimistically.

Shared component

• `LiteVideoThumbnail` (`src/components/VideoDisplay/LiteVideoThumbnail.js`) — extracts YouTube IDs with the same regex `VideoDisplay` uses; renders the YouTube hqdefault.jpg with `loading="lazy" decoding="async"` + explicit width/height. Vimeo/Loom/Drive/unknown providers fall back to a generic dark "Watch demo" tile (no per-render network hop).

Why

• "Show me the team's demo" is the single most common ask during and after a hackathon — judges, sponsors, social media. Threading it through the existing event/results pages removes the "hunt for the DevPost" step.
• Admins needed a way to fix up missing videos quickly without re-opening the multi-tab edit Dialog every time; the inline Popover + Missing Video chip is the high-leverage flow.

Reviewer notes

• No new collection / no migration. Additive `demo_video_url` string + companion `demo_video_url_submitted` ISO timestamp on first set. Mirrors the `devpost_link` shape exactly.
• CWV. Network inspection on `/hack/[event_id]` should show NO `youtube.com/embed` requests on first load even when many teams have videos — only the lazy thumbnail images.
• Admin UX is intentionally scoped polish. No drawer redesign, no kanban view, no virtualization — the existing table + Dialog still work; the additions are a column + chips + Popover. Easy to extend the Popover to more fields later.
• The hacker self-serve endpoint mirrors `/api/team//devpost` exactly (auth-required, no admin permission). Existing `PATCH /api/team/edit` continues to gate on `volunteer.admin`.

Test plan

• Admin column + Popover — `/admin/teams?event_id=467ceb62c95611f09ff7dead62e9ece0` shows the Demo Video column; click "+ Add" → Popover → paste a YouTube URL → preview appears → Save → row's thumbnail updates without opening the full Dialog.
• Admin filter chips — toggle "Missing Video" → only teams without a URL show; toggle "Winning" → only winning-status teams show; chip toggle resets pagination.
• Admin full Dialog — open edit Dialog on a team; confirm new Demo Video URL TextField in Team Details, live preview, open-in-new-tab adornment, validation when given a non-supported URL.
• Hacker self-serve — as a logged-in team member, `/hack/2026_spring_wics_asu/manageteam` → paste a YouTube URL → Save → confirm preview renders and admin column reflects it.
• Public event page — `/hack/2026_spring_wics_asu` — find a team with a video. Confirm thumbnail tile renders, and in DevTools Network there are no `youtube.com/embed` requests on first load. Click thumbnail → Dialog opens, iframe loads, video plays.
• Results page — `/hack/2026_spring_wics_asu/results` — WinnerCard shows inline embed; inspect element confirms iframe has `loading="lazy"`.
• Graceful fallback — set a team's `demo_video_url` to a malformed string → generic "Watch demo" tile renders without crashing; clicking opens Dialog with `VideoDisplay`'s "Unsupported video URL" message.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontend-ohack-dev	Ready	Preview	May 16, 2026 5:25am