From a2ffd046d61fb6424825f183af195ce1df2e156f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 25 Oct 2019 10:57:23 +0200 Subject: Speedup theme injection --- client/src/app/app.component.ts | 6 +- client/src/app/core/theme/theme.service.ts | 91 ++++++++++++++++++++++++++---- 2 files changed, 83 insertions(+), 14 deletions(-) (limited to 'client') diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 6b18e5feb..1724bbd1a 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -71,6 +71,9 @@ export class AppComponent implements OnInit { ngOnInit () { document.getElementById('incompatible-browser').className += ' browser-ok' + this.loadPlugins() + this.themeService.initialize() + this.authService.loadClientCredentials() if (this.isUserLoggedIn()) { @@ -86,9 +89,6 @@ export class AppComponent implements OnInit { this.serverService.loadVideoPrivacies() this.serverService.loadVideoPlaylistPrivacies() - this.loadPlugins() - this.themeService.initialize() - // Do not display menu on small screens if (this.screenService.isInSmallView()) { this.isMenuDisplayed = false diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts index 012488075..b312e8f7a 100644 --- a/client/src/app/core/theme/theme.service.ts +++ b/client/src/app/core/theme/theme.service.ts @@ -4,13 +4,21 @@ import { ServerService } from '@app/core/server' import { environment } from '../../../environments/environment' import { PluginService } from '@app/core/plugins/plugin.service' import { ServerConfigTheme } from '@shared/models' +import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' @Injectable() export class ThemeService { + private static KEYS = { + LAST_ACTIVE_THEME: 'last_active_theme' + } + private oldThemeName: string private themes: ServerConfigTheme[] = [] + private themeFromLocalStorage: ServerConfigTheme + private themeDOMLinksFromLocalStorage: HTMLLinkElement[] = [] + constructor ( private auth: AuthService, private pluginService: PluginService, @@ -18,22 +26,30 @@ export class ThemeService { ) {} initialize () { + // Try to load from local storage first, so we don't have to wait network requests + this.loadAndSetFromLocalStorage() + this.server.configLoaded .subscribe(() => { - this.injectThemes() + const themes = this.server.getConfig().theme.registered + + this.removeThemeFromLocalStorageIfNeeded(themes) + this.injectThemes(themes) this.listenUserTheme() }) } - private injectThemes () { - this.themes = this.server.getConfig().theme.registered + private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) { + this.themes = themes console.log('Injecting %d themes.', this.themes.length) - const head = document.getElementsByTagName('head')[0] + const head = this.getHeadElement() for (const theme of this.themes) { + // Already added this theme? + if (fromLocalStorage === false && this.themeFromLocalStorage && this.themeFromLocalStorage.name === theme.name) continue for (const css of theme.css) { const link = document.createElement('link') @@ -45,12 +61,16 @@ export class ThemeService { link.setAttribute('title', theme.name) link.setAttribute('disabled', '') + if (fromLocalStorage === true) this.themeDOMLinksFromLocalStorage.push(link) + head.appendChild(link) } } } private getCurrentTheme () { + if (this.themeFromLocalStorage) return this.themeFromLocalStorage.name + if (this.auth.isLoggedIn()) { const theme = this.auth.getUser().theme if (theme !== 'instance-default') return theme @@ -70,13 +90,7 @@ export class ThemeService { } private updateCurrentTheme () { - if (this.oldThemeName) { - const oldTheme = this.getTheme(this.oldThemeName) - if (oldTheme) { - console.log('Removing scripts of old theme %s.', this.oldThemeName) - this.pluginService.removePlugin(oldTheme) - } - } + if (this.oldThemeName) this.removeThemePlugins(this.oldThemeName) const currentTheme = this.getCurrentTheme() @@ -90,12 +104,20 @@ export class ThemeService { this.pluginService.addPlugin(theme, true) this.pluginService.reloadLoadedScopes() + + peertubeLocalStorage.setItem(ThemeService.KEYS.LAST_ACTIVE_THEME, JSON.stringify(theme)) + } else { + peertubeLocalStorage.removeItem(ThemeService.KEYS.LAST_ACTIVE_THEME) } this.oldThemeName = currentTheme } private listenUserTheme () { + // We don't need them anymore + this.themeFromLocalStorage = undefined + this.themeDOMLinksFromLocalStorage = [] + if (!this.auth.isLoggedIn()) { this.updateCurrentTheme() } @@ -104,6 +126,53 @@ export class ThemeService { .subscribe(() => this.updateCurrentTheme()) } + private loadAndSetFromLocalStorage () { + const lastActiveThemeString = peertubeLocalStorage.getItem(ThemeService.KEYS.LAST_ACTIVE_THEME) + if (!lastActiveThemeString) return + + try { + const lastActiveTheme = JSON.parse(lastActiveThemeString) + this.themeFromLocalStorage = lastActiveTheme + + this.injectThemes([ lastActiveTheme ], true) + this.updateCurrentTheme() + } catch (err) { + console.error('Cannot parse last active theme.', err) + return + } + } + + private removeThemePlugins (themeName: string) { + const oldTheme = this.getTheme(themeName) + if (oldTheme) { + console.log('Removing scripts of old theme %s.', themeName) + this.pluginService.removePlugin(oldTheme) + } + } + + private removeThemeFromLocalStorageIfNeeded (themes: ServerConfigTheme[]) { + if (!this.themeFromLocalStorage) return + + const loadedTheme = themes.find(t => t.name === this.themeFromLocalStorage.name) + if (!loadedTheme || loadedTheme.version !== this.themeFromLocalStorage.version) { + // Need to remove this theme: we loaded an old version or a theme that does not exist anymore + this.removeThemePlugins(this.themeFromLocalStorage.name) + this.oldThemeName = undefined + + const head = this.getHeadElement() + for (const htmlLinkElement of this.themeDOMLinksFromLocalStorage) { + head.removeChild(htmlLinkElement) + } + + this.themeFromLocalStorage = undefined + this.themeDOMLinksFromLocalStorage = [] + } + } + + private getHeadElement () { + return document.getElementsByTagName('head')[0] + } + private getTheme (name: string) { return this.themes.find(t => t.name === name) } -- cgit v1.2.3