client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html

   1 <nav aria-label="breadcrumb">
   2   <ol class="breadcrumb">
   3     <li class="breadcrumb-item">
   4       <a routerLink="/my-account/video-playlists" i18n>My Playlists</a>
   5     </li>
   6
   7     <ng-container *ngIf="isCreation()">
   8       <li class="breadcrumb-item active" i18n>Create</li>
   9     </ng-container>
  10     <ng-container *ngIf="!isCreation()">
  11       <li class="breadcrumb-item active" i18n>Edit</li>
  12       <li class="breadcrumb-item active" aria-current="page">
  13         <a *ngIf="videoPlaylistToUpdate" [routerLink]="[ '/my-account/video-playlists/update', videoPlaylistToUpdate?.uuid ]">{{ videoPlaylistToUpdate?.displayName }}</a>
  14       </li>
  15     </ng-container>
  16   </ol>
  17 </nav>
  18
  19 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
  20
  21 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
  22
  23   <div class="form-row"> <!-- playlist grid -->
  24     <div class="form-group col-12 col-lg-4 col-xl-3">
  25       <div *ngIf="isCreation()" class="video-playlist-title" i18n>NEW PLAYLIST</div>
  26       <div *ngIf="!isCreation() && videoPlaylistToUpdate" class="video-playlist-title" i18n>PLAYLIST</div>
  27     </div>
  28
  29     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  30
  31       <div class="col-md-12 col-xl-6">
  32         <div class="form-group">
  33           <label i18n for="displayName">Display name</label>
  34           <input
  35             type="text" id="displayName" class="form-control"
  36             formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
  37           >
  38           <div *ngIf="formErrors['displayName']" class="form-error">
  39             {{ formErrors['displayName'] }}
  40           </div>
  41         </div>
  42
  43         <div class="form-group">
  44           <label i18n for="description">Description</label>
  45           <textarea
  46             id="description" formControlName="description"
  47             class="form-control" [ngClass]="{ 'input-error': formErrors['description'] }"
  48           ></textarea>
  49           <div *ngIf="formErrors.description" class="form-error">
  50             {{ formErrors.description }}
  51           </div>
  52         </div>
  53       </div>
  54
  55       <div class="col-md-12 col-xl-6">
  56         <div class="form-group">
  57           <label i18n for="privacy">Privacy</label>
  58           <div class="peertube-select-container">
  59             <select id="privacy" formControlName="privacy" class="form-control">
  60               <option *ngFor="let privacy of videoPlaylistPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
  61             </select>
  62           </div>
  63
  64           <div *ngIf="formErrors.privacy" class="form-error">
  65             {{ formErrors.privacy }}
  66           </div>
  67         </div>
  68
  69         <div class="form-group">
  70           <label i18n>Channel</label>
  71           <div class="peertube-select-container">
  72             <select formControlName="videoChannelId" class="form-control">
  73               <option i18n value="undefined" disabled>Channel to bind the playlist to</option>
  74               <option></option>
  75               <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
  76             </select>
  77           </div>
  78
  79           <div *ngIf="formErrors['videoChannelId']" class="form-error">
  80             {{ formErrors['videoChannelId'] }}
  81           </div>
  82         </div>
  83
  84         <div class="form-group">
  85           <label i18n>Playlist thumbnail</label>
  86
  87           <my-preview-upload
  88             i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"
  89             previewWidth="223px" previewHeight="122px"
  90           ></my-preview-upload>
  91         </div>
  92       </div>
  93
  94       <div class="form-row"> <!-- submit placement block -->
  95         <div class="col-md-7 col-xl-5"></div>
  96         <div class="col-md-5 col-xl-5 d-inline-flex">
  97           <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
  98         </div>
  99       </div>
 100     </div>
 101   </div>
 102
 103 </form>