From bf6191faaeaa4036e050d741678a9dbafd11a8e5 Mon Sep 17 00:00:00 2001
From: Tom Richardson <tom-richardson@am.com>
Date: Wed, 13 Jun 2018 11:08:28 -0500
Subject: [PATCH] fix(vgControls): Track playing state of media specified in
 vgFor

vgControls can set vgFor to track play/pause/ads for play and pause checking of control hiding, but
by checking this.API in the hideAsync function a project without vgMaster set can end up checking
the state of a different media than the one bound to vgControls, which could be sitting in a pause
state while the media bound to the controls is happily in a playing state.  This change sets
this.target to always have a media binding so that the controls are either controlling the one found
in vgFor or the default media of the API (meaning this adds specificity without changing the
previous result of getting state values from the default media object).

#716
---
 src/controls/vg-controls.spec.ts   | 54 +++++++++++++++++++++++-------
 src/controls/vg-controls.ts        | 11 ++++--
 src/core/vg-media/vg-media.spec.ts |  1 +
 3 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/src/controls/vg-controls.spec.ts b/src/controls/vg-controls.spec.ts
index e4059325..5ed57fae 100644
--- a/src/controls/vg-controls.spec.ts
+++ b/src/controls/vg-controls.spec.ts
@@ -1,9 +1,9 @@
 import {VgControls} from "./vg-controls";
 import {VgControlsHidden} from './../core/services/vg-controls-hidden';
-import {ElementRef} from "@angular/core";
+import {ChangeDetectorRef, ElementRef} from "@angular/core";
 import {VgAPI} from "../core/services/vg-api";
-
-
+import {VgMedia} from "../core/vg-media/vg-media";
+import { VgMediaElement } from '../core/vg-media/vg-media-element';
 import { VgStates } from '../core/states/vg-states';
 
 describe('Controls Bar', () => {
@@ -11,6 +11,19 @@ describe('Controls Bar', () => {
     let ref:ElementRef;
     let api:VgAPI;
     let hidden: VgControlsHidden;
+    let media:VgMedia;
+    let cdRef:ChangeDetectorRef;
+    let elem = new VgMediaElement();
+    elem.duration = 100;
+    elem.currentTime = 0;
+    elem.volume = 1;
+    elem.playbackRate = 1;
+    elem.buffered = {
+        length: 2,
+        start: () => {return 0;},
+        end: () => {return 50;}
+    };
+    elem.id = 'testVideo';
 
     beforeEach(() => {
         jasmine.clock().uninstall();
@@ -20,13 +33,30 @@ describe('Controls Bar', () => {
         hidden = new VgControlsHidden();
 
         ref = {
-            nativeElement: {
-                getAttribute: (name) => {
-                    return name;
-                }
-            }
+            nativeElement: elem
+        };
+
+        cdRef = {
+            detectChanges: () => {},
+            markForCheck: () => {},
+            detach: () => {},
+            reattach: () => {},
+            checkNoChanges: () => {}
         };
 
+        media = new VgMedia(api, cdRef);
+        media.vgMedia = elem;
+        media.subscriptions = {
+            // Native events
+            pause: {subscribe:() => {}},
+            play: {subscribe:() => {}},            
+            // Advertisement only events
+            startAds: {subscribe:() => {}},
+            endAds: {subscribe:() => {}},
+        };
+        api.registerMedia(media);
+        
+
         controls = new VgControls(api, ref, hidden);
     });
 
@@ -83,10 +113,9 @@ describe('Controls Bar', () => {
 
     it('Should hide controls when is playing', () => {
         spyOn(hidden, 'state').and.callFake(() => {});
-
+        controls.onPlayerReady();
         controls.vgAutohide = true;
-        api.medias = [{state: VgStates.VG_PLAYING}];
-
+        media.state = VgStates.VG_PLAYING;
         controls.hide();
 
         jasmine.clock().tick(3100);
@@ -95,11 +124,12 @@ describe('Controls Bar', () => {
     });
 
     it('Should not hide controls if player is paused', () => {
+        controls.onPlayerReady();
         controls.hideControls = false;
         controls.vgAutohide = false;
 
         controls.vgAutohide = true;
-        api.medias = [{state: VgStates.VG_PAUSED}];
+        media.state = VgStates.VG_PAUSED;
 
         controls.hide();
 
diff --git a/src/controls/vg-controls.ts b/src/controls/vg-controls.ts
index 13fc1f97..f321df7f 100644
--- a/src/controls/vg-controls.ts
+++ b/src/controls/vg-controls.ts
@@ -73,7 +73,14 @@ export class VgControls implements OnInit, AfterViewInit, OnDestroy {
     }
 
     onPlayerReady() {
-        this.target = this.API.getMediaById(this.vgFor);
+        if(this.vgFor)
+        {
+            this.target = this.API.getMediaById(this.vgFor);
+        }
+        else
+        {
+            this.target = this.API.getDefaultMedia();
+        }
 
         this.subscriptions.push(this.target.subscriptions.play.subscribe(this.onPlay.bind(this)));
         this.subscriptions.push(this.target.subscriptions.pause.subscribe(this.onPause.bind(this)));
@@ -128,7 +135,7 @@ export class VgControls implements OnInit, AfterViewInit, OnDestroy {
     }
 
     private hideAsync() {
-        if (this.API.state === VgStates.VG_PLAYING) {
+        if (this.target.state === VgStates.VG_PLAYING) {
             this.timer = setTimeout(() => {
                 this.hideControls = true;
                 this.hidden.state(true);
diff --git a/src/core/vg-media/vg-media.spec.ts b/src/core/vg-media/vg-media.spec.ts
index c2d7ff75..c870591a 100644
--- a/src/core/vg-media/vg-media.spec.ts
+++ b/src/core/vg-media/vg-media.spec.ts
@@ -39,6 +39,7 @@ describe('Videogular Media', () => {
     });
 
     it('Should load a new media if a change on dom have been happened', () => {
+        jasmine.clock().uninstall();
         jasmine.clock().install();
 
         spyOn(elem, 'load').and.callThrough();