diff options
Diffstat (limited to 'client/src/app')
8 files changed, 58 insertions, 0 deletions
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index c7310690f..4e33fae52 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts | |||
@@ -39,6 +39,7 @@ export class AppComponent implements OnInit { | |||
39 | } | 39 | } |
40 | 40 | ||
41 | this.videoService.loadVideoCategories(); | 41 | this.videoService.loadVideoCategories(); |
42 | this.videoService.loadVideoLicences(); | ||
42 | } | 43 | } |
43 | 44 | ||
44 | isInAdmin() { | 45 | isInAdmin() { |
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts index de5112238..50d7304b5 100644 --- a/client/src/app/shared/forms/form-validators/video.ts +++ b/client/src/app/shared/forms/form-validators/video.ts | |||
@@ -8,12 +8,21 @@ export const VIDEO_NAME = { | |||
8 | 'maxlength': 'Video name cannot be more than 50 characters long.' | 8 | 'maxlength': 'Video name cannot be more than 50 characters long.' |
9 | } | 9 | } |
10 | }; | 10 | }; |
11 | |||
11 | export const VIDEO_CATEGORY = { | 12 | export const VIDEO_CATEGORY = { |
12 | VALIDATORS: [ Validators.required ], | 13 | VALIDATORS: [ Validators.required ], |
13 | MESSAGES: { | 14 | MESSAGES: { |
14 | 'required': 'Video category is required.' | 15 | 'required': 'Video category is required.' |
15 | } | 16 | } |
16 | }; | 17 | }; |
18 | |||
19 | export const VIDEO_LICENCE = { | ||
20 | VALIDATORS: [ Validators.required ], | ||
21 | MESSAGES: { | ||
22 | 'required': 'Video licence is required.' | ||
23 | } | ||
24 | }; | ||
25 | |||
17 | export const VIDEO_DESCRIPTION = { | 26 | export const VIDEO_DESCRIPTION = { |
18 | VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(250) ], | 27 | VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(250) ], |
19 | MESSAGES: { | 28 | MESSAGES: { |
diff --git a/client/src/app/videos/shared/video.model.ts b/client/src/app/videos/shared/video.model.ts index b5d96f63a..5ed622dce 100644 --- a/client/src/app/videos/shared/video.model.ts +++ b/client/src/app/videos/shared/video.model.ts | |||
@@ -3,6 +3,7 @@ export class Video { | |||
3 | by: string; | 3 | by: string; |
4 | createdAt: Date; | 4 | createdAt: Date; |
5 | categoryLabel: string; | 5 | categoryLabel: string; |
6 | licenceLabel: string; | ||
6 | description: string; | 7 | description: string; |
7 | duration: string; | 8 | duration: string; |
8 | id: string; | 9 | id: string; |
@@ -33,6 +34,7 @@ export class Video { | |||
33 | author: string, | 34 | author: string, |
34 | createdAt: string, | 35 | createdAt: string, |
35 | categoryLabel: string, | 36 | categoryLabel: string, |
37 | licenceLabel: string, | ||
36 | description: string, | 38 | description: string, |
37 | duration: number; | 39 | duration: number; |
38 | id: string, | 40 | id: string, |
@@ -49,6 +51,7 @@ export class Video { | |||
49 | this.author = hash.author; | 51 | this.author = hash.author; |
50 | this.createdAt = new Date(hash.createdAt); | 52 | this.createdAt = new Date(hash.createdAt); |
51 | this.categoryLabel = hash.categoryLabel; | 53 | this.categoryLabel = hash.categoryLabel; |
54 | this.licenceLabel = hash.licenceLabel; | ||
52 | this.description = hash.description; | 55 | this.description = hash.description; |
53 | this.duration = Video.createDurationString(hash.duration); | 56 | this.duration = Video.createDurationString(hash.duration); |
54 | this.id = hash.id; | 57 | this.id = hash.id; |
diff --git a/client/src/app/videos/shared/video.service.ts b/client/src/app/videos/shared/video.service.ts index debc114aa..15f017e33 100644 --- a/client/src/app/videos/shared/video.service.ts +++ b/client/src/app/videos/shared/video.service.ts | |||
@@ -23,6 +23,7 @@ export class VideoService { | |||
23 | private static BASE_VIDEO_URL = '/api/v1/videos/'; | 23 | private static BASE_VIDEO_URL = '/api/v1/videos/'; |
24 | 24 | ||
25 | videoCategories: Array<{ id: number, label: string }> = []; | 25 | videoCategories: Array<{ id: number, label: string }> = []; |
26 | videoLicences: Array<{ id: number, label: string }> = []; | ||
26 | 27 | ||
27 | constructor( | 28 | constructor( |
28 | private authService: AuthService, | 29 | private authService: AuthService, |
@@ -45,6 +46,19 @@ export class VideoService { | |||
45 | }); | 46 | }); |
46 | } | 47 | } |
47 | 48 | ||
49 | loadVideoLicences() { | ||
50 | return this.http.get(VideoService.BASE_VIDEO_URL + 'licences') | ||
51 | .map(this.restExtractor.extractDataGet) | ||
52 | .subscribe(data => { | ||
53 | Object.keys(data).forEach(licenceKey => { | ||
54 | this.videoLicences.push({ | ||
55 | id: parseInt(licenceKey), | ||
56 | label: data[licenceKey] | ||
57 | }); | ||
58 | }); | ||
59 | }); | ||
60 | } | ||
61 | |||
48 | getVideo(id: string): Observable<Video> { | 62 | getVideo(id: string): Observable<Video> { |
49 | return this.http.get(VideoService.BASE_VIDEO_URL + id) | 63 | return this.http.get(VideoService.BASE_VIDEO_URL + id) |
50 | .map(this.restExtractor.extractDataGet) | 64 | .map(this.restExtractor.extractDataGet) |
diff --git a/client/src/app/videos/video-add/video-add.component.html b/client/src/app/videos/video-add/video-add.component.html index c6692b21d..97a3c846a 100644 --- a/client/src/app/videos/video-add/video-add.component.html +++ b/client/src/app/videos/video-add/video-add.component.html | |||
@@ -27,6 +27,18 @@ | |||
27 | </div> | 27 | </div> |
28 | 28 | ||
29 | <div class="form-group"> | 29 | <div class="form-group"> |
30 | <label for="licence">Licence</label> | ||
31 | <select class="form-control" id="licence" formControlName="licence"> | ||
32 | <option></option> | ||
33 | <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> | ||
34 | </select> | ||
35 | |||
36 | <div *ngIf="formErrors.licence" class="alert alert-danger"> | ||
37 | {{ formErrors.licence }} | ||
38 | </div> | ||
39 | </div> | ||
40 | |||
41 | <div class="form-group"> | ||
30 | <label for="tags">Tags</label> <span class="little-information">(press enter to add the tag)</span> | 42 | <label for="tags">Tags</label> <span class="little-information">(press enter to add the tag)</span> |
31 | <input | 43 | <input |
32 | type="text" class="form-control" id="currentTag" | 44 | type="text" class="form-control" id="currentTag" |
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts index 5ed1d8841..8fae233d3 100644 --- a/client/src/app/videos/video-add/video-add.component.ts +++ b/client/src/app/videos/video-add/video-add.component.ts | |||
@@ -10,6 +10,7 @@ import { | |||
10 | FormReactive, | 10 | FormReactive, |
11 | VIDEO_NAME, | 11 | VIDEO_NAME, |
12 | VIDEO_CATEGORY, | 12 | VIDEO_CATEGORY, |
13 | VIDEO_LICENCE, | ||
13 | VIDEO_DESCRIPTION, | 14 | VIDEO_DESCRIPTION, |
14 | VIDEO_TAGS | 15 | VIDEO_TAGS |
15 | } from '../../shared'; | 16 | } from '../../shared'; |
@@ -25,18 +26,21 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
25 | tags: string[] = []; | 26 | tags: string[] = []; |
26 | uploader: FileUploader; | 27 | uploader: FileUploader; |
27 | videoCategories = []; | 28 | videoCategories = []; |
29 | videoLicences = []; | ||
28 | 30 | ||
29 | error: string = null; | 31 | error: string = null; |
30 | form: FormGroup; | 32 | form: FormGroup; |
31 | formErrors = { | 33 | formErrors = { |
32 | name: '', | 34 | name: '', |
33 | category: '', | 35 | category: '', |
36 | licence: '', | ||
34 | description: '', | 37 | description: '', |
35 | currentTag: '' | 38 | currentTag: '' |
36 | }; | 39 | }; |
37 | validationMessages = { | 40 | validationMessages = { |
38 | name: VIDEO_NAME.MESSAGES, | 41 | name: VIDEO_NAME.MESSAGES, |
39 | category: VIDEO_CATEGORY.MESSAGES, | 42 | category: VIDEO_CATEGORY.MESSAGES, |
43 | licence: VIDEO_LICENCE.MESSAGES, | ||
40 | description: VIDEO_DESCRIPTION.MESSAGES, | 44 | description: VIDEO_DESCRIPTION.MESSAGES, |
41 | currentTag: VIDEO_TAGS.MESSAGES | 45 | currentTag: VIDEO_TAGS.MESSAGES |
42 | }; | 46 | }; |
@@ -68,6 +72,7 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
68 | this.form = this.formBuilder.group({ | 72 | this.form = this.formBuilder.group({ |
69 | name: [ '', VIDEO_NAME.VALIDATORS ], | 73 | name: [ '', VIDEO_NAME.VALIDATORS ], |
70 | category: [ '', VIDEO_CATEGORY.VALIDATORS ], | 74 | category: [ '', VIDEO_CATEGORY.VALIDATORS ], |
75 | licence: [ '', VIDEO_LICENCE.VALIDATORS ], | ||
71 | description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], | 76 | description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], |
72 | currentTag: [ '', VIDEO_TAGS.VALIDATORS ] | 77 | currentTag: [ '', VIDEO_TAGS.VALIDATORS ] |
73 | }); | 78 | }); |
@@ -77,6 +82,7 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
77 | 82 | ||
78 | ngOnInit() { | 83 | ngOnInit() { |
79 | this.videoCategories = this.videoService.videoCategories; | 84 | this.videoCategories = this.videoService.videoCategories; |
85 | this.videoLicences = this.videoService.videoLicences; | ||
80 | 86 | ||
81 | this.uploader = new FileUploader({ | 87 | this.uploader = new FileUploader({ |
82 | authToken: this.authService.getRequestHeaderValue(), | 88 | authToken: this.authService.getRequestHeaderValue(), |
@@ -88,10 +94,12 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
88 | this.uploader.onBuildItemForm = (item, form) => { | 94 | this.uploader.onBuildItemForm = (item, form) => { |
89 | const name = this.form.value['name']; | 95 | const name = this.form.value['name']; |
90 | const category = this.form.value['category']; | 96 | const category = this.form.value['category']; |
97 | const licence = this.form.value['licence']; | ||
91 | const description = this.form.value['description']; | 98 | const description = this.form.value['description']; |
92 | 99 | ||
93 | form.append('name', name); | 100 | form.append('name', name); |
94 | form.append('category', category); | 101 | form.append('category', category); |
102 | form.append('licence', licence); | ||
95 | form.append('description', description); | 103 | form.append('description', description); |
96 | 104 | ||
97 | for (let i = 0; i < this.tags.length; i++) { | 105 | for (let i = 0; i < this.tags.length; i++) { |
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html index e754d69e5..897561c14 100644 --- a/client/src/app/videos/video-watch/video-watch.component.html +++ b/client/src/app/videos/video-watch/video-watch.component.html | |||
@@ -114,6 +114,13 @@ | |||
114 | </div> | 114 | </div> |
115 | </div> | 115 | </div> |
116 | 116 | ||
117 | <div id="video-licence" class="row"> | ||
118 | <div class="col-md-12"> | ||
119 | <span id="licence-label">Licence:</span> | ||
120 | {{ video.licenceLabel }} | ||
121 | </div> | ||
122 | </div> | ||
123 | |||
117 | <div id="video-description" class="row"> | 124 | <div id="video-description" class="row"> |
118 | <div class="col-md-12"> | 125 | <div class="col-md-12"> |
119 | <div id="description-label">Description</div> | 126 | <div id="description-label">Description</div> |
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss index 799e37b5d..bf989e78b 100644 --- a/client/src/app/videos/video-watch/video-watch.component.scss +++ b/client/src/app/videos/video-watch/video-watch.component.scss | |||
@@ -119,6 +119,10 @@ | |||
119 | } | 119 | } |
120 | } | 120 | } |
121 | 121 | ||
122 | #video-licence #licence-label { | ||
123 | font-weight: bold; | ||
124 | } | ||
125 | |||
122 | #video-description { | 126 | #video-description { |
123 | margin-top: 10px; | 127 | margin-top: 10px; |
124 | 128 | ||