Fix theme crash in embed

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
     }
 

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

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')
   }
 

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) {