Simple video test in the dashboard (non secure openvidu-server only)

openvidu-server/src/angular/frontend/package.json

@@ -19,7 +19,7 @@
     "@angular/flex-layout": "^2.0.0-beta.8",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
-    "@angular/material": "2.0.0-beta.5",
+    "@angular/material": "2.0.0-beta.7",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",

openvidu-server/src/angular/frontend/src/app/app.material.module.ts

@@ -4,11 +4,29 @@ import {
     MdButtonModule,
     MdCheckboxModule,
     MdCardModule,
-    MdInputModule
+    MdInputModule,
+    MdProgressSpinnerModule,
+    MdTooltipModule
 } from '@angular/material';
 
 @NgModule({
-    imports: [BrowserAnimationsModule, MdButtonModule, MdCheckboxModule, MdCardModule, MdInputModule],
+    imports: [
-    exports: [BrowserAnimationsModule, MdButtonModule, MdCheckboxModule, MdCardModule, MdInputModule],
+        BrowserAnimationsModule,
+        MdButtonModule,
+        MdCheckboxModule,
+        MdCardModule,
+        MdInputModule,
+        MdProgressSpinnerModule,
+        MdTooltipModule
+    ],
+    exports: [
+        BrowserAnimationsModule,
+        MdButtonModule,
+        MdCheckboxModule,
+        MdCardModule,
+        MdInputModule,
+        MdProgressSpinnerModule,
+        MdTooltipModule
+    ],
 })
 export class AppMaterialModule { }

openvidu-server/src/angular/frontend/src/app/components/dashboard/dashboard.component.css

@@ -3,7 +3,7 @@
 }
 
 #log {
-  height: 100%;
+  height: 90%;
 }
 
 #log-content {
@@ -17,6 +17,195 @@ ul {
   margin: 0;
 }
 
-md-card-title a {
+button.mat-raised-button {
+  text-transform: uppercase;
   float: right;
 }
+
+md-card-title button.blue {
+  color: #ffffff;
+  background-color: #0088aa;
+}
+
+md-card-title button.yellow {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #ffcc00;
+}
+
+md-spinner {
+  position: absolute;
+  top: 55%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#tick-div {
+  width: 100px;
+  height: 100px;
+  z-index: 1;
+  position: absolute;
+  top: 55%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#tooltip-tick {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.circ {
+  opacity: 0;
+  stroke-dasharray: 130;
+  stroke-dashoffset: 130;
+  -webkit-transition: all 1s;
+  -moz-transition: all 1s;
+  -ms-transition: all 1s;
+  -o-transition: all 1s;
+  transition: all 1s;
+}
+
+.tick {
+  stroke-dasharray: 50;
+  stroke-dashoffset: 50;
+  -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
+  -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
+  -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
+  -o-transition: stroke-dashoffset 1s 0.5s ease-out;
+  transition: stroke-dashoffset 1s 0.5s ease-out;
+}
+
+.drawn+svg .path {
+  opacity: 1;
+  stroke-dashoffset: 0;
+}
+
+
+/* Pure CSS loader */
+
+#loader {
+  width: 100px;
+  height: 100px;
+  z-index: 1;
+  position: absolute;
+  top: 55%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+#loader * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#loader ::after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#loader ::before {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.loader-1 {
+  height: 100px;
+  width: 100px;
+  -webkit-animation: loader-1-1 4.8s linear infinite;
+  animation: loader-1-1 4.8s linear infinite;
+}
+
+@-webkit-keyframes loader-1-1 {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-1-1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader-1 span {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  height: 100px;
+  width: 100px;
+  clip: rect(0, 100px, 100px, 50px);
+  -webkit-animation: loader-1-2 1.2s linear infinite;
+  animation: loader-1-2 1.2s linear infinite;
+}
+
+@-webkit-keyframes loader-1-2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(220deg);
+  }
+}
+
+@keyframes loader-1-2 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(220deg);
+  }
+}
+
+.loader-1 span::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  height: 100px;
+  width: 100px;
+  clip: rect(0, 100px, 100px, 50px);
+  border: 8px solid #4d4d4d;
+  border-radius: 50%;
+  -webkit-animation: loader-1-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
+  animation: loader-1-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
+}
+
+@-webkit-keyframes loader-1-3 {
+  0% {
+    -webkit-transform: rotate(-140deg);
+  }
+  50% {
+    -webkit-transform: rotate(-160deg);
+  }
+  100% {
+    -webkit-transform: rotate(140deg);
+  }
+}
+
+@keyframes loader-1-3 {
+  0% {
+    transform: rotate(-140deg);
+  }
+  50% {
+    transform: rotate(-160deg);
+  }
+  100% {
+    transform: rotate(140deg);
+  }
+}

openvidu-server/src/angular/frontend/src/app/components/dashboard/dashboard.component.html

@@ -16,10 +16,27 @@
 
   <div fxLayout="column" fxFlex="33%" fxFlexOrder="2" fxFlexOrder.xs="1">
     <md-card id="video-loop">
-      <md-card-title>Test the connection<a md-raised-button (click)="testVideo()">Test</a></md-card-title>
+      <md-card-title>Test the connection
+        <button [class]="testStatus == 'DISCONNECTED' ? 'blue' : (testStatus == 'PLAYING' ? 'yellow' : 'disabled')" md-raised-button (click)="toggleTestVideo()" [disabled]="testStatus==='CONNECTING' || testStatus==='CONNECTED'">{{testButton}}</button></md-card-title>
       <md-card-content #scrollMe id="log-content">
-        <div id="local-video"></div>
+        <div id="mirrored-video">
-        <div id="mirrored-video"></div>
+          <div *ngIf="showSpinner" id="loader">
+          <div class="loader-1 center"><span></span></div>
+          </div>
+          <!--<md-spinner *ngIf="showSpinner" [color]="color"></md-spinner>-->
+          <div *ngIf="session" id="tick-div">
+            <div id="tooltip-tick" *ngIf="testStatus=='PLAYING'" mdTooltip="The connection is successful" mdTooltipPosition="below"></div>
+            <div [class]="testStatus=='PLAYING' ? 'trigger drawn' : 'trigger'"></div>
+            <svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+              viewBox="-1 -1 39 39" style="enable-background:new 0 0 37 37;" xml:space="preserve">
+              <path class="circ path" style="fill:none;stroke:#06d362;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;" d="
+	M30.5,6.5L30.5,6.5c6.6,6.6,6.6,17.4,0,24l0,0c-6.6,6.6-17.4,6.6-24,0l0,0c-6.6-6.6-6.6-17.4,0-24l0,0C13.1-0.2,23.9-0.2,30.5,6.5z"
+              />
+              <polyline class="tick path" style="fill:none;stroke:#06d362;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;" points="
+	11.6,20 15.9,24.2 26.4,13.8 " />
+            </svg>
+          </div>
+        </div>
       </md-card-content>
     </md-card>
   </div>

openvidu-server/src/angular/frontend/src/app/components/dashboard/dashboard.component.ts

@@ -1,22 +1,31 @@
-import { Component, OnInit, AfterViewChecked, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, AfterViewChecked, ViewChild, ElementRef, HostListener, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
 import { InfoService } from '../../services/info.service';
 
-import { OpenVidu } from 'openvidu-browser';
+import { OpenVidu, Session } from 'openvidu-browser';
+
+declare const $;
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.css'],
 })
-export class DashboardComponent implements OnInit, AfterViewChecked {
+export class DashboardComponent implements OnInit, OnDestroy, AfterViewChecked {
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
   infoSubscription: Subscription;
   info = [];
 
+  session: Session;
+
+  testStatus = 'DISCONNECTED';
+  testButton = 'Test';
+  tickClass = 'trigger';
+  showSpinner = false;
+
   constructor(private infoService: InfoService) {
 
     // Subscription to info updated event raised by InfoService
@@ -30,32 +39,81 @@ export class DashboardComponent implements OnInit, AfterViewChecked {
 
   }
 
+  @HostListener('window:beforeunload')
+  beforeunloadHandler() {
+    // On window closed leave test session
+    if (this.session) {
+      this.endTestVideo();
+    }
+  }
+
+  ngOnDestroy() {
+    // On component destroyed leave test session
+    if (this.session) {
+      this.endTestVideo();
+    }
+  }
+
   ngAfterViewChecked() {
     this.scrollToBottom();
   }
 
+  toggleTestVideo() {
+    if (!this.session) {
+      this.testVideo();
+    } else {
+      this.endTestVideo();
+    }
+  }
+
   testVideo() {
     let OV = new OpenVidu();
-    let session = OV.initSession('wss://' + location.hostname + ':8443/testSession');
+    this.session = OV.initSession('wss://' + location.hostname + ':8443/testSession');
 
-    session.on('streamCreated', (event) => {
+    this.session.on('streamCreated', (event) => {
-      session.subscribe(event.stream, 'mirrored-video');
+      this.session.subscribe(event.stream, 'mirrored-video');
     });
 
-    session.connect('token', (error) => {
+    this.testStatus = 'CONNECTING';
+    this.testButton = 'Testing...';
+
+    this.session.connect('token', (error) => {
       if (!error) {
-        let publisher = OV.initPublisher('local-video', {
+
+        this.testStatus = 'CONNECTED';
+
+        const publisherRemote = OV.initPublisher('mirrored-video', {
           audio: true,
           video: true,
           quality: 'MEDIUM'
         });
 
-        publisher.stream.subscribeToMyRemote();
+        publisherRemote.on('videoElementCreated', (video) => {
-        session.publish(publisher);
+
+          this.showSpinner = true;
+
+          video.element.addEventListener('playing', () => {
+            console.warn('PLAYING!!');
+            this.testButton = 'End test';
+            this.testStatus = 'PLAYING';
+            this.showSpinner = false;
+          });
+        });
+
+        publisherRemote.stream.subscribeToMyRemote();
+        this.session.publish(publisherRemote);
       }
     });
   }
 
+  endTestVideo() {
+    this.session.disconnect();
+    this.session = null;
+    this.testStatus = 'DISCONNECTED';
+    this.testButton = 'Test';
+    this.showSpinner = false;
+  }
+
   scrollToBottom(): void {
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;

openvidu-server/src/angular/frontend/src/index.html

@@ -9,6 +9,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
+    crossorigin="anonymous"></script>
+
 </head>
 
 <body>

openvidu-server/src/angular/frontend/src/styles.css

@@ -15,3 +15,11 @@ main {
 li {
   list-style: none;
 }
+
+video {
+  width: 100%;
+}
+
+.mat-spinner path {
+  stroke: #4d4d4d;
+}

openvidu-server/src/main/resources/static/index.html

@@ -9,6 +9,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
+    crossorigin="anonymous"></script>
+
 </head>
 
 <body>

openvidu-server/src/main/resources/static/polyfills.bundle.js

@@ -45,10 +45,10 @@ module.exports = function(it){
 /***/ (function(module, exports, __webpack_require__) {
 
 var global    = __webpack_require__(14)
-  , core      = __webpack_require__(42)
+  , core      = __webpack_require__(44)
   , hide      = __webpack_require__(54)
-  , redefine  = __webpack_require__(45)
+  , redefine  = __webpack_require__(47)
-  , ctx       = __webpack_require__(43)
+  , ctx       = __webpack_require__(45)
   , PROTOTYPE = 'prototype';
 
 var $export = function(type, name, source){
@@ -111,7 +111,8 @@ var global = module.exports = typeof window != 'undefined' && window.Math == Mat
 if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef
 
 /***/ }),
-/* 15 */
+/* 15 */,
+/* 16 */
 /***/ (function(module, exports) {
 
 var hasOwnProperty = {}.hasOwnProperty;
@@ -120,7 +121,6 @@ module.exports = function(it, key){
 };
 
 /***/ }),
-/* 16 */,
 /* 17 */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -247,7 +247,7 @@ module.exports = !__webpack_require__(23)(function(){
 /***/ (function(module, exports, __webpack_require__) {
 
 // 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O)
-var has         = __webpack_require__(15)
+var has         = __webpack_require__(16)
   , toObject    = __webpack_require__(86)
   , IE_PROTO    = __webpack_require__(82)('IE_PROTO')
   , ObjectProto = Object.prototype;
@@ -271,7 +271,9 @@ module.exports = Object.getPrototypeOf || function(O){
 /* 38 */,
 /* 39 */,
 /* 40 */,
-/* 41 */
+/* 41 */,
+/* 42 */,
+/* 43 */
 /***/ (function(module, exports) {
 
 module.exports = function(it){
@@ -280,18 +282,18 @@ module.exports = function(it){
 };
 
 /***/ }),
-/* 42 */
+/* 44 */
 /***/ (function(module, exports) {
 
 var core = module.exports = {version: '2.4.0'};
 if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef
 
 /***/ }),
-/* 43 */
+/* 45 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // optional / simple context binding
-var aFunction = __webpack_require__(41);
+var aFunction = __webpack_require__(43);
 module.exports = function(fn, that, length){
   aFunction(fn);
   if(that === undefined)return fn;
@@ -312,14 +314,14 @@ module.exports = function(fn, that, length){
 };
 
 /***/ }),
-/* 44 */
+/* 46 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var pIE            = __webpack_require__(129)
   , createDesc     = __webpack_require__(56)
   , toIObject      = __webpack_require__(84)
   , toPrimitive    = __webpack_require__(87)
-  , has            = __webpack_require__(15)
+  , has            = __webpack_require__(16)
   , IE8_DOM_DEFINE = __webpack_require__(124)
   , gOPD           = Object.getOwnPropertyDescriptor;
 
@@ -333,18 +335,18 @@ exports.f = __webpack_require__(29) ? gOPD : function getOwnPropertyDescriptor(O
 };
 
 /***/ }),
-/* 45 */
+/* 47 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var global    = __webpack_require__(14)
   , hide      = __webpack_require__(54)
-  , has       = __webpack_require__(15)
+  , has       = __webpack_require__(16)
   , SRC       = __webpack_require__(57)('src')
   , TO_STRING = 'toString'
   , $toString = Function[TO_STRING]
   , TPL       = ('' + $toString).split(TO_STRING);
 
-__webpack_require__(42).inspectSource = function(it){
+__webpack_require__(44).inspectSource = function(it){
   return $toString.call(it);
 };
 
@@ -370,8 +372,6 @@ __webpack_require__(42).inspectSource = function(it){
 });
 
 /***/ }),
-/* 46 */,
-/* 47 */,
 /* 48 */,
 /* 49 */,
 /* 50 */,
@@ -380,7 +380,7 @@ __webpack_require__(42).inspectSource = function(it){
 /* 53 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var ctx         = __webpack_require__(43)
+var ctx         = __webpack_require__(45)
   , call        = __webpack_require__(218)
   , isArrayIter = __webpack_require__(216)
   , anObject    = __webpack_require__(4)
@@ -425,7 +425,7 @@ module.exports = __webpack_require__(29) ? function(object, key, value){
 
 var META     = __webpack_require__(57)('meta')
   , isObject = __webpack_require__(11)
-  , has      = __webpack_require__(15)
+  , has      = __webpack_require__(16)
   , setDesc  = __webpack_require__(24).f
   , id       = 0;
 var isExtensible = Object.isExtensible || function(){
@@ -542,7 +542,7 @@ module.exports = function(it){
 
 var global            = __webpack_require__(14)
   , $export           = __webpack_require__(7)
-  , redefine          = __webpack_require__(45)
+  , redefine          = __webpack_require__(47)
   , redefineAll       = __webpack_require__(80)
   , meta              = __webpack_require__(55)
   , forOf             = __webpack_require__(53)
@@ -711,7 +711,7 @@ module.exports = Object.create || function create(O, Properties){
 /* 80 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var redefine = __webpack_require__(45);
+var redefine = __webpack_require__(47);
 module.exports = function(target, src, safe){
   for(var key in src)redefine(target, key, src[key], safe);
   return target;
@@ -722,7 +722,7 @@ module.exports = function(target, src, safe){
 /***/ (function(module, exports, __webpack_require__) {
 
 var def = __webpack_require__(24).f
-  , has = __webpack_require__(15)
+  , has = __webpack_require__(16)
   , TAG = __webpack_require__(18)('toStringTag');
 
 module.exports = function(it, tag, stat){
@@ -843,7 +843,7 @@ module.exports = function(it, S){
 // 4 -> Array#every
 // 5 -> Array#find
 // 6 -> Array#findIndex
-var ctx      = __webpack_require__(43)
+var ctx      = __webpack_require__(45)
   , IObject  = __webpack_require__(77)
   , toObject = __webpack_require__(86)
   , toLength = __webpack_require__(85)
@@ -890,7 +890,7 @@ module.exports = function(TYPE, $create){
 var dP          = __webpack_require__(24).f
   , create      = __webpack_require__(79)
   , redefineAll = __webpack_require__(80)
-  , ctx         = __webpack_require__(43)
+  , ctx         = __webpack_require__(45)
   , anInstance  = __webpack_require__(72)
   , defined     = __webpack_require__(75)
   , forOf       = __webpack_require__(53)
@@ -1078,7 +1078,7 @@ exports.f = Object.getOwnPropertySymbols;
 /* 127 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var has          = __webpack_require__(15)
+var has          = __webpack_require__(16)
   , toIObject    = __webpack_require__(84)
   , arrayIndexOf = __webpack_require__(207)(false)
   , IE_PROTO     = __webpack_require__(82)('IE_PROTO');
@@ -1130,7 +1130,7 @@ module.exports = {
   set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line
     function(test, buggy, set){
       try {
-        set = __webpack_require__(43)(Function.call, __webpack_require__(44).f(Object.prototype, '__proto__').set, 2);
+        set = __webpack_require__(45)(Function.call, __webpack_require__(46).f(Object.prototype, '__proto__').set, 2);
         set(test, []);
         buggy = !(test instanceof Array);
       } catch(e){ buggy = true; }
@@ -1209,7 +1209,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_core_js_es6_reflect___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_core_js_es6_reflect__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_core_js_es7_reflect__ = __webpack_require__(205);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_core_js_es7_reflect___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_core_js_es7_reflect__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_zone_js_dist_zone__ = __webpack_require__(384);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_zone_js_dist_zone__ = __webpack_require__(386);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_zone_js_dist_zone___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_zone_js_dist_zone__);
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
@@ -1311,7 +1311,7 @@ __webpack_require__(241);
 __webpack_require__(242);
 __webpack_require__(244);
 __webpack_require__(243);
-module.exports = __webpack_require__(42).Reflect;
+module.exports = __webpack_require__(44).Reflect;
 
 /***/ }),
 /* 205 */
@@ -1326,7 +1326,7 @@ __webpack_require__(251);
 __webpack_require__(253);
 __webpack_require__(254);
 __webpack_require__(255);
-module.exports = __webpack_require__(42).Reflect;
+module.exports = __webpack_require__(44).Reflect;
 
 
 /***/ }),
@@ -1406,7 +1406,7 @@ module.exports = function(original, length){
 
 "use strict";
 
-var aFunction  = __webpack_require__(41)
+var aFunction  = __webpack_require__(43)
   , isObject   = __webpack_require__(11)
   , invoke     = __webpack_require__(215)
   , arraySlice = [].slice
@@ -1471,7 +1471,7 @@ var redefineAll       = __webpack_require__(80)
   , anInstance        = __webpack_require__(72)
   , forOf             = __webpack_require__(53)
   , createArrayMethod = __webpack_require__(121)
-  , $has              = __webpack_require__(15)
+  , $has              = __webpack_require__(16)
   , arrayFind         = createArrayMethod(5)
   , arrayFindIndex    = createArrayMethod(6)
   , id                = 0;
@@ -1635,9 +1635,9 @@ module.exports = function(iterator, fn, value, entries){
 
 var LIBRARY        = __webpack_require__(222)
   , $export        = __webpack_require__(7)
-  , redefine       = __webpack_require__(45)
+  , redefine       = __webpack_require__(47)
   , hide           = __webpack_require__(54)
-  , has            = __webpack_require__(15)
+  , has            = __webpack_require__(16)
   , Iterators      = __webpack_require__(78)
   , $iterCreate    = __webpack_require__(125)
   , setToStringTag = __webpack_require__(81)
@@ -1865,7 +1865,7 @@ module.exports = function(index, length){
 var classof   = __webpack_require__(211)
   , ITERATOR  = __webpack_require__(18)('iterator')
   , Iterators = __webpack_require__(78);
-module.exports = __webpack_require__(42).getIteratorMethod = function(it){
+module.exports = __webpack_require__(44).getIteratorMethod = function(it){
   if(it != undefined)return it[ITERATOR]
     || it['@@iterator']
     || Iterators[classof(it)];
@@ -1900,7 +1900,7 @@ module.exports = __webpack_require__(74)('Map', function(get){
 
 // 26.1.1 Reflect.apply(target, thisArgument, argumentsList)
 var $export   = __webpack_require__(7)
-  , aFunction = __webpack_require__(41)
+  , aFunction = __webpack_require__(43)
   , anObject  = __webpack_require__(4)
   , rApply    = (__webpack_require__(14).Reflect || {}).apply
   , fApply    = Function.apply;
@@ -1922,7 +1922,7 @@ $export($export.S + $export.F * !__webpack_require__(23)(function(){
 // 26.1.2 Reflect.construct(target, argumentsList [, newTarget])
 var $export    = __webpack_require__(7)
   , create     = __webpack_require__(79)
-  , aFunction  = __webpack_require__(41)
+  , aFunction  = __webpack_require__(43)
   , anObject   = __webpack_require__(4)
   , isObject   = __webpack_require__(11)
   , fails      = __webpack_require__(23)
@@ -2000,7 +2000,7 @@ $export($export.S + $export.F * __webpack_require__(23)(function(){
 
 // 26.1.4 Reflect.deleteProperty(target, propertyKey)
 var $export  = __webpack_require__(7)
-  , gOPD     = __webpack_require__(44).f
+  , gOPD     = __webpack_require__(46).f
   , anObject = __webpack_require__(4);
 
 $export($export.S, 'Reflect', {
@@ -2047,7 +2047,7 @@ $export($export.S, 'Reflect', {
 /***/ (function(module, exports, __webpack_require__) {
 
 // 26.1.7 Reflect.getOwnPropertyDescriptor(target, propertyKey)
-var gOPD     = __webpack_require__(44)
+var gOPD     = __webpack_require__(46)
   , $export  = __webpack_require__(7)
   , anObject = __webpack_require__(4);
 
@@ -2077,9 +2077,9 @@ $export($export.S, 'Reflect', {
 /***/ (function(module, exports, __webpack_require__) {
 
 // 26.1.6 Reflect.get(target, propertyKey [, receiver])
-var gOPD           = __webpack_require__(44)
+var gOPD           = __webpack_require__(46)
   , getPrototypeOf = __webpack_require__(30)
-  , has            = __webpack_require__(15)
+  , has            = __webpack_require__(16)
   , $export        = __webpack_require__(7)
   , isObject       = __webpack_require__(11)
   , anObject       = __webpack_require__(4);
@@ -2183,9 +2183,9 @@ if(setProto)$export($export.S, 'Reflect', {
 
 // 26.1.13 Reflect.set(target, propertyKey, V [, receiver])
 var dP             = __webpack_require__(24)
-  , gOPD           = __webpack_require__(44)
+  , gOPD           = __webpack_require__(46)
   , getPrototypeOf = __webpack_require__(30)
-  , has            = __webpack_require__(15)
+  , has            = __webpack_require__(16)
   , $export        = __webpack_require__(7)
   , createDesc     = __webpack_require__(56)
   , anObject       = __webpack_require__(4)
@@ -2238,7 +2238,7 @@ module.exports = __webpack_require__(74)('Set', function(get){
 "use strict";
 
 var each         = __webpack_require__(121)(0)
-  , redefine     = __webpack_require__(45)
+  , redefine     = __webpack_require__(47)
   , meta         = __webpack_require__(55)
   , assign       = __webpack_require__(223)
   , weak         = __webpack_require__(212)
@@ -2440,7 +2440,7 @@ metadata.exp({hasOwnMetadata: function hasOwnMetadata(metadataKey, target /*, ta
 
 var metadata                  = __webpack_require__(17)
   , anObject                  = __webpack_require__(4)
-  , aFunction                 = __webpack_require__(41)
+  , aFunction                 = __webpack_require__(43)
   , toMetaKey                 = metadata.key
   , ordinaryDefineOwnMetadata = metadata.set;
 
@@ -2583,7 +2583,9 @@ metadata.exp({metadata: function metadata(metadataKey, metadataValue){
 /* 381 */,
 /* 382 */,
 /* 383 */,
-/* 384 */
+/* 384 */,
+/* 385 */,
+/* 386 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global) {/**
@@ -5299,13 +5301,13 @@ Zone.__load_patch('util', function (global, Zone, api) {
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(3)))
 
 /***/ }),
-/* 385 */,
+/* 387 */,
-/* 386 */
+/* 388 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__(176);
 
 
 /***/ })
-],[386]);
+],[388]);
 //# sourceMappingURL=polyfills.bundle.js.map