From a008c20b40d8d02592f2798467bdb30fc7e7f502 Mon Sep 17 00:00:00 2001
From: Oliver Tacke <o.tacke@posteo.de>
Date: Thu, 19 Dec 2024 13:50:22 +0100
Subject: [PATCH] Use common H5P eslint rules and make linter happy

---
 .eslintrc.json                                | 26 ++++++---
 scripts/app.js                                |  7 +--
 scripts/components/Dialog/Dialog.js           | 18 ++----
 .../components/Dialog/InteractionContent.js   |  2 +-
 scripts/components/HUD/Buttons/AudioButton.js | 55 +++++++++----------
 .../components/HUD/Buttons/Button/Button.js   | 11 ++--
 scripts/components/HUD/HUD.js                 |  7 +--
 .../LoadingSpinner/LoadingSpinner.js          |  3 +-
 scripts/components/Main.js                    | 55 ++++++++++---------
 scripts/components/ModelViewer/ModelViewer.js |  7 ++-
 scripts/context/H5PContext.js                 |  2 +-
 scripts/h5phelpers/editorForms.js             | 26 ++++-----
 scripts/h5phelpers/libraryParams.js           | 12 ++--
 scripts/utils/sanitization.js                 | 35 ------------
 14 files changed, 116 insertions(+), 150 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 203ae2e..5975d4a 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -18,10 +18,10 @@
     "ecmaVersion": 2020
   },
   "rules": {
-    "valid-jsdoc": "off",
+    // H5P Group rules
     "semi": ["error", "always"],
     "indent": ["error", 2, { "SwitchCase": 1 }],
-    // "brace-style": ["error", "stroustrup"],
+    "brace-style": ["error", "stroustrup"],
     "keyword-spacing": ["error", { "after": true }],
     "comma-spacing": ["error", { "before": false, "after": true }],
     "space-infix-ops": ["error", { "int32Hint": false }],
@@ -33,11 +33,23 @@
       "asyncArrow": "always"
     }],
     "no-extra-boolean-cast": "off",
-    "no-console": ["error", { "allow": ["warn", "error", "log"] }],
-    "quotes": ["error", "double"],
-    "arrow-parens": ["error", "always"],
-    "object-curly-spacing": ["error", "always"],
-    "no-alert": ["error"]
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "quotes": ["error", "single"],
+     // SNORDIAN specific rules
+     "arrow-parens": ["error", "always"],
+     "object-curly-spacing": ["error", "always"],
+     "prefer-template": ["error"],
+     "no-await-in-loop": ["error"],
+     "no-self-compare": ["error"],
+     "dot-notation": ["error"],
+     "no-eval": ["error"],
+     "no-implied-eval": ["error"],
+     "no-magic-numbers": ["warn", {
+       "ignoreArrayIndexes": true,
+       "ignoreDefaultValues": true,
+       "enforceConst": true,
+       "ignore": [-1, 0, 1]
+     }]
   },
   "plugins": ["jsdoc"],
   "parser": "@babel/eslint-parser",
diff --git a/scripts/app.js b/scripts/app.js
index 6d8477a..8dce2b8 100644
--- a/scripts/app.js
+++ b/scripts/app.js
@@ -1,7 +1,5 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Main from './components/Main';
-import { H5PContext } from './context/H5PContext';
+
 import { sanitizeContentTypeParameters } from './utils/sanitization';
 
 export default class Wrapper extends H5P.EventDispatcher {
@@ -102,7 +100,8 @@ export default class Wrapper extends H5P.EventDispatcher {
     const wrapperSize = this.wrapper.getBoundingClientRect();
     if (wrapperSize.width < mobileThreshold) {
       this.wrapper.classList.add('mobile');
-    } else {
+    }
+    else {
       this.wrapper.classList.remove('mobile');
     }
   }
diff --git a/scripts/components/Dialog/Dialog.js b/scripts/components/Dialog/Dialog.js
index 33ab3a5..8d7441e 100644
--- a/scripts/components/Dialog/Dialog.js
+++ b/scripts/components/Dialog/Dialog.js
@@ -18,18 +18,12 @@ export default class Dialog extends React.Component {
     }
   }
 
-  handleResize(isNarrow) {
+  handleResize() {
     if (this.el) {
       // Reset to allow size growth
       this.el.style.width = '';
       this.el.style.height = '';
-      this.el.style.height = this.el.getBoundingClientRect().height + 'px';
-      //if (isNarrow) {
-      // This make IE11 not show the image. It seems to be the combination of
-      // flexbox and width:auto that is causing this
-      // Shrink dialog width for narrow images
-      // this.el.style.width = 'auto';
-      //}
+      this.el.style.height = `${this.el.getBoundingClientRect().height  }px`;
     }
   }
 
@@ -43,10 +37,10 @@ export default class Dialog extends React.Component {
       this.props.children.type === 'div'
         ? this.props.children
         : React.Children.map(this.props.children, (child) =>
-            React.cloneElement(child, {
-              onResize: this.handleResize,
-            })
-          );
+          React.cloneElement(child, {
+            onResize: this.handleResize,
+          })
+        );
 
     return (
       <div className='h5p-text-overlay' role='dialog' aria-label={this.props.title}>
diff --git a/scripts/components/Dialog/InteractionContent.js b/scripts/components/Dialog/InteractionContent.js
index b0dfb8a..13faad7 100644
--- a/scripts/components/Dialog/InteractionContent.js
+++ b/scripts/components/Dialog/InteractionContent.js
@@ -51,7 +51,7 @@ export default class InteractionContent extends React.Component {
     if (library.library.split(' ')[0] === 'H5P.Video') {
       this.instance.on('stateChange', (e) => {
         if (e.data === H5P.Video.PLAYING) {
-          this.props.onAudioIsPlaying('video-' + this.props.hotspot);
+          this.props.onAudioIsPlaying(`video-${  this.props.hotspot}`);
         }
       });
     }
diff --git a/scripts/components/HUD/Buttons/AudioButton.js b/scripts/components/HUD/Buttons/AudioButton.js
index 8fbec47..c19e734 100644
--- a/scripts/components/HUD/Buttons/AudioButton.js
+++ b/scripts/components/HUD/Buttons/AudioButton.js
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { H5PContext } from '../../../context/H5PContext';
-import Button from './Button/Button';
 
 export default class AudioButton extends React.Component {
   constructor(props) {
@@ -13,13 +12,12 @@ export default class AudioButton extends React.Component {
 
   /**
    * Determine player ID from given props
-   *
-   * @param {Object} props
-   * @return {string}
+   * @param {object} props React props.
+   * @returns {string|undefined} Player ID.
    */
   getPlayerId(props) {
     if (props.sceneId !== undefined && props.sceneAudioTrack && props.sceneAudioTrack.length) {
-      return 'scene-' + props.sceneId;
+      return `scene-${  props.sceneId}`;
     }
     if (this.context.behavior.audio && this.context.behavior.audio.length) {
       return 'global';
@@ -28,9 +26,8 @@ export default class AudioButton extends React.Component {
 
   /**
    * Get track from given player ID
-   *
-   * @param {string} props
-   * @return {Array}
+   * @param {string} id Player ID.
+   * @returns {object} Audio track.
    */
   getTrack(id) {
     return id === 'global' ? this.context.behavior.audio : this.props.sceneAudioTrack;
@@ -38,9 +35,8 @@ export default class AudioButton extends React.Component {
 
   /**
    * Get the audio player for the current track.
-   *
-   * @param {string} id
-   * @return {AudioElement} or 'null' if track isn't playable.
+   * @param {string} id Audio player id.
+   * @returns {HTMLAudioElement} or 'null' if track isn't playable.
    */
   getPlayer(id) {
     if (!id) {
@@ -76,7 +72,8 @@ export default class AudioButton extends React.Component {
       if (id === this.props.isPlaying) {
         // Pause and reset the player
         player.pause();
-      } else {
+      }
+      else {
         // Start the playback!
         player.play();
       }
@@ -103,6 +100,7 @@ export default class AudioButton extends React.Component {
 
   /**
    * React - runs after render.
+   * @param {object} prevProps Previous props.
    */
   componentDidUpdate(prevProps) {
     if (this.props.isPlaying && this.props.isPlaying !== prevProps.isPlaying) {
@@ -143,6 +141,7 @@ export default class AudioButton extends React.Component {
 
   /**
    * React - adds dom elements.
+   * @returns {HTMLElement} React element
    */
   render() {
     const id = this.getPlayerId(this.props);
@@ -150,7 +149,7 @@ export default class AudioButton extends React.Component {
       return null;
     }
 
-    const type = 'audio-track' + (this.props.isPlaying === id ? ' active' : '');
+    const type = `audio-track${  this.props.isPlaying === id ? ' active' : ''}`;
     return (
       <Button
         type={type}
@@ -167,42 +166,39 @@ export default class AudioButton extends React.Component {
 
   /**
    * Determine if the ID of the player belongs to a scene audio track.
-   *
-   * @param {string} id
-   * @return {boolean}
+   * @param {string} id Audio player id.
+   * @returns {boolean} True if the ID belongs to a scene audio.
    */
   static isSceneAudio(id) {
-    return id && (id === 'global' || id.substr(0, 6) === 'scene-');
+    return id && (id === 'global' || id.startsWith('scene-'));
   }
 
   /**
    * Determine if the ID of the player belongs to a scene audio track.
-   *
-   * @param {string} id
-   * @return {boolean}
+   * @param {string} id Audio player id.
+   * @returns {boolean} True if the ID belongs to an interaction audio.
    */
   static isInteractionAudio(id) {
-    return id && id.substr(0, 12) === 'interaction-';
+    return id?.startsWith('interaction-');
   }
 
   /**
    * Determine if the ID of the player belongs to a video interaction.
-   *
-   * @param {string} id
-   * @return {boolean}
+   * @param {string} id Audio player id.
+   * @returns {boolean} True if the ID belongs to a video interaction.
    */
   static isVideoAudio(id) {
-    return id && id.substr(0, 6) === 'video-';
+    return id?.startsWith('video-');
   }
 
   /**
    * Help create the audio player and find the approperiate source.
-   *
    * @param {number} id Content ID
-   * @param {Array} sources
+   * @param {object} sources Source elements.
    * @param {function} onPlay Callback
    * @param {function} onStop Callback
-   * @param {boolean} loop
+   * @param {boolean} loop True if the audio should loop.
+   * @returns {null|HTMLAudioElement} Audio or 'null' if track isn't playable
    */
   static createAudioPlayer(id, sources, onPlay, onStop, loop) {
     // Check if browser supports audio.
@@ -221,7 +217,8 @@ export default class AudioButton extends React.Component {
 
     if (!player.children.length) {
       player = null; // Not supported
-    } else {
+    }
+    else {
       player.controls = false;
       player.preload = 'auto';
       player.loop = loop;
diff --git a/scripts/components/HUD/Buttons/Button/Button.js b/scripts/components/HUD/Buttons/Button/Button.js
index accb294..cfba4c1 100644
--- a/scripts/components/HUD/Buttons/Button/Button.js
+++ b/scripts/components/HUD/Buttons/Button/Button.js
@@ -8,29 +8,30 @@ export default class Button extends React.Component {
 
   handleClick() {
     if (!this.props.disabled) {
-      console.log(this.props);
-      this.props.onClick(); 
+      this.props.onClick();
     }
   }
 
   /**
    * React - after render
+   * @param {object} prevProps Previous props.
    */
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (prevProps.nextFocus !== this.props.nextFocus && this.props.type === this.props.nextFocus) {
       this.element.focus();
     }
   }
 
   /**
-   * React - create DOM elements
+   * React - create DOM elements.
+   * @returns {HTMLElement} React element.
    */
   render() {
     return (
       <div className='btn-wrap'>
         <button
           ref={(el) => (this.element = el)}
-          className={'hud-btn ' + this.props.type}
+          className={`hud-btn ${  this.props.type}`}
           onClick={this.handleClick.bind(this)}
           aria-label={this.props.label}
           disabled={!!this.props.disabled}
diff --git a/scripts/components/HUD/HUD.js b/scripts/components/HUD/HUD.js
index 5ac30a1..9a8e72e 100644
--- a/scripts/components/HUD/HUD.js
+++ b/scripts/components/HUD/HUD.js
@@ -2,7 +2,6 @@ import React from 'react';
 import './HUD.scss';
 
 import { H5PContext } from '../../context/H5PContext';
-import Button from './Buttons/Button/Button';
 
 export default class HUD extends React.Component {
   constructor(props) {
@@ -13,9 +12,8 @@ export default class HUD extends React.Component {
 
   /**
    * Help pick the audio track for the given scene.
-   *
-   * @param {Object} scene
-   * @return {Object}
+   * @param {object} scene Scene object.
+   * @returns {object} Props for the audio track.
    */
   getSceneAudioTrack(scene) {
     const props = {
@@ -39,6 +37,7 @@ export default class HUD extends React.Component {
 
   /**
    * React - create DOM elements
+   * @returns {HTMLElement} React element.
    */
   render() {
     return (
diff --git a/scripts/components/LoadingSpinner/LoadingSpinner.js b/scripts/components/LoadingSpinner/LoadingSpinner.js
index 6e832d7..bd63c77 100644
--- a/scripts/components/LoadingSpinner/LoadingSpinner.js
+++ b/scripts/components/LoadingSpinner/LoadingSpinner.js
@@ -1,7 +1,6 @@
-import React from 'react';
 import './LoadingSpinner.scss';
 
-const LoadingSpinner = (props) => {
+const LoadingSpinner = () => {
   return (
     <div id='outer'>
       <div id='middle'>
diff --git a/scripts/components/Main.js b/scripts/components/Main.js
index 0a13a91..566328f 100644
--- a/scripts/components/Main.js
+++ b/scripts/components/Main.js
@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Main.scss';
 import { H5PContext } from '../context/H5PContext';
-import ModelViewer from './ModelViewer/ModelViewer';
-import Dialog from './Dialog/Dialog';
-import InteractionContent from './Dialog/InteractionContent';
 import { getModelFromId } from '../h5phelpers/modelParams.js';
-import HUD from './HUD/HUD';
-import LoadingSpinner from './LoadingSpinner/LoadingSpinner.js';
+
+/** @constant {number} LOADING_SPINNER_TIMEOUT_SHORT_MS Short timeout to hide loading spinner. */
+const LOADING_SPINNER_TIMEOUT_SHORT_MS = 500;
+
+/** @constant {number} LOADING_SPINNER_TIMEOUT_MS Timeout to hide loading spinner. */
+const LOADING_SPINNER_TIMEOUT_MS = 5000;
 
 export default class Main extends React.Component {
   constructor(props) {
@@ -48,16 +49,16 @@ export default class Main extends React.Component {
         this.setState({
           loadingSpinner: false,
         });
-      }, 5000);
+      }, LOADING_SPINNER_TIMEOUT_MS);
     });
     setTimeout(() => {
       this.setState({
         loadingSpinner: false,
       });
-    }, 5000);
+    }, LOADING_SPINNER_TIMEOUT_MS);
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
     // Check if a specific prop or state has changed to trigger the update logic
     const modelViewer = document.getElementById('model-viewer');
 
@@ -80,14 +81,13 @@ export default class Main extends React.Component {
         this.setState({
           loadingSpinner: false,
         });
-      }, 500);
-      console.log(1);
+      }, LOADING_SPINNER_TIMEOUT_SHORT_MS);
     });
     setTimeout(() => {
       this.setState({
         loadingSpinner: false,
       });
-    }, 5000);
+    }, LOADING_SPINNER_TIMEOUT_MS);
   }
 
   componentWillUnmount() {
@@ -97,10 +97,9 @@ export default class Main extends React.Component {
 
   /**
    * Get the audio player for the current track.
-   *
-   * @param {string} id
-   * @param {Object} [hotspot] Parameters (Only needed initially)
-   * @return {AudioElement} or 'null' if track isn't playable.
+   * @param {string} id Audio player id.
+   * @param {object} [hotspot] Parameters (Only needed initially)
+   * @returns {HTMLAudioElement|undefined} Audio or `undefined` if track isn't playable.
    */
   getAudioPlayer(id, hotspot) {
     // Create player if none exist
@@ -156,13 +155,13 @@ export default class Main extends React.Component {
     this.props.setCurrentModelId(nextModelId);
   }
 
-  handleModelClick(event) {
+  handleModelClick() {
     // retrieve clicked point on 3D Model from model-viewer instance
     if (this.state.editingLibrary) {
-      const clickedPoint = this.state.modelViewerInstance.surfaceFromPoint(
-        event.clientX,
-        event.clientY
-      );
+      // const clickedPoint = this.state.modelViewerInstance.surfaceFromPoint(
+      //   event.clientX,
+      //   event.clientY
+      // );
 
       this.setState({
         //showHotspotDialog: true,
@@ -176,7 +175,8 @@ export default class Main extends React.Component {
 
     if (modelViewerInstance.paused) {
       modelViewerInstance.play();
-    } else {
+    }
+    else {
       modelViewerInstance.pause();
     }
   }
@@ -189,7 +189,7 @@ export default class Main extends React.Component {
   }
 
   hideInteraction() {
-    this.setState((prevState) => ({
+    this.setState(() => ({
       showInteractionDialog: false,
       hotspot: null,
     }));
@@ -212,8 +212,9 @@ export default class Main extends React.Component {
 
       const nextModelId = parseInt(hotspot.action.params.nextSceneId);
       this.navigateToModel(nextModelId);
-    } else if (hotspot.action.metadata.contentType !== 'Text') {
-      const playerId = 'interaction' + '-' + index;
+    }
+    else if (hotspot.action.metadata.contentType !== 'Text') {
+      const playerId = 'interaction' + `-${  index}`;
       if (this.state.audioIsPlaying === playerId) {
         // Pause and reset player
         const lastPlayer = this.getAudioPlayer(playerId, hotspot);
@@ -221,7 +222,8 @@ export default class Main extends React.Component {
           lastPlayer.pause();
           lastPlayer.currentTime = 0;
         }
-      } else {
+      }
+      else {
         // Start current audio playback
         const player = this.getAudioPlayer(playerId, hotspot);
         if (player) {
@@ -232,7 +234,8 @@ export default class Main extends React.Component {
       this.setState({
         showInteractionDialog: true,
       });
-    } else {
+    }
+    else {
       this.setState({
         showInteractionDialog: true,
       });
diff --git a/scripts/components/ModelViewer/ModelViewer.js b/scripts/components/ModelViewer/ModelViewer.js
index e31aa36..76af156 100644
--- a/scripts/components/ModelViewer/ModelViewer.js
+++ b/scripts/components/ModelViewer/ModelViewer.js
@@ -1,6 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getSource } from '../../context/H5PContext';
 
+/** @constant {number} FILE_PATH_TIMEOUT_MS File path setting timeout. */
+const FILE_PATH_TIMEOUT_MS = 500;
+
 const ModelViewer = (props) => {
   const { handleClick, hotspots, modelPath, id, showContentModal, contentId, mvInstance } = props;
 
@@ -16,7 +19,7 @@ const ModelViewer = (props) => {
     const timeoutId = setTimeout(() => {
       sethotspots(hotspots);
       setFilePath(getSource(modelPath, contentId));
-    }, 500);
+    }, FILE_PATH_TIMEOUT_MS);
 
     return () => clearTimeout(timeoutId);
   }, [hotspots]);
diff --git a/scripts/context/H5PContext.js b/scripts/context/H5PContext.js
index 0584f1f..b6a5023 100644
--- a/scripts/context/H5PContext.js
+++ b/scripts/context/H5PContext.js
@@ -3,6 +3,7 @@ import React from 'react';
 /**
  * Get absolute path to image from relative parameters path
  * @param {string} path Relative path as found in content parameters
+ * @param {string} contentId Content id.
  * @returns {string} Absolute path to image
  */
 export const getSource = (path, contentId) => {
@@ -16,7 +17,6 @@ export const getInteractionsField = (field) => {
 };
 
 export const getModelField = (field) => {
-  console.log(H5P.Virtual3DTour.findSemanticsField('modelViewerWidget', field));
   return H5P.Virtual3DTour.findSemanticsField('modelViewerWidget', field);
 };
 
diff --git a/scripts/h5phelpers/editorForms.js b/scripts/h5phelpers/editorForms.js
index 2b8cf72..2526f28 100644
--- a/scripts/h5phelpers/editorForms.js
+++ b/scripts/h5phelpers/editorForms.js
@@ -1,10 +1,9 @@
 import { getLibraries } from '../context/H5PContext';
 
 /**
- * Get scenes field from Three Image semantics structure
- *
- * @param field
- * @returns {Object}
+ * Get scenes field from Three Image semantics structure.
+ * @param {string} field Name of the field we wish to find.
+ * @returns {null|object} Field if found, otherwise null.
  */
 export const getModelField = (field) => {
   return H5PEditor.findSemanticsField('modelViewerWidget', field);
@@ -12,10 +11,9 @@ export const getModelField = (field) => {
 
 /**
  * Get interactions field within a scene from the Three Image semantics
- * structure
- *
- * @param field
- * @returns {Object}
+ * structure.
+ * @param {string} field Name of the field we wish to find.
+ * @returns {null|object} Field if found, otherwise null.
  */
 export const getInteractionsField = (field) => {
   const modelFields = getModelField(field);
@@ -25,10 +23,9 @@ export const getInteractionsField = (field) => {
 
 /**
  * Get library data for a single library
- *
- * @param field
- * @param library
- * @returns {Promise<*>}
+ * @param {object} field Field object.
+ * @param {string} library Library name
+ * @returns {Promise<*>} Library data.
  */
 export const getLibraryDataFromFields = async (field, library) => {
   const libraries = await getLibraries(field);
@@ -39,9 +36,8 @@ export const getLibraryDataFromFields = async (field, library) => {
 
 /**
  * Checks if children are valid and sets error messages for invalid fields.
- *
- * @param children
- * @returns {boolean}
+ * @param {object[]} children Children to validate.
+ * @returns {boolean} True if all children are valid.
  */
 export const isChildrenValid = (children) => {
   let isInputsValid = true;
diff --git a/scripts/h5phelpers/libraryParams.js b/scripts/h5phelpers/libraryParams.js
index e0215f3..8f032f9 100644
--- a/scripts/h5phelpers/libraryParams.js
+++ b/scripts/h5phelpers/libraryParams.js
@@ -5,10 +5,9 @@ export const Libraries = {
 };
 
 /**
- * Get default params for a library
- *
- * @param uberName
- * @returns {{interactionpos: string, action: {library: *, params: {}}}}
+ * Get default params for a library.
+ * @param {string} uberName Library name.
+ * @returns {{interactionpos: string, action: {library: *, params: {}}}} Default params.
  */
 export const getDefaultLibraryParams = (uberName) => {
   return {
@@ -22,9 +21,8 @@ export const getDefaultLibraryParams = (uberName) => {
 
 /**
  * Checks if an interaction is a GoToScene library
- *
- * @param interaction
- * @returns {boolean}
+ * @param {object} interaction Interaction parameters.
+ * @returns {boolean} True if the interaction is a GoToScene library.
  */
 export const isGoToScene = (interaction) => {
   const library = H5P.libraryFromString(interaction.action.library);
diff --git a/scripts/utils/sanitization.js b/scripts/utils/sanitization.js
index 3051f00..676a110 100644
--- a/scripts/utils/sanitization.js
+++ b/scripts/utils/sanitization.js
@@ -1,40 +1,5 @@
 import { extend, purifyHTML } from './utils.js';
 
-/**
- * Set interaction defaults.
- * @param {object} interactions Scene parameters.
- * @returns {object} Sanitized scene parameters.
- */
-const setInteractionDefaults = (interactions) => {
-  interactions = interactions.map((interaction) => {
-    interaction = extend(
-      {
-        label: {
-          labelPosition: 'inherit',
-          showLabel: 'inherit',
-        },
-        ...(interaction.showAsHotspot && {
-          hotspotSettings: {
-            isHotspotTabbable: true,
-            hotSpotSizeValues: '256,128',
-          },
-          iconTypeTextBox: 'text-icon',
-        }),
-      },
-      interaction
-    );
-
-    // Add unique id as key for mapping React components.
-    if (!interaction.id) {
-      interaction.id = H5P.createUUID();
-    }
-
-    return interaction;
-  });
-
-  return interactions;
-};
-
 /**
  * Sanitize the content type's parameters.
  * @param {object} params Parameters.