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">
      Select File.
    </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>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 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>