diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 16:32:06 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 16:32:06 +0100 |
commit | 27e1a06c331278e5d37bc5172ee7e4fc968e4b5e (patch) | |
tree | b00296c59e573a80dc8f826dce6fe857eea123c5 /client/src/app/videos/+video-edit/video-add.component.html | |
parent | 4cc66133abf1e37873316999b660c93ab92eb4a0 (diff) | |
download | PeerTube-27e1a06c331278e5d37bc5172ee7e4fc968e4b5e.tar.gz PeerTube-27e1a06c331278e5d37bc5172ee7e4fc968e4b5e.tar.zst PeerTube-27e1a06c331278e5d37bc5172ee7e4fc968e4b5e.zip |
First step upload with new design
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 | 142 |
1 files changed, 23 insertions, 119 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..f8355f3db 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,45 @@ | |||
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 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($event)" /> |
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)]="firstStepPrivacy"> |
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)]="firstStepChannel"> |
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> | 27 | </div> |
28 | </div> | ||
50 | 29 | ||
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 | 30 | ||
58 | <div *ngIf="formErrors.category" class="alert alert-danger"> | 31 | <form *ngIf="isUploadingVideo" novalidate [formGroup]="form"> |
59 | {{ formErrors.category }} | 32 | <my-video-edit |
60 | </div> | 33 | [form]="form" [formErrors]="formErrors" |
61 | </div> | 34 | [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" |
62 | 35 | ></my-video-edit> | |
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 | 36 | ||
82 | <div *ngIf="formErrors.language" class="alert alert-danger"> | 37 | <div class="submit-container"> |
83 | {{ formErrors.language }} | 38 | <div class="submit-button" [ngClass]="{ disabled: !form.valid }"> |
39 | <span class="icon icon-validate"></span> | ||
40 | <input type="button" value="Publish" (click)="upload()" /> | ||
84 | </div> | 41 | </div> |
85 | </div> | 42 | </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> | 43 | </form> |
140 | </div> | 44 | </div> |
141 | </div> | 45 | </div> |