- Policy on videos containing sensitive content - + Policy on videos containing sensitive content +

@@ -80,43 +83,43 @@

- Signup enabled + Signup enabled

- Signup limit + Signup limit

- Admin email + Admin email

- User default video quota + User default video quota

{{ formErrors.servicesTwitterUsername }} @@ -150,29 +156,32 @@ - Instance whitelisted by Twitter - Instance whitelisted by Twitter + +Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on https://cards-dev.twitter.com/validator to see if you instance is whitelisted." + >

-

Transcoding

+

Transcoding

- Transcoding enabled + Transcoding enabled

- Transcoding threads + Transcoding threads

-

Customizations

+

Customizations

- JavaScript - + JavaScript +

{{ formErrors.customizationJavascript }} @@ -228,25 +243,26 @@ Check this checkbox, save the configuration and test with a video URL of your in CSS

{{ formErrors.customizationCSS }} @@ -255,5 +271,5 @@ Check this checkbox, save the configuration and test with a video URL of your in - + 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 @@ > - ID - Score - Name - Host - State - Created + ID + Score + Name + Host + State + Created 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 @@

- 1 host (without "http://") per line + 1 host (without "http://") per line

</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)
       )
   }
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index b0e3cada4..767ef0336 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -2,9 +2,9 @@
 
 <form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
 
-  <label for="new-password">Change password</label>
+  <label i18n for="new-password">Change password</label>
   <input
-    type="password" id="new-password" placeholder="New password"
+    type="password" id="new-password" i18n-placeholder placeholder="New password"
     formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
   >
   <div *ngIf="formErrors['new-password']" class="form-error">
@@ -12,9 +12,9 @@
   </div>
 
   <input
-    type="password" id="new-confirmed-password" placeholder="Confirm new password"
+    type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password"
     formControlName="new-confirmed-password"
   >
 
-  <input type="submit" value="Change password" [disabled]="!form.valid">
+  <input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
index 80af668f9..1a88aa82e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { NotificationsService } from 'angular2-notifications'
 import { FormReactive, USER_PASSWORD, UserService } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-change-password',
@@ -24,7 +25,8 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
   constructor (
     private formBuilder: FormBuilder,
     private notificationsService: NotificationsService,
-    private userService: UserService
+    private userService: UserService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -49,12 +51,12 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
     this.error = null
 
     if (newPassword !== newConfirmedPassword) {
-      this.error = 'The new password and the confirmed password do not correspond.'
+      this.error = this.i18n('The new password and the confirmed password do not correspond.')
       return
     }
 
     this.userService.changePassword(newPassword).subscribe(
-      () => this.notificationsService.success('Success', 'Password updated.'),
+      () => this.notificationsService.success(this.i18n('Success'), this.i18n('Password updated.')),
 
       err => this.error = err.message
     )
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index 306f3a12c..bbdce5b02 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -2,7 +2,7 @@
 
 <form role="form" (ngSubmit)="updateMyProfile()" [formGroup]="form">
 
-  <label for="display-name">Display name</label>
+  <label i18n for="display-name">Display name</label>
   <input
     type="text" id="display-name"
     formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
@@ -11,7 +11,7 @@
     {{ formErrors['display-name'] }}
   </div>
 
-  <label for="description">Description</label>
+  <label i18n for="description">Description</label>
   <textarea
     id="description" formControlName="description"
     [ngClass]="{ 'input-error': formErrors['description'] }"
@@ -20,5 +20,5 @@
     {{ formErrors.description }}
   </div>
 
-  <input type="submit" value="Update my profile" [disabled]="!form.valid">
+  <input type="submit" i18n-value value="Update my profile" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
index 468be022c..35843ecd9 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup } from '@angular/forms'
 import { NotificationsService } from 'angular2-notifications'
 import { FormReactive, USER_DESCRIPTION, USER_DISPLAY_NAME, UserService } from '../../../shared'
 import { User } from '@app/shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-profile',
@@ -27,7 +28,8 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
   constructor (
     private formBuilder: FormBuilder,
     private notificationsService: NotificationsService,
-    private userService: UserService
+    private userService: UserService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -56,7 +58,7 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
         this.user.account.displayName = displayName
         this.user.account.description = description
 
-        this.notificationsService.success('Success', 'Profile updated.')
+        this.notificationsService.success(this.i18n('Success'), this.i18n('Profile updated.'))
       },
 
       err => this.error = err.message
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 0fcc7782e..056c2a7d7 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -6,27 +6,27 @@
       <div class="user-info-display-name">{{ user.account.displayName }}</div>
       <div class="user-info-username">{{ user.username }}</div>
     </div>
-    <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
+    <div i18n class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
   </div>
 </div>
 
 <div class="button-file">
-  <span>Change your avatar</span>
+  <span i18n>Change your avatar</span>
   <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="changeAvatar()" />
 </div>
-<div class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div>
+<div i18n class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div>
 
 <div class="user-quota">
-  <span class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
+  <span i18n class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
 </div>
 
 <ng-template [ngIf]="user && user.account">
-  <div class="account-title">Profile</div>
+  <div i18n class="account-title">Profile</div>
   <my-account-profile [user]="user"></my-account-profile>
 </ng-template>
 
-<div class="account-title">Password</div>
+<div i18n class="account-title">Password</div>
 <my-account-change-password></my-account-change-password>
 
-<div class="account-title">Video settings</div>
+<div i18n class="account-title">Video settings</div>
 <my-account-video-settings [user]="user"></my-account-video-settings>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index 06d1138e7..44eddaa7c 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -5,6 +5,7 @@ import { AuthService } from '../../core'
 import { ServerService } from '../../core/server'
 import { User } from '../../shared'
 import { UserService } from '../../shared/users'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-settings',
@@ -22,7 +23,8 @@ export class MyAccountSettingsComponent implements OnInit {
     private userService: UserService,
     private authService: AuthService,
     private serverService: ServerService,
-    private notificationsService: NotificationsService
+    private notificationsService: NotificationsService,
+    private i18n: I18n
   ) {}
 
   ngOnInit () {
@@ -33,7 +35,7 @@ export class MyAccountSettingsComponent implements OnInit {
         if (this.user.videoQuota !== -1) {
           this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
         } else {
-          this.userVideoQuota = 'Unlimited'
+          this.userVideoQuota = this.i18n('Unlimited')
         }
       }
     )
@@ -51,12 +53,12 @@ export class MyAccountSettingsComponent implements OnInit {
     this.userService.changeAvatar(formData)
       .subscribe(
         data => {
-          this.notificationsService.success('Success', 'Avatar changed.')
+          this.notificationsService.success(this.i18n('Success'), this.i18n('Avatar changed.'))
 
           this.user.account.avatar = data.avatar
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 0e8598e9e..98587eb18 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
@@ -1,13 +1,16 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
   <div class="form-group">
-    <label for="nsfwPolicy">Default 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="nsfwPolicy">Default 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="nsfwPolicy" formControlName="nsfwPolicy">
-        <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>
@@ -18,8 +21,8 @@
       formControlName="autoPlayVideo"
     >
     <label for="autoPlayVideo"></label>
-    <label for="autoPlayVideo">Automatically plays video</label>
+    <label i18n for="autoPlayVideo">Automatically plays video</label>
   </div>
 
-  <input type="submit" value="Save" [disabled]="!form.valid">
+  <input type="submit" i18n-value value="Save" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
index acc70c14d..4588f73db 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
@@ -4,6 +4,7 @@ import { NotificationsService } from 'angular2-notifications'
 import { UserUpdateMe } from '../../../../../../shared'
 import { AuthService } from '../../../core'
 import { FormReactive, User, UserService } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-video-settings',
@@ -21,7 +22,8 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
     private authService: AuthService,
     private formBuilder: FormBuilder,
     private notificationsService: NotificationsService,
-    private userService: UserService
+    private userService: UserService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -49,12 +51,12 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
 
     this.userService.updateMyProfile(details).subscribe(
       () => {
-        this.notificationsService.success('Success', 'Information updated.')
+        this.notificationsService.success(this.i18n('Success'), this.i18n('Information updated.'))
 
         this.authService.refreshUserInformation()
       },
 
-      err => this.notificationsService.error('Error', err.message)
+      err => this.notificationsService.error(this.i18n('Error'), err.message)
     )
   }
 }
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts
index c82bb39c8..9b5a12d18 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts
@@ -11,6 +11,7 @@ import {
 } from '@app/shared/forms/form-validators/video-channel'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { AuthService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-video-channel-create',
@@ -37,7 +38,8 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
     private notificationsService: NotificationsService,
     private router: Router,
     private formBuilder: FormBuilder,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -69,7 +71,10 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
     this.videoChannelService.createVideoChannel(videoChannelCreate).subscribe(
       () => {
         this.authService.refreshUserInformation()
-        this.notificationsService.success('Success', `Video channel ${videoChannelCreate.displayName} created.`)
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('Video channel {{ videoChannelName }} created.', { videoChannelName: videoChannelCreate.displayName })
+        )
         this.router.navigate([ '/my-account', 'video-channels' ])
       },
 
@@ -82,6 +87,6 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
   }
 
   getFormButtonTitle () {
-    return 'Create'
+    return this.i18n('Create')
   }
 }
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index 10d408d55..1c08cfdca 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -1,11 +1,11 @@
-<div class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div>
-<div class="form-sub-title" *ngIf="isCreation() === false">Update {{ videoChannel?.displayName }}</div>
+<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div>
+<div i18n class="form-sub-title" *ngIf="isCreation() === false">Update {{ videoChannel?.displayName }}</div>
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
   <div class="form-group">
-    <label for="display-name">Display name</label>
+    <label i18n for="display-name">Display name</label>
     <input
       type="text" id="display-name"
       formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
@@ -16,7 +16,7 @@
   </div>
 
   <div class="form-group">
-    <label for="description">Description</label>
+    <label i18n for="description">Description</label>
     <textarea
       id="description" formControlName="description"
       [ngClass]="{ 'input-error': formErrors['description'] }"
@@ -29,7 +29,7 @@
   <div class="form-group">
     <label for="support">Support</label>
     <my-help
-      helpType="markdownEnhanced" preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
+      helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
 When you will upload a video in this channel, the video support field will be automatically filled by this text."
     ></my-help>
     <my-markdown-textarea
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts
index b4c8df3cd..78c578764 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts
@@ -13,6 +13,7 @@ import { VideoChannelService } from '@app/shared/video-channel/video-channel.ser
 import { Subscription } from 'rxjs'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { AuthService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-video-channel-update',
@@ -43,7 +44,8 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
     private router: Router,
     private route: ActivatedRoute,
     private formBuilder: FormBuilder,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -97,7 +99,10 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
     this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.uuid, videoChannelUpdate).subscribe(
       () => {
         this.authService.refreshUserInformation()
-        this.notificationsService.success('Success', `Video channel ${videoChannelUpdate.displayName} updated.`)
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('Video channel {{ videoChannelName }} updated.', { videoChannelName: videoChannelUpdate.displayName })
+        )
         this.router.navigate([ '/my-account', 'video-channels' ])
       },
 
@@ -110,6 +115,6 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
   }
 
   getFormButtonTitle () {
-    return 'Update'
+    return this.i18n('Update')
   }
 }
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
index 90c401bc5..d27c3b4ec 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
@@ -1,7 +1,7 @@
 <div class="video-channels-header">
   <a class="create-button" routerLink="create">
     <span class="icon icon-add"></span>
-    Create another video channel
+    <ng-container i18n>Create another video channel</ng-container>
   </a>
 </div>
 
@@ -12,13 +12,13 @@
     </a>
 
     <div class="video-channel-info">
-      <a [routerLink]="[ '/video-channels', videoChannel.uuid ]" class="video-channel-names" title="Go to the channel">
+      <a [routerLink]="[ '/video-channels', videoChannel.uuid ]" class="video-channel-names" i18n-title title="Go to the channel">
         <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
         
         
       </a>
 
-      <div class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+      <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
     </div>
 
     <div class="video-channel-buttons">
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
index 20c8798d1..cff1041f6 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
@@ -6,6 +6,7 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { User } from '@app/shared'
 import { flatMap } from 'rxjs/operators'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -21,7 +22,8 @@ export class MyAccountVideoChannelsComponent implements OnInit {
     private authService: AuthService,
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private i18n: I18n
   ) {}
 
   ngOnInit () {
@@ -32,10 +34,13 @@ export class MyAccountVideoChannelsComponent implements OnInit {
 
   async deleteVideoChannel (videoChannel: VideoChannel) {
     const res = await this.confirmService.confirmWithInput(
-      `Do you really want to delete ${videoChannel.displayName}? It will delete all videos uploaded in this channel too.`,
-      'Please type the name of the video channel to confirm',
+      this.i18n(
+        'Do you really want to delete {{ videoChannelName }}? It will delete all videos uploaded in this channel too.',
+        { videoChannelName: videoChannel.displayName }
+      ),
+      this.i18n('Please type the name of the video channel to confirm'),
       videoChannel.displayName,
-      'Delete'
+      this.i18n('Delete')
     )
     if (res === false) return
 
@@ -43,10 +48,13 @@ export class MyAccountVideoChannelsComponent implements OnInit {
       .subscribe(
         status => {
           this.loadVideoChannels()
-          this.notificationsService.success('Success', `Video channel ${videoChannel.name} deleted.`)
+          this.notificationsService.success(
+            this.i18n('Success'),
+            this.i18n('Video channel {{ videoChannelName } deleted.', { videoChannelName: videoChannel.displayName })
+          )
         },
 
-        error => this.notificationsService.error('Error', error.message)
+        error => this.notificationsService.error(this.i18n('Error'), error.message)
       )
   }
 
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index a31cb0c3d..35a99d0b3 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="pagination.totalItems === 0">No results.</div>
+<div i18n *ngIf="pagination.totalItems === 0">No results.</div>
 
 <div
   myInfiniteScroller
@@ -17,18 +17,18 @@
 
       <div class="video-info">
         <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-        <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
+        <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
         <div class="video-info-private">{{ video.privacy.label }}</div>
       </div>
 
       
       <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0 && j === 0">
         <div class="action-selection-mode-child">
-          <span class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+          <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
             Cancel
           </span>
 
-          <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
+          <span i18n class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
             <span class="icon icon-delete-white"></span>
             Delete
           </span>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 6ab6c2aa5..eed4be01f 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -11,6 +11,7 @@ import { ConfirmService } from '../../core/confirm'
 import { AbstractVideoList } from '../../shared/video/abstract-video-list'
 import { Video } from '../../shared/video/video.model'
 import { VideoService } from '../../shared/video/video.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-videos',
@@ -18,7 +19,7 @@ import { VideoService } from '../../shared/video/video.service'
   styleUrls: [ './my-account-videos.component.scss' ]
 })
 export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  titlePage = 'My videos'
+  titlePage: string
   currentRoute = '/my-account/videos'
   checkedVideos: { [ id: number ]: boolean } = {}
   pagination: ComponentPagination = {
@@ -30,14 +31,19 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
   protected baseVideoWidth = -1
   protected baseVideoHeight = 155
 
-  constructor (protected router: Router,
-               protected route: ActivatedRoute,
-               protected authService: AuthService,
-               protected notificationsService: NotificationsService,
-               protected confirmService: ConfirmService,
-               protected location: Location,
-               private videoService: VideoService) {
+  constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected authService: AuthService,
+    protected notificationsService: NotificationsService,
+    protected confirmService: ConfirmService,
+    protected location: Location,
+    protected i18n: I18n,
+    private videoService: VideoService
+  ) {
     super()
+
+    this.titlePage = this.i18n('My videos')
   }
 
   ngOnInit () {
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index 591d58cf9..48db55ad3 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -1,10 +1,10 @@
 <div class="row">
   <div class="sub-menu">
-    <a routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a>
+    <a i18n routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a>
 
-    <a routerLink="/my-account/video-channels" routerLinkActive="active" class="title-page">My video channels</a>
+    <a i18n routerLink="/my-account/video-channels" routerLinkActive="active" class="title-page">My video channels</a>
 
-    <a routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
+    <a i18n routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
   </div>
 
   <div class="margin-content">
diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html
index 66aa2aec7..2934003ab 100644
--- a/client/src/app/+page-not-found/page-not-found.component.html
+++ b/client/src/app/+page-not-found/page-not-found.component.html
@@ -1,3 +1,3 @@
-<div>
+<div i18n>
   Sorry, but we couldn't find the page you were looking for.
 </div>
\ No newline at end of file
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
index a4338121f..b7125ff71 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
@@ -1,20 +1,20 @@
 <div *ngIf="videoChannel" class="row">
   <div class="description col-md-6 col-sm-12">
     <div class="block">
-      <div class="small-title">Description</div>
+      <div i18n class="small-title">Description</div>
       <div class="content">{{ getVideoChannelDescription() }}</div>
     </div>
 
     <div class="block" *ngIf="videoChannel.support">
-      <div class="small-title">Support this channel</div>
+      <div i18n class="small-title">Support this channel</div>
       <div class="content">{{ videoChannel.support }}</div>
     </div>
   </div>
 
   <div class="stats col-md-6 col-sm-12">
     <div class="block">
-      <div class="small-title">Stats</div>
-      <div class="content">Created {{ videoChannel.createdAt | date }}</div>
+      <div i18n class="small-title">Stats</div>
+      <div i18n class="content">Created {{ videoChannel.createdAt | date }}</div>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
index 6f862718f..c5fd442c6 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-channel-about',
@@ -12,7 +13,8 @@ export class VideoChannelAboutComponent implements OnInit {
   videoChannel: VideoChannel
 
   constructor (
-    protected route: ActivatedRoute,
+    private route: ActivatedRoute,
+    private i18n: I18n,
     private videoChannelService: VideoChannelService
   ) { }
 
@@ -25,6 +27,6 @@ export class VideoChannelAboutComponent implements OnInit {
   getVideoChannelDescription () {
     if (this.videoChannel.description) return this.videoChannel.description
 
-    return 'No description'
+    return this.i18n('No description')
   }
 }
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index c9e72e512..22239d75b 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -10,6 +10,7 @@ import { VideoService } from '../../shared/video/video.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { tap } from 'rxjs/operators'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-channel-videos',
@@ -20,7 +21,7 @@ import { tap } from 'rxjs/operators'
   ]
 })
 export class VideoChannelVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  titlePage = 'Published videos'
+  titlePage: string
   marginContent = false // Disable margin
   currentRoute = '/video-channel/videos'
   loadOnInit = false
@@ -34,10 +35,13 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
     protected notificationsService: NotificationsService,
     protected confirmService: ConfirmService,
     protected location: Location,
+    protected i18n: I18n,
     private videoChannelService: VideoChannelService,
     private videoService: VideoService
   ) {
     super()
+
+    this.titlePage = this.i18n('Published videos')
   }
 
   ngOnInit () {
@@ -63,7 +67,11 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
 
     return this.videoService
                .getVideoChannelVideos(this.videoChannel, newPagination, this.sort)
-               .pipe(tap(({ totalVideos }) => this.titlePage = `Published ${totalVideos} videos`))
+               .pipe(
+                 tap(({ totalVideos }) => {
+                   this.titlePage = this.i18n('Published {{ totalVideos }} videos', { totalVideos })
+                 })
+               )
   }
 
   generateSyndicationList () {
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 6b25d16ab..a52894cac 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -8,19 +8,19 @@
         <div class="actor-names">
           <div class="actor-display-name">{{ videoChannel.displayName }}</div>
         </div>
-        <div class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
+        <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
 
-        <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" title="Go the owner account page" class="actor-owner">
-          <span>Created by {{ videoChannel.ownerBy }}</span>
+        <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
+          <span i18n>Created by {{ videoChannel.ownerBy }}</span>
           <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
         </a>
       </div>
     </div>
 
     <div class="links">
-      <a routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
+      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
 
-      <a routerLink="about" routerLinkActive="active" class="title-page">About</a>
+      <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
     </div>
   </div>
 
diff --git a/client/src/app/about/about.component.html b/client/src/app/about/about.component.html
index 6fa856742..22d3c9a36 100644
--- a/client/src/app/about/about.component.html
+++ b/client/src/app/about/about.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">
     Welcome to the {{ instanceName }} instance
   </div>
 
@@ -8,41 +8,41 @@
   </div>
 
   <div class="description">
-    <div class="section-title">Description</div>
+    <div i18n class="section-title">Description</div>
 
     <div [innerHTML]="descriptionHTML"></div>
   </div>
 
   <div class="terms">
-    <div class="section-title">Terms</div>
+    <div i18n class="section-title">Terms</div>
 
     <div [innerHTML]="termsHTML"></div>
   </div>
 
   <div class="signup">
-    <div class="section-title">Signup</div>
+    <div i18n class="section-title">Signup</div>
 
     <div *ngIf="isSignupAllowed">
-      User registration is allowed and
+      <ng-container i18n>User registration is allowed and</ng-container>
 
-      <ng-template [ngIf]="userVideoQuota !== -1">
+      <ng-container i18n *ngIf="userVideoQuota !== -1">
         this instance provides a baseline quota of {{ userVideoQuota | bytes: 0 }} space for the videos of its users.
-      </ng-template>
+      </ng-container>
 
-      <ng-template [ngIf]="userVideoQuota === -1">
+      <ng-container i18n *ngIf="userVideoQuota === -1">
         this instance provides unlimited space for the videos of its users.
-      </ng-template>
+      </ng-container>
     </div>
 
-    <div *ngIf="isSignupAllowed === false">
+    <div i18n *ngIf="isSignupAllowed === false">
       User registration is currently not allowed.
     </div>
   </div>
 
   <div id="p2p-privacy">
-    <div class="section-title">P2P & Privacy</div>
+    <div i18n class="section-title">P2P & Privacy</div>
 
-    <p>
+    <p i18n>
       PeerTube uses the BitTorrent protocol to share bandwidth between users. It implies that your public IP address is stored in the public BitTorrent tracker of the video PeerTube instance as long as you're watching the video.
       If you want to keep your public IP address private, please use a VPN or Tor.
     </p>
diff --git a/client/src/app/about/about.component.ts b/client/src/app/about/about.component.ts
index 3948d5c46..c37b9318b 100644
--- a/client/src/app/about/about.component.ts
+++ b/client/src/app/about/about.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { MarkdownService } from '@app/videos/shared'
 import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-about',
@@ -17,7 +18,8 @@ export class AboutComponent implements OnInit {
   constructor (
     private notificationsService: NotificationsService,
     private serverService: ServerService,
-    private markdownService: MarkdownService
+    private markdownService: MarkdownService,
+    private i18n: I18n
   ) {}
 
   get instanceName () {
@@ -41,7 +43,7 @@ export class AboutComponent implements OnInit {
           this.termsHTML = this.markdownService.textMarkdownToHTML(res.instance.terms)
         },
 
-        err => this.notificationsService.error('Error getting about from server', err)
+        err => this.notificationsService.error(this.i18n('Error getting about from server'), err)
       )
   }
 
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 614d38d08..363f58155 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -1,5 +1,5 @@
 import { Observable, ReplaySubject, Subject, throwError as observableThrowError } from 'rxjs'
-import { catchError, map, mergeMap, tap, share } from 'rxjs/operators'
+import { catchError, map, mergeMap, share, tap } from 'rxjs/operators'
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
@@ -13,6 +13,7 @@ import { AuthStatus } from './auth-status.model'
 import { AuthUser } from './auth-user.model'
 import { objectToUrlEncoded } from '@app/shared/misc/utils'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 interface UserLoginWithUsername extends UserLogin {
   access_token: string
@@ -46,7 +47,8 @@ export class AuthService {
     private http: HttpClient,
     private notificationsService: NotificationsService,
     private restExtractor: RestExtractor,
-    private router: Router
+    private router: Router,
+    private i18n: I18n
   ) {
     this.loginChanged = new Subject<AuthStatus>()
     this.loginChangedSource = this.loginChanged.asObservable()
@@ -74,14 +76,15 @@ export class AuthService {
             let errorMessage = error.message
 
             if (error.status === 403) {
-              errorMessage = `Cannot retrieve OAuth Client credentials: ${error.text}. \n`
-              errorMessage += 'Ensure you have correctly configured PeerTube (config/ directory), ' +
-                'in particular the "webserver" section.'
+              errorMessage = this.i18n('Cannot retrieve OAuth Client credentials: {{ errorText }}.\n', { errorText: error.text })
+              errorMessage += this.i18n(
+                'Ensure you have correctly configured PeerTube (config/ directory), in particular the "webserver" section.'
+              )
             }
 
             // We put a bigger timeout
             // This is an important message
-            this.notificationsService.error('Error', errorMessage, { timeOut: 7000 })
+            this.notificationsService.error(this.i18n('Error'), errorMessage, { timeOut: 7000 })
           }
         )
   }
@@ -180,7 +183,7 @@ export class AuthService {
                                              this.router.navigate([ '/login' ])
 
                                              return observableThrowError({
-                                               error: 'You need to reconnect.'
+                                               error: this.i18n('You need to reconnect.')
                                              })
                                            }),
                                            share()
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
index 01a4e0ac4..3253de4a0 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -16,7 +16,7 @@
         </div>
 
         <div class="form-group inputs">
-          <span class="action-button action-button-cancel" (click)="cancel()">
+          <span i18n class="action-button action-button-cancel" (click)="cancel()">
             Cancel
           </span>
 
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
index 147bc9d65..02b38489a 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -3,6 +3,7 @@ import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
 import { ModalDirective } from 'ngx-bootstrap/modal'
 
 import { ConfirmService } from './confirm.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-confirm',
@@ -20,7 +21,10 @@ export class ConfirmComponent implements OnInit {
   inputValue = ''
   confirmButtonText = ''
 
-  constructor (private confirmService: ConfirmService) {
+  constructor (
+    private confirmService: ConfirmService,
+    private i18n: I18n
+  ) {
     // Empty
   }
 
@@ -38,7 +42,7 @@ export class ConfirmComponent implements OnInit {
         this.inputLabel = inputLabel
         this.expectedInputValue = expectedInputValue
 
-        this.confirmButtonText = confirmButtonText || 'Confirm'
+        this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
 
         this.showModal()
       }
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index c853d2b1b..a04354db5 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,10 +1,10 @@
 <input
-    type="text" id="search-video" name="search-video" placeholder="Search..."
+    type="text" id="search-video" name="search-video" i18n-placeholder placeholder="Search..."
     [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
 >
 <span (click)="doSearch()" class="icon icon-search"></span>
 
 <a class="upload-button" routerLink="/videos/upload">
   <span class="icon icon-upload"></span>
-  <span class="upload-button-label">Upload</span>
+  <span i18n class="upload-button-label">Upload</span>
 </a>
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index b7fd25d27..1f6cfdb90 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.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">
     Login
   </div>
 
@@ -8,21 +8,21 @@
   <form role="form" (ngSubmit)="login()" [formGroup]="form">
     <div class="form-group">
       <div>
-        <label for="username">User</label>
+        <label i18n for="username">User</label>
         <input
-          type="text" id="username" placeholder="Username or email address" required tabindex="1"
+          type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
           formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
         >
-        <a *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
+        <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
           or create an account
         </a>
 
-        <a *ngIf="signupAllowed === false" href="https://joinpeertube.org/en/#getting-started" target="_blank" class="create-an-account">
+        <a i18n *ngIf="signupAllowed === false" href="https://joinpeertube.org/en/#getting-started" target="_blank" class="create-an-account">
           or create an account on another instance
         </a>
 
         <my-help
-          *ngIf="signupAllowed === false" helpType="custom"
+          *ngIf="signupAllowed === false" helpType="custom" i18n-customHtml
           customHtml="User registration is not allowed on this instance, but you can register on many others!"
         ></my-help>
       </div>
@@ -33,13 +33,13 @@
     </div>
 
     <div class="form-group">
-      <label for="password">Password</label>
+      <label i18n for="password">Password</label>
       <div>
         <input
-          type="password" name="password" id="password" placeholder="Password" required tabindex="2"
+          type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2"
           formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
         >
-        <div class="forgot-password-button" (click)="openForgotPasswordModal()">I forgot my password</div>
+        <div i18n class="forgot-password-button" (click)="openForgotPasswordModal()">I forgot my password</div>
       </div>
       <div *ngIf="formErrors.password" class="form-error">
         {{ formErrors.password }}
@@ -56,25 +56,25 @@
 
       <div class="modal-header">
         <span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
-        <h4 class="modal-title">Forgot your password</h4>
+        <h4 i18n class="modal-title">Forgot your password</h4>
       </div>
 
       <div class="modal-body">
         <div class="form-group">
-          <label for="forgot-password-email">Email</label>
+          <label i18n for="forgot-password-email">Email</label>
           <input
-            type="email" id="forgot-password-email" placeholder="Email address" required
+            type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
             [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
           >
         </div>
 
         <div class="form-group inputs">
-          <span class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">
+          <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">
             Cancel
           </span>
 
           <input
-            type="submit" value="Send me an email to reset my password" class="action-button-submit"
+            type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
             (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
           >
         </div>
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 2514faf94..a14cb2eb7 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -7,6 +7,7 @@ import { NotificationsService } from 'angular2-notifications'
 import { ModalDirective } from 'ngx-bootstrap/modal'
 import { AuthService } from '../core'
 import { FormReactive } from '../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-login',
@@ -35,12 +36,15 @@ export class LoginComponent extends FormReactive implements OnInit {
   }
   forgotPasswordEmail = ''
 
-  constructor (private authService: AuthService,
-               private userService: UserService,
-               private serverService: ServerService,
-               private redirectService: RedirectService,
-               private notificationsService: NotificationsService,
-               private formBuilder: FormBuilder) {
+  constructor (
+    private authService: AuthService,
+    private userService: UserService,
+    private serverService: ServerService,
+    private redirectService: RedirectService,
+    private notificationsService: NotificationsService,
+    private formBuilder: FormBuilder,
+    private i18n: I18n
+  ) {
     super()
   }
 
@@ -78,12 +82,15 @@ export class LoginComponent extends FormReactive implements OnInit {
     this.userService.askResetPassword(this.forgotPasswordEmail)
       .subscribe(
         res => {
-          const message = `An email with the reset password instructions will be sent to ${this.forgotPasswordEmail}.`
-          this.notificationsService.success('Success', message)
+          const message = this.i18n(
+            'An email with the reset password instructions will be sent to {{ email }}.',
+            { email: this.forgotPasswordEmail }
+          )
+          this.notificationsService.success(this.i18n('Success'), message)
           this.hideForgotPasswordModal()
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 1a95477b7..167729405 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -18,11 +18,11 @@
            My public profile
           </a>
 
-          <a routerLink="/my-account/settings" class="dropdown-item" title="My settings">
+          <a i18n routerLink="/my-account/settings" class="dropdown-item" title="My settings">
             My settings
           </a>
 
-          <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#">
+          <a i18n (click)="logout($event)" class="dropdown-item" title="Log out" href="#">
             Log out
           </a>
         </li>
@@ -31,26 +31,26 @@
   </div>
 
   <div *ngIf="!isLoggedIn" class="button-block">
-    <a routerLink="/login" class="login-button">Login</a>
-    <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
+    <a i18n routerLink="/login" class="login-button">Login</a>
+    <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
   </div>
 
   <div class="panel-block">
-    <div class="block-title">Videos</div>
+    <div i18n class="block-title">Videos</div>
 
     <a routerLink="/videos/trending" routerLinkActive="active">
       <span class="icon icon-videos-trending"></span>
-      Trending
+      <ng-container i18n>Trending</ng-container>
     </a>
 
     <a routerLink="/videos/recently-added" routerLinkActive="active">
       <span class="icon icon-videos-recently-added"></span>
-      Recently added
+      <ng-container i18n>Recently added</ng-container>
     </a>
 
     <a routerLink="/videos/local" routerLinkActive="active">
       <span class="icon icon-videos-local"></span>
-      Local
+      <ng-container i18n>Local</ng-container>
     </a>
   </div>
 
@@ -59,12 +59,12 @@
 
     <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
       <span class="icon icon-administration"></span>
-      Administration
+      <ng-container i18n>Administration</ng-container>
     </a>
 
     <a routerLink="/about" routerLinkActive="active">
       <span class="icon icon-about"></span>
-      About
+      <ng-container i18n>About</ng-container>
     </a>
   </div>
 </menu>
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 69216e215..c0aea89b3 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { UserRight } from '../../../../shared/models/users/user-right.enum'
-import { AuthService, AuthStatus, ServerService } from '../core'
+import { AuthService, AuthStatus, RedirectService, ServerService } from '../core'
 import { User } from '../shared/users/user.model'
 
 @Component({
@@ -24,7 +24,7 @@ export class MenuComponent implements OnInit {
   constructor (
     private authService: AuthService,
     private serverService: ServerService,
-    private router: Router
+    private redirectService: RedirectService
   ) {}
 
   ngOnInit () {
@@ -87,7 +87,7 @@ export class MenuComponent implements OnInit {
 
     this.authService.logout()
     // Redirect to home page
-    this.router.navigate(['/videos/list'])
+    this.redirectService.redirectToHomepage()
   }
 
   private computeIsUserHasAdminAccess () {
diff --git a/client/src/app/reset-password/reset-password.component.html b/client/src/app/reset-password/reset-password.component.html
index 9cf623c64..20e62d0b7 100644
--- a/client/src/app/reset-password/reset-password.component.html
+++ b/client/src/app/reset-password/reset-password.component.html
@@ -1,13 +1,13 @@
 <div class="margin-content">
-  <div class="title-page title-page-single">
+  <div i18n class="title-page title-page-single">
     Reset my password
   </div>
 
   <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
     <div class="form-group">
-      <label for="password">Password</label>
+      <label i18n for="password">Password</label>
       <input
-        type="password" name="password" id="password" placeholder="Password" required
+        type="password" name="password" id="password" i18n-placeholder placeholder="Password" required
         formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
       >
       <div *ngIf="formErrors.password" class="form-error">
@@ -16,9 +16,9 @@
     </div>
 
     <div class="form-group">
-      <label for="password-confirm">Confirm password</label>
+      <label i18n for="password-confirm">Confirm password</label>
       <input
-        type="password" name="password-confirm" id="password-confirm" placeholder="Confirmed password" required
+        type="password" name="password-confirm" id="password-confirm" i18n-placeholder placeholder="Confirmed password" required
         formControlName="password-confirm" [ngClass]="{ 'input-error': formErrors['password-confirm'] }"
       >
       <div *ngIf="formErrors['password-confirm']" class="form-error">
@@ -26,6 +26,6 @@
       </div>
     </div>
 
-    <input type="submit" value="Reset my password" [disabled]="!form.valid && isConfirmedPasswordValid()">
+    <input type="submit" i18n-value value="Reset my password" [disabled]="!form.valid && isConfirmedPasswordValid()">
   </form>
 </div>
diff --git a/client/src/app/reset-password/reset-password.component.ts b/client/src/app/reset-password/reset-password.component.ts
index 408374779..c8bd368c1 100644
--- a/client/src/app/reset-password/reset-password.component.ts
+++ b/client/src/app/reset-password/reset-password.component.ts
@@ -5,6 +5,7 @@ import { USER_PASSWORD, UserService } from '@app/shared'
 import { NotificationsService } from 'angular2-notifications'
 import { AuthService } from '../core'
 import { FormReactive } from '../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-login',
@@ -34,7 +35,8 @@ export class ResetPasswordComponent extends FormReactive implements OnInit {
     private notificationsService: NotificationsService,
     private formBuilder: FormBuilder,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private i18n: I18n
   ) {
     super()
   }
@@ -55,7 +57,7 @@ export class ResetPasswordComponent extends FormReactive implements OnInit {
     this.verificationString = this.route.snapshot.queryParams['verificationString']
 
     if (!this.userId || !this.verificationString) {
-      this.notificationsService.error('Error', 'Unable to find user id or verification string.')
+      this.notificationsService.error(this.i18n('Error'), this.i18n('Unable to find user id or verification string.'))
       this.router.navigate([ '/' ])
     }
   }
@@ -64,7 +66,7 @@ export class ResetPasswordComponent extends FormReactive implements OnInit {
     this.userService.resetPassword(this.userId, this.verificationString, this.form.value.password)
       .subscribe(
         () => {
-          this.notificationsService.success('Success', 'Your password has been successfully reset!')
+          this.notificationsService.success(this.i18n('Success'), this.i18n('Your password has been successfully reset!'))
           this.router.navigate([ '/login' ])
         },
 
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index 46a97b163..6effda5b8 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -6,7 +6,7 @@

- - + +

diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts index dcc85f3cd..8b932cd15 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.ts +++ b/client/src/app/shared/forms/markdown-textarea.component.ts @@ -3,7 +3,7 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core' import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' import { isInSmallView } from '@app/shared/misc/utils' import { MarkdownService } from '@app/videos/shared' -import { Subject } from 'rxjs' +import { Subject } from 'rxjs/Subject' import truncate from 'lodash-es/truncate' @Component({ diff --git a/client/src/app/shared/guards/can-deactivate-guard.service.ts b/client/src/app/shared/guards/can-deactivate-guard.service.ts index 550dd656e..c038a5c0e 100644 --- a/client/src/app/shared/guards/can-deactivate-guard.service.ts +++ b/client/src/app/shared/guards/can-deactivate-guard.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core' import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router' import { Observable } from 'rxjs' import { ConfirmService } from '../../core/index' +import { I18n } from '@ngx-translate/i18n-polyfill' export interface CanComponentDeactivate { canDeactivate: () => { text?: string, canDeactivate: Observable | boolean } @@ -9,7 +10,10 @@ export interface CanComponentDeactivate { @Injectable() export class CanDeactivateGuard implements CanDeactivate { - constructor (private confirmService: ConfirmService) { } + constructor ( + private confirmService: ConfirmService, + private i18n: I18n + ) { } canDeactivate (component: CanComponentDeactivate, currentRoute: ActivatedRouteSnapshot, @@ -17,11 +21,11 @@ export class CanDeactivateGuard implements CanDeactivate nextState: RouterStateSnapshot ) { const result = component.canDeactivate() - const text = result.text || 'All unsaved data will be lost, are you sure you want to leave this page?' + const text = result.text || this.i18n('All unsaved data will be lost, are you sure you want to leave this page?') return result.canDeactivate || this.confirmService.confirm( text, - 'Warning' + this.i18n('Warning') ) } diff --git a/client/src/app/shared/misc/edit-button.component.html b/client/src/app/shared/misc/edit-button.component.html index 632d6bba2..78fbc326e 100644 --- a/client/src/app/shared/misc/edit-button.component.html +++ b/client/src/app/shared/misc/edit-button.component.html @@ -1,4 +1,4 @@ - Edit + Edit diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/misc/from-now.pipe.ts index fac02af0b..3a64a4077 100644 --- a/client/src/app/shared/misc/from-now.pipe.ts +++ b/client/src/app/shared/misc/from-now.pipe.ts @@ -1,36 +1,39 @@ import { Pipe, PipeTransform } from '@angular/core' +import { I18n } from '@ngx-translate/i18n-polyfill' // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site @Pipe({ name: 'myFromNow' }) export class FromNowPipe implements PipeTransform { + constructor (private i18n: I18n) { } + transform (value: number) { const seconds = Math.floor((Date.now() - value) / 1000) let interval = Math.floor(seconds / 31536000) if (interval > 1) { - return interval + ' years ago' + return this.i18n('{{ interval }} years ago', { interval }) } interval = Math.floor(seconds / 2592000) - if (interval > 1) return interval + ' months ago' - if (interval === 1) return interval + ' month ago' + if (interval > 1) return this.i18n('{{ interval }} months ago', { interval }) + if (interval === 1) return this.i18n('{{ interval }} month ago', { interval }) interval = Math.floor(seconds / 604800) - if (interval > 1) return interval + ' weeks ago' - if (interval === 1) return interval + ' week ago' + if (interval > 1) return this.i18n('{{ interval }} weeks ago', { interval }) + if (interval === 1) return this.i18n('{{ interval }} week ago', { interval }) interval = Math.floor(seconds / 86400) - if (interval > 1) return interval + ' days ago' - if (interval === 1) return interval + ' day ago' + if (interval > 1) return this.i18n('{{ interval }} days ago', { interval }) + if (interval === 1) return this.i18n('{{ interval }} day ago', { interval }) interval = Math.floor(seconds / 3600) - if (interval > 1) return interval + ' hours ago' - if (interval === 1) return interval + ' hour ago' + if (interval > 1) return this.i18n('{{ interval }} hours ago', { interval }) + if (interval === 1) return this.i18n('{{ interval }} hour ago', { interval }) interval = Math.floor(seconds / 60) - if (interval >= 1) return interval + ' min ago' + if (interval >= 1) return this.i18n('{{ interval }} min ago', { interval }) - return Math.floor(seconds) + ' sec ago' + return this.i18n('{{ interval }} sec ago', { interval: Math.floor(seconds) }) } } diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html index 3da5701a0..f2b6eca33 100644 --- a/client/src/app/shared/misc/help.component.html +++ b/client/src/app/shared/misc/help.component.html @@ -15,6 +15,7 @@

Download video

Download video

Report video

Report video

Share

Share

Support

Support