feat(bigbluebutton-integration): features to support integration with bigbluebutton's recent h5p plugin

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [ 14, 16, 18 ]
+        node: [ 18, 20, 22 ]
 
     steps:
       - name: Checkout

cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+  },
+})

package.json

@@ -13,13 +13,13 @@
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.13.15",
     "@babel/runtime": "^7.15.4",
-    "@commitlint/config-conventional": "^17.6.3",
+    "@commitlint/config-conventional": "^19.2.2",
     "@types/toposort": "^2.0.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
-    "commitlint": "^12.1.1",
+    "commitlint": "^19.3.0",
     "copy-webpack-plugin": "^8.1.1",
-    "cypress": "^7.1.0",
+    "cypress": "^13.12.0",
     "exports-loader": "^2.0.0",
     "husky": "^6.0.0",
     "toposort": "^2.0.2",

src/h5p-integration.ts

@@ -6,6 +6,7 @@ export function defaultH5PIntegration(): H5PIntegration {
         url: '',
         contents: {},
         saveFreq: false,
+        saveFunctionCallback: () => {},
         postUserStatistics: false,
         ajax: {},
         l10n: {

src/h5p-standalone.ts

@@ -29,6 +29,8 @@ interface Options {
     h5pJsonPath?: string;
     librariesPath?: string;
     contentJsonPath?: string;
+    contentAsJson?: string;
+    h5pAsJson?: string;
 
     frame?: boolean;
     copyright?: boolean;
@@ -51,6 +53,7 @@ interface Options {
 
     contentUserData?: H5PContent['contentUserData'];
     saveFreq?: number | false;
+    saveFunctionCallback?: (state: object) => void;
     postUserStatistics?: boolean;
 
     ajax?: {
@@ -118,6 +121,10 @@ export class H5PStandalone {
                             (<any>window).H5P.preventInit = false; //reset for any subsequent request
                         }
 
+                        window.addEventListener('saveState', (event: CustomEvent<string>) => {
+                            const state = event.detail;
+                            if (H5PIntegration.contents['cid-'+contentId]) H5PIntegration.contents['cid-'+contentId].contentUserData = [{state: state}];
+                        });
                         return contentId; //better than nothing
                     })
             });
@@ -195,18 +202,37 @@ export class H5PStandalone {
         /**
          * Load H5P content and libraries
          */
-
+        const { contentAsJson, h5pAsJson } = options;
         const {h5pJsonPath, contentJsonPath, librariesPath} = this.getH5PPaths(options);
 
-        const H5PJsonContent = <H5PPackageDefinition>(await getJSON(`${h5pJsonPath}/h5p.json`, options?.assetsRequestFetchOptions));
+        let H5PJsonContent;
+        if (h5pAsJson) {
+            try {
+                H5PJsonContent = JSON.parse(h5pAsJson);
+            } catch (e) {
+                throw new Error(`Structure of h5pAsJson is not a valid json. ${e}`);
+            }
+        } else {
+            H5PJsonContent = <H5PPackageDefinition>(await getJSON(`${h5pJsonPath}/h5p.json`, options?.assetsRequestFetchOptions).catch((e) => {
+                console.log('Error while trying to fetch h5p json content: ', e, `${h5pJsonPath}/h5p.json`, options?.assetsRequestFetchOptions)
+            }));
+        }
 
         //populate the variable before executing other functions.We assume other dependent
         // libraries follow the same format rather than performing the check for each library
         this.libraryFolderContainsVersion = await this.libraryFolderNameIncludesVersion(
             librariesPath, H5PJsonContent.preloadedDependencies[0], options?.assetsRequestFetchOptions);
 
-
-        const H5PContentJsonContent = await getJSON(`${contentJsonPath}/content.json`, options?.assetsRequestFetchOptions);
+        let H5PContentJsonContent;
+        if (contentAsJson) {
+            try {
+                H5PContentJsonContent = JSON.parse(contentAsJson);
+            } catch (e) {
+                H5PContentJsonContent = await getJSON(`${contentJsonPath}/content.json`, options?.assetsRequestFetchOptions);
+            }
+        } else {
+            H5PContentJsonContent = await getJSON(`${contentJsonPath}/content.json`, options?.assetsRequestFetchOptions);
+        }
 
         const mainLibrary = await this.findMainLibrary(H5PJsonContent, librariesPath, options?.assetsRequestFetchOptions);
 
@@ -261,6 +287,13 @@ export class H5PStandalone {
         if (options.saveFreq && typeof options.saveFreq === 'number') {
             H5PIntegration.saveFreq = options.saveFreq;
         }
+
+        if (
+            options.saveFunctionCallback && options.saveFunctionCallback instanceof Function
+            && typeof options.saveFunctionCallback === 'function'
+        ) {
+            H5PIntegration.saveFunctionCallback = options.saveFunctionCallback;
+        }
 
         if (options.user) {
             H5PIntegration.user = options.user; //replacing full object for compatibility
@@ -346,6 +379,7 @@ export class H5PStandalone {
             //no validation
             H5PIntegration.contents[`cid-${contentId}`].url = options.xAPIObjectIRI;
         }
+
         //now override the window H5PIntegration
         (<any>window).H5PIntegration = H5PIntegration
 

src/h5p.d.ts

@@ -13,6 +13,9 @@ export interface H5PIntegration {
     siteUrl?: string; //user site homepage on xAPI actor property. Used if user data is not provided.
 
     saveFreq?: false | number;
+
+    saveFunctionCallback?: (state: object) => void;
+
     postUserStatistics?: boolean; //makes sense if user is available
     ajax: {
         /**

src/utils.ts

@@ -32,7 +32,9 @@ export async function getJSON<T>(url: string,requestOptions?: RequestInit): Prom
     if(!requestOptions){
         requestOptions = {credentials: 'same-origin'}
     }
-    const res = await fetch(url,requestOptions);
+    const res = await fetch(url,requestOptions).then((e) => {
+        return e;
+    });
     return res.json();
 }
 

vendor/h5p/js/h5p.js

@@ -226,6 +226,8 @@ H5P.init = function (target) {
 
       var saveTimer, save = function () {
         var state = instance.getCurrentState();
+        if ( H5PIntegration.saveFunctionCallback instanceof Function ||
+          typeof H5PIntegration.saveFunctionCallback === 'function') H5PIntegration.saveFunctionCallback(state);
         if (state !== undefined) {
           H5P.setUserData(contentId, 'state', state, {deleteOnChange: true});
         }
@@ -2461,7 +2463,7 @@ H5P.createTitle = function (rawTitle, maxLength) {
    *   Callback with error as parameters.
    * @param {boolean} [extras.async=true]
    */
-  H5P.setUserData = function (contentId, dataId, data, extras) {
+  H5P.setUserData = function (contentId, dataId, data, extras, saveState = false) {
     var options = H5P.jQuery.extend(true, {}, {
       subContentId: 0,
       preloaded: true,