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

   1 <div class="header">
   2   <div class="first-row">
   3     <div i18n class="title">Save to</div>
   4
   5     <div class="options" (click)="displayOptions = !displayOptions">
   6       <my-global-icon iconName="cog"></my-global-icon>
   7
   8       <span i18n>Options</span>
   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="displayName">Display name</label>
  64     <input
  65       type="text" id="displayName"
  66       formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
  67     >
  68     <div *ngIf="formErrors['displayName']" class="form-error">
  69       {{ formErrors['displayName'] }}
  70     </div>
  71   </div>
  72
  73   <input type="submit" i18n-value value="Create" [disabled]="!form.valid">
  74 </form>