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

Reorganize footer layout by moving streaming status to left side
All checks were successful
Lint and Build / build (pull_request) Successful in 2m44s
Details

Browse source 
- Moved OFFLINE/IDLE streaming status from right to left column
- Left side now shows: Connection + Host/Port + Streaming/Recording status
- Right side now shows: Scene info + Team/Stream counts (less crowded)
- Better balance of information between the two columns
- Improves readability and visual hierarchy

Footer layout now:
Left: OBS Studio (connected) + 127.0.0.1:4455 + OFFLINE/IDLE status
Right: Scene info + Teams/Streams counts

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Decobus 2025-07-22 14:37:48 -04:00
parent 52f3051c82
commit 3a0c34e5a0
1 changed files with 15 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

26
components/Footer.tsx
View file

@ -95,6 +95,21 @@ export default function Footer() {
<div className="text-sm opacity-80">
<div>{obsStatus.host}:{obsStatus.port}</div>
{obsStatus.hasPassword && <div>🔒 Authenticated</div>}
{/* Streaming/Recording Status */}
{obsStatus.connected && (
<div className="flex gap-4 mt-4">
<div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
<div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
<span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
</div>
<div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
<div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
<span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
</div>
</div>
)}
</div>
)}
</div>
@ -149,17 +164,6 @@ export default function Footer() {
</>
)}
<div className="flex gap-4 mt-4">
<div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
<div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
<span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
</div>
<div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
<div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
<span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
</div>
</div>
</div>
)}
</div>