<div class="p-video-box">
  <div class="up-video" style="display: flex;">
    <!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
                 <!--[nzShowUploadList]="false"-->
                 <!--[nzBeforeUpload]="beforeUpload"-->
                 <!--nzAccept = ".mp4"-->
                 <!--style="margin-right: 1rem">-->
  
      <nz-upload class="p-image-uploader" [nzDisabled]="uploading"
                 [nzShowUploadList]="false"
                 nzAccept = ".mp4"
                 [nzAction]="uploadUrl"
                 [nzData]="uploadData"
                 (nzChange)="handleChange($event)"
                 style="margin-right: 1rem">
  
        <button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading"
                [nzLoading]="uploading" >
          <i nz-icon nzType="plus" nzTheme="outline"></i>
          <span>{{ uploading ? 'Uploading' : 'Select Video' }}</span>
          <!--<span>Select Video</span>-->
        </button>
  
  
  
  
      </nz-upload>
    <!--<button nz-button nzType="primary"  *ngIf="showUploadBtn"-->
              <!--style="margin-right: 1rem"-->
              <!--type="button"-->
              <!--[nzLoading]="uploading"-->
              <!--(click)="handleUpload()"-->
              <!--[disabled]="!videoFile || uploading">-->
        <!--<i nz-icon type="upload" theme="outline"></i>-->
        <!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
      <!--</button>-->
  
      <!--
      <button type="button"
              (click)="extraCover()"
              nz-button nzType="default"
              [disabled]=" !(videoUrl && videoUrl.constructor.name === 'String')">设置封面</button>
      -->
      <!--
     <nz-divider></nz-divider>
  
     <div [style.display]="!uploading?'none':''" style="position:relative">
       <div style="width: calc( 100% - 20px);">
         <nz-progress [nzPercent]="progress">
         </nz-progress>
       </div>
       <i (click)="cancelUpload()" class="anticon anticon-close-circle" style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);cursor: pointer"></i>
     </div>
     -->
  
  
  </div>
  <div class="p-box d-flex align-items-center p-video-uploader">
    <div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading">
      <i nz-icon nzType="upload" nzTheme="outline"></i>
      <div class="m-3"></div>
      <span>Click here to upload video</span>
      <div class="mt-5 p-progress-bar" *ngIf="uploading">
        <div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>
        <div class="p-progress-value">{{progress}}%</div>
      </div>
    </div>
    <div class="p-upload-progress-bg dddd " *ngIf="uploading"
         [ngClass]="{'smart-bar': showUploadBtn}" >
      <div class="i-bg" [style.width]="progress+'%'"></div>
      <div class="i-text">
        <fa-icon icon="cloud-upload-alt"></fa-icon>
        Uploading...
      </div>
    </div>
    <div class="p-upload-check-bg" *ngIf="checking">
      <div class="i-bg" [style.width]="progress+'%'"></div>
      <div class="i-text">
        <fa-icon icon="cloud-upload-alt"></fa-icon>
        <i nz-icon nzType="loading" nzTheme="outline"></i>Checking...
      </div>
    </div>
    <div class="p-preview" *ngIf="!uploading && videoUrl " >
      <!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
      <video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video>
    </div>
  </div>
  <div [style.display]="!checkVideoExists?'none':''">
    <span><i nz-icon nzType="loading" nzTheme="outline"></i>  checking file to upload</span>
  </div>
  </div>
  
  
  
  