aboutsummaryrefslogblamecommitdiffhomepage
path: root/client/src/app/shared/video/video-thumbnail.component.html
blob: b63085b816be3a2f1b74b4ce3a469e477ce39c64 (plain) (tree)
1
2
3
4
5
6
7
8
9
  
                                                                                      
                         
 
                                                                                                              
 


                                                                                                                                                                


                                                                                                                


                                                                                                                                                                  




                                                                                                                 
                                                                               
 


                            
 


                                                                   
    
<a
  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [title]="video.name"
  class="video-thumbnail"
>
  <img alt="" [attr.aria-label]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />

  <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay">
    <ng-container *ngIf="inWatchLaterPlaylist !== true">
      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
        <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText" role="button"></my-global-icon>
      </div>
    </ng-container>

    <ng-container *ngIf="inWatchLaterPlaylist === true">
      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
        <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
      </div>
    </ng-container>
  </div>

  <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>

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

  <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
    <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
  </div>
</a>