No icons and different look of interative video when creating own package

Submitted by mstimvol on Thu, 01/21/2021 - 09:31
Forums: 
Developers

Hi,

I'm currently trying to add some more features to the "Interactive Video". What I've done so far is:

  1. Created a fork of the official github repository (https://github.com/h5p/h5p-interactive-video) (using the stable branch)
  2. Changed the machine-name and it's title in library.json
  3. Ran "npm i" to install all necessary Node.js dependencies
  4. Ran "npm run build", followed by "h5p pack -r <library>" to create the h5p package

Unfortunately, after the installation the editor of my Interactive Video has no icons (just question marks) and looks different from the original (e.g. "double-header":

Any ideas what happens here? I just called "npm i && npm run build && cd .. && h5p pack -r <library>". I guess this should be correct...

otacke's picture

otacke

Thu, 01/21/2021 - 14:24

Hi!

If you have a look at the editor form's HTML, you will notice that the H5P editor derives a CSS class name from the machine name and adds that class name to the div using the h5peditor class. Since the stylesheet of the Interactive Video's editor uses the class name h5p-interactivevideo (derived from the machine name H5P.InteractiveVideo) to identify the fields, now there's no match and the stylesheet is not applied.

You'll have to adjust H5PEditor.InteractiveVideo as well, and both your forks should reference each other as dependency, not the original libraries.

Best,
Oliver

mstimvol

Thu, 01/21/2021 - 15:36

Thank you very much, Oliver! That finally solved the issue regarding the icons but I still see the "double-header". I checked the source and compared it with a "regular" interactive video. I finally figured out that in my version, I've an additional div after the form-overlay:

<div class="form-mananger-overlay"></div>
<div class="h5peditor-form-manager-head">
...
</div>
<div class="tree">...

The "original" interactive video looks like:

<div class="form-mananger-overlay"></div>
<div class="tree">...

So the "tree" comes directly after the "form-manager-overlay"-div. Unfortunately I cannot find any css stylesheet regarding the "h5peditor-form-manager-head". So where does it come from?

otacke's picture

otacke

Thu, 01/21/2021 - 16:43

Hi!

Yeah, well, that's an ugly one in H5P editor core at https://github.com/h5p/h5p-editor-php-library/blob/9f4eccb7b71bec09b022f73d4cd53e2e2c72914d/scripts/h5peditor-form.js#L40 Seems you'll want to keep "H5P.InteractiveVideo" as part of your library's machine name or check if you can override the FullscreenBar property of H5PEditor.

Cheers,
Oliver