@@ -252,17 +376,29 @@ export default function Home() {
Corner Displays
-
+
+ {(() => {
+ const buttonState = getSceneButtonState('4-Screen');
+ return (
+ <>
+
+ {buttonState.showTransition && (
+
+ )}
+
+ );
+ })()}
+
{cornerDisplays.map(({ screen, label }) => (
diff --git a/app/performance/page.tsx b/app/performance/page.tsx
new file mode 100644
index 0000000..4db20db
--- /dev/null
+++ b/app/performance/page.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PerformanceMonitor } from '@/lib/performance';
+
+interface PerformanceMetrics {
+ [key: string]: {
+ avg: number;
+ min: number;
+ max: number;
+ count: number;
+ } | null;
+}
+
+export default function PerformancePage() {
+ const [metrics, setMetrics] = useState
({});
+
+ useEffect(() => {
+ const updateMetrics = () => {
+ setMetrics(PerformanceMonitor.getAllMetrics());
+ };
+
+ // Update metrics every 2 seconds
+ updateMetrics();
+ const interval = setInterval(updateMetrics, 2000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
+
+
Performance Metrics
+
+ {Object.keys(metrics).length === 0 ? (
+
+
No metrics collected yet. Navigate around the app to see performance data.
+
+ ) : (
+
+ {Object.entries(metrics).map(([label, metric]) => {
+ if (!metric) return null;
+
+ return (
+
+
+ {label.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+
+
+
+
+ Average
+ {metric.avg.toFixed(2)}ms
+
+
+
+ Min
+ {metric.min.toFixed(2)}ms
+
+
+
+ Max
+ 100 ? 'text-red' : 'text-yellow'}`}>
+ {metric.max.toFixed(2)}ms
+
+
+
+
+ Count
+ {metric.count}
+
+
+
+ {/* Performance indicator bar */}
+
+
+
+
+ {metric.avg < 50 ? 'Excellent' :
+ metric.avg < 100 ? 'Good' : 'Needs Optimization'}
+
+
+
+
+ );
+ })}
+
+ {/* Performance tips */}
+
+
đĄ Performance Tips
+
+
+
Response Times
+
+ - < 50ms - Excellent user experience
+ - 50-100ms - Good, barely noticeable
+ - 100-300ms - Noticeable delay
+ - > 300ms - Frustrating for users
+
+
+
+
Optimization Strategies
+
+ - Monitor fetchData and setActive timings
+ - High max values indicate performance spikes
+ - Consider caching for frequently called APIs
+ - Batch multiple requests when possible
+
+
+
+
+
+ )}
+
+
+
+
Settings
+
+ {/* API Key Section */}
+
+
+
API Key Authentication
+
+ API keys are required when accessing this application from external networks.
+ The key is stored securely in your browser's local storage.
+
+
+
+ {/* Current Status */}
+
+
+
+
Current Status
+
+ {isAuthenticated ? (
+ <>
+
+
Authenticated
+
+ ) : (
+ <>
+
+
No API key set
+
+ )}
+
+
+ {isAuthenticated && (
+
+ )}
+
+
+
+ {/* API Key Form */}
+
+
+ {/* Information Section */}
+
+
âšī¸ Information
+
+ - API keys are only required for external network access
+ - Local network access bypasses authentication automatically
+ - Keys are validated against the server before saving
+ - Your API key is stored locally and never transmitted unnecessarily
+
+
+
+
+
+ {streamsByTeam.length > 0 && (
+
+
+
+
+ )}
+
+ {streamsByTeam.map(({ teamId, teamName, streams: teamStreams }) => (
+
handleToggleGroup(teamId)}
+ >
+
+ {teamStreams.map((stream) => (
+
+
+
+
+ {stream.name.charAt(0).toUpperCase()}
+
+
+
{stream.name}
+
OBS: {stream.obs_source_name}
+
+
+
+
+
+ ))}
+
+ ))}
+
+
Create your first stream above!
) : (
-
- {streams.map((stream) => {
- const team = teams.find(t => t.id === stream.team_id);
- return (
-
-
-
-
- {stream.name.charAt(0).toUpperCase()}
-
-
-
{stream.name}
-
OBS: {stream.obs_source_name}
-
Team: {team?.name || 'Unknown'}
-
-
-
-
ID: {stream.id}
-
-
-
- View Stream
-
-
-
-
-
-
- );
- })}
-
+
setDeleteConfirm({ id: stream.id, name: stream.name })}
+ />
)}
diff --git a/components/ApiKeyPrompt.tsx b/components/ApiKeyPrompt.tsx
new file mode 100644
index 0000000..a42611a
--- /dev/null
+++ b/components/ApiKeyPrompt.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useApiKey } from '../contexts/ApiKeyContext';
+
+interface ApiKeyPromptProps {
+ show: boolean;
+ onClose?: () => void;
+}
+
+export function ApiKeyPrompt({ show, onClose }: ApiKeyPromptProps) {
+ const { setApiKey } = useApiKey();
+ const [inputValue, setInputValue] = useState('');
+ const [error, setError] = useState('');
+
+ if (!show) return null;
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+
+ if (!inputValue.trim()) {
+ setError('API key is required');
+ return;
+ }
+
+ // Test the API key by making a simple request
+ try {
+ const response = await fetch('/api/obsStatus', {
+ headers: {
+ 'x-api-key': inputValue.trim()
+ }
+ });
+
+ if (response.ok) {
+ setApiKey(inputValue.trim());
+ setInputValue('');
+ onClose?.();
+ } else {
+ setError('Invalid API key');
+ }
+ } catch {
+ setError('Failed to validate API key');
+ }
+ };
+
+ return (
+
+
+
API Key Required
+
+ This application requires an API key for access. Please enter your API key to continue.
+
+
+
+
+
+ );
+}
+
+export function ApiKeyBanner() {
+ const { isAuthenticated, clearApiKey } = useApiKey();
+ const [showPrompt, setShowPrompt] = useState(false);
+
+ if (isAuthenticated) {
+ return (
+
+
+ â
+ Authenticated
+
+
+
+
+
+
setShowPrompt(false)} />
+
+ );
+ }
+
+ return (
+ <>
+
+
+ â ī¸
+ API key required for full access
+
+
+
+
setShowPrompt(false)} />
+
+ );
+}
\ No newline at end of file
diff --git a/components/CollapsibleGroup.tsx b/components/CollapsibleGroup.tsx
new file mode 100644
index 0000000..0ea3c54
--- /dev/null
+++ b/components/CollapsibleGroup.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { useState, ReactNode } from 'react';
+
+interface CollapsibleGroupProps {
+ title: string;
+ itemCount: number;
+ children: ReactNode;
+ defaultOpen?: boolean;
+ isOpen?: boolean;
+ onToggle?: () => void;
+}
+
+export default function CollapsibleGroup({
+ title,
+ itemCount,
+ children,
+ defaultOpen = true,
+ isOpen: controlledIsOpen,
+ onToggle
+}: CollapsibleGroupProps) {
+ const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen);
+
+ // Use controlled state if provided, otherwise use internal state
+ const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+
+ const handleToggle = () => {
+ if (onToggle) {
+ onToggle();
+ } else {
+ setInternalIsOpen(!internalIsOpen);
+ }
+ };
+
+ return (
+
+
+
+
+
OBS Studio
-
-
+
+
{obsStatus?.connected ? 'Connected' : 'Disconnected'}
@@ -96,17 +98,22 @@ export default function Footer() {
{obsStatus.host}:{obsStatus.port}
{obsStatus.hasPassword &&
đ Authenticated
}
- {/* Streaming/Recording Status */}
+ {/* Streaming/Recording/Studio Mode Status */}
{obsStatus.connected && (
-
-
-
-
{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}
+
+
+
+
{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}
-
-
-
{obsStatus.recording ? 'REC' : 'IDLE'}
+
+
+
{obsStatus.recording ? 'REC' : 'IDLE'}
+
+
+
+
+
{obsStatus.studioModeEnabled ? 'STUDIO' : 'DIRECT'}
)}
@@ -138,11 +145,18 @@ export default function Footer() {
{obsStatus.currentScene && (
- Scene:
+ {obsStatus.studioModeEnabled ? 'Program:' : 'Scene:'}
{obsStatus.currentScene}
)}
+ {obsStatus.studioModeEnabled && obsStatus.currentPreviewScene && (
+
+ Preview:
+ {obsStatus.currentPreviewScene}
+
+ )}
+
{obsStatus.sceneCount !== null && (
Total Scenes:
diff --git a/components/Header.tsx b/components/Header.tsx
index 44f8cc6..5c4d9ec 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -50,6 +50,24 @@ export default function Header() {
đĨ
Teams
+
+
+ âī¸
+ Settings
+
+
+ {process.env.NODE_ENV === 'development' && (
+
+ đ
+ Perf
+
+ )}
diff --git a/components/PerformanceDashboard.tsx b/components/PerformanceDashboard.tsx
index cfb96ed..b18c95c 100644
--- a/components/PerformanceDashboard.tsx
+++ b/components/PerformanceDashboard.tsx
@@ -36,22 +36,27 @@ export default function PerformanceDashboard() {
}
return (
-
- {!isVisible ? (
-
- ) : (
-
+ <>
+ {!isVisible && (
+
+
+
+ )}
+
+ {isVisible && (
+
+
-
Performance Metrics
+ Performance Metrics
{Object.keys(metrics).length === 0 ? (
-
No metrics collected yet.
+
No metrics collected yet.
) : (
{Object.entries(metrics).map(([label, metric]) => {
if (!metric) return null;
return (
-
-
+
+
{label.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
- Avg:{' '}
- {metric.avg.toFixed(2)}ms
+ Avg:{' '}
+ {metric.avg.toFixed(2)}ms
- Count:{' '}
- {metric.count}
+ Count:{' '}
+ {metric.count}
- Min:{' '}
- {metric.min.toFixed(2)}ms
+ Min:{' '}
+ {metric.min.toFixed(2)}ms
- Max:{' '}
- 100 ? 'text-red-400' : 'text-yellow-400'}>
+ Max:{' '}
+ 100 ? 'text-red' : 'text-yellow'}>
{metric.max.toFixed(2)}ms
@@ -96,11 +101,11 @@ export default function PerformanceDashboard() {
-
+
{metric.avg < 50 ? 'Excellent' :
metric.avg < 100 ? 'Good' : 'Needs Optimization'}
@@ -111,11 +116,11 @@ export default function PerformanceDashboard() {
})}
{/* Performance tips */}
-
-
+
+
đĄ Performance Tips
-
+
- âĸ Keep API calls under 100ms for optimal UX
- âĸ Monitor fetchData and setActive timings
- âĸ High max values indicate performance spikes
@@ -124,8 +129,9 @@ export default function PerformanceDashboard() {
)}
-
Loading...
;
+ }
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useApiKey() {
+ const context = useContext(ApiKeyContext);
+ if (context === undefined) {
+ throw new Error('useApiKey must be used within an ApiKeyProvider');
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/docs/API.md b/docs/API.md
new file mode 100644
index 0000000..be61781
--- /dev/null
+++ b/docs/API.md
@@ -0,0 +1,288 @@
+# API Documentation
+
+This document provides detailed information about all API endpoints available in the Live Stream Manager application.
+
+## Base URL
+All API endpoints are available at `/api/*` relative to your application's base URL.
+
+## Authentication
+All endpoints require API key authentication when the `API_KEY` environment variable is set. Include the API key in the `Authorization` header:
+
+```
+Authorization: Bearer your_api_key_here
+```
+
+Authentication is bypassed for localhost requests in development mode.
+
+## Response Format
+All endpoints return JSON responses in the following format:
+
+```json
+{
+ "success": true,
+ "data": { /* response data */ },
+ "message": "Optional success message"
+}
+```
+
+Error responses:
+```json
+{
+ "success": false,
+ "error": "Error description",
+ "message": "User-friendly error message"
+}
+```
+
+## Stream Management
+
+### GET /api/streams
+List all streams with team information.
+
+**Response:**
+```json
+{
+ "success": true,
+ "data": [
+ {
+ "id": 1,
+ "name": "StreamerName",
+ "obs_source_name": "TeamName_StreamerName",
+ "url": "https://twitch.tv/streamername",
+ "team_id": 1,
+ "team_name": "Team Alpha"
+ }
+ ]
+}
+```
+
+### GET /api/streams/[id]
+Get individual stream details by ID.
+
+### POST /api/addStream
+Create new stream with browser source and team association.
+
+**Request Body:**
+```json
+{
+ "name": "StreamerName",
+ "url": "https://twitch.tv/streamername", // or just "streamername"
+ "team_id": 1
+}
+```
+
+### PUT /api/streams/[id]
+Update stream information.
+
+### DELETE /api/streams/[id]
+Delete stream with comprehensive OBS cleanup:
+- Removes stream's nested scene
+- Deletes browser source
+- Removes from all source switchers
+- Clears text files referencing the stream
+
+## Source Control
+
+### POST /api/setActive
+Set active stream for screen position (writes team-prefixed name to text file).
+
+**Request Body:**
+```json
+{
+ "screen": "large", // large, left, right, top_left, top_right, bottom_left, bottom_right
+ "source": "TeamName_StreamerName"
+}
+```
+
+### GET /api/getActive
+Get currently active sources for all screen positions.
+
+**Response:**
+```json
+{
+ "success": true,
+ "data": {
+ "large": "TeamName_StreamerName",
+ "left": "TeamName_StreamerName2",
+ "right": "",
+ // ... other positions
+ }
+}
+```
+
+## Team Management
+
+### GET /api/teams
+Get all teams with group information and sync status.
+
+**Response:**
+```json
+{
+ "success": true,
+ "data": [
+ {
+ "team_id": 1,
+ "team_name": "Team Alpha",
+ "group_name": "Team Alpha",
+ "group_uuid": "abc123-def456-ghi789"
+ }
+ ]
+}
+```
+
+### POST /api/teams
+Create new team with optional OBS scene creation.
+
+**Request Body:**
+```json
+{
+ "team_name": "New Team",
+ "create_group": true // optional
+}
+```
+
+### PUT /api/teams/[teamId]
+Update team name, group_name, or group_uuid.
+
+### DELETE /api/teams/[teamId]
+Delete team with comprehensive OBS cleanup:
+- Deletes team scene/group
+- Removes team text source
+- Deletes all associated stream scenes
+- Removes all browser sources with team prefix
+- Clears all related text files
+
+### GET /api/getTeamName
+Get team name by ID.
+
+**Query Parameters:**
+- `teamId`: Team ID to lookup
+
+## OBS Group/Scene Management
+
+### POST /api/createGroup
+Create OBS scene from team and store UUID.
+
+**Request Body:**
+```json
+{
+ "team_id": 1
+}
+```
+
+### POST /api/syncGroups
+Synchronize all teams with OBS groups. Updates database with current OBS scene information.
+
+### GET /api/verifyGroups
+Verify database groups exist in OBS with UUID tracking.
+
+**Response:**
+```json
+{
+ "success": true,
+ "data": {
+ "teams": [
+ {
+ "team_id": 1,
+ "team_name": "Team Alpha",
+ "group_name": "Team Alpha",
+ "group_uuid": "abc123",
+ "status": "linked", // linked, name_changed, not_found
+ "obs_name": "Team Alpha Modified" // if name changed in OBS
+ }
+ ],
+ "orphanedGroups": [
+ {
+ "sceneName": "Orphaned Scene",
+ "sceneUuid": "orphan123"
+ }
+ ]
+ }
+}
+```
+
+Features:
+- Detects orphaned groups (excludes system scenes)
+- Identifies name mismatches
+- Shows sync status for all teams
+
+## OBS Scene Control
+
+### POST /api/setScene
+Switch OBS to specified scene (1-Screen, 2-Screen, 4-Screen).
+
+**Request Body:**
+```json
+{
+ "scene": "2-Screen" // 1-Screen, 2-Screen, or 4-Screen
+}
+```
+
+### GET /api/getCurrentScene
+Get currently active OBS scene.
+
+**Response:**
+```json
+{
+ "success": true,
+ "data": {
+ "currentScene": "2-Screen"
+ }
+}
+```
+
+### POST /api/triggerTransition
+Trigger studio mode transition from preview to program (requires studio mode enabled).
+
+**Response:**
+```json
+{
+ "success": true,
+ "data": {
+ "programScene": "2-Screen",
+ "previewScene": "1-Screen"
+ },
+ "message": "Successfully transitioned preview to program"
+}
+```
+
+**Error Conditions:**
+- Studio mode not enabled (400 error)
+- OBS connection issues (500 error)
+
+## System Status
+
+### GET /api/obsStatus
+Real-time OBS connection, streaming, recording, and studio mode status.
+
+**Response:**
+```json
+{
+ "success": true,
+ "data": {
+ "connected": true,
+ "streaming": false,
+ "recording": true,
+ "studioMode": {
+ "enabled": true,
+ "previewScene": "1-Screen",
+ "programScene": "2-Screen"
+ }
+ }
+}
+```
+
+## Error Codes
+
+- **400**: Bad Request - Invalid parameters or studio mode not enabled
+- **401**: Unauthorized - Missing or invalid API key
+- **404**: Not Found - Resource doesn't exist
+- **500**: Internal Server Error - OBS connection issues or server errors
+
+## Rate Limiting
+
+Currently no rate limiting is implemented, but consider implementing it for production deployments to prevent abuse.
+
+## WebSocket Integration
+
+The application maintains a persistent WebSocket connection to OBS Studio for real-time communication. All API endpoints use this shared connection for optimal performance.
\ No newline at end of file
diff --git a/lib/apiClient.ts b/lib/apiClient.ts
index 5d386c7..41170b6 100644
--- a/lib/apiClient.ts
+++ b/lib/apiClient.ts
@@ -1,14 +1,13 @@
// API client utility for making authenticated requests
-// Get API key from environment (client-side will need to be provided differently)
+// Get API key from environment or localStorage
function getApiKey(): string | null {
if (typeof window === 'undefined') {
// Server-side
return process.env.API_KEY || null;
} else {
- // Client-side - for now, return null to bypass auth in development
- // In production, this would come from a secure storage or context
- return null;
+ // Client-side - get from localStorage
+ return localStorage.getItem('obs-api-key') || null;
}
}
diff --git a/lib/obsClient.js b/lib/obsClient.js
index 1232244..9910fb5 100644
--- a/lib/obsClient.js
+++ b/lib/obsClient.js
@@ -363,7 +363,7 @@ async function createTextSource(sceneName, textSourceName, text) {
}
}
-async function createStreamGroup(groupName, streamName, teamName, url) {
+async function createStreamGroup(groupName, streamName, teamName, url, lockSources = true) {
try {
const obsClient = await getOBSClient();
@@ -380,7 +380,7 @@ async function createStreamGroup(groupName, streamName, teamName, url) {
try {
await obsClient.call('CreateScene', { sceneName: streamGroupName });
console.log(`Created nested scene "${streamGroupName}" for stream grouping`);
- } catch (error) {
+ } catch {
console.log(`Nested scene "${streamGroupName}" might already exist`);
}
@@ -443,14 +443,48 @@ async function createStreamGroup(groupName, streamName, teamName, url) {
} catch (muteError) {
console.error(`Failed to mute browser source audio for "${sourceName}":`, muteError.message);
}
+
+ // Lock the newly created browser source if requested
+ if (lockSources) {
+ try {
+ // Get the scene items to find the browser source's ID
+ const { sceneItems } = await obsClient.call('GetSceneItemList', { sceneName: streamGroupName });
+ const browserItem = sceneItems.find(item => item.sourceName === sourceName);
+
+ if (browserItem) {
+ await obsClient.call('SetSceneItemLocked', {
+ sceneName: streamGroupName,
+ sceneItemId: browserItem.sceneItemId,
+ sceneItemLocked: true
+ });
+ console.log(`Locked browser source "${sourceName}" in nested scene`);
+ }
+ } catch (lockError) {
+ console.error(`Failed to lock browser source "${sourceName}":`, lockError.message);
+ }
+ }
} else {
// Add existing source to nested scene
- await obsClient.call('CreateSceneItem', {
+ const { sceneItemId } = await obsClient.call('CreateSceneItem', {
sceneName: streamGroupName,
sourceName: sourceName
});
console.log(`Added existing browser source "${sourceName}" to nested scene`);
+ // Lock the scene item if requested
+ if (lockSources) {
+ try {
+ await obsClient.call('SetSceneItemLocked', {
+ sceneName: streamGroupName,
+ sceneItemId: sceneItemId,
+ sceneItemLocked: true
+ });
+ console.log(`Locked browser source "${sourceName}" in nested scene`);
+ } catch (lockError) {
+ console.error(`Failed to lock browser source "${sourceName}":`, lockError.message);
+ }
+ }
+
// Ensure existing browser source has audio control enabled and correct URL
try {
await obsClient.call('SetInputSettings', {
@@ -482,22 +516,50 @@ async function createStreamGroup(groupName, streamName, teamName, url) {
const colorSourceName = `${textSourceName}_bg`;
try {
- await obsClient.call('CreateSceneItem', {
+ const { sceneItemId: colorItemId } = await obsClient.call('CreateSceneItem', {
sceneName: streamGroupName,
sourceName: colorSourceName
});
console.log(`Added color source background "${colorSourceName}" to nested scene`);
- } catch (error) {
+
+ // Lock the color source if requested
+ if (lockSources) {
+ try {
+ await obsClient.call('SetSceneItemLocked', {
+ sceneName: streamGroupName,
+ sceneItemId: colorItemId,
+ sceneItemLocked: true
+ });
+ console.log(`Locked color source background "${colorSourceName}"`);
+ } catch (lockError) {
+ console.error(`Failed to lock color source:`, lockError.message);
+ }
+ }
+ } catch {
console.log('Color source background might already be in nested scene');
}
try {
- await obsClient.call('CreateSceneItem', {
+ const { sceneItemId: textItemId } = await obsClient.call('CreateSceneItem', {
sceneName: streamGroupName,
sourceName: textSourceName
});
console.log(`Added text source "${textSourceName}" to nested scene`);
- } catch (error) {
+
+ // Lock the text source if requested
+ if (lockSources) {
+ try {
+ await obsClient.call('SetSceneItemLocked', {
+ sceneName: streamGroupName,
+ sceneItemId: textItemId,
+ sceneItemLocked: true
+ });
+ console.log(`Locked text source "${textSourceName}"`);
+ } catch (lockError) {
+ console.error(`Failed to lock text source:`, lockError.message);
+ }
+ }
+ } catch {
console.log('Text source might already be in nested scene');
}
diff --git a/middleware.ts b/middleware.ts
index 8361919..a20b5db 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -8,8 +8,8 @@ export function middleware(request: NextRequest) {
return NextResponse.next();
}
- // Check for API key in header
- const apiKey = request.headers.get('x-api-key');
+ // Check for API key in header or URL parameter
+ const apiKey = request.headers.get('x-api-key') || request.nextUrl.searchParams.get('apikey');
const validKey = process.env.API_KEY;
// If API_KEY is not set in environment, skip authentication (development mode)
diff --git a/styles/Home.module.css b/styles/Home.module.css
deleted file mode 100644
index c890880..0000000
--- a/styles/Home.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.linkButton {
- padding: 10px 20px;
- background: #0070f3;
- color: #fff;
- text-decoration: none;
- border-radius: 5px;
- display: inline-block;
- text-align: center;
- }
-
\ No newline at end of file