]>
Commit | Line | Data |
---|---|---|
c5a1ae50 | 1 | <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div> |
f0a39880 | 2 | |
15e9d5ca C |
3 | <div |
4 | class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" | |
5 | cdkDropList (cdkDropListDropped)="drop($event)" | |
6 | > | |
7 | <div class="video" *ngFor="let video of videos" cdkDrag (cdkDragMoved)="onDragMove($event)"> | |
c5a1ae50 | 8 | <div class="position">{{ video.playlistElement.position }}</div> |
f0a39880 | 9 | |
c5a1ae50 | 10 | <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur(video)"></my-video-thumbnail> |
f0a39880 | 11 | |
c5a1ae50 | 12 | <div class="video-info"> |
f0a39880 C |
13 | <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> |
14 | <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a> | |
c5a1ae50 C |
15 | <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span> |
16 | </div> | |
17 | ||
18 | <div class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()" autoClose="outside"> | |
19 | <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more"></my-global-icon> | |
20 | ||
21 | <div ngbDropdownMenu> | |
22 | <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)"> | |
23 | <my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Edit starts/stops at</ng-container> | |
24 | </div> | |
25 | ||
26 | <div class="timestamp-options" *ngIf="displayTimestampOptions"> | |
27 | <div> | |
28 | <my-peertube-checkbox | |
29 | inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled" | |
30 | i18n-labelText labelText="Start at" | |
31 | ></my-peertube-checkbox> | |
32 | ||
33 | <my-timestamp-input | |
34 | [timestamp]="timestampOptions.startTimestamp" | |
35 | [maxTimestamp]="video.duration" | |
36 | [disabled]="!timestampOptions.startTimestampEnabled" | |
37 | [(ngModel)]="timestampOptions.startTimestamp" | |
38 | ></my-timestamp-input> | |
39 | </div> | |
40 | ||
41 | <div> | |
42 | <my-peertube-checkbox | |
43 | inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled" | |
44 | i18n-labelText labelText="Stop at" | |
45 | ></my-peertube-checkbox> | |
46 | ||
47 | <my-timestamp-input | |
48 | [timestamp]="timestampOptions.stopTimestamp" | |
49 | [maxTimestamp]="video.duration" | |
50 | [disabled]="!timestampOptions.stopTimestampEnabled" | |
51 | [(ngModel)]="timestampOptions.stopTimestamp" | |
52 | ></my-timestamp-input> | |
53 | </div> | |
54 | ||
55 | <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)"> | |
56 | </div> | |
57 | ||
58 | <span class="dropdown-item" (click)="removeFromPlaylist(video)"> | |
59 | <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{playlist?.displayName}}</ng-container> | |
60 | </span> | |
61 | </div> | |
f0a39880 C |
62 | </div> |
63 | </div> | |
64 | </div> |