client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html

   1 <div class="video" [ngClass]="{ playing: playing }">
   2   <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
   3     <div class="position">
   4       <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
   5       <ng-container *ngIf="!playing">{{ position }}</ng-container>
   6     </div>
   7
   8     <my-video-thumbnail
   9       *ngIf="playlistElement.video"
  10       [video]="playlistElement.video" [nsfw]="isVideoBlur(playlistElement.video)"
  11       [videoRouterLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
  12     ></my-video-thumbnail>
  13
  14     <div class="fake-thumbnail" *ngIf="!playlistElement.video"></div>
  15
  16     <div class="video-info">
  17       <ng-container *ngIf="playlistElement.video">
  18         <div class="video-info-header">
  19           <a tabindex="-1" class="video-info-name"
  20             [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
  21             [attr.title]="playlistElement.video.name"
  22           >{{ playlistElement.video.name }}</a>
  23
  24           <span *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>
  25         </div>
  26
  27         <span class="video-miniature-created-at-views">
  28           <my-date-toggle [date]="playlistElement.video.publishedAt"></my-date-toggle>
  29
  30           <span class="views" [title]="playlistElement.video.getExactNumberOfViews()">
  31             • <my-video-views-counter [video]="playlistElement.video"></my-video-views-counter>
  32           </span>
  33         </span>
  34
  35         <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/a', playlistElement.video.byAccount ]">
  36           {{ playlistElement.video.byAccount }}
  37         </a>
  38         <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
  39
  40         <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(playlistElement) }}</span>
  41       </ng-container>
  42
  43       <span *ngIf="!playlistElement.video" class="video-info-name">
  44         <ng-container i18n *ngIf="isUnavailable(playlistElement)">Unavailable</ng-container>
  45         <ng-container i18n *ngIf="isPrivate(playlistElement)">Private</ng-container>
  46         <ng-container i18n *ngIf="isDeleted(playlistElement)">Deleted</ng-container>
  47       </span>
  48     </div>
  49   </a>
  50
  51   <my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-library', 'video-playlists', playlist.uuid ]"></my-edit-button>
  52
  53   <div *ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
  54        (openChange)="onDropdownOpenChange()" autoClose="outside" container="body"
  55   >
  56     <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
  57
  58     <div ngbDropdownMenu>
  59       <ng-container *ngIf="playlistElement.video">
  60         <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
  61           <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
  62           <ng-container i18n>Edit starts/stops at</ng-container>
  63         </div>
  64
  65         <div class="timestamp-options" *ngIf="displayTimestampOptions">
  66           <div>
  67             <my-peertube-checkbox
  68               inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
  69               i18n-labelText labelText="Start at"
  70             ></my-peertube-checkbox>
  71
  72             <my-timestamp-input
  73               [timestamp]="timestampOptions.startTimestamp"
  74               [maxTimestamp]="playlistElement.video.duration"
  75               [disabled]="!timestampOptions.startTimestampEnabled"
  76               [(ngModel)]="timestampOptions.startTimestamp"
  77             ></my-timestamp-input>
  78           </div>
  79
  80           <div>
  81             <my-peertube-checkbox
  82               inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
  83               i18n-labelText labelText="Stop at"
  84             ></my-peertube-checkbox>
  85
  86             <my-timestamp-input
  87               [timestamp]="timestampOptions.stopTimestamp"
  88               [maxTimestamp]="playlistElement.video.duration"
  89               [disabled]="!timestampOptions.stopTimestampEnabled"
  90               [(ngModel)]="timestampOptions.stopTimestamp"
  91             ></my-timestamp-input>
  92           </div>
  93
  94           <input type="submit" i18n-value value="Save" (click)="updateTimestamps(playlistElement)">
  95         </div>
  96       </ng-container>
  97
  98       <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
  99         <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
 100         <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
 101       </span>
 102     </div>
 103   </div>
 104 </div>