L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-85658 core_h5p: Implement contentLoaded event handler

Browse Source 
This improvement will help to avoid random errors
because H5P content needs time to be rendered.
This commit is contained in:
Huong Nguyen
2026-02-13 08:54:56 +07:00
parent 76934ad945
commit e4afd807a7
3 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5p/js/embed.js
+44
View File
@@ -226,6 +226,48 @@ document.onreadystatechange = async() => {
const Pending = await getPendingClass();
var resizePending = new Pending('core_h5p/iframe:resize');
// Track when the embedded H5P content is fully attached.
const contentLoadedPending = new Pending('core_h5p/iframe:contentLoaded');
let contentLoaded = false;
const markContentLoaded = function() {
const body = iFrame?.contentDocument?.body;
const hasContent = body && body.querySelector('.h5p-container, .h5p-content');
// Check that H5P instance is actually ready with proper initialization
if (contentLoaded || !hasContent || !H5P?.instances?.[0]) {
return false;
}
contentLoaded = true;
contentLoadedPending.resolve();
H5PEmbedCommunicator.send('contentLoaded');
return true;
};
// If the content is already there, mark it immediately.
markContentLoaded();
// Observe the iframe document for the first appearance of the H5P container.
if (!contentLoaded && iFrame.contentDocument?.body) {
const contentObserver = new MutationObserver(function() {
if (markContentLoaded()) {
contentObserver.disconnect();
}
});
contentObserver.observe(iFrame.contentDocument.body, {childList: true, subtree: true});
}
// Extended fallback timeout to ensure pending resolves even if content detection fails.
if (!contentLoaded) {
setTimeout(function() {
if (!contentLoaded) {
contentLoaded = true;
contentLoadedPending.resolve();
H5PEmbedCommunicator.send('contentLoaded');
}
}, 1000);
}
H5P.on(instance, 'resize', function() {
if (H5P.isFullscreen) {
return; // Skip iframe resize.
@@ -249,6 +291,8 @@ document.onreadystatechange = async() => {
}, 150);
});
H5P.externalDispatcher.on('domChanged', markContentLoaded);
// Get emitted xAPI data.
H5P.externalDispatcher.on('xAPI', function(event) {
statementPosted = false;
mod/h5pactivity/tests/behat/recent_activity.feature
+4 -6
View File
@@ -30,16 +30,14 @@ Feature: Users can see the H5P recent activity from the recent activity block
| blockname | contextlevel | reference | pagetypepattern | defaultregion |
| recent_activity | Course | C1 | course-view-* | side-pre |
And I am on the "Awesome H5P package" "h5pactivity activity" page logged in as student1
# The H5P content needs some time to be displayed (so better to wait for 1 second to avoid random errors).
And I switch to "h5p-player" class iframe
And I switch to "h5p-iframe" class iframe
And I wait until "h5p-player" iframe is interactable and switch to it
And I wait until "h5p-iframe" iframe is interactable and switch to it
And I click on "Wrong one" "text" in the ".h5p-question-content" "css_element"
And I click on "Check" "button" in the ".h5p-question-buttons" "css_element"
And I switch to the main frame
And I am on the "Awesome H5P package" "h5pactivity activity" page logged in as student2
# The H5P content needs some time to be displayed (so better to wait for 1 second to avoid random errors).
And I switch to "h5p-player" class iframe
And I switch to "h5p-iframe" class iframe
And I wait until "h5p-player" iframe is interactable and switch to it
And I wait until "h5p-iframe" iframe is interactable and switch to it
And I click on "Correct one" "text" in the ".h5p-question-content" "css_element"
And I click on "Check" "button" in the ".h5p-question-buttons" "css_element"
And I switch to the main frame
mod/h5pactivity/tests/behat/sending_attempt.feature
+6 -6
View File
@@ -34,8 +34,8 @@ Feature: Do a H5P attempt
Scenario: Do an attempt and check on course log report
When I am on the "Awesome H5P package" "h5pactivity activity" page logged in as student1
And I should not see "You are in preview mode."
And I switch to "h5p-player" class iframe
And I switch to "h5p-iframe" class iframe
And I wait until "h5p-player" iframe is interactable and switch to it
And I wait until "h5p-iframe" iframe is interactable and switch to it
And I click on "Correct one" "text" in the ".h5p-question-content" "css_element"
And I click on "Check" "button" in the ".h5p-question-buttons" "css_element"
And I switch to the main frame
@@ -49,8 +49,8 @@ Feature: Do a H5P attempt
Scenario: Do various attempts and check them with the attempts and user grades reports
Given I am on the "Awesome H5P package" "h5pactivity activity" page logged in as student1
And I should not see "You are in preview mode."
And I switch to "h5p-player" class iframe
And I switch to "h5p-iframe" class iframe
And I wait until "h5p-player" iframe is interactable and switch to it
And I wait until "h5p-iframe" iframe is interactable and switch to it
And I click on "Wrong one" "text" in the ".h5p-question-content" "css_element"
And I click on "Check" "button" in the ".h5p-question-buttons" "css_element"
And I click on "Retry" "button" in the ".h5p-question-buttons" "css_element"
@@ -62,8 +62,8 @@ Feature: Do a H5P attempt
# H5P does not allow to Retry if the user checks the correct answer, we need to refresh the page.
And I switch to the main frame
And I reload the page
And I switch to "h5p-player" class iframe
And I switch to "h5p-iframe" class iframe
And I wait until "h5p-player" iframe is interactable and switch to it
And I wait until "h5p-iframe" iframe is interactable and switch to it
# Because of the steps above, the 2nd and 3rd attempts are enough "separated" and we don't
# need to add any wait here.
And I click on "Wrong one" "text" in the ".h5p-question-content" "css_element"