Chore(update): update all to angular v5

package.json

@@ -1,56 +1,60 @@
 {
-  "name": "videogular2-showroom",
-  "version": "0.0.0",
-  "license": "MIT",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve --host 0.0.0.0",
-    "aot": "ng serve --prod --aot --env=prod",
-    "build": "ng build --prod --aot --env=prod --bh /videogular2-showroom/",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/common": "^4.3.0",
-    "@angular/compiler": "^4.3.0",
-    "@angular/core": "^4.3.0",
-    "@angular/forms": "^4.3.0",
-    "@angular/http": "^4.3.0",
-    "@angular/platform-browser": "^4.3.0",
-    "@angular/platform-browser-dynamic": "^4.3.0",
-    "@angular/router": "^4.3.0",
-    "aframe": "0.4.0",
-    "aframe-animation-component": "3.0.4",
-    "aframe-bmfont-text-component": "0.1.4",
-    "angulartics2": "2.2.2",
-    "core-js": "^2.4.1",
-    "dashjs": "2.5.0",
-    "hls.js": "0.6.10",
-    "rxjs": "^5.4.2",
-    "videogular2": "5.6.2",
-    "vivus": "0.4.1",
-    "zone.js": "^0.8.4"
-  },
-  "devDependencies": {
-    "@angular/cli": "1.4.3",
-    "@angular/compiler-cli": "4.4.4",
-    "@types/core-js": "0.9.41",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "~6.0.60",
-    "codelyzer": "~2.0.0",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.0",
-    "ts-node": "~2.0.0",
-    "tslint": "~4.5.0",
-    "typescript": "~2.2.0"
-  }
+    "name": "videogular2",
+    "version": "0.0.0-semantically-released",
+    "description": "Videogular is a video application framework for desktop and mobile powered by Angular 2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/videogular/videogular2"
+    },
+    "dependencies": {
+        "@angular/common": "5.0.1",
+        "@angular/compiler": "5.0.1",
+        "@angular/core": "5.0.1",
+        "@angular/forms": "5.0.1",
+        "@angular/http": "5.0.1",
+        "@angular/platform-browser": "5.0.1",
+        "@angular/platform-browser-dynamic": "5.0.1",
+        "@angular/router": "5.0.1",
+        "aframe": "0.4.0",
+        "aframe-animation-component": "3.0.4",
+        "aframe-bmfont-text-component": "0.1.4",
+        "angulartics2": "4.0.1",
+        "core-js": "^2.4.1",
+        "dashjs": "2.5.0",
+        "hls.js": "0.6.10",
+        "rxjs": "^5.4.2",
+        "videogular2": "5.6.2",
+        "videogular2-betatester": "0.0.1",
+        "vivus": "0.4.1",
+        "zone.js": "^0.8.4"
+    },
+    "devDependencies": {
+        "@angular/cli": "1.5.0",
+        "@angular/compiler-cli": "5.0.1",
+        "@types/core-js": "0.9.41",
+        "@types/jasmine": "2.5.38",
+        "@types/node": "~6.0.60",
+        "codelyzer": "4.0.1",
+        "jasmine-core": "~2.5.2",
+        "jasmine-spec-reporter": "~3.2.0",
+        "karma": "~1.4.1",
+        "karma-chrome-launcher": "~2.0.0",
+        "karma-cli": "~1.0.1",
+        "karma-coverage-istanbul-reporter": "^0.2.0",
+        "karma-jasmine": "~1.1.0",
+        "karma-jasmine-html-reporter": "^0.2.2",
+        "protractor": "~5.1.0",
+        "ts-node": "~2.0.0",
+        "tslint": "5.0.0",
+        "typescript": "2.4.2"
+    },
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve --host 0.0.0.0",
+        "aot": "ng serve --prod --aot --env=prod",
+        "build": "ng build --prod --aot --env=prod --bh /videogular2-showroom/",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    }
 }

src/app/app.component.ts

@@ -1,7 +1,8 @@
-import { Component, HostBinding, OnDestroy, OnInit } from "@angular/core";
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
-import { Angulartics2GoogleAnalytics } from 'angulartics2';
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+
 
 @Component({
     selector: 'app-root',

src/app/app.module.ts

@@ -1,22 +1,24 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { HttpModule } from "@angular/http";
-import { AppComponent } from "./app.component";
-import { RouterModule } from "@angular/router";
-import { ROUTES } from "./routes/routes";
-import { SimplePlayerModule } from "./simple-player/simple-player.module";
-import { SinglePlayerModule } from "./single-player/single-player.module";
-import { AudioPlayerModule } from "./audio-player/audio-player.module";
-import { BoundPlayerModule } from "./bound-player/bound-player.module";
-import { CuePointsPlayerModule } from "./cue-points-player/cue-points-player.module";
-import { GoogleImaPlayerModule } from "./google-ima-player/google-ima-player.module";
-import { MasterPlayerModule } from "./master-player/master-player.module";
-import { StreamingPlayerModule } from "./streaming-player/streaming-player.module";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {HttpClientModule, HttpClient} from '@angular/common/http';
+import { AppComponent } from './app.component';
+import { RouterModule } from '@angular/router';
+import { ROUTES } from './routes/routes';
+import { SimplePlayerModule } from './simple-player/simple-player.module';
+import { SinglePlayerModule } from './single-player/single-player.module';
+import { AudioPlayerModule } from './audio-player/audio-player.module';
+import { BoundPlayerModule } from './bound-player/bound-player.module';
+import { CuePointsPlayerModule } from './cue-points-player/cue-points-player.module';
+import { GoogleImaPlayerModule } from './google-ima-player/google-ima-player.module';
+import { MasterPlayerModule } from './master-player/master-player.module';
+import { StreamingPlayerModule } from './streaming-player/streaming-player.module';
 import { MultiplePlayersModule } from './multiple-players/multiple-players.module';
 import { CustomMediaModule } from './custom-media/custom-media.module';
 import { SmartPlaylistModule } from './smart-playlist/smart-playlist.module';
-import { Angulartics2GoogleAnalytics, Angulartics2Module } from 'angulartics2';
+import { Angulartics2Module } from 'angulartics2';
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+
 
 @NgModule({
     declarations: [
@@ -25,10 +27,9 @@ import { Angulartics2GoogleAnalytics, Angulartics2Module } from 'angulartics2';
     imports: [
         BrowserModule,
         FormsModule,
-        HttpModule,
+        HttpClientModule,
         RouterModule.forRoot(ROUTES, { useHash: true }),
         Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),
-
         SimplePlayerModule,
         SinglePlayerModule,
         AudioPlayerModule,
@@ -41,7 +42,7 @@ import { Angulartics2GoogleAnalytics, Angulartics2Module } from 'angulartics2';
         CustomMediaModule,
         SmartPlaylistModule
     ],
-    providers: [],
+    providers: [HttpClient],
     bootstrap: [ AppComponent ]
 })
 export class AppModule {

src/app/audio-player/audio-player.module.ts

@@ -1,10 +1,10 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { AudioPlayerComponent } from "./audio-player.component";
-import { VgCoreModule } from "videogular2/core";
-import { VgControlsModule } from "videogular2/controls";
-import { VgOverlayPlayModule } from "videogular2/overlay-play";
-import { VgBufferingModule } from "videogular2/buffering";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AudioPlayerComponent } from './audio-player.component';
+import { VgCoreModule } from 'videogular2-betatester/core';
+import { VgControlsModule } from 'videogular2-betatester/controls';
+import { VgOverlayPlayModule } from 'videogular2-betatester/overlay-play';
+import { VgBufferingModule } from 'videogular2-betatester/buffering';
 
 @NgModule({
     imports: [

src/app/bound-player/bound-player.module.ts

@@ -1,10 +1,10 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { BoundPlayerComponent } from "./bound-player.component";
-import { FormsModule } from "@angular/forms";
-import { VgCoreModule } from "videogular2/core";
-import { VgControlsModule } from "videogular2/controls";
-import { VgOverlayPlayModule } from "videogular2/overlay-play";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BoundPlayerComponent } from './bound-player.component';
+import { FormsModule } from '@angular/forms';
+import { VgCoreModule } from 'videogular2-betatester/core';
+import { VgControlsModule } from 'videogular2-betatester/controls';
+import { VgOverlayPlayModule } from 'videogular2-betatester/overlay-play';
 
 @NgModule({
     imports: [

src/app/cue-points-player/cue-points-player.module.ts

@@ -1,9 +1,9 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { CuePointsPlayerComponent } from "./cue-points-player.component";
-import { VgCoreModule } from "videogular2/core";
-import { VgOverlayPlayModule } from "videogular2/overlay-play";
-import { VgControlsModule } from "videogular2/controls";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CuePointsPlayerComponent } from './cue-points-player.component';
+import { VgCoreModule } from 'videogular2-betatester/core';
+import { VgOverlayPlayModule } from 'videogular2-betatester/overlay-play';
+import { VgControlsModule } from 'videogular2-betatester/controls';
 import { FormsModule } from '@angular/forms';
 
 @NgModule({

src/app/custom-media/svg-viewer/svg-viewer.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, Input, SimpleChanges, OnDestroy } from '@angular/core';
+import {Component, OnInit, ElementRef, Input, SimpleChanges, OnDestroy, Inject} from '@angular/core';
 import { IPlayable, IMediaSubscriptions } from 'videogular2/src/core/vg-media/i-playable';
 import { VgStates, VgEvents } from 'videogular2/core';
 import { Subscription } from 'rxjs/Subscription';
@@ -34,13 +34,15 @@ export class SvgViewerComponent implements OnInit, OnDestroy, IPlayable {
     vivus: any;
     timer: Observable<number>;
     timerSubs: Subscription;
+    // ref: ElementRef;
+
 
     constructor(private ref: ElementRef) {
-        this.elem = ref.nativeElement;
-        this.id = this.elem.id;
     }
 
     ngOnInit() {
+        this.elem = this.ref.nativeElement;
+        this.id = this.elem.id;
         this.timer = TimerObservable.create(0, 10);
         this.vivus = new Vivus(
             'container',

src/app/google-ima-player/google-ima-player.module.ts

@@ -1,10 +1,10 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { GoogleImaPlayerComponent } from "./google-ima-player.component";
-import { VgCoreModule } from "videogular2/core";
-import { VgControlsModule } from "videogular2/controls";
-import { VgOverlayPlayModule } from "videogular2/overlay-play";
-import { VgImaAdsModule } from "videogular2/ima-ads";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GoogleImaPlayerComponent } from './google-ima-player.component';
+import { VgCoreModule } from 'videogular2-betatester/core';
+import { VgControlsModule } from 'videogular2-betatester/controls';
+import { VgOverlayPlayModule } from 'videogular2-betatester/overlay-play';
+import { VgImaAdsModule } from 'videogular2-betatester/ima-ads';
 
 @NgModule({
     imports: [

src/app/master-player/master-player.module.ts

@@ -1,10 +1,10 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { MasterPlayerComponent } from "./master-player.component";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MasterPlayerComponent } from './master-player.component';
 
-import { VgCoreModule } from "videogular2/core";
-import { VgControlsModule } from "videogular2/controls";
-import { VgBufferingModule } from "videogular2/buffering";
+import { VgCoreModule } from 'videogular2-betatester/core';
+import { VgControlsModule } from 'videogular2-betatester/controls';
+import { VgBufferingModule } from 'videogular2-betatester/buffering';
 import { VgPipComponent } from './vg-pip/vg-pip.component';
 import { FormsModule } from '@angular/forms';
 

src/app/simple-player/simple-player.module.ts

@@ -1,7 +1,7 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { SimplePlayerComponent } from "./simple-player.component";
-import { VgCoreModule } from 'videogular2/core';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SimplePlayerComponent } from './simple-player.component';
+import { VgCoreModule } from 'videogular2-betatester/core';
 
 @NgModule({
     imports: [

src/app/single-player/single-player.module.ts

@@ -1,10 +1,10 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { SinglePlayerComponent } from "./single-player.component";
-import { VgCoreModule } from "videogular2/core";
-import { VgControlsModule } from "videogular2/controls";
-import { VgOverlayPlayModule } from "videogular2/overlay-play";
-import { VgBufferingModule } from "videogular2/buffering";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SinglePlayerComponent } from './single-player.component';
+import { VgCoreModule } from 'videogular2-betatester/core';
+import { VgControlsModule } from 'videogular2-betatester/controls';
+import { VgOverlayPlayModule } from 'videogular2-betatester/overlay-play';
+import { VgBufferingModule } from 'videogular2-betatester/buffering';
 
 
 @NgModule({

src/app/streaming-player/streaming-player.module.ts

@@ -1,13 +1,13 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { StreamingPlayerComponent } from "./streaming-player.component";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StreamingPlayerComponent } from './streaming-player.component';
 
-import { VgCoreModule } from "videogular2/core";
-import { VgControlsModule } from "videogular2/controls";
-import { VgOverlayPlayModule } from "videogular2/overlay-play";
-import { VgBufferingModule } from "videogular2/buffering";
-import { VgStreamingModule } from "videogular2/streaming";
-import { FormsModule } from "@angular/forms";
+import { VgCoreModule } from 'videogular2-betatester/core';
+import { VgControlsModule } from 'videogular2-betatester/controls';
+import { VgOverlayPlayModule } from 'videogular2-betatester/overlay-play';
+import { VgBufferingModule } from 'videogular2-betatester/buffering';
+import { VgStreamingModule } from 'videogular2-betatester/streaming';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
     imports: [