From c9e3eeedad67649d9b7aec8897b738d0ad63ec1f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 23 Jul 2019 12:16:34 +0200 Subject: [PATCH] Lazy load client script scopes --- client/src/app/app.component.ts | 4 +--- client/src/app/core/plugins/hooks.service.ts | 7 ++++--- client/src/app/core/plugins/plugin.service.ts | 10 ++++++++++ client/src/app/search/search.component.ts | 4 +--- .../app/videos/+video-watch/video-watch.component.ts | 6 ++---- 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 (hookName: U, params?: T) { - this.pluginService.runHook(hookName, params) - .catch((err: any) => console.error('Fatal hook error.', { err })) + runAction (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) { -- 2.41.0