2457 lines
138 KiB
PHP
2457 lines
138 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Candidate Live Assessment Portal | SingleLogin</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
|
|
<script src="//cdn.metered.ca/sdk/video/1.4.6/sdk.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #0b0f19;
|
|
--card-bg: rgba(15, 23, 42, 0.65);
|
|
--card-border: rgba(255, 255, 255, 0.22);
|
|
--accent-primary: #6366f1;
|
|
--accent-secondary: #0078d4;
|
|
--text-main: #ffffff;
|
|
--text-muted: #d1d5db;
|
|
}
|
|
|
|
/* Scrollbars */
|
|
html, body, *, ::-webkit-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Instrument Sans', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.navbar {
|
|
height: 70px;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(16px);
|
|
border-bottom: 1px solid var(--card-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 4%;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.btn-nav {
|
|
color: #e5e7eb;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--card-border);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.btn-nav:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: white;
|
|
}
|
|
|
|
.assessment-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
padding: 28px;
|
|
backdrop-filter: blur(20px);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.users-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.85rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.users-table th {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--card-border);
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.users-table td {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
padding: 4px 10px;
|
|
border-radius: 9999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.admin-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(11, 15, 25, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.admin-modal.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.admin-modal-content {
|
|
background-color: #151b2c;
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
width: 90%;
|
|
max-width: 900px;
|
|
padding: 28px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-size: 0.85rem;
|
|
outline: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header Navbar -->
|
|
<header class="navbar">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<div style="width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #6366f1 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-weight: 700;">
|
|
⚡
|
|
</div>
|
|
<div>
|
|
<h1 style="font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; color: white; margin: 0;">Candidate Live Assessment Portal</h1>
|
|
<div style="font-size: 0.7rem; color: var(--text-muted);">Proctored IDE & Code Submissions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 12px;">
|
|
@if(Auth::user()->isAdmin())
|
|
<a href="{{ route('admin.dashboard') }}" class="btn-nav" style="border-color: #818cf8; color: #818cf8;">Control Panel</a>
|
|
@endif
|
|
<a href="{{ route('onboarding.index') }}" class="btn-nav">Onboarding Hub</a>
|
|
<a href="{{ route('dashboard') }}" class="btn-nav">User Portal</a>
|
|
<form action="{{ route('logout') }}" method="POST" id="logout-form" style="display: inline;">
|
|
@csrf
|
|
<button type="button" onclick="interviewerLogoutAction()" class="btn-nav" style="background: rgba(239,68,68,0.2); border-color: #ef4444; color: #fca5a5; font-weight: 600;">
|
|
🚪 Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<main style="max-width: 1400px; width: 100%; margin: 30px auto; padding: 0 4%; flex: 1;">
|
|
@if(session('success'))
|
|
<div style="margin-bottom: 24px; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; padding: 12px 20px; border-radius: 12px; font-size: 0.9rem;">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
<!-- Global Admin Settings & Proctoring Control Panel -->
|
|
<section class="admin-card" style="margin-bottom: 25px; padding: 20px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%); border: 1.5px solid rgba(99, 102, 241, 0.35); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); border-radius: 16px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 12px;">
|
|
<div>
|
|
<h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 800; color: #ffffff; margin: 0; display: flex; align-items: center; gap: 8px;">
|
|
⚙️ Global Admin Proctoring & System Settings
|
|
</h3>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 4px;">Master control panel for candidate assessment rules, system screen capturing, and module toggles</div>
|
|
</div>
|
|
<span class="badge" style="background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.4); font-weight: 700; padding: 6px 12px; font-size: 0.75rem;">
|
|
🛡️ ADMIN CONTROL PANEL
|
|
</span>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px;">
|
|
|
|
<!-- 1. Candidate System Screenshot Capture Master Toggle -->
|
|
<div style="padding: 16px; background: rgba(16, 185, 129, 0.08); border: 1.5px solid rgba(16, 185, 129, 0.3); border-radius: 12px;">
|
|
<form action="{{ route('admin.settings.screenshot-toggle') }}" method="POST">
|
|
@csrf
|
|
<div style="margin-bottom: 12px;">
|
|
<div style="font-size: 0.95rem; color: #ffffff; font-weight: 700; display: flex; align-items: center; gap: 6px;">
|
|
📸 Candidate System Screenshot Capture
|
|
</div>
|
|
<div style="font-size: 0.73rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4;">
|
|
Captures candidate system desktop screen automatically on call start & tab switches. Admin can stop taking screenshots anytime across all candidates.
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08);">
|
|
<span id="global-screenshot-status-text" style="font-size: 0.75rem; font-weight: 700; color: {{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? '#34d399' : '#fca5a5' }};">
|
|
{{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? '🟢 ENABLED (Active)' : '🔴 STOPPED / DISABLED' }}
|
|
</span>
|
|
@if(Auth::user() && Auth::user()->isAdmin())
|
|
<label style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
|
|
<input type="checkbox" name="enable_candidate_screenshots" value="1" onchange="this.form.submit()" {{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? 'checked' : '' }} style="accent-color: #10b981; width: 20px; height: 20px; cursor: pointer;">
|
|
<span style="font-size: 0.8rem; font-weight: 800; color: white; background: rgba(255,255,255,0.12); padding: 5px 12px; border-radius: 6px;">
|
|
{{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? 'Stop Screenshot Capture' : 'Enable Screenshot Capture' }}
|
|
</span>
|
|
</label>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 2. Onboarding & Offboarding Module Master Toggle -->
|
|
<div style="padding: 16px; background: rgba(99, 102, 241, 0.08); border: 1.5px solid rgba(99, 102, 241, 0.3); border-radius: 12px;">
|
|
<form action="{{ route('admin.settings.onboarding-toggle') }}" method="POST">
|
|
@csrf
|
|
<div style="margin-bottom: 12px;">
|
|
<div style="font-size: 0.95rem; color: #ffffff; font-weight: 700; display: flex; align-items: center; gap: 6px;">
|
|
🚀 Candidate Provisioning & Onboarding Module
|
|
</div>
|
|
<div style="font-size: 0.73rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4;">
|
|
Master toggle to enable/disable automated candidate provisioning, onboarding checklists, and 1-click revocation.
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08);">
|
|
<span style="font-size: 0.75rem; font-weight: 700; color: {{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? '#34d399' : '#fca5a5' }};">
|
|
{{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? '🟢 ENABLED' : '🔴 DISABLED' }}
|
|
</span>
|
|
@if(Auth::user() && Auth::user()->isAdmin())
|
|
<label style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
|
|
<input type="checkbox" name="onboarding_enabled" value="1" onchange="this.form.submit()" {{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? 'checked' : '' }} style="accent-color: #10b981; width: 20px; height: 20px; cursor: pointer;">
|
|
<span style="font-size: 0.8rem; font-weight: 800; color: white; background: rgba(255,255,255,0.12); padding: 5px 12px; border-radius: 6px;">
|
|
{{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? 'Disable Onboarding' : 'Enable Onboarding' }}
|
|
</span>
|
|
</label>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
|
<div>
|
|
<h2 style="font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; color: white; margin: 0;">Live Interview Assessments</h2>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted);">Temporary Candidate Access, Real-Time Proctored IDE, and Unique Code Records</div>
|
|
</div>
|
|
|
|
<button onclick="document.getElementById('create-interview-modal').classList.add('active')" class="btn-nav" style="background-color: var(--accent-primary); color: white; border-color: transparent; font-weight: 600; padding: 10px 18px; cursor: pointer;">
|
|
+ Schedule Candidate Interview
|
|
</button>
|
|
</div>
|
|
|
|
<div class="assessment-card">
|
|
<div class="table-responsive">
|
|
<table class="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Candidate & Temp Pass</th>
|
|
<th>Unique Submission ID</th>
|
|
<th>Status & Validity</th>
|
|
<th>Language</th>
|
|
<th>Proctoring Alerts</th>
|
|
<th style="text-align: right;">Review & Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($interviews as $inv)
|
|
@php
|
|
$logs = $inv->proctor_logs ?? [];
|
|
$tabSwitches = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'tab_switch'));
|
|
$focusLost = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'focus_lost'));
|
|
$gazeAlerts = count(array_filter($logs, fn($l) => in_array($l['type'] ?? '', ['gaze_anomaly', 'gaze_fixed_staring'])));
|
|
$lowerGaze = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'gaze_lower_device'));
|
|
$questionRepeat = count(array_filter($logs, fn($l) => in_array($l['type'] ?? '', ['question_repeat_lower', 'question_repetition'])));
|
|
$externalAi = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'external_ai_detected'));
|
|
@endphp
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<strong style="color: white; font-size: 0.9rem;">{{ $inv->candidate_name }}</strong>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">{{ $inv->candidate_email }} • {{ $inv->candidate_phone }}</div>
|
|
<div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;">
|
|
<div style="font-size: 0.75rem; color: #a7f3d0; background: rgba(16,185,129,0.1); padding: 2px 8px; border-radius: 6px; display: inline-block;">
|
|
🔑 Temp Pass: <strong>{{ $inv->temp_password }}</strong>
|
|
</div>
|
|
<div style="font-size: 0.7rem; color: #38bdf8;">
|
|
🌐 Login URL: <a href="{{ route('interview.candidate.login') }}" target="_blank" style="color: #38bdf8; text-decoration: underline;">{{ route('interview.candidate.login') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<code style="background: rgba(255,255,255,0.06); padding: 4px 8px; border-radius: 6px; color: #38bdf8; font-size: 0.75rem;">
|
|
{{ $inv->submission_unique_id }}
|
|
</code>
|
|
</td>
|
|
<td>
|
|
@if($inv->isExpired())
|
|
<span class="badge" style="background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3);">
|
|
EXPIRED
|
|
</span>
|
|
@elseif($inv->status === 'completed')
|
|
<span class="badge" style="background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3);">
|
|
COMPLETED
|
|
</span>
|
|
@elseif($inv->call_status === 'active')
|
|
<span class="badge" style="background: rgba(16,185,129,0.3); color: #34d399; border: 1px solid #10b981; font-weight: 800; animation: acceptGlow 1.5s infinite alternate;">
|
|
🟢 📞 CALL IN PROGRESS
|
|
</span>
|
|
@elseif($inv->isActiveTimeline())
|
|
<span class="badge" style="background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.4);">
|
|
⚡ TIMELINE LIVE
|
|
</span>
|
|
@else
|
|
<span class="badge" style="background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3);">
|
|
SCHEDULED
|
|
</span>
|
|
@endif
|
|
<div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 4px;">
|
|
Timeline: {{ ($inv->scheduled_at ?? $inv->created_at)->format('M d, H:i') }} – {{ $inv->expires_at->format('H:i') }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge" style="background: rgba(255,255,255,0.05); color: white; border: 1px solid var(--card-border); text-transform: uppercase;">
|
|
{{ $inv->language }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem;">
|
|
<span style="color: {{ $tabSwitches > 0 ? '#ef4444' : 'var(--text-muted)' }}; font-weight: {{ $tabSwitches > 0 ? '700' : '400' }};">
|
|
🔴 Tab Switches: {{ $tabSwitches }}
|
|
</span>
|
|
<span style="color: {{ $focusLost > 0 ? '#fbbf24' : 'var(--text-muted)' }};">
|
|
🟡 Focus Loss / Overlay: {{ $focusLost }}
|
|
</span>
|
|
<span style="color: {{ $gazeAlerts > 0 ? '#f43f5e' : 'var(--text-muted)' }};">
|
|
👁️ Eye Gaze Anomaly: {{ $gazeAlerts }}
|
|
</span>
|
|
@if($lowerGaze > 0)
|
|
<span style="color: #ef4444; font-weight: 700;">
|
|
📱 Lower Gaze (>10s): {{ $lowerGaze }}
|
|
</span>
|
|
@endif
|
|
@if($questionRepeat > 0)
|
|
<span style="color: #f43f5e; font-weight: 700;">
|
|
🗣️ Question Repetition: {{ $questionRepeat }}
|
|
</span>
|
|
@endif
|
|
@if($externalAi > 0)
|
|
<span style="color: #ef4444; font-weight: 800; background: rgba(239,68,68,0.2); padding: 2px 6px; border-radius: 4px;">
|
|
🤖 Parakeet / External AI: {{ $externalAi }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
<td style="text-align: right; white-space: nowrap;">
|
|
<a href="{{ route('interview.report', $inv->id) }}" target="_blank" class="btn-nav" style="background: rgba(16,185,129,0.15); color: #34d399; border-color: rgba(16,185,129,0.3); font-weight: 600; padding: 6px 10px; margin-right: 4px;">
|
|
📄 Report
|
|
</a>
|
|
|
|
@if($inv->call_status === 'active')
|
|
<button onclick="openReviewModal({{ $inv->id }}, '{{ addslashes($inv->candidate_name) }}', '{{ $inv->submission_unique_id }}', true)" class="btn-nav" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; font-weight: 800; padding: 6px 14px; margin-right: 4px; cursor: pointer; box-shadow: 0 0 15px rgba(16,185,129,0.6); animation: acceptGlow 1.5s infinite alternate;">
|
|
📞 Join Active Call
|
|
</button>
|
|
@else
|
|
<button onclick="openReviewModal({{ $inv->id }}, '{{ addslashes($inv->candidate_name) }}', '{{ $inv->submission_unique_id }}')" class="btn-nav" style="background: rgba(99,102,241,0.15); color: #818cf8; border-color: rgba(99,102,241,0.3); font-weight: 600; padding: 6px 12px; margin-right: 4px; cursor: pointer;">
|
|
🔍 Review Code & Proctor Logs
|
|
</button>
|
|
@endif
|
|
|
|
<a href="{{ route('interview.room', $inv->submission_unique_id) }}" target="_blank" class="btn-nav" style="padding: 6px 10px; font-size: 0.75rem;">
|
|
Open IDE Link
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" style="text-align: center; color: var(--text-muted); padding: 30px;">
|
|
No candidate interview sessions found. Click "+ Schedule Candidate Interview" above to create one.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modal: Schedule Candidate Interview -->
|
|
<div id="create-interview-modal" class="admin-modal">
|
|
<div class="admin-modal-content" style="max-width: 600px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: white; margin: 0;">Schedule Candidate Assessment</h3>
|
|
<button onclick="document.getElementById('create-interview-modal').classList.remove('active')" style="background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer;">×</button>
|
|
</div>
|
|
|
|
<form action="{{ route('interview.store') }}" method="POST">
|
|
@csrf
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;">
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Candidate Name <span style="color:#ef4444;">*</span></label>
|
|
<input type="text" name="candidate_name" required placeholder="e.g. John Doe" class="form-input">
|
|
</div>
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Candidate Email <span style="color:#ef4444;">*</span></label>
|
|
<input type="email" name="candidate_email" required placeholder="john@gmail.com" class="form-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px;">
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Phone Number <span style="color:#ef4444;">*</span></label>
|
|
<input type="text" name="candidate_phone" required placeholder="9876543210" class="form-input">
|
|
</div>
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Start Time (Timeline)</label>
|
|
<input type="datetime-local" name="scheduled_at" value="{{ now()->format('Y-m-d\TH:i') }}" class="form-input" style="background: #151b2c;">
|
|
</div>
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Access Duration <span style="color:#ef4444;">*</span></label>
|
|
<select name="valid_hours" required class="form-input" style="background: #151b2c;">
|
|
<option value="1">1 Hour</option>
|
|
<option value="2" selected>2 Hours</option>
|
|
<option value="4">4 Hours</option>
|
|
<option value="12">12 Hours</option>
|
|
<option value="24">24 Hours</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 14px;">
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Coding Language <span style="color:#ef4444;">*</span></label>
|
|
<select name="language" required class="form-input" style="background: #151b2c;">
|
|
<option value="python">Python 3</option>
|
|
<option value="cpp">C++ (GCC)</option>
|
|
<option value="c">C (GCC)</option>
|
|
<option value="java">Java 15</option>
|
|
<option value="php">PHP 8.2 / Laravel</option>
|
|
<option value="javascript">JavaScript (Node.js)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 16px;">
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Assign Internal Interviewers / Panelists</label>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 120px; overflow-y: auto; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; border: 1px solid var(--card-border);">
|
|
@foreach($interviewers as $usr)
|
|
<label style="display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: white; cursor: pointer;">
|
|
<input type="checkbox" name="assigned_interviewers[]" value="{{ $usr->id }}" style="accent-color: #6366f1;">
|
|
{{ $usr->name }} ({{ $usr->email }})
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
|
|
<button type="button" onclick="document.getElementById('create-interview-modal').classList.remove('active')" class="btn-nav">Cancel</button>
|
|
<button type="submit" class="btn-nav" style="background: var(--accent-primary); color: white; border-color: transparent; font-weight: 600;">Create Session & Password</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Live Review, 2-Way Video Call, Screen Share, Large IDE Inspector & SOS Alert -->
|
|
<div id="review-modal" class="admin-modal">
|
|
<div class="admin-modal-content" style="max-width: 1150px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px;">
|
|
<div>
|
|
<h3 id="modal-cand-name" style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: white; margin: 0;">Review Candidate Session</h3>
|
|
<div id="modal-cand-uid" style="font-size: 0.75rem; color: #38bdf8;"></div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; align-items: center;">
|
|
<!-- TOGGLE SOS AUTO-TRIGGER ON/OFF FOR SESSION -->
|
|
<button id="sos-toggle-btn" onclick="toggleSosAutoTrigger()" class="btn-nav" style="background: rgba(99,102,241,0.15); color: #818cf8; border-color: #6366f1; font-size: 0.75rem; font-weight: 600;" title="Panelists can turn off automatic SOS popups for this session">
|
|
🔔 SOS Auto-Trigger: ON
|
|
</button>
|
|
|
|
<!-- GENERATE PDF REPORT BUTTON -->
|
|
<button onclick="openReportPage()" class="btn-nav" style="background: rgba(16,185,129,0.15); color: #34d399; border-color: #10b981; font-size: 0.75rem; font-weight: 600;">
|
|
📄 Generate PDF Report
|
|
</button>
|
|
|
|
<!-- SOS CHEATING ALERT BUTTON (Flashing Red) -->
|
|
<button id="sos-alert-btn" onclick="openSosModal()" class="btn-nav" style="display: none; background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: white; border: none; font-weight: 800; padding: 6px 14px; box-shadow: 0 0 15px rgba(239,68,68,0.7); cursor: pointer; animation: sosPulse 1.2s infinite alternate;">
|
|
🚨 candidate might cheating
|
|
</button>
|
|
|
|
<!-- REGENERATE CANDIDATE PASSWORD -->
|
|
<button onclick="regenerateCandidatePassword()" class="btn-nav" style="background: rgba(234,179,8,0.15); color: #fde047; border-color: #eab308; font-size: 0.75rem; font-weight: 600;">
|
|
🔑 Password
|
|
</button>
|
|
|
|
<!-- BLOCK CANDIDATE EMAIL & IP -->
|
|
<button onclick="blockCandidateAction()" class="btn-nav" style="background: rgba(239,68,68,0.15); color: #fca5a5; border-color: #ef4444; font-size: 0.75rem; font-weight: 600;">
|
|
⛔ Block
|
|
</button>
|
|
|
|
<button onclick="closeReviewModal()" style="background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer;">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LIVE 2-WAY VIDEO CALL & SCREEN SHARE PANEL -->
|
|
<div style="background: rgba(15,23,42,0.8); border: 1.5px solid #6366f1; border-radius: 16px; padding: 16px; margin-bottom: 20px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-size: 1.1rem;">📞</span>
|
|
<strong style="color: white; font-size: 0.95rem;">Real-Time 2-Way Interview Call & Candidate Screen</strong>
|
|
<span id="interviewer-call-status" class="badge" style="background: rgba(99,102,241,0.2); color: #818cf8;">DISCONNECTED</span>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<button id="btn-start-call" onclick="startInterviewerCall()" class="btn-nav" style="background: #10b981; color: white; border: none; font-weight: 700; padding: 6px 14px; cursor: pointer;">
|
|
📞 Start / Join Call
|
|
</button>
|
|
<button id="btn-start-recording" onclick="startCallRecording()" class="btn-nav" style="background: rgba(239,68,68,0.2); border-color: #ef4444; color: #fca5a5; font-weight: 700; padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;">
|
|
⏺️ Record Call (Silent)
|
|
</button>
|
|
<button id="btn-stop-recording" onclick="stopCallRecording()" class="btn-nav" style="display: none; background: #ef4444; color: white; border: none; font-weight: 700; padding: 6px 14px; cursor: pointer; animation: pulse 1s infinite alternate;">
|
|
⏹️ Stop & Save Recording
|
|
</button>
|
|
<button id="btn-leave-call" onclick="leaveInterviewerCall()" class="btn-nav" style="display: none; background: rgba(234,179,8,0.2); border-color: #eab308; color: #fde047; font-size: 0.75rem; font-weight: 600;" title="Leave your individual connection without ending call for others">
|
|
🚪 Leave Call
|
|
</button>
|
|
<button id="btn-end-all-call" onclick="endCallForAll()" class="btn-nav" style="display: none; background: #ef4444; color: white; border: none; font-weight: 700; font-size: 0.75rem; padding: 6px 12px; cursor: pointer;" title="End call for candidate and all panelists">
|
|
🛑 End Call for All
|
|
</button>
|
|
<button id="btn-toggle-interviewer-mic" onclick="toggleInterviewerMic()" class="btn-nav" style="display: none; background: rgba(255,255,255,0.1); font-size: 0.75rem;">
|
|
🎤 Mic On
|
|
</button>
|
|
<button id="btn-toggle-interviewer-cam" onclick="toggleInterviewerCam()" class="btn-nav" style="display: none; background: rgba(255,255,255,0.1); font-size: 0.75rem;">
|
|
📷 Cam On
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video Feeds Grid: Candidate Video, Candidate Screen (with Zoom controls), Panelist Video -->
|
|
<div style="display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; min-height: 220px;">
|
|
<!-- 1. Candidate Camera Stream (with Zoom Controls & Initials Avatar) -->
|
|
<div id="cand-video-wrapper" style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid var(--card-border); overflow: hidden; height: 220px;">
|
|
<div style="position: absolute; top: 6px; right: 6px; z-index: 20; display: flex; gap: 4px; background: rgba(0,0,0,0.7); padding: 3px 6px; border-radius: 6px; backdrop-filter: blur(4px);">
|
|
<button onclick="zoomCandVideo(0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom In Candidate Video (🔍+)">🔍+</button>
|
|
<button onclick="zoomCandVideo(-0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom Out Candidate Video (🔎-)">🔎-</button>
|
|
<button onclick="zoomCandVideo(0)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Reset Zoom (↺)">↺</button>
|
|
</div>
|
|
|
|
<video id="interviewer-cand-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: cover; transform-origin: center center; transition: transform 0.2s ease;"></video>
|
|
<div id="cand-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
|
|
<div id="modal-cand-avatar-circle" style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #6366f1 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: white; margin-bottom: 6px; box-shadow: 0 0 15px rgba(99,102,241,0.4);">
|
|
CD
|
|
</div>
|
|
<div id="cand-avatar-name" style="font-weight: 700; color: white;">Candidate Camera</div>
|
|
<div style="font-size: 0.65rem; color: #38bdf8; margin-top: 2px;">Click 'Start / Join 2-Way Call' to connect</div>
|
|
</div>
|
|
<div style="position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: #34d399; font-weight: 600; z-index: 10;">
|
|
👤 Candidate Video <span id="cand-vid-zoom-badge" style="color: #38bdf8; font-size: 0.6rem;">(100%)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Candidate Live Shared Screen (with Zoom In / Zoom Out Controls & Fullscreen) -->
|
|
<div id="screen-wrapper" style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid #38bdf8; overflow: hidden; height: 220px;">
|
|
<div style="position: absolute; top: 6px; right: 6px; z-index: 20; display: flex; gap: 4px; background: rgba(0,0,0,0.7); padding: 3px 6px; border-radius: 6px; backdrop-filter: blur(4px);">
|
|
<button onclick="zoomScreen(0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom In (🔍+)">🔍+</button>
|
|
<button onclick="zoomScreen(-0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom Out (🔎-)">🔎-</button>
|
|
<button onclick="resetZoomScreen()" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Reset Zoom (↺)">↺</button>
|
|
<button onclick="toggleFullscreenScreen()" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: #38bdf8; color: black; font-weight: bold;" title="Fullscreen (⛶)">⛶</button>
|
|
</div>
|
|
|
|
<div id="screen-zoom-container" style="width: 100%; height: 100%; overflow: auto;">
|
|
<video id="interviewer-screen-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; transition: transform 0.2s ease;"></video>
|
|
</div>
|
|
|
|
<div id="screen-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
|
|
<div style="font-size: 2rem; margin-bottom: 4px;">🖥️</div>
|
|
<div style="font-weight: 700; color: white;">Candidate Live Screen</div>
|
|
<div style="font-size: 0.65rem; color: #94a3b8; margin-top: 2px;">Waiting for candidate to share screen...</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: #38bdf8; font-weight: 600; z-index: 10;">
|
|
🖥️ Shared Screen <span id="zoom-level-badge" style="color: #a7f3d0; margin-left: 4px;">(100%)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Interviewer / Panelist Camera Stream -->
|
|
<div style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid var(--card-border); overflow: hidden; height: 220px;">
|
|
<video id="interviewer-self-video" autoplay muted playsinline style="width: 100%; height: 100%; object-fit: cover;"></video>
|
|
<div id="self-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
|
|
@php
|
|
$usrWords = preg_split('/\s+/', trim(Auth::user()->name));
|
|
if (count($usrWords) >= 2) {
|
|
$usrInitials = strtoupper(substr($usrWords[0], 0, 1) . substr(end($usrWords), 0, 1));
|
|
} else {
|
|
$uStr = trim(Auth::user()->name);
|
|
$usrInitials = strtoupper(substr($uStr, 0, 1) . (strlen($uStr) > 1 ? substr($uStr, -1) : ''));
|
|
}
|
|
@endphp
|
|
<div style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: white; margin-bottom: 6px; box-shadow: 0 0 15px rgba(16,185,129,0.4);">
|
|
{{ $usrInitials }}
|
|
</div>
|
|
<div style="font-weight: 700; color: white;">{{ Auth::user()->name }}</div>
|
|
<div style="font-size: 0.65rem; color: #34d399; margin-top: 2px;">Panelist (Self)</div>
|
|
</div>
|
|
<div style="position: absolute; bottom: 6px; left: 6px; background: rgba(99,102,241,0.8); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: white; font-weight: 600; z-index: 10;">
|
|
🎙️ Panelist Self
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LARGE CARD: CANDIDATE IDE & SYNCED NOTEBOOK / DRAWING INSPECTOR (Visible by default even if Screen Share is OFF) -->
|
|
<div style="background: #090d16; border: 1.5px solid var(--accent-primary); border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px;">
|
|
<div style="display: flex; align-items: center; gap: 10px;">
|
|
<span style="font-size: 1.2rem;">💻</span>
|
|
<strong style="color: white; font-size: 1.05rem;">Candidate Live IDE & Workspace Inspector</strong>
|
|
<span id="modal-code-lang" class="badge" style="background: rgba(99,102,241,0.2); color: #818cf8; font-size: 0.7rem;">PYTHON</span>
|
|
<span style="font-size: 0.7rem; color: #34d399;">● Live Synced</span>
|
|
</div>
|
|
|
|
<!-- Tab Switcher for Code Solution, Notepad, Drawing, Saved Profile Video Recordings, Screenshots -->
|
|
<div style="display: flex; gap: 6px;">
|
|
<button id="tab-btn-code" onclick="switchIdeTab('code')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: #6366f1; color: white; border: none; font-weight: 700;">💻 Live IDE Code</button>
|
|
<button id="tab-btn-notes" onclick="switchIdeTab('notes')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">📝 Candidate Notepad</button>
|
|
<button id="tab-btn-drawing" onclick="switchIdeTab('drawing')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">🎨 Candidate Drawing</button>
|
|
<button id="tab-btn-recordings" onclick="switchIdeTab('recordings')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">📹 Saved Recordings (.MP4)</button>
|
|
<button id="tab-btn-screenshots" onclick="switchIdeTab('screenshots')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">📸 Tab Switch Screenshots</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 2.5fr 1fr; gap: 20px;">
|
|
<!-- Left Column: Tab Content (Code Solution, Notepad, Canvas Drawing, Saved Recordings, Screenshots) -->
|
|
<div>
|
|
<!-- Tab 1: Live Code Solution & Terminal Output -->
|
|
<div id="tab-content-code" style="display: block;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Current Code Solution (Visible even if candidate does not share screen):</div>
|
|
<pre id="modal-code-display" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; font-family: monospace; font-size: 0.85rem; color: #38bdf8; min-height: 200px; max-height: 280px; overflow-y: auto; white-space: pre-wrap; margin-bottom: 12px;"></pre>
|
|
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Execution Stdout / Stderr Output:</div>
|
|
<pre id="modal-output-display" style="background: #02040a; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; font-family: monospace; font-size: 0.75rem; color: #34d399; max-height: 90px; overflow-y: auto; white-space: pre-wrap;"></pre>
|
|
</div>
|
|
|
|
<!-- Tab 2: Candidate Notepad Content -->
|
|
<div id="tab-content-notes" style="display: none;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Candidate Live Notepad Notes (Auto-Synced):</div>
|
|
<pre id="modal-notes-display" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; font-family: monospace; font-size: 0.85rem; color: #e2e8f0; min-height: 250px; max-height: 350px; overflow-y: auto; white-space: pre-wrap;"></pre>
|
|
</div>
|
|
|
|
<!-- Tab 3: Candidate Canvas Drawing Image -->
|
|
<div id="tab-content-drawing" style="display: none;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Candidate Live Drawing / Architecture Diagram:</div>
|
|
<div style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; display: flex; justify-content: center; align-items: center; min-height: 250px;">
|
|
<img id="modal-drawing-img" src="" alt="Candidate Drawing Board" style="max-width: 100%; max-height: 320px; display: none; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.2);" />
|
|
<div id="no-drawing-placeholder" style="color: #94a3b8; font-size: 0.8rem;">No drawing data submitted by candidate yet.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 4: Saved Candidate Profile Video Recordings & MP4 Downloads -->
|
|
<div id="tab-content-recordings" style="display: none;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Saved Candidate Video Sessions (Sorted by Newest First):</div>
|
|
<div id="modal-recordings-container" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; min-height: 250px; max-height: 420px; overflow-y: auto;">
|
|
<div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No video recordings saved for this candidate yet.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 5: Candidate Tab-Switch Screenshots -->
|
|
<div id="tab-content-screenshots" style="display: none;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600; display: flex; justify-content: space-between; align-items: center;">
|
|
<span>📸 Candidate Tab-Switch Captured Screenshots:</span>
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-size: 0.7rem; color: #a7f3d0;">Admin Screenshot Capture:</span>
|
|
<button id="modal-toggle-screenshot-btn" onclick="toggleTabScreenshotCapture()" class="btn-nav" style="padding: 3px 10px; font-size: 0.7rem; background: #10b981; color: white; border: none; font-weight: 700; border-radius: 6px; cursor: pointer;">
|
|
📸 ENABLED
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="modal-screenshots-container" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; min-height: 250px; max-height: 420px; overflow-y: auto;">
|
|
<div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No tab-switch screenshots captured for this candidate yet.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Proctoring Audit & Silent Warning Form -->
|
|
<div>
|
|
<span style="font-size: 0.8rem; font-weight: 600; color: white;">Proctoring Audit:</span>
|
|
<div id="modal-logs-display" style="background: rgba(0,0,0,0.4); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; max-height: 200px; overflow-y: auto; margin-bottom: 14px; font-size: 0.7rem; color: var(--text-muted);">
|
|
No violations recorded.
|
|
</div>
|
|
|
|
<!-- 2-Way Real-Time Chat Box in Review Modal -->
|
|
<div style="background: rgba(15,23,42,0.8); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px;">
|
|
<div style="font-size: 0.75rem; color: white; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px;">
|
|
💬 2-Way Live Chat History:
|
|
</div>
|
|
<div id="interviewer-chat-history" style="background: #050811; border: 1px solid var(--card-border); border-radius: 8px; padding: 8px; height: 130px; overflow-y: auto; font-size: 0.7rem; margin-bottom: 8px;">
|
|
<div style="color: #94a3b8; font-style: italic; text-align: center; padding-top: 40px;">No chat history. Send a message below.</div>
|
|
</div>
|
|
<div style="display: flex; gap: 6px;">
|
|
<input type="text" id="warning-input" placeholder="Type message to candidate..." onkeydown="if(event.key==='Enter') sendSilentWarning()" class="form-input" style="font-size: 0.75rem; background: #0b0f19; color: #ffffff !important; border: 1px solid var(--card-border); padding: 6px 10px; flex: 1;">
|
|
<button onclick="sendSilentWarning()" class="btn-nav" style="background: #6366f1; color: white; border: none; font-size: 0.75rem; font-weight: 600; padding: 6px 12px; cursor: pointer;">
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: flex-end;">
|
|
<button type="button" onclick="closeReviewModal()" class="btn-nav">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SOS CHEATING ALERT MODAL (FOR INTERVIEWER ONLY) -->
|
|
<div id="sos-modal" class="admin-modal" style="z-index: 9999;">
|
|
<div class="admin-modal-content" style="max-width: 520px; border: 2px solid #ef4444; background: #0f172a; box-shadow: 0 0 40px rgba(239,68,68,0.8);">
|
|
<div style="display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(239,68,68,0.3); padding-bottom: 12px; margin-bottom: 14px;">
|
|
<div style="font-size: 2.2rem;">🚨</div>
|
|
<div>
|
|
<h3 style="color: #fca5a5; font-size: 1.25rem; font-weight: 800; margin: 0;">candidate might cheating</h3>
|
|
<div style="font-size: 0.72rem; color: #94a3b8;">Proctoring engine flagged candidate cheating activity!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sos-violation-list" style="background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 12px; padding: 14px; font-size: 0.8rem; color: #fca5a5; margin-bottom: 18px; max-height: 180px; overflow-y: auto;">
|
|
Violation details loading...
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 10px; justify-content: flex-end;">
|
|
<button onclick="stopSosAlarm()" class="btn-nav" style="background: #ef4444; color: white; border: none; font-weight: 800; padding: 8px 16px; cursor: pointer;">
|
|
🔕 Acknowledge & Stop SOS Alarm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- INCOMING CALL RING MODAL (REAL CALLING APP UI FOR PANELISTS) -->
|
|
<div id="incoming-call-modal" class="admin-modal" style="z-index: 10000; background: rgba(5, 8, 17, 0.85); backdrop-filter: blur(16px);">
|
|
<div class="admin-modal-content" style="max-width: 460px; background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%); border: 2px solid #6366f1; border-radius: 24px; padding: 32px; box-shadow: 0 0 50px rgba(99, 102, 241, 0.6); text-align: center;">
|
|
|
|
<div style="position: relative; width: 90px; height: 90px; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: center;">
|
|
<div style="position: absolute; inset: -15px; border-radius: 50%; border: 2px solid rgba(16, 185, 129, 0.6); animation: ringPulse 1.4s infinite ease-out;"></div>
|
|
<div style="position: absolute; inset: -30px; border-radius: 50%; border: 2px solid rgba(99, 102, 241, 0.4); animation: ringPulse 1.4s infinite ease-out 0.4s;"></div>
|
|
<div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 800; color: white; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.5); z-index: 5;">
|
|
📞
|
|
</div>
|
|
</div>
|
|
|
|
<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #34d399; font-weight: 800; margin-bottom: 6px;">
|
|
⚡ INCOMING INTERVIEW CALL
|
|
</div>
|
|
|
|
<h3 id="incoming-cand-name" style="font-family: 'Outfit', sans-serif; font-size: 1.45rem; font-weight: 800; color: white; margin-bottom: 4px;">
|
|
Candidate Name
|
|
</h3>
|
|
|
|
<div id="incoming-starter-info" style="font-size: 0.82rem; color: #a5b4fc; margin-bottom: 16px;">
|
|
Initiated by Panelist
|
|
</div>
|
|
|
|
<div style="background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px; font-size: 0.78rem; color: #cbd5e1; margin-bottom: 24px; line-height: 1.4;">
|
|
Another interviewer has started calling the candidate. Click <strong>Accept Call</strong> to join live, or <strong>Decline</strong> if busy (you can join later anytime from the dashboard table).
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 14px; justify-content: center;">
|
|
<button id="incoming-decline-btn" onclick="declineIncomingCall()" class="btn-nav" style="flex: 1; padding: 12px 18px; background: rgba(239, 68, 68, 0.2); border: 1.5px solid #ef4444; color: #fca5a5; font-weight: 700; font-size: 0.9rem; border-radius: 12px; cursor: pointer;">
|
|
🚫 Decline / Miss
|
|
</button>
|
|
<button id="incoming-accept-btn" onclick="acceptIncomingCall()" class="btn-nav" style="flex: 1.3; padding: 12px 18px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; color: white; font-weight: 800; font-size: 0.9rem; border-radius: 12px; box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); cursor: pointer; animation: acceptGlow 1.5s infinite alternate;">
|
|
📞 Accept Call
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes sosPulse {
|
|
0% { transform: scale(1); box-shadow: 0 0 10px rgba(239,68,68,0.5); }
|
|
100% { transform: scale(1.05); box-shadow: 0 0 25px rgba(239,68,68,1); }
|
|
}
|
|
@keyframes ringPulse {
|
|
0% { transform: scale(0.85); opacity: 1; }
|
|
100% { transform: scale(1.35); opacity: 0; }
|
|
}
|
|
@keyframes acceptGlow {
|
|
0% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); transform: scale(1); }
|
|
100% { box-shadow: 0 0 28px rgba(16, 185, 129, 0.9); transform: scale(1.03); }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var interviewerSigChannel = null;
|
|
let currentInterviewId = null;
|
|
let interviewerPeer = null;
|
|
let screenReceiverPeer = null;
|
|
let interviewerLocalStream = null;
|
|
let activeCall = null;
|
|
let isInterviewerMicOn = true;
|
|
let isInterviewerCamOn = true;
|
|
let screenZoomLevel = 1.0;
|
|
|
|
function getInitials(name) {
|
|
if (!name) return 'CD';
|
|
let parts = name.trim().split(/\s+/);
|
|
if (parts.length >= 2) {
|
|
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
|
}
|
|
let str = name.trim();
|
|
if (str.length >= 2) {
|
|
return (str[0] + str[str.length - 1]).toUpperCase();
|
|
}
|
|
return str.toUpperCase();
|
|
}
|
|
|
|
function zoomScreen(delta) {
|
|
screenZoomLevel = Math.max(0.5, Math.min(3.0, screenZoomLevel + delta));
|
|
const screenVid = document.getElementById('interviewer-screen-video');
|
|
const badge = document.getElementById('zoom-level-badge');
|
|
if (screenVid) {
|
|
screenVid.style.transform = `scale(${screenZoomLevel})`;
|
|
}
|
|
if (badge) {
|
|
badge.innerText = `(${Math.round(screenZoomLevel * 100)}%)`;
|
|
}
|
|
}
|
|
|
|
function resetZoomScreen() {
|
|
screenZoomLevel = 1.0;
|
|
zoomScreen(0);
|
|
}
|
|
|
|
function toggleFullscreenScreen() {
|
|
const wrapper = document.getElementById('screen-wrapper');
|
|
if (!wrapper) return;
|
|
if (!document.fullscreenElement) {
|
|
wrapper.requestFullscreen().catch(err => console.log(err));
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
let activeViolations = [];
|
|
let sosPollInterval = null;
|
|
let acknowledgedViolationCount = 0;
|
|
let sosDismissed = false;
|
|
let sosAutoTriggerDisabled = false;
|
|
|
|
function toggleSosAutoTrigger() {
|
|
sosAutoTriggerDisabled = !sosAutoTriggerDisabled;
|
|
const btn = document.getElementById('sos-toggle-btn');
|
|
if (sosAutoTriggerDisabled) {
|
|
btn.innerText = '🔕 SOS Auto-Trigger: OFF';
|
|
btn.style.background = 'rgba(239,68,68,0.15)';
|
|
btn.style.color = '#fca5a5';
|
|
btn.style.borderColor = '#ef4444';
|
|
} else {
|
|
btn.innerText = '🔔 SOS Auto-Trigger: ON';
|
|
btn.style.background = 'rgba(99,102,241,0.15)';
|
|
btn.style.color = '#818cf8';
|
|
btn.style.borderColor = '#6366f1';
|
|
}
|
|
}
|
|
|
|
function openReportPage() {
|
|
if (!currentInterviewId) return;
|
|
const reportUrl = `{{ route('interview.report', ':id') }}`.replace(':id', currentInterviewId);
|
|
window.open(reportUrl, '_blank');
|
|
}
|
|
|
|
let currentTabScreenshotEnabled = true;
|
|
|
|
function toggleTabScreenshotCapture() {
|
|
if (!currentInterviewId) return;
|
|
const newStatus = !currentTabScreenshotEnabled;
|
|
fetch(`{{ route('interview.toggle-tab-screenshot', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ enable: newStatus })
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
currentTabScreenshotEnabled = res.enable_tab_switch_screenshot;
|
|
updateScreenshotToggleBtnUI(currentTabScreenshotEnabled);
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'info',
|
|
title: 'Screenshot Setting Updated',
|
|
text: res.message,
|
|
timer: 2500,
|
|
showConfirmButton: false,
|
|
toast: true,
|
|
position: 'top-end'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
function updateScreenshotToggleBtnUI(enabled) {
|
|
const btn = document.getElementById('modal-toggle-screenshot-btn');
|
|
if (btn) {
|
|
if (enabled) {
|
|
btn.innerText = '📸 ENABLED';
|
|
btn.style.background = '#10b981';
|
|
} else {
|
|
btn.innerText = '🔕 DISABLED';
|
|
btn.style.background = '#ef4444';
|
|
}
|
|
}
|
|
}
|
|
|
|
function switchIdeTab(tab) {
|
|
document.getElementById('tab-content-code').style.display = (tab === 'code') ? 'block' : 'none';
|
|
document.getElementById('tab-content-notes').style.display = (tab === 'notes') ? 'block' : 'none';
|
|
document.getElementById('tab-content-drawing').style.display = (tab === 'drawing') ? 'block' : 'none';
|
|
document.getElementById('tab-content-recordings').style.display = (tab === 'recordings') ? 'block' : 'none';
|
|
document.getElementById('tab-content-screenshots').style.display = (tab === 'screenshots') ? 'block' : 'none';
|
|
|
|
document.getElementById('tab-btn-code').style.background = (tab === 'code') ? '#6366f1' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-code').style.color = (tab === 'code') ? 'white' : '#94a3b8';
|
|
|
|
document.getElementById('tab-btn-notes').style.background = (tab === 'notes') ? '#6366f1' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-notes').style.color = (tab === 'notes') ? 'white' : '#94a3b8';
|
|
|
|
document.getElementById('tab-btn-drawing').style.background = (tab === 'drawing') ? '#06b6d4' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-drawing').style.color = (tab === 'drawing') ? 'white' : '#94a3b8';
|
|
|
|
document.getElementById('tab-btn-recordings').style.background = (tab === 'recordings') ? '#10b981' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-recordings').style.color = (tab === 'recordings') ? 'white' : '#94a3b8';
|
|
|
|
const shotBtn = document.getElementById('tab-btn-screenshots');
|
|
if (shotBtn) {
|
|
shotBtn.style.background = (tab === 'screenshots') ? '#f59e0b' : 'rgba(255,255,255,0.05)';
|
|
shotBtn.style.color = (tab === 'screenshots') ? 'white' : '#94a3b8';
|
|
}
|
|
}
|
|
|
|
// --- REAL-TIME CALL RINGTONE AUDIO SYNTHESIZER ---
|
|
class CallRingtoneEngine {
|
|
constructor() {
|
|
this.ctx = null;
|
|
this.interval = null;
|
|
this.isPlaying = false;
|
|
}
|
|
|
|
init() {
|
|
try {
|
|
if (!this.ctx) {
|
|
const AudioCtx = window.AudioContext || window.webkitAudioContext;
|
|
this.ctx = new AudioCtx();
|
|
}
|
|
if (this.ctx && this.ctx.state === 'suspended') {
|
|
this.ctx.resume();
|
|
}
|
|
} catch(e) { console.log('Audio init:', e); }
|
|
}
|
|
|
|
start() {
|
|
this.init();
|
|
if (this.isPlaying) return;
|
|
this.isPlaying = true;
|
|
|
|
this.playTone();
|
|
if (this.interval) clearInterval(this.interval);
|
|
this.interval = setInterval(() => {
|
|
if (this.isPlaying) this.playTone();
|
|
}, 2400);
|
|
}
|
|
|
|
playTone() {
|
|
this.init();
|
|
if (!this.ctx || !this.isPlaying) return;
|
|
try {
|
|
const now = this.ctx.currentTime;
|
|
const osc1 = this.ctx.createOscillator();
|
|
const osc2 = this.ctx.createOscillator();
|
|
const gain = this.ctx.createGain();
|
|
|
|
osc1.type = 'sine';
|
|
osc2.type = 'sine';
|
|
|
|
// Loud, authentic phone call ring frequencies (C5 523Hz + E5 659Hz)
|
|
osc1.frequency.setValueAtTime(523.25, now);
|
|
osc2.frequency.setValueAtTime(659.25, now);
|
|
|
|
gain.gain.setValueAtTime(0.001, now);
|
|
gain.gain.linearRampToValueAtTime(0.35, now + 0.08);
|
|
gain.gain.setValueAtTime(0.35, now + 1.1);
|
|
gain.gain.exponentialRampToValueAtTime(0.001, now + 1.3);
|
|
|
|
osc1.connect(gain);
|
|
osc2.connect(gain);
|
|
gain.connect(this.ctx.destination);
|
|
|
|
osc1.start(now);
|
|
osc2.start(now);
|
|
|
|
osc1.stop(now + 1.35);
|
|
osc2.stop(now + 1.35);
|
|
} catch(e) {}
|
|
}
|
|
|
|
stop() {
|
|
this.isPlaying = false;
|
|
if (this.interval) {
|
|
clearInterval(this.interval);
|
|
this.interval = null;
|
|
}
|
|
}
|
|
}
|
|
const callRingtone = new CallRingtoneEngine();
|
|
|
|
// Unlock browser AudioContext on user gesture anywhere on page
|
|
['click', 'keydown', 'touchstart'].forEach(evt => {
|
|
document.addEventListener(evt, () => callRingtone.init(), { passive: true });
|
|
});
|
|
|
|
// Active Call Listening & Instant BroadcastChannel Signaling State
|
|
let activeIncomingCall = null;
|
|
let iAmTheCaller = false;
|
|
let ringTimeoutTimer = null;
|
|
const dismissedCallIds = new Set();
|
|
const endedCallIds = new Set();
|
|
const currentUserId = {{ Auth::id() }};
|
|
const globalCallChannel = new BroadcastChannel('global_call_alerts');
|
|
const adminPageLoadTimestamp = Date.now();
|
|
|
|
function triggerIncomingCallRing(callData, isRealtimeBroadcast = false) {
|
|
if (endedCallIds.has(callData.id) || dismissedCallIds.has(callData.id)) return;
|
|
if (iAmTheCaller && currentInterviewId == callData.id) return;
|
|
if (interviewerLocalStream && currentInterviewId == callData.id) return;
|
|
|
|
// Only play ringtone for real-time fresh calls initiated within the last 8 seconds
|
|
if (callData.call_started_at) {
|
|
const startedTime = new Date(callData.call_started_at).getTime();
|
|
const elapsedMs = Date.now() - startedTime;
|
|
if (elapsedMs > 8000 && !isRealtimeBroadcast) {
|
|
dismissedCallIds.add(callData.id);
|
|
return;
|
|
}
|
|
} else if (!isRealtimeBroadcast) {
|
|
dismissedCallIds.add(callData.id);
|
|
return;
|
|
}
|
|
|
|
activeIncomingCall = callData;
|
|
document.getElementById('incoming-cand-name').innerText = callData.candidate_name;
|
|
document.getElementById('incoming-starter-info').innerText = '📞 Call initiated by: ' + (callData.starter_name || 'Panelist');
|
|
document.getElementById('incoming-call-modal').classList.add('active');
|
|
callRingtone.start();
|
|
|
|
// Set 8-second auto-stop ring timeout
|
|
if (ringTimeoutTimer) clearTimeout(ringTimeoutTimer);
|
|
let remainingMs = 8000;
|
|
if (callData.call_started_at) {
|
|
const startedTime = new Date(callData.call_started_at).getTime();
|
|
const elapsedMs = Date.now() - startedTime;
|
|
remainingMs = Math.max(1000, 8000 - elapsedMs);
|
|
}
|
|
|
|
ringTimeoutTimer = setTimeout(() => {
|
|
declineIncomingCall(true);
|
|
}, remainingMs);
|
|
}
|
|
|
|
globalCallChannel.onmessage = (event) => {
|
|
const data = event.data;
|
|
if (!data) return;
|
|
|
|
if (data.type === 'incoming_call') {
|
|
triggerIncomingCallRing({
|
|
id: data.interview_id,
|
|
candidate_name: data.candidate_name,
|
|
submission_unique_id: data.submission_unique_id,
|
|
starter_name: data.starter_name,
|
|
call_started_at: data.call_started_at || new Date().toISOString()
|
|
}, true);
|
|
} else if (data.type === 'call_ended') {
|
|
endedCallIds.add(data.interview_id);
|
|
dismissedCallIds.add(data.interview_id);
|
|
callRingtone.stop();
|
|
if (ringTimeoutTimer) {
|
|
clearTimeout(ringTimeoutTimer);
|
|
ringTimeoutTimer = null;
|
|
}
|
|
document.getElementById('incoming-call-modal').classList.remove('active');
|
|
if (activeIncomingCall && activeIncomingCall.id == data.interview_id) {
|
|
activeIncomingCall = null;
|
|
}
|
|
}
|
|
};
|
|
|
|
function pollGlobalActiveCalls() {
|
|
fetch(`{{ route('interview.active-calls') }}`, {
|
|
headers: { 'Accept': 'application/json' }
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data || !data.active_calls || data.active_calls.length === 0) {
|
|
if (activeIncomingCall) {
|
|
declineIncomingCall(true);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const incoming = data.active_calls.find(call => {
|
|
if (endedCallIds.has(call.id)) return false;
|
|
if (iAmTheCaller && currentInterviewId == call.id) return false;
|
|
if (interviewerLocalStream && currentInterviewId == call.id) return false;
|
|
if (dismissedCallIds.has(call.id)) return false;
|
|
return true;
|
|
});
|
|
|
|
if (incoming) {
|
|
// Check if call was started before page refresh
|
|
const startedTime = incoming.call_started_at ? new Date(incoming.call_started_at).getTime() : 0;
|
|
if (startedTime > 0 && startedTime < (adminPageLoadTimestamp - 4000)) {
|
|
// Ongoing call from before page reload: silent status update without ringtone
|
|
dismissedCallIds.add(incoming.id);
|
|
return;
|
|
}
|
|
|
|
if (!activeIncomingCall || activeIncomingCall.id !== incoming.id) {
|
|
triggerIncomingCallRing(incoming, false);
|
|
}
|
|
} else if (activeIncomingCall) {
|
|
declineIncomingCall(true);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
// Poll for active calls every 1.5 seconds
|
|
setInterval(pollGlobalActiveCalls, 1500);
|
|
|
|
function acceptIncomingCall() {
|
|
callRingtone.stop();
|
|
if (ringTimeoutTimer) {
|
|
clearTimeout(ringTimeoutTimer);
|
|
ringTimeoutTimer = null;
|
|
}
|
|
document.getElementById('incoming-call-modal').classList.remove('active');
|
|
|
|
if (activeIncomingCall) {
|
|
const targetCall = activeIncomingCall;
|
|
activeIncomingCall = null;
|
|
openReviewModal(targetCall.id, targetCall.candidate_name, targetCall.submission_unique_id, true);
|
|
}
|
|
}
|
|
|
|
function declineIncomingCall(silent = false) {
|
|
callRingtone.stop();
|
|
if (ringTimeoutTimer) {
|
|
clearTimeout(ringTimeoutTimer);
|
|
ringTimeoutTimer = null;
|
|
}
|
|
document.getElementById('incoming-call-modal').classList.remove('active');
|
|
|
|
if (activeIncomingCall) {
|
|
dismissedCallIds.add(activeIncomingCall.id);
|
|
activeIncomingCall = null;
|
|
}
|
|
|
|
if (!silent && typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'info',
|
|
title: 'Call Missed / Declined',
|
|
text: 'You can click "Join Active Call" from the list whenever you are ready.',
|
|
timer: 3000,
|
|
showConfirmButton: false,
|
|
toast: true,
|
|
position: 'top-end'
|
|
});
|
|
}
|
|
}
|
|
|
|
let liveSyncChannel = null;
|
|
|
|
function subscribeLiveSync(interviewId) {
|
|
if (liveSyncChannel) {
|
|
try { liveSyncChannel.close(); } catch(e) {}
|
|
}
|
|
liveSyncChannel = new BroadcastChannel('live_sync_' + interviewId);
|
|
liveSyncChannel.onmessage = function(event) {
|
|
const data = event.data;
|
|
if (!data) return;
|
|
|
|
if (data.type === 'code_sync') {
|
|
if (data.language) {
|
|
const langEl = document.getElementById('modal-code-lang');
|
|
if (langEl) langEl.innerText = data.language.toUpperCase();
|
|
}
|
|
if (data.code !== undefined) {
|
|
const codeEl = document.getElementById('modal-code-display');
|
|
if (codeEl) codeEl.innerText = data.code || '// Candidate has not typed any code yet.';
|
|
}
|
|
} else if (data.type === 'notes_sync') {
|
|
if (data.notes !== undefined) {
|
|
const notesEl = document.getElementById('modal-notes-display');
|
|
if (notesEl) notesEl.innerText = data.notes || 'No candidate notes written yet.';
|
|
}
|
|
} else if (data.type === 'drawing_sync') {
|
|
const drawingImg = document.getElementById('modal-drawing-img');
|
|
const noDrawing = document.getElementById('no-drawing-placeholder');
|
|
if (data.drawing) {
|
|
if (drawingImg) {
|
|
drawingImg.src = data.drawing;
|
|
drawingImg.style.display = 'block';
|
|
}
|
|
if (noDrawing) noDrawing.style.display = 'none';
|
|
} else {
|
|
if (drawingImg) drawingImg.style.display = 'none';
|
|
if (noDrawing) noDrawing.style.display = 'block';
|
|
}
|
|
} else if (data.type === 'chat_message') {
|
|
pollReviewData();
|
|
}
|
|
};
|
|
}
|
|
|
|
function openReviewModal(id, name, uid, autoJoinCall = false) {
|
|
currentInterviewId = id;
|
|
acknowledgedViolationCount = 0;
|
|
sosDismissed = false;
|
|
|
|
document.getElementById('modal-cand-name').innerText = name;
|
|
document.getElementById('modal-cand-uid').innerText = 'Unique Submission ID: ' + uid;
|
|
|
|
const candInitials = getInitials(name);
|
|
const avatarCircle = document.getElementById('modal-cand-avatar-circle');
|
|
const avatarName = document.getElementById('cand-avatar-name');
|
|
if (avatarCircle) avatarCircle.innerText = candInitials;
|
|
if (avatarName) avatarName.innerText = name;
|
|
|
|
document.getElementById('review-modal').classList.add('active');
|
|
resetZoomScreen();
|
|
switchIdeTab('code');
|
|
|
|
subscribeLiveSync(id);
|
|
pollReviewData();
|
|
clearInterval(sosPollInterval);
|
|
sosPollInterval = setInterval(pollReviewData, 500);
|
|
|
|
if (autoJoinCall) {
|
|
setTimeout(() => {
|
|
startInterviewerCall(true);
|
|
}, 400);
|
|
}
|
|
}
|
|
|
|
function pollReviewData() {
|
|
if (!currentInterviewId) return;
|
|
fetch(`{{ route('interview.poll', ':id') }}`.replace(':id', currentInterviewId), {
|
|
headers: { 'Accept': 'application/json' }
|
|
})
|
|
.then(r => {
|
|
if (!r.ok) return null;
|
|
const contentType = r.headers.get('content-type');
|
|
if (!contentType || !contentType.includes('application/json')) return null;
|
|
return r.json();
|
|
})
|
|
.then(data => {
|
|
if (!data) return;
|
|
document.getElementById('modal-code-lang').innerText = (data.submitted_language || 'UNKNOWN').toUpperCase();
|
|
document.getElementById('modal-code-display').innerText = data.submitted_code || '// Candidate has not typed any code yet.';
|
|
document.getElementById('modal-output-display').innerText = data.code_output || 'No execution output.';
|
|
document.getElementById('modal-notes-display').innerText = data.candidate_notes || 'No candidate notes written yet.';
|
|
|
|
const drawingImg = document.getElementById('modal-drawing-img');
|
|
const noDrawing = document.getElementById('no-drawing-placeholder');
|
|
if (data.candidate_drawing) {
|
|
drawingImg.src = data.candidate_drawing;
|
|
drawingImg.style.display = 'block';
|
|
noDrawing.style.display = 'none';
|
|
} else {
|
|
drawingImg.style.display = 'none';
|
|
noDrawing.style.display = 'block';
|
|
}
|
|
|
|
// Render Candidate Saved Video Recordings in Profile Modal (Descending order by timestamp)
|
|
const recContainer = document.getElementById('modal-recordings-container');
|
|
if (recContainer) {
|
|
const recPath = data.recording_path;
|
|
let recList = data.recordings || [];
|
|
|
|
if (recList.length === 0 && recPath) {
|
|
recList = [{ url: recPath, created_at: new Date().toISOString(), original_index: 0 }];
|
|
}
|
|
|
|
if (recList.length > 0) {
|
|
// Ensure descending order by created_at
|
|
recList.sort((a, b) => {
|
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
const timeB = b.created_at ? new Date(b.created_at).getTime() : 0;
|
|
return timeB - timeA;
|
|
});
|
|
|
|
let recHtml = `<div style="font-size: 0.75rem; color: #38bdf8; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
|
|
<span>📹 Stored Video Sessions (${recList.length} recording${recList.length > 1 ? 's' : ''})</span>
|
|
<span style="font-size: 0.65rem; color: #94a3b8;">📜 Scroll to view older recordings</span>
|
|
</div>`;
|
|
|
|
recList.forEach((r, displayIdx) => {
|
|
let videoUrl = typeof r === 'string' ? r : (r.stream_url || r.url || recPath);
|
|
if (videoUrl && !videoUrl.startsWith('http') && !videoUrl.startsWith('/')) {
|
|
videoUrl = '/' + videoUrl;
|
|
}
|
|
if (videoUrl && videoUrl.includes('/storage/')) {
|
|
videoUrl = videoUrl.replace('/storage/', '/media-stream/');
|
|
}
|
|
const origIdx = (typeof r === 'object' && r.original_index !== undefined) ? r.original_index : displayIdx;
|
|
const dateObj = (r && r.created_at) ? new Date(r.created_at) : new Date();
|
|
const dateStr = dateObj.toLocaleDateString() + ' ' + dateObj.toLocaleTimeString();
|
|
const downloadUrl = (typeof r === 'object' && r.download_url) ? r.download_url : (`{{ route('interview.download-recording', ':id') }}`.replace(':id', currentInterviewId) + `?index=${origIdx}`);
|
|
const mimeType = (typeof r === 'object' && r.mime_type) ? r.mime_type : ((videoUrl && videoUrl.includes('.mp4')) ? 'video/mp4' : 'video/webm');
|
|
|
|
recHtml += `<div style="background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; margin-bottom: 12px; transition: all 0.2s ease;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
<div>
|
|
<strong style="color: white; font-size: 0.8rem;">📹 Session Recording #${recList.length - displayIdx}</strong>
|
|
<span style="font-size: 0.7rem; color: #94a3b8; margin-left: 8px;">📅 ${dateStr}</span>
|
|
</div>
|
|
<a href="${downloadUrl}" target="_blank" download class="btn-nav" style="background: #10b981; color: white; border: none; font-size: 0.75rem; font-weight: 700; padding: 4px 12px; text-decoration: none; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;">
|
|
📥 Download Video
|
|
</a>
|
|
</div>
|
|
<video controls preload="metadata" style="width: 100%; max-height: 240px; border-radius: 8px; background: #000; outline: none; border: 1px solid rgba(255,255,255,0.1);">
|
|
<source src="${videoUrl}" type="${mimeType}">
|
|
<source src="${videoUrl}">
|
|
Your browser does not support video playback.
|
|
</video>
|
|
</div>`;
|
|
});
|
|
recContainer.innerHTML = recHtml;
|
|
} else {
|
|
recContainer.innerHTML = '<div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No video recordings saved for this candidate yet.</div>';
|
|
}
|
|
}
|
|
|
|
const chatHistory = document.getElementById('interviewer-chat-history');
|
|
if (chatHistory && data.warnings && data.warnings.length > 0) {
|
|
let chatHtml = '';
|
|
data.warnings.forEach(w => {
|
|
const isInterviewer = w.sent_by !== null;
|
|
const senderName = isInterviewer ? (w.sender ? w.sender.name : 'You (Interviewer)') : (data.candidate_name || 'Candidate');
|
|
const badgeColor = isInterviewer ? '#6366f1' : '#38bdf8';
|
|
const bgColor = isInterviewer ? 'rgba(99,102,241,0.1)' : 'rgba(56,189,248,0.1)';
|
|
|
|
chatHtml += `<div style="margin-bottom:8px; background:${bgColor}; padding:8px 10px; border-radius:8px; border-left:3px solid ${badgeColor};">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
|
<strong style="color:${badgeColor}; font-size:0.75rem;">${senderName}</strong>
|
|
<span style="font-size:0.65rem; color:#94a3b8;">${new Date(w.created_at || Date.now()).toLocaleTimeString()}</span>
|
|
</div>
|
|
<div style="color: #ffffff !important; font-size:0.85rem; font-weight: 500; line-height:1.4;">${w.message}</div>
|
|
</div>`;
|
|
});
|
|
chatHistory.innerHTML = chatHtml;
|
|
chatHistory.scrollTop = chatHistory.scrollHeight;
|
|
}
|
|
|
|
// Update Tab Switch Screenshot Toggle UI State
|
|
currentTabScreenshotEnabled = (data.enable_tab_switch_screenshot !== undefined) ? Boolean(data.enable_tab_switch_screenshot) : true;
|
|
updateScreenshotToggleBtnUI(currentTabScreenshotEnabled);
|
|
|
|
// Render Captured Tab-Switch Screenshots Gallery
|
|
const shotContainer = document.getElementById('modal-screenshots-container');
|
|
if (shotContainer) {
|
|
const shotList = data.tab_switch_screenshots || [];
|
|
if (shotList.length > 0) {
|
|
let shotHtml = `<div style="font-size: 0.75rem; color: #f59e0b; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
|
|
<span>📸 Tab-Switch Screenshots Captured (${shotList.length})</span>
|
|
<span style="font-size: 0.65rem; color: #94a3b8;">Click image to enlarge full size</span>
|
|
</div><div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;">`;
|
|
|
|
shotList.forEach((s, idx) => {
|
|
let url = typeof s === 'string' ? s : (s.url || s.full_url);
|
|
if (url && !url.startsWith('http') && !url.startsWith('/')) {
|
|
url = '/' + url;
|
|
}
|
|
const timeStr = (s && s.timestamp) ? new Date(s.timestamp).toLocaleTimeString() : '';
|
|
shotHtml += `<div style="background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px; text-align: center;">
|
|
<img src="${url}" style="width: 100%; height: 110px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,0.1);" onclick="window.open('${url}', '_blank')" title="Click to view full image" />
|
|
<div style="font-size: 0.65rem; color: #94a3b8; margin-top: 4px;">📅 ${timeStr}</div>
|
|
<a href="${url}" target="_blank" download class="btn-nav" style="background: #f59e0b; color: white; border: none; font-size: 0.65rem; font-weight: 700; padding: 3px 8px; text-decoration: none; border-radius: 4px; display: inline-block; margin-top: 4px;">
|
|
📥 View / Download
|
|
</a>
|
|
</div>`;
|
|
});
|
|
shotHtml += `</div>`;
|
|
shotContainer.innerHTML = shotHtml;
|
|
} else {
|
|
shotContainer.innerHTML = '<div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No tab-switch screenshots captured for this candidate yet.</div>';
|
|
}
|
|
}
|
|
|
|
// React to Global Call Status & Control Recording Button Availability
|
|
const callStatusBadge = document.getElementById('interviewer-call-status');
|
|
const recStartBtn = document.getElementById('btn-start-recording');
|
|
const recStopBtn = document.getElementById('btn-stop-recording');
|
|
|
|
if (callStatusBadge && data.call_status) {
|
|
if (data.call_status === 'active') {
|
|
if (!interviewerLocalStream) {
|
|
callStatusBadge.innerText = 'CALL ACTIVE';
|
|
callStatusBadge.style.background = 'rgba(16,185,129,0.2)';
|
|
callStatusBadge.style.color = '#34d399';
|
|
document.getElementById('btn-start-call').innerText = '📞 Join Call';
|
|
document.getElementById('btn-start-call').style.background = '#6366f1';
|
|
document.getElementById('btn-start-call').style.display = 'inline-block';
|
|
document.getElementById('btn-leave-call').style.display = 'none';
|
|
document.getElementById('btn-end-all-call').style.display = 'none';
|
|
} else {
|
|
callStatusBadge.innerText = 'CONNECTED (LIVE)';
|
|
callStatusBadge.style.background = 'rgba(16,185,129,0.3)';
|
|
callStatusBadge.style.color = '#34d399';
|
|
document.getElementById('btn-start-call').style.display = 'none';
|
|
document.getElementById('btn-leave-call').style.display = 'inline-block';
|
|
document.getElementById('btn-end-all-call').style.display = 'inline-block';
|
|
}
|
|
// Recording button ONLY available when call has started
|
|
if (recStartBtn && (!adminMediaRecorder || adminMediaRecorder.state === 'inactive')) {
|
|
recStartBtn.style.display = 'inline-flex';
|
|
}
|
|
} else if (data.call_status === 'ended' || data.call_status === 'idle') {
|
|
if (interviewerLocalStream && data.call_status === 'ended') leaveInterviewerCall();
|
|
callStatusBadge.innerText = (data.call_status === 'ended') ? 'CALL ENDED' : 'DISCONNECTED';
|
|
callStatusBadge.style.background = (data.call_status === 'ended') ? 'rgba(239,68,68,0.2)' : 'rgba(99,102,241,0.2)';
|
|
callStatusBadge.style.color = (data.call_status === 'ended') ? '#fca5a5' : '#818cf8';
|
|
document.getElementById('btn-start-call').innerText = (data.call_status === 'ended') ? '📞 Restart Call' : '📞 Start / Join Call';
|
|
document.getElementById('btn-start-call').style.background = '#10b981';
|
|
document.getElementById('btn-start-call').style.display = 'inline-block';
|
|
document.getElementById('btn-leave-call').style.display = 'none';
|
|
document.getElementById('btn-end-all-call').style.display = 'none';
|
|
|
|
// Recording button HIDDEN when call is not active
|
|
if (recStartBtn) recStartBtn.style.display = 'none';
|
|
if (recStopBtn) recStopBtn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
let logsHtml = '';
|
|
let currentViolations = [];
|
|
|
|
if (data.proctor_logs && data.proctor_logs.length > 0) {
|
|
data.proctor_logs.forEach(l => {
|
|
let icon = '🔴';
|
|
if (l.type === 'focus_lost') icon = '🟡';
|
|
if (l.type === 'gaze_anomaly' || l.type === 'gaze_fixed_staring') icon = '👁️';
|
|
if (l.type === 'gaze_lower_device' || l.type === 'reading_external_device') icon = '📱';
|
|
if (l.type === 'question_repeat_lower' || l.type === 'question_repetition') icon = '🗣️';
|
|
if (l.type === 'talking_on_phone') icon = '📞';
|
|
if (l.type === 'external_ai_detected') icon = '🤖';
|
|
if (l.type === 'tab_switch') icon = '📸';
|
|
|
|
if (['paste_event', 'tab_switch', 'focus_lost', 'gaze_anomaly', 'gaze_fixed_staring', 'gaze_lower_device', 'question_repeat_lower', 'question_repetition', 'external_ai_detected', 'talking_secondary_person', 'talking_on_phone', 'reading_external_device'].includes(l.type)) {
|
|
currentViolations.push(l);
|
|
}
|
|
|
|
let screenshotLink = l.screenshot_url ? `<a href="${l.screenshot_url}" target="_blank" style="color: #38bdf8; text-decoration: underline; margin-left: 6px;">[📸 View Screenshot]</a>` : '';
|
|
let aiBadge = '';
|
|
|
|
if (l.ai_verdict) {
|
|
const confPct = Math.round((l.ai_verdict.confidence || 0.85) * 100);
|
|
const engineName = l.ai_verdict.engine || 'AI Engine';
|
|
const toolName = l.ai_verdict.ai_tool_detected ? ` • Detected: <strong style="color:#fde047;">${l.ai_verdict.ai_tool_detected}</strong>` : '';
|
|
|
|
aiBadge = `<div style="margin-top: 4px; padding: 4px 8px; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.4); border-radius: 6px; font-size: 0.7rem; color: #a5b4fc;">
|
|
🤖 <strong>AI Inspector (${engineName}):</strong> ${confPct}% Cheating Confidence${toolName}
|
|
</div>`;
|
|
}
|
|
|
|
logsHtml += `<div style="margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.05); padding-bottom:6px;">
|
|
<strong>${icon} ${l.type.toUpperCase()}:</strong> ${l.details || ''}${screenshotLink}
|
|
${aiBadge}
|
|
<div style="font-size:0.65rem; color:#94a3b8; margin-top:2px;">${new Date(l.timestamp).toLocaleTimeString()}</div>
|
|
</div>`;
|
|
});
|
|
} else {
|
|
logsHtml = '<div style="color:#34d399;">✅ Zero proctoring violations recorded.</div>';
|
|
}
|
|
document.getElementById('modal-logs-display').innerHTML = logsHtml;
|
|
|
|
activeViolations = currentViolations;
|
|
const totalViolations = currentViolations.length;
|
|
const sosBtn = document.getElementById('sos-alert-btn');
|
|
|
|
if (totalViolations > 0) {
|
|
sosBtn.style.display = 'inline-block';
|
|
|
|
// AUTOMATIC SOS TRIGGER & RE-ARMING ON NEW CHEATING EVENTS (IF NOT MUTED BY PANEL)
|
|
if (totalViolations > acknowledgedViolationCount && !sosAutoTriggerDisabled) {
|
|
sosDismissed = false;
|
|
sosBtn.style.animation = 'sosPulse 1.2s infinite alternate';
|
|
const hasExternalAi = currentViolations.some(v => v.type === 'external_ai_detected');
|
|
const hasTabSwitch = currentViolations.some(v => v.type === 'tab_switch');
|
|
const hasPhoneTalk = currentViolations.some(v => v.type === 'talking_on_phone');
|
|
if (hasExternalAi) {
|
|
sosBtn.innerText = '🚨 candidate might use external ai';
|
|
sosBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
|
|
} else if (hasPhoneTalk) {
|
|
sosBtn.innerText = '📞 Candidate Talking on Phone';
|
|
sosBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
|
|
} else if (hasTabSwitch) {
|
|
sosBtn.innerText = '📸 Candidate Switched Browser Tab';
|
|
sosBtn.style.background = 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)';
|
|
} else {
|
|
sosBtn.innerText = '🚨 Candidate Proctoring Violation Alert';
|
|
sosBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
|
|
}
|
|
openSosModal();
|
|
}
|
|
} else {
|
|
sosBtn.style.display = 'none';
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
function openSosModal() {
|
|
let html = '';
|
|
if (activeViolations.length > 0) {
|
|
activeViolations.forEach(v => {
|
|
let typeTitle = v.type.toUpperCase();
|
|
if (v.type === 'external_ai_detected') {
|
|
typeTitle = 'candidate might use external ai';
|
|
} else if (v.type === 'tab_switch') {
|
|
typeTitle = 'Candidate Switched Browser Tab';
|
|
} else if (v.type === 'talking_on_phone') {
|
|
typeTitle = 'Candidate Talking on Phone';
|
|
} else if (v.type === 'reading_external_device') {
|
|
typeTitle = 'Candidate Reading from External Device';
|
|
} else if (v.type === 'question_repetition' || v.type === 'question_repeat_lower') {
|
|
typeTitle = 'Candidate Reading / Repeating Question Out Loud';
|
|
} else if (v.type === 'gaze_anomaly' || v.type === 'gaze_lower_device') {
|
|
typeTitle = 'Candidate Lower Eye Gaze Detected';
|
|
}
|
|
html += `<div style="margin-bottom: 10px; padding: 8px; background: rgba(255,255,255,0.04); border-radius: 6px; border-left: 3px solid ${v.type === 'external_ai_detected' ? '#ef4444' : '#f59e0b'};">
|
|
<strong style="color: ${v.type === 'external_ai_detected' ? '#fca5a5' : '#fde047'};">🚨 ${typeTitle}:</strong> ${v.details || 'Suspicious candidate activity detected.'}
|
|
<div style="font-size: 0.65rem; color: #94a3b8; margin-top: 3px;">Timestamp: ${new Date(v.timestamp).toLocaleTimeString()}</div>
|
|
</div>`;
|
|
});
|
|
} else {
|
|
html = '<div>Potential proctoring alert flagged by engine.</div>';
|
|
}
|
|
document.getElementById('sos-violation-list').innerHTML = html;
|
|
document.getElementById('sos-modal').classList.add('active');
|
|
}
|
|
|
|
function stopSosAlarm() {
|
|
document.getElementById('sos-modal').classList.remove('active');
|
|
acknowledgedViolationCount = activeViolations.length;
|
|
sosDismissed = true;
|
|
|
|
const sosBtn = document.getElementById('sos-alert-btn');
|
|
if (sosBtn) {
|
|
sosBtn.style.animation = 'none';
|
|
sosBtn.innerText = '✅ SOS Muted (Auto-rearm active)';
|
|
sosBtn.style.background = '#475569';
|
|
}
|
|
}
|
|
|
|
function interviewerLogoutAction() {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: 'Logout of Portal?',
|
|
text: 'Are you sure you want to log out of your session?',
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#475569',
|
|
confirmButtonText: 'Yes, Logout'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
document.getElementById('logout-form').submit();
|
|
}
|
|
});
|
|
} else {
|
|
document.getElementById('logout-form').submit();
|
|
}
|
|
}
|
|
|
|
function regenerateCandidatePassword() {
|
|
if (!currentInterviewId) return;
|
|
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: 'Regenerate Candidate Password?',
|
|
text: 'This will invalidate the candidate\'s current password and issue a new system password.',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#eab308',
|
|
cancelButtonColor: '#475569',
|
|
confirmButtonText: 'Regenerate Now'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetch(`{{ route('interview.regenerate-password', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'New Password Generated!',
|
|
text: 'New Candidate Passcode: ' + res.new_password,
|
|
confirmButtonColor: '#6366f1'
|
|
}).then(() => location.reload());
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function blockCandidateAction() {
|
|
if (!currentInterviewId) return;
|
|
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: '⛔ Block Candidate Email & IP?',
|
|
text: 'This will immediately terminate the candidate session and block their email and client IP address.',
|
|
icon: 'error',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#475569',
|
|
confirmButtonText: 'Yes, Block Candidate'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetch(`{{ route('interview.block-candidate', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Candidate Blocked',
|
|
text: res.message,
|
|
confirmButtonColor: '#6366f1'
|
|
}).then(() => {
|
|
closeReviewModal();
|
|
location.reload();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Metered TURN Server Integration (Managed via window.getMeteredIceServers in app.js / metered.js)
|
|
let globalIceServers = window.globalIceServers || [
|
|
{ urls: 'stun:stun.l.google.com:19302' }
|
|
];
|
|
|
|
function initMeteredIceServers() {
|
|
if (typeof window.getMeteredIceServers === 'function') {
|
|
return window.getMeteredIceServers().then(servers => {
|
|
if (Array.isArray(servers) && servers.length > 0) {
|
|
globalIceServers = servers;
|
|
}
|
|
return globalIceServers;
|
|
});
|
|
}
|
|
return Promise.resolve(globalIceServers);
|
|
}
|
|
|
|
// Initiate TURN credentials pre-fetch immediately
|
|
initMeteredIceServers();
|
|
|
|
|
|
|
|
function safePlayMediaStream(videoElem, stream, isSelf = false) {
|
|
if (!videoElem || !stream) return;
|
|
if (isSelf) {
|
|
videoElem.muted = true;
|
|
}
|
|
if (videoElem.srcObject !== stream) {
|
|
videoElem.srcObject = stream;
|
|
}
|
|
const playPromise = videoElem.play();
|
|
if (playPromise !== undefined) {
|
|
playPromise.catch(err => {
|
|
if (err.name === 'AbortError') {
|
|
videoElem.onloadedmetadata = () => {
|
|
videoElem.play().catch(() => {});
|
|
};
|
|
} else if (err.name === 'NotAllowedError') {
|
|
videoElem.play().catch(() => {});
|
|
} else {
|
|
console.log('Media play warning:', err);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function initInterviewerPeer() {
|
|
if (!currentInterviewId || typeof Peer === 'undefined') return;
|
|
await initMeteredIceServers();
|
|
|
|
const peerId = 'interviewer_' + currentInterviewId;
|
|
if (interviewerPeer && !interviewerPeer.destroyed) {
|
|
try { interviewerPeer.destroy(); } catch(e) {}
|
|
}
|
|
|
|
interviewerPeer = new Peer(peerId, {
|
|
config: {
|
|
iceServers: globalIceServers
|
|
}
|
|
});
|
|
|
|
interviewerPeer.on('open', id => {
|
|
console.log('Interviewer WebRTC Peer Registered:', id);
|
|
});
|
|
|
|
interviewerPeer.on('call', call => {
|
|
activeCall = call;
|
|
const sendStream = interviewerLocalStream || new MediaStream();
|
|
call.answer(sendStream);
|
|
|
|
call.on('stream', candRemoteStream => {
|
|
const candVid = document.getElementById('interviewer-cand-video');
|
|
const placeholder = document.getElementById('cand-video-placeholder');
|
|
if (candVid) {
|
|
safePlayMediaStream(candVid, candRemoteStream);
|
|
}
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
|
|
document.getElementById('interviewer-call-status').innerText = 'CONNECTED (LIVE)';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(16,185,129,0.3)';
|
|
document.getElementById('interviewer-call-status').style.color = '#34d399';
|
|
});
|
|
});
|
|
|
|
// Listen for candidate screen share peer stream with STUN iceServers
|
|
const screenPeerId = 'interviewer_screen_' + currentInterviewId;
|
|
if (screenReceiverPeer && !screenReceiverPeer.destroyed) {
|
|
try { screenReceiverPeer.destroy(); } catch(e) {}
|
|
}
|
|
screenReceiverPeer = new Peer(screenPeerId, {
|
|
config: {
|
|
iceServers: globalIceServers
|
|
}
|
|
});
|
|
screenReceiverPeer.on('call', call => {
|
|
call.answer();
|
|
call.on('stream', screenStream => {
|
|
const screenVid = document.getElementById('interviewer-screen-video');
|
|
const placeholder = document.getElementById('screen-video-placeholder');
|
|
if (screenVid) safePlayMediaStream(screenVid, screenStream);
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
});
|
|
});
|
|
}
|
|
|
|
let candVidZoomLevel = 1.0;
|
|
function zoomCandVideo(delta) {
|
|
if (delta === 0) candVidZoomLevel = 1.0;
|
|
else candVidZoomLevel = Math.max(0.5, Math.min(3.0, candVidZoomLevel + delta));
|
|
const vid = document.getElementById('interviewer-cand-video');
|
|
if (vid) {
|
|
vid.style.transform = `scale(${candVidZoomLevel})`;
|
|
vid.style.transformOrigin = 'center center';
|
|
vid.style.transition = 'transform 0.2s ease';
|
|
}
|
|
const badge = document.getElementById('cand-vid-zoom-badge');
|
|
if (badge) badge.innerText = `(${Math.round(candVidZoomLevel * 100)}%)`;
|
|
}
|
|
|
|
let interviewerPeerConnection = null;
|
|
interviewerSigChannel = null;
|
|
|
|
|
|
function initInterviewerSigChannel() {
|
|
if (!currentInterviewId) return;
|
|
if (interviewerSigChannel) interviewerSigChannel.close();
|
|
|
|
interviewerSigChannel = new BroadcastChannel('webrtc_call_' + currentInterviewId);
|
|
|
|
interviewerSigChannel.onmessage = async (event) => {
|
|
const msg = event.data;
|
|
if (!msg) return;
|
|
|
|
if (msg.type === 'violation_occurred') {
|
|
pollReviewData();
|
|
}
|
|
|
|
if ((msg.type === 'offer' || msg.type === 'candidate_ready') && msg.sender === 'candidate') {
|
|
if (msg.offer) {
|
|
await handleCandidateOffer(msg.offer);
|
|
} else if (interviewerLocalStream) {
|
|
sendOfferToCandidate();
|
|
}
|
|
} else if (msg.type === 'answer' && msg.sender === 'candidate' && interviewerPeerConnection) {
|
|
await interviewerPeerConnection.setRemoteDescription(new RTCSessionDescription(msg.answer));
|
|
} else if (msg.type === 'ice-candidate' && msg.sender === 'candidate' && interviewerPeerConnection && msg.candidate) {
|
|
try {
|
|
await interviewerPeerConnection.addIceCandidate(new RTCIceCandidate(msg.candidate));
|
|
} catch(e) {}
|
|
}
|
|
};
|
|
}
|
|
|
|
async function createInterviewerPeerConnection() {
|
|
if (interviewerPeerConnection) return interviewerPeerConnection;
|
|
await initMeteredIceServers();
|
|
|
|
interviewerPeerConnection = new RTCPeerConnection({
|
|
iceServers: globalIceServers
|
|
});
|
|
|
|
if (interviewerLocalStream) {
|
|
interviewerLocalStream.getTracks().forEach(track => {
|
|
interviewerPeerConnection.addTrack(track, interviewerLocalStream);
|
|
});
|
|
}
|
|
|
|
interviewerPeerConnection.ontrack = (event) => {
|
|
const candVid = document.getElementById('interviewer-cand-video');
|
|
const placeholder = document.getElementById('cand-video-placeholder');
|
|
if (candVid && event.streams[0]) {
|
|
safePlayMediaStream(candVid, event.streams[0]);
|
|
}
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
|
|
document.getElementById('interviewer-call-status').innerText = 'CONNECTED (LIVE)';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(16,185,129,0.3)';
|
|
document.getElementById('interviewer-call-status').style.color = '#34d399';
|
|
};
|
|
|
|
interviewerPeerConnection.onconnectionstatechange = async () => {
|
|
const state = interviewerPeerConnection.connectionState;
|
|
if (state === 'connected') {
|
|
const badge = document.getElementById('interviewer-call-status');
|
|
if (badge) {
|
|
badge.innerText = 'CONNECTED (LIVE)';
|
|
badge.style.background = 'rgba(16,185,129,0.3)';
|
|
badge.style.color = '#34d399';
|
|
}
|
|
} else if (state === 'failed' || state === 'disconnected') {
|
|
console.warn('Interviewer P2P Connection State:', state);
|
|
}
|
|
};
|
|
|
|
interviewerPeerConnection.onicecandidate = (event) => {
|
|
if (event.candidate) {
|
|
interviewerSigChannel.postMessage({ type: 'ice-candidate', candidate: event.candidate, sender: 'interviewer' });
|
|
}
|
|
};
|
|
|
|
return interviewerPeerConnection;
|
|
}
|
|
|
|
async function sendOfferToCandidate() {
|
|
const pc = await createInterviewerPeerConnection();
|
|
const offer = await pc.createOffer();
|
|
await pc.setLocalDescription(offer);
|
|
interviewerSigChannel.postMessage({ type: 'offer', offer: offer, sender: 'interviewer' });
|
|
}
|
|
|
|
async function handleCandidateOffer(offer) {
|
|
const pc = await createInterviewerPeerConnection();
|
|
await pc.setRemoteDescription(new RTCSessionDescription(offer));
|
|
const answer = await pc.createAnswer();
|
|
await pc.setLocalDescription(answer);
|
|
interviewerSigChannel.postMessage({ type: 'answer', answer: answer, sender: 'interviewer' });
|
|
}
|
|
|
|
function startInterviewerCall(isRejoin = false) {
|
|
if (!currentInterviewId) return;
|
|
|
|
if (!isRejoin) {
|
|
iAmTheCaller = true;
|
|
|
|
// Broadcast instant incoming call alert to all open tabs/windows
|
|
const candName = document.getElementById('modal-cand-name') ? document.getElementById('modal-cand-name').innerText : 'Candidate';
|
|
globalCallChannel.postMessage({
|
|
type: 'incoming_call',
|
|
interview_id: currentInterviewId,
|
|
candidate_name: candName,
|
|
starter_name: '{{ Auth::user()->name }}',
|
|
call_started_at: new Date().toISOString()
|
|
});
|
|
}
|
|
|
|
initInterviewerSigChannel();
|
|
|
|
// Notify backend that call session is active
|
|
fetch(`{{ route('interview.call-status', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ call_status: 'active', is_rejoin: isRejoin })
|
|
});
|
|
|
|
const handleStream = (stream) => {
|
|
interviewerLocalStream = stream;
|
|
const selfVid = document.getElementById('interviewer-self-video');
|
|
if (selfVid) {
|
|
selfVid.muted = true;
|
|
safePlayMediaStream(selfVid, stream, true);
|
|
}
|
|
document.getElementById('self-video-placeholder').style.display = 'none';
|
|
|
|
document.getElementById('btn-toggle-interviewer-mic').style.display = 'inline-block';
|
|
document.getElementById('btn-toggle-interviewer-cam').style.display = 'inline-block';
|
|
document.getElementById('btn-start-call').style.display = 'none';
|
|
document.getElementById('btn-leave-call').style.display = 'inline-block';
|
|
document.getElementById('btn-end-all-call').style.display = 'inline-block';
|
|
|
|
// Broadcast interviewer joined to candidate
|
|
if (interviewerSigChannel) {
|
|
interviewerSigChannel.postMessage({ type: 'interviewer_joined', sender: 'interviewer' });
|
|
}
|
|
|
|
// PeerJS connection
|
|
if (!interviewerPeer || interviewerPeer.destroyed) {
|
|
initInterviewerPeer();
|
|
}
|
|
|
|
const makePeerJSCall = () => {
|
|
if (!interviewerPeer || interviewerPeer.destroyed) return;
|
|
const candPeerId = 'cand_' + currentInterviewId;
|
|
activeCall = interviewerPeer.call(candPeerId, stream);
|
|
|
|
if (activeCall) {
|
|
activeCall.on('stream', candRemoteStream => {
|
|
const candVid = document.getElementById('interviewer-cand-video');
|
|
const placeholder = document.getElementById('cand-video-placeholder');
|
|
if (candVid) {
|
|
safePlayMediaStream(candVid, candRemoteStream);
|
|
}
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
|
|
candRemoteStream.onaddtrack = () => {
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
if (candVid) safePlayMediaStream(candVid, candRemoteStream);
|
|
};
|
|
|
|
document.getElementById('interviewer-call-status').innerText = 'CONNECTED (LIVE)';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(16,185,129,0.3)';
|
|
document.getElementById('interviewer-call-status').style.color = '#34d399';
|
|
});
|
|
}
|
|
};
|
|
|
|
if (interviewerPeer && interviewerPeer.open) {
|
|
makePeerJSCall();
|
|
} else if (interviewerPeer) {
|
|
interviewerPeer.on('open', makePeerJSCall);
|
|
}
|
|
};
|
|
|
|
const audioConstraints = {
|
|
echoCancellation: true,
|
|
noiseSuppression: true,
|
|
autoGainControl: true
|
|
};
|
|
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: audioConstraints })
|
|
.then(handleStream)
|
|
.catch(() => {
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
|
|
.then(handleStream)
|
|
.catch(() => {
|
|
navigator.mediaDevices.getUserMedia({ video: false, audio: true })
|
|
.then(handleStream)
|
|
.catch(() => {
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
|
|
.then(handleStream)
|
|
.catch(err => console.log('WebRTC Stream init:', err));
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function leaveInterviewerCall(isExplicitEnd = true) {
|
|
if (currentInterviewId && isExplicitEnd) {
|
|
const endingId = currentInterviewId;
|
|
endedCallIds.add(endingId);
|
|
dismissedCallIds.add(endingId);
|
|
|
|
if (typeof globalCallChannel !== 'undefined' && globalCallChannel) {
|
|
try {
|
|
globalCallChannel.postMessage({
|
|
type: 'call_ended',
|
|
interview_id: endingId
|
|
});
|
|
} catch(e) {}
|
|
}
|
|
|
|
if (typeof callSigChannel !== 'undefined' && callSigChannel) {
|
|
try {
|
|
callSigChannel.postMessage({ type: 'end_call_all', interview_id: endingId });
|
|
} catch(e) {}
|
|
}
|
|
|
|
if (typeof interviewerSigChannel !== 'undefined' && interviewerSigChannel) {
|
|
try {
|
|
interviewerSigChannel.postMessage({ type: 'end_call_all', interview_id: endingId });
|
|
} catch(e) {}
|
|
}
|
|
|
|
fetch(`{{ route('interview.call-status', ':id') }}`.replace(':id', endingId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ call_status: 'ended' })
|
|
}).catch(e => {});
|
|
}
|
|
|
|
if (interviewerLocalStream) {
|
|
try {
|
|
interviewerLocalStream.getTracks().forEach(t => t.stop());
|
|
} catch(e) {}
|
|
interviewerLocalStream = null;
|
|
}
|
|
if (activeCall) {
|
|
try { activeCall.close(); } catch(e) {}
|
|
activeCall = null;
|
|
}
|
|
if (interviewerPeer) {
|
|
try { interviewerPeer.destroy(); } catch(e) {}
|
|
interviewerPeer = null;
|
|
}
|
|
if (screenReceiverPeer) {
|
|
try { screenReceiverPeer.destroy(); } catch(e) {}
|
|
screenReceiverPeer = null;
|
|
}
|
|
|
|
const candPlace = document.getElementById('cand-video-placeholder');
|
|
const screenPlace = document.getElementById('screen-video-placeholder');
|
|
const selfPlace = document.getElementById('self-video-placeholder');
|
|
if (candPlace) candPlace.style.display = 'flex';
|
|
if (screenPlace) screenPlace.style.display = 'flex';
|
|
if (selfPlace) selfPlace.style.display = 'flex';
|
|
|
|
const candVid = document.getElementById('interviewer-cand-video');
|
|
if (candVid) candVid.srcObject = null;
|
|
|
|
const selfVid = document.getElementById('interviewer-self-video');
|
|
if (selfVid) selfVid.srcObject = null;
|
|
|
|
const startBtn = document.getElementById('btn-start-call');
|
|
if (startBtn) {
|
|
startBtn.innerText = '📞 Call Candidate';
|
|
startBtn.style.display = 'inline-block';
|
|
startBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
|
|
startBtn.onclick = startInterviewerCall;
|
|
}
|
|
|
|
const leaveBtn = document.getElementById('btn-leave-call');
|
|
if (leaveBtn) leaveBtn.style.display = 'none';
|
|
|
|
const endAllBtn = document.getElementById('btn-end-all-call');
|
|
if (endAllBtn) endAllBtn.style.display = 'none';
|
|
|
|
const micBtn = document.getElementById('btn-toggle-interviewer-mic');
|
|
if (micBtn) micBtn.style.display = 'none';
|
|
|
|
const camBtn = document.getElementById('btn-toggle-interviewer-cam');
|
|
if (camBtn) camBtn.style.display = 'none';
|
|
|
|
const statusBadge = document.getElementById('interviewer-call-status');
|
|
if (statusBadge) {
|
|
statusBadge.innerText = 'CALL ENDED';
|
|
statusBadge.style.background = 'rgba(239,68,68,0.2)';
|
|
statusBadge.style.color = '#fca5a5';
|
|
}
|
|
}
|
|
|
|
function endCallForAll() {
|
|
const executeEndCall = () => {
|
|
if (typeof callRingtone !== 'undefined' && callRingtone) {
|
|
try { callRingtone.stop(); } catch(e) {}
|
|
}
|
|
const modal = document.getElementById('incoming-call-modal');
|
|
if (modal) modal.classList.remove('active');
|
|
activeIncomingCall = null;
|
|
|
|
iAmTheCaller = false;
|
|
leaveInterviewerCall(true);
|
|
};
|
|
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: '🛑 End Call for All Participants?',
|
|
text: 'This will terminate the 2-way call session for candidate and all panelists.',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#475569',
|
|
confirmButtonText: 'Yes, End Call for All'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
executeEndCall();
|
|
}
|
|
});
|
|
} else {
|
|
if (confirm('End Call for All Participants?')) {
|
|
executeEndCall();
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- SILENT CALL RECORDING ENGINE FOR INTERVIEWERS & ADMINS ---
|
|
let adminMediaRecorder = null;
|
|
let adminRecordedChunks = [];
|
|
let recAudioContext = null;
|
|
|
|
function startCallRecording() {
|
|
if (!currentInterviewId) {
|
|
alert('Please open an active candidate interview session first.');
|
|
return;
|
|
}
|
|
|
|
const candVid = document.getElementById('interviewer-cand-video');
|
|
let candidateStream = (candVid && candVid.srcObject) ? candVid.srcObject : null;
|
|
let streamToRecord = new MediaStream();
|
|
|
|
// 1. Add Video Track (Candidate video or Interviewer fallback)
|
|
if (candidateStream) {
|
|
candidateStream.getVideoTracks().forEach(track => {
|
|
if (track.readyState === 'live') {
|
|
try { streamToRecord.addTrack(track); } catch(e) {}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (streamToRecord.getVideoTracks().length === 0 && interviewerLocalStream) {
|
|
interviewerLocalStream.getVideoTracks().forEach(track => {
|
|
if (track.readyState === 'live') {
|
|
try { streamToRecord.addTrack(track); } catch(e) {}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 2. Mix Multiple Audio Tracks into a SINGLE Audio Track via Web Audio API
|
|
// (MediaRecorder standard throws DOMException if streamToRecord has >1 audio track)
|
|
const candAudioTracks = candidateStream ? candidateStream.getAudioTracks().filter(t => t.readyState === 'live') : [];
|
|
const adminAudioTracks = interviewerLocalStream ? interviewerLocalStream.getAudioTracks().filter(t => t.readyState === 'live') : [];
|
|
|
|
if (candAudioTracks.length > 0 || adminAudioTracks.length > 0) {
|
|
try {
|
|
const AudioContextClass = window.AudioContext || window.webkitAudioContext;
|
|
if (recAudioContext) {
|
|
try { recAudioContext.close(); } catch(e) {}
|
|
}
|
|
recAudioContext = new AudioContextClass();
|
|
const audioDestination = recAudioContext.createMediaStreamDestination();
|
|
|
|
if (candAudioTracks.length > 0) {
|
|
const candAudioStream = new MediaStream(candAudioTracks);
|
|
const candSource = recAudioContext.createMediaStreamSource(candAudioStream);
|
|
candSource.connect(audioDestination);
|
|
}
|
|
|
|
if (adminAudioTracks.length > 0) {
|
|
const adminAudioStream = new MediaStream(adminAudioTracks);
|
|
const adminSource = recAudioContext.createMediaStreamSource(adminAudioStream);
|
|
adminSource.connect(audioDestination);
|
|
}
|
|
|
|
const mixedAudioTrack = audioDestination.stream.getAudioTracks()[0];
|
|
if (mixedAudioTrack) {
|
|
streamToRecord.addTrack(mixedAudioTrack);
|
|
}
|
|
} catch(e) {
|
|
console.warn('Web Audio API mixing fallback:', e);
|
|
const fallbackAudio = candAudioTracks[0] || adminAudioTracks[0];
|
|
if (fallbackAudio) {
|
|
try { streamToRecord.addTrack(fallbackAudio); } catch(err) {}
|
|
}
|
|
}
|
|
}
|
|
|
|
const activeTracks = streamToRecord.getTracks().filter(t => t.readyState === 'live');
|
|
if (activeTracks.length === 0) {
|
|
alert('No active video/audio stream available to record. Please start or join the call first.');
|
|
return;
|
|
}
|
|
|
|
adminRecordedChunks = [];
|
|
try {
|
|
let options = {};
|
|
if (typeof MediaRecorder.isTypeSupported === 'function') {
|
|
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8,opus')) {
|
|
options = { mimeType: 'video/webm;codecs=vp8,opus' };
|
|
} else if (MediaRecorder.isTypeSupported('video/webm')) {
|
|
options = { mimeType: 'video/webm' };
|
|
}
|
|
}
|
|
|
|
try {
|
|
adminMediaRecorder = new MediaRecorder(streamToRecord, options);
|
|
} catch(errOpt) {
|
|
adminMediaRecorder = new MediaRecorder(streamToRecord);
|
|
}
|
|
|
|
adminMediaRecorder.ondataavailable = function(e) {
|
|
if (e.data && e.data.size > 0) {
|
|
adminRecordedChunks.push(e.data);
|
|
}
|
|
};
|
|
|
|
adminMediaRecorder.onstop = function() {
|
|
if (recAudioContext) {
|
|
try { recAudioContext.close(); } catch(e) {}
|
|
recAudioContext = null;
|
|
}
|
|
if (adminRecordedChunks.length === 0) return;
|
|
const recMime = adminMediaRecorder.mimeType || 'video/webm';
|
|
const isMp4 = recMime.includes('mp4');
|
|
const ext = isMp4 ? 'mp4' : 'webm';
|
|
const blobType = isMp4 ? 'video/mp4' : 'video/webm';
|
|
|
|
const blob = new Blob(adminRecordedChunks, { type: blobType });
|
|
uploadRecordedBlob(blob, ext);
|
|
};
|
|
|
|
adminMediaRecorder.start(1000);
|
|
|
|
document.getElementById('btn-start-recording').style.display = 'none';
|
|
document.getElementById('btn-stop-recording').style.display = 'inline-flex';
|
|
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'info',
|
|
title: 'Recording Started',
|
|
text: 'Interview call recording is active (silent mode - candidate is not notified).',
|
|
toast: true,
|
|
position: 'top-end',
|
|
timer: 3000,
|
|
showConfirmButton: false
|
|
});
|
|
}
|
|
} catch(e) {
|
|
console.error('MediaRecorder error:', e);
|
|
alert('Recording failed to initialize: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function stopCallRecording() {
|
|
if (adminMediaRecorder && adminMediaRecorder.state !== 'inactive') {
|
|
adminMediaRecorder.stop();
|
|
}
|
|
|
|
document.getElementById('btn-start-recording').style.display = 'inline-flex';
|
|
document.getElementById('btn-stop-recording').style.display = 'none';
|
|
}
|
|
|
|
function uploadRecordedBlob(blob, ext = 'webm') {
|
|
if (!currentInterviewId) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('video', blob, `interview_${currentInterviewId}_${Date.now()}.${ext}`);
|
|
formData.append('_token', '{{ csrf_token() }}');
|
|
|
|
fetch(`{{ route('interview.upload-recording', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Recording Saved!',
|
|
text: 'Call recording saved successfully under Candidate Profile and Report.',
|
|
toast: true,
|
|
position: 'top-end',
|
|
timer: 3500,
|
|
showConfirmButton: false
|
|
});
|
|
}
|
|
pollReviewData();
|
|
}
|
|
})
|
|
.catch(err => console.log('Recording upload error:', err));
|
|
}
|
|
|
|
function toggleInterviewerMic() {
|
|
if (!interviewerLocalStream) return;
|
|
const audioTracks = interviewerLocalStream.getAudioTracks();
|
|
if (audioTracks.length > 0) {
|
|
isInterviewerMicOn = !isInterviewerMicOn;
|
|
audioTracks[0].enabled = isInterviewerMicOn;
|
|
const btn = document.getElementById('btn-toggle-interviewer-mic');
|
|
btn.innerText = isInterviewerMicOn ? '🎤 Mic On' : '🔇 Mic Muted';
|
|
btn.style.background = isInterviewerMicOn ? 'rgba(255,255,255,0.1)' : 'rgba(239,68,68,0.3)';
|
|
}
|
|
}
|
|
|
|
function toggleInterviewerCam() {
|
|
const selfPlaceholder = document.getElementById('self-video-placeholder');
|
|
const selfVid = document.getElementById('interviewer-self-video');
|
|
|
|
isInterviewerCamOn = !isInterviewerCamOn;
|
|
const btn = document.getElementById('btn-toggle-interviewer-cam');
|
|
btn.innerText = isInterviewerCamOn ? '📷 Cam On' : '🚫 Cam Off';
|
|
btn.style.background = isInterviewerCamOn ? 'rgba(255,255,255,0.1)' : 'rgba(239,68,68,0.3)';
|
|
|
|
if (interviewerLocalStream) {
|
|
const videoTracks = interviewerLocalStream.getVideoTracks();
|
|
if (videoTracks.length > 0) {
|
|
videoTracks[0].enabled = isInterviewerCamOn;
|
|
}
|
|
} else if (isInterviewerCamOn) {
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
|
|
.then(stream => {
|
|
interviewerLocalStream = stream;
|
|
if (selfVid) {
|
|
selfVid.srcObject = stream;
|
|
selfVid.play().catch(e => console.log(e));
|
|
}
|
|
if (selfPlaceholder) selfPlaceholder.style.display = 'none';
|
|
})
|
|
.catch(err => console.log('Interviewer cam preview:', err));
|
|
return;
|
|
}
|
|
|
|
if (selfPlaceholder) selfPlaceholder.style.display = isInterviewerCamOn ? 'none' : 'flex';
|
|
}
|
|
|
|
function endInterviewerCall() {
|
|
leaveInterviewerCall(true);
|
|
}
|
|
|
|
function closeReviewModal() {
|
|
clearInterval(sosPollInterval);
|
|
if (liveSyncChannel) {
|
|
try { liveSyncChannel.close(); } catch(e) {}
|
|
liveSyncChannel = null;
|
|
}
|
|
leaveInterviewerCall(true);
|
|
const modal = document.getElementById('review-modal');
|
|
if (modal) modal.classList.remove('active');
|
|
}
|
|
|
|
function sendSilentWarning() {
|
|
const input = document.getElementById('warning-input');
|
|
const msg = input.value.trim();
|
|
if (!msg || !currentInterviewId) return;
|
|
|
|
input.value = '';
|
|
if (typeof liveSyncChannel !== 'undefined' && liveSyncChannel) {
|
|
liveSyncChannel.postMessage({ type: 'chat_message', message: msg, sender: 'interviewer' });
|
|
}
|
|
|
|
fetch(`{{ route('interview.warning', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ message: msg })
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
pollReviewData();
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const openId = urlParams.get('open_interview');
|
|
const autoJoin = urlParams.get('join_call') === '1';
|
|
|
|
if (openId) {
|
|
fetch(`{{ route('interview.poll', ':id') }}`.replace(':id', openId), {
|
|
headers: { 'Accept': 'application/json' }
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data && data.status) {
|
|
openReviewModal(parseInt(openId), data.candidate_name || 'Candidate', data.submission_unique_id || openId, autoJoin);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|