Chocobozzz/PeerTube

<a [ariaLabel]="ariaLabel" *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1">
  <ng-container *ngTemplateOutlet="aContent"></ng-container>
</a>

<a [ariaLabel]="ariaLabel" *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1">
  <ng-container *ngTemplateOutlet="aContent"></ng-container>
</a>

<ng-template #aContent>
  <img alt="" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />

  <div *ngIf="displayWatchLaterPlaylist" class="actions-overlay">
    <button
      class="watch-icon-overlay button-unstyle"
      placement="left" [ngbTooltip]="getWatchIconText()" container="body" #watchLaterTooltip="ngbTooltip"
      (click)="onWatchLaterClick($event)" [attr.aria-label]="inWatchLaterPlaylist ? removeFromWatchLaterText : addToWatchLaterText"
    >
      @if (inWatchLaterPlaylist) {
        <my-global-icon iconName="tick"></my-global-icon>
      } @else {
        <my-global-icon iconName="clock"></my-global-icon>
      }
    </button>
  </div>

  <div class="label-overlay warning"><ng-content select="label-warning"></ng-content></div>
  <div class="label-overlay danger"><ng-content select="label-danger"></ng-content></div>

  @if (video.isLive) {
    <div  class="live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }">
      <ng-container i18n *ngIf="!isLiveEnded()">LIVE</ng-container>
      <ng-container i18n *ngIf="isLiveEnded()">LIVE ENDED</ng-container>
    </div>
  } @else {
    <div class="duration-overlay" [ariaLabel]="getDurationOverlayLabel()">{{ video.durationLabel }}</div>
  }

  <div class="play-overlay">
    <div class="icon"></div>
  </div>

  <div class="progress-bar" *ngIf="!video.isLive && video.userHistory?.currentTime">
    <div [ngStyle]="{ 'width.%': getProgressPercent() }">
      <span class="visually-hidden" i18n>You watched {{ getProgressPercent() }}% of this video</span>
    </div>
  </div>
</ng-template>