openvidu-components: Updated ports and configured urls

openvidu-components/openvidu-additional-panels/package.json

@@ -2,11 +2,10 @@
 	"name": "openvidu-additional-panels",
 	"version": "2.27.0",
 	"scripts": {
-    "ng": "ng",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
-    "start": "ng serve",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-additional-panels/src/app/app.component.ts

@@ -9,7 +9,6 @@ import {
 	ApiDirectiveModule,
 	OpenViduAngularDirectiveModule,
 } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
 
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton } from '@angular/material/button';
@@ -63,9 +62,10 @@ import { CommonModule } from '@angular/common';
 	],
 })
 export class AppComponent {
-	// Define the URL of the application server
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'additional-panels';
@@ -78,12 +78,35 @@ export class AppComponent {
 	constructor(
 		private httpClient: HttpClient,
 		private panelService: PanelService
-	) {}
+	) {
+		this.configureUrls();
+	}
 
 	ngOnInit() {
 		this.subscribeToPanelToggling();
 	}
 
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
+
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: any) {
 		const { token } = await this.getToken(this.roomName, participantName);
@@ -108,10 +131,10 @@ export class AppComponent {
 		try {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
-				this.httpClient.post<any>(
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
-					this.APPLICATION_SERVER_URL + 'token',
+					roomName,
-					{ roomName, participantName }
+					participantName,
-				)
+				})
 			);
 		} catch (error: any) {
 			// Handle errors, e.g., if the server is not reachable

openvidu-components/openvidu-additional-panels/src/environments/environment.prod.ts

@@ -1,4 +1,3 @@
 export const environment = {
 	production: true,
-  applicationServerUrl: '',
 };

openvidu-components/openvidu-additional-panels/src/environments/environment.ts

@@ -4,8 +4,6 @@
 
 export const environment = {
 	production: false,
-  applicationServerUrl: 'http://localhost:6080/',
-  livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-admin-dashboard/package.json

@@ -3,10 +3,10 @@
   "version": "2.27.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --port=5080 --host=0.0.0.0",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+    "build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
   },
   "private": true,
   "dependencies": {

openvidu-components/openvidu-custom-activities-panel/package.json

@@ -3,10 +3,10 @@
 	"version": "2.27.0",
 	"scripts": {
 		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts

@@ -1,40 +1,70 @@
-import { HttpClient } from "@angular/common/http";
+import { HttpClient } from '@angular/common/http';
-import { Component } from "@angular/core";
+import { Component } from '@angular/core';
-import { lastValueFrom } from "rxjs";
+import { lastValueFrom } from 'rxjs';
 import { environment } from 'src/environments/environment';
-import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
+import {
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 
 @Component({
-    selector: "app-root",
+	selector: 'app-root',
 	template: `
 		<ov-videoconference
 			[token]="token"
 			[livekitUrl]="LIVEKIT_URL"
 			[toolbarRecordingButton]="false"
 			[toolbarDisplayRoomName]="false"
-			(onTokenRequested)="onTokenRequested($event)">
+			(onTokenRequested)="onTokenRequested($event)"
-
+		>
 			<!-- Custom activities panel -->
 			<div *ovActivitiesPanel id="my-panel">
 				<h3>ACTIVITIES</h3>
-				<div>
+				<div>CUSTOM ACTIVITIES</div>
-					CUSTOM ACTIVITIES
-				</div>
 			</div>
 		</ov-videoconference>
 	`,
 	styleUrls: ['./app.component.scss'],
 	standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+	],
 })
 export class AppComponent {
-
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
-	roomName = "custom-activities-panel";
+	LIVEKIT_URL = '';
+	roomName = 'custom-activities-panel';
 	token!: string;
 
-	constructor(private httpClient: HttpClient) { }
+	constructor(private httpClient: HttpClient) {
+		this.configureUrls();
+	}
+
+	configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	async onTokenRequested(participantName: string) {
 		const { token } = await this.getToken(this.roomName, participantName);
@@ -43,10 +73,18 @@ export class AppComponent {
 
 	getToken(roomName: string, participantName: string): Promise<any> {
 		try {
-			return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', { roomName, participantName }));
+			return lastValueFrom(
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
+					roomName,
+					participantName,
+				})
+			);
 		} catch (error: any) {
 			if (error.status === 404) {
-				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+				throw {
+					status: error.status,
+					message: 'Cannot connect with backend. ' + error.url + ' not found',
+				};
 			}
 			throw error;
 		}

openvidu-components/openvidu-custom-activities-panel/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-  applicationServerUrl: '',
-  livekitUrl: ''
 };

openvidu-components/openvidu-custom-activities-panel/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-  applicationServerUrl: 'http://localhost:6080/',
-  livekitUrl: 'http://localhost:7880/'
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-chat-panel/package.json

@@ -3,10 +3,10 @@
 	"version": "2.27.0",
 	"scripts": {
 		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts

@@ -51,9 +51,10 @@ import { environment } from 'src/environments/environment';
 	],
 })
 export class AppComponent {
-	// Define the URL of the application server
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'chat-panel-directive-example';
@@ -63,7 +64,30 @@ export class AppComponent {
 	constructor(
 		private httpClient: HttpClient,
 		private participantService: ParticipantService
-	) {}
+	) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {
@@ -105,13 +129,10 @@ export class AppComponent {
 		try {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
-				this.httpClient.post<any>(
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
-					this.APPLICATION_SERVER_URL + 'token',
-					{
 					roomName,
 					participantName,
-					}
+				})
-				)
 			);
 		} catch (error: any) {
 			// Handle errors, e.g., if the server is not reachable

openvidu-components/openvidu-custom-chat-panel/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-custom-chat-panel/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-layout/package.json

@@ -3,10 +3,10 @@
 	"version": "2.27.0",
 	"scripts": {
 		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-custom-layout/src/app/app.component.ts

@@ -62,9 +62,10 @@ import { NgClass } from '@angular/common';
 	],
 })
 export class AppComponent implements OnInit, OnDestroy {
-	// Define the URL of the application server
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'custom-layout';
@@ -79,7 +80,30 @@ export class AppComponent implements OnInit, OnDestroy {
 	constructor(
 		private httpClient: HttpClient,
 		private participantService: ParticipantService
-	) {}
+	) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	ngOnInit() {
 		// Subscribe to participants' updates
@@ -118,13 +142,10 @@ export class AppComponent implements OnInit, OnDestroy {
 		try {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
-				this.httpClient.post<any>(
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
-					this.APPLICATION_SERVER_URL + 'token',
-					{
 					roomName,
 					participantName,
-					}
+				})
-				)
 			);
 		} catch (error: any) {
 			// Handle errors, e.g., if the server is not reachable

openvidu-components/openvidu-custom-layout/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-custom-layout/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-panels/package.json

@@ -3,10 +3,10 @@
 	"version": "2.27.0",
 	"scripts": {
 		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-custom-panels/src/app/app.component.ts

@@ -44,15 +44,39 @@ import {
 	],
 })
 export class AppComponent {
-	// Define the URL of the application server
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'custom-panels';
 	token!: string;
 
-	constructor(private httpClient: HttpClient) {}
+	constructor(private httpClient: HttpClient) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {

openvidu-components/openvidu-custom-panels/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-custom-panels/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-participant-panel-item-elements/package.json

@@ -3,10 +3,10 @@
 	"version": "2.27.0",
 	"scripts": {
 		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts

@@ -45,9 +45,10 @@ import { environment } from 'src/environments/environment';
 	],
 })
 export class AppComponent {
-	// Define the URL of the application server
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'participant-panel-item-elements';
@@ -59,7 +60,30 @@ export class AppComponent {
 	constructor(
 		private httpClient: HttpClient,
 		private openviduService: OpenViduService
-	) {}
+	) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {

openvidu-components/openvidu-custom-participant-panel-item-elements/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-custom-participant-panel-item-elements/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-participant-panel-item/package.json

@@ -3,10 +3,10 @@
 	"version": "2.27.0",
 	"scripts": {
 		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts

@@ -52,15 +52,39 @@ import {
 	],
 })
 export class AppComponent {
-	// Define the URL of the application server
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'participant-panel-item';
 	token!: string;
 
-	constructor(private httpClient: HttpClient) {}
+	constructor(private httpClient: HttpClient) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {

openvidu-components/openvidu-custom-participant-panel-item/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-custom-participant-panel-item/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-participants-panel/package.json

@@ -3,10 +3,10 @@
 	"version": "2.27.0",
 	"scripts": {
 		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts

@@ -42,9 +42,10 @@ import { environment } from 'src/environments/environment';
 	],
 })
 export class AppComponent implements OnInit, OnDestroy {
-	// Define the URL of the application server
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'custom-participants-panel';
@@ -59,7 +60,30 @@ export class AppComponent implements OnInit, OnDestroy {
 	constructor(
 		private httpClient: HttpClient,
 		private participantService: ParticipantService
-	) {}
+	) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Subscribes to updates for local and remote participants.
 	ngOnInit() {

openvidu-components/openvidu-custom-participants-panel/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-custom-participants-panel/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-stream/package.json

@@ -3,10 +3,10 @@
 	"version": "2.27.0",
 	"scripts": {
 		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-custom-stream/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 
-import { environment } from 'src/environments/environment';
 import {
 	OpenViduAngularModule,
 	ApiDirectiveModule,
@@ -37,15 +36,39 @@ import {
 	],
 })
 export class AppComponent {
-	// Define the URL of the application server
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'custom-stream';
 	token!: string;
 
-	constructor(private httpClient: HttpClient) {}
+	constructor(private httpClient: HttpClient) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {

openvidu-components/openvidu-custom-stream/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-custom-stream/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-toolbar/package.json

@@ -3,10 +3,10 @@
   "version": "2.27.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --port=5080 --host=0.0.0.0",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+    "build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
   },
   "private": true,
   "dependencies": {

openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts

@@ -32,9 +32,11 @@ import { environment } from 'src/environments/environment';
   ],
 })
 export class AppComponent {
-  // The URL of the application server.
+  // For local development, leave these variables empty
-  APPLICATION_SERVER_URL = environment.applicationServerUrl;
+  // For production, configure them with correct URLs depending on your deployment
-  LIVEKIT_URL = environment.livekitUrl;
+
+  APPLICATION_SERVER_URL = '';
+  LIVEKIT_URL = '';
   // The name of the room.
   roomName = 'custom-toolbar';
 
@@ -44,7 +46,30 @@ export class AppComponent {
   constructor(
     private httpClient: HttpClient,
     private participantService: ParticipantService
-  ) {}
+  ) {
+    this.configureUrls();
+  }
+
+  private configureUrls() {
+    // If APPLICATION_SERVER_URL is not configured, use default value from local development
+    if (!this.APPLICATION_SERVER_URL) {
+      if (window.location.hostname === 'localhost') {
+        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+      } else {
+        this.APPLICATION_SERVER_URL =
+          'https://' + window.location.hostname + ':6443/';
+      }
+    }
+
+    // If LIVEKIT_URL is not configured, use default value from local development
+    if (!this.LIVEKIT_URL) {
+      if (window.location.hostname === 'localhost') {
+        this.LIVEKIT_URL = 'ws://localhost:7880/';
+      } else {
+        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+      }
+    }
+  }
 
   // Called when a token is requested for a participant.
   async onTokenRequested(participantName: string) {

openvidu-components/openvidu-custom-toolbar/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-  applicationServerUrl: '',
-  livekitUrl: '',
 };

openvidu-components/openvidu-custom-toolbar/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-  applicationServerUrl: 'http://localhost:6080/',
-  livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-custom-ui/package.json

@@ -3,10 +3,10 @@
   "version": "2.27.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --port=5080 --host=0.0.0.0",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+    "build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
   },
   "private": true,
   "dependencies": {

openvidu-components/openvidu-custom-ui/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 
-import { environment } from 'src/environments/environment';
 import { OpenViduAngularModule, ApiDirectiveModule } from 'openvidu-angular';
 
 @Component({
@@ -14,9 +13,11 @@ import { OpenViduAngularModule, ApiDirectiveModule } from 'openvidu-angular';
   imports: [OpenViduAngularModule, ApiDirectiveModule],
 })
 export class AppComponent {
-  // The URL of the application server.
+  // For local development, leave these variables empty
-  APPLICATION_SERVER_URL = environment.applicationServerUrl;
+  // For production, configure them with correct URLs depending on your deployment
-  LIVEKIT_URL = environment.livekitUrl;
+
+  APPLICATION_SERVER_URL = '';
+  LIVEKIT_URL = '';
 
   // The name of the room to join.
   roomName = 'openvidu-custom-ui';
@@ -25,7 +26,30 @@ export class AppComponent {
   token!: string;
 
   // Creates a new instance of the AppComponent class.
-  constructor(private httpClient: HttpClient) {}
+  constructor(private httpClient: HttpClient) {
+    this.configureUrls();
+  }
+
+  private configureUrls() {
+    // If APPLICATION_SERVER_URL is not configured, use default value from local development
+    if (!this.APPLICATION_SERVER_URL) {
+      if (window.location.hostname === 'localhost') {
+        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+      } else {
+        this.APPLICATION_SERVER_URL =
+          'https://' + window.location.hostname + ':6443/';
+      }
+    }
+
+    // If LIVEKIT_URL is not configured, use default value from local development
+    if (!this.LIVEKIT_URL) {
+      if (window.location.hostname === 'localhost') {
+        this.LIVEKIT_URL = 'ws://localhost:7880/';
+      } else {
+        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+      }
+    }
+  }
 
   // Requests a token to join the room with the given participant name.
   async onTokenRequested(participantName: string) {

openvidu-components/openvidu-custom-ui/src/app/app.component.ts.bak

@@ -0,0 +1,55 @@
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
+
+import { environment } from 'src/environments/environment';
+import { OpenViduAngularModule, ApiDirectiveModule } from 'openvidu-angular';
+
+@Component({
+  selector: 'app-root',
+  template:
+    '<ov-videoconference [token]="token" [livekitUrl]="LIVEKIT_URL" (onTokenRequested)="onTokenRequested($event)"></ov-videoconference>',
+  styles: [''],
+  standalone: true,
+  imports: [OpenViduAngularModule, ApiDirectiveModule],
+})
+export class AppComponent {
+  // The URL of the application server.
+  APPLICATION_SERVER_URL = '';
+  LIVEKIT_URL = environment.livekitUrl;
+
+  // The name of the room to join.
+  roomName = 'openvidu-custom-ui';
+
+  // The token used to join the room.
+  token!: string;
+
+  // Creates a new instance of the AppComponent class.
+  constructor(private httpClient: HttpClient) {}
+
+  // Requests a token to join the room with the given participant name.
+  async onTokenRequested(participantName: string) {
+    const { token } = await this.getToken(this.roomName, participantName);
+    this.token = token;
+  }
+
+  // Retrieves a token to join the room with the given name and participant name.
+  getToken(roomName: string, participantName: string): Promise<any> {
+    try {
+      return lastValueFrom(
+        this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
+          roomName,
+          participantName,
+        })
+      );
+    } catch (error: any) {
+      if (error.status === 404) {
+        throw {
+          status: error.status,
+          message: 'Cannot connect with backend. ' + error.url + ' not found',
+        };
+      }
+      throw error;
+    }
+  }
+}

openvidu-components/openvidu-custom-ui/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-  applicationServerUrl: '',
-  livekitUrl: '',
 };

openvidu-components/openvidu-custom-ui/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-  applicationServerUrl: 'http://localhost:6080/',
-  livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-toggle-hand/package.json

@@ -2,10 +2,9 @@
 	"name": "openvidu-toggle-hand",
 	"version": "2.27.0",
 	"scripts": {
-    "ng": "ng",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
-    "start": "ng serve --configuration development",
 		"build": "ng build",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-toggle-hand/src/app/app.component.ts

@@ -45,9 +45,11 @@ enum DataTopicApp {
 	imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatIcon]
 })
 export class AppComponent {
-	// The URL of the application server.
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// The token used to connect to the OpenVidu session.
 	token!: string;
@@ -58,7 +60,29 @@ export class AppComponent {
 	// The name of the OpenVidu room.
 	private roomName = 'openvidu-toggle-hand';
 
-	constructor(private httpClient: HttpClient, private participantService: ParticipantService) {}
+	constructor(private httpClient: HttpClient, private participantService: ParticipantService) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Requests a token from the application server for the given participant name.
 	async onTokenRequested(participantName: string) {

openvidu-components/openvidu-toggle-hand/src/app/app.component.ts.bak

@@ -0,0 +1,113 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
+
+import {
+	DataPacket_Kind,
+	DataPublishOptions,
+	ParticipantService,
+	RemoteParticipant,
+	Room,
+	RoomEvent,
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule
+} from 'openvidu-angular';
+import { ParticipantAppModel } from './models/participant-app.model';
+
+import { environment } from 'src/environments/environment';
+
+import { MatIcon } from '@angular/material/icon';
+import { MatIconButton } from '@angular/material/button';
+
+enum DataTopicApp {
+	HAND_TOGGLE = 'handToggle'
+}
+
+@Component({
+	selector: 'app-root',
+	templateUrl: './app.component.html',
+	styleUrls: ['./app.component.css'],
+	animations: [
+		trigger('inOutHandAnimation', [
+			transition(':enter', [
+				style({ opacity: 0, transform: 'translateY(-100%)' }),
+				animate('300ms ease-in-out', style({ opacity: 1, transform: 'translateY(0)' }))
+			]),
+			transition(':leave', [
+				style({ opacity: 1, transform: 'translateY(0)' }),
+				animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-100%)' }))
+			])
+		])
+	],
+	standalone: true,
+	imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatIcon]
+})
+export class AppComponent {
+	// The URL of the application server.
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = environment.livekitUrl;
+
+	// The token used to connect to the OpenVidu session.
+	token!: string;
+
+	// Whether the local participant has raised their hand.
+	hasHandRaised: boolean = false;
+
+	// The name of the OpenVidu room.
+	private roomName = 'openvidu-toggle-hand';
+
+	constructor(private httpClient: HttpClient, private participantService: ParticipantService) {}
+
+	// Requests a token from the application server for the given participant name.
+	async onTokenRequested(participantName: string) {
+		const { token } = await this.getToken(this.roomName, participantName);
+		this.token = token;
+	}
+
+	// Handles the reception of a remote hand-raising event.
+	handleRemoteHand(room: Room) {
+		// Subscribe to hand toggling events from other participants
+		room.on(RoomEvent.DataReceived, (payload: Uint8Array, participant?: RemoteParticipant, _?: DataPacket_Kind, topic?: string) => {
+			if (topic === DataTopicApp.HAND_TOGGLE) {
+				const p = this.participantService.getRemoteParticipantBySid(participant.sid);
+				if (p) {
+					(<ParticipantAppModel>p).toggleHandRaised();
+				}
+				this.participantService.updateRemoteParticipants();
+			}
+		});
+	}
+
+	// Handles the local hand-raising event.
+	async handleLocalHand() {
+		// Get local participant with ParticipantService
+		const participant = <ParticipantAppModel>this.participantService.getLocalParticipant();
+
+		// Toggle the participant hand with the method we wil add in our ParticipantAppModel
+		participant.toggleHandRaised();
+
+		// Refresh the local participant object for others component and services
+		this.participantService.updateLocalParticipant();
+
+		// Send a signal with the new value to others participant using the openvidu-browser signal
+		const strData = JSON.stringify({});
+		const data: Uint8Array = new TextEncoder().encode(strData);
+		const options: DataPublishOptions = { topic: DataTopicApp.HAND_TOGGLE };
+
+		await this.participantService.publishData(data, options);
+	}
+
+	// Requests a token from the application server for the given room and participant names.
+	getToken(roomName: string, participantName: string): Promise<any> {
+		try {
+			return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', { roomName, participantName }));
+		} catch (error: any) {
+			if (error.status === 404) {
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+			}
+			throw error;
+		}
+	}
+}

openvidu-components/openvidu-toggle-hand/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: ''
 };

openvidu-components/openvidu-toggle-hand/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/'
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-toolbar-buttons/package.json

@@ -2,11 +2,10 @@
 	"name": "openvidu-toolbar-buttons",
 	"version": "2.27.0",
 	"scripts": {
-    "ng": "ng",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
-    "start": "ng serve",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts

@@ -41,9 +41,11 @@ import { MatIconButton } from '@angular/material/button';
 	],
 })
 export class AppComponent {
-	// The URL of the application server.
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// The name of the room for the video conference.
 	roomName = 'toolbar-additionalbtn';
@@ -54,7 +56,30 @@ export class AppComponent {
 	constructor(
 		private httpClient: HttpClient,
 		private participantService: ParticipantService
-	) {}
+	) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Called when the token is requested.
 	async onTokenRequested(participantName: string) {

openvidu-components/openvidu-toolbar-buttons/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-toolbar-buttons/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

openvidu-components/openvidu-toolbar-panel-buttons/package.json

@@ -2,11 +2,10 @@
 	"name": "openvidu-toolbar-panel-buttons",
 	"version": "2.27.0",
 	"scripts": {
-    "ng": "ng",
+		"start": "ng serve --port=5080 --host=0.0.0.0",
-    "start": "ng serve",
 		"build": "ng build",
 		"watch": "ng build --watch --configuration development",
-    "build:prod": "./node_modules/@angular/cli/bin/ng.js build --output-path ./openvidu-basic-node/public/ --configuration production"
+		"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
 	},
 	"private": true,
 	"dependencies": {

openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts

@@ -32,9 +32,11 @@ import {
 	],
 })
 export class AppComponent {
-	// Set the application server URL from the environment variables
+	// For local development, leave these variables empty
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// For production, configure them with correct URLs depending on your deployment
-	LIVEKIT_URL = environment.livekitUrl;
+
+	APPLICATION_SERVER_URL = '';
+	LIVEKIT_URL = '';
 
 	// Set the room name
 	roomName = 'toolbar-additional-panel-btn';
@@ -42,7 +44,30 @@ export class AppComponent {
 	// Initialize the token variable
 	token!: string;
 
-	constructor(private httpClient: HttpClient) {}
+	constructor(private httpClient: HttpClient) {
+		this.configureUrls();
+	}
+
+	private configureUrls() {
+		// If APPLICATION_SERVER_URL is not configured, use default value from local development
+		if (!this.APPLICATION_SERVER_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
+			} else {
+				this.APPLICATION_SERVER_URL =
+					'https://' + window.location.hostname + ':6443/';
+			}
+		}
+
+		// If LIVEKIT_URL is not configured, use default value from local development
+		if (!this.LIVEKIT_URL) {
+			if (window.location.hostname === 'localhost') {
+				this.LIVEKIT_URL = 'ws://localhost:7880/';
+			} else {
+				this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+			}
+		}
+	}
 
 	// Method to request a token for a participant
 	async onTokenRequested(participantName: string) {

openvidu-components/openvidu-toolbar-panel-buttons/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
 export const environment = {
 	production: true,
-	applicationServerUrl: '',
-	livekitUrl: '',
 };

openvidu-components/openvidu-toolbar-panel-buttons/src/environments/environment.ts

@@ -1,18 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
 	production: false,
-	applicationServerUrl: 'http://localhost:6080/',
-	livekitUrl: 'http://localhost:7880/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.