refactor: use h5p iframe integration

graasp · Aug 16, 2022 · a9ac7c4 · a9ac7c4
1 parent b9ef8f1
commit a9ac7c4
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -11,8 +11,7 @@ REACT_APP_API_HOST=http://localhost:3000
 PORT=3111
 REACT_APP_SHOW_NOTIFICATIONS=true
 REACT_APP_AUTHENTICATION_HOST=http://localhost:3001
-REACT_APP_H5P_ASSETS_BASE_URL=http://localhost:3000/p/h5p-assets
-REACT_APP_H5P_CONTENT_BASE_URL=http://localhost:3000/p/h5p-content
+REACT_APP_H5P_INTEGRATION_URL=
 ```
 
 4. Run `yarn start`. The client should be accessible at `localhost:3111`
@@ -38,8 +37,7 @@ REACT_APP_API_HOST=http://localhost:3000
 PORT=3111
 REACT_APP_SHOW_NOTIFICATIONS=false
 REACT_APP_NODE_ENV=test
-REACT_APP_H5P_ASSETS_BASE_URL=http://localhost:3000/p/h5p-assets
-REACT_APP_H5P_CONTENT_BASE_URL=http://localhost:3000/p/h5p-content
+REACT_APP_H5P_INTEGRATION_URL=
 ```
 
 Run `yarn cypress`. This should run every tests headlessly.

diff --git a/src/components/item/ItemContent.js b/src/components/item/ItemContent.js
@@ -1,9 +1,15 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { Map } from 'immutable';
+import { Api, MUTATION_KEYS } from '@graasp/query-client';
+import { AppItem, DocumentItem, FileItem, H5PItem, LinkItem } from '@graasp/ui';
 import { makeStyles } from '@material-ui/core';
-import { FileItem, DocumentItem, LinkItem, AppItem, H5PItem } from '@graasp/ui';
-import { MUTATION_KEYS, Api } from '@graasp/query-client';
+import { Map } from 'immutable';
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import {
+  API_HOST,
+  CONTEXT_BUILDER,
+  H5P_INTEGRATION_URL,
+  ITEM_DEFAULT_HEIGHT,
+} from '../../config/constants';
 import { hooks, useMutation } from '../../config/queryClient';
 import {
   buildFileItemId,
@@ -13,25 +19,14 @@ import {
   ITEM_SCREEN_ERROR_ALERT_ID,
 } from '../../config/selectors';
 import { ITEM_KEYS, ITEM_TYPES } from '../../enums';
-import Loader from '../common/Loader';
+import { buildDocumentExtra, getDocumentExtra } from '../../utils/itemExtra';
 import ErrorAlert from '../common/ErrorAlert';
-import {
-  API_HOST,
-  ITEM_DEFAULT_HEIGHT,
-  CONTEXT_BUILDER,
-  H5P_ASSETS_BASE_URL,
-} from '../../config/constants';
+import Loader from '../common/Loader';
+import { CurrentUserContext } from '../context/CurrentUserContext';
 import { LayoutContext } from '../context/LayoutContext';
+import ItemActions from '../main/ItemActions';
 import Items from '../main/Items';
-import { buildDocumentExtra, getDocumentExtra } from '../../utils/itemExtra';
 import NewItemButton from '../main/NewItemButton';
-import { CurrentUserContext } from '../context/CurrentUserContext';
-import {
-  buildServeH5PContentURL,
-  H5P_FRAME_CSS_PATH,
-  H5P_FRAME_JS_PATH,
-} from '../../config/h5p';
-import ItemActions from '../main/ItemActions';
 
 const { useChildren, useFileContent } = hooks;
 
@@ -180,20 +175,16 @@ const ItemContent = ({ item, enableEditing, permission }) => {
         </>
       );
     case ITEM_TYPES.H5P: {
-      const h5pContentPath = item.get('extra')?.h5p?.contentFilePath;
-      if (!h5pContentPath) {
+      const contentId = item.get('extra')?.h5p?.contentId;
+      if (!contentId) {
         return <ErrorAlert id={ITEM_SCREEN_ERROR_ALERT_ID} />;
       }
 
       return (
         <H5PItem
           itemId={itemId}
-          h5pAssetsHost={H5P_ASSETS_BASE_URL}
-          playerOptions={{
-            h5pJsonPath: buildServeH5PContentURL(h5pContentPath),
-            frameJs: H5P_FRAME_JS_PATH,
-            frameCss: H5P_FRAME_CSS_PATH,
-          }}
+          contentId={contentId}
+          integrationUrl={H5P_INTEGRATION_URL}
         />
       );
     }

diff --git a/src/config/constants.js b/src/config/constants.js
@@ -1,6 +1,6 @@
-import { Context, buildSignInPath } from '@graasp/utils';
+import { buildSignInPath, Context } from '@graasp/utils';
+import { ITEM_LAYOUT_MODES, ITEM_TYPES, PERMISSION_LEVELS } from '../enums';
 import env from '../env.json';
-import { ITEM_LAYOUT_MODES, PERMISSION_LEVELS, ITEM_TYPES } from '../enums';
 
 const {
   API_HOST: ENV_API_HOST,
@@ -11,8 +11,7 @@ const {
   GA_MEASUREMENT_ID: ENV_GA_MEASUREMENT_ID,
   HIDDEN_ITEM_TAG_ID: ENV_HIDDEN_ITEM_TAG_ID,
   GRAASP_EXPLORE_HOST: ENV_GRAASP_EXPLORE_HOST,
-  H5P_ASSETS_BASE_URL: ENV_H5P_ASSETS_BASE_URL,
-  H5P_CONTENT_BASE_URL: ENV_H5P_CONTENT_BASE_URL,
+  H5P_INTEGRATION_URL: ENV_H5P_INTEGRATION_URL,
   REACT_APP_SENTRY_DSN: ENV_SENTRY_DSN,
   DOMAIN: ENV_DOMAIN,
 } = env;
@@ -55,15 +54,10 @@ export const GRAASP_EXPLORE_HOST =
   process.env.REACT_APP_GRAASP_EXPLORE_HOST ||
   'http://localhost:3005';
 
-export const H5P_ASSETS_BASE_URL =
-  ENV_H5P_ASSETS_BASE_URL ||
-  process.env.REACT_APP_H5P_ASSETS_BASE_URL ||
-  `${API_HOST}/p/h5p-assets`;
-
-export const H5P_CONTENT_BASE_URL =
-  ENV_H5P_CONTENT_BASE_URL ||
-  process.env.REACT_APP_H5P_CONTENT_BASE_URL ||
-  `${API_HOST}/p/h5p-content`;
+export const H5P_INTEGRATION_URL =
+  ENV_H5P_INTEGRATION_URL ||
+  process.env.REACT_APP_H5P_INTEGRATION_URL ||
+  `${API_HOST}/p/h5p-integration`;
 
 export const GRAASP_ANALYZER_HOST =
   process.env.REACT_APP_GRAASP_ANALYZER_HOST || 'http://localhost:3113';

diff --git a/src/config/h5p.js b/src/config/h5p.js
diff --git a/src/env.json b/src/env.json
@@ -5,8 +5,7 @@
   "NODE_ENV": false,
   "GRAASP_PERFORM_HOST": false,
   "GRAASP_EXPLORE_HOST": false,
-  "H5P_ASSETS_BASE_URL": false,
-  "H5P_CONTENT_BASE_URL": false,
+  "H5P_INTEGRATION_URL": false,
   "GA_MEASUREMENT_ID": false,
   "HIDDEN_ITEM_TAG_ID": false,
   "REACT_APP_SENTRY_DSN": false,

diff --git a/yarn.lock b/yarn.lock
@@ -2077,7 +2077,7 @@ __metadata:
 
 "@graasp/ui@github:graasp/graasp-ui.git#126-add-h5p":
   version: 0.2.0
-  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=5c796319558096662f28d48ab3912b7de56bb3c9"
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=20dd062c74b1b8760216908934b8a08a8df7c42c"
   dependencies:
     "@graasp/sdk": "github:graasp/graasp-sdk.git"
     clsx: 1.1.1
@@ -2107,7 +2107,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: 109aac88309c7c4b188db83c38ff0188aaafe190df7e3cf56c70c44b2eb060caa71c951cb2653443110fdb3ec64d52d892eb8d5159224a868e37867c6eca57f3
+  checksum: 0c8ae2c41abd1a3c5e181341e53fcbdafe9b18c4a379b10f63f77978f4bb55063782fdeea0da51c114e5130c8feb005a582024c7d7753a97cf8ed6ce296c9e97
   languageName: node
   linkType: hard