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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user