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

MDL-74113 atto_media: Listen to play/pause events

Browse Source
This commit is contained in:
Huong Nguyen
2022-03-22 11:33:06 +07:00
parent 3ab09c775d
commit b1bad66d46
4 changed files with 133 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js
Vendored
+43
View File
@@ -434,6 +434,12 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.editor.delegate('dblclick', this._displayDialogue, 'video', this);
this.editor.delegate('click', this._handleClick, 'video', this);
// For some reason, clicking the video on Firefox does not trigger the click event, while in Chrome it does.
// We also need to handle the play/pause instead.
this._attachPlayPauseEvents();
var changeHandler = this._attachPlayPauseEvents.bind(this);
this.get('host').on('change', changeHandler, null);
this.addButton({
icon: 'e/insert_edit_video',
callback: this._displayDialogue,
@@ -443,6 +449,26 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Attaches Play/Pause events to the video nodes.
*
* @private
*/
_attachPlayPauseEvents: function() {
if (this._handlePlayEndBound === undefined) {
this._handlePlayEndBound = this._handlePlayEnd.bind(this);
}
var videos = this.editor.getDOMNode().querySelectorAll('video');
videos.forEach(function(video) {
// Prevent duplicated event listeners.
video.removeEventListener('play', this._handlePlayEndBound);
video.removeEventListener('pause', this._handlePlayEndBound);
// Add event listeners.
video.addEventListener('play', this._handlePlayEndBound);
video.addEventListener('pause', this._handlePlayEndBound);
}.bind(this));
},
/**
* Gets the root context for all templates, with extra supplied context.
*
@@ -478,6 +504,23 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Handles a play/end on a media element.
*
* @method _handlePlayEnd
* @param {Event} e
* @private
*/
_handlePlayEnd: function(e) {
var medium = Y.one(e.target);
var selection = this.get('host').getSelectionFromNode(medium);
if (this.get('host').getSelection() !== selection) {
this.get('host').setSelection(selection);
this.get('host')._hasSelectionChanged(e);
}
},
/**
* Display the media editing tool.
*
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js
Vendored
+43
View File
@@ -434,6 +434,12 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.editor.delegate('dblclick', this._displayDialogue, 'video', this);
this.editor.delegate('click', this._handleClick, 'video', this);
// For some reason, clicking the video on Firefox does not trigger the click event, while in Chrome it does.
// We also need to handle the play/pause instead.
this._attachPlayPauseEvents();
var changeHandler = this._attachPlayPauseEvents.bind(this);
this.get('host').on('change', changeHandler, null);
this.addButton({
icon: 'e/insert_edit_video',
callback: this._displayDialogue,
@@ -443,6 +449,26 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Attaches Play/Pause events to the video nodes.
*
* @private
*/
_attachPlayPauseEvents: function() {
if (this._handlePlayEndBound === undefined) {
this._handlePlayEndBound = this._handlePlayEnd.bind(this);
}
var videos = this.editor.getDOMNode().querySelectorAll('video');
videos.forEach(function(video) {
// Prevent duplicated event listeners.
video.removeEventListener('play', this._handlePlayEndBound);
video.removeEventListener('pause', this._handlePlayEndBound);
// Add event listeners.
video.addEventListener('play', this._handlePlayEndBound);
video.addEventListener('pause', this._handlePlayEndBound);
}.bind(this));
},
/**
* Gets the root context for all templates, with extra supplied context.
*
@@ -478,6 +504,23 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Handles a play/end on a media element.
*
* @method _handlePlayEnd
* @param {Event} e
* @private
*/
_handlePlayEnd: function(e) {
var medium = Y.one(e.target);
var selection = this.get('host').getSelectionFromNode(medium);
if (this.get('host').getSelection() !== selection) {
this.get('host').setSelection(selection);
this.get('host')._hasSelectionChanged(e);
}
},
/**
* Display the media editing tool.
*
lib/editor/atto/plugins/media/yui/src/button/js/button.js
Vendored
+43
View File
@@ -432,6 +432,12 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.editor.delegate('dblclick', this._displayDialogue, 'video', this);
this.editor.delegate('click', this._handleClick, 'video', this);
// For some reason, clicking the video on Firefox does not trigger the click event, while in Chrome it does.
// We also need to handle the play/pause instead.
this._attachPlayPauseEvents();
var changeHandler = this._attachPlayPauseEvents.bind(this);
this.get('host').on('change', changeHandler, null);
this.addButton({
icon: 'e/insert_edit_video',
callback: this._displayDialogue,
@@ -441,6 +447,26 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Attaches Play/Pause events to the video nodes.
*
* @private
*/
_attachPlayPauseEvents: function() {
if (this._handlePlayEndBound === undefined) {
this._handlePlayEndBound = this._handlePlayEnd.bind(this);
}
var videos = this.editor.getDOMNode().querySelectorAll('video');
videos.forEach(function(video) {
// Prevent duplicated event listeners.
video.removeEventListener('play', this._handlePlayEndBound);
video.removeEventListener('pause', this._handlePlayEndBound);
// Add event listeners.
video.addEventListener('play', this._handlePlayEndBound);
video.addEventListener('pause', this._handlePlayEndBound);
}.bind(this));
},
/**
* Gets the root context for all templates, with extra supplied context.
*
@@ -476,6 +502,23 @@ Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Handles a play/end on a media element.
*
* @method _handlePlayEnd
* @param {Event} e
* @private
*/
_handlePlayEnd: function(e) {
var medium = Y.one(e.target);
var selection = this.get('host').getSelectionFromNode(medium);
if (this.get('host').getSelection() !== selection) {
this.get('host').setSelection(selection);
this.get('host')._hasSelectionChanged(e);
}
},
/**
* Display the media editing tool.
*