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 <div
class="OT_root OT_publisher" class="OT_root OT_publisher"
id="localUser" id="localUser"
*ngFor="let connection of localParticipant | connections" *ngFor="let stream of localParticipant | connections"
[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>
<!-- <ng-template #stream let-stream="stream"> <!-- <ng-template #stream let-stream="stream">
<p>{{prueba.videoEnlarged}}</p> <p>{{prueba.videoEnlarged}}</p>
@ -13,11 +13,11 @@
</ng-template> --> </ng-template> -->
<div <div
*ngFor="let connection of remoteParticipants | connections" *ngFor="let stream of remoteParticipants | connections"
class="OT_root OT_publisher" class="OT_root OT_publisher"
id="remote-participant" 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>
</div> </div>

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

@ -1,21 +1,21 @@
<div <div
*ngIf="this._participant" *ngIf="this._stream"
class="OT_widget-container" class="OT_widget-container"
[id]="'container-' + this._participant.streamManager?.stream?.streamId" [id]="'container-' + this._stream.streamManager?.stream?.streamId"
#streamComponent #streamComponent
> >
<div class="nickname" [class.fullscreen]="isFullscreen"> <div class="nickname" [class.fullscreen]="isFullscreen">
<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname"> <div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
<span id="nickname">{{ this._participant.nickname }}</span> <span id="nickname">{{ this._stream.nickname }}</span>
<span *ngIf="_participant.local || (_participant.streamManager && !_participant.streamManager?.remote)"> (edit)</span> <span *ngIf="_stream.local || (_stream.streamManager && !_stream.streamManager?.remote)"> (edit)</span>
</div> </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"> <form id="nicknameForm">
<mat-form-field color="primary"> <mat-form-field color="primary">
<input <input
matInput matInput
#nicknameInput #nicknameInput
placeholder="Nick: {{ this._participant.nickname }}" placeholder="Nick: {{ this._stream.nickname }}"
[formControl]="nicknameFormControl" [formControl]="nicknameFormControl"
[errorStateMatcher]="matcher" [errorStateMatcher]="matcher"
(keypress)="eventKeyPress($event)" (keypress)="eventKeyPress($event)"
@ -33,18 +33,18 @@
<ov-video <ov-video
(dblclick)="toggleVideoSize()" (dblclick)="toggleVideoSize()"
[streamManager]="this._participant.streamManager" [streamManager]="this._stream.streamManager"
[mutedSound]="mutedSound" [mutedSound]="mutedSound"
(toggleVideoSizeEvent)="toggleVideoSize($event)" (toggleVideoSizeEvent)="toggleVideoSize($event)"
></ov-video> ></ov-video>
<div class="status-icons"> <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> <mat-icon>mic_off</mat-icon>
</div> --> </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> <mat-icon>mic_off</mat-icon>
</button> </button>
</div> </div>
@ -53,7 +53,7 @@
<!-- Custom stream notifications --> <!-- Custom stream notifications -->
<ng-container *ngIf="notificationTemplate"> <ng-container *ngIf="notificationTemplate">
<ng-container *ngTemplateOutlet="notificationTemplate; context: { stream: _participant }"></ng-container> <ng-container *ngTemplateOutlet="notificationTemplate; context: { stream: _stream }"></ng-container>
</ng-container> </ng-container>
<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="Settings" aria-label="Video settings menu"> <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.NORMAL">Zoom out</span>
<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span> <span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span>
</button> </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> <mat-icon *ngIf="!mutedSound">volume_up</mat-icon>
<span *ngIf="!mutedSound">Mute sound</span> <span *ngIf="!mutedSound">Mute sound</span>
<mat-icon *ngIf="mutedSound">volume_off</mat-icon> <mat-icon *ngIf="mutedSound">volume_off</mat-icon>
<span *ngIf="mutedSound">Unmute sound</span> <span *ngIf="mutedSound">Unmute sound</span>
</button> </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> <mat-icon *ngIf="!isFullscreenEnabled">fullscreen</mat-icon>
<span *ngIf="!isFullscreenEnabled">Fullscreen</span> <span *ngIf="!isFullscreenEnabled">Fullscreen</span>
@ -85,7 +85,7 @@
mat-menu-item mat-menu-item
(click)="replaceScreenTrack()" (click)="replaceScreenTrack()"
id="changeScreenButton" 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> <mat-icon>picture_in_picture</mat-icon>
<span>Replace screen</span> <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; toggleNickname: boolean;
nicknameFormControl: FormControl; nicknameFormControl: FormControl;
matcher: NicknameMatcher; matcher: NicknameMatcher;
_participant: StreamModel; _stream: StreamModel;
@ViewChild('streamComponent', { read: ViewContainerRef }) streamComponent: ViewContainerRef; @ViewChild('streamComponent', { read: ViewContainerRef }) streamComponent: ViewContainerRef;
@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger; @ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
@ -56,10 +56,10 @@ export class StreamComponent implements OnInit {
@Input() @Input()
set participant(participant: StreamModel) { set stream(stream: StreamModel) {
this._participant = participant; this._stream = stream;
this.checkVideoSizeBigIcon(participant.videoEnlarged); this.checkVideoSizeBigIcon(this._stream.videoEnlarged);
this.nicknameFormControl = new FormControl(this._participant.nickname, [Validators.maxLength(25), Validators.required]); this.nicknameFormControl = new FormControl(this._stream.nickname, [Validators.maxLength(25), Validators.required]);
} }
@ViewChild('nicknameInput') @ViewChild('nicknameInput')
@ -87,11 +87,11 @@ export class StreamComponent implements OnInit {
this.documentService.toggleBigElementClass(element); this.documentService.toggleBigElementClass(element);
if (!!this._participant.streamManager?.stream?.connection?.connectionId) { if (!!this._stream.streamManager?.stream?.connection?.connectionId) {
if (this.openViduWebRTCService.isMyOwnConnection(this._participant.streamManager?.stream?.connection?.connectionId)) { if (this.openViduWebRTCService.isMyOwnConnection(this._stream.streamManager?.stream?.connection?.connectionId)) {
this.participantService.toggleZoom(this._participant.streamManager?.stream?.connection?.connectionId); this.participantService.toggleZoom(this._stream.streamManager?.stream?.connection?.connectionId);
} else { } else {
this.participantService.toggleUserZoom(this._participant.streamManager?.stream?.connection?.connectionId); this.participantService.toggleUserZoom(this._stream.streamManager?.stream?.connection?.connectionId);
} }
} }
this.layoutService.update(); this.layoutService.update();
@ -102,7 +102,7 @@ export class StreamComponent implements OnInit {
this.menuTrigger.closeMenu(); this.menuTrigger.closeMenu();
return; return;
} }
this.cdkSrv.setSelector('#container-' + this._participant.streamManager?.stream?.streamId); this.cdkSrv.setSelector('#container-' + this._stream.streamManager?.stream?.streamId);
this.menuTrigger.openMenu(); this.menuTrigger.openMenu();
} }
@ -111,7 +111,7 @@ export class StreamComponent implements OnInit {
} }
toggleNicknameForm() { toggleNicknameForm() {
if (this._participant.local) { if (this._stream.local) {
this.toggleNickname = !this.toggleNickname; this.toggleNickname = !this.toggleNickname;
} }
} }
@ -119,7 +119,7 @@ export class StreamComponent implements OnInit {
eventKeyPress(event) { eventKeyPress(event) {
if (event && event.keyCode === 13 && this.nicknameFormControl.valid) { if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
const nickname = this.nicknameFormControl.value; 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.storageService.set(Storage.USER_NICKNAME, nickname);
this.openViduWebRTCService.sendSignal(Signal.NICKNAME_CHANGED, undefined, {clientData: nickname}); this.openViduWebRTCService.sendSignal(Signal.NICKNAME_CHANGED, undefined, {clientData: nickname});
this.toggleNicknameForm(); 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> <mat-spinner></mat-spinner>
</div> </div>
<div class="videoContainer" *ngIf="!isLoading"> <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 --> <!-- Only webcam video will be shown if webcamera is available -->
<ov-video <ov-video
*ngIf="(connection.type === 'CAMERA' && hasVideoDevices) || connection.type === 'SCREEN'" *ngIf="(stream.type === 'CAMERA' && hasVideoDevices) || stream.type === 'SCREEN'"
[streamManager]="connection.streamManager" [streamManager]="stream.streamManager"
[ngClass]="{ ovVideoSmall: localParticipant.connections.size > 1 && connection.type === 'CAMERA' }" [ngClass]="{ ovVideoSmall: localParticipant.connections.size > 1 && stream.type === 'CAMERA' }"
></ov-video> ></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 and microphone are not available</span>
<span *ngIf="!hasVideoDevices && hasAudioDevices">Oops! Camera is not available</span> <span *ngIf="!hasVideoDevices && hasAudioDevices">Oops! Camera is not available</span>
<span *ngIf="hasVideoDevices && !hasAudioDevices">Oops! Microphone 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 --> <!-- Default stream component if custom component is not injected -->
<!-- We must to bind a context for the 'participant' input property --> <!-- We must to bind a context for the 'participant' input property -->
<ng-template #defaultStream> <ng-template #defaultStream>
<ov-stream [participant]="stream"></ov-stream> <ov-stream [stream]="stream"></ov-stream>
</ng-template> </ng-template>
</ng-template> </ng-template>
</ov-layout> </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) { constructor(protected loggerSrv: LoggerService) {
this.log = this.loggerSrv.get('ParticipantService'); this.log = this.loggerSrv.get('ParticipantService');
// this.participantsObs = this._participants.asObservable();
this.localParticipantObs = this._localParticipant.asObservable(); this.localParticipantObs = this._localParticipant.asObservable();
this.remoteParticipantsObs = this._remoteParticipants.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"> <div id="stream-test-container">
<ov-stream [participant]="participant"></ov-stream> <ov-stream [stream]="stream"></ov-stream>
</div> </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 { export class StreamTestComponent implements OnInit {
participant: ParticipantModel; stream: ParticipantModel;
constructor() { } constructor() { }
ngOnInit(): void { 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"> <!-- <ng-template #stream let-stream="stream">
<ov-stream postion="top" [participant]="stream"> <ov-stream postion="top" [stream]="stream">
<button network-quality> hola</button> <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> </ov-stream>
</ng-template> --> </ng-template> -->