Building a standalone H5P editor: Laravel plug-ins and alternatives

Submitted by Pida on Fri, 08/14/2020 - 16:47
Forums: 
Developers
I’m building an editor for HP5 contents based on this GitHub repo (which is a fork of another GitHub repo which in turn seems to be based on an abandoned package which has been discussed before on these forums.

Even though it’s going quite well, my first question is if anyone lately succeeded in building a standalone H5P editor and if there’s any interesting groundwork besides the PHP/Laravel plug-ins mentioned above. 

My app works, but with a few exceptions: 
  • I uploaded every example content from the H5P website as a library and made a small sample content for each one. All of them work, except the interactive book type. I suspect that's due to just a minor inconsistency (field title is missing) between the form and the controller method.
  • Some data is missing in the requests to /ajax/finish (which is not that important for me right now as I focus on creating and editing contents).
  • Whenever I upload an asset such as an image or recorded audio, it is only stored at its destination when the content is saved for the second time. Here’s what happens:
  1. I add an image while creating a new content. The preview image inside the content form appears immediately.
  2. I save the content and open it (myapp.test/h5p/<id>). The image is missing.
  3. I save the content a second time using the edit form (myapp.test/h5p/<id>/edit)
  4. I reload myapp.test/h5p/<id>. The image is present.
When I add an image in the edit form, the same thing happens: I have to store it twice to make the image visible inside the content.

This is a server side error: The images are only copied to their location (myapp.test/vendor/h5p/content/<id>/images/) the second time the content is saved. I’m doing some logging now from h5peditor.class.php looking for the reason for this behaviour, but maybe someone has some advice?

Thanks
Pida
serettig's picture

serettig

Fri, 08/14/2020 - 19:33

Hi Pida,

I've been contributing to h5p-nodejs-library and to Lumi H5P Desktop Editor, which aren't based on the original PHP server component but re-implement them in TypeScript / NodeJS. If you only want a simple standalone editor on a desktop machine, Lumi might work out for you. In my opinion h5p-nodejs-library is simpler to implement and the example included in it will give you a simple standalone editor and player out-of-the-box. Of course, the server is unofficial and not all functionality is implemented yet.

About your issues: Interactive Book didn't work in our library as well. The reason is that the H5PIntegration object must include a metadata object. Check out the diff here: https://github.com/Lumieducation/H5P-Nodejs-library/commit/defd344f4013c87dc90e80a99e2b6146420ce4aa

About your image storage issue: I guess something is wrong with the temporary file storage. H5P stores file in temporary storage and then copies them to final storage. I suppose the error must be somewhere there.

Sebastian

Pida

Tue, 08/18/2020 - 08:48

Hi Sebastian,

thanks for the links. The Node.js library looks good. My app is going to be part of a more complex web app and I'll stick with the Laravel (which I'm more familiar with) plug-in for now.

I managed to make uploads work. In case anyone has the same problem: I had to edit the controllerStore method in LaravelH5p.php. In $editor->processParameters(), the last two arguments may not be null even when creating a new content. I changed this line to

$editor->processParameters($content['id'], $content['library'], $params, $content['library'], $params->params);

The second $content['library'] could probably be any truthy value.

I also added this line before:

$content['library']['name'] = $content['library']['machineName'];

Maybe it's only necessary because the plug-in installs H5P 1.23.0 by default. The most recent version is 1.24.1.

Oliver

qunabu

Mon, 07/25/2022 - 16:16

If you need a working wersion of h5p laravel you can use my library 

https://github.com/EscolaLMS/H5P

There is demo deployed on the heroku you can play with 

https://h5p-laravel-demo.herokuapp.com/

arun.tyagi

Fri, 05/12/2023 - 13:59

https://github.com/EscolaLMS/H5P    in this code i am unable to run the artisan command. can you please help me