Merge pull request #733 from avatsaev/migration/angular6

Angular 6 Migration

karma-test-shim.js

@@ -57,11 +57,12 @@ System.config(
             'app': 'base/src'
         },
         packages: {
+            'rxjs/operators': { defaultExtension: 'js', main: 'index' },
             'app': {
                 defaultExtension: 'js'
             },
             'rxjs': {
-                defaultExtension: 'js'
+                defaultExtension: 'js',  main: 'index'
             }
         }
     });

package.json

@@ -7,17 +7,17 @@
     "url": "https://github.com/videogular/videogular2"
   },
   "peerDependencies": {
-    "@angular/core": "^5.0.0",
-    "rxjs": "^5.5.2"
+    "@angular/core": "^6.0.3",
+    "rxjs": "^6.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/platform-server": "^5.0.0",
+    "@angular/common": "^6.0.3",
+    "@angular/compiler": "^6.0.3",
+    "@angular/compiler-cli": "^6.0.3",
+    "@angular/core": "^6.0.3",
+    "@angular/platform-browser": "^6.0.3",
+    "@angular/platform-browser-dynamic": "^6.0.3",
+    "@angular/platform-server": "^6.0.3",
     "@types/core-js": "0.9.35",
     "@types/jasmine": "2.5.38",
     "codelyzer": "4.0.1",
@@ -37,11 +37,11 @@
     "reflect-metadata": "^0.1.10",
     "remap-istanbul": "0.9.5",
     "rimraf": "2.6.1",
-    "rxjs": "^5.5.2",
+    "rxjs": "^6.2.0",
     "semantic-release": "6.3.2",
     "systemjs": "^0.20.9",
     "tslint": "5.0.0",
-    "typescript": "2.4.2",
+    "typescript": "2.7.2",
     "validate-commit-msg": "2.12.1",
     "watch": "1.0.2",
     "zone.js": "^0.8.5"

src/buffering/vg-buffering.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, ViewEncap
 import { VgAPI } from '../core/services/vg-api';
 import { IPlayable } from '../core/vg-media/i-playable';
 import { VgStates } from '../core/states/vg-states';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'vg-buffering',

src/controls/vg-controls.spec.ts

@@ -2,9 +2,8 @@ import {VgControls} from "./vg-controls";
 import {VgControlsHidden} from './../core/services/vg-controls-hidden';
 import {ElementRef} from "@angular/core";
 import {VgAPI} from "../core/services/vg-api";
-import {Observable} from "rxjs/Observable";
 
-import 'rxjs/add/observable/fromEvent';
+
 import { VgStates } from '../core/states/vg-states';
 
 describe('Controls Bar', () => {
@@ -40,16 +39,15 @@ describe('Controls Bar', () => {
     });
 
     it('Should listen for mouseenter and mouseleave events', () => {
-        spyOn(Observable, 'fromEvent').and.callThrough();
 
         let vgElem = document.createElement('vg-player');
 
         api.registerElement(vgElem);
 
         controls.ngOnInit();
 
-        expect(Observable.fromEvent).toHaveBeenCalledWith(api.videogularElement, 'mousemove');
-        expect(Observable.fromEvent).toHaveBeenCalledWith(api.videogularElement, 'touchstart');
+        expect(controls.mouseMove$).toBeDefined();
+        expect(controls.touchStart$).toBeDefined();
     });
 
     it('Should hide controls after view init', () => {

src/controls/vg-controls.ts

@@ -1,13 +1,13 @@
 import {
     Component, Input, OnInit, ElementRef, HostBinding, AfterViewInit, ViewEncapsulation,
-    EventEmitter, Output
+    EventEmitter, Output, OnDestroy
 } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable ,  Subscription } from 'rxjs';
 import { VgAPI } from '../core/services/vg-api';
 import { VgControlsHidden } from './../core/services/vg-controls-hidden';
-import 'rxjs/add/observable/fromEvent';
+
 import { VgStates } from '../core/states/vg-states';
-import { Subscription } from 'rxjs/Subscription';
+import {fromEvent} from 'rxjs';
 
 @Component({
     selector: 'vg-controls',
@@ -34,7 +34,7 @@ import { Subscription } from 'rxjs/Subscription';
         }
     `]
 })
-export class VgControls implements OnInit, AfterViewInit {
+export class VgControls implements OnInit, AfterViewInit, OnDestroy {
     elem: HTMLElement;
     target: any;
 
@@ -48,18 +48,21 @@ export class VgControls implements OnInit, AfterViewInit {
     private timer: any;
     private hideTimer: any;
 
+    mouseMove$: Observable<any>;
+    touchStart$: Observable<any>;
+
     subscriptions: Subscription[] = [];
 
     constructor(private API: VgAPI, private ref: ElementRef, private hidden: VgControlsHidden) {
         this.elem = ref.nativeElement;
     }
 
     ngOnInit() {
-        let mouseMove = Observable.fromEvent(this.API.videogularElement, 'mousemove');
-        this.subscriptions.push(mouseMove.subscribe(this.show.bind(this)));
+        this.mouseMove$ = fromEvent(this.API.videogularElement, 'mousemove');
+        this.subscriptions.push(this.mouseMove$.subscribe(this.show.bind(this)));
 
-        let touchStart = Observable.fromEvent(this.API.videogularElement, 'touchstart');
-        this.subscriptions.push(touchStart.subscribe(this.show.bind(this)));
+        this.touchStart$ = fromEvent(this.API.videogularElement, 'touchstart');
+        this.subscriptions.push(this.touchStart$.subscribe(this.show.bind(this)));
 
         if (this.API.isPlayerReady) {
             this.onPlayerReady();

src/controls/vg-fullscreen/vg-fullscreen.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
 import { VgFullscreenAPI } from '../../core/services/vg-fullscreen-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 
 @Component({

src/controls/vg-mute/vg-mute.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ElementRef, HostListener, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 
 @Component({

src/controls/vg-play-pause/vg-play-pause.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, HostListener, OnInit, Input, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
 import { VgStates } from '../../core/states/vg-states';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'vg-play-pause',

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

@@ -1,6 +1,6 @@
 import { Component, Input, ElementRef, HostListener, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'vg-playback-button',

src/controls/vg-quality-selector/vg-quality-selector.ts

@@ -9,7 +9,7 @@ import {
     OnChanges, Output, EventEmitter
 } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 import { BitrateOption } from '../../core/core';
 
 @Component({

src/controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ElementRef, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { VgAPI } from '../../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'vg-scrub-bar-buffering-time',

src/controls/vg-scrub-bar/vg-scrub-bar-cue-points/vg-scrub-bar-cue-points.ts

@@ -9,7 +9,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { VgAPI } from '../../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'vg-scrub-bar-cue-points',

src/controls/vg-scrub-bar/vg-scrub-bar-current-time/vg-scrub-bar-current-time.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ElementRef, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { VgAPI } from '../../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'vg-scrub-bar-current-time',

src/controls/vg-scrub-bar/vg-scrub-bar.ts

@@ -5,7 +5,7 @@ import {
 import { VgAPI } from '../../core/services/vg-api';
 import { VgControlsHidden } from './../../core/services/vg-controls-hidden';
 import { VgStates } from '../../core/states/vg-states';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'vg-scrub-bar',

src/controls/vg-time-display/vg-time-display.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ElementRef, OnInit, PipeTransform, Pipe, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 // Workaround until we can use UTC with Angular Date Pipe
 @Pipe({ name: 'vgUtc' })

src/controls/vg-track-selector/vg-track-selector.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, OnInit, Input, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 export interface Option {
     id: string;

src/controls/vg-volume/vg-volume.ts

@@ -3,7 +3,7 @@ import {
     OnDestroy
 } from '@angular/core';
 import { VgAPI } from '../../core/services/vg-api';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'vg-volume',

src/core/services/vg-controls-hidden.spec.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { VgControlsHidden } from './vg-controls-hidden';
 
 describe('VgControlsHidden Service', () => {

src/core/services/vg-controls-hidden.ts

@@ -1,5 +1,4 @@
-import { Subject } from 'rxjs/Subject';
-import { Observable } from 'rxjs/Observable';
+import { Subject ,  Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
 
 @Injectable()

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

@@ -1,8 +1,7 @@
 import { EventEmitter, Injectable, QueryList } from '@angular/core';
 import { VgUtils } from './vg-utils';
 import { VgMedia } from '../vg-media/vg-media';
-import { Subscription } from 'rxjs/Subscription';
-import { Observable } from 'rxjs/Observable';
+import { Subscription ,  Observable, fromEvent } from 'rxjs';
 
 @Injectable()
 export class VgFullscreenAPI {
@@ -112,14 +111,14 @@ export class VgFullscreenAPI {
                 fsElemDispatcher = elem;
         }
 
-        this.fsChangeSubscription = Observable.fromEvent(fsElemDispatcher, this.polyfill.onchange).subscribe(() => {
+        this.fsChangeSubscription = fromEvent(fsElemDispatcher, this.polyfill.onchange).subscribe(() => {
             this.onFullscreenChange();
         });
     }
 
     onFullscreenChange() {
         this.isFullscreen = !!document[ this.polyfill.element ];
-        this.onChangeFullscreen.next(this.isFullscreen);
+        this.onChangeFullscreen.emit(this.isFullscreen);
     }
 
     toggleFullscreen(element: any = null) {
@@ -137,7 +136,7 @@ export class VgFullscreenAPI {
         }
 
         this.isFullscreen = true;
-        this.onChangeFullscreen.next(true);
+        this.onChangeFullscreen.emit(true);
 
         // Perform native full screen support
         if (this.isAvailable && this.nativeFullscreen) {
@@ -163,7 +162,7 @@ export class VgFullscreenAPI {
 
     exit() {
         this.isFullscreen = false;
-        this.onChangeFullscreen.next(false);
+        this.onChangeFullscreen.emit(false);
 
         // Exit from native fullscreen
         if (this.isAvailable && this.nativeFullscreen) {

src/core/vg-cue-points/vg-cue-points.spec.ts

@@ -1,8 +1,8 @@
 import { ElementRef } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+
 import { VgCuePoints } from './vg-cue-points';
 
-import 'rxjs/add/observable/fromEvent';
+
 
 describe('Cue points', () => {
     let cuePoints: VgCuePoints;
@@ -17,15 +17,14 @@ describe('Cue points', () => {
     });
 
     it('Should handle onLoad event', () => {
-        spyOn(Observable, 'fromEvent').and.callThrough();
+
 
         cuePoints.ngOnInit();
 
-        expect(Observable.fromEvent).toHaveBeenCalledWith(ref.nativeElement, 'load');
+        expect(cuePoints.onLoad$).toBeDefined()
     });
 
-    xit('Should handle onLoad event', () => {
-        spyOn(Observable, 'fromEvent').and.callThrough();
+    xit('Should handle enter/exit events', () => {
 
         let event = {
             target: document.createElement('video')
@@ -35,33 +34,31 @@ describe('Cue points', () => {
         let cue = track.addCue(new TextTrackCue(1, 2, 'cue 1')); // Illegal Constructor
 
         cuePoints.onLoad(event);
-
-        expect(Observable.fromEvent).toHaveBeenCalledWith(cue, 'enter');
-        expect(Observable.fromEvent).toHaveBeenCalledWith(cue, 'exit');
-        expect(Observable.fromEvent).toHaveBeenCalledTimes(8);
+        expect(cuePoints.onEnter$).toBeDefined();
+        expect(cuePoints.onExit$).toBeDefined();
     });
 
     it('Should handle onEnter event', () => {
-        spyOn(cuePoints.onEnterCuePoint, 'next').and.callThrough();
+        spyOn(cuePoints.onEnterCuePoint, 'emit').and.callThrough();
 
         let event = {
             target: {}
         };
 
         cuePoints.onEnter(event);
 
-        expect(cuePoints.onEnterCuePoint.next).toHaveBeenCalledWith(event.target);
+        expect(cuePoints.onEnterCuePoint.emit).toHaveBeenCalledWith(event.target);
     });
 
     it('Should handle onExit event', () => {
-        spyOn(cuePoints.onExitCuePoint, 'next').and.callThrough();
+        spyOn(cuePoints.onExitCuePoint, 'emit').and.callThrough();
 
         let event = {
             target: {}
         };
 
         cuePoints.onExit(event);
 
-        expect(cuePoints.onExitCuePoint.next).toHaveBeenCalledWith(event.target);
+        expect(cuePoints.onExitCuePoint.emit).toHaveBeenCalledWith(event.target);
     });
 });