New Capability: Value-First Media Network Platform
Date: April 10, 2026
Origin: OBS desktop software creates friction -- camera conflicts, local/cloud sync failures, desktop dependency. Mesh WebRTC tested successfully between Chris Carolan and Klemen Hrovat on April 8, 2026. PRD written April 9, all 6 layers built April 9-10.
Impact: Hosts produce shows entirely from a browser. Guests get one URL. The audience gets the show. Zero desktop software.
What Was Built
The Value-First Media Network Platform is a browser-native production studio that replaces OBS for live show production. It lives at media.valuefirstteam.com as the third deployable app in the monorepo alongside valuefirstteam.com (website) and clients.valuefirstteam.com (portal). The platform unifies production controls, guest experience, episode management, analytics, sponsorship, and distribution into a single Astro 5 application using the Tron:Ares design system -- dark backgrounds, teal/cyan accents, Orbitron display headers, Inter body text.
The production pipeline covers the full lifecycle: hosts open the Studio to select a show, manage guests, and create a Mux stream. Guests receive a single URL to a green room where they approve camera and mic, see other participants via mesh WebRTC, and review talking points. The Canvas compositing engine combines participant video streams into branded layouts (solo, 2-up, 3-up, panel) at 1920x1080 with lower thirds and show branding, then pushes the composited stream to Mux via WebRTC WHIP protocol. After the show ends, the post-show pipeline handles transcription from Mux recordings (not YouTube), souvenir generation (clips, social copy, quote cards delivered to guests at their original green room URL), and distribution to YouTube, the website, and podcast feeds. The platform is the origin of all media assets -- YouTube is a destination, never a source.
Beyond production, the platform includes product features that make it a complete media operations system: an Episode Kanban board with drag-and-drop status management across the pipeline (Planned through Published), an analytics dashboard pulling from Mux Data API, content pillar coverage tracking per show, sponsorship management with fulfillment tracking, a General Green Room where anyone can walk in without an account, an interactive Host Guide walking through the entire platform experience, and host/sponsor application forms that create relationship entry points. The platform was built from a 20-requirement PRD across 6 architectural layers in a single extended session: 85 source files, 12,970 lines of code, 17 commits.
Infrastructure Changes
| Change |
Before |
After |
| Production studio |
OBS desktop (localhost:3333) |
Browser-native at media.valuefirstteam.com |
| Show production |
OBS WebSocket + RTMP |
Canvas compositing + Mux WebRTC (WHIP) |
| Guest experience |
StreamYard / VDO.Ninja patchwork |
One-URL green room with mesh WebRTC |
| Episode management |
Manual Sanity Studio |
In-platform Kanban with drag-and-drop |
| Show data source |
show-presets.json (local file) |
Sanity CMS (canonical) |
| Analytics |
YouTube Studio + manual tracking |
In-platform dashboard (Mux Data API) |
| Distribution |
Manual YouTube upload + website update |
Automated pipeline (transcription, Sanity, YouTube, podcast) |
| Sponsorship |
Spreadsheet / ad hoc |
In-platform management with fulfillment tracking |
| Post-show assets |
Manual clip extraction |
Automated souvenir pipeline (clips, social copy, quote cards) |
| Monorepo apps |
2 (website, portal) |
3 (website, portal, media) |
Implementation
Pages (15 routes)
| File |
Purpose |
src/pages/index.astro |
Homepage / dashboard (authenticated) |
src/pages/login.astro |
Host authentication |
src/pages/studio.astro |
Production studio -- show selection, guest management, stream controls |
src/pages/greenroom/index.astro |
General Green Room -- open lobby, no token required |
src/pages/greenroom/[token].astro |
Token-based Green Room -- episode-specific guest experience |
src/pages/episodes/index.astro |
Episode list view |
src/pages/episodes/kanban.astro |
Episode Kanban board -- drag-and-drop pipeline management |
src/pages/analytics/index.astro |
Analytics dashboard -- performance metrics, pillar coverage |
src/pages/shows/index.astro |
Show directory |
src/pages/sponsors/index.astro |
Sponsorship management dashboard |
src/pages/sponsors/apply.astro |
Sponsor application form |
src/pages/host/apply.astro |
Host application form |
src/pages/guide.astro |
Interactive host guide -- 9-scene scrolling walkthrough |
src/pages/changelog.astro |
Platform changelog with What's New badge |
src/pages/feedback.astro |
Feature request and bug report submission |
API Routes (27 endpoints)
| File |
Purpose |
src/pages/api/auth/login.ts |
Email-based authentication (admin direct, host via HubSpot) |
src/pages/api/auth/logout.ts |
Session termination |
src/pages/api/auth/verify.ts |
JWT token verification |
src/pages/api/auth/dev-login.ts |
Development-only login bypass |
src/pages/api/studio/shows.ts |
Show list from Sanity CMS |
src/pages/api/studio/stream.ts |
Mux live stream creation and management |
src/pages/api/studio/recording.ts |
Mux recording asset management |
src/pages/api/studio/episode-prep.ts |
Episode preparation materials from Sanity |
src/pages/api/studio/greenroom-token.ts |
Guest token generation for green room access |
src/pages/api/studio/auth-key.ts |
Director authentication key validation |
src/pages/api/greenroom/validate.ts |
Guest token validation |
src/pages/api/greenroom/episode-info.ts |
Episode context for green room display |
src/pages/api/greenroom/live-status.ts |
Live/offline status for current stream |
src/pages/api/episodes/list.ts |
Episode listing with filters |
src/pages/api/episodes/update-status.ts |
Episode pipeline status updates (Kanban moves) |
src/pages/api/dashboard/host-data.ts |
Personalized host dashboard data |
src/pages/api/dashboard/engagement.ts |
Engagement metrics aggregation |
src/pages/api/analytics/performance.ts |
Performance data from Mux Data API |
src/pages/api/pipeline/transcribe.ts |
Transcription trigger for Mux recordings |
src/pages/api/pipeline/distribute.ts |
Distribution pipeline (YouTube, website, podcast) |
src/pages/api/pipeline/souvenir.ts |
Souvenir generation (clips, quote cards, social copy) |
src/pages/api/pipeline/post-show.ts |
Post-show pipeline orchestrator |
src/pages/api/sponsors/list.ts |
Sponsor listing |
src/pages/api/sponsors/shows.ts |
Sponsor-show associations |
src/pages/api/sponsors/apply.ts |
Sponsor application submission |
src/pages/api/host/apply.ts |
Host application submission |
src/pages/api/feedback/submit.ts |
Feature request and bug report submission |
Components (26 files)
| File |
Purpose |
src/components/Nav.tsx |
Sidebar navigation with role-based sections |
src/components/studio/StudioDashboard.tsx |
Main studio interface -- show selection, controls, guest management |
src/components/studio/ShowList.tsx |
Show selector with Sanity data |
src/components/studio/GuestPanel.tsx |
Guest card management -- link generation, slot assignment, status |
src/components/studio/PreviewPanel.tsx |
Live preview of composited output |
src/components/studio/StreamPanel.tsx |
Mux stream controls -- create, start, stop, status |
src/components/studio/EpisodePrepPanel.tsx |
Episode preparation materials display |
src/components/studio/useSignaling.ts |
WebRTC signaling server connection hook |
src/components/greenroom/GreenRoom.tsx |
Token-based green room -- three-phase surface (preshow, live, postshow) |
src/components/greenroom/GeneralGreenRoom.tsx |
Open lobby -- What's On, How It Works, The Network tabs |
src/components/greenroom/VideoGrid.tsx |
Mesh WebRTC video grid -- renders all participant streams |
src/components/greenroom/DeviceSelector.tsx |
Camera and microphone device selection |
src/components/greenroom/EpisodeInfo.tsx |
Episode context display (talking points, description) |
src/components/greenroom/SouvenirPostshow.tsx |
Post-show souvenir delivery surface |
src/components/greenroom/useWebRTC.ts |
Mesh WebRTC connection management hook |
src/components/dashboard/HostDashboard.tsx |
Personalized host dashboard -- shows, episodes, metrics |
src/components/dashboard/EngagementPanel.tsx |
Engagement metrics visualization |
src/components/episodes/EpisodeKanban.tsx |
Kanban board with drag-and-drop status management |
src/components/analytics/AnalyticsDashboard.tsx |
Performance analytics with charts |
src/components/analytics/PillarCoverage.tsx |
Content pillar coverage visualization |
src/components/sponsors/SponsorDashboard.tsx |
Sponsorship management interface |
src/components/sponsors/SponsorApply.tsx |
Sponsor application form component |
src/components/host/HostApply.tsx |
Host application form component |
src/components/guide/HostGuide.tsx |
Interactive 9-scene scrolling walkthrough |
src/components/changelog/ChangelogPage.tsx |
Changelog display with version badges |
src/components/feedback/FeedbackPage.tsx |
Feature request and bug report form |
Libraries (11 files)
| File |
Purpose |
src/lib/auth.ts |
JWT authentication -- token creation, verification, role management |
src/lib/sanity.ts |
Sanity CMS client (project 0efm0pow) |
src/lib/guest-token.ts |
Guest token generation and validation for green room access |
src/lib/compositor/CanvasCompositor.ts |
Canvas API compositing engine -- renders participant streams into branded layouts |
src/lib/compositor/MuxStreamPush.ts |
Mux WebRTC WHIP stream push -- sends composited MediaStream to Mux |
src/lib/compositor/layouts.ts |
Layout definitions -- solo, 2-up, 3-up, panel at 1920x1080 |
src/lib/compositor/useCompositor.ts |
React hook for compositor lifecycle management |
src/lib/compositor/index.ts |
Compositor module exports |
src/lib/pipeline/transcription.ts |
Mux recording to transcript pipeline |
src/lib/pipeline/souvenir.ts |
Souvenir generation -- clips, quote cards, social copy |
src/lib/pipeline/distribution.ts |
Distribution to YouTube, website (Sanity), podcast feeds |
Data
| File |
Purpose |
src/data/changelog.json |
Platform changelog entries (6 entries, v1.0.0 through v1.2.3) |
Layouts
| File |
Purpose |
src/layouts/Layout.astro |
Base HTML layout (public pages, green room) |
src/layouts/AppLayout.astro |
Authenticated app layout with sidebar navigation |
Infrastructure
| File |
Purpose |
src/middleware.ts |
Authentication middleware -- route protection, JWT validation |
src/env.d.ts |
TypeScript environment declarations |
src/styles/global.css |
Tron:Ares global styles |
Config
| File |
Purpose |
package.json |
Dependencies: Astro 5, React 19, Tailwind, jsonwebtoken, lucide-react, @vf/hubspot |
astro.config.mjs |
SSR mode, Vercel adapter, React + Tailwind integrations, jsonwebtoken externalized |
tailwind.config.mjs |
Tron:Ares color palette, Orbitron/Inter fonts, custom animations |
tsconfig.json |
Strict TypeScript, path aliases (@/ and @root/) |
vercel.json |
Monorepo deploy config (pnpm install + turbo build filter) |
.gitignore |
Build artifacts, env files |
.env.local |
Local development secrets |
Usage
For Hosts
1. Open media.valuefirstteam.com
2. Sign in with your email
3. Dashboard shows your shows, upcoming episodes, performance
4. Open Studio -- select show, manage guests, create Mux stream, go live
5. Guests receive one URL -- join green room, appear on screen
6. End show -- pipeline handles transcription, distribution, souvenirs
For Guests
1. Receive a green room link from the host
2. Click it -- no download, no account
3. Approve camera and mic
4. See other participants, review talking points
5. Show goes live -- you are on camera with branded production
6. After the show -- souvenir delivered at the same URL
For the AI Team
- /media-prep uses platform data instead of OBS state
- /media-recap checks Mux recordings instead of local files
- Marquee manages shows from Sanity, not show-presets.json
- Director agent's OBS integration is deprecated
- Canon writes episode updates via platform API
- Splice links Mux recordings via platform API
For Anyone (General Green Room)
1. Visit media.valuefirstteam.com/greenroom
2. Enter your name
3. Approve camera and mic
4. You are in the lobby -- talk to anyone else there
5. Browse shows, learn how the platform works
Leader Applications
V (Operations)
- Daily media operations shift from OBS state checking to platform API queries
- /media-prep and /media-recap can query Mux stream status and Sanity episode data directly
- Episode Kanban provides visual pipeline management replacing manual status tracking
- Changelog provides structured release communication -- update changelog.json with each deploy
- Background workers can poll platform APIs instead of scraping YouTube
Sage (Customer)
- Guest experience is now a first-class product -- one URL, zero friction
- Souvenir pipeline delivers branded assets that guests share, generating organic reach
- Host application form (
/host/apply) creates a relationship entry point
- Green Room is a social space that builds relationships before and after shows
Pax (Finance)
- Sponsorship management with fulfillment tracking provides revenue visibility per show
- Sponsor application form (
/sponsors/apply) creates a structured intake for sponsorship deals
- Analytics dashboard tracks engagement metrics that inform sponsorship pricing
- Commerce integration ready for HubSpot Commerce Hub transactions
Dependencies
| Dependency |
Status |
Notes |
| Vercel (unified-support-solutions) |
Confirmed |
Project: value-first-media, Root: apps/media |
| Sanity CMS (0efm0pow) |
Confirmed |
Show + episode schemas exist, read/write working |
| Mux (video hosting) |
Confirmed |
MUX_TOKEN_ID + MUX_TOKEN_SECRET in Vercel env |
| Signaling server (Fly.io) |
Confirmed |
signal.valuefirstteam.com, SSL working |
| JWT_SECRET |
Confirmed |
Set in Vercel production env |
| GREENROOM_SECRET |
Confirmed |
Set in Vercel production env |
| DIRECTOR_AUTH_KEY |
Confirmed |
Set in Vercel production env |
| HUBSPOT_ACCESS_TOKEN |
Confirmed |
Set in Vercel production env |
| SANITY_API_TOKEN |
Confirmed |
Set in Vercel production env |
| Custom domain |
Pending |
media.valuefirstteam.com added to Vercel, DNS propagation TBD |
| GitHub integration |
Confirmed |
Deploys on push to main |
Related References
Prior Art
- Broadcast Studio (Brick 15, Mar 4) — OBS-based production that this platform supersedes. Commit
7c02ef97. OBS + Mux + VDO.Ninja replaced StreamYard ($249/month). The Media Network Platform eliminates OBS entirely.
- VFT Live (Brick 19, Mar 27) — Originally scoped as audience experience platform. The Media Network Platform is the expanded execution — production, operations, and intelligence layers added to the original audience scope.
- Marquee M-1.5 Live Experience (Mar 16) — Live page improvements (Next Up, LIVE NOW badge). Subsumed into the platform's Layer 5 intelligence.
Resolved Patterns
- Inngest transcription failure — 36 episodes stuck for 11 weeks (CAR:
Leadership/reports/2026-03-30-corrective-media-transcription-pipeline-silent-failure.md). The platform eliminates Inngest entirely — Mux recordings flow directly to Sanity and Content Vault.
- StreamYard replacement — StreamYard cancelled intentionally. Broadcast Studio (OBS) was the first replacement. This platform is the second — no desktop software at all.
- Phantom episodes from Slate —
show-presets.json disabled: true flag not read by Slate. 17 episodes deleted Apr 9. Platform's show management (Sanity-backed) resolves the source-of-truth problem.
Deferred Items Impacted
- LinkedIn API Live Events (150 Followers Gate) — Platform streams to Mux; LinkedIn Live becomes a simulcast destination, not a dependency
- Media Distribution Configuration — Platform's Layer 4 distribution pipeline needs ANTHROPIC_API_KEY and HubSpot
social scope eventually, but ships without them
- Marquee M-0 Transcription Fix — Structurally resolved by platform-origin asset flow
Planning Documents
| Document |
Path |
| 5P Plan |
docs/plans/media-platform-5p-plan.md |
| PRD |
docs/plans/media-platform-prd.md |
| Original Brick 19 |
Leadership/bricks/vft-live-brick.md |
| Marquee M-1.5 |
Leadership/bricks/marquee-live-experience-plan.md |
| Transcription CAR |
Leadership/reports/2026-03-30-corrective-media-transcription-pipeline-silent-failure.md |
Verification
- Login:
curl -s -X POST https://value-first-media.vercel.app/api/auth/login -H 'Content-Type: application/json' -d '{"email":"chris.carolan@valuefirstteam.com"}' returns { success: true, redirect: "..." }
- Shows from Sanity:
curl -s https://value-first-media.vercel.app/api/studio/shows returns show list
- Green Room: Visit
https://value-first-media.vercel.app/greenroom -- General Green Room loads
- Guide: Visit
https://value-first-media.vercel.app/guide -- Interactive walkthrough loads
- Changelog: Visit
https://value-first-media.vercel.app/changelog -- 6 entries displayed
- Build:
cd apps/media && npx astro build -- completes in ~35s with zero errors
Commit History
18665dcd Add changelog with What's New badge + feature/bug request system
fa83227c Fix sidebar to viewport height
5a3b2633 Add Host Guide link to sidebar nav
01ba9172 Add interactive host guide with mocked platform walkthrough
4d3d5181 Add host application page at /host/apply
4e38b9a5 Add General Green Room -- open lobby for Value-First Media Network
2af13ec4 Add green room index page for token entry + host redirect
9702006f Update state files: media-recap, check-shows, pnpm-lock, paragon appointment, media .gitignore
1e97d0bf Wire remaining integrations: host login, distribution, transcription
d7f0c83b Fix: correct Sanity project ID (0efm0pow, not 1gba6ot4)
ad97438a Fix: externalize jsonwebtoken for Vercel SSR build
e794948d Layers 5-6: Intelligence, management, host portal, commerce
e9af4eb8 Layer 4: Platform-origin asset pipeline
19b85d5d Fix production login -- admin emails authenticate directly
adddcfe0 Layer 3: Canvas compositing engine + Mux streaming
3f8b76dd Layer 2: Studio dashboard rebuild + Green Room fresh build
0acf21e9 Add vercel.json for media app monorepo deploy
35ed81dd Scaffold Value-First Media Network Platform (Layer 1)
17 commits. 6 layers. 85 source files. 12,970 lines. April 9-10, 2026.