diff options
Diffstat (limited to 'client/src/app/videos/+video-edit/video-add.component.html')
-rw-r--r-- | client/src/app/videos/+video-edit/video-add.component.html | 152 |
1 files changed, 32 insertions, 120 deletions
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html index b4e0f9f7c..a6f2bf6f2 100644 --- a/client/src/app/videos/+video-edit/video-add.component.html +++ b/client/src/app/videos/+video-edit/video-add.component.html | |||
@@ -1,141 +1,53 @@ | |||
1 | <div class="row"> | 1 | <div class="margin-content"> |
2 | <div class="content-padding"> | 2 | <div class="title-page title-page-single"> |
3 | Upload your video | ||
4 | </div> | ||
3 | 5 | ||
4 | <h3>Upload a video</h3> | 6 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> |
5 | 7 | ||
6 | <div *ngIf="error !== undefined" class="alert alert-danger">{{ error }}</div> | 8 | <div *ngIf="!isUploadingVideo" class="upload-video-container"> |
9 | <div class="upload-video"> | ||
10 | <div class="icon icon-upload"></div> | ||
7 | 11 | ||
8 | <form novalidate [formGroup]="form"> | 12 | <div class="button-file"> |
9 | <div class="form-group"> | 13 | <span>Select the file to upload</span> |
10 | <label for="name">Name</label> | 14 | <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange()" /> |
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> | 15 | </div> |
19 | 16 | ||
20 | <div class="form-group"> | 17 | <div class="form-group"> |
21 | <label for="privacy">Privacy</label> | 18 | <select [(ngModel)]="firstStepPrivacyId"> |
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> | 19 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> |
25 | </select> | 20 | </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> | 21 | </div> |
39 | 22 | ||
40 | <div class="form-group"> | 23 | <div class="form-group"> |
41 | <label for="category">Channel</label> | 24 | <select [(ngModel)]="firstStepChannelId"> |
42 | <select class="form-control" id="channelId" formControlName="channelId"> | ||
43 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> | 25 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> |
44 | </select> | 26 | </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> | 27 | </div> |
28 | </div> | ||
29 | </div> | ||
103 | 30 | ||
104 | <div class="file-to-upload"> | 31 | <p-progressBar |
105 | <div class="file" *ngIf="filename"> | 32 | *ngIf="isUploadingVideo" [value]="videoUploadPercents" |
106 | <span class="filename">{{ filename }}</span> | 33 | [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }" |
107 | <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span> | 34 | ></p-progressBar> |
108 | </div> | ||
109 | </div> | ||
110 | 35 | ||
111 | <div *ngIf="formErrors.videofile" class="alert alert-danger"> | 36 | <!-- Hidden because we need to load the component --> |
112 | {{ formErrors.videofile }} | 37 | <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> |
113 | </div> | 38 | <my-video-edit |
39 | [form]="form" [formErrors]="formErrors" | ||
40 | [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" | ||
41 | ></my-video-edit> | ||
114 | 42 | ||
115 | <div class="form-group"> | ||
116 | <label for="description">Description</label> | ||
117 | <my-video-description formControlName="description"></my-video-description> | ||
118 | 43 | ||
119 | <div *ngIf="formErrors.description" class="alert alert-danger"> | 44 | <div class="submit-container"> |
120 | {{ formErrors.description }} | 45 | <div *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div> |
121 | </div> | ||
122 | </div> | ||
123 | 46 | ||
124 | <div class="progress"> | 47 | <div class="submit-button" (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || videoUploaded !== true }"> |
125 | <progressbar [value]="progressPercent" max="100"> | 48 | <span class="icon icon-validate"></span> |
126 | <ng-template [ngIf]="progressPercent === 100"> | 49 | <input type="button" value="Publish" /> |
127 | <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> | ||
128 | Server is processing the video | ||
129 | </ng-template> | ||
130 | </progressbar> | ||
131 | </div> | 50 | </div> |
132 | 51 | </div> | |
133 | <div class="form-group"> | 52 | </form> |
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> | 53 | </div> |