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

openvidu-components: Created participant from pre-join component 

* Refactored update local participant method
* Refactored pipes
pull/707/head
csantosm 2022-03-02 17:35:14 +01:00
parent b4decda1f5
commit 7af7b96a2d
8 changed files with 60 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
View File

@ -31,7 +31,7 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
constructor(protected layoutService: LayoutService, protected participantService: ParticipantService, private cd: ChangeDetectorRef) {}
ngOnInit(): void {
this.subscribeToUsers();
this.subscribeToParticipants();
}
ngAfterViewInit() {
@ -47,9 +47,10 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
this.layoutService.clear();
}
protected subscribeToUsers() {
protected subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p;
// We need to update the object reference doing a deep copy for update the view
this.localParticipant = Object.assign(Object.create(p), p)
this.layoutService.update();
this.cd.markForCheck();
});

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
View File

@ -2,7 +2,7 @@
<mat-list-item>
<mat-icon matListAvatar class="participant-avatar">person</mat-icon>
<h3 matLine class="participant-nickname">{{ _participant.nickname }}</h3>
<p matLine class="participant-subtitle">{{ _participant | streamsEnabled }}</p>
<p matLine class="participant-subtitle">{{ _participant | streamTypesEnabled }}</p>
<!-- <p matLine>
<span class="participant-subtitle"></span>
</p> -->

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

@ -33,13 +33,13 @@ export class ParticipantsPanelComponent implements OnInit {
ngOnInit(): void {
this.participantService.localParticipantObs.subscribe((p: ParticipantModel) => {
this.localParticipant = p;
// Mark for re-rendering using an impure pipe 'streamsEnabled'
// Mark for re-rendering using an impure pipe 'streamsTypesEnabled'
this.cd.markForCheck();
});
this.participantService.remoteParticipantsObs.subscribe((p: ParticipantModel[]) => {
this.remoteParticipants = p;
// Mark for re-rendering using an impure pipe 'streamsEnabled'
// Mark for re-rendering using an impure pipe 'streamsTypesEnabled'
this.cd.markForCheck();
});
}

9
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
View File

@ -4,7 +4,7 @@ import { OpenViduErrorName } from 'openvidu-browser/lib/OpenViduInternal/Enums/O
import { Subscription } from 'rxjs';
import { CustomDevice } from '../../models/device.model';
import { ILogger } from '../../models/logger.model';
import { ParticipantAbstractModel } from '../../models/participant.model';
import { ParticipantAbstractModel, ParticipantProperties } from '../../models/participant.model';
import { ActionService } from '../../services/action/action.service';
import { DeviceService } from '../../services/device/device.service';
import { LayoutService } from '../../services/layout/layout.service';
@ -57,10 +57,15 @@ export class PreJoinComponent implements OnInit, OnDestroy {
async ngOnInit() {
await this.deviceSrv.initializeDevices();
this.nickname = this.storageSrv.getNickname() || this.generateRandomNickname();
const props: ParticipantProperties = {
local: true,
nickname: this.nickname
};
this.participantService.initLocalParticipant(props);
this.subscribeToLocalParticipantEvents();
this.openviduService.initialize();
this.nickname = this.storageSrv.getNickname() || this.generateRandomNickname();
this.windowSize = window.innerWidth;
this.setDevicesInfo();
if (this.hasAudioDevices || this.hasVideoDevices) {

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

@ -10,6 +10,14 @@ export interface StreamModel {
participant?: ParticipantAbstractModel
}
export interface ParticipantProperties {
local: boolean;
nickname: string;
id?: string;
colorProfile?: string;
isMutedForcibly?: boolean;
}
export abstract class ParticipantAbstractModel {
streams: Map<VideoType, StreamModel> = new Map();
id: string;
@ -18,12 +26,12 @@ export abstract class ParticipantAbstractModel {
colorProfile: string;
isMutedForcibly: boolean;
constructor(model?: StreamModel, id?: string, local: boolean = true, nickname?: string) {
this.id = id ? id : new Date().getTime().toString();
this.local = local,
this.nickname = nickname ? nickname : 'OpenVidu_User';
this.colorProfile = `hsl(${Math.random()*360}, 100%, 80%)`;
this.isMutedForcibly = false;
constructor(props: ParticipantProperties, model?: StreamModel) {
this.id = props.id ? props.id : new Date().getTime().toString();
this.local = props.local;
this.nickname = props.nickname;
this.colorProfile = !!props.colorProfile ? props.colorProfile : `hsl(${Math.random()*360}, 100%, 80%)`;
this.isMutedForcibly = typeof props.isMutedForcibly === 'boolean' ? props.isMutedForcibly : false;
let streamModel: StreamModel = {
connected: true,
type: model ? model.type : VideoType.CAMERA,

6
openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
View File

@ -36,7 +36,7 @@ import { StreamComponent } from './components/stream/stream.component';
import { DialogTemplateComponent } from './components/material/dialog.component';
import { LinkifyPipe } from './pipes/linkify.pipe';
import { StreamsEnabledPipe, ParticipantStreamsPipe } from './pipes/participant.pipe';
import { StreamTypesEnabledPipe, ParticipantStreamsPipe } from './pipes/participant.pipe';
import { OpenViduAngularConfig } from './config/openvidu-angular.config';
import { CdkOverlayContainer } from './config/custom-cdk-overlay';
@ -83,7 +83,7 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi
DialogTemplateComponent,
LinkifyPipe,
ParticipantStreamsPipe,
StreamsEnabledPipe,
StreamTypesEnabledPipe,
ParticipantPanelItemComponent,
ParticipantsPanelComponent,
VideoconferenceComponent,
@ -157,7 +157,7 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi
AudioWaveComponent,
PreJoinComponent,
ParticipantStreamsPipe,
StreamsEnabledPipe,
StreamTypesEnabledPipe,
CommonModule,
ToolbarDirective,
PanelDirective,

15
openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts
View File

@ -1,25 +1,30 @@
import { Pipe, PipeTransform } from '@angular/core';
import { StreamModel, ParticipantAbstractModel } from '../models/participant.model';
@Pipe({ name: 'streams' })
@Pipe({ name: 'streams', pure: true })
export class ParticipantStreamsPipe implements PipeTransform {
constructor() {}
transform(participants: ParticipantAbstractModel[] | ParticipantAbstractModel): StreamModel[] {
let streams: StreamModel[] = [];
console.log('STREAM PIPE')
debugger
if(Object.keys(participants).length > 0){
if (Array.isArray(participants)) {
participants.forEach((p) => {
streams = streams.concat(Array.from(p.streams.values()));
streams = streams.concat(p.getAvailableConnections());
});
} else {
streams = Array.from(participants.streams.values());
streams = participants.getAvailableConnections();
}
}
return streams;
}
}
@Pipe({ name: 'streamsEnabled', pure: false })
export class StreamsEnabledPipe implements PipeTransform {
@Pipe({ name: 'streamTypesEnabled', pure: false })
export class StreamTypesEnabledPipe implements PipeTransform {
constructor() {}
transform(participant: ParticipantAbstractModel): string {

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

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { Publisher, Subscriber } from 'openvidu-browser';
import { BehaviorSubject, Observable } from 'rxjs';
import { ILogger } from '../../models/logger.model';
import { StreamModel, ParticipantAbstractModel, ParticipantModel } from '../../models/participant.model';
import { StreamModel, ParticipantAbstractModel, ParticipantModel, ParticipantProperties } from '../../models/participant.model';
import { VideoType } from '../../models/video-type.model';
import { OpenViduAngularConfigService } from '../config/openvidu-angular.config.service';
import { LoggerService } from '../logger/logger.service';
@ -29,8 +29,10 @@ export class ParticipantService {
this.localParticipantObs = this._localParticipant.asObservable();
this.remoteParticipantsObs = this._remoteParticipants.asObservable();
}
this.localParticipant = this.newParticipant();
initLocalParticipant(props: ParticipantProperties) {
this.localParticipant = this.newParticipant(props);
this.updateLocalParticipant();
}
@ -131,7 +133,7 @@ export class ParticipantService {
clear() {
this.disableScreenUser();
this.localParticipant = this.newParticipant();
// this.localParticipant = this.newParticipant();
// this._screensharing.next(false);
this.remoteParticipants = [];
this._remoteParticipants = <BehaviorSubject<ParticipantAbstractModel[]>>new BehaviorSubject([]);
@ -172,12 +174,7 @@ export class ParticipantService {
}
updateLocalParticipant() {
// Cloning localParticipant object for not applying changes on the global variable
let participantsWithConnectionAvailable: ParticipantAbstractModel = Object.assign(this.newParticipant(), this.localParticipant);
const availableConnections = participantsWithConnectionAvailable.getAvailableConnections();
const availableConnectionsMap = new Map(availableConnections.map((conn) => [conn.type, conn]));
participantsWithConnectionAvailable.streams = availableConnectionsMap;
this._localParticipant.next(participantsWithConnectionAvailable);
this._localParticipant.next(this.localParticipant);
}
/**
@ -210,9 +207,12 @@ export class ParticipantService {
}
} else {
this.log.w('Creating new participant with id: ', participantId);
const nickname = this.getNicknameFromConnectionData(data);
const local = false;
const remoteParticipant = this.newParticipant(streamModel, participantId, local, nickname);
const props: ParticipantProperties = {
nickname: this.getNicknameFromConnectionData(data),
local: false,
id: participantId
}
const remoteParticipant = this.newParticipant(props, streamModel);
this.remoteParticipants.push(remoteParticipant);
}
this.updateRemoteParticipants();
@ -306,11 +306,11 @@ export class ParticipantService {
}
}
protected newParticipant(streamModel?: StreamModel, participantId?: string, local?: boolean, nickname?: string) {
protected newParticipant(props: ParticipantProperties, streamModel?: StreamModel) {
if(this.openviduAngularConfigSrv.hasParticipantFactory()){
return this.openviduAngularConfigSrv.getParticipantFactory().apply(this, [streamModel, participantId, local, nickname]);
return this.openviduAngularConfigSrv.getParticipantFactory().apply(this, [props, streamModel]);
}
return new ParticipantModel(streamModel, participantId, local, nickname);
return new ParticipantModel(props, streamModel);
}
}