pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website_slides: fix auto-completion of Youtube lesson

Browse Source 
PURPOSE

Test frontend and UI tools of eLearning.

SPECIFICATIONS

A slide is supposed to be automatically completed in fullscreen mode when
Youtube player reaches the last 30 seconds of the video.

This feature was broken because of wrong Promise completion and also because
Youtube API has apparently changed the way they send "events". "Playing" event
was not sent every X seconds. Function running to check the video timer has
therefore been reworked to take that change into account.

LINKS

Task ID 1937768
This commit is contained in:
Aurélien Warnon
2019-08-26 13:33:22 +00:00
committed by Thibault Delavallée
parent 4c6abbb5e1
commit bee50c4284
1 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+33 -18
View File
@@ -50,7 +50,10 @@ odoo.define('website_slides.fullscreen', function (require) {
});
},
_loadYoutubeAPI: function () {
var def = new Promise(function () {});
var self = this;
var def = new Promise(function (resolve) {
self.resolveLoadYoutube = resolve;
});
if ($(document).find('script[src="' + this.youtubeUrl + '"]').length === 0) {
var $youtubeElement = $('<script/>', {src: this.youtubeUrl});
$(document.head).append($youtubeElement);
@@ -58,11 +61,11 @@ odoo.define('website_slides.fullscreen', function (require) {
// function called when the Youtube asset is loaded
// see https://developers.google.com/youtube/iframe_api_reference#Requirements
onYouTubeIframeAPIReady = function () {
Promise.resolve(def);
self.resolveLoadYoutube();
};
} else {
Promise.resolve(def);
self.resolveLoadYoutube();
}
return def;
},
@@ -85,9 +88,9 @@ odoo.define('website_slides.fullscreen', function (require) {
},
/**
* Specific method of the youtube api.
* Whenever the player starts playing, a setinterval is created.
* Whenever the player starts playing/pausing/buffering/..., a setinterval is created.
* This setinterval is used to check te user's progress in the video.
* Once the user reaches a particular time in the video, the slide will be considered as completed
* Once the user reaches a particular time in the video (30s before end), the slide will be considered as completed
* if the video doesn't have a mini-quiz.
* This method also allows to automatically go to the next slide (or the quiz associated to the current
* video) once the video is over
@@ -97,22 +100,35 @@ odoo.define('website_slides.fullscreen', function (require) {
*/
_onPlayerStateChange: function (event){
var self = this;
clearInterval(self.tid);
if (event.data === YT.PlayerState.PLAYING && !self.slide.completed) {
if (self.slide.completed) {
return;
}
if (event.data !== YT.PlayerState.ENDED) {
if (!event.target.getCurrentTime) {
return;
}
if (self.tid) {
clearInterval(self.tid);
}
self.currentVideoTime = event.target.getCurrentTime();
self.totalVideoTime = event.target.getDuration();
self.tid = setInterval(function (){
if (event.target.getCurrentTime){
var currentTime = event.target.getCurrentTime();
var totalTime = event.target.getDuration();
if (totalTime && currentTime > totalTime - 30){
clearInterval(self.tid);
if (!self.slide.hasQuestion && !self.slide.completed){
self.trigger_up('slide_to_complete', self.slide);
}
self.currentVideoTime += 1;
if (self.totalVideoTime && self.currentVideoTime > self.totalVideoTime - 30){
clearInterval(self.tid);
if (!self.slide.hasQuestion && !self.slide.completed){
self.trigger_up('slide_to_complete', self.slide);
}
}
}, 1000);
}
if (event.data === YT.PlayerState.ENDED){
} else {
if (self.tid) {
clearInterval(self.tid);
}
this.player = undefined;
if (this.slide.hasNext) {
this.trigger_up('slide_go_next');
@@ -345,7 +361,6 @@ odoo.define('website_slides.fullscreen', function (require) {
}, 800);
});
clipboard.on('error', function (e) {
console.log(e);
clipboard.destroy();
})
},