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