client/src/app/videos/video-list/shared/video-miniature.component.html

   1 <div class="video-miniature">
   2   <a
   3     [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.description"
   4     class="video-miniature-thumbnail"
   5   >
   6     <img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }" />
   7
   8     <div class="video-miniature-thumbnail-overlay">
   9       <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span>
  10       <span class="video-miniature-thumbnail-overlay-duration">{{ video.durationLabel }}</span>
  11     </div>
  12   </a>
  13
  14   <div class="video-miniature-information">
  15     <span class="video-miniature-name">
  16       <a
  17         class="video-miniature-name"
  18         [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }"
  19       >
  20           {{ video.name }}
  21       </a>
  22     </span>
  23
  24     <div class="video-miniature-tags">
  25       <span *ngFor="let tag of video.tags" class="video-miniature-tag">
  26         <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
  27       </span>
  28     </div>
  29
  30     <a [routerLink]="['/videos/list', { field: 'account', search: video.account, sort: currentSort }]" class="video-miniature-account">{{ video.by }}</a>
  31     <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
  32   </div>
  33 </div>