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