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