openvidu-components: Added e2e test for attribute directives

openvidu-components-angular/angular.json

@@ -69,13 +69,12 @@
 				"serve": {
 					"builder": "@angular-devkit/build-angular:dev-server",
 					"options": {
-						"browserTarget": "openvidu-components-testapp:build"
+						"browserTarget": "openvidu-components-testapp:build",
+						"proxyConfig": "src/proxy.config.json"
 					},
 					"configurations": {
 						"development": {
-							"browserTarget": "openvidu-components-testapp:build:development",
-							"proxyConfig": "src/proxy.config.json"
-
+							"browserTarget": "openvidu-components-testapp:build:development"
 						},
 						"production": {
 							"browserTarget": "openvidu-components-testapp:build:production"

openvidu-components-angular/e2e/angular.test.ts

@@ -105,7 +105,7 @@ describe('Checkout localhost app', () => {
 		expect(element.length).equals(0);
 	});
 
-	//* PANELS
+	// //* PANELS
 
 	it('should inject the CUSTOM PANEL without children', async () => {
 		let element;
@@ -733,22 +733,291 @@ describe('Checkout localhost app', () => {
 		expect(element.length).equals(1);
 	});
 
+	// * Attribute directives
+
+	it('should HIDE the CHAT PANEL BUTTON', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('chatPanelButton-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('menu-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Check if chat button does not exist
+		element = await browser.findElements(By.id('chat-panel-btn'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the PARTICIPANTS PANEL BUTTON', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('participantsPanelButton-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('menu-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Check if participants button does not exist
+		element = await browser.findElements(By.id('participants-panel-btn'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the DISPLAY LOGO', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('displayLogo-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('info-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('branding-logo'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the DISPLAY SESSION name', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('displaySessionName-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('info-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('session-name'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the FULLSCREEN button', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('fullscreenButton-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('fullscreen-btn'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the LEAVE button', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('leaveButton-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('leave-btn'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the SCREENSHARE button', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('screenshareButton-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('screenshare-btn'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the AUDIO detector', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovStream-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('displayAudioDetection-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('custom-stream')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('audio-wave-container'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the PARTICIPANT NAME', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovStream-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('displayParticipantName-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('custom-stream')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('nickname-container'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the SETTINGS button', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovStream-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('settingsButton-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('custom-stream')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('settings-container'));
+		expect(element.length).equals(0);
+	});
+
+	it('should HIDE the participant MUTE button', async () => {
+		let element;
+		const fixedSession = `${url}?sessionId=fixedNameTesting`;
+		await browser.get(`${fixedSession}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovParticipantPanelItem-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('muteButton-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('menu-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElement(By.id('participants-panel-btn'));
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('participants-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Starting new browser for adding a new participant
+		const newTabScript = `window.open("${fixedSession}")`;
+		await browser.executeScript(newTabScript);
+
+		// Get tabs opened
+		const tabs = await browser.getAllWindowHandles();
+		// Focus on the last tab
+		browser.switchTo().window(tabs[1]);
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		// Switch to first tab
+		browser.switchTo().window(tabs[0]);
+
+		element = await browser.wait(until.elementsLocated(By.id('remote-participant-item')), TIMEOUT);
+		expect(element.length).equals(1);
+		element = await browser.findElements(By.id('mute-btn'));
+		expect(element.length).equals(0);
+	});
+
 	// * EVENTS
-	// it('should receive the onJoinButtonClicked event', async () => {
-	// 	let element;
-	// 	await browser.get(`${url}`);
-	// 	element = await browser.wait(until.elementLocated(By.id('prejoin-container')), TIMEOUT);
-	// 	expect(await element.isDisplayed()).to.be.true;
-
-	// 	// Clicking to join button
-	// 	const joinButton = await browser.findElement(By.id('join-button'));
-	// 	expect(await joinButton.isDisplayed()).to.be.true;
-	// 	await joinButton.click();
-
-	// 	// Checking if onJoinButtonClicked has been received
-	// 	element = await browser.wait(until.elementLocated(By.id('onJoinButtonClicked')), TIMEOUT);
-	// 	expect(await element.isDisplayed()).to.be.true;
-	// });
 
 	it('should receive the onLeaveButtonClicked event', async () => {
 		let element;
@@ -889,6 +1158,4 @@ describe('Checkout localhost app', () => {
 		element = await browser.wait(until.elementLocated(By.id('onFullscreenButtonClicked')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 	});
-
-
 });

openvidu-components-angular/e2e/tsconfig.json

@@ -5,11 +5,9 @@
 	  "module": "commonjs",
 	  "strict": true,
 	  "outDir": "./dist",
-	  "lib": [
-		"es6"
-	  ],
+	  "lib": ["es6"],
 	  "types": [ "mocha", "node" ],
 	  "experimentalDecorators": true,
 	  "emitDecoratorMetadata": true
-	}
+	},
   }

openvidu-components-angular/package.json

@@ -33,7 +33,7 @@
     "@angular/router": "13.0.0",
     "autolinker": "3.14.3",
     "openvidu-browser": "^2.21.0",
-    "rxjs": "7.4.0",
+    "rxjs": "7.5.4",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css

@@ -10,7 +10,7 @@
 	right: 0;
 }
 
-#info-container {
+#info-container>div {
 	display: flex;
 	align-items: center;
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
-	<div fxFlex="20%" fxLayoutAlign="start center">
-		<div id="info-container">
+	<div fxFlex="20%" fxLayoutAlign="start center" id="info-container">
+		<div >
 			<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
 			<span id="session-name" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span>
 		</div>

openvidu-components-angular/src/app/testing-app/testing.component.html

@@ -1,5 +1,6 @@
 <section style="padding: 20px" class="example-section" *ngIf="showDirectives">
-	<div *ngFor="let directive of directives; let i = index" class="directive-container">
+	<h2>Structural directives</h2>
+	<div *ngFor="let directive of templateDirectives; let i = index" class="directive-container">
 		<mat-checkbox
 			class="parent-directive"
 			[id]="directive.name + '-checkbox'"
@@ -37,6 +38,28 @@
 		</span>
 	</div>
 </section>
+<hr *ngIf="showDirectives"/>
+
+<section  *ngIf="showDirectives">
+	<div>
+		<h2>Attribute directives</h2>
+	</div>
+	<div *ngFor="let directive of apiDirectives; let i = index" class="directive-container">
+		<h3 style="background-color: rgb(172, 201, 255); font-weight: bold">
+			{{ directive.component }}
+		</h3>
+		<span>
+			<ul>
+				<li *ngFor="let dir of directive.directives">
+					<mat-checkbox [id]="dir + '-checkbox'" (change)="updateApiDirective(dir, $event.checked)" [checked]="true">
+						{{ dir }}
+					</mat-checkbox>
+				</li>
+			</ul>
+		</span>
+	</div>
+</section>
+
 <div style="text-align: center" *ngIf="showDirectives">
 	<button mat-flat-button color="warn" (click)="apply()" id="apply-btn">Apply</button>
 </div>
@@ -57,6 +80,13 @@
 		<ov-toolbar
 			*ovToolbar
 			id="custom-toolbar"
+			[screenshareButton]="screenshareBtn"
+			[fullscreenButton]="fullscreenBtn"
+			[leaveButton]="leaveBtn"
+			[participantsPanelButton]="participantsPanelBtn"
+			[chatPanelButton]="chatPanelBtn"
+			[displaySessionName]="displaySessionId"
+			[displayLogo]="displayLogo"
 			(onLeaveButtonClicked)="appendElement('onLeaveButtonClicked')"
 			(onCameraButtonClicked)="appendElement('onCameraButtonClicked')"
 			(onMicrophoneButtonClicked)="appendElement('onMicrophoneButtonClicked')"
@@ -165,7 +195,7 @@
 
 	<ng-template [ngIf]="!ovPanelSelected && !ovParticipantsPanelSelected && ovParticipantPanelItemSelected">
 		<div *ovParticipantPanelItem="let participant" id="custom-participants-panel-item">
-			<ov-participant-panel-item [participant]="participant">
+			<ov-participant-panel-item [participant]="participant" [muteButton]="participantItemMuteBtn">
 				<ng-template [ngIf]="ovParticipantPanelItemElementsSelected">
 					<div *ovParticipantPanelItemElements id="custom-participants-panel-item-element">
 						<button mat-icon-button id="hand-notification">
@@ -209,7 +239,12 @@
 	<ng-template [ngIf]="!ovLayoutSelected && ovStreamSelected">
 		<div *ovStream="let stream" id="custom-stream">
 			<p>EXTERNAL STREAM INSIDE OF LAYOUT</p>
-			<ov-stream [stream]="stream"></ov-stream>
+			<ov-stream
+				[stream]="stream"
+				[settingsButton]="settingsBtn"
+				[displayAudioDetection]="audioDetection"
+				[displayParticipantName]="participantName"
+			></ov-stream>
 		</div>
 	</ng-template>
 

openvidu-components-angular/src/app/testing-app/testing.component.ts

@@ -1,27 +1,51 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 
-import { RestService } from '../services/rest.service';
-import { throwError as observableThrowError } from 'rxjs';
+import { Subscription, throwError as observableThrowError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
 
 interface TemplateDirectives {
 	name: string;
 	subDirectives?: TemplateDirectives[];
 }
 
-enum DirectiveId {
+interface APIDirectives {
+	component: string;
+	directives: AttributeDirective[];
+}
+
+enum StructuralDirectives {
 	TOOLBAR = 'ovToolbar',
 	TOOLBAR_BUTTONS = 'ovToolbarAdditionalButtons',
 	PANEL = 'ovPanel',
 	CHAT_PANEL = 'ovChatPanel',
 	PARTICIPANTS_PANEL = 'ovParticipantsPanel',
 	PARTICIPANTS_PANEL_ITEM = 'ovParticipantPanelItem',
-	PARTICIPANTS_PANEL_ITEM_ELEMENT = 'ovParticipantPanelItemElements',
+	PARTICIPANTS_PANEL_ITEM_ELEMENTS = 'ovParticipantPanelItemElements',
 	LAYOUT = 'ovLayout',
 	STREAM = 'ovStream'
 }
 
+export enum AttributeDirective {
+	// MINIMAL = 'minimal',
+	// PARTICIPANT_NAME = 'participantName',
+	// PREJOIN = 'prejoin',
+	// VIDEO_MUTED = 'videoMuted',
+	// AUDIO_MUTED = 'audioMuted',
+	TOOLBAR_SCREENSHARE = 'screenshareButton',
+	TOOLBAR_FULLSCREEN = 'fullscreenButton',
+	TOOLBAR_LEAVE = 'leaveButton',
+	TOOLBAR_PARTICIPANTS_PANEL = 'participantsPanelButton',
+	TOOLBAR_CHAT_PANEL = 'chatPanelButton',
+	TOOLBAR_DISPLAY_SESSION = 'displaySessionName',
+	TOOLBAR_DISPLAY_LOGO = 'displayLogo',
+	STREAM_PARTICIPANT_NAME = 'displayParticipantName',
+	STREAM_AUDIO_DETECTION = 'displayAudioDetection',
+	STREAM_SETTINGS = 'settingsButton',
+	PARTICIPANT_ITEM_MUTE = 'muteButton'
+}
+
 @Component({
 	selector: 'app-testing',
 	templateUrl: './testing.component.html',
@@ -31,30 +55,56 @@ export class TestingComponent implements OnInit {
 	OPENVIDU_SERVER_URL = 'https://localhost:4443';
 	OPENVIDU_SERVER_SECRET = 'MY_SECRET';
 	sessionId: string;
-	directives: TemplateDirectives[] = [
+	templateDirectives: TemplateDirectives[] = [
 		{
-			name: 'ovToolbar',
-			subDirectives: [{ name: 'ovToolbarAdditionalButtons' }]
+			name: StructuralDirectives.TOOLBAR,
+			subDirectives: [{ name: StructuralDirectives.TOOLBAR_BUTTONS }]
 		},
-
 		{
-			name: 'ovPanel',
+			name: StructuralDirectives.PANEL,
 			subDirectives: [
-				{ name: 'ovChatPanel' },
+				{ name: StructuralDirectives.CHAT_PANEL },
 				{
-					name: 'ovParticipantsPanel',
+					name: StructuralDirectives.PARTICIPANTS_PANEL,
 					subDirectives: [
 						{
-							name: 'ovParticipantPanelItem',
-							subDirectives: [{ name: 'ovParticipantPanelItemElements' }]
+							name: StructuralDirectives.PARTICIPANTS_PANEL_ITEM,
+							subDirectives: [{ name: StructuralDirectives.PARTICIPANTS_PANEL_ITEM_ELEMENTS }]
 						}
 					]
 				}
 			]
 		},
 		{
-			name: 'ovLayout',
-			subDirectives: [{ name: 'ovStream' }]
+			name: StructuralDirectives.LAYOUT,
+			subDirectives: [{ name: StructuralDirectives.STREAM }]
+		}
+	];
+
+	apiDirectives: APIDirectives[] = [
+		{
+			component: StructuralDirectives.TOOLBAR,
+			directives: [
+				AttributeDirective.TOOLBAR_CHAT_PANEL,
+				AttributeDirective.TOOLBAR_DISPLAY_LOGO,
+				AttributeDirective.TOOLBAR_DISPLAY_SESSION,
+				AttributeDirective.TOOLBAR_FULLSCREEN,
+				AttributeDirective.TOOLBAR_LEAVE,
+				AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL,
+				AttributeDirective.TOOLBAR_SCREENSHARE
+			]
+		},
+		{
+			component: StructuralDirectives.STREAM,
+			directives: [
+				AttributeDirective.STREAM_AUDIO_DETECTION,
+				AttributeDirective.STREAM_PARTICIPANT_NAME,
+				AttributeDirective.STREAM_SETTINGS
+			]
+		},
+		{
+			component: StructuralDirectives.PARTICIPANTS_PANEL_ITEM,
+			directives: [AttributeDirective.PARTICIPANT_ITEM_MUTE]
 		}
 	];
 
@@ -68,17 +118,43 @@ export class TestingComponent implements OnInit {
 	ovParticipantPanelItemElementsSelected = false;
 	ovLayoutSelected = false;
 	ovStreamSelected = false;
+
+	displayLogo = true;
+	chatPanelBtn = true;
+	displaySessionId = true;
+	fullscreenBtn = true;
+	leaveBtn = true;
+	participantsPanelBtn = true;
+	screenshareBtn = true;
+
+	audioDetection = true;
+	participantName = true;
+	settingsBtn = true;
+	participantItemMuteBtn = true;
+
 	tokens: { webcam: any; screen: any };
 
-	constructor(private httpClient: HttpClient) {}
+	subscription: Subscription;
 
-	async ngOnInit() {
-		this.sessionId = `testingSession-${(Math.random() + 1).toString(36).substring(7)}`;
+	constructor(private httpClient: HttpClient, private route: ActivatedRoute) {}
 
-		this.tokens = {
-			webcam: await this.getToken(this.sessionId),
-			screen: await this.getToken(this.sessionId)
-		};
+	ngOnInit() {
+		this.subscription = this.route.queryParams.subscribe(async (params) => {
+
+			console.warn(params);
+			if(params?.sessionId) {
+				this.sessionId = params.sessionId
+			} else {
+				this.sessionId = `testingSession-${(Math.random() + 1).toString(36).substring(7)}`;
+			}
+
+			console.warn('SESSION ID', this.sessionId)
+			this.tokens = {
+				webcam: await this.getToken(this.sessionId),
+				screen: await this.getToken(this.sessionId)
+			};
+		});
+		this.subscription.unsubscribe();
 	}
 
 	appendElement(id: string) {
@@ -87,49 +163,92 @@ export class TestingComponent implements OnInit {
 		const element = document.createElement('div');
 		element.setAttribute('id', id);
 		element.setAttribute('style', 'height: 1px;');
-		eventsDiv.appendChild(element);
+		eventsDiv?.appendChild(element);
 	}
 
 	updateSelection(id: string, value: boolean) {
 		switch (id) {
-			case DirectiveId.TOOLBAR:
+			case StructuralDirectives.TOOLBAR:
 				this.ovToolbarSelected = value;
 				break;
 
-			case DirectiveId.TOOLBAR_BUTTONS:
+			case StructuralDirectives.TOOLBAR_BUTTONS:
 				this.ovToolbarAdditionalButtonsSelected = value;
 				break;
 
-			case DirectiveId.PANEL:
+			case StructuralDirectives.PANEL:
 				this.ovPanelSelected = value;
 				break;
 
-			case DirectiveId.CHAT_PANEL:
+			case StructuralDirectives.CHAT_PANEL:
 				this.ovChatPanelSelected = value;
 				break;
 
-			case DirectiveId.PARTICIPANTS_PANEL:
+			case StructuralDirectives.PARTICIPANTS_PANEL:
 				this.ovParticipantsPanelSelected = value;
 				break;
 
-			case DirectiveId.PARTICIPANTS_PANEL_ITEM:
+			case StructuralDirectives.PARTICIPANTS_PANEL_ITEM:
 				this.ovParticipantPanelItemSelected = value;
 				break;
 
-			case DirectiveId.PARTICIPANTS_PANEL_ITEM_ELEMENT:
+			case StructuralDirectives.PARTICIPANTS_PANEL_ITEM_ELEMENTS:
 				this.ovParticipantPanelItemElementsSelected = value;
 				break;
 
-			case DirectiveId.LAYOUT:
+			case StructuralDirectives.LAYOUT:
 				this.ovLayoutSelected = value;
 				break;
 
-			case DirectiveId.STREAM:
+			case StructuralDirectives.STREAM:
 				this.ovStreamSelected = value;
 				break;
 		}
 	}
 
+	updateApiDirective(id: string, value: boolean) {
+		switch (id) {
+			case AttributeDirective.TOOLBAR_CHAT_PANEL:
+				this.chatPanelBtn = value;
+				break;
+
+			case AttributeDirective.TOOLBAR_DISPLAY_LOGO:
+				this.displayLogo = value;
+				break;
+
+			case AttributeDirective.TOOLBAR_DISPLAY_SESSION:
+				this.displaySessionId = value;
+				break;
+
+			case AttributeDirective.TOOLBAR_FULLSCREEN:
+				this.fullscreenBtn = value;
+				break;
+
+			case AttributeDirective.TOOLBAR_LEAVE:
+				this.leaveBtn = value;
+				break;
+			case AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL:
+				this.participantsPanelBtn = value;
+				break;
+			case AttributeDirective.TOOLBAR_SCREENSHARE:
+				this.screenshareBtn = value;
+				break;
+			case AttributeDirective.STREAM_AUDIO_DETECTION:
+				this.audioDetection = value;
+				break;
+			case AttributeDirective.STREAM_PARTICIPANT_NAME:
+				this.participantName = value;
+				break;
+
+			case AttributeDirective.STREAM_SETTINGS:
+				this.settingsBtn = value;
+				break;
+			case AttributeDirective.PARTICIPANT_ITEM_MUTE:
+				this.participantItemMuteBtn = value;
+				break;
+		}
+	}
+
 	apply() {
 		this.showDirectives = false;
 	}
@@ -151,7 +270,7 @@ export class TestingComponent implements OnInit {
 		return await this.createToken(id);
 	}
 
-	createSession(sessionId) {
+	createSession(sessionId: string) {
 		return new Promise((resolve, reject) => {
 			const body = JSON.stringify({ customSessionId: sessionId });
 			const options = {