kushal.saha
1c84a162ac
- overhaul the interviewer panel setup for more compact design - assesment scheduling is now in a drawer - replaced emojies with icon in candidate panel
69 lines
4.5 KiB
PHP
69 lines
4.5 KiB
PHP
@props([
|
|
'id',
|
|
'videoId',
|
|
'placeholderId',
|
|
'badgeText' => '',
|
|
'badgeId' => null,
|
|
'micStatusId' => null,
|
|
'camStatusId' => null,
|
|
'borderColor' => 'border-[#1b2233]',
|
|
'showZoom' => false,
|
|
'showFullscreen' => false,
|
|
'initials' => 'CD',
|
|
'avatarCircleId' => null,
|
|
'avatarNameId' => null,
|
|
'avatarTitle' => 'Video Stream',
|
|
'zoomInFn' => null,
|
|
'zoomOutFn' => null,
|
|
'zoomResetFn' => null,
|
|
'fullscreenFn' => null,
|
|
'containerId' => null,
|
|
'focused' => false,
|
|
])
|
|
|
|
<div id="{{ $id }}" {{ $attributes->twMerge(['class' => 'video-tile relative aspect-[16/10] bg-[#0d1220] border rounded-[10px] overflow-hidden flex flex-col items-center justify-center transition-all ' . ($focused ? 'border-[rgba(75,130,247,0.35)] shadow-[0_0_0_1px_rgba(75,130,247,0.35)]' : 'border-[#1b2233]')]) }}>
|
|
@if($showZoom || $showFullscreen)
|
|
<div class="tile-tools absolute top-2 right-2 z-20 flex gap-1">
|
|
@if($showZoom)
|
|
<button type="button" onclick="{{ $zoomInFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom In"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
|
|
<button type="button" onclick="{{ $zoomOutFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom Out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
|
|
<button type="button" onclick="{{ $zoomResetFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Reset Zoom"><i class="fa-solid fa-rotate-left"></i></button>
|
|
@endif
|
|
@if($showFullscreen)
|
|
<button type="button" onclick="{{ $fullscreenFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Fullscreen"><i class="fa-solid fa-expand"></i></button>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
@if($containerId)
|
|
<div id="{{ $containerId }}" class="w-full h-full overflow-auto">
|
|
<video id="{{ $videoId }}" autoplay playsinline {{ in_array($videoId, ['interviewer-screen-video', 'interviewer-self-video']) ? 'muted' : '' }} class="w-full h-full object-contain origin-top-left transition-transform duration-200" style="{{ $videoId === 'interviewer-screen-video' ? 'transform: none;' : 'transform: scaleX(-1);' }}"></video>
|
|
</div>
|
|
@else
|
|
<video id="{{ $videoId }}" autoplay playsinline {{ in_array($videoId, ['interviewer-screen-video', 'interviewer-self-video']) ? 'muted' : '' }} class="w-full h-full object-cover origin-center transition-transform duration-200" style="{{ $videoId === 'interviewer-screen-video' ? 'transform: none;' : 'transform: scaleX(-1);' }}"></video>
|
|
@endif
|
|
|
|
<div id="{{ $placeholderId }}" class="absolute inset-0 flex flex-col items-center justify-center bg-[#0d1220]/95 text-slate-400 text-xs z-10 p-3">
|
|
<div id="{{ $avatarCircleId }}" class="av w-8 h-8 rounded-full bg-linear-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-xs mb-2.5 shadow-md shadow-[#4b82f7]/20">
|
|
{{ $initials }}
|
|
</div>
|
|
<div id="{{ $avatarNameId }}" class="name text-xs font-semibold text-white">{{ $avatarTitle }}</div>
|
|
<div class="status text-[8px] text-[#5b637a] mt-1 text-center px-3">
|
|
{{ $slot->isNotEmpty() ? $slot : "Waiting for candidate…" }}
|
|
</div>
|
|
</div>
|
|
|
|
<span class="tile-tag absolute left-1 bottom-1 text-[9px] font-semibold tracking-wide px-2.5 py-1 rounded-md bg-black/50 text-slate-300 border border-[#1b2233] z-20 flex items-center gap-1.5 backdrop-blur-sm">
|
|
<span>{{ $badgeText }}</span>
|
|
@if($micStatusId || $camStatusId)
|
|
<span class="w-px h-2.5 bg-white/20 mx-0.5"></span>
|
|
@if($micStatusId)
|
|
<i id="{{ $micStatusId }}" class="fa-solid fa-microphone text-[#21c274] text-[10px]" title="Mic On"></i>
|
|
@endif
|
|
@if($camStatusId)
|
|
<i id="{{ $camStatusId }}" class="fa-solid fa-video text-[#21c274] text-[10px]" title="Camera On"></i>
|
|
@endif
|
|
@endif
|
|
</span>
|
|
</div>
|