diff options
Diffstat (limited to 'client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html')
| -rw-r--r-- | client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html | 84 |
1 files changed, 43 insertions, 41 deletions
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html index a40e0699e..37d5017cf 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html | |||
| @@ -2,58 +2,60 @@ | |||
| 2 | <div class="header"> | 2 | <div class="header"> |
| 3 | <div class="first-row"> | 3 | <div class="first-row"> |
| 4 | <div i18n class="title">Save to</div> | 4 | <div i18n class="title">Save to</div> |
| 5 | |||
| 6 | <div class="options" (click)="displayOptions = !displayOptions"> | ||
| 7 | <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> | ||
| 8 | |||
| 9 | <span i18n>Options</span> | ||
| 10 | </div> | ||
| 11 | </div> | 5 | </div> |
| 6 | </div> | ||
| 12 | 7 | ||
| 13 | <div class="options-row" *ngIf="displayOptions"> | 8 | <div class="input-container"> |
| 14 | <div> | 9 | <input type="text" placeholder="Search playlists" i18n-placeholder [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" /> |
| 15 | <my-peertube-checkbox | 10 | </div> |
| 16 | inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled" | ||
| 17 | i18n-labelText labelText="Start at" | ||
| 18 | ></my-peertube-checkbox> | ||
| 19 | |||
| 20 | <my-timestamp-input | ||
| 21 | [timestamp]="timestampOptions.startTimestamp" | ||
| 22 | [maxTimestamp]="video.duration" | ||
| 23 | [disabled]="!timestampOptions.startTimestampEnabled" | ||
| 24 | [(ngModel)]="timestampOptions.startTimestamp" | ||
| 25 | ></my-timestamp-input> | ||
| 26 | </div> | ||
| 27 | 11 | ||
| 28 | <div> | 12 | <div class="playlists"> |
| 13 | <div | ||
| 14 | *ngFor="let playlist of videoPlaylists" | ||
| 15 | class="playlist dropdown-item" [ngClass]="{ 'has-optional-row': playlist.optionalRowDisplayed }" | ||
| 16 | > | ||
| 17 | <div class="primary-row"> | ||
| 29 | <my-peertube-checkbox | 18 | <my-peertube-checkbox |
| 30 | inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled" | 19 | [disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)" |
| 31 | i18n-labelText labelText="Stop at" | 20 | [ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true" |
| 21 | (click)="toggleMainPlaylist($event, playlist)" | ||
| 32 | ></my-peertube-checkbox> | 22 | ></my-peertube-checkbox> |
| 33 | 23 | ||
| 34 | <my-timestamp-input | 24 | <label class="display-name" (click)="toggleMainPlaylist($event, playlist)"> |
| 35 | [timestamp]="timestampOptions.stopTimestamp" | 25 | {{ playlist.displayName }} |
| 36 | [maxTimestamp]="video.duration" | 26 | </label> |
| 37 | [disabled]="!timestampOptions.stopTimestampEnabled" | 27 | |
| 38 | [(ngModel)]="timestampOptions.stopTimestamp" | 28 | <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="toggleOptionalRow(playlist)"> |
| 39 | ></my-timestamp-input> | 29 | <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> |
| 30 | </div> | ||
| 40 | </div> | 31 | </div> |
| 41 | </div> | ||
| 42 | </div> | ||
| 43 | 32 | ||
| 44 | <div class="input-container"> | 33 | <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed"> |
| 45 | <input type="text" placeholder="Search playlists" i18n-placeholder [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" /> | 34 | <div class="labels"> |
| 46 | </div> | 35 | <div i18n>Start at</div> |
| 36 | <div i18n>Stop at</div> | ||
| 37 | </div> | ||
| 47 | 38 | ||
| 48 | <div class="playlists"> | 39 | <div *ngFor="let element of buildOptionalRowElements(playlist)"> |
| 49 | <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)"> | 40 | <my-peertube-checkbox |
| 50 | <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox> | 41 | [inputName]="getOptionalInputName(playlist, element)" |
| 42 | [ngModel]="element.enabled" [onPushWorkaround]="true" | ||
| 43 | (click)="toggleOptionalPlaylist($event, playlist, element, startAt.timestamp, stopAt.timestamp)" | ||
| 44 | ></my-peertube-checkbox> | ||
| 51 | 45 | ||
| 52 | <div class="display-name"> | 46 | <my-timestamp-input |
| 53 | {{ playlist.displayName }} | 47 | [maxTimestamp]="video.duration" |
| 48 | [(ngModel)]="element.startTimestamp" | ||
| 49 | (inputBlur)="onElementTimestampUpdate(playlist, element)" | ||
| 50 | #startAt | ||
| 51 | ></my-timestamp-input> | ||
| 54 | 52 | ||
| 55 | <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info"> | 53 | <my-timestamp-input |
| 56 | {{ formatTimestamp(playlist) }} | 54 | [maxTimestamp]="video.duration" |
| 55 | [(ngModel)]="element.stopTimestamp" | ||
| 56 | (inputBlur)="onElementTimestampUpdate(playlist, element)" | ||
| 57 | #stopAt | ||
| 58 | ></my-timestamp-input> | ||
| 57 | </div> | 59 | </div> |
| 58 | </div> | 60 | </div> |
| 59 | </div> | 61 | </div> |