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

<div fxLayout="column" style="width: 600px;" 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="0 0 400px">
    <ng-container *ngIf="!selectedFile">
      Select File.
    </ng-container>
    <ng-container *ngIf="selectedFile">
      <img
        *ngIf="selectedFile.info.type === FileType.Image"
        [src]="getImageUrl(selectedFile)"
        class="preview-image"
      />
      <video
        controls
        *ngIf="selectedFile.info.type === FileType.Video"
        class="preview-image"
      >
        <source [src]="getImageUrl(selectedFile)" />
      </video>
      <ul>
        <li>name : {{ selectedFile.info.name }}</li>
        <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
        <li>
          date :
          {{ 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>
            <mat-checkbox
              #checkbox
              [checked]="getCheckItem(fileInfo)"
              (change)="onCheckItem(checkbox.checked, fileInfo)"
              (click)="$event.stopPropagation()"
            >
            </mat-checkbox>
          </span>
          <span>
            <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>