From bee50c42849928fcc23be9f3850c50abd3c434d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Warnon?= <awa@odoo.com>
Date: Fri, 23 Aug 2019 15:09:45 +0000
Subject: [PATCH] [FIX] website_slides: fix auto-completion of Youtube lesson

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
---
 .../src/js/slides_course_fullscreen_player.js | 51 ++++++++++++-------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index a2617d36bc0..c014c5280fc 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -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();
             })
         },