Client: add support for video licences

client/src/app/app.component.ts

@@ -39,6 +39,7 @@ export class AppComponent implements OnInit {
     }
 
     this.videoService.loadVideoCategories();
+    this.videoService.loadVideoLicences();
   }
 
   isInAdmin() {

client/src/app/shared/forms/form-validators/video.ts

@@ -8,12 +8,21 @@ export const VIDEO_NAME = {
     'maxlength': 'Video name cannot be more than 50 characters long.'
   }
 };
+
 export const VIDEO_CATEGORY = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
     'required': 'Video category is required.'
   }
 };
+
+export const VIDEO_LICENCE = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': 'Video licence is required.'
+  }
+};
+
 export const VIDEO_DESCRIPTION = {
   VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(250) ],
   MESSAGES: {

client/src/app/videos/shared/video.model.ts

@@ -3,6 +3,7 @@ export class Video {
   by: string;
   createdAt: Date;
   categoryLabel: string;
+  licenceLabel: string;
   description: string;
   duration: string;
   id: string;
@@ -33,6 +34,7 @@ export class Video {
     author: string,
     createdAt: string,
     categoryLabel: string,
+    licenceLabel: string,
     description: string,
     duration: number;
     id: string,
@@ -49,6 +51,7 @@ export class Video {
     this.author  = hash.author;
     this.createdAt = new Date(hash.createdAt);
     this.categoryLabel = hash.categoryLabel;
+    this.licenceLabel = hash.licenceLabel;
     this.description = hash.description;
     this.duration = Video.createDurationString(hash.duration);
     this.id = hash.id;

client/src/app/videos/shared/video.service.ts

@@ -23,6 +23,7 @@ export class VideoService {
   private static BASE_VIDEO_URL = '/api/v1/videos/';
 
   videoCategories: Array<{ id: number, label: string }> = [];
+  videoLicences: Array<{ id: number, label: string }> = [];
 
   constructor(
     private authService: AuthService,
@@ -45,6 +46,19 @@ export class VideoService {
                     });
   }
 
+  loadVideoLicences() {
+    return this.http.get(VideoService.BASE_VIDEO_URL + 'licences')
+                    .map(this.restExtractor.extractDataGet)
+                    .subscribe(data => {
+                      Object.keys(data).forEach(licenceKey => {
+                        this.videoLicences.push({
+                          id: parseInt(licenceKey),
+                          label: data[licenceKey]
+                        });
+                      });
+                    });
+  }
+
   getVideo(id: string): Observable<Video> {
     return this.http.get(VideoService.BASE_VIDEO_URL + id)
                     .map(this.restExtractor.extractDataGet)

client/src/app/videos/video-add/video-add.component.html

@@ -26,6 +26,18 @@
     </div>
   </div>
 
+  <div class="form-group">
+    <label for="licence">Licence</label>
+    <select class="form-control" id="licence" formControlName="licence">
+      <option></option>
+      <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.licence" class="alert alert-danger">
+      {{ formErrors.licence }}
+    </div>
+  </div>
+
   <div class="form-group">
     <label for="tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
     <input

client/src/app/videos/video-add/video-add.component.ts

@@ -10,6 +10,7 @@ import {
   FormReactive,
   VIDEO_NAME,
   VIDEO_CATEGORY,
+  VIDEO_LICENCE,
   VIDEO_DESCRIPTION,
   VIDEO_TAGS
 } from '../../shared';
@@ -25,18 +26,21 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   tags: string[] = [];
   uploader: FileUploader;
   videoCategories = [];
+  videoLicences = [];
 
   error: string = null;
   form: FormGroup;
   formErrors = {
     name: '',
     category: '',
+    licence: '',
     description: '',
     currentTag: ''
   };
   validationMessages = {
     name: VIDEO_NAME.MESSAGES,
     category: VIDEO_CATEGORY.MESSAGES,
+    licence: VIDEO_LICENCE.MESSAGES,
     description: VIDEO_DESCRIPTION.MESSAGES,
     currentTag: VIDEO_TAGS.MESSAGES
   };
@@ -68,6 +72,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.form = this.formBuilder.group({
       name: [ '', VIDEO_NAME.VALIDATORS ],
       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
+      licence: [ '', VIDEO_LICENCE.VALIDATORS ],
       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
       currentTag: [ '', VIDEO_TAGS.VALIDATORS ]
     });
@@ -77,6 +82,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
   ngOnInit() {
     this.videoCategories = this.videoService.videoCategories;
+    this.videoLicences = this.videoService.videoLicences;
 
     this.uploader = new FileUploader({
       authToken: this.authService.getRequestHeaderValue(),
@@ -88,10 +94,12 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.uploader.onBuildItemForm = (item, form) => {
       const name = this.form.value['name'];
       const category = this.form.value['category'];
+      const licence = this.form.value['licence'];
       const description = this.form.value['description'];
 
       form.append('name', name);
       form.append('category', category);
+      form.append('licence', licence);
       form.append('description', description);
 
       for (let i = 0; i < this.tags.length; i++) {

client/src/app/videos/video-watch/video-watch.component.html

@@ -114,6 +114,13 @@
     </div>
   </div>
 
+  <div id="video-licence" class="row">
+    <div class="col-md-12">
+      <span id="licence-label">Licence:</span>
+      {{ video.licenceLabel }}
+    </div>
+  </div>
+
   <div id="video-description" class="row">
     <div class="col-md-12">
       <div id="description-label">Description</div>

client/src/app/videos/video-watch/video-watch.component.scss

@@ -119,6 +119,10 @@
     }
   }
 
+  #video-licence #licence-label {
+    font-weight: bold;
+  }
+
   #video-description {
     margin-top: 10px;