next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html

<div fxLayout="column" class="album-box">
  <div>
    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
      <mat-tab label="Image"></mat-tab>
      <mat-tab label="Video"></mat-tab>
    </mat-tab-group>
  </div>
  <div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
    <!--<ng-container *ngIf="!selectedFile">-->
    <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"
        >
          <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>Select File.</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"
        >
          <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>Select File.</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
          *ngIf="selectedFile.info.type === FileType.Video"
          class="preview-video"
        >
          <source [src]="getImageUrl(selectedFile)" />
        </video>
      </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 | dateToStringFormat: 'YYYY.MM.DD' }}
        </li>
      </ul>
    </ng-container>
  </div>
  <div class="search-list">
    <div
      *ngFor="let fileInfo of filteredList"
      class="img-item"
      matTooltip="fileInfo.info.name"
      (click)="onClickImage($event, fileInfo)"
    >
      <dl>
        <dt>
          <div
            *ngIf="
              !!fileInfo.eventInfo &&
                !!fileInfo.eventInfo.sentMessageJson &&
                !!fileInfo.eventInfo.sentMessageJson.thumbUrl;
              then thumb;
              else icon
            "
          ></div>
          <ng-template #thumb>
            <img [src]="fileInfo.eventInfo.sentMessageJson.thumbUrl" />
          </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>
  </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"
    >
      Download All
    </button>
    <button mat-flat-button class="mat-primary">
      Open Folder
    </button>
  </div>
</div>