diff options
Diffstat (limited to 'client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html')
-rw-r--r-- | client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html new file mode 100644 index 000000000..1f178675f --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html | |||
@@ -0,0 +1,73 @@ | |||
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">{{ video.playlistElement.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> | ||