client/src/app/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       [routerLink]="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         <a tabindex="-1" class="video-info-name"
  19           [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
  20           [attr.title]="playlistElement.video.name"
  21         >{{ playlistElement.video.name }}</a>
  22
  23         <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', playlistElement.video.byAccount ]">
  24           {{ playlistElement.video.byAccount }}
  25         </a>
  26         <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
  27
  28         <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(playlistElement) }}</span>
  29       </ng-container>
  30
  31       <span *ngIf="!playlistElement.video" class="video-info-name">
  32         <ng-container i18n *ngIf="isUnavailable(playlistElement)">Unavailable</ng-container>
  33         <ng-container i18n *ngIf="isPrivate(playlistElement)">Private</ng-container>
  34         <ng-container i18n *ngIf="isDeleted(playlistElement)">Deleted</ng-container>
  35       </span>
  36     </div>
  37   </a>
  38
  39   <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right"
  40        (openChange)="onDropdownOpenChange()" autoClose="outside"
  41   >
  42     <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
  43
  44     <div ngbDropdownMenu>
  45       <ng-container *ngIf="playlistElement.video">
  46         <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
  47           <my-global-icon iconName="edit"></my-global-icon>
  48           <ng-container i18n>Edit starts/stops at</ng-container>
  49         </div>
  50
  51         <div class="timestamp-options" *ngIf="displayTimestampOptions">
  52           <div>
  53             <my-peertube-checkbox
  54               inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
  55               i18n-labelText labelText="Start at"
  56             ></my-peertube-checkbox>
  57
  58             <my-timestamp-input
  59               [timestamp]="timestampOptions.startTimestamp"
  60               [maxTimestamp]="playlistElement.video.duration"
  61               [disabled]="!timestampOptions.startTimestampEnabled"
  62               [(ngModel)]="timestampOptions.startTimestamp"
  63             ></my-timestamp-input>
  64           </div>
  65
  66           <div>
  67             <my-peertube-checkbox
  68               inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
  69               i18n-labelText labelText="Stop at"
  70             ></my-peertube-checkbox>
  71
  72             <my-timestamp-input
  73               [timestamp]="timestampOptions.stopTimestamp"
  74               [maxTimestamp]="playlistElement.video.duration"
  75               [disabled]="!timestampOptions.stopTimestampEnabled"
  76               [(ngModel)]="timestampOptions.stopTimestamp"
  77             ></my-timestamp-input>
  78           </div>
  79
  80           <input type="submit" i18n-value value="Save" (click)="updateTimestamps(playlistElement)">
  81         </div>
  82       </ng-container>
  83
  84       <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
  85             <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
  86           </span>
  87     </div>
  88   </div>
  89 </div>