Merge pull request #21 from edly-io/ziafazal/fix-fullscreen-issue-20

fix: Fixes for fullscreen issue and player version bump
edly-io · Aug 4, 2023 · 162f2fe · 162f2fe
2 parents a312bb9 + e1c8b6c
commit 162f2fe
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 45 deletions.
diff --git a/h5pxblock/h5pxblock.py b/h5pxblock/h5pxblock.py
@@ -193,7 +193,7 @@ def student_view(self, context=None):
         template = self.render_template("static/html/h5pxblock.html", context)
         frag = Fragment(template)
         frag.add_css(self.resource_string("static/css/student_view.css"))
-        frag.add_javascript_url('https://cdn.jsdelivr.net/npm/h5p-standalone@3.5.1/dist/main.bundle.js')
+        frag.add_javascript_url('https://cdn.jsdelivr.net/npm/h5p-standalone@3.6.0/dist/main.bundle.js')
         frag.add_javascript(self.resource_string("static/js/src/h5pxblock.js"))
         user_service = self.runtime.service(self, 'user')
         user = user_service.get_current_user()

diff --git a/h5pxblock/static/css/student_view.css b/h5pxblock/static/css/student_view.css
@@ -1,6 +1,3 @@
-.h5p-player {
-    display: none;
-}
 
 @keyframes spinner-border {
     to { transform: rotate(360deg); }

diff --git a/h5pxblock/static/js/src/h5pxblock.js b/h5pxblock/static/js/src/h5pxblock.js
@@ -7,13 +7,13 @@ function H5PPlayerXBlock(runtime, element, args) {
     const contentUserDataUrl = runtime.handlerUrl(element, 'user_interaction_data');
     const contentxResultSaveUrl = runtime.handlerUrl(element, 'result_handler');
 
-    const playerPromise = function edXH5PPlayer(el) {        
+    const playerPromise = function edXH5PPlayer(el) {
         if (el && $(el).children('.h5p-iframe-wrapper').length == 0) {
             const userObj = { 'name': args.user_full_name, 'mail': args.user_email };
             const options = {
                 h5pJsonPath: args.h5pJsonPath,
-                frameJs: 'https://cdn.jsdelivr.net/npm/h5p-standalone@3.5.1/dist/frame.bundle.js',
-                frameCss: 'https://cdn.jsdelivr.net/npm/h5p-standalone@3.5.1/dist/styles/h5p.css',
+                frameJs: 'https://cdn.jsdelivr.net/npm/h5p-standalone@3.6.0/dist/frame.bundle.js',
+                frameCss: 'https://cdn.jsdelivr.net/npm/h5p-standalone@3.6.0/dist/styles/h5p.css',
                 frame: args.frame,
                 copyright: args.copyright,
                 icon: args.icon,
@@ -28,56 +28,58 @@ function H5PPlayerXBlock(runtime, element, args) {
                     contentUserDataUrl: contentUserDataUrl
                 }
             }
+
             return new H5PStandalone.H5P(el, options).then(function(){ 
                 $(el).siblings('.spinner-container').find('.spinner-border').hide();
-                $(el).show();
+                $(el).show();        
+                H5P.externalDispatcher.on("xAPI", (event) => {
+
+                    let hasStatement = event && event.data && event.data.statement;
+                    if (!hasStatement) {
+                        return;
+                    }
+
+                    let statement = event.data.statement;
+                    let validVerb = statement.verb && statement.verb.display && statement.verb.display['en-US'];
+                    if (!validVerb) {
+                        return;
+                    }
+
+                    let isCompleted = statement.verb.display['en-US'] === 'answered' ||
+                        statement.verb.display['en-US'] === 'completed';
+                        let isChild = statement.context && statement.context.contextActivities &&
+                        statement.context.contextActivities.parent &&
+                        statement.context.contextActivities.parent[0] &&
+                        statement.context.contextActivities.parent[0].id;
+
+                    // Store only completed root events.
+                    if (isCompleted && !isChild) {
+                        $.ajax({
+                            type: "POST",
+                            url: contentxResultSaveUrl,
+                            data: JSON.stringify(event.data.statement)
+                        });    
+                    }
+                    // uncomment to see all xAPI events triggered by H5P content
+                    //console.log("xAPI event: ", event);
+                });
+
             });
         }
     };
 
     const h5pel = document.getElementById('h5p-' + args.player_id);
-    window.H5PPlayerXBlockPromises.push(h5pel);
+    window.H5PPlayerXBlockPromises.push(playerPromise(h5pel));
     window.H5PXBlockPlayersInitlized = false;
 
     $(function ($) {
         if (!H5PXBlockPlayersInitlized) {
             window.H5PXBlockPlayersInitlized = true;
             window.H5PPlayerXBlockPromises.reduce(
-                (p, x) =>
-                    p.then(_ => playerPromise(x)),
-                Promise.resolve()
-            )
-            H5P.externalDispatcher.on("xAPI", (event) => {
-
-                let hasStatement = event && event.data && event.data.statement;
-                if (!hasStatement) {
-                    return;
-                }
-
-                let statement = event.data.statement;
-                let validVerb = statement.verb && statement.verb.display && statement.verb.display['en-US'];
-                if (!validVerb) {
-                    return;
-                }
-
-                let isCompleted = statement.verb.display['en-US'] === 'answered' ||
-                    statement.verb.display['en-US'] === 'completed';
-                    let isChild = statement.context && statement.context.contextActivities &&
-                    statement.context.contextActivities.parent &&
-                    statement.context.contextActivities.parent[0] &&
-                    statement.context.contextActivities.parent[0].id;
-
-                // Store only completed root events.
-                if (isCompleted && !isChild) {
-                    $.ajax({
-                        type: "POST",
-                        url: contentxResultSaveUrl,
-                        data: JSON.stringify(event.data.statement)
-                    });    
-                }
-                // uncomment to see all xAPI events triggered by H5P content
-                //console.log("xAPI event: ", event);
-            });
+                function(prevPromise, curPromise) {
+                    return prevPromise.then(curPromise);
+                }, Promise.resolve()
+            );
         }
     });
 }
diff --git a/setup.py b/setup.py
@@ -28,7 +28,7 @@ def package_data(pkg, roots):
 
 setup(
     name='h5p-xblock',
-    version='0.2.4',
+    version='0.2.5',
     description='XBlock to play self hosted h5p content inside open edX',
     long_description=long_description,
     long_description_content_type='text/markdown',