OpenVidu Server Dashborad update to Angular 15

openvidu-server/src/dashboard/package.json

@@ -1,40 +1,39 @@
 {
   "dependencies": {
-    "@angular/animations": "14.2.12",
-    "@angular/cdk": "14.2.7",
-    "@angular/common": "14.2.12",
-    "@angular/compiler": "14.2.12",
-    "@angular/core": "14.2.12",
-    "@angular/flex-layout": "14.0.0-beta.41",
-    "@angular/forms": "14.2.12",
-    "@angular/material": "14.2.7",
-    "@angular/platform-browser": "14.2.12",
-    "@angular/platform-browser-dynamic": "14.2.12",
-    "@angular/router": "14.2.12",
-    "core-js": "3.21.1",
-    "jquery": "3.6.0",
+    "@angular/animations": "15.0.2",
+    "@angular/cdk": "15.0.1",
+    "@angular/common": "15.0.2",
+    "@angular/compiler": "15.0.2",
+    "@angular/core": "15.0.2",
+    "@angular/forms": "15.0.2",
+    "@angular/material": "15.0.1",
+    "@angular/platform-browser": "15.0.2",
+    "@angular/platform-browser-dynamic": "15.0.2",
+    "@angular/router": "15.0.2",
+    "core-js": "3.26.1",
+    "jquery": "3.6.1",
     "openvidu-browser": "2.24.0",
-    "rxjs": "7.5.5",
-    "tslib": "2.3.1",
-    "zone.js": "0.11.5"
+    "rxjs": "7.5.7",
+    "tslib": "2.4.1",
+    "zone.js": "0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.2.10",
-    "@angular/cli": "14.2.10",
-    "@angular/compiler-cli": "14.2.12",
-    "@angular/language-service": "14.2.12",
-    "@types/jasmine": "3.6.6",
-    "@types/node": "17.0.21",
+    "@angular-devkit/build-angular": "15.0.2",
+    "@angular/cli": "15.0.2",
+    "@angular/compiler-cli": "15.0.2",
+    "@angular/language-service": "15.0.2",
+    "@types/jasmine": "4.3.0",
+    "@types/node": "18.11.10",
     "codelyzer": "6.0.2",
-    "jasmine-core": "4.0.1",
+    "jasmine-core": "4.5.0",
     "jasmine-spec-reporter": "7.0.0",
-    "karma": "6.3.17",
+    "karma": "6.4.1",
     "karma-chrome-launcher": "3.1.1",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-jasmine": "4.0.1",
-    "karma-jasmine-html-reporter": "1.7.0",
+    "karma-jasmine": "5.1.0",
+    "karma-jasmine-html-reporter": "2.0.0",
     "protractor": "7.0.0",
-    "ts-node": "10.7.0",
+    "ts-node": "10.9.1",
     "tslint": "6.1.3",
     "typescript": "4.8.4"
   },
@@ -48,7 +47,7 @@
     "lint": "ng lint",
     "ng": "ng",
     "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
-    "start": "ng serve",
+    "start": "ng serve --host 0.0.0.0 --ssl",
     "test": "ng test"
   },
   "version": "0.0.0"

openvidu-server/src/dashboard/src/app/app.material.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';

openvidu-server/src/dashboard/src/app/app.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
@@ -34,8 +33,7 @@ import { HttpClientModule } from '@angular/common/http';
     FormsModule,
     HttpClientModule,
     routing,
-    AppMaterialModule,
-    FlexLayoutModule
+    AppMaterialModule
   ],
   providers: [InfoService, RestService],
   bootstrap: [AppComponent]

openvidu-server/src/dashboard/src/app/app.routing.ts

@@ -41,4 +41,4 @@ const appRoutes: Routes = [
   }
 ];
 
-export const routing: ModuleWithProviders<RouterModule> = RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' });
+export const routing: ModuleWithProviders<RouterModule> = RouterModule.forRoot(appRoutes, { useHash: true });

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

@@ -1,10 +1,34 @@
 #dashboard-div {
   height: 100%;
   padding: 20px;
+  display: flex;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  column-gap: 20px;
+}
+
+#server-events {
+  flex-basis: 60%;
+}
+
+#server-video {
+  flex-basis: 30%;
+}
+
+.flex-item {
+  flex-grow: 1;
+}
+
+mat-card-header {
+  padding-bottom: 16px;
+}
+
+#toggle-switch {
+  margin-left: 10px;
 }
 
 #log {
-  height: 90%;
+  height: 100%;
 }
 
 #log-content {
@@ -22,6 +46,10 @@ ul {
   text-transform: uppercase;
 }
 
+mat-card {
+  background: white;
+}
+
 mat-card-title button.blue {
   color: #ffffff;
   background-color: #0088aa;
@@ -86,12 +114,48 @@ mat-spinner {
   position: relative;
 }
 
+#msg-chain p:last-child {
+  margin-bottom: 0;
+}
+
+/* >xs */
+@media screen and (min-width: 600px) {
+
+  #dashboard-div {
+    flex-direction: row;
+  }
+
+}
+
+/* xs */
 @media screen and (max-width: 599px) {
-  mat-card-title {
-     font-size: 20px;
+
+  #dashboard-div {
+    flex-direction: column;
+  }
+
+  #server-events {
+    order: 2;
+  }
+
+  #server-video {
+    order: 1;
+    margin-bottom: 20px;
   }
 }
 
+/* sm */
+@media screen and (min-width: 600px) and (max-width: 959px) {}
+
+/* md */
+@media screen and (min-width: 960px) and (max-width: 1279px) {}
+
+/* lg */
+@media screen and (min-width: 1280px) and (max-width: 1919px) {}
+
+/* xl */
+@media screen and (min-width: 1920px) {}
+
 
 /* Pure CSS loader */
 
@@ -132,6 +196,7 @@ mat-spinner {
   0% {
     -webkit-transform: rotate(0deg);
   }
+
   100% {
     -webkit-transform: rotate(360deg);
   }
@@ -141,6 +206,7 @@ mat-spinner {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -165,6 +231,7 @@ mat-spinner {
   0% {
     -webkit-transform: rotate(0deg);
   }
+
   100% {
     -webkit-transform: rotate(220deg);
   }
@@ -174,6 +241,7 @@ mat-spinner {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(220deg);
   }
@@ -200,9 +268,11 @@ mat-spinner {
   0% {
     -webkit-transform: rotate(-140deg);
   }
+
   50% {
     -webkit-transform: rotate(-160deg);
   }
+
   100% {
     -webkit-transform: rotate(140deg);
   }
@@ -212,9 +282,11 @@ mat-spinner {
   0% {
     transform: rotate(-140deg);
   }
+
   50% {
     transform: rotate(-160deg);
   }
+
   100% {
     transform: rotate(140deg);
   }

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

@@ -1,12 +1,14 @@
-<div id="dashboard-div" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="20px">
+<div id="dashboard-div" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="20px">
 
-  <div fxFlex="66%" fxFlexOrder="1" fxFlexOrder.xs="2">
+  <div id="server-events" class="flex-item" fxFlexOrder="1" fxFlexOrder.xs="2">
     <mat-card id="log">
+      <mat-card-header>
         <mat-card-title>Server events
-        <mat-slide-toggle title="Lock Scroll" [(ngModel)]="lockScroll" style="float: right; margin-left: auto;">
+          <mat-slide-toggle id="toggle-switch" title="Lock Scroll" [(ngModel)]="lockScroll">
             <mat-icon>lock_outline</mat-icon>
           </mat-slide-toggle>
         </mat-card-title>
+      </mat-card-header>
       <mat-divider></mat-divider>
       <mat-card-content #scrollMe id="log-content">
         <ul>
@@ -18,11 +20,16 @@
     </mat-card>
   </div>
 
-  <div fxFlex="33%" fxFlex.xs="auto" fxFlexOrder="2" fxFlexOrder.xs="1">
+  <div id="server-video" class="flex-item" fxFlexOrder="2" fxFlexOrder.xs="1">
     <mat-card id="video-loop">
+      <mat-card-header>
         <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>
+          <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-card-header>
       <mat-divider></mat-divider>
       <mat-card-content>
         <div id="mirrored-video">
@@ -30,19 +37,24 @@
             <div class="loader-1 center"><span></span></div>
           </div>
           <div *ngIf="session" id="tick-div">
-            <div id="tooltip-tick" *ngIf="testStatus=='PLAYING'" matTooltip="The connection is successful" matTooltipPosition="below"></div>
+            <div id="tooltip-tick" *ngIf="testStatus=='PLAYING'" matTooltip="The connection is successful"
+              matTooltipPosition="below"></div>
             <div [ngClass]="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="
+            <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>
-        <div id="msg-chain"><p *ngFor="let msg of msgChain">{{msg}}</p></div>
+        <div id="msg-chain">
+          <p *ngFor="let msg of msgChain">{{msg}}</p>
+        </div>
       </mat-card-content>
     </mat-card>
   </div>

openvidu-server/src/dashboard/src/styles.css

@@ -6,6 +6,7 @@ body {
   padding: 0;
   background: #4d4d4d;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
+  font-family: Roboto,Helvetica Neue,sans-serif;
 }
 
 main {

openvidu-server/src/dashboard/src/test.ts

@@ -14,7 +14,6 @@ import {
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
-declare var require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};
@@ -26,9 +25,5 @@ getTestBed().initTestEnvironment(
     teardown: { destroyAfterEach: false }
 }
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
 // Finally, start Karma to run the tests.
 __karma__.start();

openvidu-server/src/dashboard/src/tsconfig.spec.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "target": "es2020",
     "baseUrl": "",
     "types": [
       "jasmine",

openvidu-server/src/dashboard/tsconfig.json

@@ -8,13 +8,14 @@
     "declaration": false,
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "target": "es2020",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2016",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   }
 }