ucap-doc/documents/업무/2월/2째주/묵음파일백업/album-box.component.html

<div fxLayout="column" class="rightDrawer-albumbox">
  <div>
    <mat-tab-group
      mat-stretch-tabs
      animationDuration="0ms"
      (selectedIndexChange)="onSelectedIndexChange($event)"
    >
      <mat-tab label="{{ 'common.file.type.images' | translate }}"></mat-tab>
      <mat-tab label="{{ 'common.file.type.video' | translate }}"></mat-tab>
    </mat-tab-group>
  </div>
  <div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
    <ng-container *ngIf="!selectedFile">
      <div class="empty-msg" *ngIf="currentTabIndex === 0">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="36"
          height="36"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
          aria-label="image"
        >
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <circle cx="8.5" cy="8.5" r="1.5" />
          <path d="M20.4 14.5L16 10 4 20" />
        </svg>
        <span>{{ 'common.file.selectFiles' | translate }}</span>
      </div>

      <div class="empty-msg" *ngIf="currentTabIndex === 1">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="36"
          height="36"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
          aria-label="video"
        >
          <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>{{ 'common.file.selectFiles' | translate }}</span>
      </div>
    </ng-container>
    <ng-container *ngIf="selectedFile">
      <div class="select-file">
        <img
          *ngIf="selectedFile.info.type === FileType.Image"
          [src]="getImageUrl(selectedFile)"
          class="preview-image"
        />
        <video
          controls
          controlsList="nodownload nofullscreen"
          class="preview-video"
          #videoPlayer
          *ngIf="selectedFile.info.type === FileType.Video && playable"
          [src]="getImageUrl(selectedFile)"
          (loadeddata)="onLoadedDataVideo()"
        ></video>
        <div
          *ngIf="selectedFile.info.type === FileType.Video && !playable"
          fxFlexFill
          class="guide-msg"
        >
          {{ 'common.file.errors.cantPlay' | translate }}
        </div>
      </div>
      <ul>
        <li class="name">{{ selectedFile.info.name }}</li>
        <li>
          <span class="text-accent-color">size :</span>
          {{ selectedFile.info.size | ucapBytes }}
        </li>
        <li>
          <span class="text-accent-color">date :</span>
          {{ selectedFile.info.sendDate | ucapDate: 'YYYY.MM.DD' }}
        </li>
      </ul>
    </ng-container>
  </div>
  <div class="search-list">
    <perfect-scrollbar class="album-scrollbar">
      <div
        *ngFor="let fileInfo of filteredList"
        class="img-item"
        (click)="onClickImage($event, fileInfo)"
      >
        <dl>
          <dt>
            <div
              *ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
              class="spinner"
            >
              <span class="mdi mdi-spin mdi-loading mdi-48px"></span>
            </div>
            <div
              *ngIf="
                !!fileInfo.info &&
                  !!fileInfo.info.sentMessageJson &&
                  !!fileInfo.info.sentMessageJson.thumbUrl;
                then thumb;
                else icon
              "
            ></div>
            <ng-template #thumb>
              <img
                #thumbImg
                [src]="fileInfo.info.sentMessageJson.thumbUrl"
                [matTooltip]="fileInfo.info.name"
                (error)="onErrorThumbnail(thumbImg, fileInfo)"
              />
            </ng-template>
            <ng-template #icon>
              <div
                [ngClass]="[
                  'mime-icon',
                  'light',
                  'ico-' + getExtention(fileInfo.info.name)
                ]"
              >
                <div class="ico"></div>
              </div>
            </ng-template>
          </dt>
          <dd>
            <span class="checkbox">
              <mat-checkbox
                #checkbox
                [checked]="getCheckItem(fileInfo)"
                (change)="onCheckItem(checkbox.checked, fileInfo)"
                (click)="$event.stopPropagation()"
              >
              </mat-checkbox>
            </span>
            <span class="btn-download">
              <button mat-button (click)="onClickDownload(fileInfo)">
                <mat-icon>vertical_align_bottom</mat-icon>
              </button>
            </span>
          </dd>
        </dl>
      </div>
    </perfect-scrollbar>
  </div>
  <div
    fxFlex="1 1 50px"
    fxLayout="row"
    fxLayoutAlign="center center"
    class="btn-box"
  >
    <button
      mat-flat-button
      [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
      class="mat-primary"
      (click)="onClickDownloadAll()"
    >
      {{ 'common.file.downloadSelected' | translate }}
    </button>
    <button
      mat-flat-button
      class="mat-primary"
      (click)="onClickOpenDownloadFolder()"
    >
      {{ 'common.file.openDownloadFolder' | translate }}
    </button>
  </div>
</div>