openvidu-components: Updated test app

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

@@ -1,22 +1,95 @@
+<ov-videoconference
+	[tokens]="tokens"
+	(onJoinButtonClicked)="onJoinClicked()"
+	(onToolbarLeaveButtonClicked)="onToolbarLeaveButtonClicked()"
+	(onToolbarCameraButtonClicked)="onToolbarCameraButtonClicked()"
+	(onToolbarMicrophoneButtonClicked)="onToolbarMicrophoneButtonClicked()"
+	(onToolbarScreenshareButtonClicked)="onToolbarScreenshareButtonClicked()"
+	(onToolbarFullscreenButtonClicked)="onToolbarFullscreenButtonClicked()"
+	(onToolbarParticipantsPanelButtonClicked)="onToolbarParticipantsPanelButtonClicked()"
+	(onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()"
+	[prejoin]="false"
+>
 
-<ov-videoconference (onJoinClicked)="onJoinClicked()" [tokens]="tokens">
+<!-- <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 toolbar (onCamClicked)="onCamClicked()"></ov-toolbar> -->
+</ov-toolbar> -->
 
-
-	<!-- <ov-toolbar panel (onCamClicked)="onCamClicked()"></ov-toolbar> -->
-	<!-- <ov-toolbar chatPanel (onCamClicked)="onCamClicked()"></ov-toolbar> -->
-	<!-- <ov-toolbar participantsPanel (onCamClicked)="onCamClicked()"></ov-toolbar> -->
-
-
-	<!-- <ov-toolbar layout (onCamClicked)="onCamClicked()"></ov-toolbar> -->
-
-	<!-- <div *ovStream="let stream">
-
-		<p>{{stream.videoEnlarged}}</p>
-		<ov-stream [stream]="stream"></ov-stream>
+	<!-- <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> -->
+
+	<!-- <ov-toolbar chatPanel (onCamClicked)="onCamClicked()"></ov-toolbar> -->
+
+	<!-- <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,4 +1,4 @@
-import { Component, ContentChild, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RestService } from '../services/rest.service';
 import { Router } from '@angular/router';
 @Component({
@@ -7,9 +7,8 @@ import { Router } from '@angular/router';
 	styleUrls: ['./call.component.scss']
 })
 export class CallComponent implements OnInit {
-
-
-	sessionId = 'prueba-majestuosa-amable';
+	value = true;
+	sessionId = 'qqqq';
 	tokens: { webcam: string; screen: string };
 
 	joinSessionClicked: boolean = false;
@@ -18,35 +17,71 @@ export class CallComponent implements OnInit {
 
 	constructor(private restService: RestService, private router: Router) {}
 
-	ngOnInit() {
-		// this.onJoinClicked();
+	async ngOnInit() {
+		this.tokens = {
+			webcam: await this.restService.getToken(this.sessionId),
+			screen: await this.restService.getToken(this.sessionId)
+		};
 	}
 
 	async onJoinClicked() {
+		console.warn('VC JOIN BUTTON CLICKED');
+
 		this.tokens = {
 			webcam: await this.restService.getToken(this.sessionId),
 			screen: await this.restService.getToken(this.sessionId)
 		};
 
-		// this.joinSessionClicked = true;
-		// this.isSessionAlive = true;
-	}
-	onCloseClicked() {
-		this.closeClicked = true;
-		this.router.navigate([`/`]);
+		// setInterval(() => {
+		// 	this.value = !this.value;
+		// }, 1000);
 	}
 
-	onMicClicked() {}
-
-	onCamClicked() {
-		console.log('APP: CAM CLIKED')
+	onToolbarCameraButtonClicked() {
+		console.warn('VC camera CLICKED');
+	}
+	onToolbarMicrophoneButtonClicked() {
+		console.warn('VC microphone CLICKED');
+	}
+	onToolbarScreenshareButtonClicked() {
+		console.warn('VC screenshare CLICKED');
+	}
+	onToolbarFullscreenButtonClicked() {
+		console.warn('VC fullscreen CLICKED');
+	}
+	onToolbarParticipantsPanelButtonClicked() {
+		console.warn('VC participants CLICKED');
+	}
+	onToolbarChatPanelButtonClicked() {
+		console.warn('VC chat CLICKED');
 	}
 
-	onScreenShareClicked() {}
-
-	onSpeakerLayoutClicked() {}
-
-	onLeaveSessionClicked() {
+	onToolbarLeaveButtonClicked() {
 		this.isSessionAlive = false;
+		console.log('VC LEAVE BUTTON CLICKED');
+	}
+
+	onCameraButtonClicked() {
+		console.warn('TOOLBAR camera CLICKED');
+	}
+	onMicrophoneButtonClicked() {
+		console.warn('TOOLBAR microphone CLICKED');
+	}
+	onScreenshareButtonClicked() {
+		console.warn('TOOLBAR screenshare CLICKED');
+	}
+	onFullscreenButtonClicked() {
+		console.warn('TOOLBAR fullscreen CLICKED');
+	}
+	onParticipantsPanelButtonClicked() {
+		console.warn('TOOLBAR participants CLICKED');
+	}
+	onChatPanelButtonClicked() {
+		console.warn('TOOLBAR chat CLICKED');
+	}
+
+	onLeaveButtonClicked() {
+		this.isSessionAlive = false;
+		console.log('TOOLBAR LEAVE CLICKED');
 	}
 }

openvidu-components-angular/src/environments/environment.prod.ts

@@ -1,6 +1,3 @@
 export const environment = {
   production: true,
-  // The webcomponent build will use this environment.
-  // Wee need this flag for settings a delay in the layout for correct behaviour
-  webcomponent: true
 };

openvidu-components-angular/src/environments/environment.ts

@@ -4,7 +4,6 @@
 
 export const environment = {
   production: false,
-  webcomponent: true
 };
 
 /*

openvidu-components-angular/src/styles.scss

@@ -36,9 +36,8 @@ $openvidu-components-theme: mat.define-light-theme((
 @include mat.all-component-themes($openvidu-components-theme);
 
 
-// Custom openvidu-components colors
+// Custom openvidu-components styles
 :root {
-
   --ov-primary-color: #303030;
   --ov-secondary-color: #586063;
   --ov-tertiary-color: #598eff;