Merge branch 'MDL-63431-master' of https://github.com/kabalin/moodle

lib/editor/atto/plugins/media/lang/en/atto_media.php

@@ -50,6 +50,7 @@
$string['descriptionssourcelabel'] = 'Description track URL';
$string['displayoptions'] = 'Display options';
$string['entername'] = 'Enter name';
$string['entertitle'] = 'Enter title';
$string['entersource'] = 'Source URL';
$string['enterurl'] = 'Enter URL';
$string['height'] = 'Height';

lib/editor/atto/plugins/media/lib.php

@@ -53,7 +53,7 @@ function atto_media_strings_for_js() {
                                          'descriptionssourcelabel',
                                          'displayoptions',
                                          'entername',
                                          'entername',
                                          'entertitle',
                                          'entersource',
                                          'enterurl',
                                          'height',
@@ -79,7 +79,7 @@ function atto_media_strings_for_js() {
                                          'videosourcelabel',
                                          'videowidth',
                                          'width'),
                                    'atto_media');
                                          'atto_media');
}

/**

lib/editor/atto/plugins/media/tests/behat/media.feature

@@ -31,7 +31,7 @@ Feature: Add media to Atto
    When I click on "Save changes" "button"
    Then "//a[. = 'moodle-logo.webm']" "xpath_element" should exist

  @javascript
  @javascript @atto_media_video
  Scenario: Insert some media as a plain video
    Given I click on "Video" "link"
    And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_media_source" "css_element"
@@ -46,7 +46,7 @@ Feature: Add media to Atto
    When I click on "Insert media" "button"
    Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][descendant::source[contains(@src, 'moodle-logo.mp4')]]" "xpath_element" should exist

  @javascript
  @javascript @atto_media_video
  Scenario: Insert some media as a video with display settings
    Given I click on "Video" "link"
    And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_media_source" "css_element"
@@ -61,11 +61,12 @@ Feature: Add media to Atto
    And I change window size to "large"
    And I set the field with xpath "//*[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_width_entry ')]" to "420"
    And I set the field with xpath "//*[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_height_entry ')]" to "69"
    And I set the field "Enter title" to "VideoTitle"
    And I click on "Display options" "link"
    When I click on "Insert media" "button"
    Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][contains(@poster, 'moodle-logo.png')][@width=420][@height=69]" "xpath_element" should exist
    Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][contains(@poster, 'moodle-logo.png')][@width=420][@height=69][@title='VideoTitle']" "xpath_element" should exist

  @javascript
  @javascript @atto_media_video
  Scenario: Insert some media as a video with advanced settings
    Given I click on "Video" "link"
    And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_media_source" "css_element"
@@ -80,7 +81,7 @@ Feature: Add media to Atto
    When I click on "Insert media" "button"
    Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][@controls='true'][@loop='true'][@autoplay='true'][@autoplay='true']" "xpath_element" should exist

  @javascript
  @javascript @atto_media_video
  Scenario: Insert some media as a video with tracks
    Given I click on "Video" "link"
    And I change window size to "large"
@@ -164,3 +165,40 @@ Feature: Add media to Atto
    And I set the field with xpath "(//*[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_default ')])[9]" to "1"
    When I click on "Insert media" "button"
    Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='subtitles'][@label='Swedish'][@srclang='sv'][@default='true']][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='subtitles'][@label='English'][@srclang='en'][not(@default)]][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='captions'][@label='Swedish'][@srclang='sv'][not(@default)]][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='captions'][@label='English'][@srclang='en'][@default='true']][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='descriptions'][@label='Swedish'][@srclang='sv'][@default='true']][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='descriptions'][@label='English'][@srclang='en'][not(@default)]][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='chapters'][@label='Swedish'][@srclang='sv'][not(@default)]][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='chapters'][@label='English'][@srclang='en'][@default='true']][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='metadata'][@label='Swedish'][@srclang='sv'][@default='true']][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='metadata'][@label='English'][@srclang='en'][not(@default)]]" "xpath_element" should exist

  @javascript @atto_media_audio
  Scenario: Insert some media as a plain audio
    Given I click on "Audio" "link"
    And I click on "Browse repositories..." "button" in the "#id_summary_editor_audio .atto_media_source.atto_media_media_source" "css_element"
    And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
    And I click on "moodle-logo.mp4" "link"
    And I click on "Select this file" "button"
    When I click on "Insert media" "button"
    Then "//audio[descendant::source[contains(@src, 'moodle-logo.mp4')]]" "xpath_element" should exist

  @javascript @atto_media_audio
  Scenario: Insert some media as an audio with display settings
    Given I click on "Audio" "link"
    And I click on "Browse repositories..." "button" in the "#id_summary_editor_audio .atto_media_source.atto_media_media_source" "css_element"
    And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
    And I click on "moodle-logo.mp4" "link"
    And I click on "Select this file" "button"
    And I click on "Display options" "link" in the "#id_summary_editor_audio" "css_element"
    And I set the field "audio_media-title-entry" to "AudioTitle"
    When I click on "Insert media" "button"
    Then "//audio[descendant::source[contains(@src, 'moodle-logo.mp4')]][@title='AudioTitle']" "xpath_element" should exist

  @javascript @atto_media_audio
  Scenario: Insert some media as an audio with advanced settings
    Given I click on "Audio" "link"
    And I click on "Browse repositories..." "button" in the "#id_summary_editor_audio .atto_media_source.atto_media_media_source" "css_element"
    And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
    And I click on "moodle-logo.mp4" "link"
    And I click on "Select this file" "button"
    And I click on "Advanced settings" "link" in the "#id_summary_editor_audio" "css_element"
    And the field "audio_media-controls-toggle" matches value "1"
    And I set the field "audio_media-autoplay-toggle" to "1"
    And I set the field "audio_media-mute-toggle" to "1"
    And I set the field "audio_media-loop-toggle" to "1"
    When I click on "Insert media" "button"
    Then "//audio[descendant::source[contains(@src, 'moodle-logo.mp4')]][@controls='true'][@loop='true'][@autoplay='true'][@autoplay='true']" "xpath_element" should exist

lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js

@@ -51,6 +51,7 @@ var COMPONENTNAME = 'atto_media',
        TRACK_SOURCE: 'atto_media_track_source',
        DISPLAY_OPTIONS: 'atto_media_display_options',
        NAME_INPUT: 'atto_media_name_entry',
        TITLE_INPUT: 'atto_media_title_entry',
        URL_INPUT: 'atto_media_url_entry',
        POSTER_SIZE: 'atto_media_poster_size',
        LINK_SIZE: 'atto_media_link_size',
@@ -82,6 +83,7 @@ var COMPONENTNAME = 'atto_media',
        TRACK_SOURCE: '.' + CSS.TRACK_SOURCE,
        DISPLAY_OPTIONS: '.' + CSS.DISPLAY_OPTIONS,
        NAME_INPUT: '.' + CSS.NAME_INPUT,
        TITLE_INPUT: '.' + CSS.TITLE_INPUT,
        URL_INPUT: '.' + CSS.URL_INPUT,
        POSTER_SIZE: '.' + CSS.POSTER_SIZE,
        LINK_SIZE: '.' + CSS.LINK_SIZE,
@@ -162,14 +164,14 @@ var COMPONENTNAME = 'atto_media',
                    '<input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">' +
                    '<legend class="ftoggler">{{get_string "displayoptions" component}}</legend>' +
                    '<div class="fcontainer">' +
                        '{{> form_components.display_options}}' +
                        '{{renderPartial "form_components.display_options" context=this id=CSS.VIDEO mediatype_video=true}}' +
                    '</div>' +
                '</fieldset>' +
                '<fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings">' +
                    '<input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">' +
                    '<legend class="ftoggler">{{get_string "advancedsettings" component}}</legend>' +
                    '<div class="fcontainer">' +
                        '{{> form_components.advanced_settings}}' +
                        '{{renderPartial "form_components.advanced_settings" context=this id=CSS.VIDEO}}' +
                    '</div>' +
                '</fieldset>' +
                '<fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks">' +
@@ -182,11 +184,18 @@ var COMPONENTNAME = 'atto_media',
            AUDIO: '' +
                '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel"' +
                    ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' +
                '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options">' +
                    '<input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">' +
                    '<legend class="ftoggler">{{get_string "displayoptions" component}}</legend>' +
                    '<div class="fcontainer">' +
                        '{{renderPartial "form_components.display_options" context=this id=CSS.AUDIO}}' +
                    '</div>' +
                '</fieldset>' +
                '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings">' +
                    '<input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">' +
                    '<legend class="ftoggler">{{get_string "advancedsettings" component}}</legend>' +
                    '<div class="fcontainer">' +
                        '{{> form_components.advanced_settings}}' +
                        '{{renderPartial "form_components.advanced_settings" context=this id=CSS.AUDIO}}' +
                    '</div>' +
                '</fieldset>' +
                '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks">' +
@@ -235,6 +244,13 @@ var COMPONENTNAME = 'atto_media',
                '</div>',
            DISPLAY_OPTIONS: '' +
                '<div class="{{CSS.DISPLAY_OPTIONS}}">' +
                    '<div class="m-b-1">' +
                        '<label for="{{id}}_media-title-entry">{{get_string "entertitle" component}}</label>' +
                        '<input class="form-control fullwidth {{CSS.TITLE_INPUT}}" type="text" id="{{id}}_media-title-entry"' +
                            'size="32"/>' +
                    '</div>' +
                    '<div class="clearfix"></div>' +
                    '{{#mediatype_video}}' +
                    '<div class="m-b-1">' +
                        '<label>{{get_string "size" component}}</label>' +
                        '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
@@ -247,26 +263,35 @@ var COMPONENTNAME = 'atto_media',
                    '</div>' +
                    '<div class="clearfix"></div>' +
                    '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' +
                    '{{/mediatype_video}}' +
                '<div>',
            ADVANCED_SETTINGS: '' +
                '<div class="{{CSS.ADVANCED_SETTINGS}}">' +
                    '<div class="form-check">' +
                        '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' +
                        'id="media-controls-toggle"/>' +
                        '<label class="form-check-label" for="media-controls-toggle">{{get_string "controls" component}}</label>' +
                        'id="{{id}}_media-controls-toggle"/>' +
                        '<label class="form-check-label" for="{{id}}_media-controls-toggle">' +
                        '{{get_string "controls" component}}' +
                        '</label>' +
                    '</div>' +
                    '<div class="form-check">' +
                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' +
                        'id="media-autoplay-toggle"/>' +
                        '<label class="form-check-label" for="media-autoplay-toggle">{{get_string "autoplay" component}}</label>' +
                        'id="{{id}}_media-autoplay-toggle"/>' +
                        '<label class="form-check-label" for="{{id}}_media-autoplay-toggle">' +
                        '{{get_string "autoplay" component}}' +
                        '</label>' +
                    '</div>' +
                    '<div class="form-check">' +
                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="media-mute-toggle"/>' +
                        '<label class="form-check-label" for="media-mute-toggle">{{get_string "mute" component}}</label>' +
                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="{{id}}_media-mute-toggle"/>' +
                        '<label class="form-check-label" for="{{id}}_media-mute-toggle">' +
                        '{{get_string "mute" component}}' +
                        '</label>' +
                    '</div>' +
                    '<div class="form-check">' +
                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="media-loop-toggle"/>' +
                        '<label class="form-check-label" for="media-loop-toggle">{{get_string "loop" component}}</label>' +
                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="{{id}}_media-loop-toggle"/>' +
                        '<label class="form-check-label" for="{{id}}_media-loop-toggle">' +
                        '{{get_string "loop" component}}' +
                        '</label>' +
                    '</div>' +
                '</div>',
            TRACK_TABS: '' +
@@ -368,6 +393,7 @@ var COMPONENTNAME = 'atto_media',
                    '{{#loop}}loop="true" {{/loop}}' +
                    '{{#muted}}muted="true" {{/muted}}' +
                    '{{#autoplay}}autoplay="true" {{/autoplay}}' +
                    '{{#title}}title="{{../title}}" {{/title}}' +
                '>' +
                    '{{#sources}}<source src="{{source}}">{{/sources}}' +
                    '{{#tracks}}' +
@@ -382,6 +408,7 @@ var COMPONENTNAME = 'atto_media',
                    '{{#loop}}loop="true" {{/loop}}' +
                    '{{#muted}}muted="true" {{/muted}}' +
                    '{{#autoplay}}autoplay="true" {{/autoplay}}' +
                    '{{#title}}title="{{../title}}" {{/title}}' +
                '>' +
                    '{{#sources}}<source src="{{source}}">{{/sources}}' +
                    '{{#tracks}}' +
@@ -647,17 +674,23 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
        }, this);

        // Populate values.
        tabPane.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).setAttribute('value', properties.poster);
        tabPane.one(SELECTORS.WIDTH_INPUT).set('value', properties.width);
        tabPane.one(SELECTORS.HEIGHT_INPUT).set('value', properties.height);
        tabPane.one(SELECTORS.TITLE_INPUT).set('value', properties.title);
        tabPane.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).set('checked', properties.controls);
        tabPane.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).set('checked', properties.autoplay);
        tabPane.one(SELECTORS.MEDIA_MUTE_TOGGLE).set('checked', properties.muted);
        tabPane.one(SELECTORS.MEDIA_LOOP_TOGGLE).set('checked', properties.loop);

        // Switch to the correct tab.
        // Determine medium type.
        var mediumType = this._getMediumTypeFromTabPane(tabPane);

        if (mediumType === 'video') {
            // Populate values unique for video.
            tabPane.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).setAttribute('value', properties.poster);
            tabPane.one(SELECTORS.WIDTH_INPUT).set('value', properties.width);
            tabPane.one(SELECTORS.HEIGHT_INPUT).set('value', properties.height);
        }

        // Switch to the correct tab.
        // Remove active class from all tabs + tab panes.
        tabPane.siblings('.active').removeClass('active');
        content.all('.root.nav-tabs .nav-item a').removeClass('active');
@@ -703,6 +736,7 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
            type: medium.test('video') ? MEDIA_TYPES.VIDEO : MEDIA_TYPES.AUDIO,
            sources: medium.all('source').get('src'),
            poster: medium.getAttribute('poster'),
            title: medium.getAttribute('title'),
            width: medium.getAttribute('width'),
            height: medium.getAttribute('height'),
            autoplay: boolAttr(medium, 'autoplay'),
@@ -947,7 +981,8 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
            showControls: tab.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).get('checked'),
            autoplay: tab.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).get('checked'),
            muted: tab.one(SELECTORS.MEDIA_MUTE_TOGGLE).get('checked'),
            loop: tab.one(SELECTORS.MEDIA_LOOP_TOGGLE).get('checked')
            loop: tab.one(SELECTORS.MEDIA_LOOP_TOGGLE).get('checked'),
            title: tab.one(SELECTORS.TITLE_INPUT).get('value') || false
        };
    }
}, {