mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Refactored nickname container
csantosm
parent
8f2d598236
commit
b529f6edc6
|
|
@ -252,7 +252,7 @@ export class SessionComponent implements OnInit {
|
|||
|
||||
if (isRemoteConnection) {
|
||||
const nickname = this.participantService.getNicknameFromConnectionData(event.data);
|
||||
this.participantService.setNickname(connectionId, nickname);
|
||||
this.participantService.setRemoteNickname(connectionId, nickname);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,9 +21,10 @@
|
|||
border-radius: var(--ov-panel-radius);
|
||||
}
|
||||
|
||||
#dialogNickname {
|
||||
#nickname-input-container {
|
||||
background-color: #0000005e;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
|
||||
}
|
||||
|
||||
#closeButton {
|
||||
|
|
|
|||
|
|
@ -8,26 +8,17 @@
|
|||
<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
|
||||
<span id="nickname" *ngIf="this._stream.type === 'CAMERA'">{{ this._stream.participant.nickname }}</span>
|
||||
<span id="nickname" *ngIf="this._stream.type === 'SCREEN'">{{ this._stream.participant.nickname }}_SCREEN</span>
|
||||
|
||||
<span *ngIf="_stream.local || (_stream.streamManager && !_stream.streamManager?.remote)"> (edit)</span>
|
||||
</div>
|
||||
<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._stream.nickname }}"
|
||||
[formControl]="nicknameFormControl"
|
||||
[errorStateMatcher]="matcher"
|
||||
(keypress)="eventKeyPress($event)"
|
||||
autocomplete="off"
|
||||
(focusout)="toggleNicknameForm()"
|
||||
/>
|
||||
<mat-error *ngIf="nicknameFormControl.hasError('required')"> Nickname is <strong>required</strong> </mat-error>
|
||||
<mat-error *ngIf="nicknameFormControl.hasError('maxlength')"> Nickname is <strong>too long!</strong> </mat-error>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<div *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="nickname-input-container">
|
||||
<input
|
||||
matInput
|
||||
#nicknameInput
|
||||
autocomplete="off"
|
||||
maxlength="20"
|
||||
[(ngModel)]="this.nickname"
|
||||
(keypress)="updateNickname($event)"
|
||||
(focusout)="updateNickname($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -41,16 +32,13 @@
|
|||
[mutedSound]="_stream?.participant?.isMutedForcibly"
|
||||
></ov-video>
|
||||
|
||||
|
||||
<div class="status-icons">
|
||||
|
||||
<button mat-icon-button id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive" disabled>
|
||||
<mat-icon>mic_off</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="videoButtons" *ngIf="showSettings">
|
||||
|
||||
<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="Settings" aria-label="Video settings menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, Validators } from '@angular/forms';
|
||||
import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
|
||||
import { NicknameMatcher } from '../../matchers/nickname.matcher';
|
||||
import { VideoSizeIcon } from '../../models/icon.model';
|
||||
|
|
@ -24,9 +23,8 @@ export class StreamComponent implements OnInit {
|
|||
videoTypeEnum = VideoType;
|
||||
videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;
|
||||
toggleNickname: boolean;
|
||||
nicknameFormControl: FormControl;
|
||||
matcher: NicknameMatcher;
|
||||
_stream: StreamModel;
|
||||
nickname: string;
|
||||
private _streamContainer: ElementRef;
|
||||
@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
|
||||
@ViewChild('menu') menu: MatMenuPanel;
|
||||
|
|
@ -61,7 +59,7 @@ export class StreamComponent implements OnInit {
|
|||
this._stream = stream;
|
||||
this.checkVideoEnlarged();
|
||||
if(this._stream.participant) {
|
||||
this.nicknameFormControl = new FormControl(this._stream.participant.nickname, [Validators.maxLength(25), Validators.required]);
|
||||
this.nickname = this._stream.participant.nickname;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +71,6 @@ export class StreamComponent implements OnInit {
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.matcher = new NicknameMatcher();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
@ -111,12 +108,13 @@ export class StreamComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
eventKeyPress(event) {
|
||||
if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
|
||||
const nickname = this.nicknameFormControl.value;
|
||||
this.participantService.setNickname(this._stream.connectionId, nickname);
|
||||
this.storageService.setNickname(nickname);
|
||||
this.openviduService.sendSignal(Signal.NICKNAME_CHANGED, undefined, { clientData: nickname });
|
||||
updateNickname(event) {
|
||||
if (event?.keyCode === 13 || event?.type === 'focusout') {
|
||||
if(!!this.nickname){
|
||||
this.participantService.setMyNickname(this.nickname);
|
||||
this.storageService.setNickname(this.nickname);
|
||||
this.openviduService.sendSignal(Signal.NICKNAME_CHANGED, undefined, { clientData: this.nickname });
|
||||
}
|
||||
this.toggleNicknameForm();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
|
|||
localParticipant: ParticipantAbstractModel;
|
||||
columns: number;
|
||||
|
||||
nicknameFormControl = new FormControl('', [Validators.maxLength(25), Validators.required]);
|
||||
nicknameFormControl = new FormControl('', [Validators.maxLength(20), Validators.required]);
|
||||
matcher = new NicknameMatcher();
|
||||
hasVideoDevices: boolean;
|
||||
hasAudioDevices: boolean;
|
||||
|
|
@ -223,7 +223,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
|
|||
joinSession() {
|
||||
if (this.nicknameFormControl.valid) {
|
||||
const nickname = this.nicknameFormControl.value;
|
||||
this.participantService.setNickname(this.participantService.getMyCameraConnectionId(), nickname);
|
||||
this.participantService.setMyNickname(nickname);
|
||||
this.storageSrv.setNickname(nickname);
|
||||
return this.onJoinClicked.emit();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,17 +100,9 @@ export class ParticipantService {
|
|||
this.updateLocalParticipant();
|
||||
}
|
||||
|
||||
setNickname(connectionId: string, nickname: string) {
|
||||
if (this.localParticipant.hasConnectionId(connectionId)) {
|
||||
this.localParticipant.setNickname(nickname);
|
||||
// this.updateLocalParticipant();
|
||||
} else {
|
||||
const participant = this.getRemoteParticipantByConnectionId(connectionId);
|
||||
if (participant) {
|
||||
participant.setNickname(nickname);
|
||||
// this.updateRemoteParticipants();
|
||||
}
|
||||
}
|
||||
setMyNickname(nickname: string) {
|
||||
this.localParticipant.setNickname(nickname);
|
||||
// this.updateLocalParticipant();
|
||||
}
|
||||
|
||||
getMyNickname(): string {
|
||||
|
|
@ -286,6 +278,14 @@ export class ParticipantService {
|
|||
}
|
||||
}
|
||||
|
||||
setRemoteNickname(connectionId: string, nickname: string) {
|
||||
const participant = this.getRemoteParticipantByConnectionId(connectionId);
|
||||
if (participant) {
|
||||
participant.setNickname(nickname);
|
||||
// this.updateRemoteParticipants();
|
||||
}
|
||||
}
|
||||
|
||||
updateRemoteParticipants() {
|
||||
this._remoteParticipants.next(this.remoteParticipants);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue