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-owner" [routerLink]="[ '/c', playlistElement.video.byVideoChannel ]">
  36           <ng-container *ngIf="getVideoOwnerDisplayType(playlistElement) === 'account'">{{ playlistElement.video.byAccount }}</ng-container>
  37           <ng-container *ngIf="getVideoOwnerDisplayType(playlistElement) === 'videoChannel'">{{ playlistElement.video.byVideoChannel }}</ng-container>
  38         </a>
  39
  40         <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
  41
  42         <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(playlistElement) }}</span>
  43       </ng-container>
  44
  45       <span *ngIf="!playlistElement.video" class="video-info-name">
  46         <ng-container i18n *ngIf="isUnavailable(playlistElement)">Unavailable</ng-container>
  47         <ng-container i18n *ngIf="isPrivate(playlistElement)">Private</ng-container>
  48         <ng-container i18n *ngIf="isDeleted(playlistElement)">Deleted</ng-container>
  49       </span>
  50     </div>
  51   </a>
  52
  53   <my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-library', 'video-playlists', playlist.uuid ]"></my-edit-button>
  54
  55   <div *ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
  56        (openChange)="onDropdownOpenChange()" autoClose="outside" container="body"
  57   >
  58     <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
  59
  60     <div ngbDropdownMenu>
  61       <ng-container *ngIf="playlistElement.video">
  62         <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
  63           <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
  64           <ng-container i18n>Edit starts/stops at</ng-container>
  65         </div>
  66
  67         <div class="timestamp-options" *ngIf="displayTimestampOptions">
  68           <div>
  69             <my-peertube-checkbox
  70               inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
  71               i18n-labelText labelText="Start at"
  72             ></my-peertube-checkbox>
  73
  74             <my-timestamp-input
  75               [timestamp]="timestampOptions.startTimestamp"
  76               [maxTimestamp]="playlistElement.video.duration"
  77               [disabled]="!timestampOptions.startTimestampEnabled"
  78               [(ngModel)]="timestampOptions.startTimestamp"
  79             ></my-timestamp-input>
  80           </div>
  81
  82           <div>
  83             <my-peertube-checkbox
  84               inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
  85               i18n-labelText labelText="Stop at"
  86             ></my-peertube-checkbox>
  87
  88             <my-timestamp-input
  89               [timestamp]="timestampOptions.stopTimestamp"
  90               [maxTimestamp]="playlistElement.video.duration"
  91               [disabled]="!timestampOptions.stopTimestampEnabled"
  92               [(ngModel)]="timestampOptions.stopTimestamp"
  93             ></my-timestamp-input>
  94           </div>
  95
  96           <input type="submit" i18n-value value="Save" (click)="updateTimestamps(playlistElement)">
  97         </div>
  98       </ng-container>
  99
 100       <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
 101         <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
 102         <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
 103       </span>
 104     </div>
 105   </div>
 106 </div>