A professional Next.js web application for managing live streams and controlling multiple OBS Source Switchers with real-time WebSocket integration and modern glass morphism UI.
Find a file
Decobus 9a79decda3
Some checks failed
Lint and Build / build (22) (pull_request) Failing after 44s
Lint and Build / build (20) (pull_request) Failing after 53s
Comprehensive UI improvements with proper button spacing and modern design
- Fix broken Tailwind gap classes by implementing custom CSS spacing system
- Add .form-row and .button-group classes for consistent 16px and 12px spacing
- Replace broken SVG icons with reliable emoji icons throughout application
- Implement comprehensive button system with proper sizing and color coding:
  * btn-success (green) for add/save actions
  * btn-danger (red) for delete actions
  * btn-secondary (glass) for edit/cancel actions
  * btn-sm for smaller buttons with proper proportions

Updated all pages with consistent spacing:
- Header: Fixed navigation button spacing with button-group class
- Teams: Fixed add team form and action button spacing
- Streams: Moved Add Stream button to same line as team dropdown
- Home: Updated edit button styling and spacing
- Edit: Fixed all form buttons with proper spacing and modern icons

Enhanced user experience:
- Professional button hover effects with subtle animations
- Consistent visual hierarchy with proper spacing
- Responsive design maintained across all screen sizes
- Modern glass morphism design with improved accessibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-19 05:12:10 -04:00
.forgejo/workflows Add Forgejo CI/CD workflows with self-hosted runners 2025-07-19 04:42:30 -04:00
.github/workflows Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
app Comprehensive UI improvements with proper button spacing and modern design 2025-07-19 05:12:10 -04:00
components Comprehensive UI improvements with proper button spacing and modern design 2025-07-19 05:12:10 -04:00
lib Implement comprehensive security fixes for API protection 2025-07-19 04:57:54 -04:00
public Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
scripts Update UI to match consistent layout patterns between pages 2025-07-19 04:39:40 -04:00
styles Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
types Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
.eslintrc.json Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
.gitignore Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
CLAUDE.md Implement comprehensive security fixes for API protection 2025-07-19 04:57:54 -04:00
config.js Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
middleware.ts Allow internal network access without API key 2025-07-19 05:02:12 -04:00
next.config.ts Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
package-lock.json Update UI to match consistent layout patterns between pages 2025-07-19 04:39:40 -04:00
package.json Update UI to match consistent layout patterns between pages 2025-07-19 04:39:40 -04:00
postcss.config.js Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
postcss.config.mjs Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
README.md Implement comprehensive security fixes for API protection 2025-07-19 04:57:54 -04:00
tailwind.config.js Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
tailwind.config.ts Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
testObs.js Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00
tsconfig.json Initial commit - OBS Source Switcher Plugin UI 2025-07-15 22:15:57 -04:00

OBS Source Switcher Plugin UI

A professional Next.js web application for controlling multiple OBS Source Switchers with real-time WebSocket integration and modern glass morphism UI.

Features

  • Multi-Screen Source Control: Manage 7 different screen positions (large, left, right, and 4 corners)
  • Real-time OBS Integration: WebSocket connection with live status monitoring
  • Team & Stream Management: Organize streams by teams with full CRUD operations
  • Modern UI: Glass morphism design with responsive layout
  • Professional Broadcasting: Audio routing, scene management, and live status indicators
  • Dual Integration: WebSocket API + text file monitoring for maximum compatibility

Quick Start

npm install
npm run dev

Open http://localhost:3000 to access the control interface.

Configuration

Environment Variables

Create .env.local in the project root:

# File storage directory (optional, defaults to ./files)
FILE_DIRECTORY=C:\\OBS\\source-switching

# OBS WebSocket settings (optional, these are defaults)
OBS_WEBSOCKET_HOST=127.0.0.1
OBS_WEBSOCKET_PORT=4455
OBS_WEBSOCKET_PASSWORD=your_password_here

# Security (IMPORTANT: Set in production)
API_KEY=your_secure_api_key_here

Security Setup

⚠️ IMPORTANT: Set API_KEY in production to protect your OBS setup from unauthorized access.

Generate a secure API key:

# Generate a random 32-character key
openssl rand -hex 32

Without an API key, anyone on your network can control your OBS streams.

OBS Source Switcher Setup

  1. In OBS, configure Source Switcher properties
  2. Enable "Current Source File" at the bottom
  3. Point to one of the generated text files (e.g., large.txt, left.txt)
  4. Set read interval to 1000ms
  5. Sources will switch automatically when files change

Database Setup

# Create seasonal database tables
npm run create-sat-summer-2025-tables

Development Commands

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # TypeScript validation

Architecture

  • Frontend: Next.js 15 with React 19 and TypeScript
  • Backend: Next.js API routes with SQLite database
  • OBS Integration: WebSocket connection + text file monitoring
  • Styling: Custom CSS with glass morphism and Tailwind utilities
  • CI/CD: Forgejo workflows with self-hosted runners

API Endpoints

  • GET /api/streams - List all streams
  • POST /api/addStream - Create new stream and OBS source
  • POST /api/setActive - Set active stream for screen position
  • GET /api/obsStatus - Real-time OBS connection status
  • GET /api/teams - Team management

See CLAUDE.md for detailed architecture documentation.