Improve UX: hide console window and fade connection status

- Hide console window on compiled desktop app (console=False in spec)
- Add 20-second auto-fade to "Connected" status in OBS display
- Keep "Disconnected" status visible until reconnection
- Add PM2 deployment configuration and documentation

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-12-26 17:04:28 -08:00
parent 64c864b0f0
commit 478146c58d
5 changed files with 627 additions and 1 deletions

View File

@@ -687,9 +687,11 @@ app.get('/display', (req, res) => {
background: rgba(0, 0, 0, 0.8);
border-radius: 5px;
font-size: 0.9em;
transition: opacity 2s ease-out;
}
#status.connected { color: #4CAF50; }
#status.disconnected { color: #f44336; }
#status.hidden { opacity: 0; pointer-events: none; }
@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
@@ -761,6 +763,8 @@ app.get('/display', (req, res) => {
}
}
let statusHideTimeout = null;
function connect() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const ws = new WebSocket(\`\${protocol}//\${window.location.host}/ws?room=\${encodeURIComponent(room)}\`);
@@ -768,6 +772,16 @@ app.get('/display', (req, res) => {
ws.onopen = () => {
statusEl.textContent = '🟢 Connected';
statusEl.className = 'connected';
// Clear any existing timeout
if (statusHideTimeout) {
clearTimeout(statusHideTimeout);
}
// Fade out after 20 seconds
statusHideTimeout = setTimeout(() => {
statusEl.classList.add('hidden');
}, 20000);
};
ws.onmessage = (event) => {
@@ -780,6 +794,12 @@ app.get('/display', (req, res) => {
};
ws.onclose = () => {
// Clear hide timeout on disconnect
if (statusHideTimeout) {
clearTimeout(statusHideTimeout);
statusHideTimeout = null;
}
statusEl.textContent = '🔴 Disconnected';
statusEl.className = 'disconnected';
setTimeout(connect, 3000);