mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Updated test app
parent
7eedba795b
commit
bb16418385
|
@ -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>
|
||||||
|
|
||||||
<!-- <ov-toolbar toolbar (onCamClicked)="onCamClicked()"></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> -->
|
</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> -->
|
||||||
|
|
||||||
|
<!-- <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>
|
</ov-videoconference>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, ContentChild, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { RestService } from '../services/rest.service';
|
import { RestService } from '../services/rest.service';
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -7,9 +7,8 @@ import { Router } from '@angular/router';
|
||||||
styleUrls: ['./call.component.scss']
|
styleUrls: ['./call.component.scss']
|
||||||
})
|
})
|
||||||
export class CallComponent implements OnInit {
|
export class CallComponent implements OnInit {
|
||||||
|
value = true;
|
||||||
|
sessionId = 'qqqq';
|
||||||
sessionId = 'prueba-majestuosa-amable';
|
|
||||||
tokens: { webcam: string; screen: string };
|
tokens: { webcam: string; screen: string };
|
||||||
|
|
||||||
joinSessionClicked: boolean = false;
|
joinSessionClicked: boolean = false;
|
||||||
|
@ -18,35 +17,71 @@ export class CallComponent implements OnInit {
|
||||||
|
|
||||||
constructor(private restService: RestService, private router: Router) {}
|
constructor(private restService: RestService, private router: Router) {}
|
||||||
|
|
||||||
ngOnInit() {
|
async ngOnInit() {
|
||||||
// this.onJoinClicked();
|
this.tokens = {
|
||||||
|
webcam: await this.restService.getToken(this.sessionId),
|
||||||
|
screen: await this.restService.getToken(this.sessionId)
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
async onJoinClicked() {
|
async onJoinClicked() {
|
||||||
|
console.warn('VC JOIN BUTTON CLICKED');
|
||||||
|
|
||||||
this.tokens = {
|
this.tokens = {
|
||||||
webcam: await this.restService.getToken(this.sessionId),
|
webcam: await this.restService.getToken(this.sessionId),
|
||||||
screen: await this.restService.getToken(this.sessionId)
|
screen: await this.restService.getToken(this.sessionId)
|
||||||
};
|
};
|
||||||
|
|
||||||
// this.joinSessionClicked = true;
|
// setInterval(() => {
|
||||||
// this.isSessionAlive = true;
|
// this.value = !this.value;
|
||||||
}
|
// }, 1000);
|
||||||
onCloseClicked() {
|
|
||||||
this.closeClicked = true;
|
|
||||||
this.router.navigate([`/`]);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMicClicked() {}
|
onToolbarCameraButtonClicked() {
|
||||||
|
console.warn('VC camera CLICKED');
|
||||||
onCamClicked() {
|
}
|
||||||
console.log('APP: CAM CLIKED')
|
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() {}
|
onToolbarLeaveButtonClicked() {
|
||||||
|
|
||||||
onSpeakerLayoutClicked() {}
|
|
||||||
|
|
||||||
onLeaveSessionClicked() {
|
|
||||||
this.isSessionAlive = false;
|
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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
Before Width: | Height: | Size: 4.8 KiB |
|
@ -1,6 +1,3 @@
|
||||||
export const environment = {
|
export const environment = {
|
||||||
production: true,
|
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
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
|
|
||||||
export const environment = {
|
export const environment = {
|
||||||
production: false,
|
production: false,
|
||||||
webcomponent: true
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -36,9 +36,8 @@ $openvidu-components-theme: mat.define-light-theme((
|
||||||
@include mat.all-component-themes($openvidu-components-theme);
|
@include mat.all-component-themes($openvidu-components-theme);
|
||||||
|
|
||||||
|
|
||||||
// Custom openvidu-components colors
|
// Custom openvidu-components styles
|
||||||
:root {
|
:root {
|
||||||
|
|
||||||
--ov-primary-color: #303030;
|
--ov-primary-color: #303030;
|
||||||
--ov-secondary-color: #586063;
|
--ov-secondary-color: #586063;
|
||||||
--ov-tertiary-color: #598eff;
|
--ov-tertiary-color: #598eff;
|
||||||
|
|
Loading…
Reference in New Issue