From ffb321bedca46d6987c7b31dd58e5dea96ea2ea2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 10 Jul 2019 14:06:19 +0200 Subject: WIP plugins: load theme on client side --- .../edit-custom-config.component.ts | 1 + .../my-account-interface-settings.component.html | 5 +- .../my-account-interface-settings.component.ts | 5 +- client/src/app/app.component.ts | 7 +- client/src/app/core/plugins/plugin.service.ts | 60 ++++++---- client/src/app/core/theme/theme.service.ts | 124 ++++++++++++++++----- client/src/app/menu/menu.component.html | 4 +- client/src/app/menu/menu.component.ts | 4 - 8 files changed, 145 insertions(+), 65 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts index 19a408425..8bd7f7cf6 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts @@ -75,6 +75,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { get availableThemes () { return this.serverService.getConfig().theme.registered + .map(t => t.name) } getResolutionKey (resolution: string) { diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html index f34e77f6a..f034c6bb3 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html @@ -4,10 +4,13 @@
+ + diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts index f7055072f..5ec1c9f8f 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts @@ -29,6 +29,7 @@ export class MyAccountInterfaceSettingsComponent extends FormReactive implements get availableThemes () { return this.serverService.getConfig().theme.registered + .map(t => t.name) } ngOnInit () { @@ -53,9 +54,9 @@ export class MyAccountInterfaceSettingsComponent extends FormReactive implements this.userService.updateMyProfile(details).subscribe( () => { - this.notifier.success(this.i18n('Interface settings updated.')) + this.authService.refreshUserInformation() - window.location.reload() + this.notifier.success(this.i18n('Interface settings updated.')) }, err => this.notifier.error(err.message) diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 548173f61..0ebd628fc 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -72,6 +72,7 @@ export class AppComponent implements OnInit { this.serverService.loadVideoPlaylistPrivacies() this.loadPlugins() + this.themeService.initialize() // Do not display menu on small screens if (this.screenService.isInSmallView()) { @@ -237,11 +238,7 @@ export class AppComponent implements OnInit { new Hotkey('g u', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/upload' ]) return false - }, undefined, this.i18n('Go to the videos upload page')), - new Hotkey('shift+t', (event: KeyboardEvent): boolean => { - this.themeService.toggleDarkTheme() - return false - }, undefined, this.i18n('Toggle Dark theme')) + }, undefined, this.i18n('Go to the videos upload page')) ]) } } diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts index 7f751f479..4abe9ee8d 100644 --- a/client/src/app/core/plugins/plugin.service.ts +++ b/client/src/app/core/plugins/plugin.service.ts @@ -7,7 +7,7 @@ import { PluginScope } from '@shared/models/plugins/plugin-scope.type' import { environment } from '../../../environments/environment' import { RegisterHookOptions } from '@shared/models/plugins/register.model' import { ReplaySubject } from 'rxjs' -import { first } from 'rxjs/operators' +import { first, shareReplay } from 'rxjs/operators' interface HookStructValue extends RegisterHookOptions { plugin: ServerConfigPlugin @@ -21,6 +21,7 @@ export class PluginService { private plugins: ServerConfigPlugin[] = [] private scopes: { [ scopeName: string ]: { plugin: ServerConfigPlugin, clientScript: ClientScript }[] } = {} private loadedScripts: { [ script: string ]: boolean } = {} + private loadedScopes: PluginScope[] = [] private hooks: { [ name: string ]: HookStructValue[] } = {} @@ -43,14 +44,48 @@ export class PluginService { ensurePluginsAreLoaded () { return this.pluginsLoaded.asObservable() - .pipe(first()) + .pipe(first(), shareReplay()) .toPromise() } + addPlugin (plugin: ServerConfigPlugin) { + for (const key of Object.keys(plugin.clientScripts)) { + const clientScript = plugin.clientScripts[key] + + for (const scope of clientScript.scopes) { + if (!this.scopes[scope]) this.scopes[scope] = [] + + this.scopes[scope].push({ + plugin, + clientScript: { + script: environment.apiUrl + `/plugins/${plugin.name}/${plugin.version}/client-scripts/${clientScript.script}`, + scopes: clientScript.scopes + } + }) + + this.loadedScripts[clientScript.script] = false + } + } + } + + removePlugin (plugin: ServerConfigPlugin) { + for (const key of Object.keys(this.scopes)) { + this.scopes[key] = this.scopes[key].filter(o => o.plugin.name !== plugin.name) + } + } + + async reloadLoadedScopes () { + for (const scope of this.loadedScopes) { + await this.loadPluginsByScope(scope) + } + } + async loadPluginsByScope (scope: PluginScope) { try { await this.ensurePluginsAreLoaded() + this.loadedScopes.push(scope) + const toLoad = this.scopes[ scope ] if (!Array.isArray(toLoad)) return @@ -63,7 +98,7 @@ export class PluginService { this.loadedScripts[ clientScript.script ] = true } - return Promise.all(promises) + await Promise.all(promises) } catch (err) { console.error('Cannot load plugins by scope %s.', scope, err) } @@ -101,29 +136,14 @@ export class PluginService { console.log('Loading script %s of plugin %s.', clientScript.script, plugin.name) - const url = environment.apiUrl + `/plugins/${plugin.name}/${plugin.version}/client-scripts/${clientScript.script}` - - return import(/* webpackIgnore: true */ url) + return import(/* webpackIgnore: true */ clientScript.script) .then(script => script.register({ registerHook })) .then(() => this.sortHooksByPriority()) } private buildScopeStruct () { for (const plugin of this.plugins) { - for (const key of Object.keys(plugin.clientScripts)) { - const clientScript = plugin.clientScripts[key] - - for (const scope of clientScript.scopes) { - if (!this.scopes[scope]) this.scopes[scope] = [] - - this.scopes[scope].push({ - plugin, - clientScript - }) - - this.loadedScripts[clientScript.script] = false - } - } + this.addPlugin(plugin) } } diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts index 50c19ecac..ad59c203b 100644 --- a/client/src/app/core/theme/theme.service.ts +++ b/client/src/app/core/theme/theme.service.ts @@ -1,41 +1,105 @@ import { Injectable } from '@angular/core' -import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' +import { AuthService } from '@app/core/auth' +import { ServerService } from '@app/core/server' +import { environment } from '../../../environments/environment' +import { PluginService } from '@app/core/plugins/plugin.service' +import { ServerConfigTheme } from '@shared/models' @Injectable() export class ThemeService { - private theme = document.querySelector('body') - private darkTheme = false - private previousTheme: { [ id: string ]: string } = {} - - constructor () { - // initialise the alternative theme with dark theme colors - this.previousTheme['mainBackgroundColor'] = '#111111' - this.previousTheme['mainForegroundColor'] = '#fff' - this.previousTheme['submenuColor'] = 'rgb(32,32,32)' - this.previousTheme['inputColor'] = 'gray' - this.previousTheme['inputPlaceholderColor'] = '#fff' - - this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark') - if (this.darkTheme) this.toggleDarkTheme(false) + + private oldThemeName: string + private themes: ServerConfigTheme[] = [] + + constructor ( + private auth: AuthService, + private pluginService: PluginService, + private server: ServerService + ) {} + + initialize () { + this.server.configLoaded + .subscribe(() => { + this.injectThemes() + + this.listenUserTheme() + }) + } + + private injectThemes () { + this.themes = this.server.getConfig().theme.registered + + console.log('Injecting %d themes.', this.themes.length) + + const head = document.getElementsByTagName('head')[0] + + for (const theme of this.themes) { + + for (const css of theme.css) { + const link = document.createElement('link') + + const href = environment.apiUrl + `/themes/${theme.name}/${theme.version}/css/${css}` + link.setAttribute('href', href) + link.setAttribute('rel', 'alternate stylesheet') + link.setAttribute('type', 'text/css') + link.setAttribute('title', theme.name) + link.setAttribute('disabled', '') + + head.appendChild(link) + } + } + } + + private getCurrentTheme () { + if (this.auth.isLoggedIn()) { + const theme = this.auth.getUser().theme + if (theme !== 'instance-default') return theme + } + + return this.server.getConfig().theme.default } - toggleDarkTheme (setLocalStorage = true) { - // switch properties - this.switchProperty('mainBackgroundColor') - this.switchProperty('mainForegroundColor') - this.switchProperty('submenuColor') - this.switchProperty('inputColor') - this.switchProperty('inputPlaceholderColor') - - if (setLocalStorage) { - this.darkTheme = !this.darkTheme - peertubeLocalStorage.setItem('theme', (this.darkTheme) ? 'dark' : 'default') + private loadTheme (name: string) { + const links = document.getElementsByTagName('link') + for (let i = 0; i < links.length; i++) { + const link = links[ i ] + if (link.getAttribute('rel').indexOf('style') !== -1 && link.getAttribute('title')) { + link.disabled = link.getAttribute('title') !== name + } + } + } + + 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) + } + } + + const currentTheme = this.getCurrentTheme() + + console.log('Enabling %s theme.', currentTheme) + + this.loadTheme(currentTheme) + const theme = this.getTheme(currentTheme) + if (theme) { + console.log('Adding scripts of theme %s.', currentTheme) + this.pluginService.addPlugin(theme) + + this.pluginService.reloadLoadedScopes() } + + this.oldThemeName = currentTheme + } + + private listenUserTheme () { + this.auth.userInformationLoaded + .subscribe(() => this.updateCurrentTheme()) } - private switchProperty (property: string, newValue?: string) { - const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property) - this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property]) - this.previousTheme[property] = propertyOldvalue + private getTheme (name: string) { + return this.themes.find(t => t.name === name) } } diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 588cb8548..7eb6f7b35 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -101,12 +101,10 @@ + - - - diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 371beb4a5..ede64b7eb 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -112,10 +112,6 @@ export class MenuComponent implements OnInit { this.hotkeysService.cheatSheetToggle.next(!this.helpVisible) } - toggleDarkTheme () { - this.themeService.toggleDarkTheme() - } - private computeIsUserHasAdminAccess () { const right = this.getFirstAdminRightAvailable() -- cgit v1.2.3