openvidu-components: Updated server url and used livekit url parameter

README.md

@@ -1 +0,0 @@
-# LiveKit Tutorials

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

@@ -2,61 +2,70 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 
-import { PanelStatusInfo, PanelService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from 'openvidu-angular';
+import {
+	PanelStatusInfo,
+	PanelService,
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
 
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
 
 @Component({
-    selector: 'app-root',
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- OpenVidu Video Conference Component -->
 		<ov-videoconference
-		  [token]="token"
-		  [toolbarDisplaySessionName]="false"
-		  (onTokenRequested)="onTokenRequested($event)"
-		  >
-		  <!-- Additional Toolbar Buttons -->
-		  <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
-		    <button mat-icon-button (click)="toggleMyPanel('my-panel1')">
-		      <mat-icon>360</mat-icon>
-		    </button>
-		    <button mat-icon-button (click)="toggleMyPanel('my-panel2')">
-		      <mat-icon>star</mat-icon>
-		    </button>
-		  </div>
-		
-		  <!-- Additional Panels -->
-		  <div *ovAdditionalPanels id="my-panels">
-		    @if (showExternalPanel) {
-		      <div id="my-panel1">
-		        <h2>NEW PANEL 1</h2>
-		        <p>This is my new additional panel</p>
-		      </div>
-		    }
-		    @if (showExternalPanel2) {
-		      <div id="my-panel2">
-		        <h2>NEW PANEL 2</h2>
-		        <p>This is another new panel</p>
-		      </div>
-		    }
-		  </div>
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			[toolbarDisplayRoomName]="false"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
+			<!-- Additional Toolbar Buttons -->
+			<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
+				<button mat-icon-button (click)="toggleMyPanel('my-panel1')">
+					<mat-icon>360</mat-icon>
+				</button>
+				<button mat-icon-button (click)="toggleMyPanel('my-panel2')">
+					<mat-icon>star</mat-icon>
+				</button>
+			</div>
+
+			<!-- Additional Panels -->
+			<div *ovAdditionalPanels id="my-panels">
+				@if (showExternalPanel) {
+				<div id="my-panel1">
+					<h2>NEW PANEL 1</h2>
+					<p>This is my new additional panel</p>
+				</div>
+				} @if (showExternalPanel2) {
+				<div id="my-panel2">
+					<h2>NEW PANEL 2</h2>
+					<p>This is another new panel</p>
+				</div>
+				}
+			</div>
 		</ov-videoconference>
-		`,
-    styleUrls: ['./app.component.scss'],
-    standalone: true,
-    imports: [
-    OpenViduAngularModule,
-    ApiDirectiveModule,
-    OpenViduAngularDirectiveModule,
-    MatIconButton,
-    MatIcon
-],
+	`,
+	styleUrls: ['./app.component.scss'],
+	standalone: true,
+	imports: [
+		CommonModule,
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+		MatIconButton,
+		MatIcon,
+	],
 })
 export class AppComponent {
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'additional-panels';
@@ -76,7 +85,7 @@ export class AppComponent {
 	}
 
 	// Function to request a token when a participant joins the room
-	async onTokenRequested(participantName: string) {
+	async onTokenRequested(participantName: any) {
 		const { token } = await this.getToken(this.roomName, participantName);
 		this.token = token;
 	}
@@ -100,7 +109,7 @@ export class AppComponent {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
 				this.httpClient.post<any>(
-					this.APPLICATION_SERVER_URL + 'api/sessions',
+					this.APPLICATION_SERVER_URL + 'token',
 					{ roomName, participantName }
 				)
 			);

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

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

openvidu-components/openvidu-additional-panels/src/main.ts

@@ -1,32 +1,26 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
-import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
+import {
+	withInterceptorsFromDi,
+	provideHttpClient,
+} from '@angular/common/http';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations(),
-        provideHttpClient(withInterceptorsFromDi())
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+		provideHttpClient(withInterceptorsFromDi()),
+	],
+}).catch((err) => console.error(err));

openvidu-components/openvidu-admin-dashboard/src/app/app.component.ts

@@ -1,39 +1,60 @@
-import { Component } from "@angular/core";
-import { RecordingInfo, OpenViduAngularModule, ApiDirectiveModule } from "openvidu-angular";
-
+import { Component } from '@angular/core';
+import {
+	RecordingInfo,
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	RecordingStatus,
+	RecordingOutputMode,
+	RecordingDeleteRequestedEvent,
+} from 'openvidu-angular';
 
 @Component({
-    selector: "app-root",
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- Reference documentation: https://docs.openvidu.io/en/stable/api/openvidu-angular/components/AdminLoginComponent.html -->
 		@if (!logged) {
-		  <ov-admin-login
-		    (onLoginButtonClicked)="onLoginClicked($event)"
-		  ></ov-admin-login>
+		<ov-admin-login
+			(onLoginRequested)="onLoginClicked($event)"
+		></ov-admin-login>
 		}
-		
+
 		<!-- Reference documentation: https://docs.openvidu.io/en/stable/api/openvidu-angular/components/AdminDashboardComponent.html -->
 		@if (logged) {
-		  <ov-admin-dashboard
-		    [recordingsList]="recordings"
-		    (onLogoutClicked)="onLogoutClicked()"
-		    (onRefreshRecordingsClicked)="onRefreshRecordingsClicked()"
-		    (onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
-		  ></ov-admin-dashboard>
+		<ov-admin-dashboard
+			[recordingsList]="recordings"
+			(onLogoutRequested)="onLogoutClicked()"
+			(onRefreshRecordingsRequested)="onRefreshRecordingsClicked()"
+			(onLoadMoreRecordingsRequested)="onLoadMoreRecordingsRequested()"
+			(onRecordingDeleteRequested)="onDeleteRecordingClicked($event)"
+		></ov-admin-dashboard>
 		}
-		`,
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule]
+	`,
+	standalone: true,
+	imports: [OpenViduAngularModule, ApiDirectiveModule],
 })
 export class AppComponent {
-	title = "openvidu-admin-dashboard";
+	title = 'openvidu-admin-dashboard';
 	logged: boolean = false;
-	recordings: RecordingInfo[] = [];
+	recordings: RecordingInfo[] = [
+		{
+			id: 'recording1',
+			roomName: this.title,
+			roomId: 'roomId1',
+			outputMode: RecordingOutputMode.COMPOSED,
+			status: RecordingStatus.READY,
+			filename: 'sampleRecording.mp4',
+			startedAt: new Date().getTime(),
+			endedAt: new Date().getTime(),
+			duration: 0,
+			size: 100,
+			location: 'http://localhost:8080/recordings/recording1',
+		},
+	];
 
 	constructor() {}
 
-	onLoginClicked(password: string) {
-		console.log(`Loggin button clicked ${password}`);
+	onLoginClicked(credentials: { username: string; password: string }) {
+		console.log(`Loggin button clicked ${credentials}`);
 		/**
 		 * WARNING! This code is developed for didactic purposes only.
 		 * The authentication process should be done in the server side.
@@ -42,7 +63,7 @@ export class AppComponent {
 	}
 
 	onLogoutClicked() {
-		console.log("Logout button clicked");
+		console.log('Logout button clicked');
 		/**
 		 * WARNING! This code is developed for didactic purposes only.
 		 * The authentication process should be done in the server side.
@@ -51,10 +72,34 @@ export class AppComponent {
 	}
 
 	onRefreshRecordingsClicked() {
-		console.log("Refresh recording clicked");
+		console.log('Refresh recording clicked');
+		/**
+		 * WARNING! This code is developed for didactic purposes only.
+		 * The authentication process should be done in the server side.
+		 **/
+		// Getting the recordings from the server
+		this.recordings = [
+			{
+				id: 'recording2',
+				roomName: this.title,
+				roomId: 'roomId2',
+				outputMode: RecordingOutputMode.COMPOSED,
+				status: RecordingStatus.READY,
+				filename: 'sampleRecording2.mp4',
+				startedAt: new Date().getTime(),
+				endedAt: new Date().getTime(),
+				duration: 0,
+				size: 100,
+				location: 'http://localhost:8080/recordings/recording2',
+			},
+		];
 	}
 
-	onDeleteRecordingClicked(recordingId: string) {
-		console.log(`Delete recording clicked ${recordingId}`);
+	onLoadMoreRecordingsRequested() {
+		console.log('Load more recordings clicked');
+	}
+
+	onDeleteRecordingClicked(recording: RecordingDeleteRequestedEvent) {
+		console.log(`Delete recording clicked ${recording.recordingId}`);
 	}
 }

openvidu-components/openvidu-admin-dashboard/src/main.ts

@@ -1,10 +1,6 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';

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

@@ -9,8 +9,9 @@ import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModu
     template: `
 		<ov-videoconference
 			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
 			[toolbarRecordingButton]="false"
-			[toolbarDisplaySessionName]="false"
+			[toolbarDisplayRoomName]="false"
 			(onTokenRequested)="onTokenRequested($event)">
 
 			<!-- Custom activities panel -->
@@ -29,6 +30,7 @@ import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModu
 export class AppComponent {
 
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
 	roomName = "custom-activities-panel";
 	token!: string;
 
@@ -41,7 +43,7 @@ export class AppComponent {
 
 	getToken(roomName: string, participantName: string): Promise<any> {
 		try {
-			return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { 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' };

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

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

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

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

openvidu-components/openvidu-custom-activities-panel/src/main.ts

@@ -1,10 +1,6 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';

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

@@ -1,53 +1,69 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
 
-import { DataPacket_Kind, DataPublishOptions, DataTopic, ParticipantService, RemoteParticipant, Room, RoomEvent, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
+import {
+	DataPacket_Kind,
+	DataPublishOptions,
+	DataTopic,
+	ParticipantService,
+	RemoteParticipant,
+	Room,
+	RoomEvent,
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
 
-
 @Component({
-    selector: 'app-root',
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- OpenVidu Video Conference Component -->
 		<ov-videoconference
-		  (onRoomCreated)="onRoomCreated($event)"
-		  [token]="token"
-		  [toolbarDisplaySessionName]="false"
-		  (onTokenRequested)="onTokenRequested($event)"
-		  >
-		  <!-- Chat Panel -->
-		  <div *ovChatPanel id="my-panel">
-		    <h3>Chat</h3>
-		    <div>
-		      <ul>
-		        @for (msg of messages; track msg) {
-		          <li>{{ msg }}</li>
-		        }
-		      </ul>
-		    </div>
-		    <input value="Hello" #input />
-		    <button (click)="send(input.value)">Send</button>
-		  </div>
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			[toolbarDisplayRoomName]="false"
+			(onTokenRequested)="onTokenRequested($event)"
+			(onRoomCreated)="onRoomCreated($event)"
+		>
+			<!-- Chat Panel -->
+			<div *ovChatPanel id="my-panel">
+				<h3>Chat</h3>
+				<div>
+					<ul>
+						@for (msg of messages; track msg) {
+						<li>{{ msg }}</li>
+						}
+					</ul>
+				</div>
+				<input value="Hello" #input />
+				<button (click)="send(input.value)">Send</button>
+			</div>
 		</ov-videoconference>
-		`,
-    styleUrls: ['./app.component.scss'],
-    standalone: true,
-    imports: [
-    OpenViduAngularModule,
-    ApiDirectiveModule,
-    OpenViduAngularDirectiveModule
-],
+	`,
+	styleUrls: ['./app.component.scss'],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+	],
 })
 export class AppComponent {
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
+
 	// Define the name of the room and initialize the token variable
 	roomName = 'chat-panel-directive-example';
 	token!: string;
 	messages: string[] = [];
 
-	constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
+	constructor(
+		private httpClient: HttpClient,
+		private participantService: ParticipantService
+	) {}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {
@@ -89,20 +105,24 @@ export class AppComponent {
 		try {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
-				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
-					roomName,
-					participantName,
-				})
+				this.httpClient.post<any>(
+					this.APPLICATION_SERVER_URL + 'token',
+					{
+						roomName,
+						participantName,
+					}
+				)
 			);
 		} catch (error: any) {
 			// Handle errors, e.g., if the server is not reachable
 			if (error.status === 404) {
 				throw {
 					status: error.status,
-					message: 'Cannot connect with the backend. ' + error.url + ' not found',
+					message:
+						'Cannot connect with the backend. ' + error.url + ' not found',
 				};
 			}
 			throw error;
 		}
 	}
-}
+}

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

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-custom-chat-panel/src/main.ts

@@ -1,28 +1,22 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
+
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,54 +1,70 @@
-import { HttpClient } from "@angular/common/http";
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { lastValueFrom, Subscription } from "rxjs";
-import { ParticipantModel, ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
+import { HttpClient } from '@angular/common/http';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { lastValueFrom, Subscription } from 'rxjs';
+import {
+	ParticipantModel,
+	ParticipantService,
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
-import { NgClass } from "@angular/common";
+import { NgClass } from '@angular/common';
 
 @Component({
-    selector: 'app-root',
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- OpenVidu Video Conference Component -->
 		<ov-videoconference
-		  [token]="token"
-		  (onTokenRequested)="onTokenRequested($event)"
-		  >
-		  <!-- Custom Layout for Video Streams -->
-		  <div *ovLayout>
-		    <div class="container">
-		      <!-- Local Participant's Tracks -->
-		      @for (track of localParticipant.tracks; track track) {
-		        <div class="item"
-		          [ngClass]="{'hidden': track.isAudioTrack && !track.participant.onlyHasAudioTracks}"
-		          >
-		          <ov-stream [track]="track"></ov-stream>
-		        </div>
-		      }
-		
-		      <!-- Remote Participants' Tracks -->
-		      @for (track of remoteParticipants | tracks; track track) {
-		        <div class="item"
-		          [ngClass]="{'hidden': track.isAudioTrack && !track.participant.onlyHasAudioTracks}"
-		          >
-		          <ov-stream [track]="track"></ov-stream>
-		        </div>
-		      }
-		    </div>
-		  </div>
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
+			<!-- Custom Layout for Video Streams -->
+			<div *ovLayout>
+				<div class="container">
+					<!-- Local Participant's Tracks -->
+					@for (track of localParticipant.tracks; track track) {
+					<div
+						class="item"
+						[ngClass]="{
+							hidden:
+								track.isAudioTrack && !track.participant.onlyHasAudioTracks
+						}"
+					>
+						<ov-stream [track]="track"></ov-stream>
+					</div>
+					}
+
+					<!-- Remote Participants' Tracks -->
+					@for (track of remoteParticipants | tracks; track track) {
+					<div
+						class="item"
+						[ngClass]="{
+							hidden:
+								track.isAudioTrack && !track.participant.onlyHasAudioTracks
+						}"
+					>
+						<ov-stream [track]="track"></ov-stream>
+					</div>
+					}
+				</div>
+			</div>
 		</ov-videoconference>
-		`,
-    styleUrls: ['./app.component.scss'],
-    standalone: true,
-    imports: [
-    OpenViduAngularModule,
-    ApiDirectiveModule,
-    OpenViduAngularDirectiveModule,
-    NgClass
-],
+	`,
+	styleUrls: ['./app.component.scss'],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+		NgClass,
+	],
 })
 export class AppComponent implements OnInit, OnDestroy {
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'custom-layout';
@@ -63,7 +79,7 @@ export class AppComponent implements OnInit, OnDestroy {
 	constructor(
 		private httpClient: HttpClient,
 		private participantService: ParticipantService
-	) { }
+	) {}
 
 	ngOnInit() {
 		// Subscribe to participants' updates
@@ -84,15 +100,17 @@ export class AppComponent implements OnInit, OnDestroy {
 
 	// Subscribe to updates for local and remote participants
 	subscribeToParticipants() {
-		this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
-			if (p) this.localParticipant = p;
-		});
+		this.localParticipantSubs =
+			this.participantService.localParticipantObs.subscribe((p) => {
+				if (p) this.localParticipant = p;
+			});
 
-		this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe(
-			(participants) => {
-				this.remoteParticipants = participants;
-			}
-		);
+		this.remoteParticipantsSubs =
+			this.participantService.remoteParticipantsObs.subscribe(
+				(participants) => {
+					this.remoteParticipants = participants;
+				}
+			);
 	}
 
 	// Function to get a token from the server
@@ -100,20 +118,24 @@ 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.APPLICATION_SERVER_URL + 'api/sessions', {
-					roomName,
-					participantName,
-				})
+				this.httpClient.post<any>(
+					this.APPLICATION_SERVER_URL + 'token',
+					{
+						roomName,
+						participantName,
+					}
+				)
 			);
 		} catch (error: any) {
 			// Handle errors, e.g., if the server is not reachable
 			if (error.status === 404) {
 				throw {
 					status: error.status,
-					message: 'Cannot connect with the backend. ' + error.url + ' not found',
+					message:
+						'Cannot connect with the backend. ' + error.url + ' not found',
 				};
 			}
 			throw error;
 		}
 	}
-}
+}

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

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-custom-layout/src/main.ts

@@ -1,28 +1,23 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
+
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,18 +1,25 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+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",
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- OpenVidu Video Conference Component -->
-		<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
+		<ov-videoconference
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
 			<!-- Custom Panels -->
 			<ov-panel *ovPanel>
-
 				<!-- Custom Chat Panel -->
 				<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
 
@@ -22,24 +29,30 @@ import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModu
 				</div>
 
 				<!-- Custom Activities Panel -->
-				<div *ovActivitiesPanel id="my-activities-panel">This is my custom activities panel</div>
-
+				<div *ovActivitiesPanel id="my-activities-panel">
+					This is my custom activities panel
+				</div>
 			</ov-panel>
 		</ov-videoconference>
 	`,
-    styleUrls: ["./app.component.scss"],
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
+	styleUrls: ['./app.component.scss'],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+	],
 })
 export class AppComponent {
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'custom-panels';
 	token!: string;
 
-	constructor(private httpClient: HttpClient) { }
+	constructor(private httpClient: HttpClient) {}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {
@@ -52,7 +65,7 @@ export class AppComponent {
 		try {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
-				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
 					roomName,
 					participantName,
 				})
@@ -62,10 +75,11 @@ export class AppComponent {
 			if (error.status === 404) {
 				throw {
 					status: error.status,
-					message: 'Cannot connect with the backend. ' + error.url + ' not found',
+					message:
+						'Cannot connect with the backend. ' + error.url + ' not found',
 				};
 			}
 			throw error;
 		}
 	}
-}
+}

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

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-custom-panels/src/main.ts

@@ -1,28 +1,22 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,45 +1,53 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
 
-import { OpenViduService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
+import {
+	OpenViduService,
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
 
-
 @Component({
-    selector: "app-root",
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- OpenVidu Video Conference Component -->
 		@if (connected) {
-		  <ov-videoconference
-		    [token]="token"
-		    [toolbarDisplaySessionName]="false"
-		    (onTokenRequested)="onTokenRequested($event)"
-		    >
-		    <!-- Participant Panel Item Elements -->
-		    <div *ovParticipantPanelItemElements="let participant">
-		      <!-- Leave Button for Local Participant -->
-		      @if (participant.isLocal) {
-		        <button (click)="leaveSession()">
-		          Leave
-		        </button>
-		      }
-		    </div>
-		  </ov-videoconference>
+		<ov-videoconference
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			[toolbarDisplayRoomName]="false"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
+			<!-- Participant Panel Item Elements -->
+			<div *ovParticipantPanelItemElements="let participant">
+				<!-- Leave Button for Local Participant -->
+				@if (participant.isLocal) {
+				<button (click)="leaveSession()">Leave</button>
+				}
+			</div>
+		</ov-videoconference>
 		}
-		
+
 		<!-- Session Disconnected Message -->
 		@if (!connected) {
-		  <div style="text-align: center;">Session disconnected</div>
+		<div style="text-align: center;">Session disconnected</div>
 		}
-		`,
-    styles: [],
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
+	`,
+	styles: [],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+	],
 })
 export class AppComponent {
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
 
 	// Define the name of the room and initialize the token variable
 	roomName = 'participant-panel-item-elements';
@@ -48,7 +56,10 @@ export class AppComponent {
 	// Flag to indicate session connection status
 	connected = true;
 
-	constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }
+	constructor(
+		private httpClient: HttpClient,
+		private openviduService: OpenViduService
+	) {}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {
@@ -67,7 +78,7 @@ export class AppComponent {
 		try {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
-				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
 					roomName,
 					participantName,
 				})
@@ -77,10 +88,11 @@ export class AppComponent {
 			if (error.status === 404) {
 				throw {
 					status: error.status,
-					message: 'Cannot connect with the backend. ' + error.url + ' not found',
+					message:
+						'Cannot connect with the backend. ' + error.url + ' not found',
 				};
 			}
 			throw error;
 		}
 	}
-}
+}

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

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

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

@@ -1,28 +1,22 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,24 +1,34 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
 
 import { environment } from 'src/environments/environment';
-import { MatIcon } from "@angular/material/icon";
-import { MatMenuTrigger, MatMenu, MatMenuItem } from "@angular/material/menu";
-import { MatIconButton } from "@angular/material/button";
-import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
+import { MatIcon } from '@angular/material/icon';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { MatIconButton } from '@angular/material/button';
+import {
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 
 @Component({
-    selector: 'app-root',
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- OpenVidu Video Conference Component -->
-		<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
+		<ov-videoconference
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
 			<!-- Participant Panel Items -->
 			<div *ovParticipantPanelItem="let participant" style="display: flex">
 				<p>{{ participant.name }}</p>
 
 				<!-- More Options Menu -->
-				<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
+				<button mat-icon-button [matMenuTriggerFor]="menu">
+					<mat-icon>more_vert</mat-icon>
+				</button>
 
 				<!-- Menu Content -->
 				<mat-menu #menu="matMenu">
@@ -27,19 +37,30 @@ import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModu
 				</mat-menu>
 			</div>
 		</ov-videoconference>
-  `,
-    styles: [],
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem]
+	`,
+	styles: [],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+		MatIconButton,
+		MatMenuTrigger,
+		MatIcon,
+		MatMenu,
+		MatMenuItem,
+	],
 })
 export class AppComponent {
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
+
 	// 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) {}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {
@@ -52,7 +73,7 @@ export class AppComponent {
 		try {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
-				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
 					roomName,
 					participantName,
 				})
@@ -62,10 +83,11 @@ export class AppComponent {
 			if (error.status === 404) {
 				throw {
 					status: error.status,
-					message: 'Cannot connect with the backend. ' + error.url + ' not found',
+					message:
+						'Cannot connect with the backend. ' + error.url + ' not found',
 				};
 			}
 			throw error;
 		}
 	}
-}
+}

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

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-custom-participant-panel-item/src/main.ts

@@ -1,31 +1,22 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, MatButtonModule, MatMenuModule, MatIconModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,38 +1,51 @@
-import { HttpClient } from "@angular/common/http";
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { lastValueFrom, Subscription } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { lastValueFrom, Subscription } from 'rxjs';
 
-import { ParticipantModel, ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
+import {
+	ParticipantModel,
+	ParticipantService,
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
 
-
 @Component({
-    selector: 'app-root',
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- OpenVidu Video Conference Component -->
-		<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
-		
-		  <!-- Custom Participants Panel -->
-		  <div *ovParticipantsPanel id="my-panel">
-		    <ul id="local">
-		      <li>{{localParticipant.name}}</li>
-		    </ul>
-		    <ul id="remote">
-		      @for (p of remoteParticipants; track p) {
-		        <li>{{p.name}}</li>
-		      }
-		    </ul>
-		  </div>
-		
+		<ov-videoconference
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
+			<!-- Custom Participants Panel -->
+			<div *ovParticipantsPanel id="my-panel">
+				<ul id="local">
+					<li>{{ localParticipant.name }}</li>
+				</ul>
+				<ul id="remote">
+					@for (p of remoteParticipants; track p) {
+					<li>{{ p.name }}</li>
+					}
+				</ul>
+			</div>
 		</ov-videoconference>
-		`,
-    styleUrls: ['./app.component.scss'],
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
+	`,
+	styleUrls: ['./app.component.scss'],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+	],
 })
 export class AppComponent implements OnInit, OnDestroy {
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
+
 	// Define the name of the room and initialize the token variable
 	roomName = 'custom-participants-panel';
 	token!: string;
@@ -43,7 +56,10 @@ export class AppComponent implements OnInit, OnDestroy {
 	localParticipantSubs!: Subscription;
 	remoteParticipantsSubs!: Subscription;
 
-	constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
+	constructor(
+		private httpClient: HttpClient,
+		private participantService: ParticipantService
+	) {}
 
 	// Subscribes to updates for local and remote participants.
 	ngOnInit() {
@@ -64,15 +80,17 @@ export class AppComponent implements OnInit, OnDestroy {
 
 	// Subscribes to updates for local and remote participants.
 	subscribeToParticipants() {
-		this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
-			if (p) this.localParticipant = p;
-		});
+		this.localParticipantSubs =
+			this.participantService.localParticipantObs.subscribe((p) => {
+				if (p) this.localParticipant = p;
+			});
 
-		this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe(
-			(participants) => {
-				this.remoteParticipants = participants;
-			}
-		);
+		this.remoteParticipantsSubs =
+			this.participantService.remoteParticipantsObs.subscribe(
+				(participants) => {
+					this.remoteParticipants = participants;
+				}
+			);
 	}
 
 	// Sends a request to the server to obtain a token for a participant.
@@ -80,7 +98,7 @@ 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.APPLICATION_SERVER_URL + 'api/sessions', {
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
 					roomName,
 					participantName,
 				})
@@ -90,7 +108,8 @@ export class AppComponent implements OnInit, OnDestroy {
 			if (error.status === 404) {
 				throw {
 					status: error.status,
-					message: 'Cannot connect with the backend. ' + error.url + ' not found',
+					message:
+						'Cannot connect with the backend. ' + error.url + ' not found',
 				};
 			}
 			throw error;

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

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-custom-participants-panel/src/main.ts

@@ -1,28 +1,22 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,41 +1,51 @@
-import { HttpClient } from "@angular/common/http";
+import { HttpClient } from '@angular/common/http';
 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',
-    template: `
+	selector: 'app-root',
+	template: `
 		<!-- OpenVidu Video Conference Component -->
-    	<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
-
+		<ov-videoconference
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
 			<!-- Display Video Streams -->
 			<div *ovStream="let track">
-
 				<!-- Video Stream Component -->
 				<ov-stream [track]="track" [displayParticipantName]="false"></ov-stream>
 
 				<!-- Display Participant's Name -->
 				<p>{{ track.participant.name }}</p>
-
 			</div>
-
 		</ov-videoconference>
-  `,
-    styleUrls: ['./app.component.scss'],
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
+	`,
+	styleUrls: ['./app.component.scss'],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+	],
 })
 export class AppComponent {
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
+
 	// Define the name of the room and initialize the token variable
 	roomName = 'custom-stream';
 	token!: string;
 
-	constructor(private httpClient: HttpClient) { }
+	constructor(private httpClient: HttpClient) {}
 
 	// Function to request a token when a participant joins the room
 	async onTokenRequested(participantName: string) {
@@ -48,7 +58,7 @@ export class AppComponent {
 		try {
 			// Send a POST request to the server to obtain a token
 			return lastValueFrom(
-				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
+				this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
 					roomName,
 					participantName,
 				})
@@ -58,10 +68,11 @@ export class AppComponent {
 			if (error.status === 404) {
 				throw {
 					status: error.status,
-					message: 'Cannot connect with the backend. ' + error.url + ' not found',
+					message:
+						'Cannot connect with the backend. ' + error.url + ' not found',
 				};
 			}
 			throw error;
 		}
 	}
-}
+}

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

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-custom-stream/src/main.ts

@@ -1,28 +1,22 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,63 +1,86 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
 
-import { ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
+import {
+  ParticipantService,
+  OpenViduAngularModule,
+  ApiDirectiveModule,
+  OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
 
 @Component({
-    selector: 'app-root',
-    template: `
-		<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
-			<div *ovToolbar style="text-align: center;">
-				<button (click)="toggleVideo()">Toggle Video</button>
-				<button (click)="toggleAudio()">Toggle Audio</button>
-			</div>
-		</ov-videoconference>
-	`,
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
+  selector: 'app-root',
+  template: `
+    <ov-videoconference
+      [token]="token"
+      [livekitUrl]="LIVEKIT_URL"
+      (onTokenRequested)="onTokenRequested($event)"
+    >
+      <div *ovToolbar style="text-align: center;">
+        <button (click)="toggleVideo()">Toggle Video</button>
+        <button (click)="toggleAudio()">Toggle Audio</button>
+      </div>
+    </ov-videoconference>
+  `,
+  standalone: true,
+  imports: [
+    OpenViduAngularModule,
+    ApiDirectiveModule,
+    OpenViduAngularDirectiveModule,
+  ],
 })
 export class AppComponent {
+  // The URL of the application server.
+  APPLICATION_SERVER_URL = environment.applicationServerUrl;
+  LIVEKIT_URL = environment.livekitUrl;
+  // The name of the room.
+  roomName = 'custom-toolbar';
 
-	// The URL of the application server.
-	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+  // The token used to connect to the videoconference.
+  token!: string;
 
-	// The name of the room.
-	roomName = 'custom-toolbar';
+  constructor(
+    private httpClient: HttpClient,
+    private participantService: ParticipantService
+  ) {}
 
-	// The token used to connect to the videoconference.
-	token!: string;
+  // Called when a token is requested for a participant.
+  async onTokenRequested(participantName: string) {
+    const { token } = await this.getToken(this.roomName, participantName);
+    this.token = token;
+  }
 
-	constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
+  // Toggles the camera on and off.
+  async toggleVideo() {
+    const isCameraEnabled = this.participantService.isMyCameraEnabled();
+    await this.participantService.setCameraEnabled(!isCameraEnabled);
+  }
 
-	// Called when a token is requested for a participant.
-	async onTokenRequested(participantName: string) {
-		const { token } = await this.getToken(this.roomName, participantName);
-		this.token = token;
-	}
+  // Toggles the microphone on and off.
+  async toggleAudio() {
+    const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();
+    await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);
+  }
 
-	// Toggles the camera on and off.
-	async toggleVideo() {
-		const isCameraEnabled = this.participantService.isMyCameraEnabled();
-		await this.participantService.setCameraEnabled(!isCameraEnabled);
-	}
-
-	// Toggles the microphone on and off.
-	async toggleAudio() {
-		const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();
-		await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);
-	}
-
-	// Gets a token for a participant.
-	getToken(roomName: string, participantName: string): Promise<any> {
-		try {
-			return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName }));
-		} catch (error: any) {
-			if (error.status === 404) {
-				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
-			}
-			throw error;
-		}
-	}
-}
+  // Gets a token for a participant.
+  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-toolbar/src/environments/environment.prod.ts

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

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

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

openvidu-components/openvidu-custom-toolbar/src/main.ts

@@ -1,28 +1,22 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+  production: environment.production,
 };
 
-
-
 if (environment.production) {
   enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+  providers: [
+    importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+    provideAnimations(),
+  ],
+}).catch((err) => console.error(err));

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

@@ -1,21 +1,22 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+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";
+import { OpenViduAngularModule, ApiDirectiveModule } from 'openvidu-angular';
 
 @Component({
-    selector: 'app-root',
-    template: '<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)"></ov-videoconference>',
-    styles: [''],
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule]
+  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 = environment.applicationServerUrl;
+  LIVEKIT_URL = environment.livekitUrl;
 
   // The name of the room to join.
   roomName = 'openvidu-custom-ui';
@@ -24,7 +25,7 @@ export class AppComponent {
   token!: string;
 
   // Creates a new instance of the AppComponent class.
-  constructor(private httpClient: HttpClient) { }
+  constructor(private httpClient: HttpClient) {}
 
   // Requests a token to join the room with the given participant name.
   async onTokenRequested(participantName: string) {
@@ -35,12 +36,20 @@ export class AppComponent {
   // 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 + 'api/sessions', { 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-ui/src/environments/environment.prod.ts

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

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

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

openvidu-components/openvidu-toggle-hand/README.md

@@ -1,80 +0,0 @@
-openvidu-toggle-hand is a tutorial sample which shows how to use efficiently the **openvidu-components** library. In this tutorial **we're going to add the raise the hand feature in a video room**, allowing to all users raise the hand and showing the properly notification to others.
-
-For doing that, we're going to **openvidu-components-library** in our angular project. Go ahead.
-
-
-
-1. First step to do is create a new Angular project. It must include Angular Material. After that, we need to install openvidu-components-library:
-
-
-```bash
-npm install openvidu-components-library
-```
-
-2. Once the library is installed, add `OpenviduComponentsLibraryModule` into your `app.module.ts`:
-
-```typescript
-
-@NgModule({
-  ...
-
-  imports: [
-    ...
-    OpenviduComponentsLibraryModule.forRoot(environment),
-
-  ]
-
-})
-
-```
-We need to add our angular environment as a library parameter.
-
-
-3. Add the components you want to use in your application into the `providers` section of your `app.module.ts`. In this tutorial we're going to use all of them.
-
-```typescript
-@NgModule({
-  ...
-
- providers: [
-    UserSettingsComponent,
-    ToolbarComponent,
-    ChatComponent,
-    RoomComponent,
-    LayoutComponent
-  ],
-
-})
-
-```
-4. In our `app.component.html` we'll add the default previsualize user modal and we'll add a custom room component using **openvidu-components-library**:
-
-```html
-<div id="call-container" style="height: 100%">
-	<div id="userSettings" *ngIf="(!joinSessionClicked && !closeClicked) || !isSessionAlive">
-		<ov-user-settings (onJoinClicked)="onJoinClicked()"></ov-user-settings>
-	</div>
-
-	<div *ngIf="joinSessionClicked && isSessionAlive" style="height: 100%">
-
-		<!-- Injecting custom room component-->
-		<app-room-pro [tokens]="tokens"></app-room-pro>
-	</div>
-</div>
-
-```
-**[//AÑADIR DIAGRAMA QUE EXPLIQUE VISUALMENTE LA CUSTOMIZACION DE LA ROOM]**
-
-As we need to add some features in the components, we're going to create our custom components and services for extending the basic components from openvidu library. In this tutorial, we'll add the hand raise feature so we need to customize 4 components and 1 service:
-
-* `RoomProComponent` (_app-room-pro_) which extends from **RoomComponent**: We need to subscribe to toggle hand events and the room component is the perfect site to do that.
-
-* `ToolbarProComponent` (_app-toolbar-pro_)  which extends from **ToolbarComponent**: We need to add a toggle hand button for raise our hand. We've decided include it on the toolbar component so we need to create a custom component to manage this change.
-
-* `LayoutProComponent` (_app-layout-pro) which extends from **LayoutProComponent**: As we need to customize the participant component, showing a new notification on the video when a remote or local participant has raised the hand, we need to replace the default participant component by the customize one.
-
-* `ParticipantProComponent` (_app-participant-pro_) which extends from **ParticipantComponent**: We need to add a new property in participant model object and we also have to show a new notification when a user raised the hand. As we have decided showing this notification in the user vide, we need to customize the default ParticipantComponent.
-
-
-
-

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

@@ -16,7 +16,7 @@
             "outputPath": "dist/openvidu-toggle-hand",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": [
@@ -93,7 +93,7 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [

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

@@ -1,22 +1,26 @@
-<ov-videoconference (onRoomCreated)="handleRemoteHand($event)" [prejoin]="true" [token]="token" (onTokenRequested)="onTokenRequested($event)">
+<ov-videoconference
+	[prejoin]="true"
+	[token]="token"
+	[livekitUrl]="LIVEKIT_URL"
+	(onTokenRequested)="onTokenRequested($event)"
+	(onRoomCreated)="handleRemoteHand($event)"
+>
+	<div *ovToolbarAdditionalButtons>
+		<button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised">
+			<mat-icon matTooltip="Toggle hand">front_hand</mat-icon>
+		</button>
+	</div>
 
-  <div *ovToolbarAdditionalButtons>
-    <button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised">
-      <mat-icon matTooltip="Toggle hand">front_hand</mat-icon>
-    </button>
-  </div>
+	<div *ovStream="let track" style="height: 100%">
+		<ov-stream [track]="track"></ov-stream>
+		@if (track.participant.hasHandRaised) {
+		<mat-icon @inOutHandAnimation id="hand-notification">front_hand</mat-icon>
+		}
+	</div>
 
-  <div *ovStream="let track" style="height: 100%">
-    <ov-stream [track]="track"></ov-stream>
-    @if (track.participant.hasHandRaised) {
-      <mat-icon @inOutHandAnimation id="hand-notification">front_hand</mat-icon>
-    }
-  </div>
-
-  <div *ovParticipantPanelItemElements="let participant">
-    @if (participant.hasHandRaised) {
-      <mat-icon>front_hand</mat-icon>
-    }
-  </div>
-
-</ov-videoconference>
+	<div *ovParticipantPanelItemElements="let participant">
+		@if (participant.hasHandRaised) {
+		<mat-icon>front_hand</mat-icon>
+		}
+	</div>
+</ov-videoconference>

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

@@ -1,43 +1,53 @@
-import { animate, style, transition, trigger } from "@angular/animations";
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+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 {
+	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";
+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]
+	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 = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
 
 	// The token used to connect to the OpenVidu session.
 	token!: string;
@@ -48,7 +58,7 @@ 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) {}
 
 	// Requests a token from the application server for the given participant name.
 	async onTokenRequested(participantName: string) {
@@ -92,7 +102,7 @@ export class AppComponent {
 	// 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 + 'api/sessions', { 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' };
@@ -100,4 +110,4 @@ export class AppComponent {
 			throw error;
 		}
 	}
-}
+}

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

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/'
 };
 
 /*

openvidu-components/openvidu-toggle-hand/src/polyfills.ts

@@ -1,63 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

openvidu-components/openvidu-toggle-hand/src/styles.scss

@@ -1,61 +1,49 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-@import '@angular/material/theming';
 
-@include mat.all-component-typographies();
 @include mat.core();
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$openvidu-components-primary: mat-palette($mat-blue-grey, 500, 300);
-$openvidu-components-accent: mat-palette($mat-amber, 500, 700, A100);
+// Define the theme
+$openvidu-theme: mat.define-theme();
 
-// The warn palette is optional (defaults to red).
-$openvidu-components-warn: mat.define-palette(mat.$red-palette);
-
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$openvidu-components-theme: mat.define-light-theme((
-  color: (
-    primary: $openvidu-components-primary,
-    accent: $openvidu-components-accent,
-    warn: $openvidu-components-warn,
-  )
-));
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($openvidu-components-theme);
-
-
-:root {
-  --ov-primary-color: #303030;
-  --ov-secondary-color: #3e3f3f;
-  --ov-tertiary-color: #598eff;
-  --ov-warn-color: #EB5144;
-  --ov-accent-color: #ffae35;
-  --ov-light-color: #e6e6e6;
-
-  --ov-logo-background-color: #3a3d3d;
-
-  --ov-text-color: #ffffff;
-
-  --ov-panel-text-color: #1d1d1d;
-  --ov-panel-background: #ffffff;
-
-  --ov-buttons-radius: 50%; // border-radius property
-  --ov-leave-button-radius: 10px;
-  --ov-video-radius: 5px;
-  --ov-panel-radius: 5px;
+html {
+	// Emit theme-dependent styles for common features used across multiple components.
+	@include mat.core-theme($openvidu-theme);
+	// @include mat.button-theme($theme);
+	@include mat.all-component-bases($openvidu-theme);
+	@include mat.all-component-colors($openvidu-theme);
+	@include mat.all-component-typographies($openvidu-theme);
+	@include mat.all-component-densities($openvidu-theme);
 }
 
+:root {
+	--ov-primary-color: #303030;
+	--ov-secondary-color: #3e3f3f;
+	--ov-tertiary-color: #598eff;
+	--ov-warn-color: #eb5144;
+	--ov-accent-color: #ffae35;
+	--ov-light-color: #e6e6e6;
 
+	--ov-logo-background-color: #3a3d3d;
+
+	--ov-text-color: #ffffff;
+
+	--ov-panel-text-color: #1d1d1d;
+	--ov-panel-background: #ffffff;
+
+	--ov-buttons-radius: 50%; // border-radius property
+	--ov-leave-button-radius: 10px;
+	--ov-video-radius: 5px;
+	--ov-panel-radius: 5px;
+}
 
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; overflow: hidden;}
-body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;}
+html,
+body {
+	height: 100%;
+	overflow: hidden;
+}
+body {
+	margin: 0;
+	font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
+}

openvidu-components/openvidu-toggle-hand/tsconfig.app.json

@@ -1,15 +1,10 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"outDir": "./out-tsc/app",
+		"types": []
+	},
+	"files": ["src/main.ts"],
+	"include": ["src/**/*.d.ts"]
 }

openvidu-components/openvidu-toggle-hand/tsconfig.spec.json

@@ -1,18 +1,10 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"outDir": "./out-tsc/spec",
+		"types": ["jasmine"]
+	},
+	"files": ["src/test.ts"],
+	"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }

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

@@ -1,16 +1,25 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
 
-import { ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
+import {
+	ParticipantService,
+	OpenViduAngularModule,
+	ApiDirectiveModule,
+	OpenViduAngularDirectiveModule,
+} from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
-import { MatIcon } from "@angular/material/icon";
-import { MatIconButton } from "@angular/material/button";
+import { MatIcon } from '@angular/material/icon';
+import { MatIconButton } from '@angular/material/button';
 
 @Component({
-    selector: 'app-root',
-    template: `
-    	<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
+	selector: 'app-root',
+	template: `
+		<ov-videoconference
+			[token]="token"
+			[livekitUrl]="LIVEKIT_URL"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
 			<div *ovToolbarAdditionalButtons style="text-align: center;">
 				<button mat-icon-button (click)="toggleVideo()">
 					<mat-icon>videocam</mat-icon>
@@ -20,15 +29,21 @@ import { MatIconButton } from "@angular/material/button";
 				</button>
 			</div>
 		</ov-videoconference>
-  `,
-    styles: [],
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatIcon]
+	`,
+	styles: [],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+		MatIconButton,
+		MatIcon,
+	],
 })
 export class AppComponent {
-
 	// The URL of the application server.
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
 
 	// The name of the room for the video conference.
 	roomName = 'toolbar-additionalbtn';
@@ -39,7 +54,7 @@ export class AppComponent {
 	constructor(
 		private httpClient: HttpClient,
 		private participantService: ParticipantService
-	) { }
+	) {}
 
 	// Called when the token is requested.
 	async onTokenRequested(participantName: string) {
@@ -62,12 +77,20 @@ export class AppComponent {
 	// Retrieves a token from the server to authenticate the user.
 	getToken(roomName: string, participantName: string): Promise<any> {
 		try {
-			return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { 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-toolbar-buttons/src/environments/environment.prod.ts

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-toolbar-buttons/src/main.ts

@@ -1,10 +1,7 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
@@ -12,19 +9,21 @@ import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduAngularConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(
+			BrowserModule,
+			MatButtonModule,
+			MatIconModule,
+			OpenViduAngularModule.forRoot(config)
+		),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,56 +1,77 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+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",
-    template: `
-		<ov-videoconference [token]="token" [toolbarDisplaySessionName]="false" (onTokenRequested)="onTokenRequested($event)">
+	selector: 'app-root',
+	template: `
+		<ov-videoconference
+			[token]="token"
+      [livekitUrl]="LIVEKIT_URL"
+			[toolbarDisplayRoomName]="false"
+			(onTokenRequested)="onTokenRequested($event)"
+		>
 			<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
 				<button (click)="onButtonClicked()">MY PANEL</button>
 			</div>
 		</ov-videoconference>
 	`,
-    styles: [],
-    standalone: true,
-    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
+	styles: [],
+	standalone: true,
+	imports: [
+		OpenViduAngularModule,
+		ApiDirectiveModule,
+		OpenViduAngularDirectiveModule,
+	],
 })
 export class AppComponent {
+	// Set the application server URL from the environment variables
+	APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	LIVEKIT_URL = environment.livekitUrl;
 
-  // Set the application server URL from the environment variables
-  APPLICATION_SERVER_URL = environment.applicationServerUrl;
+	// Set the room name
+	roomName = 'toolbar-additional-panel-btn';
 
-  // Set the room name
-  roomName = "toolbar-additional-panel-btn";
+	// Initialize the token variable
+	token!: string;
 
-  // Initialize the token variable
-  token!: string;
+	constructor(private httpClient: HttpClient) {}
 
-  constructor(private httpClient: HttpClient) { }
+	// Method to request a token for a participant
+	async onTokenRequested(participantName: string) {
+		const { token } = await this.getToken(this.roomName, participantName);
+		this.token = token;
+	}
 
-  // Method to request a token for a participant
-  async onTokenRequested(participantName: string) {
-    const { token } = await this.getToken(this.roomName, participantName);
-    this.token = token;
-  }
+	// Method to handle button click
+	onButtonClicked() {
+		alert('button clicked');
+	}
 
-  // Method to handle button click
-  onButtonClicked() {
-    alert('button clicked');
-  }
-
-  // Method to get a token from the backend
-  getToken(roomName: string, participantName: string): Promise<any> {
-    try {
-      return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName }));
-    } catch (error: any) {
-      if (error.status === 404) {
-        throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
-      }
-      throw error;
-    }
-  }
+	// Method to get a token from the backend
+	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-toolbar-panel-buttons/src/environments/environment.prod.ts

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

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

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  applicationServerUrl: 'http://localhost:5000/',
+	production: false,
+	applicationServerUrl: 'http://localhost:6080/',
+	livekitUrl: 'http://localhost:7880/',
 };
 
 /*

openvidu-components/openvidu-toolbar-panel-buttons/src/main.ts

@@ -1,10 +1,7 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { environment as environment_1 } from 'src/environments/environment';
 import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
@@ -13,16 +10,13 @@ const config: OpenViduAngularConfig = {
 	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));