Interactive Video - Add Interactions stopped working

Not sure what happened, I have updated the library but Step 2 to add interactions is not working anymore,

basically, h5p-editor-iframe is continuously growing the height attribute and showing only black content.

Since I already have created some interactive videos in my drupal platform, is there any way how I could reset h5p without losing them, to rebuild the library?

I have a feeling something is corrupted either in the database or the library.

FYI - I'm running h5p 7.x-1.34 in Opigno LMS (Ubuntu), my library:

Interactive Video (1.17.5) 0 0 1
Interactive Video (1.19.3) 5 5 1
Interactive Video Editor (1.17.4) 0 0 1
Interactive Video Editor (1.19.3)

BV52's picture

Hi markusd1284,

  1. Any browser console errors
  2. Any PHP errors

-BV52

sorry forgot to add them

loading Step 1:

[Violation] Forced reflow while executing JavaScript took 93ms
5[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:5043 

[Violation] Avoid using document.write().
populateIframe @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:5043
ns.Editor @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:5210
(anonymous) @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:5356
dispatch @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377
v.handle @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377
trigger @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377
(anonymous) @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1378
each @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377
each @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377
trigger @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1378
b.fn.(anonymous function) @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1379
ns.init @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:5360
c @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377
fireWith @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377
ready @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377
H @ js_0OnCHWpRCXnnOFC1fr-Qu1IKE14qb7qWbvb7rlBl_Kw.js:1377

[Violation] Forced reflow while executing JavaScript took 44ms
jquery.js?pd5jkr:4 [Violation] 'readystatechange' handler took 251ms


Step 2: I'm getting a lot of

[Violation] Forced reflow while executing JavaScript took <N>ms

 

No PHP errors. Does this give any insight, please?
Need to solve it desperately to insert bookmarks :)

Is it possible to reinstall h5p + libraries in Drupal and re-import existing h5p node references?

Having looked at the db's I'm not sure if it would be enough to backup and restore just the h5p_nodes?

@BV52 any advise you can share re console errors or regarding a re-install, please?

BV52's picture

Hi markusd1984,

I've sent your case to the core team for additional assistance. They will get back to you as soon as possible.

-BV52

Hi,

I'm having exactly the same problems with Moodle. Everything was fine until I updated the Interactive Video option on 16/08/18.

I'm not getting any console or PHP errors either.

Please could you advise as to what steps to take next?

Thanks

Alan

Reinstalling the H5P plugin did seem to work but obviously, in doing so we lost our resources. Fortunately, there weren't many.

Hopefully, the h5p can shed some light on this soon? 

I have quite a few ones and hoping for a re-install to restore them in the database, which I think should be possible if we get some clarification on the tables, please?

I have a server backup and can try it out to roll back, just needs some advice on the restoring or if there is another way to possibly fix this.

fnoks's picture

Hi Markus,

Could you try to upgrade to version 7.x-1.35 of the H5P module, and let us know if you still see the same problem

Thanks fnoks,

I've updated it but unfortunatelly the issue is still there.

I would like to do a server backup and fresh reinstall of h5p, just need advice re tables to keep references to existeing h5p content please :)

I reinstalled h5p and can confirm this will work, however I'm loosing all my content which I really need to keep.

I suspect there is an issue in the database entries causing this, best would be for me to try and re-import only the tables from my backup that are neccessary for the h5p node references, can you please advise which ones??

fnoks's picture

Hi,

To be clear: After you reinstalled, how do you know the issue is fixed? I.e: have you tested with the same H5P?

Is it possible for you to download & share the H5P file with me ([email protected])?

In the database there are several different tables relevant for H5P (content - libraries - language etc). I have never tested restoring only H5P from a backup, so I'm not sure how much I can help. I would try all the tables prefixed with "h5p_", and you would have to reinstall the H5P libraries manually (since the database says they are installed).

I tested it by simyply uploading a new videos and accessing step 2 to insert interactive content ie. bookmarks which worked.

I also tested the existing module which I managed to restore, unfortunataelly I can't share that content.

FYI - restoring all tables didn't work after the re-install as it containt the issue, I think to remember I only restored the h5p_nodes, h5p_libraries (and possibly h5p_points / h5p_content_user_data).

Would be good though fo future references to get some clarity on which tables to keep for just the h5p nodes references and any user data vs which ones are only relating to the h5p install (that can / must be ignored for a re-install).

 

 

Tbh. the issue happens with any h5p interactive video I create, after upload step two won't load properly preventing me to create interactive content.

Any idea how I / we could debug this better to figure out what is going wrong and possibly what caused it? 


Appreciate your help.

Discover in IE console that something is causing a continously resizing of the iframe.

Can anybody help debug the issue with me please?

  // Start resizing the iframe
    if (iframe.contentWindow.MutationObserver !== undefined) {
      // If supported look for changes to DOM elements. This saves resources.
      var running;
      var limitedResize = function (mutations) {
        if (!running) {
          running = setTimeout(function () {
            resize();
            running = null;
          }, 40); // 25 fps cap
        }
      };
otacke's picture

Hi Markus!

Could you maybe give a little more context? Otherwise it's hard to guess more than that resize() may trigger the mutation observer but take more time than 40ms, so it will be triggered again and again.

Best,
Oliver

All i have done is added a few interactive video lessons in drupal which worked incl. interactive elements ie. bookmarks and then suddenly when I want to create another one or edit an existing one, I can't use step 2 for adding interactions anymore, as the frame resizes continuously and becomes in-accessible.

I suspect that either something in the database or the h5p module get's corrupted that might cause this, but how to check further?

Stepping through the console somehow? I'm happy to share more debugging or do a screenshare.
In FF console I get "unreachable code after return statement h5p.js:260:10" before even clicking into step 2.

          // Retain parent size to avoid jumping/scrolling
          var parentHeight = iframe.parentElement.style.height;
          iframe.parentElement.style.height = iframe.parentElement.clientHeight + 'px';
otacke's picture

Hi Markus!

Context to where the mutation observer code you posted before was taken from for example. We don't know every line by heart ;-) Also, I can't see an unconditional return statement before the line of code that you posted - there's a return statement, but the code is reached if you're not in fullscreen.

It's really hard to diagnose this without having access to your machine. Is there a way that you could send us a link and credentials to your drupal system so we could have a look?

Best,
Oliver

Thanks Oliver for your help. My drupal is local only but I could set up remote session.

I understand of course you won't know the code by heart. I usually do a quick search to locate it ;)

The previous code highlighted from IE Console is in a temp js so not sure that's of much help:
/sites/default/files//js/js_LN9rAD98A0GHB0yt3M5omI8zUEIm6Q0jKh7hnEn8yoQ.js

but i can see this is created from /sites/all/modules/h5p/modules/h5peditor/h5peditor/scripts/h5peditor-editor.js

otacke's picture

If you can save us time, that's really appreciated. Effort piles up quite a bit given all the questions we receive.

If it was some new part of code that you're referencing, chances might be there's something wrong in there, but it really is not. So without being able to have a look at the stacktrace, the variables states, etc. it's really hard to say what might be causing the problem -- especially if it worked first.

So, if you could set up some dynDNS or something, that'd be great.

great and thank you, sent you a message on linkedin to follow up.
Or let me know if you want to use different means for PM. Can speak german as well :)

otacke's picture

I have not received anything so far :-/

I have sent you a connection request with a note as I can't send you direct PM's, please check, thanks.