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

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