Add i18n attributes

23 files changed, 240 insertions, 188 deletions

diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index e4644498b..1b2b89c3a 100644
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -1,26 +1,26 @@
 <div class="row">
   <div class="sub-menu">
-    <a *ngIf="hasUsersRight()" routerLink="/admin/users" routerLinkActive="active" class="title-page">
+    <a i18n *ngIf="hasUsersRight()" routerLink="/admin/users" routerLinkActive="active" class="title-page">
       Users
     </a>
 
-    <a *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active" class="title-page">
+    <a i18n *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active" class="title-page">
       Manage follows
     </a>
 
-    <a *ngIf="hasVideoAbusesRight()" routerLink="/admin/video-abuses" routerLinkActive="active" class="title-page">
+    <a i18n *ngIf="hasVideoAbusesRight()" routerLink="/admin/video-abuses" routerLinkActive="active" class="title-page">
       Video abuses
     </a>
 
-    <a *ngIf="hasVideoBlacklistRight()" routerLink="/admin/video-blacklist" routerLinkActive="active" class="title-page">
+    <a i18n *ngIf="hasVideoBlacklistRight()" routerLink="/admin/video-blacklist" routerLinkActive="active" class="title-page">
       Video blacklist
     </a>
 
-    <a *ngIf="hasJobsRight()" routerLink="/admin/jobs" routerLinkActive="active" class="title-page">
+    <a i18n *ngIf="hasJobsRight()" routerLink="/admin/jobs" routerLinkActive="active" class="title-page">
       Jobs
     </a>
 
-    <a *ngIf="hasConfigRight()" routerLink="/admin/config" routerLinkActive="active" class="title-page">
+    <a i18n *ngIf="hasConfigRight()" routerLink="/admin/config" routerLinkActive="active" class="title-page">
       Configuration
     </a>
   </div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 8a1e33c56..4263b7b5f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -4,13 +4,13 @@
 
     <tab heading="Basic configuration">
 
-      <div class="inner-form-title">Instance</div>
+      <div i18n class="inner-form-title">Instance</div>
 
       <div class="form-group">
-        <label for="instanceName">Name</label>
+        <label i18n for="instanceName">Name</label>
         <input
-            type="text" id="instanceName"
-            formControlName="instanceName" [ngClass]="{ 'input-error': formErrors['instanceName'] }"
+          type="text" id="instanceName"
+          formControlName="instanceName" [ngClass]="{ 'input-error': formErrors['instanceName'] }"
         >
         <div *ngIf="formErrors.instanceName" class="form-error">
           {{ formErrors.instanceName }}
@@ -18,10 +18,10 @@
       </div>
 
       <div class="form-group">
-        <label for="instanceShortDescription">Short description</label>
+        <label i18n for="instanceShortDescription">Short description</label>
         <textarea
-            id="instanceShortDescription" formControlName="instanceShortDescription"
-            [ngClass]="{ 'input-error': formErrors['instanceShortDescription'] }"
+          id="instanceShortDescription" formControlName="instanceShortDescription"
+          [ngClass]="{ 'input-error': formErrors['instanceShortDescription'] }"
         ></textarea>
         <div *ngIf="formErrors.instanceShortDescription" class="form-error">
           {{ formErrors.instanceShortDescription }}
@@ -29,10 +29,10 @@
       </div>
 
       <div class="form-group">
-        <label for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
+        <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
         <my-markdown-textarea
-            id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
-            [classes]="{ 'input-error': formErrors['instanceDescription'] }"
+          id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
+          [classes]="{ 'input-error': formErrors['instanceDescription'] }"
         ></my-markdown-textarea>
         <div *ngIf="formErrors.instanceDescription" class="form-error">
           {{ formErrors.instanceDescription }}
@@ -40,10 +40,10 @@
       </div>
 
       <div class="form-group">
-        <label for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
+        <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
         <my-markdown-textarea
-            id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
-            [ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
+          id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
+          [ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
         ></my-markdown-textarea>
         <div *ngIf="formErrors.instanceTerms" class="form-error">
           {{ formErrors.instanceTerms }}
@@ -51,12 +51,12 @@
       </div>
 
       <div class="form-group">
-        <label for="instanceDefaultClientRoute">Default client route</label>
+        <label i18n for="instanceDefaultClientRoute">Default client route</label>
         <div class="peertube-select-container">
           <select id="instanceDefaultClientRoute" formControlName="instanceDefaultClientRoute">
-            <option value="/videos/trending">Videos Trending</option>
-            <option value="/videos/recently-added">Videos Recently Added</option>
-            <option value="/videos/local">Local videos</option>
+            <option i18n value="/videos/trending">Videos Trending</option>
+            <option i18n value="/videos/recently-added">Videos Recently Added</option>
+            <option i18n value="/videos/local">Local videos</option>
           </select>
         </div>
         <div *ngIf="formErrors.instanceDefaultClientRoute" class="form-error">
@@ -65,14 +65,17 @@
       </div>
 
       <div class="form-group">
-        <label for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
-        <my-help helpType="custom" customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."></my-help>
+        <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
+        <my-help
+          helpType="custom" i18n-customHtml
+          customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."
+        ></my-help>
 
         <div class="peertube-select-container">
           <select id="instanceDefaultNSFWPolicy" formControlName="instanceDefaultNSFWPolicy">
-            <option value="do_not_list">Do not list</option>
-            <option value="blur">Blur thumbnails</option>
-            <option value="display">Display</option>
+            <option i18n value="do_not_list">Do not list</option>
+            <option i18n value="blur">Blur thumbnails</option>
+            <option i18n value="display">Display</option>
           </select>
         </div>
         <div *ngIf="formErrors.instanceDefaultNSFWPolicy" class="form-error">
@@ -80,43 +83,43 @@
         </div>
       </div>
 
-      <div class="inner-form-title">Signup</div>
+      <div i18n class="inner-form-title">Signup</div>
 
       <div class="form-group">
         <input type="checkbox" id="signupEnabled" formControlName="signupEnabled">
 
         <label for="signupEnabled"></label>
-        <label for="signupEnabled">Signup enabled</label>
+        <label i18n for="signupEnabled">Signup enabled</label>
       </div>
 
       <div *ngIf="isSignupEnabled()" class="form-group">
-        <label for="signupLimit">Signup limit</label>
+        <label i18n for="signupLimit">Signup limit</label>
         <input
-            type="text" id="signupLimit"
-            formControlName="signupLimit" [ngClass]="{ 'input-error': formErrors['signupLimit'] }"
+          type="text" id="signupLimit"
+          formControlName="signupLimit" [ngClass]="{ 'input-error': formErrors['signupLimit'] }"
         >
         <div *ngIf="formErrors.signupLimit" class="form-error">
           {{ formErrors.signupLimit }}
         </div>
       </div>
 
-      <div class="inner-form-title">Administrator</div>
+      <div i18n class="inner-form-title">Administrator</div>
 
       <div class="form-group">
-        <label for="adminEmail">Admin email</label>
+        <label i18n for="adminEmail">Admin email</label>
         <input
-            type="text" id="adminEmail"
-            formControlName="adminEmail" [ngClass]="{ 'input-error': formErrors['adminEmail'] }"
+          type="text" id="adminEmail"
+          formControlName="adminEmail" [ngClass]="{ 'input-error': formErrors['adminEmail'] }"
         >
         <div *ngIf="formErrors.adminEmail" class="form-error">
           {{ formErrors.adminEmail }}
         </div>
       </div>
 
-      <div class="inner-form-title">Users</div>
+      <div i18n class="inner-form-title">Users</div>
 
       <div class="form-group">
-        <label for="userVideoQuota">User default video quota</label>
+        <label i18n for="userVideoQuota">User default video quota</label>
         <div class="peertube-select-container">
           <select id="userVideoQuota" formControlName="userVideoQuota">
             <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
@@ -132,14 +135,17 @@
 
     <tab heading="Services">
 
-      <div class="inner-form-title">Twitter</div>
+      <div i18n class="inner-form-title">Twitter</div>
 
       <div class="form-group">
-        <label for="signupLimit">Your Twitter username</label>
-        <my-help helpType="custom" customHtml="Indicates the Twitter account for the website or platform on which the content was published."></my-help>
+        <label i18n for="signupLimit">Your Twitter username</label>
+        <my-help
+          helpType="custom" i18n-customHtml
+          customHtml="Indicates the Twitter account for the website or platform on which the content was published."
+        ></my-help>
         <input
-            type="text" id="servicesTwitterUsername"
-            formControlName="servicesTwitterUsername" [ngClass]="{ 'input-error': formErrors['servicesTwitterUsername'] }"
+          type="text" id="servicesTwitterUsername"
+          formControlName="servicesTwitterUsername" [ngClass]="{ 'input-error': formErrors['servicesTwitterUsername'] }"
         >
         <div *ngIf="formErrors.servicesTwitterUsername" class="form-error">
           {{ formErrors.servicesTwitterUsername }}
@@ -150,29 +156,32 @@
         <input type="checkbox" id="servicesTwitterWhitelisted" formControlName="servicesTwitterWhitelisted">
 
         <label for="servicesTwitterWhitelisted"></label>
-        <label for="servicesTwitterWhitelisted">Instance whitelisted by Twitter</label>
-        <my-help helpType="custom" customHtml="If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
+        <label i18n for="servicesTwitterWhitelisted">Instance whitelisted by Twitter</label>
+        <my-help
+          helpType="custom" i18n-customHtml
+          customHtml="If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
 If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
-Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> to see if you instance is whitelisted."></my-help>
+Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> to see if you instance is whitelisted."
+        ></my-help>
 
       </div>
     </tab>
 
     <tab heading="Advanced configuration">
 
-      <div class="inner-form-title">Transcoding</div>
+      <div i18n class="inner-form-title">Transcoding</div>
 
       <div class="form-group">
         <input type="checkbox" id="transcodingEnabled" formControlName="transcodingEnabled">
 
         <label for="transcodingEnabled"></label>
-        <label for="transcodingEnabled">Transcoding enabled</label>
+        <label i18n for="transcodingEnabled">Transcoding enabled</label>
       </div>
 
       <ng-template [ngIf]="isTranscodingEnabled()">
 
         <div class="form-group">
-          <label for="transcodingThreads">Transcoding threads</label>
+          <label i18n for="transcodingThreads">Transcoding threads</label>
           <div class="peertube-select-container">
             <select id="transcodingThreads" formControlName="transcodingThreads">
               <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
@@ -191,33 +200,39 @@ Check this checkbox, save the configuration and test with a video URL of your in
               [formControlName]="getResolutionKey(resolution)"
           >
           <label [for]="getResolutionKey(resolution)"></label>
-          <label [for]="getResolutionKey(resolution)">Resolution {{ resolution }} enabled</label>
+          <label i18n [for]="getResolutionKey(resolution)">Resolution {{ resolution }} enabled</label>
         </div>
       </ng-template>
 
-      <div class="inner-form-title">Cache</div>
+      <div i18n class="inner-form-title">Cache</div>
 
       <div class="form-group">
-        <label for="cachePreviewsSize">Preview cache size</label>
-        <my-help helpType="custom" customHtml="Previews are not federated. We fetch them directly from the origin instance and cache them."></my-help>
+        <label i18n for="cachePreviewsSize">Preview cache size</label>
+        <my-help
+          helpType="custom" i18n-customHtml
+          customHtml="Previews are not federated. We fetch them directly from the origin instance and cache them."
+        ></my-help>
 
         <input
-            type="text" id="cachePreviewsSize"
-            formControlName="cachePreviewsSize" [ngClass]="{ 'input-error': formErrors['cachePreviewsSize'] }"
+          type="text" id="cachePreviewsSize"
+          formControlName="cachePreviewsSize" [ngClass]="{ 'input-error': formErrors['cachePreviewsSize'] }"
         >
         <div *ngIf="formErrors.cachePreviewsSize" class="form-error">
           {{ formErrors.cachePreviewsSize }}
         </div>
       </div>
 
-      <div class="inner-form-title">Customizations</div>
+      <div i18n class="inner-form-title">Customizations</div>
 
       <div class="form-group">
-        <label for="customizationJavascript">JavaScript</label>
-        <my-help helpType="custom" customHtml="Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>"></my-help>
+        <label i18n for="customizationJavascript">JavaScript</label>
+        <my-help
+          helpType="custom" i18n-customHtml
+          customHtml="Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>"
+        ></my-help>
         <textarea
-            id="customizationJavascript" formControlName="customizationJavascript"
-            [ngClass]="{ 'input-error': formErrors['customizationJavascript'] }"
+          id="customizationJavascript" formControlName="customizationJavascript"
+          [ngClass]="{ 'input-error': formErrors['customizationJavascript'] }"
         ></textarea>
         <div *ngIf="formErrors.customizationJavascript" class="form-error">
           {{ formErrors.customizationJavascript }}
@@ -228,25 +243,26 @@ Check this checkbox, save the configuration and test with a video URL of your in
         <label for="customizationCSS">CSS</label>
         <my-help
             helpType="custom"
+            i18n-customHtml
             customHtml="
               Write directly CSS code. Example:<br />
               <pre>
-    body {
+    body {{ '{' }}
       background-color: red;
-    }
+    {{ '}' }}
               </pre>
 
               Prepend with <em>#custom-css</em> to override styles. Example:
               <pre>
-    #custom-css .logged-in-email {
+    #custom-css .logged-in-email {{ '{' }}
       color: red;
-    }
+    {{ '}' }}
               </pre>
             "
         ></my-help>
         <textarea
-            id="customizationCSS" formControlName="customizationCSS"
-            [ngClass]="{ 'input-error': formErrors['customizationCSS'] }"
+          id="customizationCSS" formControlName="customizationCSS"
+          [ngClass]="{ 'input-error': formErrors['customizationCSS'] }"
         ></textarea>
         <div *ngIf="formErrors.customizationCSS" class="form-error">
           {{ formErrors.customizationCSS }}
@@ -255,5 +271,5 @@ Check this checkbox, save the configuration and test with a video URL of your in
     </tab>
   </tabset>
 
-  <input (click)="formValidated()" type="submit" value="Update configuration" [disabled]="!form.valid">
+  <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index a1e334a74..3f9205460 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -8,12 +8,15 @@ import { FormReactive, USER_VIDEO_QUOTA } from '@app/shared'
 import {
   ADMIN_EMAIL,
   CACHE_PREVIEWS_SIZE,
-  INSTANCE_NAME, INSTANCE_SHORT_DESCRIPTION, SERVICES_TWITTER_USERNAME,
+  INSTANCE_NAME,
+  INSTANCE_SHORT_DESCRIPTION,
+  SERVICES_TWITTER_USERNAME,
   SIGNUP_LIMIT,
   TRANSCODING_THREADS
 } from '@app/shared/forms/form-validators/custom-config'
 import { NotificationsService } from 'angular2-notifications'
 import { CustomConfig } from '../../../../../../shared/models/server/custom-config.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-edit-custom-config',
@@ -77,7 +80,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     private notificationsService: NotificationsService,
     private configService: ConfigService,
     private serverService: ServerService,
-    private confirmService: ConfirmService
+    private confirmService: ConfirmService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -133,7 +137,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
           this.forceCheck()
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 
@@ -156,11 +160,15 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     if (customizations.length !== 0) {
       const customizationsText = customizations.join('/')
 
-      const message = `You set custom ${customizationsText}. ` +
-        'This could lead to security issues or bugs if you do not understand it. ' +
-        'Are you sure you want to update the configuration?'
-      const label = `Please type "I understand the ${customizationsText} I set" to confirm.`
-      const expectedInputValue = `I understand the ${customizationsText} I set`
+      // FIXME: i18n service does not support string concatenation
+      const message = this.i18n('You set custom {{ customizationsText }}. ', { customizationsText }) +
+        this.i18n('This could lead to security issues or bugs if you do not understand it. ') +
+        this.i18n('Are you sure you want to update the configuration?')
+      const label = this.i18n(
+        'Please type "I understand the {{ customizationsText }} I set" to confirm.',
+        { customizationsText }
+      )
+      const expectedInputValue = this.i18n('I understand the {{ customizationsText }} I set', { customizationsText})
 
       const confirmRes = await this.confirmService.confirmWithInput(message, label, expectedInputValue)
       if (confirmRes === false) return
@@ -223,10 +231,10 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
           this.updateForm()
 
-          this.notificationsService.success('Success', 'Configuration updated.')
+          this.notificationsService.success(this.i18n('Success'), this.i18n('Configuration updated.'))
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 85d2a2cf6..1a6ed616a 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -4,12 +4,12 @@
 >
   <ng-template pTemplate="header">
     <tr>
-      <th style="width: 60px">ID</th>
-      <th>Score</th>
-      <th>Name</th>
-      <th>Host</th>
-      <th>State</th>
-      <th pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n style="width: 60px">ID</th>
+      <th i18n>Score</th>
+      <th i18n>Name</th>
+      <th i18n>Host</th>
+      <th i18n>State</th>
+      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index 69b3e5e58..96fb67588 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -5,6 +5,7 @@ import { SortMeta } from 'primeng/primeng'
 import { AccountFollow } from '../../../../../../shared/models/actors/follow.model'
 import { RestPagination, RestTable } from '../../../shared'
 import { FollowService } from '../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-followers-list',
@@ -20,7 +21,8 @@ export class FollowersListComponent extends RestTable implements OnInit {
 
   constructor (
     private notificationsService: NotificationsService,
-    private followService: FollowService
+    private followService: FollowService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -37,7 +39,7 @@ export class FollowersListComponent extends RestTable implements OnInit {
                           this.totalRecords = resultList.total
                         },
 
-                        err => this.notificationsService.error('Error', err.message)
+                        err => this.notificationsService.error(this.i18n('Error'), err.message)
                       )
   }
 }
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.html b/client/src/app/+admin/follows/following-add/following-add.component.html
index 25bab9d0d..72635048c 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.html
+++ b/client/src/app/+admin/follows/following-add/following-add.component.html
@@ -2,7 +2,7 @@
 
 <form (ngSubmit)="addFollowing()">
   <div class="form-group">
-    <label for="hosts">1 host (without "http://") per line</label>
+    <label i18n for="hosts">1 host (without "http://") per line</label>
 
     <textarea
       type="text" class="form-control" placeholder="example.com" id="hosts" name="hosts"
@@ -14,9 +14,9 @@
     </div>
   </div>
 
-  <div *ngIf="httpEnabled() === false"  class="alert alert-warning">
+  <div i18n *ngIf="httpEnabled() === false"  class="alert alert-warning">
     It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
   </div>
 
-  <input type="submit" value="Add following" [disabled]="hostsError || !hostsString" class="btn btn-default">
+  <input type="submit" i18n-value value="Add following" [disabled]="hostsError || !hostsString" class="btn btn-default">
 </form>
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts
index c296c8852..f197c1fe9 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.ts
+++ b/client/src/app/+admin/follows/following-add/following-add.component.ts
@@ -4,6 +4,7 @@ import { NotificationsService } from 'angular2-notifications'
 import { ConfirmService } from '../../../core'
 import { validateHost } from '../../../shared'
 import { FollowService } from '../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-following-add',
@@ -19,7 +20,8 @@ export class FollowingAddComponent {
     private router: Router,
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
-    private followService: FollowService
+    private followService: FollowService,
+    private i18n: I18n
   ) {}
 
   httpEnabled () {
@@ -34,7 +36,7 @@ export class FollowingAddComponent {
 
     for (const host of hosts) {
       if (validateHost(host) === false) {
-        newHostsErrors.push(`${host} is not valid`)
+        newHostsErrors.push(this.i18n('{{ host }} is not valid', { host }))
       }
     }
 
@@ -48,26 +50,26 @@ export class FollowingAddComponent {
 
     const hosts = this.getNotEmptyHosts()
     if (hosts.length === 0) {
-      this.error = 'You need to specify hosts to follow.'
+      this.error = this.i18n('You need to specify hosts to follow.')
     }
 
     if (!this.isHostsUnique(hosts)) {
-      this.error = 'Hosts need to be unique.'
+      this.error = this.i18n('Hosts need to be unique.')
       return
     }
 
-    const confirmMessage = 'If you confirm, you will send a follow request to:<br /> - ' + hosts.join('<br /> - ')
-    const res = await this.confirmService.confirm(confirmMessage, 'Follow new server(s)')
+    const confirmMessage = this.i18n('If you confirm, you will send a follow request to:<br /> - ') + hosts.join('<br /> - ')
+    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Follow new server(s)'))
     if (res === false) return
 
     this.followService.follow(hosts).subscribe(
       () => {
-        this.notificationsService.success('Success', 'Follow request(s) sent!')
+        this.notificationsService.success(this.i18n('Success'), this.i18n('Follow request(s) sent!'))
 
         setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500)
       },
 
-      err => this.notificationsService.error('Error', err.message)
+      err => this.notificationsService.error(this.i18n('Error'), err.message)
     )
   }
 
@@ -76,10 +78,8 @@ export class FollowingAddComponent {
   }
 
   private getNotEmptyHosts () {
-    const hosts = this.hostsString
+    return this.hostsString
       .split('\n')
       .filter(host => host && host.length !== 0) // Eject empty hosts
-
-    return hosts
   }
 }
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 24981d3e9..e4a45e88c 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -4,10 +4,10 @@
 >
   <ng-template pTemplate="header">
     <tr>
-      <th style="width: 60px">ID</th>
-      <th>Host</th>
-      <th>State</th>
-      <th pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n style="width: 60px">ID</th>
+      <th i18n>Host</th>
+      <th i18n>State</th>
+      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th></th>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index 873a5d965..2fb818c90 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -5,6 +5,7 @@ import { AccountFollow } from '../../../../../../shared/models/actors/follow.mod
 import { ConfirmService } from '../../../core/confirm/confirm.service'
 import { RestPagination, RestTable } from '../../../shared'
 import { FollowService } from '../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-followers-list',
@@ -20,7 +21,8 @@ export class FollowingListComponent extends RestTable implements OnInit {
   constructor (
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
-    private followService: FollowService
+    private followService: FollowService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -30,16 +32,22 @@ export class FollowingListComponent extends RestTable implements OnInit {
   }
 
   async removeFollowing (follow: AccountFollow) {
-    const res = await this.confirmService.confirm(`Do you really want to unfollow ${follow.following.host}?`, 'Unfollow')
+    const res = await this.confirmService.confirm(
+      this.i18n('Do you really want to unfollow {{ host }}?', { host: follow.following.host }),
+      this.i18n('Unfollow')
+    )
     if (res === false) return
 
     this.followService.unfollow(follow).subscribe(
       () => {
-        this.notificationsService.success('Success', `You are not following ${follow.following.host} anymore.`)
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('You are not following {{ host }} anymore.', { host: follow.following.host })
+        )
         this.loadData()
       },
 
-      err => this.notificationsService.error('Error', err.message)
+      err => this.notificationsService.error(this.i18n('Error'), err.message)
     )
   }
 
@@ -51,7 +59,7 @@ export class FollowingListComponent extends RestTable implements OnInit {
                           this.totalRecords = resultList.total
                         },
 
-                        err => this.notificationsService.error('Error', err.message)
+                        err => this.notificationsService.error(this.i18n('Error'), err.message)
                       )
   }
 }
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index 71e82059c..a8258bf70 100644
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div class="form-sub-title">Manage follows</div>
+  <div i18n class="form-sub-title">Manage follows</div>
 
   <tabset #followsMenuTabs>
     <tab *ngFor="let link of links">
diff --git a/client/src/app/+admin/jobs/index.ts b/client/src/app/+admin/jobs/index.ts
index 7b5271956..c0e0cc95d 100644
--- a/client/src/app/+admin/jobs/index.ts
+++ b/client/src/app/+admin/jobs/index.ts
@@ -1 +1,4 @@
-export * from './'
+export * from './shared'
+export * from './jobs-list'
+export * from './job.routes'
+export * from './job.component'
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
index 0cc4dc3e0..20c35cb5b 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div class="form-sub-title">Jobs list</div>
+  <div i18n class="form-sub-title">Jobs list</div>
 
   <div class="peertube-select-container">
     <select [(ngModel)]="jobState" (ngModelChange)="onJobStateChanged()">
@@ -15,11 +15,11 @@
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 27px"></th>
-      <th style="width: 60px">ID</th>
-      <th style="width: 210px">Type</th>
-      <th style="width: 130px">State</th>
-      <th style="width: 250px" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 250px">Updated</th>
+      <th i18n style="width: 60px">ID</th>
+      <th i18n style="width: 210px">Type</th>
+      <th i18n style="width: 130px">State</th>
+      <th i18n style="width: 250px" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n style="width: 250px">Updated</th>
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
index ad2f05c6b..29dd9f31c 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
@@ -7,6 +7,7 @@ import { JobState } from '../../../../../../shared/models'
 import { RestPagination, RestTable } from '../../../shared'
 import { RestExtractor } from '../../../shared/rest/rest-extractor.service'
 import { JobService } from '../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-jobs-list',
@@ -27,7 +28,8 @@ export class JobsListComponent extends RestTable implements OnInit {
   constructor (
     private notificationsService: NotificationsService,
     private restExtractor: RestExtractor,
-    private jobsService: JobService
+    private jobsService: JobService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -51,7 +53,7 @@ export class JobsListComponent extends RestTable implements OnInit {
           this.totalRecords = resultList.total
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 
diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts
index 578cd98c3..d8b00b862 100644
--- a/client/src/app/+admin/users/shared/user.service.ts
+++ b/client/src/app/+admin/users/shared/user.service.ts
@@ -7,6 +7,7 @@ import { Observable } from 'rxjs'
 import { ResultList, UserCreate, UserUpdate } from '../../../../../../shared'
 import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestPagination, RestService, User } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Injectable()
 export class UserService {
@@ -16,9 +17,9 @@ export class UserService {
   constructor (
     private authHttp: HttpClient,
     private restService: RestService,
-    private restExtractor: RestExtractor
-  ) {
-  }
+    private restExtractor: RestExtractor,
+    private i18n: I18n
+  ) { }
 
   addUser (userCreate: UserCreate) {
     return this.authHttp.post(UserService.BASE_USERS_URL, userCreate)
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index 2a9882cde..b91ffa115 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -1,20 +1,13 @@
 import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
-
 import { NotificationsService } from 'angular2-notifications'
-
 import { UserService } from '../shared'
-import {
-  USER_USERNAME,
-  USER_EMAIL,
-  USER_PASSWORD,
-  USER_VIDEO_QUOTA,
-  USER_ROLE
-} from '../../../shared'
+import { USER_EMAIL, USER_PASSWORD, USER_ROLE, USER_USERNAME, USER_VIDEO_QUOTA } from '../../../shared'
 import { ServerService } from '../../../core'
 import { UserCreate, UserRole } from '../../../../../../shared'
 import { UserEdit } from './user-edit'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-user-create',
@@ -45,7 +38,8 @@ export class UserCreateComponent extends UserEdit implements OnInit {
     private formBuilder: FormBuilder,
     private router: Router,
     private notificationsService: NotificationsService,
-    private userService: UserService
+    private userService: UserService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -76,7 +70,10 @@ export class UserCreateComponent extends UserEdit implements OnInit {
 
     this.userService.addUser(userCreate).subscribe(
       () => {
-        this.notificationsService.success('Success', `User ${userCreate.username} created.`)
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('User {{ username }} created.', { username: userCreate.username })
+        )
         this.router.navigate([ '/admin/users/list' ])
       },
 
@@ -89,6 +86,6 @@ export class UserCreateComponent extends UserEdit implements OnInit {
   }
 
   getFormButtonTitle () {
-    return 'Create user'
+    return this.i18n('Create user')
   }
 }
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index a8c0ddadb..4626a40c9 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -1,13 +1,13 @@
-<div class="form-sub-title" *ngIf="isCreation() === true">Create user</div>
-<div class="form-sub-title" *ngIf="isCreation() === false">Edit user {{ username }}</div>
+<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create user</div>
+<div i18n class="form-sub-title" *ngIf="isCreation() === false">Edit user {{ username }}</div>
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
   <div class="form-group" *ngIf="isCreation()">
-    <label for="username">Username</label>
+    <label i18n for="username">Username</label>
     <input
-      type="text" id="username" placeholder="john"
+      type="text" id="username" i18n-placeholder placeholder="john"
       formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
     >
     <div *ngIf="formErrors.username" class="form-error">
@@ -16,9 +16,9 @@
   </div>
 
   <div class="form-group">
-    <label for="email">Email</label>
+    <label i18n for="email">Email</label>
     <input
-      type="text" id="email" placeholder="mail@example.com"
+      type="text" id="email" i18n-placeholder placeholder="mail@example.com"
       formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
     >
     <div *ngIf="formErrors.email" class="form-error">
@@ -27,7 +27,7 @@
   </div>
 
   <div class="form-group" *ngIf="isCreation()">
-    <label for="password">Password</label>
+    <label i18n for="password">Password</label>
     <input
       type="password" id="password"
       formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
@@ -38,7 +38,7 @@
   </div>
 
   <div class="form-group">
-    <label for="role">Role</label>
+    <label i18n for="role">Role</label>
     <div class="peertube-select-container">
       <select id="role" formControlName="role">
         <option *ngFor="let role of roles" [value]="role.value">
@@ -53,7 +53,7 @@
   </div>
 
   <div class="form-group">
-    <label for="videoQuota">Video quota</label>
+    <label i18n for="videoQuota">Video quota</label>
     <div class="peertube-select-container">
       <select id="videoQuota" formControlName="videoQuota">
         <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
@@ -62,7 +62,7 @@
       </select>
     </div>
 
-    <div class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
+    <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
       Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br />
       At most, this user could use ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
     </div>
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
index 3cde07c65..dca555706 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -8,6 +8,7 @@ import { User, USER_EMAIL, USER_ROLE, USER_VIDEO_QUOTA } from '../../../shared'
 import { ServerService } from '../../../core'
 import { UserEdit } from './user-edit'
 import { UserUpdate } from '../../../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-user-update',
@@ -39,7 +40,8 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     private router: Router,
     private notificationsService: NotificationsService,
     private formBuilder: FormBuilder,
-    private userService: UserService
+    private userService: UserService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -81,7 +83,10 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
 
     this.userService.updateUser(this.userId, userUpdate).subscribe(
       () => {
-        this.notificationsService.success('Success', `User ${this.username} updated.`)
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('User {{ username }} updated.', { username: this.username })
+        )
         this.router.navigate([ '/admin/users/list' ])
       },
 
@@ -94,7 +99,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
   }
 
   getFormButtonTitle () {
-    return 'Update user'
+    return this.i18n('Update user')
   }
 
   private onUserFetched (userJson: User) {
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 09a4ac1e7..166fafef0 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -1,9 +1,9 @@
 <div class="admin-sub-header">
-  <div class="form-sub-title">Users list</div>
+  <div i18n class="form-sub-title">Users list</div>
 
   <a class="add-button" routerLink="/admin/users/create">
     <span class="icon icon-add"></span>
-    Create user
+    <ng-container i18n>Create user</ng-container>
   </a>
 </div>
 
@@ -13,11 +13,11 @@
 >
   <ng-template pTemplate="header">
     <tr>
-      <th pSortableColumn="username">Username <p-sortIcon field="username"></p-sortIcon></th>
-      <th>Email</th>
-      <th>Video quota</th>
-      <th>Role</th>
-      <th pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n pSortableColumn="username">Username <p-sortIcon field="username"></p-sortIcon></th>
+      <th i18n>Email</th>
+      <th i18n>Video quota</th>
+      <th i18n>Role</th>
+      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th></th>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 2cc4d4349..b644fcf71 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -1,11 +1,10 @@
 import { Component, OnInit } from '@angular/core'
-
 import { NotificationsService } from 'angular2-notifications'
 import { SortMeta } from 'primeng/components/common/sortmeta'
-
 import { ConfirmService } from '../../../core'
 import { RestPagination, RestTable, User } from '../../../shared'
 import { UserService } from '../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-user-list',
@@ -22,7 +21,8 @@ export class UserListComponent extends RestTable implements OnInit {
   constructor (
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
-    private userService: UserService
+    private userService: UserService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -33,20 +33,23 @@ export class UserListComponent extends RestTable implements OnInit {
 
   async removeUser (user: User) {
     if (user.username === 'root') {
-      this.notificationsService.error('Error', 'You cannot delete root.')
+      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.'))
       return
     }
 
-    const res = await this.confirmService.confirm('Do you really want to delete this user?', 'Delete')
+    const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this user?'), this.i18n('Delete'))
     if (res === false) return
 
     this.userService.removeUser(user).subscribe(
       () => {
-        this.notificationsService.success('Success', `User ${user.username} deleted.`)
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('User {{ username }} deleted.', { username: user.username })
+        )
         this.loadData()
       },
 
-      err => this.notificationsService.error('Error', err.message)
+      err => this.notificationsService.error(this.i18n('Error'), err.message)
     )
   }
 
@@ -62,7 +65,7 @@ export class UserListComponent extends RestTable implements OnInit {
                         this.totalRecords = resultList.total
                       },
 
-                      err => this.notificationsService.error('Error', err.message)
+                      err => this.notificationsService.error(this.i18n('Error'), err.message)
                     )
   }
 }
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
index 5f70db991..8111e5f73 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div class="form-sub-title">Video abuses list</div>
+  <div i18n class="form-sub-title">Video abuses list</div>
 </div>
 
 <p-table
@@ -8,10 +8,10 @@
 >
   <ng-template pTemplate="header">
     <tr>
-      <th>Reason</th>
-      <th>Reporter</th>
-      <th pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th>Video</th>
+      <th i18n>Reason</th>
+      <th i18n>Reporter</th>
+      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n>Video</th>
     </tr>
   </ng-template>
 
@@ -19,13 +19,13 @@
     <tr>
       <td>{{ videoAbuse.reason }}</td>
       <td>
-        <a [href]="videoAbuse.reporterAccount.url" title="Go to the account" target="_blank" rel="noopener noreferrer">
+        <a [href]="videoAbuse.reporterAccount.url" i18n-title title="Go to the account" target="_blank" rel="noopener noreferrer">
           {{ createByString(videoAbuse.reporterAccount) }}
         </a>
       </td>
       <td>{{ videoAbuse.createdAt }}</td>
       <td>
-        <a [href]="videoAbuse.video.url" title="Go to the video" target="_blank" rel="noopener noreferrer">
+        <a [href]="videoAbuse.video.url" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer">
           {{ videoAbuse.video.name }}
         </a>
       </td>
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
index b650194b7..6ddebff7e 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
@@ -5,6 +5,7 @@ import { SortMeta } from 'primeng/components/common/sortmeta'
 import { VideoAbuse } from '../../../../../../shared'
 
 import { RestPagination, RestTable, VideoAbuseService } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-abuse-list',
@@ -20,7 +21,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
 
   constructor (
     private notificationsService: NotificationsService,
-    private videoAbuseService: VideoAbuseService
+    private videoAbuseService: VideoAbuseService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -41,7 +43,7 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
                    this.totalRecords = resultList.total
                  },
 
-                 err => this.notificationsService.error('Error', err.message)
+                 err => this.notificationsService.error(this.i18n('Error'), err.message)
                )
   }
 }
diff --git a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
index 0a0fcb762..04f0e3b5c 100644
--- a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div class="form-sub-title">Blacklisted videos</div>
+  <div i18n class="form-sub-title">Blacklisted videos</div>
 </div>
 
 <p-table
@@ -8,12 +8,12 @@
 >
   <ng-template pTemplate="header">
     <tr>
-      <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
-      <th>Description</th>
-      <th pSortableColumn="views">Views <p-sortIcon field="views"></p-sortIcon></th>
-      <th>NSFW</th>
-      <th>UUID</th>
-      <th pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
+      <th i18n>Description</th>
+      <th i18n pSortableColumn="views">Views <p-sortIcon field="views"></p-sortIcon></th>
+      <th i18n>NSFW</th>
+      <th i18n>UUID</th>
+      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th></th>
     </tr>
   </ng-template>
@@ -27,7 +27,7 @@
       <td>{{ videoBlacklist.uuid }}</td>
       <td>{{ videoBlacklist.createdAt }}</td>
       <td class="action-cell">
-        <my-delete-button label="Unblacklist" (click)="removeVideoFromBlacklist(videoBlacklist)"></my-delete-button>
+        <my-delete-button i18n-label label="Unblacklist" (click)="removeVideoFromBlacklist(videoBlacklist)"></my-delete-button>
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts
index 7210e677c..1864e5f65 100644
--- a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts
@@ -1,11 +1,10 @@
 import { Component, OnInit } from '@angular/core'
 import { SortMeta } from 'primeng/components/common/sortmeta'
-
 import { NotificationsService } from 'angular2-notifications'
-
 import { ConfirmService } from '../../../core'
-import { VideoBlacklistService, RestTable, RestPagination } from '../../../shared'
+import { RestPagination, RestTable, VideoBlacklistService } from '../../../shared'
 import { BlacklistedVideo } from '../../../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-blacklist-list',
@@ -22,7 +21,8 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   constructor (
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
-    private videoBlacklistService: VideoBlacklistService
+    private videoBlacklistService: VideoBlacklistService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -32,18 +32,23 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   }
 
   async removeVideoFromBlacklist (entry: BlacklistedVideo) {
-    const confirmMessage = 'Do you really want to remove this video from the blacklist ? It will be available again in the videos list.'
+    const confirmMessage = this.i18n(
+      'Do you really want to remove this video from the blacklist ? It will be available again in the videos list.'
+    )
 
-    const res = await this.confirmService.confirm(confirmMessage, 'Unblacklist')
+    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
     if (res === false) return
 
     this.videoBlacklistService.removeVideoFromBlacklist(entry.videoId).subscribe(
       () => {
-        this.notificationsService.success('Success', `Video ${entry.name} removed from the blacklist.`)
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('Video {{ name }} removed from the blacklist.', { name: entry.name })
+        )
         this.loadData()
       },
 
-      err => this.notificationsService.error('Error', err.message)
+      err => this.notificationsService.error(this.i18n('Error'), err.message)
     )
   }
 
@@ -55,7 +60,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
           this.totalRecords = resultList.total
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 }