streamer-tools/local-transcription
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance display customization and remove PHP server

Browse Source 
Major improvements to display configuration and server architecture:

**Display Enhancements:**
- Add URL parameters for display customization (timestamps, maxlines, fontsize, fontfamily)
- Fix max lines enforcement to prevent scroll bars in OBS
- Apply font family and size settings to both local and sync displays
- Remove auto-scroll, enforce overflow:hidden for clean OBS integration

**Node.js Server:**
- Add timestamps toggle: timestamps=true/false
- Add max lines limit: maxlines=50
- Add font configuration: fontsize=16, fontfamily=Arial
- Update index page with URL parameters documentation
- Improve display URLs in room generation

**Local Web Server:**
- Add max_lines, font_family, font_size configuration
- Respect settings from GUI configuration
- Apply changes immediately without restart

**Architecture:**
- Remove PHP server implementation (Node.js recommended)
- Update all documentation to reference Node.js server
- Update default config URLs to Node.js endpoints
- Clean up 1700+ lines of PHP code

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jknapp
2025-12-27 06:15:55 -08:00
parent e831dadd24
commit 146a8c8beb
16 changed files with 76 additions and 1719 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
server/nodejs/server.js
View File

@@ -411,6 +411,19 @@ app.get('/', (req, res) => {
<p style="margin-top: 15px; font-size: 0.9em; color: #666;">
Add a Browser source in OBS and paste this URL. Set width to 1920 and height to 200-400px.
</p>
<details style="margin-top: 15px;">
<summary style="cursor: pointer; font-weight: bold; color: #667eea;">⚙️ URL Parameters (Optional)</summary>
<ul style="margin-top: 10px; font-size: 0.9em; color: #666;">
<li><code>fade=10</code> - Seconds before text fades (0 = never fade)</li>
<li><code>timestamps=true</code> - Show/hide timestamps (true/false)</li>
<li><code>maxlines=50</code> - Max lines visible at once (prevents scroll bars)</li>
<li><code>fontsize=16</code> - Font size in pixels</li>
<li><code>fontfamily=Arial</code> - Font family (Arial, Courier, etc.)</li>
</ul>
<p style="font-size: 0.85em; color: #888; margin-top: 10px;">
Example: <code>?room=myroom&fade=15&timestamps=false&maxlines=30&fontsize=18</code>
</p>
</details>
</div>
</div>
</div>
@@ -528,7 +541,7 @@ app.get('/', (req, res) => {
// Build URLs
const serverUrl = \`http://\${window.location.host}/api/send\`;
const displayUrl = \`http://\${window.location.host}/display?room=\${encodeURIComponent(room)}&fade=10&timestamps=true\`;
const displayUrl = \`http://\${window.location.host}/display?room=\${encodeURIComponent(room)}&fade=10&timestamps=true&maxlines=50&fontsize=16&fontfamily=Arial\`;
// Update UI
document.getElementById('serverUrl').textContent = serverUrl;
@@ -636,7 +649,7 @@ app.get('/api/list', async (req, res) => {
// Serve display page
app.get('/display', (req, res) => {
const { room = 'default', fade = '10', timestamps = 'true' } = req.query;
const { room = 'default', fade = '10', timestamps = 'true', maxlines = '50', fontsize = '16', fontfamily = 'Arial' } = req.query;
res.send(`
<!DOCTYPE html>
@@ -649,12 +662,13 @@ app.get('/display', (req, res) => {
margin: 0;
padding: 20px;
background: transparent;
font-family: Arial, sans-serif;
font-family: ${fontfamily}, sans-serif;
font-size: ${fontsize}px;
color: white;
overflow: hidden;
}
#transcriptions {
max-height: 100vh;
overflow-y: auto;
overflow: hidden;
}
.transcription {
margin: 10px 0;
@@ -705,7 +719,8 @@ app.get('/display', (req, res) => {
<script>
const room = "${room}";
const fadeAfter = ${fade};
const showTimestamps = ${timestamps};
const showTimestamps = ${timestamps === 'true' || timestamps === '1'};
const maxLines = ${maxlines};
const container = document.getElementById('transcriptions');
const statusEl = document.getElementById('status');
const userColors = new Map();
@@ -737,7 +752,6 @@ app.get('/display', (req, res) => {
div.innerHTML = html;
container.appendChild(div);
container.scrollTop = container.scrollHeight;
if (fadeAfter > 0) {
setTimeout(() => {
@@ -746,7 +760,8 @@ app.get('/display', (req, res) => {
}, fadeAfter * 1000);
}
while (container.children.length > 100) {
// Enforce max lines limit
while (container.children.length > maxLines) {
container.removeChild(container.firstChild);
}
}