{"_id":"@canidigital/h5p-react","name":"@canidigital/h5p-react","dist-tags":{"latest":"0.2.19"},"versions":{"0.2.19":{"name":"@canidigital/h5p-react","version":"0.2.19","dependencies":{"@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.1.0","@testing-library/user-event":"^12.1.10","@types/html-escaper":"^3.0.0","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^17||^18","@types/react-dom":"^17||^18","html-escaper":"^3.0.3","lodash.throttle":"^4.1.1","react":"^17||^18","react-dom":"^17||^18","typescript":"^4.1.2"},"scripts":{"dev":"REACT_APP_ENTRY=app react-scripts start dev.tsx","lib":"tsc --noEmit false --outDir lib --module commonjs && mv lib/exports.js lib/index.js && rm lib/App* lib/setupTests.js","test":"tsc"},"eslintConfig":{"extends":["react-app","react-app/jest"],"rules":{"react-hooks/exhaustive-deps":"off"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"main":"./lib/index.js","types":"./index.d.ts","devDependencies":{"react-scripts":"^5.0.1"},"_id":"@canidigital/h5p-react@0.2.19","gitHead":"d45f0f6fd07ef807cae25eee0e2e0ed9df374d3e","description":"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.","_nodeVersion":"22.3.0","_npmVersion":"10.8.1","dist":{"integrity":"sha512-1NbA8wg39pNXSkH9YXsBwJ2rUvu6sfCnp098lsMzSdjIsJaENjFKib/Wb3p1QOmtelxy1LqepqEGFFpxY2AtYQ==","shasum":"1eb9ffe8e6694a22697d29f973eb2f534e18f84d","tarball":"https://registry.npmjs.org/@canidigital/h5p-react/-/h5p-react-0.2.19.tgz","fileCount":10,"unpackedSize":61177,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4lOUdvFcTHIaZ5od/nskjssRSquBqRjZAOcHI7i7YpwIgI7pDArSMfpap24Px8OSZRQ4s2VwrXAegTCMV3U3J6bU="}]},"_npmUser":{"name":"canidigital","email":"cani.demo@gmail.com"},"directories":{},"maintainers":[{"name":"canidigital","email":"cani.demo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/h5p-react_0.2.19_1722050938933_0.27199420203700053"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-27T03:28:58.843Z","0.2.19":"2024-07-27T03:28:59.134Z","modified":"2024-07-27T03:28:59.376Z"},"maintainers":[{"name":"canidigital","email":"cani.demo@gmail.com"}],"description":"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.","readme":"# H5P Headless React Components\n\nThis 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.\n\n![npm](https://img.shields.io/npm/v/@canidigital/h5p-react)\n![npm](https://img.shields.io/npm/dm/@canidigital/h5p-react)\n[![Generate TypeScript Documentation](https://github.com/EscolaLMS/H5P-player/actions/workflows/ts-doc.yml/badge.svg)](https://github.com/EscolaLMS/H5P-player/actions/workflows/ts-doc.yml)\n[![Typescript check](https://github.com/EscolaLMS/H5P-player/actions/workflows/tsc.yml/badge.svg)](https://github.com/EscolaLMS/H5P-player/actions/workflows/tsc.yml)\n\nSee 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/)\n\nDemo [react source files](https://github.com/EscolaLMS/h5p-laravel-demo/blob/main/resources/js/index.tsx), are great starting point for frontend tutorial.\n\n## Editor\n\nRending h5p editor with `onSubmit` callback that gets params of new h5p element\n\nExample\n\n```tsx\nimport React, { useState, useEffect, useCallback } from \"react\";\nimport { useParams, useNavigate } from \"react-router-dom\";\nimport {\n  EditorSettings,\n  H5PEditorContent,\n  ContextlessEditor as Editor,\n} from \"@canidigital/h5p-react\";\n\nconst LANG = \"en\";\nconst API_URL = \"/api\";\nconst TOKEN = \"xxx\";\n\nconst editorSettings = (id?: string | number, lang: string = \"en\") => {\n  let url: string = id\n    ? `${API_URL}/admin/hh5p/editor/${id}`\n    : `${API_URL}/admin/hh5p/editor`;\n  url = lang ? `${url}?lang=${lang}` : url;\n  return fetch(url, {\n    headers: {\n      Accept: \"application/json\",\n      \"Content-Type\": \"application/json\",\n      Authorization: `Bearer ${TOKEN}`,\n    },\n    method: \"GET\",\n  });\n};\n\nconst updateContent = (data: H5PEditorContent, id?: string | number) => {\n  return fetch(\n    id\n      ? `${API_URL}/admin/hh5p/content/${id}`\n      : `${API_URL}/admin/hh5p/content`,\n    {\n      method: \"POST\",\n      body: JSON.stringify(data),\n      headers: {\n        Accept: \"application/json\",\n        \"Content-Type\": \"application/json\",\n        Authorization: `Bearer ${TOKEN}`,\n      },\n    }\n  );\n};\n\nexport const page = () => {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useNavigate();\n\n  const [settings, setEditorSettings] = useState<EditorSettings>();\n  const [loading, setLoading] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (id) {\n      setLoading(true);\n      editorSettings(id === \"new\" ? undefined : id, LANG)\n        .then((res) => res.json())\n        .then((data) => {\n          setEditorSettings(data.data);\n          setLoading(false);\n        });\n    }\n  }, [id]);\n\n  const onSubmit = useCallback((data: H5PEditorContent) => {\n    setLoading(true);\n    updateContent(data, id === \"new\" ? undefined : id)\n      .then((resp) => resp.json())\n      .then((data) => {\n        if (data.success) {\n          setLoading(false);\n          navigate(`/editor/${data.data.id}`);\n        }\n      });\n  }, []);\n\n  if (!settings) {\n    return <p>loading...</p>;\n  }\n\n  return (\n    settings && (\n      <Editor\n        onError={(err) => console.error(err)}\n        state={settings}\n        allowSameOrigin\n        onSubmit={onSubmit}\n        loading={loading}\n      />\n    )\n  );\n};\n\nexport default page;\n```\n\n## Player\n\nRending h5p player with `onXAPI` callback that gets params of new h5p element\n\nPlayer also has option to pass custom styles, which is describes here https://components.wellms.io/#h5player\n\n```tsx\nimport React, { useState, useEffect } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport {\n  EditorSettings,\n  ContextlessPlayer as Player,\n} from \"@canidigital/h5p-react\";\n\nconst LANG = \"en\";\nconst API_URL = \"/api\";\n\nconst contentSettings = (uuid?: string | number, lang: string = \"en\") => {\n  let url: string = `${API_URL}/hh5p/content/${uuid}`;\n  url = lang ? `${url}?lang=${lang}` : url;\n  return fetch(url, {\n    headers: {\n      Accept: \"application/json\",\n      \"Content-Type\": \"application/json\",\n      Authorization: `Bearer ${localStorage.getItem(\"token\")}`,\n    },\n    method: \"GET\",\n  });\n};\n\nexport const page = () => {\n  const { uuid } = useParams<{ uuid: string }>();\n\n  const [settings, setSettings] = useState<EditorSettings>();\n  const [loading, setLoading] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (uuid) {\n      setLoading(true);\n      contentSettings(uuid, LANG)\n        .then((res) => res.json())\n        .then((data) => {\n          setSettings(data.data);\n          setLoading(false);\n        });\n    }\n  }, [uuid]);\n\n  if (!settings) {\n    return <p>loading...</p>;\n  }\n\n  if (!uuid) {\n    return <p>error: uuid is not set</p>;\n  }\n\n  if (settings && uuid && uuid !== \"\") {\n    return (\n      <div>\n        <Player\n          onXAPI={(e) => console.log(\"xAPI event\", e)}\n          state={settings}\n          loading={loading}\n        />\n        <hr />\n        <p>\n          <pre>\n            Open Developer Tools Console to see xAPI events from this content\n          </pre>\n        </p>\n      </div>\n    );\n  }\n\n  return <pre>error</pre>;\n};\n\nexport default page;\n```\n\n## Documentation\n\nGenerated TS Doc is available at [https://canidigital.github.io/H5P-player/](https://canidigital.github.io/H5P-player/).\n\n### TypeScript definitions\n\n```ts\ntype H5PEditorContent = {\n  title: string;\n  library: string;\n  params: string; // JSON string\n  nonce: string;\n};\n\nexport type H5PLibraryLanguage = {\n  library_id: number;\n  language_code: string;\n  translation: {\n    semantics: {\n      default?: string;\n      description?: string;\n      label: string;\n      fields: {\n        entity?: string;\n        widgets?: { label: string }[];\n        label: string;\n        description?: string;\n        placeholder?: string;\n        important?: {\n          description?: string;\n          example?: string;\n        };\n      }[];\n    }[];\n  };\n};\n\nexport type H5PLibrary = {\n  id: number;\n  created_at: string;\n  updated_at: string;\n  name: string;\n  title: string;\n  runnable: number;\n  restricted: number;\n  fullscreen: number;\n  embed_types: string;\n  semantics: object;\n  machineName: string;\n  uberName: string;\n  majorVersion: string;\n  major_version: number;\n  minorVersion: string;\n  minor_version: number;\n  patchVersion: string;\n  patch_version: number;\n  preloaded_js: string;\n  preloadedJs: string;\n  preloaded_css: string;\n  preloadedCss: string;\n  dropLibraryCss: string;\n  drop_library_css: string;\n  has_icon: string;\n  tutorialUrl: string;\n  tutorial_url: string;\n  hasIcon: string;\n  libraryId: number;\n  children: H5PLibrary[];\n  languages: H5PLibraryLanguage[];\n};\n\nexport type H5PContent = {\n  id: number;\n  uuid: string;\n  created_at: string;\n  updated_at: string;\n  user_id: string | number;\n  title: string;\n  library_id: string;\n  parameters: string;\n  filtered: string;\n  slug: string;\n  embed_type: string;\n  params: object;\n  metadata: object;\n  library: H5PLibrary;\n  nonce: string;\n};\n```\n","readmeFilename":"README.md"}