ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Renamed participant input to stream

pull/707/head
csantosm 2022-02-07 10:43:21 +01:00
parent 51c63fa4c5
commit 28fe810f06
9 changed files with 47 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html
View File

@ -2,10 +2,10 @@
<div
class="OT_root OT_publisher"
id="localUser"
*ngFor="let connection of localParticipant | connections"
[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
*ngFor="let stream of localParticipant | connections"
[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
>
<ng-container *ngTemplateOutlet="streamTemplate; context: { stream: connection }"></ng-container>
<ng-container *ngTemplateOutlet="streamTemplate; context: { stream: stream }"></ng-container>
</div>
<!-- <ng-template #stream let-stream="stream">
<p>{{prueba.videoEnlarged}}</p>
@ -13,11 +13,11 @@
</ng-template> -->
<div
*ngFor="let connection of remoteParticipants | connections"
*ngFor="let stream of remoteParticipants | connections"
class="OT_root OT_publisher"
id="remote-participant"
[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
>
<ng-container *ngTemplateOutlet="streamTemplate; context: { stream: connection }"></ng-container>
<ng-container *ngTemplateOutlet="streamTemplate; context: { stream: stream }"></ng-container>
</div>
</div>

26
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
View File

@ -1,21 +1,21 @@
<div
*ngIf="this._participant"
*ngIf="this._stream"
class="OT_widget-container"
[id]="'container-' + this._participant.streamManager?.stream?.streamId"
[id]="'container-' + this._stream.streamManager?.stream?.streamId"
#streamComponent
>
<div class="nickname" [class.fullscreen]="isFullscreen">
<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
<span id="nickname">{{ this._participant.nickname }}</span>
<span *ngIf="_participant.local || (_participant.streamManager && !_participant.streamManager?.remote)"> (edit)</span>
<span id="nickname">{{ this._stream.nickname }}</span>
<span *ngIf="_stream.local || (_stream.streamManager && !_stream.streamManager?.remote)"> (edit)</span>
</div>
<div *ngIf="toggleNickname && !this._participant.streamManager?.remote" [class.fullscreen]="isFullscreen" id="dialogNickname">
<div *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="dialogNickname">
<form id="nicknameForm">
<mat-form-field color="primary">
<input
matInput
#nicknameInput
placeholder="Nick: {{ this._participant.nickname }}"
placeholder="Nick: {{ this._stream.nickname }}"
[formControl]="nicknameFormControl"
[errorStateMatcher]="matcher"
(keypress)="eventKeyPress($event)"
@ -33,18 +33,18 @@
<ov-video
(dblclick)="toggleVideoSize()"
[streamManager]="this._participant.streamManager"
[streamManager]="this._stream.streamManager"
[mutedSound]="mutedSound"
(toggleVideoSizeEvent)="toggleVideoSize($event)"
></ov-video>
<div class="status-icons">
<!-- <div id="statusMic" *ngIf="!this._participant.streamManager?.stream?.audioActive">
<!-- <div id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive">
<mat-icon>mic_off</mat-icon>
</div> -->
<button mat-icon-button id="statusMic" *ngIf="!this._participant.streamManager?.stream?.audioActive" disabled>
<button mat-icon-button id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive" disabled>
<mat-icon>mic_off</mat-icon>
</button>
</div>
@ -53,7 +53,7 @@
<!-- Custom stream notifications -->
<ng-container *ngIf="notificationTemplate">
<ng-container *ngTemplateOutlet="notificationTemplate; context: { stream: _participant }"></ng-container>
<ng-container *ngTemplateOutlet="notificationTemplate; context: { stream: _stream }"></ng-container>
</ng-container>
<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="Settings" aria-label="Video settings menu">
@ -66,14 +66,14 @@
<span *ngIf="videoSizeIcon === videoSizeIconEnum.NORMAL">Zoom out</span>
<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span>
</button>
<button mat-menu-item id="volumeButton" *ngIf="this._participant.streamManager?.remote" (click)="toggleSound()">
<button mat-menu-item id="volumeButton" *ngIf="this._stream.streamManager?.remote" (click)="toggleSound()">
<mat-icon *ngIf="!mutedSound">volume_up</mat-icon>
<span *ngIf="!mutedSound">Mute sound</span>
<mat-icon *ngIf="mutedSound">volume_off</mat-icon>
<span *ngIf="mutedSound">Unmute sound</span>
</button>
<!-- <button mat-menu-item *ngIf="this._participant.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()">
<!-- <button mat-menu-item *ngIf="this._stream.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()">
<mat-icon *ngIf="!isFullscreenEnabled">fullscreen</mat-icon>
<span *ngIf="!isFullscreenEnabled">Fullscreen</span>
@ -85,7 +85,7 @@
mat-menu-item
(click)="replaceScreenTrack()"
id="changeScreenButton"
*ngIf="!this._participant.streamManager?.remote && this._participant.streamManager?.stream?.typeOfVideo === videoTypeEnum.SCREEN"
*ngIf="!this._stream.streamManager?.remote && this._stream.streamManager?.stream?.typeOfVideo === videoTypeEnum.SCREEN"
>
<mat-icon>picture_in_picture</mat-icon>
<span>Replace screen</span>

24
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
View File

@ -31,7 +31,7 @@ export class StreamComponent implements OnInit {
toggleNickname: boolean;
nicknameFormControl: FormControl;
matcher: NicknameMatcher;
_participant: StreamModel;
_stream: StreamModel;
@ViewChild('streamComponent', { read: ViewContainerRef }) streamComponent: ViewContainerRef;
@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
@ -56,10 +56,10 @@ export class StreamComponent implements OnInit {
@Input()
set participant(participant: StreamModel) {
this._participant = participant;
this.checkVideoSizeBigIcon(participant.videoEnlarged);
this.nicknameFormControl = new FormControl(this._participant.nickname, [Validators.maxLength(25), Validators.required]);
set stream(stream: StreamModel) {
this._stream = stream;
this.checkVideoSizeBigIcon(this._stream.videoEnlarged);
this.nicknameFormControl = new FormControl(this._stream.nickname, [Validators.maxLength(25), Validators.required]);
}
@ViewChild('nicknameInput')
@ -87,11 +87,11 @@ export class StreamComponent implements OnInit {
this.documentService.toggleBigElementClass(element);
if (!!this._participant.streamManager?.stream?.connection?.connectionId) {
if (this.openViduWebRTCService.isMyOwnConnection(this._participant.streamManager?.stream?.connection?.connectionId)) {
this.participantService.toggleZoom(this._participant.streamManager?.stream?.connection?.connectionId);
if (!!this._stream.streamManager?.stream?.connection?.connectionId) {
if (this.openViduWebRTCService.isMyOwnConnection(this._stream.streamManager?.stream?.connection?.connectionId)) {
this.participantService.toggleZoom(this._stream.streamManager?.stream?.connection?.connectionId);
} else {
this.participantService.toggleUserZoom(this._participant.streamManager?.stream?.connection?.connectionId);
this.participantService.toggleUserZoom(this._stream.streamManager?.stream?.connection?.connectionId);
}
}
this.layoutService.update();
@ -102,7 +102,7 @@ export class StreamComponent implements OnInit {
this.menuTrigger.closeMenu();
return;
}
this.cdkSrv.setSelector('#container-' + this._participant.streamManager?.stream?.streamId);
this.cdkSrv.setSelector('#container-' + this._stream.streamManager?.stream?.streamId);
this.menuTrigger.openMenu();
}
@ -111,7 +111,7 @@ export class StreamComponent implements OnInit {
}
toggleNicknameForm() {
if (this._participant.local) {
if (this._stream.local) {
this.toggleNickname = !this.toggleNickname;
}
}
@ -119,7 +119,7 @@ export class StreamComponent implements OnInit {
eventKeyPress(event) {
if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
const nickname = this.nicknameFormControl.value;
this.participantService.setNickname(this._participant.connectionId, nickname);
this.participantService.setNickname(this._stream.connectionId, nickname);
this.storageService.set(Storage.USER_NICKNAME, nickname);
this.openViduWebRTCService.sendSignal(Signal.NICKNAME_CHANGED, undefined, {clientData: nickname});
this.toggleNicknameForm();

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
View File

@ -22,14 +22,14 @@
<mat-spinner></mat-spinner>
</div>
<div class="videoContainer" *ngIf="!isLoading">
<div *ngFor="let connection of localParticipant | connections">
<div *ngFor="let stream of localParticipant | connections">
<!-- Only webcam video will be shown if webcamera is available -->
<ov-video
*ngIf="(connection.type === 'CAMERA' && hasVideoDevices) || connection.type === 'SCREEN'"
[streamManager]="connection.streamManager"
[ngClass]="{ ovVideoSmall: localParticipant.connections.size > 1 && connection.type === 'CAMERA' }"
*ngIf="(stream.type === 'CAMERA' && hasVideoDevices) || stream.type === 'SCREEN'"
[streamManager]="stream.streamManager"
[ngClass]="{ ovVideoSmall: localParticipant.connections.size > 1 && stream.type === 'CAMERA' }"
></ov-video>
<div class="cameraMessageContainer" *ngIf="connection.type === 'CAMERA' && !hasVideoDevices">
<div class="cameraMessageContainer" *ngIf="stream.type === 'CAMERA' && !hasVideoDevices">
<span *ngIf="!hasVideoDevices && !hasAudioDevices">Oops! Camera and microphone are not available</span>
<span *ngIf="!hasVideoDevices && hasAudioDevices">Oops! Camera is not available</span>
<span *ngIf="hasVideoDevices && !hasAudioDevices">Oops! Microphone is not available</span>

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
View File

@ -85,7 +85,7 @@
<!-- Default stream component if custom component is not injected -->
<!-- We must to bind a context for the 'participant' input property -->
<ng-template #defaultStream>
<ov-stream [participant]="stream"></ov-stream>
<ov-stream [stream]="stream"></ov-stream>
</ng-template>
</ng-template>
</ov-layout>

1
openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts
View File

@ -31,7 +31,6 @@ export class ParticipantService {
constructor(protected loggerSrv: LoggerService) {
this.log = this.loggerSrv.get('ParticipantService');
// this.participantsObs = this._participants.asObservable();
this.localParticipantObs = this._localParticipant.asObservable();
this.remoteParticipantsObs = this._remoteParticipants.asObservable();

2
openvidu-components-angular/src/app/components/stream-test/stream-test.component.html
View File

@ -31,7 +31,7 @@
<div id="stream-test-container">
<ov-stream [participant]="participant"></ov-stream>
<ov-stream [stream]="stream"></ov-stream>
</div>

4
openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts
View File

@ -8,11 +8,11 @@ import { ParticipantModel } from 'openvidu-angular';
})
export class StreamTestComponent implements OnInit {
participant: ParticipantModel;
stream: ParticipantModel;
constructor() { }
ngOnInit(): void {
this.participant = new ParticipantModel();
this.stream = new ParticipantModel();
}
}

8
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

@ -44,8 +44,14 @@
<!-- <ng-template #stream let-stream="stream">
<ov-stream postion="top" [participant]="stream">
<ov-stream postion="top" [stream]="stream">
<button network-quality> hola</button>
<ng-template #notification>
<button mat-icon-button id="hand-notification" *ngIf="stream.videoEnlarged">
<mat-icon>front_hand</mat-icon>
</button>
</ng-template>
</ov-stream>
</ng-template> -->