Skip to content

README.md

Latest commit

 

History

History
120 lines (82 loc) · 3.95 KB

README.md

File metadata and controls

120 lines (82 loc) · 3.95 KB

CTP Stream Controller

A self-hosted stream control panel for Cross The Pond / VATSIM UK events.
Controls OBS, Spotify playback, and TrackAudio frequencies from a web browser.

Features

  • OBS WebSocket — switch scenes (Live / BRB / Starting Soon), toggle overlays (GND / TWR / APP / CTR) with one-active-at-a-time enforcement
  • Spotify — play/pause, next/prev, fade in/out, volume — via PKCE OAuth (no implicit flow)
  • TrackAudio — live frequency list with RX indicator, per-station mute, mute-all; sorted CTR → APP → TWR → GND → DEL
  • Auth — access control via nginx basic auth (configured at the reverse proxy level)
  • Zulu clock — live UTC time in the status bar

Quick start (local development)

Requirements

  • Node.js v24+
  • OBS 28+ (for WebSocket support)
  • TrackAudio running on the same network
  • A Spotify Developer app (free, takes ~2 minutes)

1. Install dependencies

npm install

2. Start the development server

npm start

This runs two processes concurrently:

  • Vite dev server on http://127.0.0.1:5173
  • Express auth/proxy server on http://127.0.0.1:3001

Open http://127.0.0.1:3001 in your browser.

Configuration

OBS source and scene names

Edit the constants at the top of src/pages/OverlaysPage.jsx:

const OVERLAY_SOURCES = [
	{ key: 'EGGX_CTR', label: 'EGGX', description: 'Shanwick Radio', sourceName: 'EGGX_CTR', scene: 'ES + Overlay' },
	{ key: 'LON_C_CTR', label: 'AC Central', description: 'AC Central', sourceName: 'LON_C_CTR', scene: 'ES + Overlay' },
	{ key: 'EGLL_F_APP', label: 'LL FIN', description: 'Heathrow FIN', sourceName: 'EGLL_F_APP', scene: 'ES + Overlay' },
	{ key: 'EGLL_N_TWR', label: 'LL AIR N', description: 'Heathrow AIR North', sourceName: 'EGLL_N_TWR', scene: 'ES + Overlay' },
	{ key: 'EGLL_S_TWR', label: 'LL AIR S', description: 'Heathrow AIR South', sourceName: 'EGLL_S_TWR', scene: 'ES + Overlay' },
	{ key: 'EGLL_2_GND', label: 'LL GMC 2', description: 'Heathrow GMC 2', sourceName: 'EGLL_2_GND', scene: 'ES + Overlay' },
	{ key: 'EGLL_1_GND', label: 'LL GMC 1', description: 'Heathrow GMC 1', sourceName: 'EGLL_1_GND', scene: 'ES + Overlay' },
];

const QUICK_SCENES = [
	{ label: 'Starting Screen', sceneName: 'Starting Screen', isBrb: false },
	{ label: 'BRB', sceneName: 'Break', isBrb: true },
	{ label: 'Controller View', sceneName: 'ES + Overlay', isBrb: false },
	{ label: 'Ending', sceneName: 'Ending', isBrb: false },
];

sourceName must match your OBS source name exactly. scene is the scene that source lives in.

OBS WebSocket

  • Enable in OBS: Tools → WebSocket Server Settings → Enable WebSocket server
  • Default port: 4455
  • Enter host + port in the app's Settings page

TrackAudio

  • Default WebSocket: ws://localhost:49080/ws
  • Enter host + port in the app's Settings page
  • Station order: CTR → APP → TWR → GND → DEL (matched by callsign suffix, e.g. EGLL_APP)

Spotify

  1. Go to developer.spotify.com/dashboard
  2. Create an app (any name/description)
  3. Add your app's URL + /auth/spotify/callback as a Redirect URI
    • Local: http://127.0.0.1:3001/auth/spotify/callback
    • Domain: https://ctp.<yourdomain>.com/auth/spotify/callback
  4. Copy the Client ID and paste it in Settings → Spotify
  5. Click Authenticate — a tab opens for you to approve access, then the app updates automatically

Production deployment (Linux + nginx)

See DEPLOYMENT.md for full instructions.

The short version:

  1. Run npm run build — outputs to dist/
  2. Point nginx at the dist/ folder for static assets and proxy /auth/* to server.js
  3. Run server.js as a systemd service
  4. Obtain a Let's Encrypt cert via Certbot

Building for production

npm run build

Output goes to dist/. When running in production, server.js serves the built static files directly rather than proxying to Vite.