<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>