- {{ $badgeText }}
+
+ {{ $badgeText }}
+ @if($micStatusId || $camStatusId)
+
+ @if($micStatusId)
+
+ @endif
+ @if($camStatusId)
+
+ @endif
+ @endif
diff --git a/resources/views/interview/candidate_room.blade.php b/resources/views/interview/candidate_room.blade.php
index e92db91..b5b4362 100644
--- a/resources/views/interview/candidate_room.blade.php
+++ b/resources/views/interview/candidate_room.blade.php
@@ -9,6 +9,7 @@
+
@@ -305,8 +306,11 @@
Camera Disabled
-
- 📷 Candidate Camera
+
+ Candidate (You)
+ |
+
+
+
+ ${initials}
+
+
${labelName}
+
Camera Turned Off
+
+ 🎙️ ${labelName}
+ |
+
+
+
+ `;
- const labelDiv = document.createElement('div');
- labelDiv.style.position = 'absolute';
- labelDiv.style.bottom = '8px';
- labelDiv.style.left = '8px';
- labelDiv.style.background = 'rgba(99,102,241,0.85)';
- labelDiv.style.padding = '2px 8px';
- labelDiv.style.borderRadius = '4px';
- labelDiv.style.fontSize = '0.65rem';
- labelDiv.style.color = 'white';
- labelDiv.style.fontWeight = '600';
- labelDiv.style.zIndex = '10';
- labelDiv.innerText = '🎙️ ' + labelName;
-
- tile.appendChild(videoElem);
- tile.appendChild(labelDiv);
if (grid) grid.appendChild(tile);
+ videoElem = document.getElementById('cand-iv-video-' + peerId);
} else {
videoElem = document.getElementById('cand-iv-video-' + peerId);
+ const micIcon = document.getElementById('cand-iv-mic-' + peerId);
+ const camIcon = document.getElementById('cand-iv-cam-' + peerId);
+ const placeholderEl = document.getElementById('cand-iv-placeholder-' + peerId);
+
+ if (micIcon) {
+ micIcon.className = micOnVal ? 'fa-solid fa-microphone' : 'fa-solid fa-microphone-slash';
+ micIcon.style.color = micOnVal ? '#34d399' : '#ef4444';
+ micIcon.title = micOnVal ? 'Mic On' : 'Mic Muted';
+ }
+ if (camIcon) {
+ camIcon.className = camOnVal ? 'fa-solid fa-video' : 'fa-solid fa-video-slash';
+ camIcon.style.color = camOnVal ? '#34d399' : '#ef4444';
+ camIcon.title = camOnVal ? 'Camera On' : 'Camera Off';
+ }
+ if (placeholderEl) {
+ placeholderEl.style.display = camOnVal ? 'none' : 'flex';
+ }
}
if (videoElem && stream) {
@@ -1337,15 +1362,20 @@ function initMeteredIceServers() {
const msg = event.data;
if (!msg) return;
- if (msg.type === 'interviewer_joined' || msg.type === 'peer_joined' || msg.type === 'peer_presence_ack' || msg.type === 'offer') {
+ if (msg.type === 'interviewer_joined' || msg.type === 'peer_joined' || msg.type === 'peer_presence_ack' || msg.type === 'offer' || msg.type === 'peer_state_changed') {
latestCallStatus = 'active';
if (msg.peer_id && msg.peer_id.startsWith('interviewer_')) {
- if (localMediaStream && peerInstance) {
+ const isMicOn = (msg.mic_on !== undefined) ? Boolean(msg.mic_on) : true;
+ const isCamOn = (msg.cam_on !== undefined) ? Boolean(msg.cam_on) : true;
+ const existingStream = candidateInterviewerTiles.get(msg.peer_id) || null;
+ addOrUpdateCandidateInterviewerTile(msg.peer_id, existingStream, msg.user_name || msg.name || 'Interviewer Panelist', isMicOn, isCamOn);
+
+ if (localMediaStream && peerInstance && !existingStream) {
try {
const outCall = peerInstance.call(msg.peer_id, localMediaStream);
if (outCall) {
outCall.on('stream', remoteStream => {
- addOrUpdateCandidateInterviewerTile(msg.peer_id, remoteStream, msg.user_name || 'Interviewer Panelist');
+ addOrUpdateCandidateInterviewerTile(msg.peer_id, remoteStream, msg.user_name || msg.name || 'Interviewer Panelist', isMicOn, isCamOn);
});
}
} catch(e) {}
@@ -1629,6 +1659,71 @@ function candidateLeaveCall(isEndedByHost = false) {
}
}
+ let candidateHeartbeatDebounceTimer = null;
+ let candidateHeartbeatIntervalTimer = null;
+
+ function debouncedCandidatePeerHeartbeat() {
+ if (candidateHeartbeatDebounceTimer) clearTimeout(candidateHeartbeatDebounceTimer);
+ sendCandidatePeerHeartbeat();
+ candidateHeartbeatDebounceTimer = setTimeout(() => {
+ sendCandidatePeerHeartbeat();
+ }, 300);
+ }
+
+ function sendCandidatePeerHeartbeat(action = 'heartbeat') {
+ const peerId = 'cand_' + interviewId;
+ const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+ fetch("{{ route('interview.candidate.peer-heartbeat', $interview->id) }}", {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRF-TOKEN': csrfToken
+ },
+ body: JSON.stringify({
+ peer_id: peerId,
+ name: '{{ addslashes($interview->candidate_name) }}',
+ role: 'candidate',
+ mic_on: Boolean(isMicEnabled),
+ cam_on: Boolean(isCamEnabled),
+ action: action
+ })
+ })
+ .then(r => r.ok ? r.json() : null)
+ .then(data => {
+ if (data && data.active_peers && Array.isArray(data.active_peers)) {
+ data.active_peers.forEach(p => {
+ if (p.peer_id && (p.peer_id.startsWith('interviewer_') || p.role === 'admin' || p.role === 'interviewer')) {
+ const existingStream = candidateInterviewerTiles.get(p.peer_id) || null;
+ const nameLabel = p.role === 'admin' ? ('Admin ' + (p.name || '')) : (p.name || 'Interviewer Panelist');
+ const isMicOn = isTrueVal(p.mic_on);
+ const isCamOn = isTrueVal(p.cam_on);
+
+ addOrUpdateCandidateInterviewerTile(p.peer_id, existingStream, nameLabel, isMicOn, isCamOn);
+ }
+ });
+ }
+ })
+ .catch(() => {});
+
+ if (callSigChannel) {
+ callSigChannel.postMessage({
+ type: 'peer_state_changed',
+ peer_id: peerId,
+ role: 'candidate',
+ name: '{{ addslashes($interview->candidate_name) }}',
+ mic_on: Boolean(isMicEnabled),
+ cam_on: Boolean(isCamEnabled)
+ });
+ }
+ }
+
+ // 6-Second Steady Heartbeat Timer & Immediate Load Trigger
+ if (candidateHeartbeatIntervalTimer) clearInterval(candidateHeartbeatIntervalTimer);
+ sendCandidatePeerHeartbeat();
+ candidateHeartbeatIntervalTimer = setInterval(() => {
+ sendCandidatePeerHeartbeat();
+ }, 6000);
+
function toggleMic() {
if (!localMediaStream) return;
const audioTracks = localMediaStream.getAudioTracks();
@@ -1636,9 +1731,18 @@ function toggleMic() {
isMicEnabled = !isMicEnabled;
audioTracks[0].enabled = isMicEnabled;
const btn = document.getElementById('toggle-mic-btn');
- btn.innerText = isMicEnabled ? '🎤 Mic On' : '🔇 Mic Muted';
- btn.style.background = isMicEnabled ? 'rgba(16,185,129,0.2)' : 'rgba(239,68,68,0.2)';
- btn.style.borderColor = isMicEnabled ? '#10b981' : '#ef4444';
+ if (btn) {
+ btn.innerText = isMicEnabled ? '🎤 Mic On' : '🔇 Mic Muted';
+ btn.style.background = isMicEnabled ? 'rgba(16,185,129,0.2)' : 'rgba(239,68,68,0.2)';
+ btn.style.borderColor = isMicEnabled ? '#10b981' : '#ef4444';
+ }
+ const icon = document.getElementById('cand-self-mic-icon');
+ if (icon) {
+ icon.className = isMicEnabled ? 'fa-solid fa-microphone' : 'fa-solid fa-microphone-slash';
+ icon.style.color = isMicEnabled ? '#34d399' : '#ef4444';
+ icon.title = isMicEnabled ? 'Mic On' : 'Mic Muted';
+ }
+ debouncedCandidatePeerHeartbeat();
}
}
@@ -1650,15 +1754,24 @@ function toggleCam() {
isCamEnabled = !isCamEnabled;
videoTracks[0].enabled = isCamEnabled;
const btn = document.getElementById('toggle-cam-btn');
- btn.innerText = isCamEnabled ? '📷 Cam On' : '🚫 Cam Off';
- btn.style.background = isCamEnabled ? 'rgba(16,185,129,0.2)' : 'rgba(239,68,68,0.2)';
- btn.style.borderColor = isCamEnabled ? '#10b981' : '#ef4444';
+ if (btn) {
+ btn.innerText = isCamEnabled ? '📷 Cam On' : '🚫 Cam Off';
+ btn.style.background = isCamEnabled ? 'rgba(16,185,129,0.2)' : 'rgba(239,68,68,0.2)';
+ btn.style.borderColor = isCamEnabled ? '#10b981' : '#ef4444';
+ }
if (avatarPlaceholder) avatarPlaceholder.style.display = isCamEnabled ? 'none' : 'flex';
}
} else {
isCamEnabled = !isCamEnabled;
if (avatarPlaceholder) avatarPlaceholder.style.display = isCamEnabled ? 'none' : 'flex';
}
+ const icon = document.getElementById('cand-self-cam-icon');
+ if (icon) {
+ icon.className = isCamEnabled ? 'fa-solid fa-video' : 'fa-solid fa-video-slash';
+ icon.style.color = isCamEnabled ? '#34d399' : '#ef4444';
+ icon.title = isCamEnabled ? 'Camera On' : 'Camera Off';
+ }
+ debouncedCandidatePeerHeartbeat();
}
function requestFullscreenAsPromise(elem) {
@@ -2072,24 +2185,6 @@ function saveCanvasDrawing(force = false) {
}
}
- function sendCandidatePeerHeartbeat(action = 'heartbeat') {
- if (!interviewId) return;
- const candPeerId = 'cand_' + interviewId;
- fetch('/candidate/peer-heartbeat/' + interviewId, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- 'X-CSRF-TOKEN': '{{ csrf_token() }}'
- },
- body: JSON.stringify({
- peer_id: candPeerId,
- name: '{{ addslashes($interview->candidate_name) }}',
- role: 'candidate',
- action: action
- })
- }).catch(e => {});
- }
-
setInterval(() => {
if (!interviewId) return;
sendCandidatePeerHeartbeat('heartbeat');
diff --git a/resources/views/interview/show.blade.php b/resources/views/interview/show.blade.php
index b0b99fc..fccbd0f 100644
--- a/resources/views/interview/show.blade.php
+++ b/resources/views/interview/show.blade.php
@@ -213,7 +213,8 @@
videoId="interviewer-cand-video"
placeholderId="cand-video-placeholder"
badgeText="Candidate video"
- badgeId="cand-vid-zoom-badge"
+ micStatusId="cand-mic-status"
+ camStatusId="cand-cam-status"
showZoom="true"
zoomInFn="zoomCandVideo(0.25)"
zoomOutFn="zoomCandVideo(-0.25)"
@@ -222,7 +223,7 @@
avatarNameId="cand-avatar-name"
avatarTitle="{{ $interview->candidate_name }}"
initials="{{ $candInitials }}">
- Waiting for candidate…
+ Waiting for candidate…
@@ -231,7 +232,6 @@
videoId="interviewer-screen-video"
placeholderId="screen-video-placeholder"
badgeText="Shared screen"
- badgeId="zoom-level-badge"
focused="true"
showZoom="true"
showFullscreen="true"
@@ -255,6 +255,8 @@
videoId="interviewer-self-video"
placeholderId="self-video-placeholder"
badgeText="Panelist self"
+ micStatusId="self-mic-status"
+ camStatusId="self-cam-status"
avatarTitle="{{ Auth::user()->name }}"
initials="{{ $usrInitials }}">
Panelist (self)