Client: support video language

client/src/app/app.component.ts

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

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

@@ -23,6 +23,11 @@ export const VIDEO_LICENCE = {
   }
 };
 
+export const VIDEO_LANGUAGE = {
+  VALIDATORS: [ ],
+  MESSAGES: {}
+};
+
 export const VIDEO_DESCRIPTION = {
   VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(250) ],
   MESSAGES: {

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

@@ -6,6 +6,7 @@ export class Video {
   createdAt: Date;
   categoryLabel: string;
   licenceLabel: string;
+  languageLabel: string;
   description: string;
   duration: string;
   id: string;
@@ -38,6 +39,7 @@ export class Video {
     createdAt: string,
     categoryLabel: string,
     licenceLabel: string,
+    languageLabel: string;
     description: string,
     duration: number;
     id: string,
@@ -56,6 +58,7 @@ export class Video {
     this.createdAt = new Date(hash.createdAt);
     this.categoryLabel = hash.categoryLabel;
     this.licenceLabel = hash.licenceLabel;
+    this.languageLabel = hash.languageLabel;
     this.description = hash.description;
     this.duration = Video.createDurationString(hash.duration);
     this.id = hash.id;

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

@@ -24,6 +24,7 @@ export class VideoService {
 
   videoCategories: Array<{ id: number, label: string }> = [];
   videoLicences: Array<{ id: number, label: string }> = [];
+  videoLanguages: Array<{ id: number, label: string }> = [];
 
   constructor(
     private authService: AuthService,
@@ -59,6 +60,19 @@ export class VideoService {
                     });
   }
 
+  loadVideoLanguages() {
+    return this.http.get(VideoService.BASE_VIDEO_URL + 'languages')
+                    .map(this.restExtractor.extractDataGet)
+                    .subscribe(data => {
+                      Object.keys(data).forEach(languageKey => {
+                        this.videoLanguages.push({
+                          id: parseInt(languageKey),
+                          label: data[languageKey]
+                        });
+                      });
+                    });
+  }
+
   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

@@ -46,6 +46,18 @@
     </div>
   </div>
 
+  <div class="form-group">
+    <label for="language">Language</label>
+    <select class="form-control" id="language" formControlName="language">
+      <option></option>
+      <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.language" class="alert alert-danger">
+      {{ formErrors.language }}
+    </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

@@ -11,6 +11,7 @@ import {
   VIDEO_NAME,
   VIDEO_CATEGORY,
   VIDEO_LICENCE,
+  VIDEO_LANGUAGE,
   VIDEO_DESCRIPTION,
   VIDEO_TAGS
 } from '../../shared';
@@ -27,6 +28,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   uploader: FileUploader;
   videoCategories = [];
   videoLicences = [];
+  videoLanguages = [];
 
   error: string = null;
   form: FormGroup;
@@ -34,6 +36,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     name: '',
     category: '',
     licence: '',
+    language: '',
     description: '',
     currentTag: ''
   };
@@ -41,6 +44,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     name: VIDEO_NAME.MESSAGES,
     category: VIDEO_CATEGORY.MESSAGES,
     licence: VIDEO_LICENCE.MESSAGES,
+    language: VIDEO_LANGUAGE.MESSAGES,
     description: VIDEO_DESCRIPTION.MESSAGES,
     currentTag: VIDEO_TAGS.MESSAGES
   };
@@ -74,6 +78,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       nsfw: [ false ],
       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
+      language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
       currentTag: [ '', VIDEO_TAGS.VALIDATORS ]
     });
@@ -84,6 +89,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   ngOnInit() {
     this.videoCategories = this.videoService.videoCategories;
     this.videoLicences = this.videoService.videoLicences;
+    this.videoLanguages = this.videoService.videoLanguages;
 
     this.uploader = new FileUploader({
       authToken: this.authService.getRequestHeaderValue(),
@@ -97,12 +103,19 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       const nsfw = this.form.value['nsfw'];
       const category = this.form.value['category'];
       const licence = this.form.value['licence'];
+      const language = this.form.value['language'];
       const description = this.form.value['description'];
 
       form.append('name', name);
       form.append('category', category);
       form.append('nsfw', nsfw);
       form.append('licence', licence);
+
+      // Language is optional
+      if (language) {
+        form.append('language', language);
+      }
+
       form.append('description', description);
 
       for (let i = 0; i < this.tags.length; i++) {

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

@@ -121,6 +121,13 @@
     </div>
   </div>
 
+  <div id="video-language" class="row">
+    <div class="col-md-12">
+      <span id="language-label">Language:</span>
+      {{ video.languageLabel }}
+    </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,7 +119,7 @@
     }
   }
 
-  #video-licence #licence-label {
+  #video-licence #licence-label, #video-language #language-label {
     font-weight: bold;
   }