feat(h5p-react): added xAPI collector to player

Also now includes REST example

docs/README.md

@@ -45,9 +45,9 @@ There are two example implementations that illustrate how the packages can be
 used:
 
 | Example type | Tech stack | Location |
-|---|---|---|
-| server-side-rendering | server: Express with JS template rendering<br/>client: static HTML, some React for library management | `/packages/h5p-examples` |
-| Single Page Application | server: Express with REST endpoints<br/>client: React |  `/packages/h5p-rest-example-server`<br/>`/packages/h5p-rest-example-client`|
+| :--- | :--- | :--- |
+| server-side-rendering | server: Express with JS template rendering client: static HTML, some React for library management | `/packages/h5p-examples` |
+| [Single Page Application](examples/rest/README.md) | server: Express with REST endpoints client: React | `/packages/h5p-rest-example-server` `/packages/h5p-rest-example-client` |
 
 ## Trying out the demo
 

docs/SUMMARY.md

@@ -21,6 +21,7 @@
   - [h5p-react](packages/h5p-react.md)  
 - Development
   * [Getting started](development/getting-started.md)
+  * [REST Example](examples/rest/README.md)
   * [Testing & code quality](development/testing-quality.md)
   * [Core updates](development/core-updates.md)
   * [Project Status](development/status.md)

docs/examples/rest/Client.md

@@ -0,0 +1,68 @@
+# h5p-rest-example:client
+
+This repository demonstrates how h5p-nodejs-library can be used in a SPA with a
+REST endpoint.
+
+This project was bootstrapped with [Create React
+App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br /> Open
+[http://127.0.0.1:3000](http://127.0.1:3000) to view it in the browser.
+
+**IMPORTANT**: DO NOT use http://localhost:3000 on Windows as the proxy to the
+server is very slow when you use localhost. The reason is that the IPv6 IP
+resolution seems to be slow when using localhost.
+
+The page will reload if you make edits.<br /> You will also see any lint errors
+in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br /> See the section
+about [running
+tests](https://facebook.github.io/create-react-app/docs/running-tests) for more
+information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br /> It correctly bundles
+React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br /> Your app is
+ready to be deployed!
+
+See the section about
+[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
+more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can
+`eject` at any time. This command will remove the single build dependency from
+your project.
+
+Instead, it will copy all the configuration files and the transitive
+dependencies (webpack, Babel, ESLint, etc) right into your project so you have
+full control over them. All of the commands except `eject` will still work, but
+they will point to the copied scripts so you can tweak them. At this point
+you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for
+small and middle deployments, and you shouldn’t feel obligated to use this
+feature. However we understand that this tool wouldn’t be useful if you couldn’t
+customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App
+documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

docs/examples/rest/README.md

@@ -0,0 +1,63 @@
+# H5P Single Page Application example using a REST API
+
+This repository illustrates how to use the the packages of
+[h5p-nodejs-library](https://github.com/lumieducation/h5p-nodejs-library) in a
+Single Page Application with a REST backend in TypeScript.
+
+Naturally the application is separated into a **client**, which uses React as a
+framework. The **server** implements the `@lumieducation/h5p-server` using
+Express. You are not bound to using React or Express in your own application, as
+`@lumieducation/h5p-server` is framework agnostic.
+
+Check out the architecture overview that describes which parts of the
+application are provided by which package:
+
+![Architecture overview](./architecture.svg)
+
+-   This repository contains all the components in **purple** boxes.
+-   The **green** parts come from one of the server-side packages of
+    `h5p-nodejs-library`. While `@lumieducation/h5p-server` is also a dev
+    dependency of the client, this is only the case to use the TypeScript
+    interface definitions exported by it. The dependency (which can be rather
+    large) is only required at build time and not at runtime.
+-   The **red** parts are React components that can be found in the package
+    `@lumieducation/h5p-react`. The React components wrap around the web
+    components from `@lumieducation/h5p-webcomponents`, which in turn wrap the
+    actual core h5p player and editor JavaScript and simplify instantiation,
+    loading, saving and event handling.
+-   The **blue** parts is comprised of JavaScript and CSS files that make up the
+    core H5P player and editor. They are part of the original PHP repositories
+    and are downloaded from GitHub in the server with the script
+    [`download-core.sh`](../../../packages/h5p-examples/download-core.sh). They
+    must be served as static files by the server and are added to the page by
+    the web components as needed.
+
+## Trying it out
+
+1. Clone the repository
+2. Run `npm install` **in the root**. This will install all dependencies of the
+   example packages and internally link the packages inside the monorepo with
+   symlinks (lerna).
+3. Run `npm start` for the server. (Must be up and running before you start the
+   client!)
+4. Run `npm start` for the client (**the server must still be running**).
+5. A browser should open on http://localhost:3000. If there is an error, you
+   have to reload the the page, as the server might not be fully initialized
+   yet.
+
+## Client
+
+The client was bootstrapped with [Create React
+App](https://github.com/facebook/create-react-app). For more information see
+[client](./Client.md)
+
+## Support
+
+This work obtained financial support for development from the German
+BMBF-sponsored research project "lea.online -" (FKN: 41200147).
+
+Read more about them at the following websites:
+
+-   lea.online Blog (German) - blogs.uni-bremen.de/leaonline
+-   University of Bremen - https://www.uni-bremen.de/en.html
+-   BMBF - https://www.bmbf.de/en/index.html

docs/examples/rest/architecture.xml

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2021-02-24T13:45:51.315Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.1.8 Chrome/87.0.4280.88 Electron/11.1.1 Safari/537.36" etag="dmSVfdojfXUlji14qWAQ" version="14.1.8" type="device"><diagram id="91866775-811a-ca55-16df-98d47c250f2a" name="Page-1">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</diagram></mxfile>