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         <label for="nsfw">NSFW</label>
  22         <input
  23           type="checkbox" id="nsfw"
  24           formControlName="nsfw"
  25         >
  26       </div>
  27
  28       <div class="form-group">
  29         <label for="category">Category</label>
  30         <select class="form-control" id="category" formControlName="category">
  31           <option></option>
  32           <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
  33         </select>
  34
  35         <div *ngIf="formErrors.category" class="alert alert-danger">
  36           {{ formErrors.category }}
  37         </div>
  38       </div>
  39
  40       <div class="form-group">
  41         <label for="licence">Licence</label>
  42         <select class="form-control" id="licence" formControlName="licence">
  43           <option></option>
  44           <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
  45         </select>
  46
  47         <div *ngIf="formErrors.licence" class="alert alert-danger">
  48           {{ formErrors.licence }}
  49         </div>
  50       </div>
  51
  52       <div class="form-group">
  53         <label for="language">Language</label>
  54         <select class="form-control" id="language" formControlName="language">
  55           <option></option>
  56           <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
  57         </select>
  58
  59         <div *ngIf="formErrors.language" class="alert alert-danger">
  60           {{ formErrors.language }}
  61         </div>
  62       </div>
  63
  64       <div class="form-group">
  65         <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
  66         <tag-input
  67           [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
  68           formControlName="tags" maxItems="3" modelAsStrings="true"
  69         ></tag-input>
  70       </div>
  71
  72       <div class="form-group">
  73         <label for="videofile">File</label>
  74         <div class="btn btn-default btn-file">
  75           <span>Select the video...</span>
  76           <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange($event)" />
  77           <input type="hidden" name="videofileHidden" formControlName="videofile"/>
  78         </div>
  79       </div>
  80
  81       <div class="file-to-upload">
  82         <div class="file" *ngIf="filename">
  83           <span class="filename">{{ filename }}</span>
  84           <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
  85         </div>
  86       </div>
  87
  88       <div *ngIf="formErrors.videofile" class="alert alert-danger">
  89         {{ formErrors.videofile }}
  90       </div>
  91
  92       <div class="form-group">
  93         <label for="description">Description</label>
  94         <textarea
  95           id="description" class="form-control" placeholder="Description..."
  96           formControlName="description"
  97         >
  98         </textarea>
  99         <div *ngIf="formErrors.description" class="alert alert-danger">
 100           {{ formErrors.description }}
 101         </div>
 102       </div>
 103
 104       <div class="progress">
 105         <progressbar [value]="progressPercent" max="100">
 106           <ng-template [ngIf]="progressPercent === 100">
 107             <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
 108             Server is processing the video
 109           </ng-template>
 110         </progressbar>
 111       </div>
 112
 113       <div class="form-group">
 114         <input
 115           type="button" value="Upload" class="btn btn-default form-control"
 116           (click)="upload()"
 117         >
 118       </div>
 119     </form>
 120   </div>
 121 </div>