client/src/app/shared/video/video-thumbnail.component.html

   1 <a
   2   [routerLink]="getVideoRouterLink()" [queryParams]="queryParams"
   3   class="video-thumbnail"
   4 >
   5   <img alt="" [attr.aria-label]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
   6
   7   <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay">
   8     <ng-container *ngIf="inWatchLaterPlaylist !== true">
   9       <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
  10         <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText" role="button"></my-global-icon>
  11       </div>
  12     </ng-container>
  13
  14     <ng-container *ngIf="inWatchLaterPlaylist === true">
  15       <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
  16         <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
  17       </div>
  18     </ng-container>
  19   </div>
  20
  21   <div class="video-thumbnail-label-overlay warning"><ng-content select="label-warning"></ng-content></div>
  22   <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div>
  23
  24   <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
  25
  26   <div class="play-overlay">
  27     <div class="icon"></div>
  28   </div>
  29
  30   <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
  31     <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
  32   </div>
  33 </a>