diff options
Diffstat (limited to 'client/src/app/shared/video-playlist/video-add-to-playlist.component.html')
-rw-r--r-- | client/src/app/shared/video-playlist/video-add-to-playlist.component.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html new file mode 100644 index 000000000..ed3cd8dc5 --- /dev/null +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html | |||
@@ -0,0 +1,74 @@ | |||
1 | <div class="header"> | ||
2 | <div class="first-row"> | ||
3 | <div i18n class="title">Save to</div> | ||
4 | |||
5 | <div i18n class="options" (click)="displayOptions = !displayOptions"> | ||
6 | <my-global-icon iconName="cog"></my-global-icon> | ||
7 | |||
8 | Options | ||
9 | </div> | ||
10 | </div> | ||
11 | |||
12 | <div class="options-row" *ngIf="displayOptions"> | ||
13 | <div> | ||
14 | <my-peertube-checkbox | ||
15 | inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled" | ||
16 | i18n-labelText labelText="Start at" | ||
17 | ></my-peertube-checkbox> | ||
18 | |||
19 | <my-timestamp-input | ||
20 | [timestamp]="timestampOptions.startTimestamp" | ||
21 | [maxTimestamp]="video.duration" | ||
22 | [disabled]="!timestampOptions.startTimestampEnabled" | ||
23 | [(ngModel)]="timestampOptions.startTimestamp" | ||
24 | ></my-timestamp-input> | ||
25 | </div> | ||
26 | |||
27 | <div> | ||
28 | <my-peertube-checkbox | ||
29 | inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled" | ||
30 | i18n-labelText labelText="Stop at" | ||
31 | ></my-peertube-checkbox> | ||
32 | |||
33 | <my-timestamp-input | ||
34 | [timestamp]="timestampOptions.stopTimestamp" | ||
35 | [maxTimestamp]="video.duration" | ||
36 | [disabled]="!timestampOptions.stopTimestampEnabled" | ||
37 | [(ngModel)]="timestampOptions.stopTimestamp" | ||
38 | ></my-timestamp-input> | ||
39 | </div> | ||
40 | </div> | ||
41 | </div> | ||
42 | |||
43 | <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)"> | ||
44 | <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist"></my-peertube-checkbox> | ||
45 | |||
46 | <div class="display-name"> | ||
47 | {{ playlist.displayName }} | ||
48 | |||
49 | <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info"> | ||
50 | {{ formatTimestamp(playlist) }} | ||
51 | </div> | ||
52 | </div> | ||
53 | </div> | ||
54 | |||
55 | <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened"> | ||
56 | <my-global-icon iconName="add"></my-global-icon> | ||
57 | |||
58 | Create a new playlist | ||
59 | </div> | ||
60 | |||
61 | <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form"> | ||
62 | <div class="form-group"> | ||
63 | <label i18n for="display-name">Display name</label> | ||
64 | <input | ||
65 | type="text" id="display-name" | ||
66 | formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }" | ||
67 | > | ||
68 | <div *ngIf="formErrors['display-name']" class="form-error"> | ||
69 | {{ formErrors['display-name'] }} | ||
70 | </div> | ||
71 | </div> | ||
72 | |||
73 | <input type="submit" i18n-value value="Create" [disabled]="!form.valid"> | ||
74 | </form> | ||