openvidu-components: Updated tutorials

Fixed and improved code

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

@@ -6,13 +6,11 @@ import {
 	PanelStatusInfo,
 	PanelService,
 	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
 } from 'openvidu-components-angular';
 
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton } from '@angular/material/button';
-import { CommonModule } from '@angular/common';
+
 
 @Component({
 	selector: 'app-root',
@@ -50,16 +48,26 @@ import { CommonModule } from '@angular/common';
 			</div>
 		</ov-videoconference>
 	`,
-	styleUrls: ['./app.component.scss'],
+	styles: `
+		#my-panels {
+			height: 100%;
+			overflow: hidden;
+		}
+		#my-panel1,
+		#my-panel2 {
+			text-align: center;
+			height: calc(100% - 40px);
+			margin: 20px;
+		}
+		#my-panel1 {
+			background: #c9ffb2;
+		}
+		#my-panel2 {
+			background: #ddf2ff;
+		}
+	`,
 	standalone: true,
-	imports: [
-		CommonModule,
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-		MatIconButton,
-		MatIcon,
-	],
+	imports: [OpenViduComponentsModule, MatIconButton, MatIcon],
 })
 export class AppComponent {
 	// For local development, leave these variables empty

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

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

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

@@ -1,24 +1,27 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
+import {
+	OpenViduComponentsModule,
+	OpenViduComponentsConfig,
+} from 'openvidu-components-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduComponentsConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(
+			BrowserModule,
+			OpenViduComponentsModule.forRoot(config)
+		),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,6 +0,0 @@
-#my-panel {
-	background: #aafffc;
-	height: 100%;
-	overflow: hidden;
-	text-align: center;
-}

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

@@ -1,12 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
-import { environment } from 'src/environments/environment';
-import {
-	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
-} from 'openvidu-components-angular';
+import { OpenViduComponentsModule } from 'openvidu-components-angular';
 
 @Component({
 	selector: 'app-root',
@@ -14,8 +9,6 @@ import {
 		<ov-videoconference
 			[token]="token"
 			[livekitUrl]="LIVEKIT_URL"
-			[toolbarRecordingButton]="false"
-			[toolbarDisplayRoomName]="false"
 			(onTokenRequested)="onTokenRequested($event)"
 		>
 			<!-- Custom activities panel -->
@@ -25,13 +18,16 @@ import {
 			</div>
 		</ov-videoconference>
 	`,
-	styleUrls: ['./app.component.scss'],
+	styles: `
+		#my-panel {
+			background: #aafffc;
+			height: 100%;
+			overflow: hidden;
+			text-align: center;
+		}
+	`,
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-	],
+	imports: [OpenViduComponentsModule],
 })
 export class AppComponent {
 	// For local development, leave these variables empty

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

@@ -1,24 +1,27 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
+import {
+	OpenViduComponentsModule,
+	OpenViduComponentsConfig,
+} from 'openvidu-components-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
 const config: OpenViduComponentsConfig = {
-  production: environment.production
+	production: environment.production,
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(
+			BrowserModule,
+			OpenViduComponentsModule.forRoot(config)
+		),
+		provideAnimations(),
+	],
+}).catch((err) => console.error(err));

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

@@ -1,6 +0,0 @@
-#my-panel {
-	background: #aafffc;
-	height: 100%;
-	overflow: hidden;
-	text-align: center;
-}

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

@@ -11,10 +11,7 @@ import {
 	Room,
 	RoomEvent,
 	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
 } from 'openvidu-components-angular';
-import { environment } from 'src/environments/environment';
 
 @Component({
 	selector: 'app-root',
@@ -42,13 +39,16 @@ import { environment } from 'src/environments/environment';
 			</div>
 		</ov-videoconference>
 	`,
-	styleUrls: ['./app.component.scss'],
+	styles: `
+		#my-panel {
+			background: #aafffc;
+			height: 100%;
+			overflow: hidden;
+			text-align: center;
+		}
+	`,
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-	],
+	imports: [OpenViduComponentsModule],
 })
 export class AppComponent {
 	// For local development, leave these variables empty

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

@@ -1,13 +0,0 @@
-.container {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-}
-.item {
-	flex: 0 50%;
-	height: 250px;
-	margin-bottom: 2%;
-}
-.hidden {
-	display: none;
-}

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

@@ -5,10 +5,7 @@ import {
 	ParticipantModel,
 	ParticipantService,
 	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
 } from 'openvidu-components-angular';
-import { environment } from 'src/environments/environment';
 import { NgClass } from '@angular/common';
 
 @Component({
@@ -52,14 +49,23 @@ import { NgClass } from '@angular/common';
 			</div>
 		</ov-videoconference>
 	`,
-	styleUrls: ['./app.component.scss'],
+	styles: `
+		.container {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+		}
+		.item {
+			flex: 0 50%;
+			height: 250px;
+			margin-bottom: 2%;
+		}
+		.hidden {
+			display: none;
+		}
+	`,
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-		NgClass,
-	],
+	imports: [OpenViduComponentsModule, NgClass],
 })
 export class AppComponent implements OnInit, OnDestroy {
 	// For local development, leave these variables empty

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

@@ -1,19 +0,0 @@
-#my-chat-panel,
-#my-participants-panel,
-#my-activities-panel {
-	text-align: center;
-	height: calc(100% - 40px);
-	margin: 20px;
-}
-
-#my-chat-panel {
-	background: #c9ffb2;
-}
-
-#my-participants-panel {
-	background: #ddf2ff;
-}
-
-#my-activities-panel {
-	background: #ffddc9;
-}

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

@@ -2,12 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 
-import { environment } from 'src/environments/environment';
-import {
-	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
-} from 'openvidu-components-angular';
+import { OpenViduComponentsModule } from 'openvidu-components-angular';
 
 @Component({
 	selector: 'app-root',
@@ -35,13 +30,29 @@ import {
 			</ov-panel>
 		</ov-videoconference>
 	`,
-	styleUrls: ['./app.component.scss'],
+	styles: `
+		#my-chat-panel,
+		#my-participants-panel,
+		#my-activities-panel {
+			text-align: center;
+			height: calc(100% - 40px);
+			margin: 20px;
+		}
+
+		#my-chat-panel {
+			background: #c9ffb2;
+		}
+
+		#my-participants-panel {
+			background: #ddf2ff;
+		}
+
+		#my-activities-panel {
+			background: #ffddc9;
+		}
+	`,
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-	],
+	imports: [OpenViduComponentsModule],
 })
 export class AppComponent {
 	// For local development, leave these variables empty

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

@@ -5,10 +5,7 @@ import { lastValueFrom } from 'rxjs';
 import {
 	OpenViduService,
 	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
 } from 'openvidu-components-angular';
-import { environment } from 'src/environments/environment';
 
 @Component({
 	selector: 'app-root',
@@ -38,11 +35,7 @@ import { environment } from 'src/environments/environment';
 	`,
 	styles: [],
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-	],
+	imports: [OpenViduComponentsModule],
 })
 export class AppComponent {
 	// For local development, leave these variables empty

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

@@ -2,7 +2,10 @@ import { enableProdMode, importProvidersFrom } from '@angular/core';
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
+import {
+	OpenViduComponentsModule,
+	OpenViduComponentsConfig,
+} from 'openvidu-components-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
@@ -16,7 +19,10 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
 	providers: [
-		importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
+		importProvidersFrom(
+			BrowserModule,
+			OpenViduComponentsModule.forRoot(config)
+		),
 		provideAnimations(),
 	],
 }).catch((err) => console.error(err));

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

@@ -2,15 +2,10 @@ 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 {
-	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
-} from 'openvidu-components-angular';
+import { OpenViduComponentsModule } from 'openvidu-components-angular';
 
 @Component({
 	selector: 'app-root',
@@ -42,8 +37,6 @@ import {
 	standalone: true,
 	imports: [
 		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
 		MatIconButton,
 		MatMenuTrigger,
 		MatIcon,

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

@@ -2,7 +2,10 @@ import { enableProdMode, importProvidersFrom } from '@angular/core';
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
+import {
+	OpenViduComponentsModule,
+	OpenViduComponentsConfig,
+} from 'openvidu-components-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
@@ -16,7 +19,10 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
 	providers: [
-		importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
+		importProvidersFrom(
+			BrowserModule,
+			OpenViduComponentsModule.forRoot(config)
+		),
 		provideAnimations(),
 	],
 }).catch((err) => console.error(err));

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

@@ -1,11 +0,0 @@
-#my-panel {
-	background: #faff7f;
-	height: 100%;
-	overflow: hidden;
-}
-#my-panel > #local {
-	background: #a184ff;
-}
-#my-panel > #remote {
-	background: #7fb8ff;
-}

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

@@ -6,10 +6,7 @@ import {
 	ParticipantModel,
 	ParticipantService,
 	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
 } from 'openvidu-components-angular';
-import { environment } from 'src/environments/environment';
 
 @Component({
 	selector: 'app-root',
@@ -33,13 +30,21 @@ import { environment } from 'src/environments/environment';
 			</div>
 		</ov-videoconference>
 	`,
-	styleUrls: ['./app.component.scss'],
+	styles: `
+		#my-panel {
+			background: #faff7f;
+			height: 100%;
+			overflow: hidden;
+		}
+		#my-panel > #local {
+			background: #a184ff;
+		}
+		#my-panel > #remote {
+			background: #7fb8ff;
+		}
+	`,
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-	],
+	imports: [OpenViduComponentsModule],
 })
 export class AppComponent implements OnInit, OnDestroy {
 	// For local development, leave these variables empty

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

@@ -2,7 +2,10 @@ import { enableProdMode, importProvidersFrom } from '@angular/core';
 
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
+import {
+	OpenViduComponentsModule,
+	OpenViduComponentsConfig,
+} from 'openvidu-components-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
@@ -16,7 +19,10 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
 	providers: [
-		importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
+		importProvidersFrom(
+			BrowserModule,
+			OpenViduComponentsModule.forRoot(config)
+		),
 		provideAnimations(),
 	],
 }).catch((err) => console.error(err));

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

@@ -1,6 +0,0 @@
-p {
-	position: absolute;
-	bottom: 0;
-	border: 2px solid;
-	background: #000000;
-}

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

@@ -27,13 +27,16 @@ import {
 			</div>
 		</ov-videoconference>
 	`,
-	styleUrls: ['./app.component.scss'],
+	styles: `
+		p {
+			position: absolute;
+			bottom: 0;
+			border: 2px solid;
+			background: #000000;
+		}
+	`,
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-	],
+	imports: [OpenViduComponentsModule],
 })
 export class AppComponent {
 	// For local development, leave these variables empty

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

@@ -5,10 +5,7 @@ import { lastValueFrom } from 'rxjs';
 import {
   ParticipantService,
   OpenViduComponentsModule,
-  ApiDirectiveModule,
-  OpenViduComponentsDirectiveModule,
 } from 'openvidu-components-angular';
-import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-root',
@@ -25,11 +22,7 @@ import { environment } from 'src/environments/environment';
     </ov-videoconference>
   `,
   standalone: true,
-  imports: [
-    OpenViduComponentsModule,
-    ApiDirectiveModule,
-    OpenViduComponentsDirectiveModule,
-  ],
+  imports: [OpenViduComponentsModule],
 })
 export class AppComponent {
   // For local development, leave these variables empty

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

@@ -2,7 +2,10 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 
-import { OpenViduComponentsModule, ApiDirectiveModule } from 'openvidu-components-angular';
+import {
+  OpenViduComponentsModule,
+  ApiDirectiveModule,
+} from 'openvidu-components-angular';
 
 @Component({
   selector: 'app-root',
@@ -15,7 +18,6 @@ import { OpenViduComponentsModule, ApiDirectiveModule } from 'openvidu-component
 export class AppComponent {
   // For local development, leave these variables empty
   // For production, configure them with correct URLs depending on your deployment
-
   APPLICATION_SERVER_URL = '';
   LIVEKIT_URL = '';
 
@@ -25,7 +27,6 @@ export class AppComponent {
   // The token used to join the room.
   token!: string;
 
-  // Creates a new instance of the AppComponent class.
   constructor(private httpClient: HttpClient) {
     this.configureUrls();
   }

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

@@ -1,10 +1,9 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
 
 const config: OpenViduComponentsConfig = {
   production: environment.production,

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

@@ -1,11 +0,0 @@
-#call-container, #room-container {
-	height: 100%;
-}
-
-#hand-notification {
-    margin-bottom: 5px;
-    z-index: 999;
-    position: absolute;
-    right: 10px;
-    bottom: 3px;
-}

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

@@ -1,26 +0,0 @@
-<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 *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>

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

@@ -1,29 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-    imports: [AppComponent],
-}).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'openvidu-toggle-hand'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('openvidu-toggle-hand');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('openvidu-toggle-hand app is running!');
-  });
-});

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

@@ -2,6 +2,8 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
+import { MatIcon } from '@angular/material/icon';
+import { MatIconButton } from '@angular/material/button';
 
 import {
 	DataPacket_Kind,
@@ -10,25 +12,57 @@ import {
 	RemoteParticipant,
 	Room,
 	RoomEvent,
-	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule
+	OpenViduComponentsModule
 } from 'openvidu-components-angular';
 import { ParticipantAppModel } from './models/participant-app.model';
 
-import { environment } from 'src/environments/environment';
-
-import { MatIcon } from '@angular/material/icon';
-import { MatIconButton } from '@angular/material/button';
-
 enum DataTopicApp {
 	HAND_TOGGLE = 'handToggle'
 }
 
 @Component({
 	selector: 'app-root',
-	templateUrl: './app.component.html',
-	styleUrls: ['./app.component.css'],
+	template: `
+		<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 *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>
+	`,
+	styles: `
+		#call-container, #room-container {
+			height: 100%;
+		}
+
+		#hand-notification {
+			margin-bottom: 5px;
+			z-index: 999;
+			position: absolute;
+			right: 10px;
+			bottom: 3px;
+		}
+	`,
 	animations: [
 		trigger('inOutHandAnimation', [
 			transition(':enter', [
@@ -42,7 +76,7 @@ enum DataTopicApp {
 		])
 	],
 	standalone: true,
-	imports: [OpenViduComponentsModule, ApiDirectiveModule, OpenViduComponentsDirectiveModule, MatIconButton, MatIcon]
+	imports: [OpenViduComponentsModule, MatIconButton, MatIcon]
 })
 export class AppComponent {
 	// For local development, leave these variables empty

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

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

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

@@ -1,7 +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 { ParticipantAppModel } from './app/models/participant-app.model';
@@ -17,16 +16,13 @@ const config: OpenViduComponentsConfig = {
 	participantFactory: (props: ParticipantProperties) => new ParticipantAppModel(props)
 };
 
-
-
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [
-        importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduComponentsModule.forRoot(config)),
-        provideAnimations()
-    ]
-})
-  .catch(err => console.error(err));
+	providers: [
+		importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
+		provideAnimations()
+	]
+}).catch((err) => console.error(err));

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

@@ -5,10 +5,7 @@ import { lastValueFrom } from 'rxjs';
 import {
 	ParticipantService,
 	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
 } from 'openvidu-components-angular';
-import { environment } from 'src/environments/environment';
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton } from '@angular/material/button';
 
@@ -32,13 +29,7 @@ import { MatIconButton } from '@angular/material/button';
 	`,
 	styles: [],
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-		MatIconButton,
-		MatIcon,
-	],
+	imports: [OpenViduComponentsModule, MatIconButton, MatIcon],
 })
 export class AppComponent {
 	// For local development, leave these variables empty

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

@@ -2,12 +2,9 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 
-import { environment } from 'src/environments/environment';
-import {
-	OpenViduComponentsModule,
-	ApiDirectiveModule,
-	OpenViduComponentsDirectiveModule,
-} from 'openvidu-components-angular';
+import { OpenViduComponentsModule } from 'openvidu-components-angular';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
 	selector: 'app-root',
@@ -19,17 +16,15 @@ import {
 			(onTokenRequested)="onTokenRequested($event)"
 		>
 			<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
-				<button (click)="onButtonClicked()">MY PANEL</button>
+				<button mat-icon-button (click)="onButtonClicked()">
+					<mat-icon>star</mat-icon>
+				</button>
 			</div>
 		</ov-videoconference>
 	`,
 	styles: [],
 	standalone: true,
-	imports: [
-		OpenViduComponentsModule,
-		ApiDirectiveModule,
-		OpenViduComponentsDirectiveModule,
-	],
+	imports: [OpenViduComponentsModule, MatIconButton, MatIcon],
 })
 export class AppComponent {
 	// For local development, leave these variables empty