diff --git a/client/src/root-helpers/theme-manager.ts b/client/src/root-helpers/theme-manager.ts index 609591b4e..60099fe63 100644 --- a/client/src/root-helpers/theme-manager.ts +++ b/client/src/root-helpers/theme-manager.ts @@ -54,7 +54,9 @@ export class ThemeManager { injectCoreColorPalette (iteration = 0) { if (iteration > 100) { - logger.error('Cannot inject core color palette: too many iterations') + logger.error('Too many iteration when checking color palette injection. The theme may be missing the --is-dark CSS variable') + + this.injectColorPalette() return } diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 714b88a32..1be25f282 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -104,7 +104,7 @@ export class PeerTubeEmbed { .then(res => res.json()) } - this.peertubeTheme.loadTheme(this.config) + this.peertubeTheme.loadThemeStyle(this.config) const videoId = this.isPlaylistEmbed() ? await this.initPlaylist() @@ -441,7 +441,14 @@ export class PeerTubeEmbed { const [ { PeerTubePlayer, videojs } ] = await Promise.all([ this.PeerTubePlayerManagerModulePromise, - this.peertubePlugin.loadPlugins(this.config, await this.translationsPromise) + + this.translationsPromise.then(translations => { + this.peertubePlugin.init(translations) + this.peertubePlugin.loadPlugins(this.config) + this.peertubeTheme.loadThemePlugins(this.config) + + return this.peertubePlugin.ensurePluginsAreLoaded() + }) ]) this.videojs = videojs diff --git a/client/src/standalone/videos/shared/peertube-plugin.ts b/client/src/standalone/videos/shared/peertube-plugin.ts index 154593946..3c584b86b 100644 --- a/client/src/standalone/videos/shared/peertube-plugin.ts +++ b/client/src/standalone/videos/shared/peertube-plugin.ts @@ -7,24 +7,27 @@ import { Translations } from './translations' import { getBackendUrl } from './url' export class PeerTubePlugin { - private pluginsManager: PluginsManager constructor (private readonly http: AuthHTTP) { - } - loadPlugins (config: HTMLServerConfig, translations?: Translations) { + init (translations?: Translations) { this.pluginsManager = new PluginsManager({ - peertubeHelpersFactory: pluginInfo => this.buildPeerTubeHelpers({ - pluginInfo, - translations - }), + peertubeHelpersFactory: pluginInfo => + this.buildPeerTubeHelpers({ + pluginInfo, + translations + }), backendUrl: getBackendUrl() }) + } + loadPlugins (config: HTMLServerConfig) { this.pluginsManager.loadPluginsList(config) + } + ensurePluginsAreLoaded () { return this.pluginsManager.ensurePluginsAreLoaded('embed') } diff --git a/client/src/standalone/videos/shared/peertube-theme.ts b/client/src/standalone/videos/shared/peertube-theme.ts index 61b9db9d1..fbebff341 100644 --- a/client/src/standalone/videos/shared/peertube-theme.ts +++ b/client/src/standalone/videos/shared/peertube-theme.ts @@ -9,16 +9,23 @@ export class PeerTubeTheme { constructor (private readonly pluginPlugin: PeerTubePlugin) { } - loadTheme (config: HTMLServerConfig) { + loadThemeStyle (config: HTMLServerConfig) { for (const theme of config.theme.registered) { this.themeManager.injectTheme(theme, getBackendUrl()) } const themeName = this.getCurrentThemeName(config) - logger.info(`Enabling ${themeName} theme.`) + logger.info(`Enabling ${themeName} theme style.`) this.themeManager.loadThemeStyle(themeName) + this.themeManager.injectCoreColorPalette() + } + + loadThemePlugins (config: HTMLServerConfig) { + const themeName = this.getCurrentThemeName(config) + logger.info(`Loading ${themeName} theme plugins.`) + const theme = config.theme.registered.find(t => t.name === themeName) const isInternalTheme = config.theme.builtIn.map(t => t.name as string).includes(themeName) @@ -31,8 +38,6 @@ export class PeerTubeTheme { pluginManager.addPlugin(theme, true) pluginManager.reloadLoadedScopes() } - - this.themeManager.injectCoreColorPalette() } private getCurrentThemeName (config: HTMLServerConfig) {