Lazy load client script scopes

5 files changed, 18 insertions, 13 deletions

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index bde97c68b..14fd27784 100644
--- 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 80c57869c..257e27e6b 100644
--- 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 90ebe5669..5d180e5a0 100644
--- 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 691e57619..5c4bb9379 100644
--- 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 0d9b6d680..228c45a06 100644
--- 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) {