7 files changed, 47 insertions, 27 deletions

diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index e60a74cc0..51e354378 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -16,8 +16,8 @@ import { MenuComponent } from './menu'
 import { SharedModule } from './shared'
 import { SignupModule } from './signup'
 import { VideosModule } from './videos'
-import { buildFileLocale, getDefaultLocale } from '../../../shared/models/i18n'
-import { environment } from '../environments/environment'
+import { buildFileLocale, getCompleteLocale, getDefaultLocale, isDefaultLocale } from '../../../shared/models/i18n'
+import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 
 export function metaFactory (serverService: ServerService): MetaLoader {
   return new MetaStaticLoader({
@@ -67,17 +67,17 @@ export function metaFactory (serverService: ServerService): MetaLoader {
     {
       provide: TRANSLATIONS,
       useFactory: (locale) => {
-        // On dev mode, test locales
-        if (environment.production === false && window.location.search === '?lang=fr') {
-          return require(`raw-loader!../locale/target/angular_fr.xml`)
+        // On dev mode, test localization
+        if (isOnDevLocale()) {
+          locale = getDevLocale()
+          return require(`raw-loader!../locale/target/angular_${locale}.xml`)
         }
 
-        const fileLocale = buildFileLocale(locale)
-
         // Default locale, nothing to translate
-        const defaultFileLocale = buildFileLocale(getDefaultLocale())
-        if (fileLocale === defaultFileLocale) return ''
+        const completeLocale = getCompleteLocale(locale)
+        if (isDefaultLocale(completeLocale)) return ''
 
+        const fileLocale = buildFileLocale(locale)
         return require(`raw-loader!../locale/target/angular_${fileLocale}.xml`)
       },
       deps: [ LOCALE_ID ]
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 56d33339e..74363e6a1 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -2,13 +2,13 @@ import { map, share, switchMap, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Inject, Injectable, LOCALE_ID } from '@angular/core'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
-import { Observable, ReplaySubject } from 'rxjs'
-import { ServerConfig } from '../../../../../shared'
+import { Observable, ReplaySubject, of } from 'rxjs'
+import { getCompleteLocale, ServerConfig } from '../../../../../shared'
 import { About } from '../../../../../shared/models/server/about.model'
 import { environment } from '../../../environments/environment'
 import { VideoConstant, VideoPrivacy } from '../../../../../shared/models/videos'
-import { buildFileLocale, getDefaultLocale } from '../../../../../shared/models/i18n'
-import { peertubeTranslate } from '@app/shared/i18n/i18n-utils'
+import { isDefaultLocale } from '../../../../../shared/models/i18n'
+import { getDevLocale, isOnDevLocale, peertubeTranslate } from '@app/shared/i18n/i18n-utils'
 
 @Injectable()
 export class ServerService {
@@ -72,8 +72,8 @@ export class ServerService {
     private http: HttpClient,
     @Inject(LOCALE_ID) private localeId: string
   ) {
-    this.loadConfigLocally()
     this.loadServerLocale()
+    this.loadConfigLocally()
   }
 
   loadConfig () {
@@ -163,14 +163,16 @@ export class ServerService {
   }
 
   private loadServerLocale () {
-    const fileLocale = buildFileLocale(environment.production === true ? this.localeId : 'fr')
+    const completeLocale = isOnDevLocale() ? getDevLocale() : getCompleteLocale(this.localeId)
 
     // Default locale, nothing to translate
-    const defaultFileLocale = buildFileLocale(getDefaultLocale())
-    if (fileLocale === defaultFileLocale) return {}
+    if (isDefaultLocale(completeLocale)) {
+      this.localeObservable = of({}).pipe(share())
+      return
+    }
 
     this.localeObservable = this.http
-                                  .get(ServerService.BASE_LOCALE_URL + fileLocale + '/server.json')
+                                  .get(ServerService.BASE_LOCALE_URL + completeLocale + '/server.json')
                                   .pipe(share())
   }
 
diff --git a/client/src/app/shared/i18n/i18n-utils.ts b/client/src/app/shared/i18n/i18n-utils.ts
index c1de51b7b..37180b930 100644
--- a/client/src/app/shared/i18n/i18n-utils.ts
+++ b/client/src/app/shared/i18n/i18n-utils.ts
@@ -1,7 +1,19 @@
+import { environment } from '../../../environments/environment'
+
 function peertubeTranslate (str: string, translations: { [ id: string ]: string }) {
   return translations[str] ? translations[str] : str
 }
 
+function isOnDevLocale () {
+  return environment.production === false && window.location.search === '?lang=fr'
+}
+
+function getDevLocale () {
+  return 'fr'
+}
+
 export {
+  getDevLocale,
+  isOnDevLocale,
   peertubeTranslate
 }
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index c607b7d6a..58cb52efc 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -46,8 +46,8 @@ export class VideoService {
     return this.serverService.localeObservable
                .pipe(
                  switchMap(translations => {
-                  return this.authHttp.get<VideoDetailsServerModel>(VideoService.BASE_VIDEO_URL + uuid)
-                     .pipe(map(videoHash => ({ videoHash, translations })))
+                   return this.authHttp.get<VideoDetailsServerModel>(VideoService.BASE_VIDEO_URL + uuid)
+                              .pipe(map(videoHash => ({ videoHash, translations })))
                  }),
                  map(({ videoHash, translations }) => new VideoDetails(videoHash, translations)),
                  catchError(res => this.restExtractor.handleError(res))
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index d3e16c4cf..4a67d456e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -25,6 +25,7 @@ import { getVideojsOptions, loadLocale, addContextMenu } from '../../../assets/p
 import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { environment } from '../../../environments/environment'
+import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 
 @Component({
   selector: 'my-video-watch',
@@ -377,7 +378,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     })
 
     if (this.videojsLocaleLoaded === false) {
-      await loadLocale(environment.apiUrl, videojs, environment.production === true ? this.localeId : 'fr')
+      await loadLocale(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId)
       this.videojsLocaleLoaded = true
     }
 
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index b604097fa..9e37b75d2 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -12,7 +12,7 @@ import './peertube-videojs-plugin'
 import './peertube-load-progress-bar'
 import { videojsUntyped } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
-import { is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
+import { getCompleteLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
@@ -141,11 +141,13 @@ function addContextMenu (player: any, videoEmbedUrl: string) {
 }
 
 function loadLocale (serverUrl: string, videojs: any, locale: string) {
-  if (!is18nLocale(locale) || isDefaultLocale(locale)) return undefined
+  const completeLocale = getCompleteLocale(locale)
 
-  return fetch(serverUrl + '/client/locales/' + locale + '/player.json')
+  if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return Promise.resolve(undefined)
+
+  return fetch(serverUrl + '/client/locales/' + completeLocale + '/player.json')
     .then(res => res.json())
-    .then(json => videojs.addLanguage(locale, json))
+    .then(json => videojs.addLanguage(completeLocale, json))
 }
 
 export {
diff --git a/client/src/main.ts b/client/src/main.ts
index 19f45a3e3..061be17de 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -5,14 +5,17 @@ import { AppModule } from './app/app.module'
 import { environment } from './environments/environment'
 
 import { hmrBootstrap } from './hmr'
+import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 
 let providers = []
 if (environment.production) {
   enableProdMode()
 }
 
-if (environment.production === false && window.location.search === '?lang=fr') {
-  const translations = require(`raw-loader!./locale/target/angular_fr.xml`)
+// Template translation, should be in the bootstrap step
+if (isOnDevLocale()) {
+  const locale = getDevLocale()
+  const translations = require(`raw-loader!./locale/target/angular_${locale}.xml`)
 
   providers = [
     { provide: TRANSLATIONS, useValue: translations },