11 files changed, 43 insertions, 27 deletions

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 @@
   </textarea>
 
   <tabset *ngIf="arePreviewsDisplayed()" class="previews">
-    <tab *ngIf="truncate !== undefined" heading="Truncated preview" [innerHTML]="truncatedPreviewHTML"></tab>
-    <tab heading="Complete preview" [innerHTML]="previewHTML"></tab>
+    <tab *ngIf="truncate !== undefined" i18n-heading heading="Truncated preview" [innerHTML]="truncatedPreviewHTML"></tab>
+    <tab i18n-heading heading="Complete preview" [innerHTML]="previewHTML"></tab>
   </tabset>
 </div>
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> | boolean }
@@ -9,7 +10,10 @@ export interface CanComponentDeactivate {
 
 @Injectable()
 export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
-  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<CanComponentDeactivate>
     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 @@
 <a class="action-button action-button-edit" [routerLink]="routerLink" title="Edit">
   <span class="icon icon-edit"></span>
-  <span class="button-label">Edit</span>
+  <span i18n class="button-label">Edit</span>
 </a>
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 @@
 <span
   class="help-tooltip-button"
   title="Get help"
+  i18n-title
   [popover]="tooltipTemplate"
   [placement]="tooltipPlacement"
   [outsideClick]="true"
diff --git a/client/src/app/shared/rest/rest-extractor.service.ts b/client/src/app/shared/rest/rest-extractor.service.ts
index 39e601e20..468ac3e32 100644
--- a/client/src/app/shared/rest/rest-extractor.service.ts
+++ b/client/src/app/shared/rest/rest-extractor.service.ts
@@ -3,11 +3,15 @@ import { Injectable } from '@angular/core'
 import { dateToHuman } from '@app/shared/misc/utils'
 import { ResultList } from '../../../../../shared'
 import { Router } from '@angular/router'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Injectable()
 export class RestExtractor {
 
-  constructor (private router: Router) {
+  constructor (
+    private router: Router,
+    private i18n: I18n
+  ) {
     // empty
   }
 
@@ -60,17 +64,19 @@ export class RestExtractor {
       } else if (err.error && err.error.error) {
         errorMessage = err.error.error
       } else if (err.status === 413) {
-        errorMessage = 'Request is too large for the server. Please contact you administrator if you want to increase the limit size.'
+        errorMessage = this.i18n(
+          'Request is too large for the server. Please contact you administrator if you want to increase the limit size.'
+        )
       } else if (err.status === 429) {
         const secondsLeft = err.headers.get('retry-after')
         if (secondsLeft) {
           const minutesLeft = Math.floor(parseInt(secondsLeft, 10) / 60)
-          errorMessage = 'Too many attempts, please try again after ' + minutesLeft + ' minutes.'
+          errorMessage = this.i18n('Too many attempts, please try again after {{ minutesLeft }} minutes.', { minutesLeft })
         } else {
-          errorMessage = 'Too many attempts, please try again later.'
+          errorMessage = this.i18n('Too many attempts, please try again later.')
         }
       } else if (err.status === 500) {
-        errorMessage = 'Server error. Please retry later.'
+        errorMessage = this.i18n('Server error. Please retry later.')
       }
 
       errorMessage = errorMessage ? errorMessage : 'Unknown error.'
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 690529dcf..e8ded6ab8 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -4,7 +4,7 @@
   </div>
   <my-video-feed [syndicationItems]="syndicationItems"></my-video-feed>
 
-  <div *ngIf="pagination.totalItems === 0">No results.</div>
+  <div i18n *ngIf="pagination.totalItems === 0">No results.</div>
   <div
     myInfiniteScroller
     [pageHeight]="pageHeight"
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 100cbff8d..1c84573da 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -10,6 +10,7 @@ import { AuthService } from '../../core/auth'
 import { ComponentPagination } from '../rest/component-pagination.model'
 import { VideoSortField } from './sort-field.type'
 import { Video } from './video.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 export abstract class AbstractVideoList implements OnInit, OnDestroy {
   private static LINES_PER_PAGE = 4
@@ -40,6 +41,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   protected abstract authService: AuthService
   protected abstract router: Router
   protected abstract route: ActivatedRoute
+  protected abstract i18n: I18n
   protected abstract location: Location
   protected abstract currentRoute: string
   abstract titlePage: string
@@ -124,7 +126,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
       },
       error => {
         this.loadingPage[page] = false
-        this.notificationsService.error('Error', error.message)
+        this.notificationsService.error(this.i18n('Error'), error.message)
       }
     )
   }
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 09ce0ef7f..3010e5ccc 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -9,7 +9,7 @@
       {{ video.name }}
     </a>
 
-    <span class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
+    <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
     <a class="video-miniature-account" [routerLink]="[ '/accounts', video.by ]">{{ video.by }}</a>
   </div>
 </div>
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index 4604d10e2..971f352ba 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,6 +1,6 @@
 <a
   [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
-class="video-thumbnail"
+  class="video-thumbnail"
 >
 <img [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />