Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/escolalms/h5p-player
Headless H5P Player and editor components.
https://github.com/escolalms/h5p-player
h5p headless lms react
Last synced: 4 days ago
JSON representation
Headless H5P Player and editor components.
- Host: GitHub
- URL: https://github.com/escolalms/h5p-player
- Owner: EscolaLMS
- Created: 2021-04-14T15:26:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-11T10:04:48.000Z (8 months ago)
- Last Synced: 2024-03-11T11:28:32.582Z (8 months ago)
- Topics: h5p, headless, lms, react
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 5
- Watchers: 2
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# H5P Headless React Components
This package contains React components that are meant to be used with rendering [H5P](https://h5p.org/) Editor and Player while implmenting [Wellms.io](https://www.wellms.io/) Admin Panel and bespoke frontend.
[](https://github.com/EscolaLMS/H5P-player/actions/workflows/ts-doc.yml)
[](https://github.com/EscolaLMS/H5P-player/actions/workflows/tsc.yml)
See isolated implementation here [EscolaLMS/h5p-laravel-demo](https://github.com/EscolaLMS/h5p-laravel-demo/tree/main/resources/js) which is isolated into deployment [https://h5p-laravel-demo.stage.etd24.pl/](https://h5p-laravel-demo.stage.etd24.pl/)
Demo [react source files](https://github.com/EscolaLMS/h5p-laravel-demo/blob/main/resources/js/index.tsx), are great starting point for frontend tutorial.
## Editor
Rending h5p editor with `onSubmit` callback that gets params of new h5p element
Example
```tsx
import React, { useState, useEffect, useCallback } from "react";
import { useParams, useNavigate } from "react-router-dom";
import {
EditorSettings,
H5PEditorContent,
ContextlessEditor as Editor,
} from "@escolalms/h5p-react";
const LANG = "en";
const API_URL = "/api";
const TOKEN = "xxx";
const editorSettings = (id?: string | number, lang: string = "en") => {
let url: string = id
? `${API_URL}/admin/hh5p/editor/${id}`
: `${API_URL}/admin/hh5p/editor`;
url = lang ? `${url}?lang=${lang}` : url;
return fetch(url, {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${TOKEN}`,
},
method: "GET",
});
};
const updateContent = (data: H5PEditorContent, id?: string | number) => {
return fetch(
id
? `${API_URL}/admin/hh5p/content/${id}`
: `${API_URL}/admin/hh5p/content`,
{
method: "POST",
body: JSON.stringify(data),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${TOKEN}`,
},
}
);
};
export const page = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const [settings, setEditorSettings] = useState();
const [loading, setLoading] = useState(false);
useEffect(() => {
if (id) {
setLoading(true);
editorSettings(id === "new" ? undefined : id, LANG)
.then((res) => res.json())
.then((data) => {
setEditorSettings(data.data);
setLoading(false);
});
}
}, [id]);
const onSubmit = useCallback((data: H5PEditorContent) => {
setLoading(true);
updateContent(data, id === "new" ? undefined : id)
.then((resp) => resp.json())
.then((data) => {
if (data.success) {
setLoading(false);
navigate(`/editor/${data.data.id}`);
}
});
}, []);
if (!settings) {
return
loading...
;
}
return (
settings && (
console.error(err)}
state={settings}
allowSameOrigin
onSubmit={onSubmit}
loading={loading}
/>
)
);
};
export default page;
```
## Player
Rending h5p player with `onXAPI` callback that gets params of new h5p element
Player also has option to pass custom styles, which is describes here https://components.wellms.io/#h5player
```tsx
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import {
EditorSettings,
ContextlessPlayer as Player,
} from "@escolalms/h5p-react";
const LANG = "en";
const API_URL = "/api";
const contentSettings = (uuid?: string | number, lang: string = "en") => {
let url: string = `${API_URL}/hh5p/content/${uuid}`;
url = lang ? `${url}?lang=${lang}` : url;
return fetch(url, {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
method: "GET",
});
};
export const page = () => {
const { uuid } = useParams<{ uuid: string }>();
const [settings, setSettings] = useState();
const [loading, setLoading] = useState(false);
useEffect(() => {
if (uuid) {
setLoading(true);
contentSettings(uuid, LANG)
.then((res) => res.json())
.then((data) => {
setSettings(data.data);
setLoading(false);
});
}
}, [uuid]);
if (!settings) {
return
loading...
;
}
if (!uuid) {
return
error: uuid is not set
;
}
if (settings && uuid && uuid !== "") {
return (
console.log("xAPI event", e)}
state={settings}
loading={loading}
/>
Open Developer Tools Console to see xAPI events from this content
);
}
return
error
;
};
export default page;
```
## Documentation
Generated TS Doc is available at [https://escolalms.github.io/H5P-player/](https://escolalms.github.io/H5P-player/).
### TypeScript definitions
```ts
type H5PEditorContent = {
title: string;
library: string;
params: string; // JSON string
nonce: string;
};
export type H5PLibraryLanguage = {
library_id: number;
language_code: string;
translation: {
semantics: {
default?: string;
description?: string;
label: string;
fields: {
entity?: string;
widgets?: { label: string }[];
label: string;
description?: string;
placeholder?: string;
important?: {
description?: string;
example?: string;
};
}[];
}[];
};
};
export type H5PLibrary = {
id: number;
created_at: string;
updated_at: string;
name: string;
title: string;
runnable: number;
restricted: number;
fullscreen: number;
embed_types: string;
semantics: object;
machineName: string;
uberName: string;
majorVersion: string;
major_version: number;
minorVersion: string;
minor_version: number;
patchVersion: string;
patch_version: number;
preloaded_js: string;
preloadedJs: string;
preloaded_css: string;
preloadedCss: string;
dropLibraryCss: string;
drop_library_css: string;
has_icon: string;
tutorialUrl: string;
tutorial_url: string;
hasIcon: string;
libraryId: number;
children: H5PLibrary[];
languages: H5PLibraryLanguage[];
};
export type H5PContent = {
id: number;
uuid: string;
created_at: string;
updated_at: string;
user_id: string | number;
title: string;
library_id: string;
parameters: string;
filtered: string;
slug: string;
embed_type: string;
params: object;
metadata: object;
library: H5PLibrary;
nonce: string;
};
```