Lazy load static objects

13 files changed, 106 insertions, 57 deletions

diff --git a/client/src/app/shared/images/preview-upload.component.ts b/client/src/app/shared/images/preview-upload.component.ts
index 44b78866e..f56f5b1f8 100644
--- a/client/src/app/shared/images/preview-upload.component.ts
+++ b/client/src/app/shared/images/preview-upload.component.ts
@@ -2,6 +2,7 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
+import { ServerConfig } from '@shared/models'
 
 @Component({
   selector: 'my-preview-upload',
@@ -24,6 +25,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
   imageSrc: SafeResourceUrl
   allowedExtensionsMessage = ''
 
+  private serverConfig: ServerConfig
   private file: File
 
   constructor (
@@ -32,14 +34,18 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
   ) {}
 
   get videoImageExtensions () {
-    return this.serverService.getConfig().video.image.extensions
+    return this.serverConfig.video.image.extensions
   }
 
   get maxVideoImageSize () {
-    return this.serverService.getConfig().video.image.size.max
+    return this.serverConfig.video.image.size.max
   }
 
   ngOnInit () {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+      .subscribe(config => this.serverConfig = config)
+
     this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
   }
 
diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
index f880a886f..fd8b3354f 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -1,6 +1,6 @@
 <div class="feature-table">
 
-  <table class="table" *ngIf="config">
+  <table class="table" *ngIf="serverConfig">
     <tr>
       <td i18n class="label">PeerTube version</td>
 
@@ -19,7 +19,7 @@
     <tr>
       <td i18n class="label">User registration allowed</td>
       <td>
-        <my-feature-boolean [value]="config.signup.allowed"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.signup.allowed"></my-feature-boolean>
       </td>
     </tr>
 
@@ -30,15 +30,15 @@
     <tr>
       <td i18n class="sub-label">Transcoding in multiple resolutions</td>
       <td>
-        <my-feature-boolean [value]="config.transcoding.enabledResolutions.length !== 0"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.transcoding.enabledResolutions.length !== 0"></my-feature-boolean>
       </td>
     </tr>
 
     <tr>
       <td i18n class="sub-label">Video uploads</td>
       <td>
-        <span *ngIf="config.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
-        <span *ngIf="!config.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
+        <span *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
+        <span *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
       </td>
     </tr>
 
@@ -69,14 +69,14 @@
     <tr>
       <td i18n class="sub-label">HTTP import (YouTube, Vimeo, direct URL...)</td>
       <td>
-        <my-feature-boolean [value]="config.import.videos.http.enabled"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.import.videos.http.enabled"></my-feature-boolean>
       </td>
     </tr>
 
     <tr>
       <td i18n class="sub-label">Torrent import</td>
       <td>
-        <my-feature-boolean [value]="config.import.videos.torrent.enabled"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.import.videos.torrent.enabled"></my-feature-boolean>
       </td>
     </tr>
 
@@ -88,7 +88,7 @@
     <tr>
       <td i18n class="sub-label">P2P enabled</td>
       <td>
-        <my-feature-boolean [value]="config.tracker.enabled"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean>
       </td>
     </tr>
   </table>
diff --git a/client/src/app/shared/instance/instance-features-table.component.ts b/client/src/app/shared/instance/instance-features-table.component.ts
index 1661f1efe..8fd15ebad 100644
--- a/client/src/app/shared/instance/instance-features-table.component.ts
+++ b/client/src/app/shared/instance/instance-features-table.component.ts
@@ -10,7 +10,7 @@ import { ServerConfig } from '@shared/models'
 })
 export class InstanceFeaturesTableComponent implements OnInit {
   quotaHelpIndication = ''
-  config: ServerConfig
+  serverConfig: ServerConfig
 
   constructor (
     private i18n: I18n,
@@ -19,29 +19,34 @@ export class InstanceFeaturesTableComponent implements OnInit {
   }
 
   get initialUserVideoQuota () {
-    return this.serverService.getConfig().user.videoQuota
+    return this.serverConfig.user.videoQuota
   }
 
   get dailyUserVideoQuota () {
-    return Math.min(this.initialUserVideoQuota, this.serverService.getConfig().user.videoQuotaDaily)
+    return Math.min(this.initialUserVideoQuota, this.serverConfig.user.videoQuotaDaily)
   }
 
   ngOnInit () {
-    this.serverService.configLoaded
-        .subscribe(() => {
-          this.config = this.serverService.getConfig()
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+        .subscribe(config => {
+          this.serverConfig = config
           this.buildQuotaHelpIndication()
         })
   }
 
   buildNSFWLabel () {
-    const policy = this.serverService.getConfig().instance.defaultNSFWPolicy
+    const policy = this.serverConfig.instance.defaultNSFWPolicy
 
     if (policy === 'do_not_list') return this.i18n('Hidden')
     if (policy === 'blur') return this.i18n('Blurred with confirmation request')
     if (policy === 'display') return this.i18n('Displayed')
   }
 
+  getServerVersionAndCommit () {
+    return this.serverService.getServerVersionAndCommit()
+  }
+
   private getApproximateTime (seconds: number) {
     const hours = Math.floor(seconds / 3600)
     let pluralSuffix = ''
@@ -53,10 +58,6 @@ export class InstanceFeaturesTableComponent implements OnInit {
     return this.i18n('~ {{minutes}} {minutes, plural, =1 {minute} other {minutes}}', { minutes })
   }
 
-  getServerVersionAndCommit () {
-    return this.serverService.getServerVersionAndCommit()
-  }
-
   private buildQuotaHelpIndication () {
     if (this.initialUserVideoQuota === -1) return
 
diff --git a/client/src/app/shared/instance/instance.service.ts b/client/src/app/shared/instance/instance.service.ts
index 44b413fa4..8b26063fb 100644
--- a/client/src/app/shared/instance/instance.service.ts
+++ b/client/src/app/shared/instance/instance.service.ts
@@ -1,4 +1,4 @@
-import { catchError } from 'rxjs/operators'
+import { catchError, map } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { environment } from '../../../environments/environment'
@@ -7,6 +7,7 @@ import { About } from '../../../../../shared/models/server'
 import { MarkdownService } from '@app/shared/renderer'
 import { peertubeTranslate } from '@shared/models'
 import { ServerService } from '@app/core'
+import { forkJoin } from 'rxjs'
 
 @Injectable()
 export class InstanceService {
@@ -57,25 +58,35 @@ export class InstanceService {
     return html
   }
 
-  buildTranslatedLanguages (about: About, translations: any) {
-    const languagesArray = this.serverService.getVideoLanguages()
+  buildTranslatedLanguages (about: About) {
+    return forkJoin([
+      this.serverService.getVideoLanguages(),
+      this.serverService.getServerLocale()
+    ]).pipe(
+      map(([ languagesArray, translations ]) => {
+        return about.instance.languages
+                    .map(l => {
+                      const languageObj = languagesArray.find(la => la.id === l)
 
-    return about.instance.languages
-                .map(l => {
-                  const languageObj = languagesArray.find(la => la.id === l)
-
-                  return peertubeTranslate(languageObj.label, translations)
-                })
+                      return peertubeTranslate(languageObj.label, translations)
+                    })
+      })
+    )
   }
 
-  buildTranslatedCategories (about: About, translations: any) {
-    const categoriesArray = this.serverService.getVideoCategories()
-
-    return about.instance.categories
-                .map(c => {
-                  const categoryObj = categoriesArray.find(ca => ca.id === c)
+  buildTranslatedCategories (about: About) {
+    return forkJoin([
+      this.serverService.getVideoCategories(),
+      this.serverService.getServerLocale()
+    ]).pipe(
+      map(([ categoriesArray, translations ]) => {
+        return about.instance.categories
+                    .map(c => {
+                      const categoryObj = categoriesArray.find(ca => ca.id === c)
 
-                  return peertubeTranslate(categoryObj.label, translations)
-                })
+                      return peertubeTranslate(categoryObj.label, translations)
+                    })
+      })
+    )
   }
 }
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index e9d4c1437..d82dc3d94 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
 import { UserBanModalComponent } from '@app/shared/moderation/user-ban-modal.component'
@@ -7,12 +7,13 @@ import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
 import { User, UserRight } from '../../../../../shared/models/users'
 import { Account } from '@app/shared/account/account.model'
 import { BlocklistService } from '@app/shared/blocklist'
+import { ServerConfig } from '@shared/models'
 
 @Component({
   selector: 'my-user-moderation-dropdown',
   templateUrl: './user-moderation-dropdown.component.html'
 })
-export class UserModerationDropdownComponent implements OnChanges {
+export class UserModerationDropdownComponent implements OnInit, OnChanges {
   @ViewChild('userBanModal', { static: false }) userBanModal: UserBanModalComponent
 
   @Input() user: User
@@ -26,6 +27,8 @@ export class UserModerationDropdownComponent implements OnChanges {
 
   userActions: DropdownAction<{ user: User, account: Account }>[][] = []
 
+  private serverConfig: ServerConfig
+
   constructor (
     private authService: AuthService,
     private notifier: Notifier,
@@ -38,7 +41,13 @@ export class UserModerationDropdownComponent implements OnChanges {
   ) { }
 
   get requiresEmailVerification () {
-    return this.serverService.getConfig().signup.requiresEmailVerification
+    return this.serverConfig.signup.requiresEmailVerification
+  }
+
+  ngOnInit (): void {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+      .subscribe(config => this.serverConfig = config)
   }
 
   ngOnChanges () {
diff --git a/client/src/app/shared/overview/overview.service.ts b/client/src/app/shared/overview/overview.service.ts
index bd4068925..79cb781f7 100644
--- a/client/src/app/shared/overview/overview.service.ts
+++ b/client/src/app/shared/overview/overview.service.ts
@@ -60,7 +60,7 @@ export class OverviewService {
       .pipe(
         // Translate categories
         switchMap(() => {
-          return this.serverService.localeObservable
+          return this.serverService.getServerLocale()
               .pipe(
                 tap(translations => {
                   for (const c of videosOverviewResult.categories) {
diff --git a/client/src/app/shared/video-caption/video-caption.service.ts b/client/src/app/shared/video-caption/video-caption.service.ts
index 977f6253a..6bfe67435 100644
--- a/client/src/app/shared/video-caption/video-caption.service.ts
+++ b/client/src/app/shared/video-caption/video-caption.service.ts
@@ -22,7 +22,7 @@ export class VideoCaptionService {
     return this.authHttp.get<ResultList<VideoCaption>>(VideoService.BASE_VIDEO_URL + videoId + '/captions')
                .pipe(
                  switchMap(captionsResult => {
-                   return this.serverService.localeObservable
+                   return this.serverService.getServerLocale()
                      .pipe(map(translations => ({ captionsResult, translations })))
                  }),
                  map(({ captionsResult, translations }) => {
diff --git a/client/src/app/shared/video-import/video-import.service.ts b/client/src/app/shared/video-import/video-import.service.ts
index 7ae13154d..3e3fb7dfb 100644
--- a/client/src/app/shared/video-import/video-import.service.ts
+++ b/client/src/app/shared/video-import/video-import.service.ts
@@ -91,7 +91,7 @@ export class VideoImportService {
   }
 
   private extractVideoImports (result: ResultList<VideoImport>): Observable<ResultList<VideoImport>> {
-    return this.serverService.localeObservable
+    return this.serverService.getServerLocale()
                .pipe(
                  map(translations => {
                    result.data.forEach(d =>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index a8e5a4885..cd592eab0 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { Video } from '@app/shared/video/video.model'
-import { VideoPlaylistElementType, VideoPlaylistElementUpdate } from '@shared/models'
+import { ServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate } from '@shared/models'
 import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
 import { ActivatedRoute } from '@angular/router'
 import { I18n } from '@ngx-translate/i18n-polyfill'
@@ -17,7 +17,7 @@ import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-
   templateUrl: './video-playlist-element-miniature.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class VideoPlaylistElementMiniatureComponent {
+export class VideoPlaylistElementMiniatureComponent implements OnInit {
   @ViewChild('moreDropdown', { static: false }) moreDropdown: NgbDropdown
 
   @Input() playlist: VideoPlaylist
@@ -39,6 +39,8 @@ export class VideoPlaylistElementMiniatureComponent {
     stopTimestamp: number
   } = {} as any
 
+  private serverConfig: ServerConfig
+
   constructor (
     private authService: AuthService,
     private serverService: ServerService,
@@ -51,6 +53,15 @@ export class VideoPlaylistElementMiniatureComponent {
     private cdr: ChangeDetectorRef
   ) {}
 
+  ngOnInit (): void {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+        .subscribe(config => {
+          this.serverConfig = config
+          this.cdr.detectChanges()
+        })
+  }
+
   isUnavailable (e: VideoPlaylistElement) {
     return e.type === VideoPlaylistElementType.UNAVAILABLE
   }
@@ -80,7 +91,7 @@ export class VideoPlaylistElementMiniatureComponent {
   }
 
   isVideoBlur (video: Video) {
-    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
+    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverConfig)
   }
 
   removeFromPlaylist (playlistElement: VideoPlaylistElement) {
diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
index 42791af86..2945b4959 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -173,7 +173,7 @@ export class VideoPlaylistService {
   }
 
   extractPlaylists (result: ResultList<VideoPlaylistServerModel>) {
-    return this.serverService.localeObservable
+    return this.serverService.getServerLocale()
                .pipe(
                  map(translations => {
                    const playlistsJSON = result.data
@@ -190,12 +190,12 @@ export class VideoPlaylistService {
   }
 
   extractPlaylist (playlist: VideoPlaylistServerModel) {
-    return this.serverService.localeObservable
+    return this.serverService.getServerLocale()
                .pipe(map(translations => new VideoPlaylist(playlist, translations)))
   }
 
   extractVideoPlaylistElements (result: ResultList<ServerVideoPlaylistElement>) {
-    return this.serverService.localeObservable
+    return this.serverService.getServerLocale()
                .pipe(
                  map(translations => {
                    const elementsJson = result.data
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 2926b179b..faeea27d9 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -13,7 +13,7 @@ import { Notifier, ServerService } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
-import { ResultList } from '@shared/models'
+import { ResultList, ServerConfig } from '@shared/models'
 
 enum GroupDate {
   UNKNOWN = 0,
@@ -61,6 +61,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
 
   onDataSubject = new Subject<any[]>()
 
+  protected serverConfig: ServerConfig
+
   protected abstract notifier: Notifier
   protected abstract authService: AuthService
   protected abstract route: ActivatedRoute
@@ -85,6 +87,10 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   }
 
   ngOnInit () {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+      .subscribe(config => this.serverConfig = config)
+
     this.groupedDateLabels = {
       [GroupDate.UNKNOWN]: null,
       [GroupDate.TODAY]: this.i18n('Today'),
@@ -251,7 +257,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
     }
 
     let path = this.router.url
-    if (!path || path === '/') path = this.serverService.getConfig().instance.defaultClientRoute
+    if (!path || path === '/') path = this.serverConfig.instance.defaultClientRoute
 
     this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' })
   }
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index d5c7dfd9b..9fffc7ddb 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE
 import { User } from '../users'
 import { Video } from './video.model'
 import { ServerService } from '@app/core'
-import { VideoPrivacy, VideoState } from '../../../../../shared'
+import { ServerConfig, VideoPrivacy, VideoState } from '../../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
 import { ScreenService } from '@app/shared/misc/screen.service'
@@ -55,6 +55,7 @@ export class VideoMiniatureComponent implements OnInit {
     report: true
   }
   showActions = false
+  serverConfig: ServerConfig
 
   private ownerDisplayTypeChosen: 'account' | 'videoChannel'
 
@@ -66,10 +67,14 @@ export class VideoMiniatureComponent implements OnInit {
   ) { }
 
   get isVideoBlur () {
-    return this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
+    return this.video.isVideoNSFWForUser(this.user, this.serverConfig)
   }
 
   ngOnInit () {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+        .subscribe(config => this.serverConfig = config)
+
     this.setUpBy()
 
     // We rely on mouseenter to lazy load actions
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index b0fa55966..9adf46495 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -64,7 +64,7 @@ export class VideoService implements VideosProvider {
   }
 
   getVideo (options: { videoId: string }): Observable<VideoDetails> {
-    return this.serverService.localeObservable
+    return this.serverService.getServerLocale()
                .pipe(
                  switchMap(translations => {
                    return this.authHttp.get<VideoDetailsServerModel>(VideoService.BASE_VIDEO_URL + options.videoId)
@@ -315,7 +315,7 @@ export class VideoService implements VideosProvider {
   }
 
   extractVideos (result: ResultList<VideoServerModel>) {
-    return this.serverService.localeObservable
+    return this.serverService.getServerLocale()
                .pipe(
                  map(translations => {
                    const videosJson = result.data