ucap-doc/documents/업무/6월/2째주/backup/video-viewer.component.html

<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>-->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="butt"
      stroke-linejoin="round"
      class="ucap-video-viewer-icon"
    >
      <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
      <line x1="7" y1="2" x2="7" y2="22"></line>
      <line x1="17" y1="2" x2="17" y2="22"></line>
      <line x1="2" y1="12" x2="22" y2="12"></line>
      <line x1="2" y1="7" x2="7" y2="7"></line>
      <line x1="2" y1="17" x2="7" y2="17"></line>
      <line x1="17" y1="17" x2="22" y2="17"></line>
      <line x1="17" y1="7" x2="22" y2="7"></line>
    </svg>
    <span class="ucap-video-viewer-title">{{ fileName }}</span>
    <span class="ucap-video-viewer-spacer"></span>
    <button
      mat-icon-button
      class="ucap-video-viewer-action"
      matTooltip="{{ 'common.file.download' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickDownload()"
    >
      <!--<mat-icon>get_app</mat-icon>-->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="butt"
        stroke-linejoin="round"
      >
        <path
          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
        />
      </svg>
    </button>
    <span class="stroke-bar"></span>
    <button
      mat-icon-button
      color="warn"
      class="ucap-image-viewer-action btn-close"
      matTooltip="{{ 'common.messages.close' | translate }}"
      (click)="onClickClose()"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="butt"
        stroke-linejoin="round"
      >
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </mat-toolbar>
  <div style="position: relative;">
    <div
      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
      style="position: absolute; width: 100%;"
    >
      <mat-progress-bar
        mode="determinate"
        [value]="fileDownloadItem.downloadingProgress$ | async"
      ></mat-progress-bar>
    </div>
  </div>
  <div class="ucap-video-viewer-body">
    <div
      #videoContainer
      class="ucap-video-viewer-video-icon"
      fxLayout="row"
      fxLayout.xs="column"
      fxLayoutAlign="center center"
    >
      <video
        *ngIf="playable"
        #audioPlayer
        [src]="fileDownloadUrl"
        [style.width]="'auto'"
        [style.height]="
          videoHeight > videoContainer.clientHeight
            ? ((videoContainer.clientHeight - 20) / videoHeight) * videoHeight +
              'px'
            : videoHeight + 'px'
        "
        (playing)="onPlayingVideo()"
        (pause)="onPauseVideo()"
        (timeupdate)="onTimeUpdateVideo()"
        (volumechange)="onVolumeChangeVideo()"
        (loadstart)="onLoadStartVideo()"
        (loadeddata)="onLoadedDataVideo()"
      ></video>
      <div *ngIf="!playable" class="guide-msg">
        {{ 'common.file.errors.cantPlay' | translate }}
      </div>
    </div>
    <div class="viewer-bottom">
      <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"
      >
        <div class="ucap-video-viewer-video-time-current">
          {{ Math.floor(currentTime) | ucapSecondsToMinutes }}
        </div>
        <span class="ucap-video-viewer-spacer"></span>
        <button
          mat-icon-button
          class="ucap-video-viewer-action"
          matTooltip="{{
            (playing ? 'common.player.stop' : 'common.player.play') | translate
          }}"
          aria-label=""
          [disabled]="!playable"
          (click)="onClickPlayOrPause()"
        >
          <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
          <!--{{ playing ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
              <rect x="6" y="4" width="4" height="16"></rect>
              <rect x="14" y="4" width="4" height="16"></rect>
            </svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
            <polygon points="5 3 19 12 5 21 5 3"></polygon>
          </svg>'}}-->
        </button>
        <span class="ucap-video-viewer-spacer"></span>
        <div class="ucap-video-viewer-video-time-total">
          {{ Math.floor(duration) | ucapSecondsToMinutes }}
        </div>
      </div>
    </div>
  </div>
</div>