client/src/app/videos/+video-edit/video-add.component.html

   1 <div class="row">
   2   <div class="content-padding">
   3
   4     <h3>Upload a video</h3>
   5
   6     <div *ngIf="error !== undefined" class="alert alert-danger">{{ error }}</div>
   7
   8     <form novalidate [formGroup]="form">
   9       <div class="form-group">
  10         <label for="name">Name</label>
  11         <input
  12           type="text" class="form-control" id="name"
  13           formControlName="name"
  14         >
  15         <div *ngIf="formErrors.name" class="alert alert-danger">
  16           {{ formErrors.name }}
  17         </div>
  18       </div>
  19
  20       <div class="form-group">
  21         <input
  22           type="checkbox" id="nsfw"
  23           formControlName="nsfw"
  24         >
  25         <label for="nsfw">This video contains mature or explicit content</label>
  26       </div>
  27
  28       <div class="form-group">
  29         <label for="category">Channel</label>
  30         <select class="form-control" id="channelId" formControlName="channelId">
  31           <option></option>
  32           <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
  33         </select>
  34
  35         <div *ngIf="formErrors.channelId" class="alert alert-danger">
  36           {{ formErrors.channelId }}
  37         </div>
  38       </div>
  39
  40       <div class="form-group">
  41         <label for="category">Category</label>
  42         <select class="form-control" id="category" formControlName="category">
  43           <option></option>
  44           <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
  45         </select>
  46
  47         <div *ngIf="formErrors.category" class="alert alert-danger">
  48           {{ formErrors.category }}
  49         </div>
  50       </div>
  51
  52       <div class="form-group">
  53         <label for="licence">Licence</label>
  54         <select class="form-control" id="licence" formControlName="licence">
  55           <option></option>
  56           <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
  57         </select>
  58
  59         <div *ngIf="formErrors.licence" class="alert alert-danger">
  60           {{ formErrors.licence }}
  61         </div>
  62       </div>
  63
  64       <div class="form-group">
  65         <label for="language">Language</label>
  66         <select class="form-control" id="language" formControlName="language">
  67           <option></option>
  68           <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
  69         </select>
  70
  71         <div *ngIf="formErrors.language" class="alert alert-danger">
  72           {{ formErrors.language }}
  73         </div>
  74       </div>
  75
  76       <div class="form-group">
  77         <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
  78         <tag-input
  79           [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
  80           formControlName="tags" maxItems="5" modelAsStrings="true"
  81         ></tag-input>
  82       </div>
  83
  84       <div class="form-group">
  85         <label for="videofile">File</label>
  86         <div class="btn btn-default btn-file">
  87           <span>Select the video...</span>
  88           <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange($event)" />
  89           <input type="hidden" name="videofileHidden" formControlName="videofile"/>
  90         </div>
  91       </div>
  92
  93       <div class="file-to-upload">
  94         <div class="file" *ngIf="filename">
  95           <span class="filename">{{ filename }}</span>
  96           <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
  97         </div>
  98       </div>
  99
 100       <div *ngIf="formErrors.videofile" class="alert alert-danger">
 101         {{ formErrors.videofile }}
 102       </div>
 103
 104       <div class="form-group">
 105         <label for="description">Description</label>
 106         <textarea
 107           id="description" class="form-control" placeholder="Description..."
 108           formControlName="description"
 109         >
 110         </textarea>
 111         <div *ngIf="formErrors.description" class="alert alert-danger">
 112           {{ formErrors.description }}
 113         </div>
 114       </div>
 115
 116       <div class="progress">
 117         <progressbar [value]="progressPercent" max="100">
 118           <ng-template [ngIf]="progressPercent === 100">
 119             <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
 120             Server is processing the video
 121           </ng-template>
 122         </progressbar>
 123       </div>
 124
 125       <div class="form-group">
 126         <input
 127           type="button" value="Upload" class="btn btn-default form-control"
 128           (click)="upload()"
 129         >
 130       </div>
 131     </form>
 132   </div>
 133 </div>