fix(VgPlaybackButton): Added ChangeDetectorRef and called detectChang…

…es() in click handler

I injected `public cdr: ChangeDetectorRef` into VgPlaybackButton and called `detectChanges()` as the
last action in the `updatePlaybackSpeed()` method. This fixes videogular#845. I had to make some innocuous
changes to some spec files to get it to build because of compile-time errors when running `npm run
build`.

845

src/controls/vg-playback-button/vg-playback-button.spec.ts

@@ -1,12 +1,13 @@
 import { VgPlaybackButton } from './vg-playback-button';
 import { VgAPI } from '../../core/services/vg-api';
-import { ElementRef } from '@angular/core';
+import { ElementRef, ChangeDetectorRef } from '@angular/core';
 import { VgStates } from '../../core/states/vg-states';
 
 describe('Playback Button', () => {
   let playbackButton: VgPlaybackButton;
   let ref: ElementRef;
   let api: VgAPI;
+  let cdr: ChangeDetectorRef;
 
   beforeEach(() => {
     ref = {
@@ -27,7 +28,9 @@ describe('Playback Button', () => {
       }
     };
 
-    playbackButton = new VgPlaybackButton(ref, api);
+    cdr = { detectChanges: () => {}, markForCheck: () => {}, checkNoChanges: () => {}, detach: () => {}, reattach: () => {} };
+
+    playbackButton = new VgPlaybackButton(ref, api, cdr);
   });
 
   it('Should set playbackIndex default value to 1', () => {

src/controls/vg-playback-button/vg-playback-button.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ElementRef, HostListener, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
+import { Component, Input, ElementRef, HostListener, OnInit, ViewEncapsulation, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
 import { Subscription } from 'rxjs';
 
@@ -51,7 +51,7 @@ export class VgPlaybackButton implements OnInit, OnDestroy {
 
     ariaValue = 1;
 
-    constructor(ref: ElementRef, public API: VgAPI) {
+    constructor(ref: ElementRef, public API: VgAPI, public cdr: ChangeDetectorRef) {
         this.elem = ref.nativeElement;
         this.playbackValues = [ '0.5', '1.0', '1.5', '2.0' ];
         this.playbackIndex = 1;
@@ -93,6 +93,8 @@ export class VgPlaybackButton implements OnInit, OnDestroy {
         else {
             this.target.playbackRate[ this.vgFor ] = (this.playbackValues[ this.playbackIndex ]);
         }
+
+        this.detectChanges();
     }
 
     getPlaybackRate() {
@@ -103,4 +105,12 @@ export class VgPlaybackButton implements OnInit, OnDestroy {
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
     }
+
+    detectChanges() {
+      try {
+        this.cdr.detectChanges();
+      } catch(e) {
+        console.warn(e);
+      }
+    }
 }

src/core/services/vg-api.spec.ts

@@ -248,8 +248,8 @@ describe('Videogular Player', () => {
 
         api.seekTime(10);
 
-        expect(api.$$seek).toHaveBeenCalledWith({id: 'main'}, 10, false);
-        expect(api.$$seek).toHaveBeenCalledWith({id: 'secondary'}, 10, false);
+        expect(api.$$seek).toHaveBeenCalledWith({id: 'main'} as IPlayable, 10, false);
+        expect(api.$$seek).toHaveBeenCalledWith({id: 'secondary'} as IPlayable, 10, false);
     });
 
     it('Should seek to a specified time by percentage', () => {
@@ -262,8 +262,8 @@ describe('Videogular Player', () => {
 
         api.seekTime(10, true);
 
-        expect(api.$$seek).toHaveBeenCalledWith({id: 'main'}, 10, true);
-        expect(api.$$seek).toHaveBeenCalledWith({id: 'secondary'}, 10, true);
+        expect(api.$$seek).toHaveBeenCalledWith({id: 'main'} as IPlayable, 10, true);
+        expect(api.$$seek).toHaveBeenCalledWith({id: 'secondary'} as IPlayable, 10, true);
     });
 
     it('Should seek media files to a specified time by second', () => {