openvidu-server dashboard updated to Angular 6

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

@@ -1,54 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "openvidu-server-frontend"
-  },
-  "apps": [{
-    "root": "src",
-    "outDir": "dist",
-    "assets": [
-      "assets",
-      "favicon.ico"
-    ],
-    "index": "index.html",
-    "main": "main.ts",
-    "polyfills": "polyfills.ts",
-    "test": "test.ts",
-    "tsconfig": "tsconfig.app.json",
-    "testTsconfig": "tsconfig.spec.json",
-    "prefix": "app",
-    "styles": [
-      "styles.css"
-    ],
-    "scripts": [],
-    "environmentSource": "environments/environment.ts",
-    "environments": {
-      "dev": "environments/environment.ts",
-      "prod": "environments/environment.prod.ts"
-    }
-  }],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [{
-      "project": "src/tsconfig.app.json"
-    },
-    {
-      "project": "src/tsconfig.spec.json"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}

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

@@ -0,0 +1,129 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "openvidu-server-frontend": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "showCircularDependencies": false,
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "openvidu-server-frontend:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "openvidu-server-frontend:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "openvidu-server-frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "openvidu-server-frontend-e2e": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "openvidu-server-frontend:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "openvidu-server-frontend",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

openvidu-server/src/angular/frontend/karma.conf.js

@@ -4,28 +4,28 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     files: [
-      { pattern: './src/test.ts', watched: false }
+      
     ],
     preprocessors: {
-      './src/test.ts': ['@angular/cli']
+      
     },
     mime: {
       'text/x-typescript': ['ts','tsx']
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
     angularCli: {

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

@@ -1,43 +1,35 @@
 {
     "dependencies": {
-        "@angular/animations": "5.0.5", 
+        "@angular/animations": "6.0.3",
-        "@angular/cdk": "5.0.0-rc.2", 
+        "@angular/cdk": "6.2.1",
-        "@angular/common": "5.0.5", 
+        "@angular/common": "6.0.3",
-        "@angular/compiler": "5.0.5", 
+        "@angular/compiler": "6.0.3",
-        "@angular/core": "5.0.5", 
+        "@angular/core": "6.0.3",
-        "@angular/flex-layout": "2.0.0-beta.10-4905443", 
+        "@angular/flex-layout": "^6.0.0-beta.15",
-        "@angular/forms": "5.0.5", 
+        "@angular/forms": "6.0.3",
-        "@angular/http": "5.0.5", 
+        "@angular/http": "6.0.3",
-        "@angular/material": "5.0.0-rc.1", 
+        "@angular/material": "6.2.1",
-        "@angular/platform-browser": "5.0.5", 
+        "@angular/platform-browser": "6.0.3",
-        "@angular/platform-browser-dynamic": "5.0.5", 
+        "@angular/platform-browser-dynamic": "6.0.3",
-        "@angular/router": "5.0.5", 
+        "@angular/router": "6.0.3",
-        "core-js": "2.5.1", 
+        "core-js": "^2.5.7",
         "hammerjs": "2.0.8",
         "openvidu-browser": "2.1.0",
-        "rxjs": "5.5.3", 
+        "rxjs": "^6.2.0",
-        "zone.js": "0.8.18"
+        "zone.js": "0.8.26"
     },
     "devDependencies": {
-        "@angular/cli": "^1.6.0", 
+        "@angular-devkit/build-angular": "^0.6.8",
-        "@angular/compiler-cli": "5.0.5", 
+        "@angular/cli": "6.0.7",
-        "@types/jasmine": "2.5.38", 
+        "@angular/compiler-cli": "6.0.3",
-        "@types/node": "~6.0.60", 
+        "@types/jasmine": "2.8.8",
-        "codelyzer": "4.0.1", 
+        "@types/node": "10.3.1",
-        "jasmine-core": "~2.5.2", 
+        "codelyzer": "4.3.0",
-        "jasmine-spec-reporter": "~3.2.0", 
+        "ts-node": "6.1.0",
-        "karma": "~1.4.1", 
+        "tslint": "5.10.0",
-        "karma-chrome-launcher": "~2.0.0", 
+        "typescript": "2.7.2"
-        "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": "3.3.0", 
-        "tslint": "5.8.0", 
-        "typescript": "2.4.2"
     },
-    "license": "MIT", 
+    "license": "Apache-2.0",
     "name": "frontend",
     "private": true,
     "scripts": {

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

@@ -10,9 +10,9 @@ import { MatDialogRef } from '@angular/material';
             </h1>
             <form #dialogForm (ngSubmit)="testVideo()">
                 <mat-dialog-content>
-                    <mat-input-container>
+                    <mat-form-field>
                         <input matInput name="secret" type="password" [(ngModel)]="secret" required>
-                    </mat-input-container>
+                    </mat-form-field>
                 </mat-dialog-content>
                 <mat-dialog-actions>
                     <button mat-button mat-dialog-close>CANCEL</button>

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

@@ -1,4 +1,5 @@
 #dashboard-div {
+  height: 100%;
   padding: 20px;
 }
 
@@ -19,7 +20,6 @@ ul {
 
 #test-btn {
   text-transform: uppercase;
-  float: right;
 }
 
 mat-card-title button.blue {
@@ -86,6 +86,12 @@ mat-spinner {
   position: relative;
 }
 
+@media screen and (max-width: 599px) {
+  mat-card-title {
+     font-size: 20px;
+  }
+}
+
 
 /* Pure CSS loader */
 

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

@@ -1,6 +1,6 @@
-<div id="dashboard-div" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxFlexFill>
+<div id="dashboard-div" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="20px">
 
-  <div fxLayout="column" fxFlex="66%" fxFlexOrder="1" fxFlexOrder.xs="2">
+  <div fxFlex="66%" fxFlexOrder="1" fxFlexOrder.xs="2">
     <mat-card id="log">
       <mat-card-title>Server events
         <mat-slide-toggle title="Lock Scroll" [(ngModel)]="lockScroll" style="float: right; margin-left: auto;">
@@ -18,11 +18,12 @@
     </mat-card>
   </div>
 
-  <div fxLayout="column" fxFlex="33%" fxFlexOrder="2" fxFlexOrder.xs="1">
+  <div fxFlex="33%" fxFlex.xs="auto" fxFlexOrder="2" fxFlexOrder.xs="1">
     <mat-card id="video-loop">
       <mat-card-title>Test the connection
         <button id="test-btn" mat-raised-button [ngClass]="testStatus == 'DISCONNECTED' ? 'blue' : (testStatus == 'PLAYING' ? 'yellow' : 'disabled')" (click)="toggleTestVideo()" [disabled]="testStatus==='CONNECTING' || testStatus==='CONNECTED'">{{testButton}}</button>
       </mat-card-title>
+      <mat-divider></mat-divider>
       <mat-card-content>
         <div id="mirrored-video">
           <div *ngIf="showSpinner" id="loader">

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild, ElementRef, HostListener, OnDestroy } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { InfoService } from '../../services/info.service';
 import { RestService } from '../../services/rest.service';
@@ -135,6 +135,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.session.connect(token)
       .then(() => {
 
+        this.msgChain.push('Connected to session');
+
         this.testStatus = 'CONNECTED';
 
         const publisherRemote = OV.initPublisher('mirrored-video', {
@@ -163,8 +165,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
           this.msgChain.push('Video element created');
         });
 
-        publisherRemote.on('remoteVideoPlaying', (video) => {
+        publisherRemote.on('streamCreated', (video) => {
-          this.msgChain.push('Remote video playing');
+          this.msgChain.push('Stream created');
+        });
+
+        publisherRemote.on('streamPlaying', (video) => {
+          this.msgChain.push('Stream playing');
           this.testButton = 'End test';
           this.testStatus = 'PLAYING';
           this.showSpinner = false;
@@ -188,6 +194,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
           });
         } else {
           console.error(error);
+          this.msgChain.push('Error connecting to session');
         }
       });
   }

openvidu-server/src/angular/frontend/src/app/services/info.service.ts

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

openvidu-server/src/angular/frontend/src/app/services/rest.service.ts

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

openvidu-server/src/angular/frontend/src/polyfills.ts

@@ -66,3 +66,5 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
  */
 // import 'intl';  // Run `npm install --save intl`.
+
+(window as any).global = window;

openvidu-server/src/angular/frontend/src/tsconfig.spec.json

@@ -11,7 +11,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",

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

@@ -12,7 +12,7 @@
     "curly": true,
     "eofline": true,
     "forin": true,
-    "import-blacklist": [true, "rxjs"],
+    "import-blacklist": [true],
     "import-spacing": true,
     "indent": [
       true,