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

openvidu-components: Updated avatar-profile component

pull/707/head
csantosm 2022-03-02 11:02:06 +01:00
parent 1279962555
commit b4decda1f5
6 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input } from '@angular/core';
@Component({ @Component({
selector: 'ov-avatar-profile', selector: 'ov-avatar-profile',
@ -9,16 +9,14 @@ import { Component, Input, OnInit } from '@angular/core';
`, `,
styleUrls: ['./avatar-profile.component.css'] styleUrls: ['./avatar-profile.component.css']
}) })
export class AvatarProfileComponent implements OnInit { export class AvatarProfileComponent {
letter: string;
color: string; @Input()
set name(nickname: string) {
@Input() letter; this.letter = nickname[0];
}
@Input() color;
constructor() {} constructor() {}
ngOnInit(): void {
this.color = `hsl(${Math.random() * 360}, 100%, 75%)`;
}
} }

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

@ -26,6 +26,12 @@
<ov-audio-wave [streamManager]="_stream.streamManager"></ov-audio-wave> <ov-audio-wave [streamManager]="_stream.streamManager"></ov-audio-wave>
</div> </div>
<ov-avatar-profile
*ngIf="!_stream.streamManager?.stream?.videoActive && _stream.type === 'CAMERA'"
[name]="_stream.participant.nickname"
[color]="_stream.participant.colorProfile"
></ov-avatar-profile>
<ov-video <ov-video
(dblclick)="toggleVideoEnlarged()" (dblclick)="toggleVideoEnlarged()"
[streamManager]="_stream.streamManager" [streamManager]="_stream.streamManager"

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

@ -1,6 +1,5 @@
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu'; import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
import { NicknameMatcher } from '../../matchers/nickname.matcher';
import { VideoSizeIcon } from '../../models/icon.model'; import { VideoSizeIcon } from '../../models/icon.model';
import { ScreenType, VideoType } from '../../models/video-type.model'; import { ScreenType, VideoType } from '../../models/video-type.model';
import { DocumentService } from '../../services/document/document.service'; import { DocumentService } from '../../services/document/document.service';

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts
View File

@ -5,8 +5,6 @@ import { VideoType } from '../../models/video-type.model';
@Component({ @Component({
selector: 'ov-video', selector: 'ov-video',
template: ` template: `
<ov-avatar-profile *ngIf="!_streamManager?.stream?.videoActive && (type === 'CAMERA' || !type)" [letter]="'K'"></ov-avatar-profile>
<video <video
class="OT_video-element" class="OT_video-element"
#videoElement #videoElement
@ -18,9 +16,7 @@ import { VideoType } from '../../models/video-type.model';
}) })
export class VideoComponent implements AfterViewInit { export class VideoComponent implements AfterViewInit {
@Input() mutedSound: boolean; @Input() mutedSound: boolean;
_streamManager: StreamManager; _streamManager: StreamManager;
_videoElement: ElementRef; _videoElement: ElementRef;
type: VideoType = VideoType.CAMERA; type: VideoType = VideoType.CAMERA;

4
openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts
View File

@ -15,12 +15,14 @@ export abstract class ParticipantAbstractModel {
id: string; id: string;
local: boolean; local: boolean;
nickname: string; nickname: string;
colorProfile: string;
isMutedForcibly: boolean; isMutedForcibly: boolean;
constructor(model?: StreamModel, id?: string, local: boolean = true, nickname?: string) { constructor(model?: StreamModel, id?: string, local: boolean = true, nickname?: string) {
this.id = id ? id : new Date().getTime().toString(); this.id = id ? id : new Date().getTime().toString();
this.local = local, this.local = local,
this.nickname = nickname ? nickname : 'OpenVidu_User', this.nickname = nickname ? nickname : 'OpenVidu_User';
this.colorProfile = `hsl(${Math.random()*360}, 100%, 80%)`;
this.isMutedForcibly = false; this.isMutedForcibly = false;
let streamModel: StreamModel = { let streamModel: StreamModel = {
connected: true, connected: true,

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

@ -102,7 +102,7 @@ export class ParticipantService {
setMyNickname(nickname: string) { setMyNickname(nickname: string) {
this.localParticipant.setNickname(nickname); this.localParticipant.setNickname(nickname);
// this.updateLocalParticipant(); this.updateLocalParticipant();
} }
getMyNickname(): string { getMyNickname(): string {