MDL-71885 core_h5p: Display the edit content button

A new parameter has been added to the display method, to define whether the edit button should be displayed or not. The H5P activity will display this button (if the user has the required permissions). However, it won't be displayed when previewing H5P in the content bank.
moodle · Jul 5, 2021 · 692abf2 · 692abf2
1 parent 86b06a7
commit 692abf2
Show file tree

Hide file tree

Showing 6 changed files with 233 additions and 3 deletions.
diff --git a/h5p/classes/player.php b/h5p/classes/player.php
@@ -153,12 +153,14 @@ public function __construct(string $url, \stdClass $config, bool $preventredirec
      * @param stdClass $config Configuration for H5P buttons.
      * @param bool $preventredirect Set to true in scripts that can not redirect (CLI, RSS feeds, etc.), throws exceptions
      * @param string $component optional moodle component to sent xAPI tracking
+     * @param bool $displayedit Whether the edit button should be displayed below the H5P content.
      *
      * @return string The embedable code to display a H5P file.
      */
     public static function display(string $url, \stdClass $config, bool $preventredirect = true,
-            string $component = ''): string {
-        global $OUTPUT;
+            string $component = '', bool $displayedit = false): string {
+        global $OUTPUT, $CFG;
+
         $params = [
                 'url' => $url,
                 'preventredirect' => $preventredirect,
@@ -176,6 +178,16 @@ public static function display(string $url, \stdClass $config, bool $preventredi
         $template = new \stdClass();
         $template->embedurl = $fileurl->out(false);
 
+        if ($displayedit) {
+            list($originalfile, $h5p) = api::get_original_content_from_pluginfile_url($url, $preventredirect, true);
+            if ($originalfile) {
+                // Check if the user can edit this content.
+                if (api::can_edit_content($originalfile)) {
+                    $template->editurl = $CFG->wwwroot . '/h5p/edit.php?url=' . $url;
+                }
+            }
+        }
+
         $result = $OUTPUT->render_from_template('core_h5p/h5pembed', $template);
         $result .= self::get_resize_code();
         return $result;

diff --git a/h5p/templates/h5pembed.mustache b/h5p/templates/h5pembed.mustache
@@ -24,6 +24,7 @@
 
     Variables required for this template:
     * embedurl - The URL with the H5P file to embed
+    * editurl - The URL for the edit button; if it's empty, the edit button won't be displayed.
 
     Example context (json):
     {
@@ -35,3 +36,7 @@
    allowfullscreen="allowfullscreen" class="h5p-player w-100 border-0"
    style="height: 0px;" id="{{uniqid}}-h5player">
 </iframe>
+
+{{#editurl}}
+    <a href="{{editurl}}">{{#str}}editcontent, core_h5p{{/str}}</a>
+{{/editurl}}
diff --git a/h5p/upgrade.txt b/h5p/upgrade.txt
@@ -4,6 +4,8 @@ information provided here is intended especially for developers.
 === 4.0 ===
 * Added new methods to api: get_original_content_from_pluginfile_url and can_edit_content.
 * Added edit.php and editcontent_form class, for modifying H5P content given an H5P identifier (from the h5p table).
+* Added a new parameter to the player::display method, to define whether the edit button should be displayed below the
+H5P content or not. Default value for this parameter is false.
 
 === 3.11 ===
 * Added $skipcapcheck parameter to H5P constructor, api::create_content_from_pluginfile_url() and

diff --git a/lang/en/h5p.php b/lang/en/h5p.php
@@ -76,6 +76,7 @@
 $string['disablefullscreen'] = 'Disable fullscreen';
 $string['download'] = 'Download';
 $string['downloadtitle'] = 'Download this content as a H5P file.';
+$string['editcontent'] = 'Edit H5P content';
 $string['editor'] = 'Editor';
 $string['embed'] = 'Embed';
 $string['embedtitle'] = 'View the embed code for this content.';

diff --git a/mod/h5pactivity/tests/behat/inline_editing_content.feature b/mod/h5pactivity/tests/behat/inline_editing_content.feature
@@ -0,0 +1,210 @@
+@mod @mod_h5pactivity @core_h5p @_file_upload @_switch_iframe
+Feature: Inline editing H5P content
+  In order to edit an existing H5P activity file
+  As a teacher
+  I need to see the button and access to the H5P editor
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | teacher2 | Teacher   | 2        | teacher2@example.com |
+      | student1  | Student  | 1        | student1@example.com |
+    And the following "courses" exist:
+      | fullname | shortname | category |
+      | Course 1 | C1 | 0 |
+    And the following "course enrolments" exist:
+      | user | course | role           |
+      | teacher1 | C1 | editingteacher |
+      | teacher2 | C1 | editingteacher |
+      | student1 | C1 | student        |
+    And the following "permission overrides" exist:
+      | capability                 | permission | role           | contextlevel | reference |
+      | moodle/h5p:updatelibraries | Allow      | editingteacher | System       |           |
+
+  @javascript
+  Scenario: Add H5P activity using link to content bank file
+    Given the following "contentbank content" exist:
+      | contextlevel | reference | contenttype     | user        | contentname        | filepath                                  |
+      | Course       | C1        | contenttype_h5p | teacher1    | Greeting card      | /h5p/tests/fixtures/greeting-card-887.h5p |
+    And I log in as "admin"
+    # Add the navigation block.
+    And I am on "Course 1" course homepage with editing mode on
+    And I add the "Navigation" block if not present
+    # Create an H5P activity with a link to the content-bank file.
+    And I add a "H5P" to section "1"
+    And I set the following fields to these values:
+      | Name                       | H5P package added as link to content bank |
+      | Description                | Description                                 |
+    And I click on "Add..." "button" in the "Package file" "form_row"
+    And I select "Content bank" repository in file picker
+    And I click on "Greeting card" "file" in repository content area
+    And I click on "Link to the file" "radio"
+    And I click on "Select this file" "button"
+    And I click on "Save and display" "button"
+    And I switch to "h5p-player" class iframe
+    And I switch to "h5p-iframe" class iframe
+    And I should see "Hello world!"
+    And I switch to the main frame
+    # Modify the H5P content using the edit button (which opens the H5P editor).
+    And I follow "Edit H5P content"
+    And I should see "This content may be in use in other places."
+    And I switch to "h5p-editor-iframe" class iframe
+    And I set the field "Greeting text" to "It's a Wonderful Life!"
+    And I switch to the main frame
+    And I click on "Save changes" "button"
+    And I switch to "h5p-player" class iframe
+    And I switch to "h5p-iframe" class iframe
+    # Check the H5P content has changed.
+    And I should not see "Hello world!"
+    And I should see "It's a Wonderful Life!"
+    And I switch to the main frame
+    # Check the H5P has also changed into the content bank.
+    And I am on "Course 1" course homepage
+    And I click on "Site pages" "list_item" in the "Navigation" "block"
+    And I click on "Content bank" "link" in the "Navigation" "block"
+    And I click on "Greeting card" "link"
+    And I switch to "h5p-player" class iframe
+    And I switch to "h5p-iframe" class iframe
+    And I should not see "Hello world!"
+    And I should see "It's a Wonderful Life!"
+    And I switch to the main frame
+    And I log out
+    # Check teacher1 can see the Edit button (because she is the author of this file in the content bank).
+    And I log in as "teacher1"
+    And I am on "Course 1" course homepage with editing mode on
+    And I follow "H5P package added as link to content bank"
+    And I should see "Edit H5P content"
+    And I log out
+    # Check teacher2 can't see the Edit button (because the file was created by the teacher1).
+    And I log in as "teacher2"
+    And I am on "Course 1" course homepage with editing mode on
+    When I follow "H5P package added as link to content bank"
+    Then I should not see "Edit H5P content"
+    And I log out
+    # Check student1 can't see the Edit button.
+    And I log in as "student1"
+    And I am on "Course 1" course homepage with editing mode on
+    And I follow "H5P package added as link to content bank"
+    And I should not see "Edit H5P content"
+
+  @javascript
+  Scenario: Add H5P activity using copy to content bank file
+    Given the following "contentbank content" exist:
+      | contextlevel | reference | contenttype     | user     | contentname        | filepath                                  |
+      | Course       | C1        | contenttype_h5p | admin    | Greeting card      | /h5p/tests/fixtures/greeting-card-887.h5p |
+    And I log in as "admin"
+    # Add the navigation block.
+    And I am on "Course 1" course homepage with editing mode on
+    And I add the "Navigation" block if not present
+    # Create an H5P activity with a copy to the content-bank file.
+    And I add a "H5P" to section "1"
+    And I set the following fields to these values:
+      | Name                       | H5P package added as copy to content bank |
+      | Description                | Description                                 |
+    And I click on "Add..." "button" in the "Package file" "form_row"
+    And I select "Content bank" repository in file picker
+    And I click on "Greeting card" "file" in repository content area
+    And I click on "Make a copy of the file" "radio"
+    And I click on "Select this file" "button"
+    And I click on "Save and display" "button"
+    And I switch to "h5p-player" class iframe
+    And I switch to "h5p-iframe" class iframe
+    And I should see "Hello world!"
+    And I switch to the main frame
+    # Modify the H5P content using the edit button (which opens the H5P editor).
+    And I follow "Edit H5P content"
+    And I should not see "This content may be in use in other places."
+    And I switch to "h5p-editor-iframe" class iframe
+    And I set the field "Greeting text" to "The nightmare before Christmas"
+    And I switch to the main frame
+    And I click on "Save changes" "button"
+    # Check the H5P content has changed.
+    And I switch to "h5p-player" class iframe
+    And I switch to "h5p-iframe" class iframe
+    And I should not see "Hello world!"
+    And I should see "The nightmare before Christmas"
+    And I switch to the main frame
+    # Check the H5P has also changed into the content bank.
+    And I am on "Course 1" course homepage
+    And I click on "Site pages" "list_item" in the "Navigation" "block"
+    And I click on "Content bank" "link" in the "Navigation" "block"
+    And I click on "Greeting card" "link"
+    And I switch to "h5p-player" class iframe
+    And I switch to "h5p-iframe" class iframe
+    And I should see "Hello world!"
+    And I should not see "The nightmare before Christmas"
+    And I switch to the main frame
+    And I log out
+    # Check teacher1 can see the Edit button (because the file is a copy).
+    And I log in as "teacher1"
+    And I am on "Course 1" course homepage with editing mode on
+    And I follow "H5P package added as copy to content bank"
+    And I should see "Edit H5P content"
+    And I log out
+    # Check teacher2 can also see the Edit button (because the file is a copy).
+    And I log in as "teacher2"
+    And I am on "Course 1" course homepage with editing mode on
+    When I follow "H5P package added as copy to content bank"
+    Then I should see "Edit H5P content"
+    And I log out
+    # Check student1 can't see the Edit button.
+    And I log in as "student1"
+    And I am on "Course 1" course homepage with editing mode on
+    And I follow "H5P package added as copy to content bank"
+    And I should not see "Edit H5P content"
+
+  @javascript
+  Scenario: Add H5P activity using private user file
+    Given I log in as "teacher1"
+    # Upload the H5P to private user files.
+    And I follow "Manage private files..."
+    And I upload "h5p/tests/fixtures/greeting-card-887.h5p" file to "Files" filemanager
+    And I click on "Save changes" "button"
+    # Create an H5P activity with a private user file.
+    And I am on "Course 1" course homepage with editing mode on
+    And I add a "H5P" to section "1"
+    And I set the following fields to these values:
+      | Name                       | H5P package added as private user file      |
+      | Description                | Description                                 |
+    And I click on "Add..." "button" in the "Package file" "form_row"
+    And I select "Private files" repository in file picker
+    And I click on "greeting-card-887.h5p" "file" in repository content area
+    And I click on "Link to the file" "radio"
+    And I click on "Select this file" "button"
+    And I click on "Save and display" "button"
+    And I switch to "h5p-player" class iframe
+    And I switch to "h5p-iframe" class iframe
+    And I should see "Hello world!"
+    And I switch to the main frame
+    # Modify the H5P content using the edit button (which opens the H5P editor).
+    And I follow "Edit H5P content"
+    And I should see "This content may be in use in other places."
+    And I switch to "h5p-editor-iframe" class iframe
+    And I set the field "Greeting text" to "Little women"
+    And I switch to the main frame
+    And I click on "Save changes" "button"
+    # Check the H5P content has changed.
+    And I switch to "h5p-player" class iframe
+    And I switch to "h5p-iframe" class iframe
+    And I should not see "Hello world!"
+    And I should see "Little women"
+    And I switch to the main frame
+    And I log out
+    # Check admin can't see the Edit button (because the file belongs to teacher1).
+    And I log in as "admin"
+    And I am on "Course 1" course homepage with editing mode on
+    And I follow "H5P package added as private user file"
+    And I should not see "Edit H5P content"
+    And I log out
+    # Check teacher2 can't see the Edit button (because the file belongs to teacher1).
+    And I log in as "teacher2"
+    And I am on "Course 1" course homepage with editing mode on
+    When I follow "H5P package added as private user file"
+    Then I should not see "Edit H5P content"
+    And I log out
+    # Check student1 can't see the Edit button.
+    And I log in as "student1"
+    And I am on "Course 1" course homepage with editing mode on
+    And I follow "H5P package added as private user file"
+    And I should not see "Edit H5P content"
diff --git a/mod/h5pactivity/view.php b/mod/h5pactivity/view.php
@@ -98,6 +98,6 @@
     echo $OUTPUT->notification($message, \core\output\notification::NOTIFY_WARNING);
 }
 
-echo player::display($fileurl, $config, true, 'mod_h5pactivity');
+echo player::display($fileurl, $config, true, 'mod_h5pactivity', true);
 
 echo $OUTPUT->footer();