openvidu-server dashboard loopback video testing first version

openvidu-java-client/release.properties

@@ -1,12 +0,0 @@
-#release configuration
-#Tue Jun 06 11:55:33 CEST 2017
-scm.tagNameFormat=@{project.artifactId}-@{project.version}
-pushChanges=false
-scm.url=scm\:git\:https\://github.com/OpenVidu/openvidu.git
-preparationGoals=versions\:use-releases
-remoteTagging=true
-projectVersionPolicyId=default
-scm.commentPrefix=[maven-release-plugin] 
-exec.additionalArguments=-Pkurento-release
-exec.snapshotReleasePluginAllowed=false
-completedPhase=scm-check-modifications

openvidu-server/src/angular/BuildFrontJarAndRun.sh

@@ -3,4 +3,4 @@ cd frontend
 ng build --output-path ../../main/resources/static
 cd ../../../
 mvn -DskipTests=true clean package
-java -jar target/openvidu-server-1.0.0-beta.1.jar
+mvn -Dopenvidu.security=$1 exec:java

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

@@ -26,7 +26,8 @@
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.1.0",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.4",
+    "openvidu-browser": "1.0.3-beta.1"
   },
   "devDependencies": {
     "@angular/cli": "1.0.2",

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

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
@@ -25,7 +26,8 @@ import { SessionDetailsComponent } from './components/session-details/session-de
     FormsModule,
     HttpModule,
     routing,
-    AppMaterialModule
+    AppMaterialModule,
+    FlexLayoutModule
   ],
   providers: [InfoService],
   bootstrap: [AppComponent]

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

@@ -1,3 +1,7 @@
+#dashboard-div {
+  padding: 20px;
+}
+
 #log {
   height: 100%;
 }
@@ -12,3 +16,7 @@
 ul {
   margin: 0;
 }
+
+md-card-title a {
+  float: right;  
+}

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

@@ -1,3 +1,6 @@
+<div id="dashboard-div" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxFlexFill>
+
+  <div fxLayout="column" fxFlex="66%" fxFlexOrder="1" fxFlexOrder.xs="2">
     <md-card id="log">
       <md-card-title>Server events</md-card-title>
       <md-divider></md-divider>
@@ -9,3 +12,16 @@
         </md-list>
       </md-card-content>
     </md-card>
+  </div>
+
+  <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-content #scrollMe id="log-content">
+        <div id="local-video"></div>
+        <div id="mirrored-video"></div>
+      </md-card-content>
+    </md-card>
+  </div>
+
+</div>

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

@@ -3,6 +3,8 @@ import { Subscription } from 'rxjs/Subscription';
 
 import { InfoService } from '../../services/info.service';
 
+import { OpenVidu } from 'openvidu-browser';
+
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
@@ -32,6 +34,28 @@ export class DashboardComponent implements OnInit, AfterViewChecked {
     this.scrollToBottom();
   }
 
+  testVideo() {
+    let OV = new OpenVidu();
+    let session = OV.initSession('wss://' + location.hostname + ':8443/testSession');
+
+    session.on('streamCreated', (event) => {
+      session.subscribe(event.stream, 'mirrored-video');
+    });
+
+    session.connect('token', (error) => {
+      if (!error) {
+        let publisher = OV.initPublisher('local-video', {
+          audio: true,
+          video: true,
+          quality: 'MEDIUM'
+        });
+
+        publisher.stream.subscribeToMyRemote();
+        session.publish(publisher);
+      }
+    });
+  }
+
   scrollToBottom(): void {
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;

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

@@ -4,12 +4,12 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  background: #4d4d4d;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
 }
 
 main {
-  height: 90%;
+  height: 100%;
-  padding: 20px;
 }
 
 li {

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

@@ -1,6 +1,124 @@
 webpackJsonp([1,4],{
 
-/***/ 100:
+/***/ 119:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__services_info_service__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_openvidu_browser__ = __webpack_require__(280);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_openvidu_browser___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_openvidu_browser__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DashboardComponent; });
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+
+var DashboardComponent = (function () {
+    function DashboardComponent(infoService) {
+        var _this = this;
+        this.infoService = infoService;
+        this.info = [];
+        // Subscription to info updated event raised by InfoService
+        this.infoSubscription = this.infoService.newInfo$.subscribe(function (info) {
+            _this.info.push(info);
+        });
+    }
+    DashboardComponent.prototype.ngOnInit = function () {
+    };
+    DashboardComponent.prototype.ngAfterViewChecked = function () {
+        this.scrollToBottom();
+    };
+    DashboardComponent.prototype.testVideo = function () {
+        var OV = new __WEBPACK_IMPORTED_MODULE_2_openvidu_browser__["OpenVidu"]();
+        var session = OV.initSession('wss://' + location.hostname + ':8443/testSession');
+        session.on('streamCreated', function (event) {
+            session.subscribe(event.stream, 'mirrored-video');
+        });
+        session.connect('token', function (error) {
+            if (!error) {
+                var publisher = OV.initPublisher('local-video', {
+                    audio: true,
+                    video: true,
+                    quality: 'MEDIUM'
+                });
+                publisher.stream.subscribeToMyRemote();
+                session.publish(publisher);
+            }
+        });
+    };
+    DashboardComponent.prototype.scrollToBottom = function () {
+        try {
+            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+        }
+        catch (err) {
+            console.log('[Error]:' + err.toString());
+        }
+    };
+    return DashboardComponent;
+}());
+__decorate([
+    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_7" /* ViewChild */])('scrollMe'),
+    __metadata("design:type", typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_0__angular_core__["l" /* ElementRef */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_0__angular_core__["l" /* ElementRef */]) === "function" && _a || Object)
+], DashboardComponent.prototype, "myScrollContainer", void 0);
+DashboardComponent = __decorate([
+    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_4" /* Component */])({
+        selector: 'app-dashboard',
+        template: __webpack_require__(285),
+        styles: [__webpack_require__(260)],
+    }),
+    __metadata("design:paramtypes", [typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1__services_info_service__["a" /* InfoService */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_1__services_info_service__["a" /* InfoService */]) === "function" && _b || Object])
+], DashboardComponent);
+
+var _a, _b;
+//# sourceMappingURL=dashboard.component.js.map
+
+/***/ }),
+
+/***/ 120:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SessionDetailsComponent; });
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+var SessionDetailsComponent = (function () {
+    function SessionDetailsComponent() {
+    }
+    SessionDetailsComponent.prototype.ngOnInit = function () {
+    };
+    return SessionDetailsComponent;
+}());
+SessionDetailsComponent = __decorate([
+    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_4" /* Component */])({
+        selector: 'app-session-details',
+        template: __webpack_require__(286),
+        styles: [__webpack_require__(261)]
+    }),
+    __metadata("design:paramtypes", [])
+], SessionDetailsComponent);
+
+//# sourceMappingURL=session-details.component.js.map
+
+/***/ }),
+
+/***/ 174:
 /***/ (function(module, exports) {
 
 function webpackEmptyContext(req) {
@@ -9,20 +127,20 @@ function webpackEmptyContext(req) {
 webpackEmptyContext.keys = function() { return []; };
 webpackEmptyContext.resolve = webpackEmptyContext;
 module.exports = webpackEmptyContext;
-webpackEmptyContext.id = 100;
+webpackEmptyContext.id = 174;
 
 
 /***/ }),
 
-/***/ 101:
+/***/ 175:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_dynamic__ = __webpack_require__(107);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_dynamic__ = __webpack_require__(196);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__app_app_module__ = __webpack_require__(112);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__app_app_module__ = __webpack_require__(201);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__environments_environment__ = __webpack_require__(114);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__environments_environment__ = __webpack_require__(203);
 
 
 
@@ -35,12 +153,12 @@ __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_dyna
 
 /***/ }),
 
-/***/ 110:
+/***/ 199:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_app_services_info_service__ = __webpack_require__(37);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_app_services_info_service__ = __webpack_require__(69);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppComponent; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -93,10 +211,10 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], AppComponent.prototype, "beforeUnloadHander", null);
 AppComponent = __decorate([
-    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["q" /* Component */])({
+    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_4" /* Component */])({
         selector: 'app-root',
-        template: __webpack_require__(172),
+        template: __webpack_require__(284),
-        styles: [__webpack_require__(169)]
+        styles: [__webpack_require__(259)]
     }),
     __metadata("design:paramtypes", [typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_1_app_services_info_service__["a" /* InfoService */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_1_app_services_info_service__["a" /* InfoService */]) === "function" && _a || Object])
 ], AppComponent);
@@ -106,13 +224,13 @@ var _a;
 
 /***/ }),
 
-/***/ 111:
+/***/ 200:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_animations__ = __webpack_require__(108);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_animations__ = __webpack_require__(197);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_material__ = __webpack_require__(106);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_material__ = __webpack_require__(195);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppMaterialModule; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -139,20 +257,21 @@ AppMaterialModule = __decorate([
 
 /***/ }),
 
-/***/ 112:
+/***/ 201:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__ = __webpack_require__(22);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_flex_layout__ = __webpack_require__(192);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_forms__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__angular_http__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__angular_forms__ = __webpack_require__(117);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__app_routing__ = __webpack_require__(113);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__angular_http__ = __webpack_require__(118);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_app_app_material_module__ = __webpack_require__(111);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__app_routing__ = __webpack_require__(202);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__services_info_service__ = __webpack_require__(37);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_app_app_material_module__ = __webpack_require__(200);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__app_component__ = __webpack_require__(110);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__services_info_service__ = __webpack_require__(69);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__components_dashboard_dashboard_component__ = __webpack_require__(70);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__app_component__ = __webpack_require__(199);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__components_session_details_session_details_component__ = __webpack_require__(71);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__components_dashboard_dashboard_component__ = __webpack_require__(119);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__components_session_details_session_details_component__ = __webpack_require__(120);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppModule; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -170,27 +289,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 
 
 
+
 var AppModule = (function () {
     function AppModule() {
     }
     return AppModule;
 }());
 AppModule = __decorate([
-    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__angular_core__["b" /* NgModule */])({
+    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__angular_core__["b" /* NgModule */])({
         declarations: [
-            __WEBPACK_IMPORTED_MODULE_7__app_component__["a" /* AppComponent */],
+            __WEBPACK_IMPORTED_MODULE_8__app_component__["a" /* AppComponent */],
-            __WEBPACK_IMPORTED_MODULE_8__components_dashboard_dashboard_component__["a" /* DashboardComponent */],
+            __WEBPACK_IMPORTED_MODULE_9__components_dashboard_dashboard_component__["a" /* DashboardComponent */],
-            __WEBPACK_IMPORTED_MODULE_9__components_session_details_session_details_component__["a" /* SessionDetailsComponent */]
+            __WEBPACK_IMPORTED_MODULE_10__components_session_details_session_details_component__["a" /* SessionDetailsComponent */]
         ],
         imports: [
             __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__["a" /* BrowserModule */],
-            __WEBPACK_IMPORTED_MODULE_2__angular_forms__["a" /* FormsModule */],
+            __WEBPACK_IMPORTED_MODULE_3__angular_forms__["a" /* FormsModule */],
-            __WEBPACK_IMPORTED_MODULE_3__angular_http__["a" /* HttpModule */],
+            __WEBPACK_IMPORTED_MODULE_4__angular_http__["a" /* HttpModule */],
-            __WEBPACK_IMPORTED_MODULE_4__app_routing__["a" /* routing */],
+            __WEBPACK_IMPORTED_MODULE_5__app_routing__["a" /* routing */],
-            __WEBPACK_IMPORTED_MODULE_5_app_app_material_module__["a" /* AppMaterialModule */]
+            __WEBPACK_IMPORTED_MODULE_6_app_app_material_module__["a" /* AppMaterialModule */],
+            __WEBPACK_IMPORTED_MODULE_1__angular_flex_layout__["a" /* FlexLayoutModule */]
         ],
-        providers: [__WEBPACK_IMPORTED_MODULE_6__services_info_service__["a" /* InfoService */]],
+        providers: [__WEBPACK_IMPORTED_MODULE_7__services_info_service__["a" /* InfoService */]],
-        bootstrap: [__WEBPACK_IMPORTED_MODULE_7__app_component__["a" /* AppComponent */]]
+        bootstrap: [__WEBPACK_IMPORTED_MODULE_8__app_component__["a" /* AppComponent */]]
     })
 ], AppModule);
 
@@ -198,13 +319,13 @@ AppModule = __decorate([
 
 /***/ }),
 
-/***/ 113:
+/***/ 202:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_router__ = __webpack_require__(109);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_router__ = __webpack_require__(198);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_app_components_dashboard_dashboard_component__ = __webpack_require__(70);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_app_components_dashboard_dashboard_component__ = __webpack_require__(119);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_app_components_session_details_session_details_component__ = __webpack_require__(71);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_app_components_session_details_session_details_component__ = __webpack_require__(120);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return routing; });
 
 
@@ -224,7 +345,7 @@ var routing = __WEBPACK_IMPORTED_MODULE_0__angular_router__["a" /* RouterModule
 
 /***/ }),
 
-/***/ 114:
+/***/ 203:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -241,10 +362,10 @@ var environment = {
 
 /***/ }),
 
-/***/ 169:
+/***/ 259:
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(19)(false);
+exports = module.exports = __webpack_require__(37)(false);
 // imports
 
 
@@ -259,15 +380,15 @@ module.exports = module.exports.toString();
 
 /***/ }),
 
-/***/ 170:
+/***/ 260:
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(19)(false);
+exports = module.exports = __webpack_require__(37)(false);
 // imports
 
 
 // module
-exports.push([module.i, "#log {\n  height: 100%;\n}\n\n#log-content {\n  height: 90%;\n  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n  overflow-y: auto;\n  overflow-x: hidden\n}\n\nul {\n  margin: 0;\n}\n", ""]);
+exports.push([module.i, "#dashboard-div {\n  padding: 20px;\n}\n\n#log {\n  height: 100%;\n}\n\n#log-content {\n  height: 90%;\n  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n  overflow-y: auto;\n  overflow-x: hidden\n}\n\nul {\n  margin: 0;\n}\n\nmd-card-title a {\n  float: right;  \n}", ""]);
 
 // exports
 
@@ -277,10 +398,10 @@ module.exports = module.exports.toString();
 
 /***/ }),
 
-/***/ 171:
+/***/ 261:
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(19)(false);
+exports = module.exports = __webpack_require__(37)(false);
 // imports
 
 
@@ -295,41 +416,41 @@ module.exports = module.exports.toString();
 
 /***/ }),
 
-/***/ 172:
+/***/ 284:
 /***/ (function(module, exports) {
 
 module.exports = "<main>\n  <router-outlet></router-outlet>\n</main>"
 
 /***/ }),
 
-/***/ 173:
+/***/ 285:
 /***/ (function(module, exports) {
 
-module.exports = "<md-card id=\"log\">\n  <md-card-title>Server events</md-card-title>\n  <md-divider></md-divider>\n  <md-card-content #scrollMe id=\"log-content\">\n    <md-list>\n      <md-list-item *ngFor=\"let i of info\">\n        <p>{{i}}</p>\n      </md-list-item>\n    </md-list>\n  </md-card-content>\n</md-card>\n"
+module.exports = "<div id=\"dashboard-div\" fxLayout=\"row\" fxLayout.xs=\"column\" fxLayoutGap=\"20px\" fxFlexFill>\n\n  <div fxLayout=\"column\" fxFlex=\"66%\" fxFlexOrder=\"1\" fxFlexOrder.xs=\"2\">\n    <md-card id=\"log\">\n      <md-card-title>Server events</md-card-title>\n      <md-divider></md-divider>\n      <md-card-content #scrollMe id=\"log-content\">\n        <md-list>\n          <md-list-item *ngFor=\"let i of info\">\n            <p>{{i}}</p>\n          </md-list-item>\n        </md-list>\n      </md-card-content>\n    </md-card>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex=\"33%\" fxFlexOrder=\"2\" fxFlexOrder.xs=\"1\">\n    <md-card id=\"video-loop\">\n      <md-card-title>Test the connection<a md-raised-button (click)=\"testVideo()\">Test</a></md-card-title>\n      <md-card-content #scrollMe id=\"log-content\">\n        <div id=\"local-video\"></div>\n        <div id=\"mirrored-video\"></div>\n      </md-card-content>\n    </md-card>\n  </div>\n\n</div>\n"
 
 /***/ }),
 
-/***/ 174:
+/***/ 286:
 /***/ (function(module, exports) {
 
 module.exports = "<p>\n  session-details works!\n</p>\n"
 
 /***/ }),
 
-/***/ 228:
+/***/ 385:
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(101);
+module.exports = __webpack_require__(175);
 
 
 /***/ }),
 
-/***/ 37:
+/***/ 69:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_Subject__ = __webpack_require__(17);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_Subject__ = __webpack_require__(31);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_Subject___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_rxjs_Subject__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InfoService; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -363,104 +484,7 @@ InfoService = __decorate([
 
 //# sourceMappingURL=info.service.js.map
 
-/***/ }),
-
-/***/ 70:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__services_info_service__ = __webpack_require__(37);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DashboardComponent; });
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-
-
-var DashboardComponent = (function () {
-    function DashboardComponent(infoService) {
-        var _this = this;
-        this.infoService = infoService;
-        this.info = [];
-        // Subscription to info updated event raised by InfoService
-        this.infoSubscription = this.infoService.newInfo$.subscribe(function (info) {
-            _this.info.push(info);
-        });
-    }
-    DashboardComponent.prototype.ngOnInit = function () {
-    };
-    DashboardComponent.prototype.ngAfterViewChecked = function () {
-        this.scrollToBottom();
-    };
-    DashboardComponent.prototype.scrollToBottom = function () {
-        try {
-            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
-        }
-        catch (err) {
-            console.log('[Error]:' + err.toString());
-        }
-    };
-    return DashboardComponent;
-}());
-__decorate([
-    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["z" /* ViewChild */])('scrollMe'),
-    __metadata("design:type", typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_0__angular_core__["h" /* ElementRef */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_0__angular_core__["h" /* ElementRef */]) === "function" && _a || Object)
-], DashboardComponent.prototype, "myScrollContainer", void 0);
-DashboardComponent = __decorate([
-    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["q" /* Component */])({
-        selector: 'app-dashboard',
-        template: __webpack_require__(173),
-        styles: [__webpack_require__(170)],
-    }),
-    __metadata("design:paramtypes", [typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1__services_info_service__["a" /* InfoService */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_1__services_info_service__["a" /* InfoService */]) === "function" && _b || Object])
-], DashboardComponent);
-
-var _a, _b;
-//# sourceMappingURL=dashboard.component.js.map
-
-/***/ }),
-
-/***/ 71:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(3);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SessionDetailsComponent; });
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-
-var SessionDetailsComponent = (function () {
-    function SessionDetailsComponent() {
-    }
-    SessionDetailsComponent.prototype.ngOnInit = function () {
-    };
-    return SessionDetailsComponent;
-}());
-SessionDetailsComponent = __decorate([
-    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["q" /* Component */])({
-        selector: 'app-session-details',
-        template: __webpack_require__(174),
-        styles: [__webpack_require__(171)]
-    }),
-    __metadata("design:paramtypes", [])
-], SessionDetailsComponent);
-
-//# sourceMappingURL=session-details.component.js.map
-
 /***/ })
 
-},[228]);
+},[385]);
 //# sourceMappingURL=main.bundle.js.map

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

@@ -1,15 +1,15 @@
 webpackJsonp([2,4],{
 
-/***/ 103:
+/***/ 177:
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(168);
+var content = __webpack_require__(257);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // add the styles to the DOM
-var update = __webpack_require__(226)(content, {});
+var update = __webpack_require__(370)(content, {});
 if(content.locals) module.exports = content.locals;
 // Hot Module Replacement
 if(false) {
@@ -27,10 +27,10 @@ if(false) {
 
 /***/ }),
 
-/***/ 167:
+/***/ 256:
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(19)(false);
+exports = module.exports = __webpack_require__(37)(false);
 // imports
 
 
@@ -42,22 +42,22 @@ exports.push([module.i, ".mat-elevation-z0{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0
 
 /***/ }),
 
-/***/ 168:
+/***/ 257:
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(19)(false);
+exports = module.exports = __webpack_require__(37)(false);
 // imports
-exports.i(__webpack_require__(167), "");
+exports.i(__webpack_require__(256), "");
 
 // module
-exports.push([module.i, "html,\nbody {\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);\n}\n\nmain {\n  height: 90%;\n  padding: 20px;\n}\n\nli {\n  list-style: none;\n}\n", ""]);
+exports.push([module.i, "html,\nbody {\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  background: #4d4d4d;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);\n}\n\nmain {\n  height: 100%;\n}\n\nli {\n  list-style: none;\n}\n", ""]);
 
 // exports
 
 
 /***/ }),
 
-/***/ 18:
+/***/ 3:
 /***/ (function(module, exports) {
 
 var g;
@@ -85,7 +85,7 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 19:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(Buffer) {/*
@@ -164,11 +164,11 @@ function toComment(sourceMap) {
   return '/*# ' + data + ' */';
 }
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(39).Buffer))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(71).Buffer))
 
 /***/ }),
 
-/***/ 226:
+/***/ 370:
 /***/ (function(module, exports) {
 
 /*
@@ -421,15 +421,15 @@ function updateLink(linkElement, obj) {
 
 /***/ }),
 
-/***/ 230:
+/***/ 387:
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(103);
+module.exports = __webpack_require__(177);
 
 
 /***/ }),
 
-/***/ 38:
+/***/ 70:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -468,22 +468,22 @@ function placeHoldersCount (b64) {
 
 function byteLength (b64) {
   // base64 is 4/3 + up to two characters of the original data
-  return b64.length * 3 / 4 - placeHoldersCount(b64)
+  return (b64.length * 3 / 4) - placeHoldersCount(b64)
 }
 
 function toByteArray (b64) {
-  var i, j, l, tmp, placeHolders, arr
+  var i, l, tmp, placeHolders, arr
   var len = b64.length
   placeHolders = placeHoldersCount(b64)
 
-  arr = new Arr(len * 3 / 4 - placeHolders)
+  arr = new Arr((len * 3 / 4) - placeHolders)
 
   // if there are placeholders, only get up to the last complete 4 chars
   l = placeHolders > 0 ? len - 4 : len
 
   var L = 0
 
-  for (i = 0, j = 0; i < l; i += 4, j += 3) {
+  for (i = 0; i < l; i += 4) {
     tmp = (revLookup[b64.charCodeAt(i)] << 18) | (revLookup[b64.charCodeAt(i + 1)] << 12) | (revLookup[b64.charCodeAt(i + 2)] << 6) | revLookup[b64.charCodeAt(i + 3)]
     arr[L++] = (tmp >> 16) & 0xFF
     arr[L++] = (tmp >> 8) & 0xFF
@@ -551,7 +551,7 @@ function fromByteArray (uint8) {
 
 /***/ }),
 
-/***/ 39:
+/***/ 71:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -565,9 +565,9 @@ function fromByteArray (uint8) {
 
 
 
-var base64 = __webpack_require__(38)
+var base64 = __webpack_require__(70)
-var ieee754 = __webpack_require__(56)
+var ieee754 = __webpack_require__(88)
-var isArray = __webpack_require__(57)
+var isArray = __webpack_require__(89)
 
 exports.Buffer = Buffer
 exports.SlowBuffer = SlowBuffer
@@ -2345,11 +2345,11 @@ function isnan (val) {
   return val !== val // eslint-disable-line no-self-compare
 }
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(18)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(3)))
 
 /***/ }),
 
-/***/ 56:
+/***/ 88:
 /***/ (function(module, exports) {
 
 exports.read = function (buffer, offset, isLE, mLen, nBytes) {
@@ -2440,7 +2440,7 @@ exports.write = function (buffer, value, offset, isLE, mLen, nBytes) {
 
 /***/ }),
 
-/***/ 57:
+/***/ 89:
 /***/ (function(module, exports) {
 
 var toString = {}.toString;
@@ -2452,5 +2452,5 @@ module.exports = Array.isArray || function (arr) {
 
 /***/ })
 
-},[230]);
+},[387]);
 //# sourceMappingURL=styles.bundle.js.map