Use HTML config when possible

client/src/app/+about/about-instance/about-instance.component.ts

@@ -2,10 +2,10 @@ import { ViewportScroller } from '@angular/common'
 import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { InstanceService } from '@app/shared/shared-instance'
-import { About, ServerConfig } from '@shared/models'
+import { About, HTMLServerConfig, ServerConfig } from '@shared/models'
 import { copyToClipboard } from '../../../root-helpers/utils'
 import { ResolverData } from './about-instance.resolver'
 
@@ -35,16 +35,17 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   languages: string[] = []
   categories: string[] = []
 
-  serverConfig: ServerConfig
-
   initialized = false
 
+  private serverConfig: HTMLServerConfig
+
   private lastScrollHash: string
 
   constructor (
     private viewportScroller: ViewportScroller,
     private route: ActivatedRoute,
     private notifier: Notifier,
+    private serverService: ServerService,
     private instanceService: InstanceService
   ) {}
 
@@ -61,9 +62,9 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   }
 
   async ngOnInit () {
-    const { about, languages, categories, serverConfig }: ResolverData = this.route.snapshot.data.instanceData
+    const { about, languages, categories }: ResolverData = this.route.snapshot.data.instanceData
 
-    this.serverConfig = serverConfig
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.languages = languages
     this.categories = categories

client/src/app/+about/about-instance/about-instance.resolver.ts

@@ -1,30 +1,27 @@
 import { forkJoin } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
-import { ServerService } from '@app/core'
+import { Resolve } from '@angular/router'
 import { InstanceService } from '@app/shared/shared-instance'
-import { About, ServerConfig } from '@shared/models/server'
+import { About } from '@shared/models/server'
 
-export type ResolverData = { about: About, languages: string[], categories: string[], serverConfig: ServerConfig }
+export type ResolverData = { about: About, languages: string[], categories: string[] }
 
 @Injectable()
 export class AboutInstanceResolver implements Resolve<any> {
 
   constructor (
-    private instanceService: InstanceService,
-    private serverService: ServerService
+    private instanceService: InstanceService
   ) {}
 
-  resolve (route: ActivatedRouteSnapshot) {
+  resolve () {
     return this.instanceService.getAbout()
                .pipe(
                  switchMap(about => {
                    return forkJoin([
                      this.instanceService.buildTranslatedLanguages(about),
-                     this.instanceService.buildTranslatedCategories(about),
-                     this.serverService.getConfig()
-                   ]).pipe(map(([ languages, categories, serverConfig ]) => ({ about, languages, categories, serverConfig })))
+                     this.instanceService.buildTranslatedCategories(about)
+                   ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories }) as ResolverData))
                  })
                )
   }

client/src/app/+about/about-instance/contact-admin-modal.component.ts

@@ -11,7 +11,7 @@ import { InstanceService } from '@app/shared/shared-instance'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
-import { ServerConfig } from '@shared/models'
+import { HTMLServerConfig } from '@shared/models'
 
 @Component({
   selector: 'my-contact-admin-modal',
@@ -24,7 +24,7 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
   error: string
 
   private openedModal: NgbModalRef
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -41,9 +41,7 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.buildForm({
       fromName: FROM_NAME_VALIDATOR,

client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts

@@ -1,5 +1,3 @@
-
-import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 

client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts

@@ -3,7 +3,7 @@ import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { MenuService } from '@app/core'
-import { ServerConfig } from '@shared/models'
+import { HTMLServerConfig } from '@shared/models'
 import { ConfigService } from '../shared/config.service'
 
 @Component({
@@ -15,7 +15,7 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
   @Input() form: FormGroup
   @Input() formErrors: any
 
-  @Input() serverConfig: ServerConfig
+  @Input() serverConfig: HTMLServerConfig
 
   signupAlertMessage: string
   defaultLandingPageOptions: SelectOptionsItem[] = []

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts

@@ -27,7 +27,7 @@ import {
 import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { CustomPageService } from '@app/shared/shared-main/custom-page'
-import { CustomConfig, CustomPage, ServerConfig } from '@shared/models'
+import { CustomConfig, CustomPage, HTMLServerConfig } from '@shared/models'
 import { EditConfigurationService } from './edit-configuration.service'
 
 type ComponentCustomConfig = CustomConfig & {
@@ -43,7 +43,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
   activeNav: string
 
   customConfig: ComponentCustomConfig
-  serverConfig: ServerConfig
+  serverConfig: HTMLServerConfig
 
   homepage: CustomPage
 
@@ -64,9 +64,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     const formGroupData: { [key in keyof ComponentCustomConfig ]: any } = {
       instance: {

client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts

@@ -2,7 +2,7 @@
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { FormGroup } from '@angular/forms'
-import { ServerConfig } from '@shared/models'
+import { HTMLServerConfig } from '@shared/models'
 import { ConfigService } from '../shared/config.service'
 import { EditConfigurationService, ResolutionOption } from './edit-configuration.service'
 
@@ -14,7 +14,7 @@ import { EditConfigurationService, ResolutionOption } from './edit-configuration
 export class EditLiveConfigurationComponent implements OnInit, OnChanges {
   @Input() form: FormGroup
   @Input() formErrors: any
-  @Input() serverConfig: ServerConfig
+  @Input() serverConfig: HTMLServerConfig
 
   transcodingThreadOptions: SelectOptionsItem[] = []
   transcodingProfiles: SelectOptionsItem[] = []

client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts

@@ -2,7 +2,7 @@
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { FormGroup } from '@angular/forms'
-import { ServerConfig } from '@shared/models'
+import { HTMLServerConfig } from '@shared/models'
 import { ConfigService } from '../shared/config.service'
 import { EditConfigurationService, ResolutionOption } from './edit-configuration.service'
 
@@ -14,7 +14,7 @@ import { EditConfigurationService, ResolutionOption } from './edit-configuration
 export class EditVODTranscodingComponent implements OnInit, OnChanges {
   @Input() form: FormGroup
   @Input() formErrors: any
-  @Input() serverConfig: ServerConfig
+  @Input() serverConfig: HTMLServerConfig
 
   transcodingThreadOptions: SelectOptionsItem[] = []
   transcodingProfiles: SelectOptionsItem[] = []

client/src/app/+admin/moderation/moderation.component.ts

@@ -13,7 +13,8 @@ export class ModerationComponent implements OnInit {
   ) { }
 
   ngOnInit (): void {
-    this.serverService.getConfig()
-      .subscribe(config => this.autoBlockVideosEnabled = config.autoBlacklist.videos.ofUsers.enabled)
+    const serverConfig = this.serverService.getHTMLConfig()
+
+    this.autoBlockVideosEnabled = serverConfig.autoBlacklist.videos.ofUsers.enabled
   }
 }

client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts

@@ -107,13 +107,12 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    this.serverService.getConfig()
-        .subscribe(config => {
-          // don't filter if auto-blacklist is not enabled as this will be the only list
-          if (config.autoBlacklist.videos.ofUsers.enabled) {
-            this.blocklistTypeFilter = VideoBlacklistType.MANUAL
-          }
-        })
+    const serverConfig = this.serverService.getHTMLConfig()
+
+    // Don't filter if auto-blacklist is not enabled as this will be the only list
+    if (serverConfig.autoBlacklist.videos.ofUsers.enabled) {
+      this.blocklistTypeFilter = VideoBlacklistType.MANUAL
+    }
 
     this.initialize()
   }

client/src/app/+admin/users/user-edit/user-edit.ts

@@ -3,7 +3,7 @@ import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { FormReactive } from '@app/shared/shared-forms'
 import { USER_ROLE_LABELS } from '@shared/core-utils/users'
-import { ServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models'
+import { HTMLServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models'
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 
 @Directive()
@@ -16,7 +16,7 @@ export abstract class UserEdit extends FormReactive implements OnInit {
 
   roles: { value: string, label: string }[] = []
 
-  protected serverConfig: ServerConfig
+  protected serverConfig: HTMLServerConfig
 
   protected abstract serverService: ServerService
   protected abstract configService: ConfigService
@@ -26,9 +26,7 @@ export abstract class UserEdit extends FormReactive implements OnInit {
   abstract getFormButtonTitle (): string
 
   ngOnInit (): void {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.buildRoles()
   }

client/src/app/+admin/users/user-list/user-list.component.ts

@@ -5,7 +5,7 @@ import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, Serve
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction } from '@app/shared/shared-main'
 import { UserBanModalComponent } from '@app/shared/shared-moderation'
-import { ServerConfig, User, UserRole } from '@shared/models'
+import { User, UserRole } from '@shared/models'
 
 type UserForList = User & {
   rawVideoQuota: number
@@ -41,8 +41,9 @@ export class UserListComponent extends RestTable implements OnInit {
     }
   ]
 
+  requiresEmailVerification = false
+
   private _selectedColumns: string[]
-  private serverConfig: ServerConfig
 
   constructor (
     protected route: ActivatedRoute,
@@ -60,10 +61,6 @@ export class UserListComponent extends RestTable implements OnInit {
     return this.auth.getUser()
   }
 
-  get requiresEmailVerification () {
-    return this.serverConfig.signup.requiresEmailVerification
-  }
-
   get selectedColumns () {
     return this._selectedColumns
   }
@@ -73,9 +70,8 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+        .subscribe(config => this.requiresEmailVerification = config.signup.requiresEmailVerification)
 
     this.initialize()
 

client/src/app/+admin/users/users.routes.ts

@@ -1,5 +1,5 @@
 import { Routes } from '@angular/router'
-import { ServerConfigResolver, UserRightGuard } from '@app/core'
+import { UserRightGuard } from '@app/core'
 import { UserRight } from '@shared/models'
 import { UserCreateComponent, UserUpdateComponent } from './user-edit'
 import { UserListComponent } from './user-list'
@@ -35,9 +35,6 @@ export const UsersRoutes: Routes = [
           meta: {
             title: $localize`Create a user`
           }
-        },
-        resolve: {
-          serverConfig: ServerConfigResolver
         }
       },
       {

client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts

@@ -60,10 +60,8 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.serverService.getConfig()
-        .subscribe(config => {
-          this.emailEnabled = config.email.enabled
-        })
+    const serverConfig = this.serverService.getHTMLConfig()
+    this.emailEnabled = serverConfig.email.enabled
 
     this.userInformationLoaded.subscribe(() => this.loadNotificationSettings())
   }

client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts

@@ -11,7 +11,7 @@ import {
 } from '@app/shared/form-validators/video-channel-validators'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
-import { ServerConfig, VideoChannelUpdate } from '@shared/models'
+import { HTMLServerConfig, VideoChannelUpdate } from '@shared/models'
 import { MyVideoChannelEdit } from './my-video-channel-edit'
 
 @Component({
@@ -25,7 +25,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
 
   private paramsSub: Subscription
   private oldSupportField: string
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -40,9 +40,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.buildForm({
       'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,

client/src/app/+my-library/my-library.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { AuthService, AuthUser, ScreenService, ServerService } from '@app/core'
-import { ServerConfig } from '@shared/models'
+import { HTMLServerConfig } from '@shared/models'
 import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
@@ -11,7 +11,8 @@ export class MyLibraryComponent implements OnInit {
   menuEntries: TopMenuDropdownParam[] = []
   user: AuthUser
 
-  private serverConfig: ServerConfig
+
+  private serverConfig: HTMLServerConfig
 
   constructor (
     private serverService: ServerService,
@@ -24,9 +25,7 @@ export class MyLibraryComponent implements OnInit {
   }
 
   ngOnInit (): void {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.user = this.authService.getUser()
 

client/src/app/+search/search-filters.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { ServerService } from '@app/core'
 import { AdvancedSearch } from '@app/shared/shared-search'
-import { ServerConfig, VideoConstant } from '@shared/models'
+import { HTMLServerConfig, VideoConstant } from '@shared/models'
 
 type FormOption = { id: string, label: string }
 
@@ -30,7 +30,7 @@ export class SearchFiltersComponent implements OnInit {
   originallyPublishedStartYear: string
   originallyPublishedEndYear: string
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     private serverService: ServerService
@@ -97,9 +97,8 @@ export class SearchFiltersComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
+
 
     this.serverService.getVideoCategories().subscribe(categories => this.videoCategories = categories)
     this.serverService.getVideoLicences().subscribe(licences => this.videoLicences = licences)

client/src/app/+search/search.component.ts

@@ -6,7 +6,7 @@ import { immutableAssign } from '@app/helpers'
 import { Video, VideoChannel } from '@app/shared/shared-main'
 import { AdvancedSearch, SearchService } from '@app/shared/shared-search'
 import { MiniatureDisplayOptions, VideoLinkType } from '@app/shared/shared-video-miniature'
-import { SearchTargetType, ServerConfig } from '@shared/models'
+import { HTMLServerConfig, SearchTargetType } from '@shared/models'
 
 @Component({
   selector: 'my-search',
@@ -37,7 +37,6 @@ export class SearchComponent implements OnInit, OnDestroy {
   }
 
   errorMessage: string
-  serverConfig: ServerConfig
 
   userMiniature: User
 
@@ -49,6 +48,8 @@ export class SearchComponent implements OnInit, OnDestroy {
 
   private lastSearchTarget: SearchTargetType
 
+  private serverConfig: HTMLServerConfig
+
   constructor (
     private route: ActivatedRoute,
     private router: Router,
@@ -62,8 +63,7 @@ export class SearchComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit () {
-    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.subActivatedRoute = this.route.queryParams.subscribe(
       async queryParams => {
@@ -81,7 +81,7 @@ export class SearchComponent implements OnInit, OnDestroy {
 
         this.advancedSearch = new AdvancedSearch(queryParams)
         if (!this.advancedSearch.searchTarget) {
-          this.advancedSearch.searchTarget = await this.serverService.getDefaultSearchTarget()
+          this.advancedSearch.searchTarget = this.getDefaultSearchTarget()
         }
 
         // Don't hide filters if we have some of them AND the user just came on the webpage
@@ -286,4 +286,14 @@ export class SearchComponent implements OnInit, OnDestroy {
       'filter:api.search.video-channels.list.result'
     )
   }
+
+  private getDefaultSearchTarget(): SearchTargetType {
+    const searchIndexConfig = this.serverConfig.search.searchIndex
+
+    if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) {
+      return 'search-index'
+    }
+
+    return 'local'
+  }
 }

client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier, RedirectService, ServerService, UserService } from '@app/core'
 import { USER_EMAIL_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { ServerConfig } from '@shared/models'
 
 @Component({
   selector: 'my-verify-account-ask-send-email',
@@ -11,7 +10,7 @@ import { ServerConfig } from '@shared/models'
 })
 
 export class VerifyAccountAskSendEmailComponent extends FormReactive implements OnInit {
-  private serverConfig: ServerConfig
+  requiresEmailVerification = false
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -19,18 +18,13 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements
     private serverService: ServerService,
     private notifier: Notifier,
     private redirectService: RedirectService
-    ) {
+  ) {
     super()
   }
 
-  get requiresEmailVerification () {
-    return this.serverConfig.signup.requiresEmailVerification
-  }
-
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+        .subscribe(config => this.requiresEmailVerification = config.signup.requiresEmailVerification)
 
     this.buildForm({
       'verify-email-email': USER_EMAIL_VALIDATOR

client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts

@@ -4,7 +4,7 @@ import { VIDEO_CAPTION_FILE_VALIDATOR, VIDEO_CAPTION_LANGUAGE_VALIDATOR } from '
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionEdit } from '@app/shared/shared-main'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { ServerConfig, VideoConstant } from '@shared/models'
+import { HTMLServerConfig, VideoConstant } from '@shared/models'
 
 @Component({
   selector: 'my-video-caption-add-modal',
@@ -14,7 +14,7 @@ import { ServerConfig, VideoConstant } from '@shared/models'
 
 export class VideoCaptionAddModalComponent extends FormReactive implements OnInit {
   @Input() existingCaptions: string[]
-  @Input() serverConfig: ServerConfig
+  @Input() serverConfig: HTMLServerConfig
 
   @Output() captionAdded = new EventEmitter<VideoCaptionEdit>()
 

client/src/app/+videos/+video-edit/shared/video-edit.component.ts

@@ -22,10 +22,10 @@ import { FormReactiveValidationMessages, FormValidatorService } from '@app/share
 import { InstanceService } from '@app/shared/shared-instance'
 import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
 import {
+  HTMLServerConfig,
   LiveVideo,
   RegisterClientFormFieldOptions,
   RegisterClientVideoFieldOptions,
-  ServerConfig,
   VideoConstant,
   VideoDetails,
   VideoPrivacy
@@ -84,7 +84,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   calendarTimezone: string
   calendarDateFormat: string
 
-  serverConfig: ServerConfig
+  serverConfig: HTMLServerConfig
 
   pluginFields: PluginField[] = []
 
@@ -194,9 +194,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
         }
       })
 
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.initialVideoCaptions = this.videoCaptions.map(c => c.language.id)
 

client/src/app/+videos/+video-edit/video-add-components/video-send.ts

@@ -6,7 +6,7 @@ import { listUserChannels } from '@app/helpers'
 import { FormReactive } from '@app/shared/shared-forms'
 import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
-import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
+import { HTMLServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
 
 @Directive()
 // tslint:disable-next-line: directive-class-suffix
@@ -28,7 +28,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
   protected serverService: ServerService
   protected videoService: VideoService
   protected videoCaptionService: VideoCaptionService
-  protected serverConfig: ServerConfig
+  protected serverConfig: HTMLServerConfig
 
   abstract canDeactivate (): CanComponentDeactivateResult
 
@@ -41,9 +41,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
         this.firstStepChannelId = this.userVideoChannels[0].id
       })
 
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.serverService.getVideoPrivacies()
         .subscribe(

client/src/app/+videos/+video-edit/video-add.component.ts

@@ -1,7 +1,7 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, AuthUser, CanComponentDeactivate, ServerService } from '@app/core'
-import { ServerConfig } from '@shared/models'
+import { HTMLServerConfig } from '@shared/models'
 import { VideoEditType } from './shared/video-edit.type'
 import { VideoGoLiveComponent } from './video-add-components/video-go-live.component'
 import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
@@ -26,7 +26,7 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
 
   activeNav: string
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     private auth: AuthService,
@@ -42,10 +42,7 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
   ngOnInit () {
     this.user = this.auth.getUser()
 
-    this.serverConfig = this.serverService.getTmpConfig()
-
-    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.user = this.auth.getUser()
 

client/src/app/+videos/+video-watch/recommendations/recent-videos-recommendation.service.ts

@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core'
 import { ServerService, UserService } from '@app/core'
 import { Video, VideoService } from '@app/shared/shared-main'
 import { AdvancedSearch, SearchService } from '@app/shared/shared-search'
-import { ServerConfig } from '@shared/models'
+import { HTMLServerConfig } from '@shared/models'
 import { RecommendationInfo } from './recommendation-info.model'
 import { RecommendationService } from './recommendations.service'
 
@@ -15,7 +15,7 @@ import { RecommendationService } from './recommendations.service'
 export class RecentVideosRecommendationService implements RecommendationService {
   readonly pageSize = 5
 
-  private config: ServerConfig
+  private config: HTMLServerConfig
 
   constructor (
     private videos: VideoService,
@@ -23,13 +23,11 @@ export class RecentVideosRecommendationService implements RecommendationService
     private userService: UserService,
     private serverService: ServerService
   ) {
-    this.config = this.serverService.getTmpConfig()
-
-    this.serverService.getConfig()
-     .subscribe(config => this.config = config)
+    this.config = this.serverService.getHTMLConfig()
   }
 
   getRecommendations (recommendation: RecommendationInfo): Observable<Video[]> {
+
     return this.fetchPage(1, recommendation)
       .pipe(
         map(videos => {

client/src/app/+videos/+video-watch/video-watch.component.ts

@@ -28,7 +28,15 @@ import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/sha
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
-import { PeerTubeProblemDocument, ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
+import {
+  HTMLServerConfig,
+  PeerTubeProblemDocument,
+  ServerErrorCode,
+  UserVideoRateType,
+  VideoCaption,
+  VideoPrivacy,
+  VideoState
+} from '@shared/models'
 import {
   cleanupVideoWatch,
   getStoredP2PEnabled,
@@ -116,7 +124,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private configSub: Subscription
   private liveVideosSub: Subscription
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     private elementRef: ElementRef,
@@ -163,21 +171,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     PeertubePlayerManager.initState()
 
-    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverConfig = this.serverService.getHTMLConfig()
+    if (
+      isWebRTCDisabled() ||
+      this.serverConfig.tracker.enabled === false ||
+      getStoredP2PEnabled() === false ||
+      peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
+    ) {
+      this.hasAlreadyAcceptedPrivacyConcern = true
+    }
 
-    this.configSub = this.serverService.getConfig()
-        .subscribe(config => {
-          this.serverConfig = config
-
-          if (
-            isWebRTCDisabled() ||
-            this.serverConfig.tracker.enabled === false ||
-            getStoredP2PEnabled() === false ||
-            peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
-          ) {
-            this.hasAlreadyAcceptedPrivacyConcern = true
-          }
-        })
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
       const videoId = routeParams[ 'videoId' ]

client/src/app/+videos/video-list/trending/video-trending-header.component.ts

@@ -1,10 +1,10 @@
+import { Subscription } from 'rxjs'
 import { Component, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature'
-import { GlobalIconName } from '@app/shared/shared-icons'
-import { ServerService } from '@app/core/server/server.service'
-import { Subscription } from 'rxjs'
 import { AuthService, RedirectService } from '@app/core'
+import { ServerService } from '@app/core/server/server.service'
+import { GlobalIconName } from '@app/shared/shared-icons'
+import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature'
 
 interface VideoTrendingHeaderItem {
   label: string
@@ -67,21 +67,19 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple
   }
 
   ngOnInit () {
-    this.serverService.getConfig()
-        .subscribe(config => {
-          const algEnabled = config.trending.videos.algorithms.enabled
+    const serverConfig = this.serverService.getHTMLConfig()
+    const algEnabled = serverConfig.trending.videos.algorithms.enabled
 
-          this.buttons = this.buttons.map(b => {
-            b.hidden = !algEnabled.includes(b.value)
+    this.buttons = this.buttons.map(b => {
+      b.hidden = !algEnabled.includes(b.value)
 
-            // Best is adapted by the user history so
-            if (b.value === 'best' && !this.auth.isLoggedIn()) {
-              b.hidden = true
-            }
+      // Best is adapted by the user history so
+      if (b.value === 'best' && !this.auth.isLoggedIn()) {
+        b.hidden = true
+      }
 
-            return b
-          })
-        })
+      return b
+    })
 
     this.algorithmChangeSub = this.route.queryParams.subscribe(
       queryParams => {

client/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { concat } from 'rxjs'
-import { filter, first, map, pairwise } from 'rxjs/operators'
+import { filter, first, map, pairwise, switchMap } from 'rxjs/operators'
 import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common'
 import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
@@ -15,7 +15,7 @@ import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { getShortLocale, is18nPath } from '@shared/core-utils/i18n'
-import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models'
+import { BroadcastMessageLevel, HTMLServerConfig, ServerConfig, UserRole } from '@shared/models'
 import { MenuService } from './core/menu/menu.service'
 import { POP_STATE_MODAL_DISMISS } from './helpers'
 import { InstanceService } from './shared/shared-instance'
@@ -35,7 +35,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   customCSS: SafeHtml
   broadcastMessage: { message: string, dismissable: boolean, class: string } | null = null
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     @Inject(DOCUMENT) private document: Document,
@@ -73,9 +73,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   ngOnInit () {
     document.getElementById('incompatible-browser').className += ' browser-ok'
 
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.loadPlugins()
     this.themeService.initialize()
@@ -88,10 +86,21 @@ export class AppComponent implements OnInit, AfterViewInit {
     }
 
     this.initRouteEvents()
+
     this.injectJS()
     this.injectCSS()
     this.injectBroadcastMessage()
 
+    this.serverService.configReloaded
+      .subscribe(config => {
+        this.serverConfig = config
+
+        this.injectBroadcastMessage()
+        this.injectCSS()
+
+        // Don't reinject JS since it could conflict with existing one
+      })
+
     this.initHotkeys()
 
     this.location.onPopState(() => this.modalService.dismissAll(POP_STATE_MODAL_DISMISS))
@@ -208,69 +217,55 @@ export class AppComponent implements OnInit, AfterViewInit {
     ).subscribe(() => this.loadingBar.useRef().complete())
   }
 
-  private injectBroadcastMessage () {
-    concat(
-      this.serverService.getConfig().pipe(first()),
-      this.serverService.configReloaded
-    ).subscribe(async config => {
-      this.broadcastMessage = null
-      this.screenService.isBroadcastMessageDisplayed = false
+  private async injectBroadcastMessage () {
+    this.broadcastMessage = null
+    this.screenService.isBroadcastMessageDisplayed = false
 
-      const messageConfig = config.broadcastMessage
+    const messageConfig = this.serverConfig.broadcastMessage
 
-      if (messageConfig.enabled) {
-        // Already dismissed this message?
-        if (messageConfig.dismissable && localStorage.getItem(AppComponent.BROADCAST_MESSAGE_KEY) === messageConfig.message) {
-          return
-        }
-
-        const classes: { [id in BroadcastMessageLevel]: string } = {
-          info: 'alert-info',
-          warning: 'alert-warning',
-          error: 'alert-danger'
-        }
-
-        this.broadcastMessage = {
-          message: await this.markdownService.unsafeMarkdownToHTML(messageConfig.message, true),
-          dismissable: messageConfig.dismissable,
-          class: classes[messageConfig.level]
-        }
-
-        this.screenService.isBroadcastMessageDisplayed = true
+    if (messageConfig.enabled) {
+      // Already dismissed this message?
+      if (messageConfig.dismissable && localStorage.getItem(AppComponent.BROADCAST_MESSAGE_KEY) === messageConfig.message) {
+        return
       }
-    })
+
+      const classes: { [id in BroadcastMessageLevel]: string } = {
+        info: 'alert-info',
+        warning: 'alert-warning',
+        error: 'alert-danger'
+      }
+
+      this.broadcastMessage = {
+        message: await this.markdownService.unsafeMarkdownToHTML(messageConfig.message, true),
+        dismissable: messageConfig.dismissable,
+        class: classes[messageConfig.level]
+      }
+
+      this.screenService.isBroadcastMessageDisplayed = true
+    }
   }
 
   private injectJS () {
     // Inject JS
-    this.serverService.getConfig()
-        .subscribe(config => {
-          if (config.instance.customizations.javascript) {
-            try {
-              // tslint:disable:no-eval
-              eval(config.instance.customizations.javascript)
-            } catch (err) {
-              console.error('Cannot eval custom JavaScript.', err)
-            }
-          }
-        })
+    if (this.serverConfig.instance.customizations.javascript) {
+      try {
+        // tslint:disable:no-eval
+        eval(this.serverConfig.instance.customizations.javascript)
+      } catch (err) {
+        console.error('Cannot eval custom JavaScript.', err)
+      }
+    }
   }
 
   private injectCSS () {
-    // Inject CSS if modified (admin config settings)
-    concat(
-      this.serverService.getConfig().pipe(first()),
-      this.serverService.configReloaded
-    ).subscribe(config => {
-      const headStyle = document.querySelector('style.custom-css-style')
-      if (headStyle) headStyle.parentNode.removeChild(headStyle)
+    const headStyle = document.querySelector('style.custom-css-style')
+    if (headStyle) headStyle.parentNode.removeChild(headStyle)
 
-      // We test customCSS if the admin removed the css
-      if (this.customCSS || config.instance.customizations.css) {
-        const styleTag = '<style>' + config.instance.customizations.css + '</style>'
-        this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
-      }
-    })
+    // We test customCSS if the admin removed the css
+    if (this.customCSS || this.serverConfig.instance.customizations.css) {
+      const styleTag = '<style>' + this.serverConfig.instance.customizations.css + '</style>'
+      this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
+    }
   }
 
   private async loadPlugins () {
@@ -283,14 +278,18 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.authService.userInformationLoaded
         .pipe(
           map(() => this.authService.getUser()),
-          filter(user => user.role === UserRole.ADMINISTRATOR)
-        ).subscribe(user => setTimeout(() => this._openAdminModalsIfNeeded(user))) // setTimeout because of ngIf in template
+          filter(user => user.role === UserRole.ADMINISTRATOR),
+          switchMap(user => {
+            return this.serverService.getConfig()
+              .pipe(map(serverConfig => ({ serverConfig, user })))
+          })
+        ).subscribe(({ serverConfig, user }) => this._openAdminModalsIfNeeded(serverConfig, user))
   }
 
-  private async _openAdminModalsIfNeeded (user: User) {
+  private async _openAdminModalsIfNeeded (serverConfig: ServerConfig, user: User) {
     if (user.noWelcomeModal !== true) return this.welcomeModal.show()
 
-    if (user.noInstanceConfigWarningModal === true || !this.serverConfig.signup.allowed) return
+    if (user.noInstanceConfigWarningModal === true || !serverConfig.signup.allowed) return
 
     this.instanceService.getAbout()
       .subscribe(about => {

client/src/app/app.module.ts

@@ -27,7 +27,7 @@ import { SharedUserInterfaceSettingsModule } from './shared/shared-user-settings
 registerLocaleData(localeOc, 'oc')
 
 export function loadConfigFactory (server: ServerService) {
-  return () => server.loadConfig()
+  return () => server.loadHTMLConfig()
 }
 
 @NgModule({

client/src/app/core/menu/menu.service.ts

@@ -3,7 +3,7 @@ import { debounceTime } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 import { sortObjectComparator } from '@shared/core-utils/miscs/miscs'
-import { ServerConfig } from '@shared/models/server'
+import { HTMLServerConfig } from '@shared/models/server'
 import { ScreenService } from '../wrappers'
 
 export type MenuLink = {
@@ -59,7 +59,7 @@ export class MenuService {
     this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
   }
 
-  buildCommonLinks (config: ServerConfig) {
+  buildCommonLinks (config: HTMLServerConfig) {
     let entries: MenuLink[] = [
       {
         icon: 'globe' as 'globe',

client/src/app/core/routing/meta.service.ts

@@ -16,9 +16,7 @@ export class MetaService {
     private meta: Meta,
     private server: ServerService
   ) {
-    this.config = this.server.getTmpConfig()
-    this.server.getConfig()
-      .subscribe(config => this.config = config)
+    this.config = this.server.getHTMLConfig()
   }
 
   setTitle (subTitle?: string) {

client/src/app/core/routing/redirect.service.ts

@@ -20,24 +20,14 @@ export class RedirectService {
     private serverService: ServerService
   ) {
     // The config is first loaded from the cache so try to get the default route
-    const tmpConfig = this.serverService.getTmpConfig()
-    if (tmpConfig?.instance?.defaultClientRoute) {
-      this.defaultRoute = tmpConfig.instance.defaultClientRoute
+    const config = this.serverService.getHTMLConfig()
+    if (config?.instance?.defaultClientRoute) {
+      this.defaultRoute = config.instance.defaultClientRoute
     }
-    if (tmpConfig?.trending?.videos?.algorithms?.default) {
-      this.defaultTrendingAlgorithm = tmpConfig.trending.videos.algorithms.default
+    if (config?.trending?.videos?.algorithms?.default) {
+      this.defaultTrendingAlgorithm = config.trending.videos.algorithms.default
     }
 
-    // Load default route
-    this.serverService.getConfig()
-        .subscribe(config => {
-          const defaultRouteConfig = config.instance.defaultClientRoute
-          const defaultTrendingConfig = config.trending.videos.algorithms.default
-
-          if (defaultRouteConfig) this.defaultRoute = defaultRouteConfig
-          if (defaultTrendingConfig) this.defaultTrendingAlgorithm = defaultTrendingConfig
-        })
-
     // Track previous url
     this.currentUrl = this.router.url
     router.events.subscribe(event => {
@@ -52,6 +42,7 @@ export class RedirectService {
     return this.defaultRoute
   }
 
+
   getDefaultTrendingAlgorithm () {
     return this.defaultTrendingAlgorithm
   }

client/src/app/core/server/server.service.ts

@@ -37,9 +37,9 @@ export class ServerService {
   ) {
   }
 
-  loadConfig () {
+  loadHTMLConfig () {
     try {
-      return this.loadConfigLocally()
+      return this.loadHTMLConfigLocally()
     } catch (err) {
       // Expected in dev mode since we can't inject the config in the HTML
       if (environment.production !== false) {
@@ -76,6 +76,7 @@ export class ServerService {
                                   .pipe(
                                     tap(config => {
                                       this.config = config
+                                      this.htmlConfig = config
                                       this.configLoaded = true
                                     }),
                                     tap(config => {
@@ -91,8 +92,8 @@ export class ServerService {
     return this.configObservable
   }
 
-  getTmpConfig () {
-    return this.config
+  getHTMLConfig () {
+    return this.htmlConfig
   }
 
   getVideoCategories () {
@@ -156,20 +157,6 @@ export class ServerService {
     return this.http.get<ServerStats>(ServerService.BASE_STATS_URL)
   }
 
-  getDefaultSearchTarget (): Promise<SearchTargetType> {
-    return this.getConfig().pipe(
-      map(config => {
-        const searchIndexConfig = config.search.searchIndex
-
-        if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) {
-          return 'search-index'
-        }
-
-        return 'local'
-      })
-    ).toPromise()
-  }
-
   private loadAttributeEnum <T extends string | number> (
     baseUrl: string,
     attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
@@ -204,12 +191,12 @@ export class ServerService {
                )
   }
 
-  private loadConfigLocally () {
+  private loadHTMLConfigLocally () {
     const configString = window['PeerTubeServerConfig']
     if (!configString) {
       throw new Error('Could not find PeerTubeServerConfig in HTML')
     }
 
-    this.config = JSON.parse(configString)
+    this.htmlConfig = JSON.parse(configString)
   }
 }

client/src/app/core/theme/theme.service.ts

@@ -1,7 +1,7 @@
 import { first } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { UserLocalStorageKeys } from '@root-helpers/users'
-import { ServerConfig, ServerConfigTheme } from '@shared/models'
+import { HTMLServerConfig, ServerConfigTheme } from '@shared/models'
 import { environment } from '../../../environments/environment'
 import { AuthService } from '../auth'
 import { PluginService } from '../plugins/plugin.service'
@@ -18,7 +18,7 @@ export class ThemeService {
   private themeFromLocalStorage: ServerConfigTheme
   private themeDOMLinksFromLocalStorage: HTMLLinkElement[] = []
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     private auth: AuthService,
@@ -32,18 +32,13 @@ export class ThemeService {
     // Try to load from local storage first, so we don't have to wait network requests
     this.loadAndSetFromLocalStorage()
 
-    this.serverConfig = this.server.getTmpConfig()
-    this.server.getConfig()
-        .subscribe(config => {
-          this.serverConfig = config
+    this.serverConfig = this.server.getHTMLConfig()
+    const themes = this.serverConfig.theme.registered
 
-          const themes = this.serverConfig.theme.registered
+    this.removeThemeFromLocalStorageIfNeeded(themes)
+    this.injectThemes(themes)
 
-          this.removeThemeFromLocalStorageIfNeeded(themes)
-          this.injectThemes(themes)
-
-          this.listenUserTheme()
-        })
+    this.listenUserTheme()
   }
 
   private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) {

client/src/app/header/search-typeahead.component.ts

@@ -1,10 +1,10 @@
 import { of } from 'rxjs'
 import { first, tap } from 'rxjs/operators'
 import { ListKeyManager } from '@angular/cdk/a11y'
-import { AfterViewChecked, AfterViewInit, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core'
+import { AfterViewChecked, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core'
 import { ActivatedRoute, Params, Router } from '@angular/router'
 import { AuthService, ServerService } from '@app/core'
-import { SearchTargetType, ServerConfig } from '@shared/models'
+import { HTMLServerConfig, SearchTargetType } from '@shared/models'
 import { SuggestionComponent, SuggestionPayload, SuggestionPayloadType } from './suggestion.component'
 
 @Component({
@@ -12,7 +12,7 @@ import { SuggestionComponent, SuggestionPayload, SuggestionPayloadType } from '.
   templateUrl: './search-typeahead.component.html',
   styleUrls: [ './search-typeahead.component.scss' ]
 })
-export class SearchTypeaheadComponent implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy {
+export class SearchTypeaheadComponent implements OnInit, AfterViewChecked, OnDestroy {
   @ViewChildren(SuggestionComponent) suggestionItems: QueryList<SuggestionComponent>
 
   hasChannel = false
@@ -20,7 +20,7 @@ export class SearchTypeaheadComponent implements OnInit, AfterViewInit, AfterVie
   areSuggestionsOpened = true
 
   search = ''
-  serverConfig: ServerConfig
+  serverConfig: HTMLServerConfig
 
   inThisChannelText: string
 
@@ -42,20 +42,14 @@ export class SearchTypeaheadComponent implements OnInit, AfterViewInit, AfterVie
     this.route.queryParams
       .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null))
       .subscribe(params => this.search = params.search)
-  }
 
-  ngAfterViewInit () {
-    this.serverService.getConfig()
+    this.serverConfig = this.serverService.getHTMLConfig()
+    this.computeTypeahead()
+
+    this.serverService.configReloaded
       .subscribe(config => {
         this.serverConfig = config
-
         this.computeTypeahead()
-
-        this.serverService.configReloaded
-          .subscribe(config => {
-            this.serverConfig = config
-            this.computeTypeahead()
-          })
       })
   }
 

client/src/app/menu/menu.component.ts

@@ -20,7 +20,7 @@ import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
 import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
+import { HTMLServerConfig, ServerConfig, UserRight, VideoConstant } from '@shared/models'
 
 const logger = debug('peertube:menu:MenuComponent')
 
@@ -48,7 +48,10 @@ export class MenuComponent implements OnInit {
   commonMenuLinks: MenuLink[] = []
 
   private languages: VideoConstant<string>[] = []
+
+  private htmlServerConfig: HTMLServerConfig
   private serverConfig: ServerConfig
+
   private routesPerRight: { [role in UserRight]?: string } = {
     [UserRight.MANAGE_USERS]: '/admin/users',
     [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends',
@@ -86,16 +89,12 @@ export class MenuComponent implements OnInit {
   }
 
   get instanceName () {
-    return this.serverConfig.instance.name
+    return this.htmlServerConfig.instance.name
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-      .subscribe(config => {
-        this.serverConfig = config
-        this.buildMenuLinks()
-      })
+    this.htmlServerConfig = this.serverService.getHTMLConfig()
+    this.buildMenuLinks()
 
     this.isLoggedIn = this.authService.isLoggedIn()
     if (this.isLoggedIn === true) {
@@ -148,6 +147,8 @@ export class MenuComponent implements OnInit {
   }
 
   isRegistrationAllowed () {
+    if (!this.serverConfig) return false
+
     return this.serverConfig.signup.allowed &&
       this.serverConfig.signup.allowedForCurrentIP
   }
@@ -257,7 +258,7 @@ export class MenuComponent implements OnInit {
   }
 
   private buildMenuLinks () {
-    this.commonMenuLinks = this.menuService.buildCommonLinks(this.serverConfig)
+    this.commonMenuLinks = this.menuService.buildCommonLinks(this.htmlServerConfig)
   }
 
   private buildUserLanguages () {

client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts

@@ -39,14 +39,13 @@ export class ActorAvatarEditComponent implements OnInit {
   ) { }
 
   ngOnInit (): void {
-    this.serverService.getConfig()
-        .subscribe(config => {
-          this.maxAvatarSize = config.avatar.file.size.max
-          this.avatarExtensions = config.avatar.file.extensions.join(', ')
+    const config = this.serverService.getHTMLConfig()
 
-          this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
-                              `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
-        })
+    this.maxAvatarSize = config.avatar.file.size.max
+    this.avatarExtensions = config.avatar.file.extensions.join(', ')
+
+    this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
+                        `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
   }
 
   onAvatarChange (input: HTMLInputElement) {

client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { Notifier, ServerService } from '@app/core'
 import { VideoChannel } from '@app/shared/shared-main'
@@ -36,16 +36,15 @@ export class ActorBannerEditComponent implements OnInit {
   ) { }
 
   ngOnInit (): void {
-    this.serverService.getConfig()
-        .subscribe(config => {
-          this.maxBannerSize = config.banner.file.size.max
-          this.bannerExtensions = config.banner.file.extensions.join(', ')
+    const config = this.serverService.getHTMLConfig()
+    this.maxBannerSize = config.banner.file.size.max
+    this.bannerExtensions = config.banner.file.extensions.join(', ')
 
-          // tslint:disable:max-line-length
-          this.bannerFormat = $localize`ratio 6/1, recommended size: 1920x317, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
-        })
+    // tslint:disable:max-line-length
+    this.bannerFormat = $localize`ratio 6/1, recommended size: 1920x317, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
   }
 
+
   onBannerChange (input: HTMLInputElement) {
     this.bannerfileInput = new ElementRef(input)
 

client/src/app/shared/shared-forms/preview-upload.component.ts

@@ -2,7 +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'
+import { HTMLServerConfig } from '@shared/models'
 import { BytesPipe } from '../shared-main'
 
 @Component({
@@ -27,7 +27,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
   allowedExtensionsMessage = ''
   maxSizeText: string
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
   private bytesPipe: BytesPipe
   private file: Blob
 
@@ -52,9 +52,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
   }

client/src/app/shared/shared-instance/instance-features-table.component.html

@@ -1,4 +1,4 @@
-<div class="feature-table">
+<div *ngIf="serverConfig" class="feature-table">
 
   <table class="table" *ngIf="serverConfig">
     <caption i18n>Features found on this instance</caption>

client/src/app/shared/shared-instance/instance-features-table.component.ts

@@ -40,7 +40,6 @@ export class InstanceFeaturesTableComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()
         .subscribe(config => {
           this.serverConfig = config

client/src/app/shared/shared-main/video/video.model.ts

@@ -1,13 +1,11 @@
 import { AuthUser } from '@app/core'
 import { User } from '@app/core/users/user.model'
 import { durationToString, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
-import { Account } from '@app/shared/shared-main/account/account.model'
 import { Actor } from '@app/shared/shared-main/account/actor.model'
-import { VideoChannel } from '@app/shared/shared-main/video-channel/video-channel.model'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
 import {
   ActorImage,
-  ServerConfig,
+  HTMLServerConfig,
   UserRight,
   Video as VideoServerModel,
   VideoConstant,
@@ -163,7 +161,7 @@ export class Video implements VideoServerModel {
     this.pluginData = hash.pluginData
   }
 
-  isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
+  isVideoNSFWForUser (user: User, serverConfig: HTMLServerConfig) {
     // Video is not NSFW, skip
     if (this.nsfw === false) return false
 

client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
 import { AuthService, ConfirmService, Notifier, ServerService, UserService } from '@app/core'
 import { Account, DropdownAction } from '@app/shared/shared-main'
-import { BulkRemoveCommentsOfBody, ServerConfig, User, UserRight } from '@shared/models'
+import { BulkRemoveCommentsOfBody, User, UserRight } from '@shared/models'
 import { BlocklistService } from './blocklist.service'
 import { BulkService } from './bulk.service'
 import { UserBanModalComponent } from './user-ban-modal.component'
@@ -28,7 +28,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
 
   userActions: DropdownAction<{ user: User, account: Account }>[][] = []
 
-  private serverConfig: ServerConfig
+  requiresEmailVerification = false
 
   constructor (
     private authService: AuthService,
@@ -40,14 +40,9 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
     private bulkService: BulkService
   ) { }
 
-  get requiresEmailVerification () {
-    return this.serverConfig.signup.requiresEmailVerification
-  }
-
-  ngOnInit (): void {
-    this.serverConfig = this.serverService.getTmpConfig()
+  ngOnInit () {
     this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+      .subscribe(config => this.requiresEmailVerification = config.signup.requiresEmailVerification)
   }
 
   ngOnChanges () {

client/src/app/shared/shared-user-settings/user-interface-settings.component.ts

@@ -2,7 +2,7 @@ import { Subject, Subscription } from 'rxjs'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { AuthService, Notifier, ServerService, UserService } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { ServerConfig, User, UserUpdateMe } from '@shared/models'
+import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models'
 
 @Component({
   selector: 'my-user-interface-settings',
@@ -17,7 +17,7 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
 
   formValuesWatcher: Subscription
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -35,9 +35,7 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.buildForm({
       theme: null

client/src/app/shared/shared-user-settings/user-video-settings.component.ts

@@ -48,9 +48,8 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
 
     forkJoin([
       this.serverService.getVideoLanguages(),
-      this.serverService.getConfig(),
       this.userInformationLoaded.pipe(first())
-    ]).subscribe(([ languages, config ]) => {
+    ]).subscribe(([ languages ]) => {
       const group = this.allLanguagesGroup
 
       this.languageItems = [ { label: $localize`Unknown language`, id: '_unknown', group } ]
@@ -61,7 +60,8 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
         ? this.user.videoLanguages.map(l => ({ id: l }))
         : [ { group } ]
 
-      this.defaultNSFWPolicy = config.instance.defaultNSFWPolicy
+      const serverConfig = this.serverService.getHTMLConfig()
+      this.defaultNSFWPolicy = serverConfig.instance.defaultNSFWPolicy
 
       this.form.patchValue({
         nsfwPolicy: this.user.nsfwPolicy || this.defaultNSFWPolicy,

client/src/app/shared/shared-video-miniature/abstract-video-list.ts

@@ -25,7 +25,7 @@ import {
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { GlobalIconName } from '@app/shared/shared-icons'
 import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils/miscs/date'
-import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models'
+import { HTMLServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models'
 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
 import { Syndication, Video } from '../shared-main'
 import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component'
@@ -100,7 +100,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
 
   protected onUserLoadedSubject = new ReplaySubject<void>(1)
 
-  protected serverConfig: ServerConfig
+  protected serverConfig: HTMLServerConfig
 
   protected abstract notifier: Notifier
   protected abstract authService: AuthService
@@ -126,9 +126,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
   abstract generateSyndicationList (): void
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+    this.serverConfig = this.serverService.getHTMLConfig()
 
     this.groupedDateLabels = {
       [GroupDate.UNKNOWN]: null,

client/src/app/shared/shared-video-miniature/video-miniature.component.ts

@@ -11,7 +11,7 @@ import {
   Output
 } from '@angular/core'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
-import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
+import { HTMLServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
 import { ActorAvatarSize } from '../shared-actor-image/actor-avatar.component'
 import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
@@ -74,7 +74,7 @@ export class VideoMiniatureComponent implements OnInit {
     mute: true
   }
   showActions = false
-  serverConfig: ServerConfig
+  serverConfig: HTMLServerConfig
 
   addToWatchLaterText: string
   addedToWatchLaterText: string
@@ -106,12 +106,8 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => {
-          this.serverConfig = config
-          this.buildVideoLink()
-        })
+    this.serverConfig = this.serverService.getHTMLConfig()
+    this.buildVideoLink()
 
     this.setUpBy()
 

client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, In
 import { AuthService, Notifier, ServerService } from '@app/core'
 import { Video } from '@app/shared/shared-main'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-import { ServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate } from '@shared/models'
+import { HTMLServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate } from '@shared/models'
 import { secondsToTime } from '../../../assets/player/utils'
 import { VideoPlaylistElement } from './video-playlist-element.model'
 import { VideoPlaylist } from './video-playlist.model'
@@ -37,7 +37,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
     stopTimestamp: number
   } = {} as any
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     private authService: AuthService,
@@ -48,12 +48,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
   ) {}
 
   ngOnInit (): void {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => {
-          this.serverConfig = config
-          this.cdr.detectChanges()
-        })
+    this.serverConfig = this.serverService.getHTMLConfig()
   }
 
   isUnavailable (e: VideoPlaylistElement) {