Merge pull request #87 from tunapanda/feat/expose-fullscreen-option

feat: expose fullscreen option
tunapanda · Jun 15, 2021 · 462b357 · 462b357
2 parents ae31738 + 45c93f9
commit 462b357
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# H5P Standalone Player 3.0.0 [![CircleCI](https://circleci.com/gh/tunapanda/h5p-standalone.svg?style=svg)](https://circleci.com/gh/tunapanda/h5p-standalone)
+# H5P Standalone Player 3.x [![CircleCI](https://circleci.com/gh/tunapanda/h5p-standalone.svg?style=svg)](https://circleci.com/gh/tunapanda/h5p-standalone)
 Display H5P content without the need for an H5P server
 
 ## Installation
@@ -48,10 +48,7 @@ Install the player using yarn
 ```
 yarn add h5p-standalone
 ```
-Or, [download](https://github.com/tunapanda/h5p-standalone/releases/latest), extract and include the H5P standalone main script on your HTML page:
-```html
-<script type="text/javascript" src="assets/main.bundle.js"></script>
-```
+
 Add an element to attach the player
 ```html
 <div id='h5p-container'></div>
@@ -61,7 +58,6 @@ initialize the H5P
 import { H5P } from 'h5p-standalone'; // ES6
 // const { H5P } = require('h5p-standalone'); AMD
 // const { H5P } = 'H5PStandalone'; // object destructuring
-// <script src="node_modules/h5p-standalone/dist/main.bundle.js"> // Global include
 
 const el = document.getElementById('h5p-container');
 const options = {
@@ -92,6 +88,7 @@ The standalone H5P player constructor accepts two arguments.
 `export` |false|  A boolean on whether display a download button.
 `icon`  |false|   A boolean on whether display H5P icon
 `downloadUrl` |false| A path or a url that returns zipped h5p for download. The link is used by H5P `export` button
+`fullScreen` |false| A boolean on whether to enable fullscreen button if browser supports the feature. Default is `false`
 
 **Note:**
 - One can use absolute URL for `frameCss`, `frameJs`, and for other path options(`h5pJsonPath`,`librariesPath`, & `librariesPath`)
@@ -117,7 +114,8 @@ const options = {
     embed: false,
    'export': false,
     icon: true,
-    downloadUrl: '/path/to/exercise-one.h5p'
+    downloadUrl: '/path/to/exercise-one.h5p',
+    fullScreen: true //enable fullscreen button
   };
 
 
@@ -126,9 +124,9 @@ new H5P(el,options)
   // do stuff
 });
 
-// Or using async-await syntax :
+// Or using async-await syntax (async wrapper function removed for readability) :
 
-const h5p = await new H5P(el, options);
+ await new H5P(el, options);
 
 ```
 
@@ -148,10 +146,6 @@ const player2Options = {
     frameJs: '/assets/frame.bundle.js',
     frameCss: '/assets/styles/h5p.css',
 };
-await new H5P(document.getElementById('h5p-container-1'), player1Options);
-await new H5P(document.getElementById('h5p-container-2'), player2Options);
-
-// OR
 
 const player1 = new H5P(document.getElementById('h5p-container-1'), player1Options);
 
@@ -160,13 +154,19 @@ player1.then(() => {
 }).then(( => {
   // do stuff
 }));
+
+
+// OR (async wrapper function removed for readability)
+await new H5P(document.getElementById('h5p-container-1'), player1Options);
+await new H5P(document.getElementById('h5p-container-2'), player2Options);
+
+
 ```
 
 ## Listening to xAPI events
 To listen for [xAPI events](https://h5p.org/documentation/api/H5P.XAPIEvent.html) emmitted by the player, you must wait for the player to finish loading and initializing the required content libraries. You can find more info about xAPI events here https://h5p.org/documentation/x-api
 1) Using `then()` method
 ```js
-import { H5P } from 'h5p-standalone';
 
 const el = document.getElementById("h5p-container");
 const options = {
@@ -185,7 +185,7 @@ new H5PStandalone.H5P(el, options).then(function () {
 ```
 2) Using `async` function
 ```js
-import { H5P } from 'h5p-standalone';
+import { H5P as H5PStandalone } from 'h5p-standalone'; //you need you an alias due to conflict
 
 async function myAwesomePlayer() {
   const el = document.getElementById("h5p-container");
@@ -195,7 +195,7 @@ async function myAwesomePlayer() {
     frameCss: "/assets/styles/h5p.css",
   };
 
-  await new H5P(el, options);
+  await new H5PStandalone(el, options);
 
   H5P.externalDispatcher.on("xAPI", (event) => {
     //do something useful with the event

diff --git a/dist/main.bundle.js b/dist/main.bundle.js
diff --git a/src/js/h5p-standalone.class.js b/src/js/h5p-standalone.class.js
@@ -55,7 +55,8 @@ export default class H5PStandalone {
     };
 
     const contentOptions = {
-      displayOptions
+      displayOptions,
+      fullScreen: false
     };
 
     if (options.downloadUrl) {
@@ -79,6 +80,10 @@ export default class H5PStandalone {
       generalIntegrationOptions.coreStyles = [urlPath('./styles/h5p.css')];
     }
 
+    if (options.fullScreen) {
+      contentOptions.fullScreen = options.fullScreen
+    }
+
     this.initElement(el);
     return this.initH5P(generalIntegrationOptions, contentOptions);
   }
@@ -141,11 +146,12 @@ export default class H5PStandalone {
       scripts: scripts,
       displayOptions: contentOptions.displayOptions,
       contentUrl: this.contentUrl,
-      fullScreen: contentOptions.fullScreen,
     };
 
-    if (contentOptions.exportUrl) {
-      H5PIntegration.contents[`cid-${this.id}`].exportUrl = contentOptions.exportUrl;
+    for (const key in contentOptions) {
+      if (H5PIntegration.contents[`cid-${this.id}`][key] == undefined) { //this is just a guard
+        H5PIntegration.contents[`cid-${this.id}`][key] = contentOptions[key];
+      }
     }
 
     if (!generalIntegrationOptions.preventH5PInit) {