feat(theme): add themes

packages/h5p-examples/config.json

@@ -15,5 +15,16 @@
         "H5P.CoursePresentation": ["H5P.MathDisplay"],
         "H5P.InteractiveVideo": ["H5P.MathDisplay"],
         "H5P.DragQuestion": ["H5P.MathDisplay"]
+    },
+    "theme": {
+        "backgroundColor": "#222b37",
+        "paperBackgroundColor": "#333d49",
+        "fontColor": "#ffffff",
+        "disabledFontColor": "#a0a0a1",
+        "primaryColor": "#7636dc",
+        "primaryContrastColor": "#ffffff",
+        "secondaryColor": "#3d66ff",
+        "secondaryContrastColor": "#ffffff",
+        "dividerColor": "#45505d"
     }
 }

packages/h5p-examples/src/express.ts

@@ -13,6 +13,7 @@ import {
     h5pAjaxExpressRouter,
     libraryAdministrationExpressRouter,
     contentTypeCacheExpressRouter,
+    themeRouter,
     IRequestWithUser
 } from '@lumieducation/h5p-express';
 import H5PHtmlExporter from '@lumieducation/h5p-html-exporter';
@@ -148,6 +149,8 @@ const start = async (): Promise<void> => {
     // (H5P.adapters.express) to function properly.
     server.use(i18nextHttpMiddleware.handle(i18next));
 
+    server.use(h5pEditor.config.baseUrl, themeRouter(h5pEditor));
+
     // The Express adapter handles GET and POST requests to various H5P
     // endpoints. You can add an options object as a last parameter to configure
     // which endpoints you want to use. In this case we don't pass an options

packages/h5p-express/src/ThemeRouter/ThemeExpressRouter.ts

@@ -0,0 +1,34 @@
+import { Router, static as ExpressStatic } from 'express';
+
+import { H5PEditor } from '@lumieducation/h5p-server';
+import {
+    errorHandler,
+    undefinedOrTrue,
+    catchAndPassOnErrors
+} from '../expressErrorHandler';
+
+/**
+ * This router implements all Ajax calls necessary for the H5P (editor) client to work.
+ * Use it like this: server.use('/h5p', H5P.adapters.express(h5pEditor, path.resolve('h5p/core'), path.resolve('h5p/editor')));
+ * If you only want certain routes, you can specify this in the options parameter.
+ * @param h5pEditor the editor object
+ * @param h5pCorePath the path on the local disk at which the core files (of the player) can be found
+ * @param h5pEditorLibraryPath the path on the local disk at which the core files of the editor can be found
+ * @param routeOptions sets which routes you want and how to handle errors
+ * @param languageOverride the language to use when returning errors.
+ * Only has an effect if you use the i18next http middleware, as it relies on
+ * req.i18n.changeLanguage to be present. Defaults to auto, which means the
+ * a language detector must have detected language and req.t translated to the
+ * detected language.
+ */
+export default function (h5pEditor: H5PEditor): Router {
+    const router = Router();
+
+    // get library file
+    router.get(`/theme.css`, (req, res) => {
+        res.setHeader('content-type', 'text/css');
+        res.status(200).send(h5pEditor.renderTheme());
+    });
+
+    return router;
+}

packages/h5p-express/src/index.ts

@@ -6,12 +6,14 @@ import {
 import h5pAjaxExpressRouter from './H5PAjaxRouter/H5PAjaxExpressRouter';
 import libraryAdministrationExpressRouter from './LibraryAdministrationRouter/LibraryAdministrationExpressRouter';
 import contentTypeCacheExpressRouter from './ContentTypeCacheRouter/ContentTypeCacheExpressRouter';
+import themeRouter from './ThemeRouter/ThemeExpressRouter';
 
 export {
     IRequestWithLanguage,
     IRequestWithUser,
     IActionRequest,
     h5pAjaxExpressRouter,
     libraryAdministrationExpressRouter,
-    contentTypeCacheExpressRouter
+    contentTypeCacheExpressRouter,
+    themeRouter
 };

packages/h5p-server/src/H5PEditor.ts

@@ -16,6 +16,7 @@ import defaultCopyrightSemanticsLanguageFile from '../assets/translations/copyri
 import defaultMetadataSemanticsLanguageFile from '../assets/translations/metadata-semantics/en.json';
 import editorAssetList from './editorAssetList.json';
 import defaultRenderer from './renderers/default';
+import renderTheme from './renderers/theme';
 import supportedLanguageList from '../assets/editorLanguages.json';
 
 import ContentManager from './ContentManager';
@@ -51,6 +52,7 @@ import {
     ILumiEditorIntegration,
     ISemanticsEntry,
     ITemporaryFileStorage,
+    ITheme,
     ITranslationFunction,
     IUrlGenerator,
     IUser
@@ -155,8 +157,10 @@ export default class H5PEditor {
             );
         }
 
-        this.globalCustomStyles =
-            this.options?.customization?.global?.styles || [];
+        this.globalCustomStyles = this.options?.customization?.global
+            ?.styles || [
+            this.config.theme && `${this.config.baseUrl}/theme.css`
+        ];
         if (this.config.customization?.global?.editor?.styles) {
             this.globalCustomStyles = this.globalCustomStyles.concat(
                 this.config.customization.global?.editor.styles
@@ -564,6 +568,10 @@ export default class H5PEditor {
         return Promise.resolve(this.renderer(model));
     }
 
+    public renderTheme(theme?: ITheme): string {
+        return renderTheme(theme || this.config.theme);
+    }
+
     /**
      * Stores an uploaded file in temporary storage.
      * @param contentId the id of the piece of content the file is attached to;

packages/h5p-server/src/H5PPlayer.ts

@@ -225,6 +225,7 @@ export default class H5PPlayer {
             ),
             scripts: this.listCoreScripts().concat(assets.scripts),
             styles: this.listCoreStyles().concat(assets.styles),
+            theme: this.config.theme,
             translations: {},
             embedTypes: metadata.embedTypes, // TODO: check if the library supports the embed type!
             user

packages/h5p-server/src/editorAssetList.json

@@ -14,7 +14,7 @@
             "scripts/h5peditor-editor.js",
             "scripts/h5peditor.js",
             "language/en.js",
-            "scripts/h5p-hub-client.js",                        
+            "scripts/h5p-hub-client.js",
             "scripts/h5peditor-semantic-structure.js",
             "scripts/h5peditor-library-selector.js",
             "scripts/h5peditor-fullscreen-bar.js",

packages/h5p-server/src/implementation/H5PConfig.ts

@@ -1,4 +1,4 @@
-import { IH5PConfig, IKeyValueStorage } from '../types';
+import { IH5PConfig, IKeyValueStorage, ITheme } from '../types';
 
 /**
  * Stores configuration options and literals that are used throughout the system.
@@ -104,6 +104,8 @@ export default class H5PConfig implements IH5PConfig {
     public temporaryFilesUrl: string = '/temp-files';
     public uuid: string = '';
 
+    public theme?: ITheme;
+
     private storage: IKeyValueStorage;
 
     /**
@@ -132,6 +134,7 @@ export default class H5PConfig implements IH5PConfig {
         await this.loadSettingFromStorage('sendUsageStatistics');
         await this.loadSettingFromStorage('siteType');
         await this.loadSettingFromStorage('uuid');
+        await this.loadSettingFromStorage('theme');
         return this;
     }
 
@@ -160,6 +163,7 @@ export default class H5PConfig implements IH5PConfig {
         await this.saveSettingToStorage('sendUsageStatistics');
         await this.saveSettingToStorage('siteType');
         await this.saveSettingToStorage('uuid');
+        await this.saveSettingToStorage('theme');
     }
 
     /**

packages/h5p-server/src/renderers/default.ts

@@ -1,5 +1,4 @@
 import { IEditorModel } from '../types';
-
 export default (model: IEditorModel): string => `<html>
 <head>
 <meta charset="UTF-8">

packages/h5p-server/src/renderers/player.ts

@@ -1,4 +1,5 @@
 import { IPlayerModel } from '../types';
+import generateThemeCSS from './theme';
 
 export default (model: IPlayerModel): string => `<!doctype html>
 <html class="h5p-iframe">
@@ -11,7 +12,7 @@ export default (model: IPlayerModel): string => `<!doctype html>
     ${model.scripts
         .map((script) => `<script src="${script}"></script>`)
         .join('\n    ')}
-
+    <style>${generateThemeCSS(model.theme)}</style>
     <script>
         window.H5PIntegration = ${JSON.stringify(model.integration, null, 2)};
     </script>