tunapanda/h5p-standalone

Fullscreen button not showing on Virtual Tour

Closed this issue ยท 5 comments

On the official demo from Joubel (https://h5p.org/virtual-tour-360), there is a fullscreen button at the top right of the scene.
This button is not showing when loading the same content with h5p-standalone.
Any idea how to make it visible?
Thanks for your great work!

Thank you @edubox-rpi. Seems the full-screen property is set to default at the moment.
I will expose the property so anyone can configure the behavior

@edubox-rpi you can now enable the button by adding the fullScreen option i.e.

const el = document.getElementById('h5p-container');
const options = {
  h5pJsonPath:  '/h5p-folder',
  frameJs: '/assets/frame.bundle.js',
  frameCss: '/assets/styles/h5p.css',
  fullScreen: true
}

new H5PStandalone.H5P(el, options);

๐ŸŽ‰ This issue has been resolved in version 3.2.0 ๐ŸŽ‰

The release is available on:

Your semantic-release bot ๐Ÿ“ฆ๐Ÿš€

Thanks, it works!
But, when I exit fullscreen and go fullscreen again, the button is not hidden and it throws an error in the console.

@edubox-rpi I have raised an issue on H5P forums and hope will get feedback to determine if we will provide a hack or a permanent fix for the issue.

A quick fix would be assgining this event callback function a name

document.addEventListener(eventName, function () {

and then replacing arguments.callee with above function name

document.removeEventListener(eventName, arguments.callee, false);

then build the standalone player using yarn build

i.e.

document.addEventListener(eventName, function fullscreenEvtHandler() {
    if (first === undefined) {
        // We are entering fullscreen mode
        first = false;
        entered();
        return;
    }

    // We are exiting fullscreen
    done('h5p-fullscreen');
    document.removeEventListener(eventName, fullscreenEvtHandler, false);
});