Add i18n attributes

6 files changed, 55 insertions, 48 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 7e1be4467..bd9f69362 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -4,7 +4,7 @@
     <tab heading="Basic info">
       <div class="col-md-8">
         <div class="form-group">
-          <label for="name">Title</label>
+          <label i18n for="name">Title</label>
           <input type="text" id="name" formControlName="name" />
           <div *ngIf="formErrors.name" class="form-error">
             {{ formErrors.name }}
@@ -12,7 +12,7 @@
         </div>
 
         <div class="form-group">
-          <label class="label-tags">Tags</label> <span>(press Enter to add)</span>
+          <label i18n class="label-tags">Tags</label> <span i18n>(press Enter to add)</span>
           <tag-input
             [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
             formControlName="tags" maxItems="5" modelAsStrings="true"
@@ -20,8 +20,8 @@
         </div>
 
         <div class="form-group">
-          <label for="description">Description</label>
-          <my-help helpType="markdownText" preHtml="Video descriptions are truncated by default and require manual action to expand them."></my-help>
+          <label i18n for="description">Description</label>
+          <my-help helpType="markdownText" i18n-preHtml preHtml="Video descriptions are truncated by default and require manual action to expand them."></my-help>
           <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
 
           <div *ngIf="formErrors.description" class="form-error">
@@ -32,7 +32,7 @@
 
       <div class="col-md-4">
         <div class="form-group">
-          <label>Channel</label>
+          <label i18n>Channel</label>
           <div class="peertube-select-container">
             <select formControlName="channelId">
               <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
@@ -41,7 +41,7 @@
         </div>
 
         <div class="form-group">
-          <label for="category">Category</label>
+          <label i18n for="category">Category</label>
           <div class="peertube-select-container">
             <select id="category" formControlName="category">
               <option></option>
@@ -55,7 +55,7 @@
         </div>
 
         <div class="form-group">
-          <label for="licence">Licence</label>
+          <label i18n for="licence">Licence</label>
           <div class="peertube-select-container">
             <select id="licence" formControlName="licence">
               <option></option>
@@ -69,7 +69,7 @@
         </div>
 
         <div class="form-group">
-          <label for="language">Language</label>
+          <label i18n for="language">Language</label>
           <div class="peertube-select-container">
             <select id="language" formControlName="language">
               <option></option>
@@ -83,7 +83,7 @@
         </div>
 
         <div class="form-group">
-          <label for="privacy">Privacy</label>
+          <label i18n for="privacy">Privacy</label>
           <div class="peertube-select-container">
             <select id="privacy" formControlName="privacy">
               <option></option>
@@ -99,14 +99,14 @@
         <div class="form-group form-group-checkbox">
           <input type="checkbox" id="nsfw" formControlName="nsfw" />
           <label for="nsfw"></label>
-          <label for="nsfw">This video contains mature or explicit content</label>
-          <my-help tooltipPlacement="top" helpType="custom" customHtml="Some instances do not list NSFW videos by default."></my-help>
+          <label i18n for="nsfw">This video contains mature or explicit content</label>
+          <my-help tooltipPlacement="top" helpType="custom" i18n-customHtml customHtml="Some instances do not list NSFW videos by default."></my-help>
         </div>
 
         <div class="form-group form-group-checkbox">
           <input type="checkbox" id="commentsEnabled" formControlName="commentsEnabled" />
           <label for="commentsEnabled"></label>
-          <label for="commentsEnabled">Enable video comments</label>
+          <label i18n for="commentsEnabled">Enable video comments</label>
         </div>
 
       </div>
@@ -116,24 +116,24 @@
       <div class="col-md-12 advanced-settings">
         <div class="form-group">
           <my-video-image
-            inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
+            i18n-inputLabel inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
             previewWidth="200px" previewHeight="110px"
           ></my-video-image>
         </div>
 
         <div class="form-group">
           <my-video-image
-            inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile"
+            i18n-inputLabel inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile"
             previewWidth="360px" previewHeight="200px"
           ></my-video-image>
         </div>
 
         <div class="form-group">
-          <label for="support">Support</label>
-          <my-help helpType="markdownEnhanced" preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
+          <label i18n for="support">Support</label>
+          <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
           <my-markdown-textarea
-              id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
-              [classes]="{ 'input-error': formErrors['support'] }"
+            id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
+            [classes]="{ 'input-error': formErrors['support'] }"
           ></my-markdown-textarea>
           <div *ngIf="formErrors.support" class="form-error">
             {{ formErrors.support }}
diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.html b/client/src/app/videos/+video-edit/shared/video-image.component.html
index 5d0624f8c..e319d7ee7 100644
--- a/client/src/app/videos/+video-edit/shared/video-image.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-image.component.html
@@ -8,7 +8,7 @@
         (change)="fileChange($event)"
       />
     </div>
-    <div class="image-constraints">(extensions: {{ videoImageExtensions }}, max size: {{ maxVideoImageSize | bytes }})</div>
+    <div i18n class="image-constraints">(extensions: {{ videoImageExtensions }}, max size: {{ maxVideoImageSize | bytes }})</div>
   </div>
 
   <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
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 440556562..f00cfe016 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -1,7 +1,7 @@
 <div class="margin-content">
   <div class="title-page title-page-single">
-    <ng-template [ngIf]="!videoFileName">Upload your video</ng-template>
-    <ng-template [ngIf]="videoFileName">Upload {{ videoFileName }}</ng-template>
+    <ng-container *ngIf="!videoFileName" i18n>Upload your video</ng-container>
+    <ng-container *ngIf="videoFileName" i18n>Upload {{ videoFileName }}</ng-container>
   </div>
 
   <div *ngIf="!isUploadingVideo" class="upload-video-container">
@@ -9,12 +9,12 @@
       <div class="icon icon-upload"></div>
 
       <div class="button-file">
-        <span>Select the file to upload</span>
+        <span i18n>Select the file to upload</span>
         <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" />
       </div>
 
       <div class="form-group form-group-channel">
-        <label for="first-step-channel">Channel</label>
+        <label i18n for="first-step-channel">Channel</label>
         <div class="peertube-select-container">
           <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
             <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
@@ -23,7 +23,7 @@
       </div>
 
       <div class="form-group">
-        <label for="first-step-privacy">Privacy</label>
+        <label i18n for="first-step-privacy">Privacy</label>
         <div class="peertube-select-container">
           <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
             <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
@@ -49,14 +49,14 @@
     ></my-video-edit>
 
     <div class="submit-container">
-      <div *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
+      <div i18n *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
 
       <div class="submit-button"
          (click)="updateSecondStep()"
          [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true || videoUploaded !== true }"
       >
         <span class="icon icon-validate"></span>
-        <input type="button" value="Publish" />
+        <input type="button" i18n-value value="Publish" />
       </div>
     </div>
   </form>
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 997f033b7..a615fd92c 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -15,6 +15,7 @@ import { ValidatorMessage } from '../../shared/forms/form-validators/validator-m
 import { populateAsyncUserVideoChannels } from '../../shared/misc/utils'
 import { VideoEdit } from '../../shared/video/video-edit.model'
 import { VideoService } from '../../shared/video/video.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-videos-add',
@@ -56,7 +57,8 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
     private userService: UserService,
     private serverService: ServerService,
     private videoService: VideoService,
-    private loadingBar: LoadingBarService
+    private loadingBar: LoadingBarService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -99,10 +101,11 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
     let text = ''
 
     if (this.videoUploaded === true) {
-      text = 'Your video was uploaded in your account and is private.' +
-        ' But associated data (tags, description...) will be lost, are you sure you want to leave this page?'
+      // FIXME: cannot concatenate strings inside i18n service :/
+      text = this.i18n('Your video was uploaded in your account and is private.') +
+        this.i18n('But associated data (tags, description...) will be lost, are you sure you want to leave this page?')
     } else {
-      text = 'Your video is not uploaded yet, are you sure you want to leave this page?'
+      text = this.i18n('Your video is not uploaded yet, are you sure you want to leave this page?')
     }
 
     return {
@@ -127,7 +130,7 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
       this.isUploadingVideo = false
       this.videoUploadPercents = 0
       this.videoUploadObservable = null
-      this.notificationsService.info('Info', 'Upload cancelled')
+      this.notificationsService.info(this.i18n('Info'), this.i18n('Upload cancelled'))
     }
   }
 
@@ -137,7 +140,7 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
 
     // Cannot upload videos > 4GB for now
     if (videofile.size > 4 * 1024 * 1024 * 1024) {
-      this.notificationsService.error('Error', 'We are sorry but PeerTube cannot handle videos > 4GB')
+      this.notificationsService.error(this.i18n('Error'), this.i18n('We are sorry but PeerTube cannot handle videos > 4GB'))
       return
     }
 
@@ -145,11 +148,15 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
       const bytePipes = new BytesPipe()
 
-      const msg = 'Your video quota is exceeded with this video ' +
-        `(video size: ${bytePipes.transform(videofile.size, 0)}, ` +
-        `used: ${bytePipes.transform(this.userVideoQuotaUsed, 0)}, ` +
-        `quota: ${bytePipes.transform(videoQuota, 0)})`
-      this.notificationsService.error('Error', msg)
+      const msg = this.i18n(
+        'Your video quota is exceeded with this video (video size: {{ videoSize }}, used: {{ videoQuotaUsed }}, quota: {{ videoQuota }})',
+        {
+          videoSize: bytePipes.transform(videofile.size, 0),
+          videoQuotaUsed: bytePipes.transform(this.userVideoQuotaUsed, 0),
+          videoQuota: bytePipes.transform(videoQuota, 0)
+        }
+      )
+      this.notificationsService.error(this.i18n('Error'), msg)
       return
     }
 
@@ -192,8 +199,6 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
         if (event.type === HttpEventType.UploadProgress) {
           this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
         } else if (event instanceof HttpResponse) {
-          console.log('Video uploaded.')
-
           this.videoUploaded = true
 
           this.videoUploadedIds = event.body.video
@@ -207,7 +212,7 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
         this.isUploadingVideo = false
         this.videoUploadPercents = 0
         this.videoUploadObservable = null
-        this.notificationsService.error('Error', err.message)
+        this.notificationsService.error(this.i18n('Error'), err.message)
       }
     )
   }
@@ -231,13 +236,13 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
           this.isUploadingVideo = false
           this.loadingBar.complete()
 
-          this.notificationsService.success('Success', 'Video published.')
+          this.notificationsService.success(this.i18n('Success'), this.i18n('Video published.'))
           this.router.navigate([ '/videos/watch', video.uuid ])
         },
 
         err => {
           this.isUpdatingVideo = false
-          this.notificationsService.error('Error', err.message)
+          this.notificationsService.error(this.i18n('Error'), err.message)
           console.error(err)
         }
       )
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index a1b4707be..73b2bc08f 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -1,5 +1,5 @@
 <div class="margin-content">
-  <div class="title-page title-page-single">
+  <div i18n class="title-page title-page-single">
     Update {{ video?.name }}
   </div>
 
@@ -13,7 +13,7 @@
     <div class="submit-container">
       <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }">
         <span class="icon icon-validate"></span>
-        <input type="button" value="Update" />
+        <input type="button" i18n-value value="Update" />
       </div>
     </div>
   </form>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index 310285f92..e37dd526f 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -12,6 +12,7 @@ import { ValidatorMessage } from '../../shared/forms/form-validators/validator-m
 import { VideoEdit } from '../../shared/video/video-edit.model'
 import { VideoService } from '../../shared/video/video.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-videos-update',
@@ -37,7 +38,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
     private videoService: VideoService,
     private authService: AuthService,
     private loadingBar: LoadingBarService,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -91,7 +93,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
 
           err => {
             console.error(err)
-            this.notificationsService.error('Error', err.message)
+            this.notificationsService.error(this.i18n('Error'), err.message)
           }
         )
   }
@@ -116,13 +118,13 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
                        () => {
                          this.isUpdatingVideo = false
                          this.loadingBar.complete()
-                         this.notificationsService.success('Success', 'Video updated.')
+                         this.notificationsService.success(this.i18n('Success'), this.i18n('Video updated.'))
                          this.router.navigate([ '/videos/watch', this.video.uuid ])
                        },
 
                        err => {
                          this.isUpdatingVideo = false
-                         this.notificationsService.error('Error', err.message)
+                         this.notificationsService.error(this.i18n('Error'), err.message)
                          console.error(err)
                        }
                       )