mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Updated test app
csantosm
parent
8382aaf179
commit
2dff8faf4b
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div>HOLA?</div>
|
||||
<div *ovChatPanel>
|
||||
<ov-chat-panel></ov-chat-panel>
|
||||
</div>
|
||||
</div>
|
||||
<ov-panel *ovPanel>
|
||||
<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
|
||||
<div *ovParticipantsPanel id="my-participants-panel">This is my custom participants panel</div>
|
||||
</ov-panel>
|
||||
</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 {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,30 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { Component } from '@angular/core';
|
||||
import { TokenModel } from 'openvidu-angular';
|
||||
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">
|
||||
<ov-participant-panel-item [participant]="participant"></ov-participant-panel-item>
|
||||
|
||||
<div *ovParticipantPanelItem="let participant" style="display: flex">
|
||||
<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>Item 2</button>
|
||||
<button mat-menu-item>Button 1</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) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.subscribeToParticipants();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.localParticipantSubs.unsubscribe();
|
||||
this.remoteParticipantsSubs.unsubscribe();
|
||||
}
|
||||
constructor(private restService: RestService) {}
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<ul id="local">
|
||||
<li>{{ localParticipant.nickname }}</li>
|
||||
</ul>
|
||||
|
||||
<ul id="remote">
|
||||
<li *ngFor="let p of remoteParticipants">{{ p.nickname }}</li>
|
||||
</ul>
|
||||
<div *ovParticipantPanelItemElements="let participant">
|
||||
<button *ngIf="participant.local" (click)="leaveSession()">Leave</button>
|
||||
</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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue