Untitled

<div class="interview-window">
  <div *ngIf="!hasPermissions" class="permission-wrapper">
    <app-permission-request
      [isLoading]="isLoading"
      (permissionsGranted)="onPermissionsGranted($event)"
    ></app-permission-request>
  </div>
  <div *ngIf="silenceTimer > 0" class="bg-white">
    Silence detected for: {{ silenceTimer }} second{{
      silenceTimer === 1 ? '' : 's'
    }}.
  </div>
  <div class="bg-white">{{ isUserSpeaking }}</div>
  <div class="bg-white">{{ speechStoppedTime }}</div>

  <div class="interview-content" *ngIf="hasPermissions">
    <div class="main-video-container">
      <video #mainVideo autoplay playsinline muted class="main-video"></video>
      <div #micIcon class="mic-icon" [style.height.%]="speechLevel">
        <i class="pi pi-microphone"></i>
        <span class="mic-bar"></span>
      </div>
      <app-voice-circle
        *ngIf="stream"
        [stream]="stream"
        [isSpeaking]="isUserSpeaking"
        [speechLevel]="speechLevel"
        (soundDetected)="onSoundDetected()"
      ></app-voice-circle>
    </div>

    <div class="controls-section">
      <div class="session-info">
        <div class="timer-container">
          <span class="timer" [ngClass]="{ warning: isTimerWarning }">{{
            timer
          }}</span>
          <span class="separator">•</span>
          <span class="title">Interview with Aimie</span>
        </div>
      </div>
      <div class="controls-container">
        <!-- Settings button -->
        <button class="control-button settings" (click)="toggleSettings()">
          <i class="pi pi-cog"></i>
        </button>

        <!-- End Call button -->
        <button class="control-button end-call" (click)="endCall()">
          <i class="pi pi-phone"></i>
        </button>

        <!-- Report Issues button -->
        <button class="control-button report" (click)="reportIssues()">
          <i class="pi pi-exclamation-circle"></i>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Settings Dialog -->
<p-dialog
  [(visible)]="showSettings"
  [modal]="true"
  [draggable]="false"
  [resizable]="false"
  styleClass="settings-dialog"
  [showHeader]="false"
  [closable]="true"
  [closeOnEscape]="true"
  [dismissableMask]="true"
>
  <div class="settings-content">
    <h3>Settings</h3>

    <h3>Microphone</h3>
    <div class="select-container">
      <p-select
        [options]="audioInputs"
        [(ngModel)]="selectedAudioInput"
        (onChange)="onDeviceChange()"
        [disabled]="!isDevicesInitialized"
        placeholder="Select Microphone"
        optionLabel="label"
        optionValue="deviceId"
        [style]="{ width: '100%' }"
        appendTo="body"
      ></p-select>
    </div>

    <h3>Camera</h3>
    <div class="select-container">
      <p-select
        [options]="videoInputs"
        [(ngModel)]="selectedVideoInput"
        (onChange)="onDeviceChange()"
        [disabled]="!isDevicesInitialized"
        placeholder="Select Camera"
        optionLabel="label"
        optionValue="deviceId"
        [style]="{ width: '100%' }"
        appendTo="body"
      ></p-select>
    </div>

    <h3>Speaker</h3>
    <div class="select-container">
      <p-select
        [options]="audioOutputs"
        [(ngModel)]="selectedAudioOutput"
        (onChange)="onDeviceChange()"
        [disabled]="!isDevicesInitialized"
        placeholder="Select Speaker"
        optionLabel="label"
        optionValue="deviceId"
        [style]="{ width: '100%' }"
        appendTo="body"
      ></p-select>
    </div>

    <button
      pButton
      label="Done"
      (click)="showSettings = false"
      class="p-button-primary"
    ></button>
  </div>
</p-dialog>

<!-- End Call Dialog -->
<p-dialog
  [(visible)]="showEndConfirmation"
  [modal]="true"
  [draggable]="false"
  [resizable]="false"
  styleClass="end-call-dialog"
>
  <div class="end-call-content">
    <i
      class="pi pi-exclamation-triangle"
      style="font-size: 2rem; color: #ef4444"
    ></i>
    <h3>End Interview?</h3>
    <p>Are you sure you want to end this interview?</p>
    <div class="flex gap-2 justify-content-center">
      <button
        pButton
        label="Cancel"
        (click)="showEndConfirmation = false"
        class="p-button-text cancel-button"
      ></button>
      <button
        pButton
        label="End Interview"
        (click)="completeInterview()"
        class="p-button-danger"
      ></button>
    </div>
  </div>
</p-dialog>

<p-toast></p-toast>

<p-confirmDialog></p-confirmDialog>