deco/obs-ss-plugin-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Auto-generate OBS source names and improve stream list UI

Browse source 
- Remove manual OBS source name input from Add Stream form
- Auto-generate OBS source names using pattern: streamName_twitch
- Update security validation to exclude obs_source_name requirement
- Increase stream avatar size from 32px to 64px for better visibility
- Fix spacing issues between UI elements using explicit margins

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Decobus 2025-07-20 16:11:11 -04:00
parent 319bada9b7
commit ece75cf2df
3 changed files with 24 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/api/addStream/route.ts
View file

@ -63,8 +63,13 @@ async function fetchTeamInfo(teamId: number) {
import { validateStreamInput } from '../../../lib/security';
// Generate OBS source name from stream name
function generateOBSSourceName(streamName: string): string {
return streamName.toLowerCase().replace(/\s+/g, '_') + '_twitch';
}
export async function POST(request: NextRequest) {
let name: string, obs_source_name: string, url: string, team_id: number;
let name: string, url: string, team_id: number, obs_source_name: string;
// Parse and validate request body
try {
@ -78,7 +83,10 @@ export async function POST(request: NextRequest) {
}, { status: 400 });
}
({ name, obs_source_name, url, team_id } = validation.data!);
({ name, url, team_id } = validation.data!);
// Auto-generate OBS source name from stream name
obs_source_name = generateOBSSourceName(name);
} catch {
return NextResponse.json({ error: 'Invalid JSON in request body' }, { status: 400 });

45
app/streams/page.tsx
View file

@ -17,7 +17,6 @@ interface Stream {
export default function AddStream() {
const [formData, setFormData] = useState({
name: '',
obs_source_name: '',
twitch_username: '',
team_id: null,
});
@ -125,9 +124,6 @@ export default function AddStream() {
errors.name = 'Stream name must be at least 2 characters';
}
if (!formData.obs_source_name.trim()) {
errors.obs_source_name = 'OBS source name is required';
}
if (!formData.twitch_username.trim()) {
errors.twitch_username = 'Twitch username is required';
@ -162,7 +158,7 @@ export default function AddStream() {
const data = await response.json();
if (response.ok) {
showSuccess('Stream Added', `"${formData.name}" has been added successfully`);
setFormData({ name: '', obs_source_name: '', twitch_username: '', team_id: null });
setFormData({ name: '', twitch_username: '', team_id: null });
setValidationErrors({});
fetchData();
} else {
@ -214,28 +210,6 @@ export default function AddStream() {
)}
</div>
{/* OBS Source Name */}
<div>
<label className="block text-white font-semibold mb-3">
OBS Source Name
</label>
<input
type="text"
name="obs_source_name"
value={formData.obs_source_name}
onChange={handleInputChange}
required
className={`input ${
validationErrors.obs_source_name ? 'border-red-500/60 bg-red-500/10' : ''
}`}
placeholder="Enter the exact source name from OBS"
/>
{validationErrors.obs_source_name && (
<div className="text-red-400 text-sm mt-2">
{validationErrors.obs_source_name}
</div>
)}
</div>
{/* Twitch Username */}
<div>
@ -317,11 +291,19 @@ export default function AddStream() {
return (
<div key={stream.id} className="glass p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-gradient-to-br from-green-500 to-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-sm">
<div className="flex items-center">
<div
className="bg-gradient-to-br from-green-500 to-blue-600 rounded-lg flex items-center justify-center text-white font-bold flex-shrink-0"
style={{
width: '64px',
height: '64px',
fontSize: '24px',
marginRight: '16px'
}}
>
{stream.name.charAt(0).toUpperCase()}
</div>
<div>
<div className="min-w-0 flex-1">
<div className="font-semibold text-white">{stream.name}</div>
<div className="text-sm text-white/60">OBS: {stream.obs_source_name}</div>
<div className="text-sm text-white/60">Team: {team?.name || 'Unknown'}</div>
@ -329,12 +311,13 @@ export default function AddStream() {
</div>
<div className="text-right space-y-2">
<div className="text-sm text-white/40">ID: {stream.id}</div>
<div className="flex gap-2 justify-end">
<div className="flex justify-end">
<a
href={stream.url}
target="_blank"
rel="noopener noreferrer"
className="btn btn-primary text-sm"
style={{ marginRight: '8px' }}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />

7
lib/security.ts
View file

@ -38,7 +38,6 @@ export function sanitizeString(input: string, maxLength: number = 100): string {
// Validation schemas
export interface StreamInput {
name: string;
obs_source_name: string;
url: string;
team_id: number;
}
@ -58,11 +57,6 @@ export function validateStreamInput(input: unknown): { valid: boolean; errors: s
errors.push('Name must be 100 characters or less');
}
if (!data.obs_source_name || typeof data.obs_source_name !== 'string') {
errors.push('OBS source name is required and must be a string');
} else if (data.obs_source_name.length > 100) {
errors.push('OBS source name must be 100 characters or less');
}
if (!data.url || typeof data.url !== 'string') {
errors.push('URL is required and must be a string');
@ -83,7 +77,6 @@ export function validateStreamInput(input: unknown): { valid: boolean; errors: s
errors: [],
data: {
name: sanitizeString(data.name as string),
obs_source_name: sanitizeString(data.obs_source_name as string),
url: data.url as string,
team_id: data.team_id as number,
},