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.