openvidu-components: Updated test app

openvidu-components-angular/package.json

@@ -13,7 +13,7 @@
     "lib:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/angular.test.js",
     "lib:e2e-ci": "cross-env LAUNCH_MODE=CI npm run lib:e2e",
     "doc:build": "cd projects/openvidu-angular && npx compodoc -p ./doc/tsconfig.doc.json -c ./doc/.compodocrc.json",
-    "doc:clean-copy":  "rm -rf ../../openvidu.io-docs/docs/api/openvidu-angular && cp -r ./docs/openvidu-angular/ ../../openvidu.io-docs/docs/api/openvidu-angular",
+    "doc:clean-copy": "rm -rf ../../openvidu.io-docs/docs/api/openvidu-angular && cp -r ./docs/openvidu-angular/ ../../openvidu.io-docs/docs/api/openvidu-angular",
     "doc:serve": "cd projects/openvidu-angular && npx compodoc -p ./doc/tsconfig.doc.json --watch --serve -c ./doc/.compodocrc.json",
     "webcomponent:build": "./node_modules/@angular/cli/bin/ng.js build openvidu-webcomponent --configuration production && node ./openvidu-webcomponent-build.js",
     "webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/",
@@ -35,7 +35,7 @@
     "@angular/platform-browser-dynamic": "13.0.0",
     "@angular/router": "13.0.0",
     "autolinker": "3.14.3",
-    "openvidu-browser": "^2.21.0",
+    "openvidu-browser": "file:openvidu-browser-2.21.0.tgz",
     "rxjs": "7.5.4",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"

openvidu-components-angular/projects/openvidu-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openvidu-angular",
-  "version": "2.20.0",
+  "version": "2.22.0-beta2",
   "peerDependencies": {
     "@angular/animations": "^13.0.0",
     "@angular/common": "^13.0.0",

openvidu-components-angular/src/app/app.module.ts

@@ -16,9 +16,11 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { TestingComponent } from './testing-app/testing.component';
 import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component';
 import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component';
+import { ToolbarAdditionalPanelButtonsDirectiveComponent } from './examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component';
 import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component';
 import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component';
 import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component';
+import { AdditionalPanelsDirectiveComponent } from './examples/additionalPanels-directive/additionalPanels-directive.component';
 import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component';
 import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
 import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
@@ -37,9 +39,11 @@ import { ExamplesDashboardComponent } from './examples/examples-dashboard/exampl
 		ExamplesDashboardComponent,
 		ToolbarDirectiveComponent,
 		ToolbarAdditionalButtonsDirectiveComponent,
+		ToolbarAdditionalPanelButtonsDirectiveComponent,
 		LayoutDirectiveComponent,
 		StreamDirectiveComponent,
 		PanelDirectiveComponent,
+		AdditionalPanelsDirectiveComponent,
 		ParticipantsPanelDirectiveComponent,
 		ChatPanelDirectiveComponent,
 		ParticipantPanelItemDirectiveComponent,

openvidu-components-angular/src/app/app.routing.module.ts

@@ -14,6 +14,8 @@ import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chat
 
 import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
 import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
+import { ToolbarAdditionalPanelButtonsDirectiveComponent } from './examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component';
+import { AdditionalPanelsDirectiveComponent } from './examples/additionalPanels-directive/additionalPanels-directive.component';
 
 const routes: Routes = [
 	{ path: '', component: DashboardComponent },
@@ -23,9 +25,13 @@ const routes: Routes = [
 	{ path: 'examples', component: ExamplesDashboardComponent},
 	{ path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent },
 	{ path: 'examples/toolbarAdditionalButtonsDirective', component: ToolbarAdditionalButtonsDirectiveComponent },
+	{ path: 'examples/toolbarAdditionalPanelButtonsDirective', component: ToolbarAdditionalPanelButtonsDirectiveComponent },
+
 	{ path: 'examples/layoutDirective', component: LayoutDirectiveComponent },
 	{ path: 'examples/streamDirective', component: StreamDirectiveComponent },
+
 	{ path: 'examples/panelDirective', component: PanelDirectiveComponent },
+	{ path: 'examples/additionalPanelsDirective', component: AdditionalPanelsDirectiveComponent },
 	{ path: 'examples/participantsPanelDirective', component: ParticipantsPanelDirectiveComponent },
 	{ path: 'examples/chatPanelDirective', component: ChatPanelDirectiveComponent },
 	{ path: 'examples/participantPanelItemDirective', component: ParticipantPanelItemDirectiveComponent },

openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.html

@@ -7,6 +7,9 @@
 		<div class="card card-small" (click)="goTo('toolbarAdditionalButtonsDirective')" tabindex="0">
 			<span>ToolbarAdditionalButtonsDirective</span>
 		</div>
+		<div class="card card-small" (click)="goTo('toolbarAdditionalPanelButtonsDirective')" tabindex="0">
+			<span>ToolbarAdditionalPanelButtonsDirective</span>
+		</div>
 	</div>
 
 	<div class="card-container">
@@ -27,6 +30,10 @@
 			<span>PanelDirective</span>
 		</div>
 
+		<div class="card card-small" (click)="goTo('additionalPanelsDirective')" tabindex="0">
+			<span>AdditionalPanelsDirective</span>
+		</div>
+
 		<div class="card card-small" (click)="goTo('participantsPanelDirective')" tabindex="0">
 			<span>ParticipantsPanelDirective</span>
 		</div>

openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts

@@ -6,16 +6,29 @@ import { RestService } from 'src/app/services/rest.service';
 	selector: 'app-panel-directive',
 	template: `
 		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
-			<div *ovPanel>
+			<ov-panel *ovPanel>
-				<div>HOLA?</div>
+				<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
-				<div *ovChatPanel>
+				<div *ovParticipantsPanel id="my-participants-panel">This is my custom participants panel</div>
-					<ov-chat-panel></ov-chat-panel>
+			</ov-panel>
-				</div>
-			</div>
 		</ov-videoconference>
-	`
+	`,
+	styles: [
+		`
+			#my-chat-panel, #my-participants-panel {
+				text-align: center;
+				height: calc(100% - 40px);
+				margin: 20px;
+			}
+			#my-chat-panel {
+				background: #c9ffb2;
+			}
+			#my-participants-panel {
+				background: #ddf2ff;
+			}
+		`
+	]
 })
-export class PanelDirectiveComponent implements OnInit {
+export class PanelDirectiveComponent {
 	tokens: TokenModel;
 	sessionId = 'panel-directive-example';
 	OPENVIDU_URL = 'https://localhost:4443';
@@ -28,6 +41,4 @@ export class PanelDirectiveComponent implements OnInit {
 			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
 		};
 	}
-
-	ngOnInit(): void {}
 }

openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts

@@ -1,45 +1,30 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
+import { TokenModel } from 'openvidu-angular';
-import { Subscription } from 'rxjs';
 import { RestService } from 'src/app/services/rest.service';
 
 @Component({
 	selector: 'app-participantPanelItem-directive',
 	template: `
 		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
-			<div *ovParticipantPanelItem="let participant">
+			<div *ovParticipantPanelItem="let participant" style="display: flex">
-				<ov-participant-panel-item [participant]="participant"></ov-participant-panel-item>
+				<p>{{ participant.nickname }}</p>
-
 				<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
 				<mat-menu #menu="matMenu">
-					<button mat-menu-item>Item 1</button>
+					<button mat-menu-item>Button 1</button>
-					<button mat-menu-item>Item 2</button>
+					<button mat-menu-item>Button 2</button>
 				</mat-menu>
 			</div>
 		</ov-videoconference>
 	`,
 	styles: [``]
 })
-export class ParticipantPanelItemDirectiveComponent implements OnInit, OnDestroy {
+export class ParticipantPanelItemDirectiveComponent {
 	tokens: TokenModel;
 	sessionId = 'participants-panel-directive-example';
 	OPENVIDU_URL = 'https://localhost:4443';
 	OPENVIDU_SECRET = 'MY_SECRET';
-	localParticipant: ParticipantAbstractModel;
-	remoteParticipants: ParticipantAbstractModel[];
-	localParticipantSubs: Subscription;
-	remoteParticipantsSubs: Subscription;
 
-	constructor(private restService: RestService, private participantService: ParticipantService) {}
+	constructor(private restService: RestService) {}
-
-	ngOnInit(): void {
-		this.subscribeToParticipants();
-	}
-
-	ngOnDestroy() {
-		this.localParticipantSubs.unsubscribe();
-		this.remoteParticipantsSubs.unsubscribe();
-	}
 
 	async onJoinButtonClicked() {
 		this.tokens = {
@@ -47,14 +32,4 @@ export class ParticipantPanelItemDirectiveComponent implements OnInit, OnDestroy
 			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
 		};
 	}
-
-	subscribeToParticipants() {
-		this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
-			this.localParticipant = p;
-		});
-
-		this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
-			this.remoteParticipants = participants;
-		});
-	}
 }

openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts

@@ -1,19 +1,13 @@
 import { Component } from '@angular/core';
-import { ParticipantService, TokenModel } from 'openvidu-angular';
+import { OpenViduService, TokenModel } from 'openvidu-angular';
 import { RestService } from 'src/app/services/rest.service';
 
 @Component({
 	selector: 'app-participantPanelItemElements-directive',
 	template: `
 		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
-			<div *ovParticipantsPanel id="my-panel">
+			<div *ovParticipantPanelItemElements="let participant">
-				<ul id="local">
+				<button *ngIf="participant.local" (click)="leaveSession()">Leave</button>
-					<li>{{ localParticipant.nickname }}</li>
-				</ul>
-
-				<ul id="remote">
-					<li *ngFor="let p of remoteParticipants">{{ p.nickname }}</li>
-				</ul>
 			</div>
 		</ov-videoconference>
 	`,
@@ -25,9 +19,7 @@ export class ParticipantPanelItemElementsDirectiveComponent {
 	OPENVIDU_URL = 'https://localhost:4443';
 	OPENVIDU_SECRET = 'MY_SECRET';
 
-	constructor(private restService: RestService, private participantService: ParticipantService) {}
+	constructor(private restService: RestService, private openviduService: OpenViduService) {}
-
-
 
 	async onJoinButtonClicked() {
 		this.tokens = {
@@ -36,5 +28,7 @@ export class ParticipantPanelItemElementsDirectiveComponent {
 		};
 	}
 
-
+	leaveSession() {
+		this.openviduService.disconnect();
+	}
 }

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

@@ -10,87 +10,4 @@
 	(onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()"
 	[minimal]="false"
 >
-
-
-
-<!-- <div *ovParticipantPanelItemElements>
-	<p>EXTRA INFO</p>
-</div> -->
-
-<!-- <div *ovParticipantPanelItemElements="let participant">
-	<p>N: {{participant?.nickname}}</p>
-</div>
-
-	 <ov-toolbar
-		*ovToolbar
-		[screenshareButton]="true"
-		(onLeaveButtonClicked)="onLeaveButtonClicked()"
-		(onCameraButtonClicked)="onCameraButtonClicked()"
-		(onMicrophoneButtonClicked)="onMicrophoneButtonClicked()"
-		(onScreenshareButtonClicked)="onScreenshareButtonClicked()"
-		(onFullscreenButtonClicked)="onFullscreenButtonClicked()"
-		(onParticipantsPanelButtonClicked)="onParticipantsPanelButtonClicked()"
-		(onChatPanelButtonClicked)="onChatPanelButtonClicked()"
-	>
-
-		<div *ovToolbarAdditionalButtons>
-			<button mat-icon-button>
-				<mat-icon matTooltip="Exit Fullscreen">fullscreen_exit</mat-icon>
-			</button>
-			<button mat-icon-button>
-				<mat-icon matTooltip="Exit Fullscreen">fullscreen_exit</mat-icon>
-			</button>
-		</div>
-
-
-</ov-toolbar> -->
-
-	<!-- <div *ovToolbar [screenshareButton]="value" [fullscreenButton]="value">
-		<ov-toolbar (onCamClicked)="onCamClicked()"></ov-toolbar>
-	</div> -->
-
-	<!--
-	<ov-panel *ovPanel>
-
-		<ov-chat-panel *ovChatPanel></ov-chat-panel>
-
-		<ov-participants-panel *ovParticipantsPanel>
-
-			<div *ovParticipantPanelItem="let participant">
-				<ov-participant-panel-item [participant]="participant"></ov-participant-panel-item>
-
-				<button mat-icon-button id="hand-notification" *ngIf="participant.hasHandRaised">
-					<mat-icon>front_hand</mat-icon>
-				</button>
-
-			</div>
-		</ov-participants-panel>
-	</ov-panel> -->
-
-
-	<!-- <div *ovParticipantPanelItem="let participant">
-		<ov-participant-panel-item [participant]="participant" [muteButton]="false">
-			<div *ovParticipantPanelItemElements>
-				<button mat-icon-button id="hand-notification" >
-					<mat-icon>front_hand</mat-icon>
-				</button>
-				<span> OK</span>
-			</div>
-		</ov-participant-panel-item>
-	</div> -->
-
-	<!-- <ov-layout *ovLayout >
-
-
-		<div *ovStream="let stream">
-			<p>EXTERNAL STREAM INSIDE OF LAYOUT</p>
-			<ov-stream [stream]="stream"></ov-stream>
-		</div>
-
-	</ov-layout> -->
-
-	<!-- <div *ovStream="let stream">
-		<p>EXTERNAL STREAM</p>
-		<ov-stream [stream]="stream"></ov-stream>
-	</div> -->
 </ov-videoconference>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { TokenModel } from 'dist/openvidu-angular/public-api';
 import { RestService } from '../services/rest.service';
-import { Router } from '@angular/router';
+
 @Component({
 	selector: 'app-call',
 	templateUrl: './call.component.html',
@@ -11,7 +12,7 @@ export class CallComponent implements OnInit {
 	sessionId = 'daily-call';
 	OPENVIDU_URL = 'https://localhost:4443';
 	OPENVIDU_SECRET = 'MY_SECRET';
-	tokens: { webcam: string; screen: string };
+	tokens: TokenModel;
 
 	joinSessionClicked: boolean = false;
 	closeClicked: boolean = false;
@@ -24,23 +25,13 @@ export class CallComponent implements OnInit {
 			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
 			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
 		};
+
+		console.log(this.tokens)
+
 	}
 
-	async onJoinClicked() {
+	onJoinClicked() {
 		console.warn('VC JOIN BUTTON CLICKED');
-
-		// this.tokens = {
-		// 	webcam: await this.restService.getToken(this.sessionId),
-		// 	screen: await this.restService.getToken(this.sessionId)
-		// };
-
-		console.log(await this.restService.getToken(this.sessionId))
-
-
-
-		// setInterval(() => {
-		// 	this.value = !this.value;
-		// }, 1000);
 	}
 
 	onToolbarCameraButtonClicked() {

openvidu-components-angular/src/styles.scss

@@ -40,17 +40,18 @@ $openvidu-components-theme: mat.define-light-theme((
 :root {
   --ov-primary-color: #303030;
   --ov-secondary-color: #3e3f3f;
-  --ov-secondary-light-color: #e6e6e6;
   --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-buttons-radius: 50%;
   --ov-leave-button-radius: 10px;
   --ov-video-radius: 5px;
   --ov-panel-radius: 5px;