<div class="ucap-video-viewer-container">
  <mat-toolbar color="accent" class="ucap-video-viewer-header">
    <mat-icon class="ucap-video-viewer-icon">video_label</mat-icon>
    <span class="ucap-video-viewer-title">{{ fileInfo.fileName }}</span>
    <span class="ucap-video-viewer-spacer"></span>
    <button
      mat-icon-button
      class="ucap-video-viewer-action"
      matTooltip="다운로드"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickDownload()"
    >
      <mat-icon>get_app</mat-icon>
    </button>

    <button
      mat-raised-button
      color="primary"
      class="ucap-video-viewer-action"
      (click)="onClickClose()"
    >
      Close
    </button>
  </mat-toolbar>
  <div class="ucap-video-viewer-body">
    <div
      class="ucap-video-viewer-video-icon"
      fxLayout="row"
      fxLayout.xs="column"
      fxLayoutAlign="center center"
    >
      <video
        [src]="fileDownloadUrl"
        #audioPlayer
        (playing)="onPlayingVideo()"
        (pause)="onPauseVideo()"
        (timeupdate)="onTimeUpdateVideo()"
        (volumechange)="onVolumeChangeVideo()"
        (loadstart)="onLoadStartVideo()"
        (loadeddata)="onLoadedDataVideo()"
      ></video>
    </div>
    <div
      class="ucap-video-viewer-video-time"
      fxLayout="row"
      fxLayout.xs="column"
      fxLayoutAlign="center center"
    >
      <mat-slider
        #timeSlider
        min="0"
        [max]="duration"
        [value]="currentTime"
        (change)="onChangeTimeSlider($event)"
      >
      </mat-slider>
    </div>
    <div
      class="ucap-video-viewer-video-controls"
      fxLayout="row"
      fxLayout.xs="column"
      fxLayoutAlign="center center"
    >
      <div class="ucap-video-viewer-video-time-current">
        {{ currentTime | ucapSecondsToMinutes }}
      </div>
      <span class="ucap-video-viewer-spacer"></span>
      <button
        mat-icon-button
        class="ucap-video-viewer-action"
        [matTooltip]="playing ? '멈춤' : '재생'"
        aria-label=""
        (click)="onClickPlayOrPause()"
      >
        <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
      </button>
      <span class="ucap-video-viewer-spacer"></span>
      <div class="ucap-video-viewer-video-time-total">
        {{ duration | ucapSecondsToMinutes }}
      </div>
    </div>
  </div>
</div>
