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" aria-hidden="true"></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="input-container">
  45     <input type="text" placeholder="Search playlists" i18n-placeholder [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
  46   </div>
  47
  48   <div class="playlists">
  49     <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
  50       <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
  51
  52       <div class="display-name">
  53         {{ playlist.displayName }}
  54
  55         <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
  56           {{ formatTimestamp(playlist) }}
  57         </div>
  58       </div>
  59     </div>
  60   </div>
  61
  62   <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
  63     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
  64
  65     <span i18n>Create a private playlist</span>
  66   </div>
  67
  68   <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
  69     <div class="form-group">
  70       <label i18n for="displayName">Display name</label>
  71       <input
  72         type="text" id="displayName"
  73         formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
  74       >
  75       <div *ngIf="formErrors['displayName']" class="form-error">
  76         {{ formErrors['displayName'] }}
  77       </div>
  78     </div>
  79
  80     <input type="submit" i18n-value value="Create" [disabled]="!form.valid">
  81   </form>
  82 </div>