Merge pull request #374 from videogular/feat/add-is-player-ready

Feat/add is player ready and fix fullscreen (BREAKING CHANGE)
videogular · Jan 24, 2017 · bb1c3ce · bb1c3ce
2 parents 94acde9 + c583f17
commit bb1c3ce
Show file tree

Hide file tree

Showing 23 changed files with 325 additions and 243 deletions.
diff --git a/src/buffering/vg-buffering.ts b/src/buffering/vg-buffering.ts
@@ -112,7 +112,12 @@ export class VgBuffering implements OnInit {
     }
 
     ngOnInit() {
-        this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        if (this.API.isPlayerReady) {
+            this.onPlayerReady();
+        }
+        else {
+            this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        }
     }
 
     onPlayerReady() {

diff --git a/src/controls/vg-controls.ts b/src/controls/vg-controls.ts
@@ -1,17 +1,13 @@
-import {
-    Component, Input, OnInit, ElementRef, Renderer, HostBinding, AfterViewInit,
-    ViewEncapsulation
-} from '@angular/core';
-import {Observable} from "rxjs/Observable";
-import {VgAPI} from "../core/services/vg-api";
-
+import { Component, Input, OnInit, ElementRef, HostBinding, AfterViewInit, ViewEncapsulation } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { VgAPI } from '../core/services/vg-api';
 import 'rxjs/add/observable/fromEvent';
 
 @Component({
     selector: 'vg-controls',
     encapsulation: ViewEncapsulation.None,
     template: `<ng-content></ng-content>`,
-    styles: [`
+    styles: [ `
         vg-controls {
             position: absolute;
             display: flex;
@@ -30,22 +26,22 @@ import 'rxjs/add/observable/fromEvent';
         vg-controls.hide {
           bottom: -50px;
         }
-    `]
+    ` ]
 })
 export class VgControls implements OnInit, AfterViewInit {
-    elem:HTMLElement;
-    vgFor:string;
-    target:any;
+    elem: HTMLElement;
+    vgFor: string;
+    target: any;
 
-    @HostBinding('style.pointer-events') isAdsPlaying:string = 'initial';
-    @HostBinding('class.hide') hideControls:boolean = false;
+    @HostBinding('style.pointer-events') isAdsPlaying: string = 'initial';
+    @HostBinding('class.hide') hideControls: boolean = false;
 
-    @Input() vgAutohide:boolean = false;
-    @Input() vgAutohideTime:number = 3;
+    @Input() vgAutohide: boolean = false;
+    @Input() vgAutohideTime: number = 3;
 
-    private timer:any;
+    private timer: any;
 
-    constructor(private API:VgAPI, private ref:ElementRef) {
+    constructor(private API: VgAPI, private ref: ElementRef) {
         this.elem = ref.nativeElement;
     }
 
@@ -56,7 +52,12 @@ export class VgControls implements OnInit, AfterViewInit {
         let mouseLeave = Observable.fromEvent(this.API.videogularElement, 'mouseleave');
         mouseLeave.subscribe(this.hide.bind(this));
 
-        this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        if (this.API.isPlayerReady) {
+            this.onPlayerReady();
+        }
+        else {
+            this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        }
     }
 
     onPlayerReady() {

diff --git a/src/controls/vg-fullscreen/vg-fullscreen.spec.ts b/src/controls/vg-fullscreen/vg-fullscreen.spec.ts
@@ -7,6 +7,7 @@ describe('Videogular Player', () => {
     let fullscreen: VgFullscreen;
     let ref:ElementRef;
     let api:VgAPI;
+    let fsAPI:VgFullscreenAPI;
 
     beforeEach(() => {
         ref = {
@@ -18,7 +19,8 @@ describe('Videogular Player', () => {
         };
 
         api = new VgAPI();
-        fullscreen = new VgFullscreen(ref, api);
+        fsAPI = new VgFullscreenAPI();
+        fullscreen = new VgFullscreen(ref, api, fsAPI);
     });
 
     it('Should get media by id on init', () => {
@@ -32,23 +34,23 @@ describe('Videogular Player', () => {
 
     describe('onClick', () => {
         beforeEach(() => {
-            spyOn(VgFullscreenAPI, 'toggleFullscreen');
+            spyOn(fsAPI, 'toggleFullscreen');
         });
 
         it('Should call toggleFullscreen with null param if target is API', () => {
             fullscreen.target = api;
 
             fullscreen.onClick();
 
-            expect(VgFullscreenAPI.toggleFullscreen).toHaveBeenCalledWith(null);
+            expect(fsAPI.toggleFullscreen).toHaveBeenCalledWith(null);
         });
 
         it('Should call toggleFullscreen with target param if target', () => {
             fullscreen.target = 'test';
 
             fullscreen.onClick();
 
-            expect(VgFullscreenAPI.toggleFullscreen).toHaveBeenCalledWith('test');
+            expect(fsAPI.toggleFullscreen).toHaveBeenCalledWith('test');
         });
     });
 });
diff --git a/src/controls/vg-fullscreen/vg-fullscreen.ts b/src/controls/vg-fullscreen/vg-fullscreen.ts
@@ -1,18 +1,16 @@
-import { Component, Input, ElementRef, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
-
-import {VgAPI} from '../../core/services/vg-api';
-import {VgFullscreenAPI} from "../../core/services/vg-fullscreen-api";
+import { Component, ElementRef, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
+import { VgAPI } from '../../core/services/vg-api';
+import { VgFullscreenAPI } from '../../core/services/vg-fullscreen-api';
 
 
 @Component({
     selector: 'vg-fullscreen',
     encapsulation: ViewEncapsulation.None,
-    template:
-        `<div class="icon"
+    template: `<div class="icon"
              [class.vg-icon-fullscreen]="!isFullscreen"
              [class.vg-icon-fullscreen_exit]="isFullscreen">
         </div>`,
-    styles: [`
+    styles: [ `
         vg-fullscreen {
             -webkit-touch-callout: none;
             -webkit-user-select: none;
@@ -32,28 +30,33 @@ import {VgFullscreenAPI} from "../../core/services/vg-fullscreen-api";
         vg-fullscreen .icon {
             pointer-events: none;
         }
-    `]
+    ` ]
 })
 export class VgFullscreen implements OnInit {
-    elem:HTMLElement;
-    vgFor:string;
-    target:Object;
-    isFullscreen:boolean = false;
+    elem: HTMLElement;
+    vgFor: string;
+    target: Object;
+    isFullscreen: boolean = false;
 
-    constructor(ref:ElementRef, public API:VgAPI) {
+    constructor(ref: ElementRef, public API: VgAPI, public fsAPI: VgFullscreenAPI) {
         this.elem = ref.nativeElement;
-        VgFullscreenAPI.onChangeFullscreen.subscribe(this.onChangeFullscreen.bind(this));
+        this.fsAPI.onChangeFullscreen.subscribe(this.onChangeFullscreen.bind(this));
     }
 
     ngOnInit() {
-        this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        if (this.API.isPlayerReady) {
+            this.onPlayerReady();
+        }
+        else {
+            this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        }
     }
 
     onPlayerReady() {
         this.target = this.API.getMediaById(this.vgFor);
     }
 
-    onChangeFullscreen(fsState:boolean) {
+    onChangeFullscreen(fsState: boolean) {
         this.isFullscreen = fsState;
     }
 
@@ -65,6 +68,6 @@ export class VgFullscreen implements OnInit {
             element = null;
         }
 
-        VgFullscreenAPI.toggleFullscreen(element);
+        this.fsAPI.toggleFullscreen(element);
     }
 }
diff --git a/src/controls/vg-mute/vg-mute.ts b/src/controls/vg-mute/vg-mute.ts
@@ -1,19 +1,17 @@
 import { Component, Input, ElementRef, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
-
-import {VgAPI} from '../../core/services/vg-api';
+import { VgAPI } from '../../core/services/vg-api';
 
 
 @Component({
     selector: 'vg-mute',
     encapsulation: ViewEncapsulation.None,
-    template:
-        `<div class="icon"
+    template: `<div class="icon"
              [class.vg-icon-volume_up]="getVolume() >= 0.75"
              [class.vg-icon-volume_down]="getVolume() >= 0.25 && getVolume() < 0.75"
              [class.vg-icon-volume_mute]="getVolume() > 0 && getVolume() < 0.25"
              [class.vg-icon-volume_off]="getVolume() === 0">
         </div>`,
-    styles: [`
+    styles: [ `
         vg-mute {
             -webkit-touch-callout: none;
             -webkit-user-select: none;
@@ -33,21 +31,26 @@ import {VgAPI} from '../../core/services/vg-api';
         vg-mute .icon {
             pointer-events: none;
         }
-    `]
+    ` ]
 })
 export class VgMute implements OnInit {
     @Input() vgFor: string;
-    elem:HTMLElement;
+    elem: HTMLElement;
     target: any;
 
-    currentVolume:number;
+    currentVolume: number;
 
-    constructor(ref:ElementRef, public API:VgAPI) {
+    constructor(ref: ElementRef, public API: VgAPI) {
         this.elem = ref.nativeElement;
     }
 
     ngOnInit() {
-        this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        if (this.API.isPlayerReady) {
+            this.onPlayerReady();
+        }
+        else {
+            this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        }
     }
 
     onPlayerReady() {

diff --git a/src/controls/vg-play-pause/vg-play-pause.ts b/src/controls/vg-play-pause/vg-play-pause.ts
@@ -1,18 +1,15 @@
 import { Component, ElementRef, HostListener, OnInit, Input, ViewEncapsulation } from '@angular/core';
-
-import {VgAPI} from '../../core/services/vg-api';
-
-import {VgStates} from "../../core/states/vg-states";
+import { VgAPI } from '../../core/services/vg-api';
+import { VgStates } from '../../core/states/vg-states';
 
 @Component({
     selector: 'vg-play-pause',
     encapsulation: ViewEncapsulation.None,
-    template:
-        `<div class="icon"
+    template: `<div class="icon"
              [class.vg-icon-pause]="getState() === 'playing'"
              [class.vg-icon-play_arrow]="getState() === 'paused' || getState() === 'ended'">
         </div>`,
-    styles: [`
+    styles: [ `
         vg-play-pause {
             -webkit-touch-callout: none;
             -webkit-user-select: none;
@@ -32,20 +29,25 @@ import {VgStates} from "../../core/states/vg-states";
         vg-play-pause .icon {
             pointer-events: none;
         }
-    `]
+    ` ]
 })
 export class VgPlayPause implements OnInit {
-    @Input() vgFor:string;
+    @Input() vgFor: string;
 
-    elem:HTMLElement;
-    target:any;
+    elem: HTMLElement;
+    target: any;
 
-    constructor(ref:ElementRef, public API:VgAPI) {
+    constructor(ref: ElementRef, public API: VgAPI) {
         this.elem = ref.nativeElement;
     }
 
     ngOnInit() {
-        this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        if (this.API.isPlayerReady) {
+            this.onPlayerReady();
+        }
+        else {
+            this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        }
     }
 
     onPlayerReady() {

diff --git a/src/controls/vg-playback-button/vg-playback-button.ts b/src/controls/vg-playback-button/vg-playback-button.ts
@@ -1,13 +1,12 @@
 import { Component, Input, ElementRef, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
-
-import {VgAPI} from '../../core/services/vg-api';
+import { VgAPI } from '../../core/services/vg-api';
 
 
 @Component({
     selector: 'vg-playback-button',
     encapsulation: ViewEncapsulation.None,
     template: `{{getPlaybackRate()}}x`,
-    styles: [`
+    styles: [ `
         vg-playback-button {
             -webkit-touch-callout: none;
             -webkit-user-select: none;
@@ -23,25 +22,30 @@ import {VgAPI} from '../../core/services/vg-api';
             line-height: 50px;
             font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
         }
-    `]
+    ` ]
 })
 export class VgPlaybackButton implements OnInit {
     @Input() vgFor: string;
 
-    elem:HTMLElement;
+    elem: HTMLElement;
     target: any;
 
     playbackValues: Array<string>;
     playbackIndex: number;
 
-    constructor(ref:ElementRef, public API:VgAPI) {
+    constructor(ref: ElementRef, public API: VgAPI) {
         this.elem = ref.nativeElement;
-        this.playbackValues = ['0.5', '1.0', '1.5', '2.0'];
+        this.playbackValues = [ '0.5', '1.0', '1.5', '2.0' ];
         this.playbackIndex = 1;
     }
 
     ngOnInit() {
-        this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        if (this.API.isPlayerReady) {
+            this.onPlayerReady();
+        }
+        else {
+            this.API.playerReadyEvent.subscribe(() => this.onPlayerReady());
+        }
     }
 
     onPlayerReady() {
@@ -53,10 +57,10 @@ export class VgPlaybackButton implements OnInit {
         this.playbackIndex = ++this.playbackIndex % this.playbackValues.length;
 
         if (this.target instanceof VgAPI) {
-            this.target.playbackRate = (this.playbackValues[this.playbackIndex]);
+            this.target.playbackRate = (this.playbackValues[ this.playbackIndex ]);
         }
         else {
-            this.target.playbackRate[this.vgFor] = (this.playbackValues[this.playbackIndex]);
+            this.target.playbackRate[ this.vgFor ] = (this.playbackValues[ this.playbackIndex ]);
         }
     }