client/src/app/shared/video-playlist/video-add-to-playlist.component.html

   1 <div class="root">
   2   <div class="header">
   3     <div class="first-row">
   4       <div i18n class="title">Save to</div>
   5
   6       <div class="options" (click)="displayOptions = !displayOptions">
   7         <my-global-icon iconName="cog"></my-global-icon>
   8
   9         <span i18n>Options</span>
  10       </div>
  11     </div>
  12
  13     <div class="options-row" *ngIf="displayOptions">
  14       <div>
  15         <my-peertube-checkbox
  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
  28       <div>
  29         <my-peertube-checkbox
  30           inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
  31           i18n-labelText labelText="Stop at"
  32         ></my-peertube-checkbox>
  33
  34         <my-timestamp-input
  35           [timestamp]="timestampOptions.stopTimestamp"
  36           [maxTimestamp]="video.duration"
  37           [disabled]="!timestampOptions.stopTimestampEnabled"
  38           [(ngModel)]="timestampOptions.stopTimestamp"
  39         ></my-timestamp-input>
  40       </div>
  41     </div>
  42   </div>
  43
  44   <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
  45     <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
  46
  47     <div class="display-name">
  48       {{ playlist.displayName }}
  49
  50       <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
  51         {{ formatTimestamp(playlist) }}
  52       </div>
  53     </div>
  54   </div>
  55
  56   <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
  57     <my-global-icon iconName="add"></my-global-icon>
  58
  59     Create a private playlist
  60   </div>
  61
  62   <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
  63     <div class="form-group">
  64       <label i18n for="displayName">Display name</label>
  65       <input
  66         type="text" id="displayName"
  67         formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
  68       >
  69       <div *ngIf="formErrors['displayName']" class="form-error">
  70         {{ formErrors['displayName'] }}
  71       </div>
  72     </div>
  73
  74     <input type="submit" i18n-value value="Create" [disabled]="!form.valid">
  75   </form>
  76 </div>