openvidu-testapp: update to Angular 19

openvidu-testapp/package.json

@@ -11,16 +11,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.13",
+    "@angular/animations": "^19.1.6",
     "@angular/cdk": "^18.2.14",
-    "@angular/common": "^18.2.13",
+    "@angular/common": "^19.1.6",
-    "@angular/compiler": "^18.2.13",
+    "@angular/compiler": "^19.1.6",
-    "@angular/core": "^18.2.13",
+    "@angular/core": "^19.1.6",
-    "@angular/forms": "^18.2.13",
+    "@angular/forms": "^19.1.6",
     "@angular/material": "^18.2.14",
-    "@angular/platform-browser": "^18.2.13",
+    "@angular/platform-browser": "^19.1.6",
-    "@angular/platform-browser-dynamic": "^18.2.13",
+    "@angular/platform-browser-dynamic": "^19.1.6",
-    "@angular/router": "^18.2.13",
+    "@angular/router": "^19.1.6",
     "@livekit/protocol": "1.29.2",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
@@ -32,12 +32,12 @@
     "stream-browserify": "^3.0.0",
     "tslib": "^2.6.2",
     "util": "^0.12.5",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.14",
+    "@angular-devkit/build-angular": "^19.1.7",
-    "@angular/cli": "~18.2.14",
+    "@angular/cli": "~19.1.7",
-    "@angular/compiler-cli": "^18.2.13",
+    "@angular/compiler-cli": "^19.1.6",
     "@types/events": "^3.0.2",
     "@types/jasmine": "~5.1.1",
     "@types/json-stringify-safe": "^5.0.2",
@@ -49,6 +49,6 @@
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "5.4.5"
+    "typescript": "5.7.3"
   }
 }

openvidu-testapp/src/app/app.component.ts

@@ -4,9 +4,10 @@ import { LogLevel, setLogLevel } from 'livekit-client';
 import { LivekitParamsService } from './services/livekit-params.service';
 
 @Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  templateUrl: './app.component.html',
+    templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+    styleUrls: ['./app.component.css'],
+    standalone: false
 })
 export class AppComponent {
   livekitUrl = 'ws://localhost:7880/'; // `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://localhost:1880/`;

openvidu-testapp/src/app/components/audio-track/audio-track.component.ts

@@ -3,9 +3,10 @@ import { LocalTrack } from 'livekit-client';
 import { TrackComponent } from '../track/track.component';
 
 @Component({
-  selector: 'app-audio-track',
+    selector: 'app-audio-track',
-  templateUrl: './audio-track.component.html',
+    templateUrl: './audio-track.component.html',
-  styleUrls: ['./audio-track.component.css'],
+    styleUrls: ['./audio-track.component.css'],
+    standalone: false
 })
 export class AudioTrackComponent extends TrackComponent {
   muteAudioIcon: string = 'mic';

openvidu-testapp/src/app/components/dialogs/events-dialog/events-dialog.component.ts

@@ -41,7 +41,8 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
         'mat-divider { margin-top: 5px; margin-bottom: 5px; }',
         '.col-50 {flex-basis: 50%; box-sizing: border-box; padding-left: 20px; }',
         '.toggle { }'
-    ]
+    ],
+    standalone: false
 })
 export class EventsDialogComponent {
 

openvidu-testapp/src/app/components/dialogs/info-dialog/info-dialog.component.ts

@@ -4,9 +4,10 @@ import { take } from 'rxjs/operators';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
-  selector: 'app-info-dialog',
+    selector: 'app-info-dialog',
-  templateUrl: './info-dialog.component.html',
+    templateUrl: './info-dialog.component.html',
-  styleUrls: ['./info-dialog.component.css'],
+    styleUrls: ['./info-dialog.component.css'],
+    standalone: false
 })
 export class InfoDialogComponent implements OnDestroy {
   title: string;

openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.ts

@@ -13,9 +13,10 @@ import {
 } from 'livekit-client';
 
 @Component({
-  selector: 'app-options-dialog',
+    selector: 'app-options-dialog',
-  templateUrl: './options-dialog.component.html',
+    templateUrl: './options-dialog.component.html',
-  styleUrls: ['./options-dialog.component.css'],
+    styleUrls: ['./options-dialog.component.css'],
+    standalone: false
 })
 export class OptionsDialogComponent {
   roomOptions?: RoomOptions;

openvidu-testapp/src/app/components/dialogs/options-dialog/video-resolution/video-resolution.component.ts

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-  selector: 'app-video-resolution',
+    selector: 'app-video-resolution',
-  templateUrl: './video-resolution.component.html',
+    templateUrl: './video-resolution.component.html',
-  styleUrls: ['./video-resolution.component.css'],
+    styleUrls: ['./video-resolution.component.css'],
+    standalone: false
 })
 export class VideoResolutionComponent {
   @Input() componentId: string;

openvidu-testapp/src/app/components/dialogs/room-api-dialog/room-api-dialog.component.ts

@@ -27,9 +27,10 @@ import {
 } from 'src/app/services/room-api.service';
 
 @Component({
-  selector: 'app-room-api-dialog',
+    selector: 'app-room-api-dialog',
-  templateUrl: './room-api-dialog.component.html',
+    templateUrl: './room-api-dialog.component.html',
-  styleUrls: ['./room-api-dialog.component.css'],
+    styleUrls: ['./room-api-dialog.component.css'],
+    standalone: false
 })
 export class RoomApiDialogComponent {
   room: Room;

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts

@@ -47,9 +47,10 @@ import PCTransport from 'livekit-client/dist/src/room/PCTransport';
 import { InfoDialogComponent } from '../dialogs/info-dialog/info-dialog.component';
 
 @Component({
-  selector: 'app-openvidu-instance',
+    selector: 'app-openvidu-instance',
-  templateUrl: './openvidu-instance.component.html',
+    templateUrl: './openvidu-instance.component.html',
-  styleUrls: ['./openvidu-instance.component.css'],
+    styleUrls: ['./openvidu-instance.component.css'],
+    standalone: false
 })
 export class OpenviduInstanceComponent {
   @Input()

openvidu-testapp/src/app/components/participant/participant.component.ts

@@ -35,9 +35,10 @@ import {
 import { OptionsDialogComponent } from '../dialogs/options-dialog/options-dialog.component';
 
 @Component({
-  selector: 'app-participant',
+    selector: 'app-participant',
-  templateUrl: './participant.component.html',
+    templateUrl: './participant.component.html',
-  styleUrls: ['./participant.component.css'],
+    styleUrls: ['./participant.component.css'],
+    standalone: false
 })
 export class ParticipantComponent {
   @Input()

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.ts

@@ -39,9 +39,10 @@ export interface User {
 }
 
 @Component({
-  selector: 'app-test-scenarios',
+    selector: 'app-test-scenarios',
-  templateUrl: './test-scenarios.component.html',
+    templateUrl: './test-scenarios.component.html',
-  styleUrls: ['./test-scenarios.component.css'],
+    styleUrls: ['./test-scenarios.component.css'],
+    standalone: false
 })
 export class TestScenariosComponent implements OnInit, OnDestroy {
   fixedRoomId = 'SCENARIO_TEST';

openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts

@@ -11,17 +11,18 @@ export interface RoomConf {
 }
 
 @Component({
-  selector: 'app-test-sessions',
+    selector: 'app-test-sessions',
-  templateUrl: './test-sessions.component.html',
+    templateUrl: './test-sessions.component.html',
-  styleUrls: ['./test-sessions.component.css'],
+    styleUrls: ['./test-sessions.component.css'],
-  animations: [
+    animations: [
-    trigger('fadeAnimation', [
+        trigger('fadeAnimation', [
-      transition(':enter', [
+            transition(':enter', [
-        style({ opacity: 0 }),
+                style({ opacity: 0 }),
-        animate('100ms', style({ opacity: 1 })),
+                animate('100ms', style({ opacity: 1 })),
-      ]),
+            ]),
-    ]),
+        ]),
-  ],
+    ],
+    standalone: false
 })
 export class TestSessionsComponent {
   eventsInfoSubscription: Subscription;

openvidu-testapp/src/app/components/track/track.component.ts

@@ -24,9 +24,10 @@ import {
 } from 'src/app/services/test-feed.service';
 
 @Component({
-  selector: 'app-track',
+    selector: 'app-track',
-  template: '',
+    template: '',
-  styleUrls: [],
+    styleUrls: [],
+    standalone: false
 })
 export class TrackComponent {
   @Output()

openvidu-testapp/src/app/components/users-table/table-video.component.ts

@@ -8,17 +8,18 @@ import {
 import { AudioTrack, VideoTrack } from 'livekit-client';
 
 @Component({
-  selector: 'app-table-video',
+    selector: 'app-table-video',
-  template: `
+    template: `
     <video #mediaElement [id]="videoId" autoplay playsinline></video>
   `,
-  styles: [
+    styles: [
-    `
+        `
       video {
         width: 100px;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class TableVideoComponent implements AfterViewInit {
   @ViewChild('mediaElement') elementRef: ElementRef;

openvidu-testapp/src/app/components/users-table/users-table.component.ts

@@ -3,9 +3,10 @@ import { AudioTrack, VideoTrack } from 'livekit-client';
 import { User } from '../test-scenarios/test-scenarios.component';
 
 @Component({
-  selector: 'app-users-table',
+    selector: 'app-users-table',
-  styleUrls: ['users-table.component.css'],
+    styleUrls: ['users-table.component.css'],
-  templateUrl: 'users-table.component.html',
+    templateUrl: 'users-table.component.html',
+    standalone: false
 })
 export class UsersTableComponent {
   @Input() users: User[] = [];

openvidu-testapp/src/app/components/video-track/video-track.component.ts

@@ -11,9 +11,10 @@ import { TestFeedService } from 'src/app/services/test-feed.service';
 import { InfoDialogComponent } from '../dialogs/info-dialog/info-dialog.component';
 
 @Component({
-  selector: 'app-video-track',
+    selector: 'app-video-track',
-  templateUrl: './video-track.component.html',
+    templateUrl: './video-track.component.html',
-  styleUrls: ['./video-track.component.css'],
+    styleUrls: ['./video-track.component.css'],
+    standalone: false
 })
 export class VideoTrackComponent extends TrackComponent {
   muteVideoIcon: string = 'videocam';

openvidu-testapp/src/app/pipes/callback.pipe.ts

@@ -1,8 +1,9 @@
 import { PipeTransform, Pipe } from '@angular/core';
 
 @Pipe({
-  name: 'callback',
+    name: 'callback',
-  pure: false,
+    pure: false,
+    standalone: false
 })
 export class CallbackPipe implements PipeTransform {
   transform(items: any[], callback: (item: any) => boolean): any {