Lazy load client script scopes

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index bde97c68b6a03573041d4a75542dad1aa57c2bf2..14fd27784e96725e45e59d24ced1686f1110fd7a 100644 (file)
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -206,9 +206,7 @@ export class AppComponent implements OnInit {
   private async loadPlugins () {
     this.pluginService.initializePlugins()
 
-    await this.pluginService.loadPluginsByScope('common')
-
-    this.hooks.runAction('action:application.init')
+    this.hooks.runAction('action:application.init', 'common')
   }
 
   private initHotkeys () {

diff --git a/client/src/app/core/plugins/hooks.service.ts b/client/src/app/core/plugins/hooks.service.ts
index 80c57869c0008a507e69aaf861b5095e371b31b8..257e27e6bed7a78400492cc04662ef81c12c91ce 100644 (file)
--- a/client/src/app/core/plugins/hooks.service.ts
+++ b/client/src/app/core/plugins/hooks.service.ts
@@ -37,8 +37,9 @@ export class HooksService {
     return this.pluginService.runHook(hookName, result, params)
   }
 
-  runAction<T, U extends ClientActionHookName> (hookName: U, params?: T) {
-    this.pluginService.runHook(hookName, params)
-                 .catch((err: any) => console.error('Fatal hook error.', { err }))
+  runAction<T, U extends ClientActionHookName> (hookName: U, scope: PluginClientScope, params?: T) {
+    this.pluginService.ensurePluginsAreLoaded(scope)
+        .then(() => this.pluginService.runHook(hookName, params))
+        .catch((err: any) => console.error('Fatal hook error.', { err }))
   }
 }

diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index 90ebe56690923b618743f7c8dbe85212119ee924..5d180e5a0197ac5e68176f5cf88e71d7403d7911 100644 (file)
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -36,6 +36,7 @@ export class PluginService implements ClientHook {
   private scopes: { [ scopeName: string ]: PluginInfo[] } = {}
   private loadedScripts: { [ script: string ]: boolean } = {}
   private loadedScopes: PluginClientScope[] = []
+  private loadingScopes: { [id in PluginClientScope]?: boolean } = {}
 
   private hooks: { [ name: string ]: HookStructValue[] } = {}
 
@@ -63,6 +64,8 @@ export class PluginService implements ClientHook {
   }
 
   ensurePluginsAreLoaded (scope: PluginClientScope) {
+    this.loadPluginsByScope(scope)
+
     return this.pluginsLoaded[scope].asObservable()
                .pipe(first(), shareReplay())
                .toPromise()
@@ -104,6 +107,11 @@ export class PluginService implements ClientHook {
   }
 
   async loadPluginsByScope (scope: PluginClientScope, isReload = false) {
+    if (this.loadingScopes[scope]) return
+    if (!isReload && this.loadedScopes.includes(scope)) return
+
+    this.loadingScopes[scope] = true
+
     try {
       await this.ensurePluginsAreBuilt()
 
@@ -111,6 +119,7 @@ export class PluginService implements ClientHook {
 
       const toLoad = this.scopes[ scope ]
       if (!Array.isArray(toLoad)) {
+        this.loadingScopes[scope] = false
         this.pluginsLoaded[scope].next(true)
 
         return
@@ -130,6 +139,7 @@ export class PluginService implements ClientHook {
       await Promise.all(promises)
 
       this.pluginsLoaded[scope].next(true)
+      this.loadingScopes[scope] = false
     } catch (err) {
       console.error('Cannot load plugins by scope %s.', scope, err)
     }

diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index 691e57619543eea0ea62592cf44d189b904eb9e9..5c4bb9379358f8efd5f8134b69316e989c17ef01 100644 (file)
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -53,8 +53,6 @@ export class SearchComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit () {
-    this.pluginService.loadPluginsByScope('search')
-
     this.subActivatedRoute = this.route.queryParams.subscribe(
       queryParams => {
         const querySearch = queryParams['search']
@@ -80,7 +78,7 @@ export class SearchComponent implements OnInit, OnDestroy {
       err => this.notifier.error(err.text)
     )
 
-    this.hooks.runAction('action:search.init')
+    this.hooks.runAction('action:search.init', 'search')
   }
 
   ngOnDestroy () {

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 0d9b6d680acf950fcf3cdeb2ff8f971924a4537a..228c45a068aedb9b250f07d647efaf45e75c2ecd 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -103,8 +103,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   async ngOnInit () {
-    this.pluginService.loadPluginsByScope('video-watch')
-
     this.configSub = this.serverService.configLoaded
         .subscribe(() => {
           if (
@@ -133,7 +131,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.theaterEnabled = getStoredTheater()
 
-    this.hooks.runAction('action:video-watch.init')
+    this.hooks.runAction('action:video-watch.init', 'video-watch')
   }
 
   ngOnDestroy () {
@@ -497,7 +495,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.setOpenGraphTags()
     this.checkUserRating()
 
-    this.hooks.runAction('action:video-watch.video.loaded')
+    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch')
   }
 
   private setRating (nextRating: UserVideoRateType) {