refactor: use h5p iframe integration

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.

package.json

@@ -7,7 +7,7 @@
     "@graasp/chatbox": "github:graasp/graasp-chatbox.git",
     "@graasp/query-client": "github:graasp/graasp-query-client.git",
     "@graasp/translations": "github:graasp/graasp-translations.git",
-    "@graasp/ui": "github:graasp/graasp-ui.git#126-add-h5p",
+    "@graasp/ui": "github:graasp/graasp-ui.git",
     "@graasp/utils": "github:graasp/graasp-utils.git",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "5.0.0-beta.5",
@@ -97,7 +97,7 @@
     "@commitlint/config-conventional": "16.2.1",
     "@cypress/code-coverage": "3.9.12",
     "@cypress/instrument-cra": "1.4.0",
-    "@graasp/websockets": "github:graasp/graasp-websockets.git#master",
+    "@graasp/websockets": "github:graasp/graasp-websockets.git",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",

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}
         />
       );
     }

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';

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,

yarn.lock

@@ -2075,9 +2075,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@github:graasp/graasp-ui.git#126-add-h5p":
+"@graasp/ui@github:graasp/graasp-ui.git":
   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=8e38ca1792bc922cfaff872551620ef8a20db7c9"
   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: 59d4db944de392c52414a77f3f01b2fda6d5e0782fd6fa3f6b9544439cd160660d406bdb756bbf2755cd10bf4fc1391dcd9cfbf1c83049217dc2e50b62c3f2e2
   languageName: node
   linkType: hard
 
@@ -2127,7 +2127,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/websockets@github:graasp/graasp-websockets.git#master":
+"@graasp/websockets@github:graasp/graasp-websockets.git":
   version: 1.0.0
   resolution: "@graasp/websockets@https://github.com/graasp/graasp-websockets.git#commit=3977527ed1dd6d4c8b90681c586897243d4f49cf"
   dependencies:
@@ -10507,9 +10507,9 @@ __metadata:
     "@graasp/chatbox": "github:graasp/graasp-chatbox.git"
     "@graasp/query-client": "github:graasp/graasp-query-client.git"
     "@graasp/translations": "github:graasp/graasp-translations.git"
-    "@graasp/ui": "github:graasp/graasp-ui.git#126-add-h5p"
+    "@graasp/ui": "github:graasp/graasp-ui.git"
     "@graasp/utils": "github:graasp/graasp-utils.git"
-    "@graasp/websockets": "github:graasp/graasp-websockets.git#master"
+    "@graasp/websockets": "github:graasp/graasp-websockets.git"
     "@material-ui/core": 4.12.3
     "@material-ui/icons": 5.0.0-beta.5
     "@material-ui/lab": 4.0.0-alpha.60