fix(player): Added missing workflow to check if media has finished pl…

…aying when Ad stopped playing on post roll to destroy Ads completely
openplayerjs · Jun 7, 2019 · 0716b52 · 0716b52
1 parent 88a5624
commit 0716b52
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 1 deletion.
diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -4324,7 +4324,12 @@ var Controls = function () {
         _this.create();
       };
 
+      this.events.ended = function () {
+        _this.player.getContainer().classList.remove('op-controls--hidden');
+      };
+
       this.player.getElement().addEventListener('controlschanged', this.events.controlschanged);
+      this.player.getElement().addEventListener('ended', this.events.ended);
 
       if (!constants_1.IS_ANDROID && !constants_1.IS_IOS) {
         this.events.mouse.mouseenter = function () {
@@ -4410,6 +4415,7 @@ var Controls = function () {
       }
 
       this.player.getElement().removeEventListener('controlschanged', this.events.controlschanged);
+      this.player.getElement().removeEventListener('ended', this.events.ended);
       Object.keys(this.items).forEach(function (position) {
         _this2.items[position].forEach(function (item) {
           if (item.custom) {
@@ -5438,6 +5444,10 @@ var Play = function () {
         if (_this.player.activeElement().ended && _this.player.isMedia()) {
           _this.button.classList.add('op-controls__playpause--replay');
 
+          _this.button.classList.remove('op-controls__playpause--pause');
+        } else if (_this.player.getElement().currentTime >= _this.player.getElement().duration || _this.player.getElement().currentTime <= 0) {
+          _this.button.classList.add('op-controls__playpause--replay');
+
           _this.button.classList.remove('op-controls__playpause--pause');
         } else {
           _this.button.classList.remove('op-controls__playpause--replay');
@@ -7490,6 +7500,12 @@ var Ads = function () {
             this.element.parentElement.classList.remove('op-ads--active');
             this.adsActive = false;
             clearInterval(this.intervalTimer);
+
+            if (this.element.currentTime >= this.element.duration) {
+              this.destroy();
+              var endedEvent = events_1.addEvent('ended');
+              this.element.dispatchEvent(endedEvent);
+            }
           }
 
           break;
@@ -7508,6 +7524,13 @@ var Ads = function () {
             this.adsActive = false;
             this.adsEnded = true;
             this.element.parentElement.classList.remove('op-ads--active');
+            this.destroy();
+
+            if (this.element.currentTime >= this.element.duration) {
+              var _endedEvent = events_1.addEvent('ended');
+
+              this.element.dispatchEvent(_endedEvent);
+            }
           }
 
           break;

diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/js/controls.ts b/src/js/controls.ts
@@ -169,7 +169,12 @@ class Controls implements PlayerComponent {
             this.create();
         };
 
+        this.events.ended = () => {
+            this.player.getContainer().classList.remove('op-controls--hidden');
+        };
+
         this.player.getElement().addEventListener('controlschanged', this.events.controlschanged);
+        this.player.getElement().addEventListener('ended', this.events.ended);
 
         if (!IS_ANDROID && !IS_IOS) {
             this.events.mouse.mouseenter = () => {
@@ -246,6 +251,7 @@ class Controls implements PlayerComponent {
         }
 
         this.player.getElement().removeEventListener('controlschanged', this.events.controlschanged);
+        this.player.getElement().removeEventListener('ended', this.events.ended);
 
         Object.keys(this.items).forEach((position: string) => {
             this.items[position].forEach((item: any) => {

diff --git a/src/js/controls/play.ts b/src/js/controls/play.ts
@@ -149,6 +149,10 @@ class Play implements PlayerComponent {
             if (this.player.activeElement().ended && this.player.isMedia()) {
                 this.button.classList.add('op-controls__playpause--replay');
                 this.button.classList.remove('op-controls__playpause--pause');
+            } else if (this.player.getElement().currentTime >= this.player.getElement().duration ||
+                this.player.getElement().currentTime <= 0) {
+                this.button.classList.add('op-controls__playpause--replay');
+                this.button.classList.remove('op-controls__playpause--pause');
             } else {
                 this.button.classList.remove('op-controls__playpause--replay');
                 this.button.classList.add('op-controls__playpause--pause');

diff --git a/src/js/media/ads.ts b/src/js/media/ads.ts
@@ -631,6 +631,11 @@ class Ads {
                     this.element.parentElement.classList.remove('op-ads--active');
                     this.adsActive = false;
                     clearInterval(this.intervalTimer);
+                    if (this.element.currentTime >= this.element.duration) {
+                        this.destroy();
+                        const endedEvent = addEvent('ended');
+                        this.element.dispatchEvent(endedEvent);
+                    }
                 }
                 break;
             case google.ima.AdEvent.Type.VOLUME_CHANGED:
@@ -645,6 +650,11 @@ class Ads {
                     this.adsActive = false;
                     this.adsEnded = true;
                     this.element.parentElement.classList.remove('op-ads--active');
+                    this.destroy();
+                    if (this.element.currentTime >= this.element.duration) {
+                        const endedEvent = addEvent('ended');
+                        this.element.dispatchEvent(endedEvent);
+                    }
                 }
                 break;
         }