Chocobozzz/PeerTube

<div class="root">

  @if (video && selectingFromVideo) {
    <my-embed #embed [video]="video" enableAPI="true" mute="true" autoplay="true"></my-embed>
  } @else {
    <div class="preview-container">
      @if (imageSrc) {
        <img [src]="imageSrc" class="preview" alt="Preview" i18n-alt />
      } @else {
        <div class="preview no-image"></div>
      }
    </div>
  }

  <div class="mt-2">

    @if (selectingFromVideo) {
      <button i18n type="button" class="peertube-button orange-button me-2" (click)="selectFrame()">Use this frame</button>

      <button i18n type="button" i18n class="peertube-button grey-button" (click)="resetSelectFromVideo()">Cancel</button>
    }
    @else {
      <my-reactive-file
        class="d-inline-block"
        inputName="uploadNewThumbnail" inputLabel="Select from your device" [extensions]="videoImageExtensions"
        [maxFileSize]="maxVideoImageSize" placement="right" (fileChanged)="onFileChanged($event)"
        [buttonTooltip]="getReactiveFileButtonTooltip()">
      </my-reactive-file>

      @if (canSelectFromVideo()) {
        <button i18n type="button" class="peertube-button grey-button ms-2" (click)="selectFromVideo()">Select from video</button>
      }
    }

  </div>

</div>