<video
  crossorigin="anonymous"
  [src]="constructHref(medias[currentIndex].bitstream._links.content.href)"
  id="singleVideo"
  [poster]="
    medias[currentIndex].thumbnail ||
    replacements[medias[currentIndex].format]
  "
  preload="none"
  controls
  >
  @if (getMediaCap(medias[currentIndex].bitstream.name, captions); as capInfos) {
    @for (capInfo of capInfos; track capInfo) {
      <track [src]="capInfo.src" [label]="capInfo.langLabel" [srclang]="capInfo.srclang" />
    }
  }

</video>
@if (medias?.length > 1) {
  <div class="buttons">
    <button
      class="btn btn-primary previous"
      [dsBtnDisabled]="currentIndex === 0"
      (click)="prevMedia()"
      >
      {{ "media-viewer.previous" | translate }}
    </button>
    <button
      class="btn btn-primary next"
      [dsBtnDisabled]="currentIndex === medias.length - 1"
      (click)="nextMedia()"
      >
      {{ "media-viewer.next" | translate }}
    </button>
    <div ngbDropdown class="d-inline-block">
      <button
        class="btn btn-outline-primary playlist"
        id="dropdownBasic1"
        ngbDropdownToggle
        >
        {{ "media-viewer.playlist" | translate }}
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        @for (item of medias; track item; let indexOfelement = $index) {
          <button
            ngbDropdownItem
            class="list-element"
            (click)="selectedMedia(indexOfelement)"
            >
            {{ dsoNameService.getName(item.bitstream) }}
          </button>
        }
      </div>
    </div>
  </div>
}
