SIGNAL OUTPUT
+
+
+
+
-
- Recording
-
- 00:00:00
-
-
-
-
-
-
+
+ Program Bus
-
-
+
+
+
-
-
-
+
+
+
+ REC
+ 00:00:00
+
+
+
+
+
+
+
-
- Icecast Streaming
- Not Streaming
-
-
-
-
-
-
+
+
+
+
-
+ TRANSMIT
+ Not Streaming
+
- }
@@ -125,6 +124,12 @@ class OpenStudioApp {
this.volumeMeter = new VolumeMeter(canvasElement, analyser);
console.log('[App] Volume meter initialized');
+ // Initialize waveform display
+ const waveformCanvas = document.getElementById('waveform-display');
+ if (waveformCanvas) {
+ this.waveformMeter = new VolumeMeter(waveformCanvas, analyser, { mode: 'waveform' });
+ }
+
// Expose volume meter and mute manager for debugging (localhost only)
if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
window.volumeMeter = this.volumeMeter;
@@ -151,6 +156,21 @@ class OpenStudioApp {
}
}
+ /**
+ * Setup collapsible deck panel behavior
+ */
+ setupDeckPanels() {
+ document.querySelectorAll('.deck-header').forEach(header => {
+ // Start collapsed
+ header.closest('.deck-panel').classList.add('collapsed');
+
+ header.addEventListener('click', () => {
+ const panel = header.closest('.deck-panel');
+ panel.classList.toggle('collapsed');
+ });
+ });
+ }
+
/**
* Setup signaling event listeners
*/
@@ -200,10 +220,12 @@ class OpenStudioApp {
this.startRecordingButton.disabled = false;
// Add self to participants with role from server
- const displayName = this.currentRole === 'host' ? 'Host (You)' :
- this.currentRole === 'ops' ? 'Ops (You)' : 'You';
+ const displayName = this.getRoleDisplayName(this.currentRole, true);
this.addParticipant(this.peerId, displayName, this.currentRole);
+ // Update session info
+ this.updateSessionInfo();
+
// Get local media stream
try {
await this.rtc.getLocalStream();
@@ -243,17 +265,18 @@ class OpenStudioApp {
// Add existing participants
participants.forEach(p => {
if (p.peerId !== this.peerId) {
- const displayName = p.role === 'host' ? 'Host' :
- p.role === 'ops' ? 'Ops' : 'Guest';
+ const displayName = this.getRoleDisplayName(p.role, false);
this.addParticipant(p.peerId, displayName, p.role);
}
});
// Add self with role from server
- const displayName = this.currentRole === 'host' ? 'Host (You)' :
- this.currentRole === 'ops' ? 'Ops (You)' : 'You';
+ const displayName = this.getRoleDisplayName(this.currentRole, true);
this.addParticipant(this.peerId, displayName, this.currentRole);
+ // Update session info
+ this.updateSessionInfo();
+
// Get local media stream
try {
await this.rtc.getLocalStream();
@@ -277,8 +300,7 @@ class OpenStudioApp {
const { peerId, role } = event.detail;
console.log(`[App] Peer joined: ${peerId} (${role})`);
- const displayName = role === 'host' ? 'Host' :
- role === 'ops' ? 'Ops' : 'Guest';
+ const displayName = this.getRoleDisplayName(role, false);
this.addParticipant(peerId, displayName, role);
// ConnectionManager automatically handles connection initiation via peer-joined event
});
@@ -337,6 +359,30 @@ class OpenStudioApp {
});
}
+ /**
+ * Get role display name for Signal design
+ * @param {string} role - 'host', 'ops', or 'guest'
+ * @param {boolean} isSelf - Whether this is the local user
+ * @returns {string}
+ */
+ getRoleDisplayName(role, isSelf) {
+ const suffix = isSelf ? ' (You)' : '';
+ switch (role) {
+ case 'host': return `Host${suffix}`;
+ case 'ops': return `Engineer${suffix}`;
+ default: return isSelf ? 'You' : 'Caller';
+ }
+ }
+
+ /**
+ * Update session info display
+ */
+ updateSessionInfo() {
+ if (this.sessionInfoElement && this.currentRoom) {
+ this.sessionInfoElement.textContent = this.currentRoom.substring(0, 8);
+ }
+ }
+
/**
* Setup MuteManager event listeners
*/
@@ -364,7 +410,7 @@ class OpenStudioApp {
console.log(`[App] Streaming status: ${status} - ${message}`);
// Update streaming status UI
- this.streamingStatusElement.textContent = message;
+ this.streamingStatusElement.textContent = status === 'streaming' ? 'TRANSMITTING' : message;
this.streamingStatusElement.className = `streaming-status ${status}`;
// Update button states based on status
@@ -425,6 +471,13 @@ class OpenStudioApp {
this.stopRecordingButton.disabled = false;
this.downloadRecordingsButton.style.display = 'none';
this.recordingTracksDiv.style.display = 'none';
+
+ // Add recording class to record button for dot indicator
+ this.startRecordingButton.classList.add('recording');
+
+ // Expand recording deck panel
+ const recPanel = document.getElementById('recording-section');
+ if (recPanel) recPanel.classList.remove('collapsed');
});
this.recordingManager.addEventListener('recording-stopped', () => {
@@ -432,6 +485,7 @@ class OpenStudioApp {
this.recordingTimer.classList.remove('active');
this.stopRecordingButton.style.display = 'none';
this.startRecordingButton.style.display = 'inline-block';
+ this.startRecordingButton.classList.remove('recording');
if (this.currentRoom) {
this.startRecordingButton.disabled = false;
}
@@ -576,9 +630,6 @@ class OpenStudioApp {
});
}
- /**
- * Try to send pending return feed for a peer if connection is ready
- */
/**
* Send pending return feed for a peer if the RTCPeerConnection is connected.
* @param {string} remotePeerId
@@ -727,6 +778,15 @@ class OpenStudioApp {
console.log('[App] Volume meter started');
}
+ // Start waveform display
+ if (this.waveformMeter) {
+ this.waveformMeter.start();
+ console.log('[App] Waveform display started');
+ }
+
+ // Add broadcasting class to body
+ document.body.classList.add('broadcasting');
+
// Use create-or-join-room logic
if (this.roomIdFromUrl) {
// Room ID in URL - create or join it with role from URL (or invite token)
@@ -748,6 +808,9 @@ class OpenStudioApp {
if (roomId) {
console.log(`[App] Joining room: ${roomId} as guest`);
this.signaling.createOrJoinRoom(roomId, 'guest');
+ } else {
+ // User cancelled — remove broadcasting class
+ document.body.classList.remove('broadcasting');
}
}
}
@@ -759,6 +822,9 @@ class OpenStudioApp {
handleEndSession() {
console.log('[App] Ending session...');
+ // Remove broadcasting class
+ document.body.classList.remove('broadcasting');
+
// Stop recording if active
if (this.recordingManager.isRecording) {
this.recordingManager.stopAll();
@@ -776,6 +842,21 @@ class OpenStudioApp {
console.log('[App] Volume meter stopped');
}
+ // Stop waveform display
+ if (this.waveformMeter) {
+ this.waveformMeter.stop();
+ }
+
+ // Disconnect local mic from program bus
+ if (this._localAudioNodes) {
+ try {
+ this._localAudioNodes.compressor.disconnect();
+ this._localAudioNodes.analyser.disconnect();
+ this._localAudioNodes.source.disconnect();
+ } catch (e) { /* already disconnected */ }
+ this._localAudioNodes = null;
+ }
+
// Clear audio graph
this.audioGraph.clearAll();
@@ -810,6 +891,8 @@ class OpenStudioApp {
this.startSessionButton.disabled = false;
this.endSessionButton.disabled = true;
this.toggleMuteButton.disabled = true;
+ this.toggleMuteButton.classList.remove('muted');
+ this.toggleMuteButton.textContent = 'Mute';
this.startStreamingButton.disabled = true;
this.stopStreamingButton.disabled = true;
this.startStreamingButton.style.display = 'inline-block';
@@ -817,6 +900,7 @@ class OpenStudioApp {
this.streamingStatusElement.textContent = 'Not Streaming';
this.streamingStatusElement.className = 'streaming-status';
this.startRecordingButton.disabled = true;
+ this.startRecordingButton.classList.remove('recording');
this.stopRecordingButton.disabled = true;
this.startRecordingButton.style.display = 'inline-block';
this.stopRecordingButton.style.display = 'none';
@@ -826,6 +910,7 @@ class OpenStudioApp {
this.recordingTimer.textContent = '00:00:00';
this.recordingTracksDiv.style.display = 'none';
this.lastRecordings = null;
+ if (this.sessionInfoElement) this.sessionInfoElement.textContent = '';
window.location.hash = '';
this.startSessionButton.textContent = 'Start Broadcast';
this.endSessionButton.textContent = 'End Broadcast';
@@ -851,9 +936,11 @@ class OpenStudioApp {
if (audioTrack.enabled) {
this.toggleMuteButton.textContent = 'Mute';
+ this.toggleMuteButton.classList.remove('muted');
console.log('[App] Unmuted microphone');
} else {
this.toggleMuteButton.textContent = 'Unmute';
+ this.toggleMuteButton.classList.add('muted');
console.log('[App] Muted microphone');
}
}
@@ -1112,20 +1199,22 @@ class OpenStudioApp {
// Update button text and class based on mute state
muteButton.classList.remove('self-muted', 'producer-muted');
+ card.classList.remove('is-muted');
if (muteState.muted) {
+ card.classList.add('is-muted');
if (muteState.authority === 'producer') {
- muteButton.textContent = '🔇 Muted (Host)';
+ muteButton.textContent = 'MUTED (HOST)';
muteButton.classList.add('producer-muted');
} else {
- muteButton.textContent = '🔇 Muted';
+ muteButton.textContent = 'MUTED';
muteButton.classList.add('self-muted');
}
if (gainSlider) {
gainSlider.disabled = true;
}
} else {
- muteButton.textContent = '🔊 Unmuted';
+ muteButton.textContent = 'UNMUTED';
if (gainSlider) {
gainSlider.disabled = false;
}
@@ -1137,9 +1226,6 @@ class OpenStudioApp {
}
}
- /**
- * Handle gain slider change
- */
/**
* Handle gain slider change with smooth AudioParam ramping.
* @param {string} peerId - Participant whose gain to adjust
@@ -1198,9 +1284,6 @@ class OpenStudioApp {
this.statusElement.textContent = text;
}
- /**
- * Add participant to UI
- */
/**
* Add participant to UI with avatar, role badge, level meter, and controls.
* @param {string} peerId - Unique peer identifier
@@ -1233,13 +1316,14 @@ class OpenStudioApp {
const roleEl = document.createElement('div');
roleEl.className = `participant-role role-${role}`;
- roleEl.textContent = role.charAt(0).toUpperCase() + role.slice(1);
+ roleEl.textContent = role === 'host' ? 'HOST' :
+ role === 'ops' ? 'ENGINEER' : 'CALLER';
// Per-participant level meter
const levelMeterCanvas = document.createElement('canvas');
levelMeterCanvas.className = 'participant-level-meter';
- levelMeterCanvas.width = 150;
- levelMeterCanvas.height = 20;
+ levelMeterCanvas.width = 200;
+ levelMeterCanvas.height = 4;
levelMeterCanvas.dataset.peerId = peerId; // For debugging
// Gain controls (only for remote participants, not self)
@@ -1251,7 +1335,7 @@ class OpenStudioApp {
// Mute button
const muteButton = document.createElement('button');
muteButton.className = 'mute-button';
- muteButton.textContent = '🔊 Unmuted';
+ muteButton.textContent = 'UNMUTED';
muteButton.addEventListener('click', () => this.handleParticipantMute(peerId));
// Gain control container
@@ -1289,7 +1373,7 @@ class OpenStudioApp {
// Mute button for self-mute
const muteButton = document.createElement('button');
muteButton.className = 'mute-button';
- muteButton.textContent = '🔊 Unmuted';
+ muteButton.textContent = 'UNMUTED';
muteButton.addEventListener('click', () => this.handleParticipantMute(peerId));
controlsEl.appendChild(muteButton);
@@ -1303,7 +1387,7 @@ class OpenStudioApp {
const statusEl = document.createElement('div');
statusEl.className = 'participant-status';
- statusEl.innerHTML = '🎙️Ready';
+ statusEl.innerHTML = '●Ready';
card.appendChild(statusEl);
@@ -1311,10 +1395,7 @@ class OpenStudioApp {
}
/**
- * Remove participant from UI
- */
- /**
- * Remove participant from UI and clean up level meter.
+ * Remove participant from UI with exit animation.
* @param {string} peerId
*/
removeParticipant(peerId) {
@@ -1330,13 +1411,12 @@ class OpenStudioApp {
const card = this.participantsSection.querySelector(`[data-peer-id="${peerId}"]`);
if (card) {
- card.remove();
+ // Animate exit
+ card.classList.add('leaving');
+ setTimeout(() => card.remove(), 400);
}
}
- /**
- * Create per-participant level meter
- */
/**
* Create per-participant level meter using AudioGraph's AnalyserNode.
* @param {string} peerId - Remote participant to create meter for
@@ -1363,8 +1443,16 @@ class OpenStudioApp {
}
try {
- // Create and start the volume meter
- const volumeMeter = new VolumeMeter(canvas, analyser);
+ // Create and start the volume meter with speaking detection callback
+ const volumeMeter = new VolumeMeter(canvas, analyser, {
+ onSpeaking: (speaking) => {
+ if (speaking) {
+ card.classList.add('speaking');
+ clearTimeout(card._speakingTimeout);
+ card._speakingTimeout = setTimeout(() => card.classList.remove('speaking'), 300);
+ }
+ }
+ });
volumeMeter.start();
this.participantMeters.set(peerId, volumeMeter);
console.log(`[App] Created level meter for ${peerId}`);
@@ -1409,20 +1497,38 @@ class OpenStudioApp {
analyser.fftSize = 256;
analyser.smoothingTimeConstant = 0.3;
- // Create ultra-low-gain node for Safari compatibility
- // Safari requires MediaStreamSources to be connected to destination
- // AND suspends AudioContext when gain = 0, so use 0.001 instead
- const ultraLowGain = audioContext.createGain();
- ultraLowGain.gain.value = 0.001; // Nearly silent - prevents Safari suspension
-
- // Connect: source → analyser → ultraLowGain → destination
- // This keeps Safari's AudioContext active while being inaudible
+ // Connect source → analyser for level metering
source.connect(analyser);
- analyser.connect(ultraLowGain);
- ultraLowGain.connect(audioContext.destination);
- // Create and start the volume meter
- const volumeMeter = new VolumeMeter(canvas, analyser);
+ // Route local mic into program bus so Signal Output shows the full broadcast mix.
+ // Use a compressor matching remote participant chain for consistent levels.
+ const compressor = audioContext.createDynamicsCompressor();
+ compressor.threshold.value = -24;
+ compressor.knee.value = 30;
+ compressor.ratio.value = 12;
+ compressor.attack.value = 0.003;
+ compressor.release.value = 0.25;
+ analyser.connect(compressor);
+
+ const programBus = this.audioGraph.getProgramBus();
+ if (programBus) {
+ programBus.connectParticipant(compressor, this.peerId);
+ console.log('[App] Local mic connected to program bus');
+ }
+
+ // Store compressor ref for cleanup
+ this._localAudioNodes = { source, analyser, compressor };
+
+ // Create and start the volume meter with speaking detection
+ const volumeMeter = new VolumeMeter(canvas, analyser, {
+ onSpeaking: (speaking) => {
+ if (speaking) {
+ card.classList.add('speaking');
+ clearTimeout(card._speakingTimeout);
+ card._speakingTimeout = setTimeout(() => card.classList.remove('speaking'), 300);
+ }
+ }
+ });
volumeMeter.start();
this.participantMeters.set(this.peerId, volumeMeter);
console.log('[App] Created level meter for local participant (self)');
diff --git a/web/js/volume-meter.js b/web/js/volume-meter.js
index c197329..cad6f97 100644
--- a/web/js/volume-meter.js
+++ b/web/js/volume-meter.js
@@ -2,12 +2,17 @@
* volume-meter.js
* Real-time volume meter visualization for OpenStudio
*
- * Displays audio levels from an AnalyserNode using canvas-based rendering.
- * Color-coded levels: green (safe), yellow (warning), red (clipping).
+ * Two modes:
+ * - 'meter' (default): Segmented LED bar meter with amber/red color ramp
+ * - 'waveform': Oscilloscope-style time-domain waveform display
+ *
+ * Options:
+ * - mode: 'meter' | 'waveform'
+ * - onSpeaking: callback(isSpeaking) for speaking detection
*/
export class VolumeMeter {
- constructor(canvasElement, analyserNode) {
+ constructor(canvasElement, analyserNode, options = {}) {
this.canvas = canvasElement;
this.analyser = analyserNode;
this.ctx = null;
@@ -16,14 +21,38 @@ export class VolumeMeter {
this.bufferLength = 0;
this.isRunning = false;
+ // Mode
+ this.mode = options.mode || 'meter';
+
+ // Speaking detection callback
+ this.onSpeaking = options.onSpeaking || null;
+ this.speakingThreshold = 0.05;
+
// Peak hold
this.peakLevel = 0;
this.peakHoldTime = 0;
- this.peakHoldDuration = 30; // frames
-
- // Level thresholds (0.0 to 1.0)
- this.warningThreshold = 0.7; // Yellow above this
- this.dangerThreshold = 0.9; // Red above this
+ this.peakHoldDuration = 45; // frames (~1.5s at 30fps effective)
+
+ // Smoothing for meter
+ this.smoothedLevel = 0;
+ this.smoothingFactor = 0.3;
+
+ // Colors from Signal design system
+ this.colors = {
+ void: '#0a0a0f',
+ surface: '#12121a',
+ amber: '#d4a053',
+ red: '#e23636',
+ hot: '#ff4444',
+ ghostSeg: 'rgba(255,255,255,0.03)',
+ peakWhite: '#f0e8d8',
+ waveAmber: '#d4a053',
+ waveRed: '#e23636',
+ zeroline: '#3a3630',
+ };
+
+ // Broadcasting state (for waveform color)
+ this.isBroadcasting = false;
this.initialize();
}
@@ -43,11 +72,42 @@ export class VolumeMeter {
// Get 2D context
this.ctx = this.canvas.getContext('2d');
+ // Set fallback display dimensions from canvas attributes
+ // (HiDPI setup deferred to start() when CSS layout is stable)
+ this.displayWidth = this.canvas.width;
+ this.displayHeight = this.canvas.height;
+
// Set up data array for analyser
this.bufferLength = this.analyser.frequencyBinCount;
this.dataArray = new Uint8Array(this.bufferLength);
- console.log('[VolumeMeter] Initialized with buffer length:', this.bufferLength);
+ // Time domain data for waveform
+ if (this.mode === 'waveform') {
+ this.timeDomainData = new Uint8Array(this.bufferLength);
+ }
+
+ console.log(`[VolumeMeter] Initialized (${this.mode}) with buffer length:`, this.bufferLength);
+ }
+
+ /**
+ * Handle high-DPI canvas scaling
+ */
+ setupHiDPI() {
+ const dpr = window.devicePixelRatio || 1;
+ const rect = this.canvas.getBoundingClientRect();
+
+ // Only scale if we have a valid rect (element is in DOM)
+ if (rect.width > 0) {
+ this.canvas.width = rect.width * dpr;
+ this.canvas.height = rect.height * dpr;
+ this.ctx.scale(dpr, dpr);
+ this.displayWidth = rect.width;
+ this.displayHeight = rect.height;
+ } else {
+ // Fallback to canvas attributes
+ this.displayWidth = this.canvas.width;
+ this.displayHeight = this.canvas.height;
+ }
}
/**
@@ -60,6 +120,13 @@ export class VolumeMeter {
}
this.isRunning = true;
+
+ // Re-setup HiDPI in case canvas was resized
+ this.setupHiDPI();
+
+ // Check broadcasting state
+ this.isBroadcasting = document.body.classList.contains('broadcasting');
+
console.log('[VolumeMeter] Starting animation loop');
this.draw();
}
@@ -80,7 +147,7 @@ export class VolumeMeter {
}
// Clear canvas
- this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this.ctx.clearRect(0, 0, this.displayWidth, this.displayHeight);
console.log('[VolumeMeter] Stopped');
}
@@ -96,25 +163,11 @@ export class VolumeMeter {
// Schedule next frame
this.animationId = requestAnimationFrame(() => this.draw());
- // Get time domain data from analyser
- this.analyser.getByteTimeDomainData(this.dataArray);
-
- // Calculate RMS level
- const rms = this.calculateRMS(this.dataArray);
- const level = rms / 128.0; // Normalize to 0.0 - 1.0
-
- // Update peak hold
- if (level > this.peakLevel) {
- this.peakLevel = level;
- this.peakHoldTime = this.peakHoldDuration;
- } else if (this.peakHoldTime > 0) {
- this.peakHoldTime--;
+ if (this.mode === 'waveform') {
+ this.drawWaveform();
} else {
- this.peakLevel = Math.max(0, this.peakLevel - 0.01); // Decay
+ this.drawSegmentedMeter();
}
-
- // Draw the meter
- this.drawMeter(level, this.peakLevel);
}
/**
@@ -125,67 +178,182 @@ export class VolumeMeter {
calculateRMS(data) {
let sum = 0;
for (let i = 0; i < data.length; i++) {
- const normalized = (data[i] - 128) / 128.0; // Convert to -1.0 to 1.0
+ const normalized = (data[i] - 128) / 128.0;
sum += normalized * normalized;
}
const rms = Math.sqrt(sum / data.length);
- return rms * 128; // Scale back to 0-128 range
+ return rms * 128;
}
/**
- * Draw the volume meter on canvas
- * @param {number} level - Current level (0.0 to 1.0)
- * @param {number} peak - Peak level (0.0 to 1.0)
+ * Draw segmented LED meter
*/
- drawMeter(level, peak) {
- const width = this.canvas.width;
- const height = this.canvas.height;
+ drawSegmentedMeter() {
+ const width = this.displayWidth;
+ const height = this.displayHeight;
- // Clear canvas
- this.ctx.fillStyle = '#1a1a1a';
- this.ctx.fillRect(0, 0, width, height);
+ // Get time domain data from analyser
+ this.analyser.getByteTimeDomainData(this.dataArray);
+
+ // Calculate RMS level
+ const rms = this.calculateRMS(this.dataArray);
+ const rawLevel = rms / 128.0;
+
+ // Smooth the level
+ this.smoothedLevel += (rawLevel - this.smoothedLevel) * this.smoothingFactor;
+ const level = this.smoothedLevel;
- // Calculate bar width
- const barWidth = width * level;
- const peakX = width * peak;
+ // Speaking detection
+ if (this.onSpeaking && level > this.speakingThreshold) {
+ this.onSpeaking(true);
+ }
- // Determine color based on level
- let color;
- if (level >= this.dangerThreshold) {
- color = '#ef4444'; // Red (danger)
- } else if (level >= this.warningThreshold) {
- color = '#f59e0b'; // Yellow (warning)
+ // Update peak hold
+ if (level > this.peakLevel) {
+ this.peakLevel = level;
+ this.peakHoldTime = this.peakHoldDuration;
+ } else if (this.peakHoldTime > 0) {
+ this.peakHoldTime--;
} else {
- color = '#10b981'; // Green (safe)
+ this.peakLevel = Math.max(0, this.peakLevel - 0.008);
}
- // Draw main level bar
- this.ctx.fillStyle = color;
- this.ctx.fillRect(0, 0, barWidth, height);
+ // Determine segment count based on canvas width
+ const isSmall = width < 100;
+ const segmentCount = isSmall ? 16 : 32;
+ const segmentGap = 2;
+ const segmentRadius = 1;
+ const segmentWidth = (width - (segmentCount - 1) * segmentGap) / segmentCount;
+
+ // Clear canvas
+ this.ctx.fillStyle = this.colors.void;
+ this.ctx.fillRect(0, 0, width, height);
- // Draw peak indicator (thin line)
- if (peak > 0) {
- this.ctx.fillStyle = '#ffffff';
- this.ctx.fillRect(peakX - 2, 0, 4, height);
+ // Draw segments
+ const litSegments = Math.floor(level * segmentCount);
+ const peakSegment = Math.floor(this.peakLevel * segmentCount);
+
+ for (let i = 0; i < segmentCount; i++) {
+ const x = i * (segmentWidth + segmentGap);
+ const segmentPosition = i / segmentCount;
+
+ // Determine segment color
+ let color;
+ if (i < litSegments) {
+ if (segmentPosition >= 0.8) {
+ color = this.colors.red;
+ } else if (segmentPosition >= 0.6) {
+ // Transition from amber to red
+ const t = (segmentPosition - 0.6) / 0.2;
+ color = this.lerpColor(this.colors.amber, this.colors.red, t);
+ } else {
+ color = this.colors.amber;
+ }
+ } else if (i === peakSegment && this.peakLevel > 0) {
+ color = this.colors.peakWhite;
+ } else {
+ color = this.colors.ghostSeg;
+ }
+
+ this.ctx.fillStyle = color;
+ this.roundRect(x, 0, segmentWidth, height, segmentRadius);
}
+ }
- // Draw threshold markers (subtle lines)
- this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
- this.ctx.lineWidth = 1;
+ /**
+ * Draw waveform oscilloscope
+ */
+ drawWaveform() {
+ const width = this.displayWidth;
+ const height = this.displayHeight;
+
+ // Check broadcasting state periodically
+ this.isBroadcasting = document.body.classList.contains('broadcasting');
+
+ // Get time domain data
+ this.analyser.getByteTimeDomainData(this.dataArray);
+
+ // Clear canvas
+ this.ctx.fillStyle = this.colors.void;
+ this.ctx.fillRect(0, 0, width, height);
- // Warning threshold
- const warningX = width * this.warningThreshold;
+ // Draw center zero-crossing line
+ this.ctx.strokeStyle = this.colors.zeroline;
+ this.ctx.lineWidth = 1;
this.ctx.beginPath();
- this.ctx.moveTo(warningX, 0);
- this.ctx.lineTo(warningX, height);
+ this.ctx.moveTo(0, height / 2);
+ this.ctx.lineTo(width, height / 2);
this.ctx.stroke();
- // Danger threshold
- const dangerX = width * this.dangerThreshold;
+ // Draw waveform
+ const waveColor = this.isBroadcasting ? this.colors.waveRed : this.colors.waveAmber;
+
+ this.ctx.strokeStyle = waveColor;
+ this.ctx.lineWidth = 1.5;
+ this.ctx.shadowColor = waveColor;
+ this.ctx.shadowBlur = 4;
this.ctx.beginPath();
- this.ctx.moveTo(dangerX, 0);
- this.ctx.lineTo(dangerX, height);
+
+ const sliceWidth = width / this.bufferLength;
+ let x = 0;
+
+ for (let i = 0; i < this.bufferLength; i++) {
+ const v = this.dataArray[i] / 128.0;
+ const y = (v * height) / 2;
+
+ if (i === 0) {
+ this.ctx.moveTo(x, y);
+ } else {
+ this.ctx.lineTo(x, y);
+ }
+
+ x += sliceWidth;
+ }
+
this.ctx.stroke();
+
+ // Reset shadow
+ this.ctx.shadowColor = 'transparent';
+ this.ctx.shadowBlur = 0;
+ }
+
+ /**
+ * Draw a rounded rectangle
+ */
+ roundRect(x, y, w, h, r) {
+ if (r <= 0) {
+ this.ctx.fillRect(x, y, w, h);
+ return;
+ }
+ this.ctx.beginPath();
+ this.ctx.moveTo(x + r, y);
+ this.ctx.lineTo(x + w - r, y);
+ this.ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+ this.ctx.lineTo(x + w, y + h - r);
+ this.ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+ this.ctx.lineTo(x + r, y + h);
+ this.ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+ this.ctx.lineTo(x, y + r);
+ this.ctx.quadraticCurveTo(x, y, x + r, y);
+ this.ctx.closePath();
+ this.ctx.fill();
+ }
+
+ /**
+ * Linear interpolation between two hex colors
+ */
+ lerpColor(a, b, t) {
+ const ah = parseInt(a.replace('#', ''), 16);
+ const bh = parseInt(b.replace('#', ''), 16);
+
+ const ar = (ah >> 16) & 0xff, ag = (ah >> 8) & 0xff, ab = ah & 0xff;
+ const br = (bh >> 16) & 0xff, bg = (bh >> 8) & 0xff, bb = bh & 0xff;
+
+ const rr = Math.round(ar + (br - ar) * t);
+ const rg = Math.round(ag + (bg - ag) * t);
+ const rb = Math.round(ab + (bb - ab) * t);
+
+ return `rgb(${rr},${rg},${rb})`;
}
/**
@@ -222,6 +390,7 @@ export class VolumeMeter {
this.analyser = null;
this.ctx = null;
this.dataArray = null;
+ this.onSpeaking = null;
console.log('[VolumeMeter] Destroyed');
}
}
Stream URL: /stream/live.opus
+
+
diff --git a/web/js/main.js b/web/js/main.js
index 7d994b4..664a8cc 100644
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -67,6 +67,7 @@ class OpenStudioApp {
this.recordingIndicator = document.getElementById('recording-indicator');
this.recordingTimer = document.getElementById('recording-timer');
this.recordingTracksDiv = document.getElementById('recording-tracks');
+ this.sessionInfoElement = document.getElementById('session-info');
// Bind event handlers
this.setupSignalingListeners();
@@ -74,6 +75,7 @@ class OpenStudioApp {
this.setupStreamingListeners();
this.setupRecordingListeners();
this.setupUIListeners();
+ this.setupDeckPanels();
// Check for room ID in URL hash
this.checkUrlHash();
@@ -98,9 +100,6 @@ class OpenStudioApp {
}
}
- /**
- * Initialize app: connect signaling, fetch ICE config, setup audio
- */
/**
* Initialize app: connect signaling, fetch ICE config, setup audio.
* @returns {Promise
+
+
+
+
+
+
+
Stream URL: /stream/live.opus
+