Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: integrate H5P apps display #99

Merged
merged 8 commits into from
Aug 17, 2022
Merged

feat: integrate H5P apps display #99

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c8db71e
feat: integrate H5P apps display
codeofmochi Jun 16, 2022
bfdc65e
Merge remote-tracking branch 'origin/main' into 97-add-h5p
codeofmochi Aug 8, 2022
d4a9fde
refactor: use iframe h5p integration
codeofmochi Aug 15, 2022
6a9f1f2
fix: buildGetMembersBy, update @graasp/ui
codeofmochi Aug 16, 2022
c7cc784
chore: add integration URL to workflows
codeofmochi Aug 16, 2022
2c6fa71
Merge remote-tracking branch 'origin' into 97-add-h5p
codeofmochi Aug 16, 2022
810bdac
Merge remote-tracking branch 'origin/main' into 97-add-h5p
codeofmochi Aug 17, 2022
493f402
chore: update @graasp/ui
codeofmochi Aug 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ REACT_APP_API_HOST=http://localhost:3000
PORT=3112
REACT_APP_SHOW_NOTIFICATIONS=true
REACT_APP_AUTHENTICATION_HOST=http://localhost:3001
REACT_APP_H5P_ASSETS_HOST=https://graasp-h5p.s3.eu-central-1.amazonaws.com
codeofmochi marked this conversation as resolved.
Show resolved Hide resolved
REACT_APP_H5P_CONTENT_HOST=http://localhost:3000/p
codeofmochi marked this conversation as resolved.
Show resolved Hide resolved
```

4. Run `yarn start`. The client should be accessible at `localhost:3112`
Expand All @@ -24,6 +26,8 @@ REACT_APP_API_HOST=http://localhost:3000
PORT=3112
REACT_APP_SHOW_NOTIFICATIONS=false
REACT_APP_NODE_ENV=test
REACT_APP_H5P_ASSETS_HOST=https://graasp-h5p.s3.eu-central-1.amazonaws.com
REACT_APP_H5P_CONTENT_HOST=http://localhost:3000/p
```

Run `yarn cypress`. This should run every tests headlessly.
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"@emotion/styled": "11.8.1",
"@graasp/chatbox": "github:graasp/graasp-chatbox.git#main",
"@graasp/query-client": "github:graasp/graasp-query-client.git",
"@graasp/ui": "github:graasp/graasp-ui.git",
"@graasp/ui": "github:graasp/graasp-ui.git#126-add-h5p",
"@material-ui/core": "4.12.3",
"@material-ui/icons": "5.0.0-beta.4",
"@material-ui/lab": "4.0.0-alpha.60",
Expand Down
34 changes: 33 additions & 1 deletion src/components/common/Item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
DocumentItem,
LinkItem,
AppItem,
H5PItem,
TextEditor,
withCollapse,
} from '@graasp/ui';
Expand All @@ -23,8 +24,17 @@ import {
buildFolderButtonId,
FOLDER_NAME_TITLE_CLASS,
} from '../../config/selectors';
import { API_HOST, SCREEN_MAX_HEIGHT } from '../../config/constants';
import {
API_HOST,
H5P_ASSETS_HOST,
SCREEN_MAX_HEIGHT,
} from '../../config/constants';
import { isHidden } from '../../utils/item';
import {
buildServeH5PContentURL,
H5P_FRAME_CSS_PATH,
H5P_FRAME_JS_PATH,
} from '../../config/h5p';

const { useItem, useChildren, useFileContent, useCurrentMember, useItemTags } =
hooks;
Expand Down Expand Up @@ -173,6 +183,28 @@ const Item = ({ id, isChildren, showPinnedOnly }) => {
}
return appItem;
}

case ITEM_TYPES.H5P: {
const h5pContentPath = item.get('extra')?.h5p?.contentFilePath;
if (!h5pContentPath) {
return (
<Alert severity="error">{t('An unexpected error occured.')}</Alert>
);
}

return (
<H5PItem
itemId={id}
h5pAssetsHost={H5P_ASSETS_HOST}
playerOptions={{
h5pJsonPath: buildServeH5PContentURL(h5pContentPath),
frameJs: H5P_FRAME_JS_PATH,
frameCss: H5P_FRAME_CSS_PATH,
}}
/>
);
}

default:
console.error(`The type ${item?.get('type')} is not defined`);
return null;
Expand Down
12 changes: 12 additions & 0 deletions src/config/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ const {
SHOW_NOTIFICATIONS: ENV_SHOW_NOTIFICATIONS,
AUTHENTICATION_HOST: ENV_AUTHENTICATION_HOST,
GRAASP_COMPOSE_HOST: ENV_GRAASP_COMPOSE_HOST,
H5P_ASSETS_HOST: ENV_H5P_ASSETS_HOST,
H5P_CONTENT_HOST: ENV_H5P_CONTENT_HOST,
NODE_ENV: ENV_NODE_ENV,
GA_MEASUREMENT_ID: ENV_GA_MEASUREMENT_ID,
HIDDEN_ITEM_TAG_ID: ENV_HIDDEN_ITEM_TAG_ID,
Expand Down Expand Up @@ -40,6 +42,16 @@ export const GRAASP_COMPOSE_HOST =
process.env.REACT_APP_GRAASP_COMPOSE_HOST ||
'http://localhost:3111';

export const H5P_ASSETS_HOST =
ENV_H5P_ASSETS_HOST ||
process.env.REACT_APP_H5P_ASSETS_HOST ||
'http://localhost:3000/p/h5p-content';

export const H5P_CONTENT_HOST =
ENV_H5P_CONTENT_HOST ||
process.env.REACT_APP_H5P_CONTENT_HOST ||
'http://localhost:3000/p';

export const HIDDEN_ITEM_TAG_ID =
ENV_HIDDEN_ITEM_TAG_ID || process.env.REACT_APP_HIDDEN_ITEM_TAG_ID || false;

Expand Down
5 changes: 5 additions & 0 deletions src/config/h5p.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { H5P_ASSETS_HOST, H5P_CONTENT_HOST } from './constants';

export const H5P_FRAME_JS_PATH = `${H5P_ASSETS_HOST}/frame.bundle.js`;
export const H5P_FRAME_CSS_PATH = `${H5P_ASSETS_HOST}/styles/h5p.css`;
export const buildServeH5PContentURL = (contentPath) => `${H5P_CONTENT_HOST}/${contentPath}`;
1 change: 1 addition & 0 deletions src/enums/itemTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const ITEM_TYPES = {
SHORTCUT: 'shortcut',
DOCUMENT: 'document',
APP: 'app',
H5P: 'h5p',
};

Object.freeze(ITEM_TYPES);
Expand Down
5 changes: 4 additions & 1 deletion src/env.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
"SHOW_NOTIFICATIONS": false,
"AUTHENTICATION_HOST": false,
"NODE_ENV": false,
"GRAASP_COMPOSE_HOST": false,
"H5P_ASSETS_HOST": false,
"H5P_CONTENT_HOST": false,
"GA_MEASUREMENT_ID": false,
"HIDDEN_ITEM_TAG_ID": false
}
}
102 changes: 100 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2161,7 +2161,36 @@ __metadata:
i18next: 21.3.1
react: ^16.13.1
react-dom: 16.13.1
checksum: bec28ddb56842cf6e15d0afee9f3b313df3cc50347a513089ffc2886569fddcd0da0d34d9668e08445b6bec7d7dbe58c287a7bf2790a712fec7378d5b7f2b403
checksum: 239a5420f04b23602f7cb52a317c341f8f22a8888261a85a19bffaa38defe18391e54d88d8a7188517f575945ffdcb9458dd2410ecf001b602cc2f9d81fd64a1
languageName: node
linkType: hard

"@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=a94d0bdcff998fb4e9b1e0fb13a64e60a2e492da"
dependencies:
"@graasp/utils": "github:graasp/graasp-utils.git"
ag-grid-community: 27.3.0
ag-grid-react: 27.3.0
clsx: 1.1.1
h5p-standalone: 3.5.1
http-status-codes: 2.2.0
immutable: 4.0.0
katex: 0.15.3
qs: 6.10.3
react-cookie-consent: 7.4.1
react-i18next: 11.16.9
react-quill: 1.3.5
react-text-mask: 5.4.3
uuid: 8.3.2
peerDependencies:
"@material-ui/core": 4.11.0
"@material-ui/icons": 4.9.1
"@material-ui/lab": 4.0.0-alpha.58
i18next: 21.3.1
react: ^16.13.1
react-dom: 16.13.1
checksum: 5bdb2eebfd761ce8a9a5a4559ecb5ac72858456a0dcebf137c4c3138df011ddfb19ac459794e8c5cfadaaec677c67e717443412a13133f6e10e37189137fdeee
languageName: node
linkType: hard

Expand Down Expand Up @@ -4151,6 +4180,26 @@ __metadata:
languageName: node
linkType: hard

"ag-grid-community@npm:27.3.0":
version: 27.3.0
resolution: "ag-grid-community@npm:27.3.0"
checksum: 3041c188239c50b875d45f82e4de1adfc7170c7338d0c18e504bc4d57bf71906bf291aaee0c59149ad65900e7308268ed5db32ad7f5f2368ef8e9e6b2c156a02
languageName: node
linkType: hard

"ag-grid-react@npm:27.3.0":
version: 27.3.0
resolution: "ag-grid-react@npm:27.3.0"
dependencies:
prop-types: ^15.8.1
peerDependencies:
ag-grid-community: ~27.3.0
react: ^16.3.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.3.0 || ^17.0.0 || ^18.0.0
checksum: 9e4b7dd3649fb9ff2e4f0c63d273c7e76b076c5329812e775e43a0bf367b315e34968874d041001f0f29976160aa4dc62626c60ce4e6fd4f6d4d00f468a54810
languageName: node
linkType: hard

"agent-base@npm:6, agent-base@npm:^6.0.2":
version: 6.0.2
resolution: "agent-base@npm:6.0.2"
Expand Down Expand Up @@ -10186,7 +10235,7 @@ __metadata:
"@emotion/styled": 11.8.1
"@graasp/chatbox": "github:graasp/graasp-chatbox.git#main"
"@graasp/query-client": "github:graasp/graasp-query-client.git"
"@graasp/ui": "github:graasp/graasp-ui.git"
"@graasp/ui": "github:graasp/graasp-ui.git#126-add-h5p"
"@graasp/websockets": "github:graasp/graasp-websockets.git#master"
"@material-ui/core": 4.12.3
"@material-ui/icons": 5.0.0-beta.4
Expand Down Expand Up @@ -10264,6 +10313,13 @@ __metadata:
languageName: node
linkType: hard

"h5p-standalone@npm:3.5.1":
version: 3.5.1
resolution: "h5p-standalone@npm:3.5.1"
checksum: cf291edf47db2c76e2adb3f9e1ae57c164280187b48b821793d91fbc53e5767408f639d5127d72ce68e523722e6519d309b93b310edf454bb7617d26749c6608
languageName: node
linkType: hard

"handle-thing@npm:^2.0.0":
version: 2.0.1
resolution: "handle-thing@npm:2.0.1"
Expand Down Expand Up @@ -12724,6 +12780,17 @@ __metadata:
languageName: node
linkType: hard

"katex@npm:0.15.3":
version: 0.15.3
resolution: "katex@npm:0.15.3"
dependencies:
commander: ^8.0.0
bin:
katex: cli.js
checksum: 12bec82d9ae9f122b9aeafaf2de476e702d12ae19bb9bdd9c8c24126fd81e752047bb856254af98ca54fc51f3bb7f149b3902d65dcdafb5e3deeb691ec4d3db2
languageName: node
linkType: hard

"killable@npm:^1.0.1":
version: 1.0.1
resolution: "killable@npm:1.0.1"
Expand Down Expand Up @@ -16331,6 +16398,18 @@ __metadata:
languageName: node
linkType: hard

"react-cookie-consent@npm:7.4.1":
version: 7.4.1
resolution: "react-cookie-consent@npm:7.4.1"
dependencies:
js-cookie: ^2.2.1
prop-types: ^15.7.2
peerDependencies:
react: ^16.13.1 || ^17.0.0 || ^18.0.0
checksum: 05ab24f7e028da89160baa51c1c2eb62156a98c8e0b55d6548fc95aba8a7e325b06637c1aa1a974b9456f2f1316082dda73ac3b6448fd79ac4cccecda195e4ed
languageName: node
linkType: hard

"react-dev-utils@npm:^11.0.3":
version: 11.0.4
resolution: "react-dev-utils@npm:11.0.4"
Expand Down Expand Up @@ -16416,6 +16495,25 @@ __metadata:
languageName: node
linkType: hard

"react-i18next@npm:11.16.9":
version: 11.16.9
resolution: "react-i18next@npm:11.16.9"
dependencies:
"@babel/runtime": ^7.14.5
html-escaper: ^2.0.2
html-parse-stringify: ^3.0.1
peerDependencies:
i18next: ">= 19.0.0"
react: ">= 16.8.0"
peerDependenciesMeta:
react-dom:
optional: true
react-native:
optional: true
checksum: b79606a0c36a822b3d9a1e4f2bb4b44643c121de9425ddfeea7e63e5136fe33d4b0b42f045f14d53592dcdbde1fb43cd7be4555b22747d2e0f6f754d3a60c711
languageName: node
linkType: hard

"react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.6":
version: 16.13.1
resolution: "react-is@npm:16.13.1"
Expand Down