openvidu-components: Renamed connections to streams

pull/707/head
csantosm 2022-02-15 13:24:08 +01:00
parent 5d16528f82
commit 5a3430fab5
9 changed files with 37 additions and 39 deletions

View File

@ -13,7 +13,6 @@ export class AudioWaveComponent implements OnInit {
@Input() @Input()
set streamManager(streamManager: StreamManager) { set streamManager(streamManager: StreamManager) {
console.log('streamManager', streamManager);
if(streamManager) { if(streamManager) {
streamManager.on('publisherStartSpeaking', (event: PublisherSpeakingEvent) => { streamManager.on('publisherStartSpeaking', (event: PublisherSpeakingEvent) => {

View File

@ -2,14 +2,14 @@
<div <div
class="OT_root OT_publisher" class="OT_root OT_publisher"
id="localUser" id="localUser"
*ngFor="let stream of localParticipant | connections" *ngFor="let stream of localParticipant | streams"
[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }" [ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
> >
<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: stream }"></ng-container> <ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: stream }"></ng-container>
</div> </div>
<div <div
*ngFor="let stream of remoteParticipants | connections" *ngFor="let stream of remoteParticipants | streams"
class="OT_root OT_publisher" class="OT_root OT_publisher"
id="remote-participant" id="remote-participant"
[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }" [ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"

View File

@ -11,7 +11,7 @@
<div class="local-participant-container"> <div class="local-participant-container">
<ov-participant-item <ov-participant-item
[name]="localParticipant | nickname" [name]="localParticipant | nickname"
[connections]="localParticipant | connectionsEnabled" [connections]="localParticipant | streamsEnabled"
[showDividerLine]="true" [showDividerLine]="true"
></ov-participant-item> ></ov-participant-item>
</div> </div>
@ -25,7 +25,7 @@
<ov-participant-item <ov-participant-item
*ngFor="let p of remoteParticipants; let lastItem = last" *ngFor="let p of remoteParticipants; let lastItem = last"
[name]="p | nickname" [name]="p | nickname"
[connections]="p | connectionsEnabled" [connections]="p | streamsEnabled"
[showDividerLine]="!lastItem" [showDividerLine]="!lastItem"
></ov-participant-item> ></ov-participant-item>
</div> </div>

View File

@ -22,12 +22,12 @@
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
</div> </div>
<div class="videoContainer" *ngIf="!isLoading"> <div class="videoContainer" *ngIf="!isLoading">
<div *ngFor="let stream of localParticipant | connections"> <div *ngFor="let stream of localParticipant | streams">
<!-- 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="(stream.type === 'CAMERA' && hasVideoDevices) || stream.type === 'SCREEN'" *ngIf="(stream.type === 'CAMERA' && hasVideoDevices) || stream.type === 'SCREEN'"
[streamManager]="stream.streamManager" [streamManager]="stream.streamManager"
[ngClass]="{ ovVideoSmall: localParticipant.connections.size > 1 && stream.type === 'CAMERA' }" [ngClass]="{ ovVideoSmall: localParticipant.streams.size > 1 && stream.type === 'CAMERA' }"
></ov-video> ></ov-video>
<div class="cameraMessageContainer" *ngIf="stream.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>

View File

@ -12,7 +12,7 @@ export interface StreamModel {
} }
export abstract class ParticipantAbstractModel { export abstract class ParticipantAbstractModel {
connections: Map<VideoType, StreamModel> = new Map(); streams: Map<VideoType, StreamModel> = new Map();
id: string; id: string;
constructor(model?: StreamModel, id?: string) { constructor(model?: StreamModel, id?: string) {
@ -25,12 +25,12 @@ export abstract class ParticipantAbstractModel {
videoEnlarged: model ? model.videoEnlarged : false, videoEnlarged: model ? model.videoEnlarged : false,
connectionId: model ? model.connectionId : null connectionId: model ? model.connectionId : null
}; };
this.connections.set(streamModel.type, streamModel); this.streams.set(streamModel.type, streamModel);
this.id = id ? id : new Date().getTime().toString(); this.id = id ? id : new Date().getTime().toString();
} }
addConnection(streamModel: StreamModel) { addConnection(streamModel: StreamModel) {
this.connections.set(streamModel.type, streamModel); this.streams.set(streamModel.type, streamModel);
} }
public isCameraAudioActive(): boolean { public isCameraAudioActive(): boolean {
@ -48,15 +48,15 @@ export abstract class ParticipantAbstractModel {
} }
hasConnectionType(type: VideoType): boolean { hasConnectionType(type: VideoType): boolean {
return this.connections.has(type); return this.streams.has(type);
} }
public getCameraConnection(): StreamModel { public getCameraConnection(): StreamModel {
return this.connections.get(VideoType.CAMERA); return this.streams.get(VideoType.CAMERA);
} }
public getScreenConnection(): StreamModel { public getScreenConnection(): StreamModel {
return this.connections.get(VideoType.SCREEN); return this.streams.get(VideoType.SCREEN);
} }
getConnectionTypesEnabled(): VideoType[] { getConnectionTypesEnabled(): VideoType[] {
@ -75,27 +75,27 @@ export abstract class ParticipantAbstractModel {
} }
removeConnection(connectionId: string) { removeConnection(connectionId: string) {
this.connections.delete(this.getConnectionById(connectionId).type); this.streams.delete(this.getConnectionById(connectionId).type);
} }
hasConnectionId(connectionId: string): boolean { hasConnectionId(connectionId: string): boolean {
return Array.from(this.connections.values()).some((conn) => conn.connectionId === connectionId); return Array.from(this.streams.values()).some((conn) => conn.connectionId === connectionId);
} }
getConnectionById(connectionId: string): StreamModel { getConnectionById(connectionId: string): StreamModel {
return Array.from(this.connections.values()).find((conn) => conn.connectionId === connectionId); return Array.from(this.streams.values()).find((conn) => conn.connectionId === connectionId);
} }
getAvailableConnections(): StreamModel[] { getAvailableConnections(): StreamModel[] {
return Array.from(this.connections.values()).filter((conn) => conn.connected); return Array.from(this.streams.values()).filter((conn) => conn.connected);
} }
isLocal(): boolean { isLocal(): boolean {
return Array.from(this.connections.values()).every((conn) => conn.local); return Array.from(this.streams.values()).every((conn) => conn.local);
} }
setNickname(nickname: string) { setNickname(nickname: string) {
this.connections.forEach((conn) => { this.streams.forEach((conn) => {
if (conn.type === VideoType.CAMERA) { if (conn.type === VideoType.CAMERA) {
conn.nickname = nickname; conn.nickname = nickname;
} else { } else {
@ -123,7 +123,7 @@ export abstract class ParticipantAbstractModel {
} }
setPublisher(connType: VideoType, publisher: StreamManager) { setPublisher(connType: VideoType, publisher: StreamManager) {
const connection = this.connections.get(connType); const connection = this.streams.get(connType);
if(connection) { if(connection) {
connection.streamManager = publisher; connection.streamManager = publisher;
} }
@ -157,11 +157,11 @@ export abstract class ParticipantAbstractModel {
if (screenConnection) screenConnection.connected = false; if (screenConnection) screenConnection.connected = false;
} }
setAllVideoEnlarged(enlarged: boolean) { setAllVideoEnlarged(enlarged: boolean) {
this.connections.forEach((conn) => (conn.videoEnlarged = enlarged)); this.streams.forEach((conn) => (conn.videoEnlarged = enlarged));
} }
toggleVideoEnlarged(connectionId: string) { toggleVideoEnlarged(connectionId: string) {
this.connections.forEach((conn) => { this.streams.forEach((conn) => {
if (conn.connectionId === connectionId) { if (conn.connectionId === connectionId) {
conn.videoEnlarged = !conn.videoEnlarged; conn.videoEnlarged = !conn.videoEnlarged;
} }
@ -169,7 +169,7 @@ export abstract class ParticipantAbstractModel {
} }
someHasVideoEnlarged(): boolean { someHasVideoEnlarged(): boolean {
return Array.from(this.connections.values()).some((conn) => conn.videoEnlarged); return Array.from(this.streams.values()).some((conn) => conn.videoEnlarged);
} }
} }

View File

@ -37,7 +37,7 @@ import { DialogTemplateComponent } from './components/material/dialog.component'
import { LinkifyPipe } from './pipes/linkify.pipe'; import { LinkifyPipe } from './pipes/linkify.pipe';
import { TooltipListPipe } from './pipes/tooltip-list.pipe'; import { TooltipListPipe } from './pipes/tooltip-list.pipe';
import { ConnectionsEnabledPipe, NicknamePipe, ParticipantConnectionsPipe } from './pipes/participant-connections.pipe'; import { StreamsEnabledPipe, NicknamePipe, ParticipantStreamsPipe } from './pipes/participant.pipe';
import { LibConfig } from './config/lib.config'; import { LibConfig } from './config/lib.config';
import { CdkOverlayContainer } from './config/custom-cdk-overlay'; import { CdkOverlayContainer } from './config/custom-cdk-overlay';
@ -64,7 +64,6 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
@NgModule({ @NgModule({
declarations: [ declarations: [
StreamDirective, StreamDirective,
UserSettingsComponent, UserSettingsComponent,
VideoComponent, VideoComponent,
ToolbarComponent, ToolbarComponent,
@ -75,8 +74,8 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
DialogTemplateComponent, DialogTemplateComponent,
LinkifyPipe, LinkifyPipe,
TooltipListPipe, TooltipListPipe,
ParticipantConnectionsPipe, ParticipantStreamsPipe,
ConnectionsEnabledPipe, StreamsEnabledPipe,
NicknamePipe, NicknamePipe,
ParticipantItemComponent, ParticipantItemComponent,
ParticipantsPanelComponent, ParticipantsPanelComponent,
@ -137,7 +136,7 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
StreamComponent, StreamComponent,
VideoComponent, VideoComponent,
AudioWaveComponent, AudioWaveComponent,
ParticipantConnectionsPipe, ParticipantStreamsPipe,
CommonModule, CommonModule,
StreamDirective StreamDirective
], ],

View File

@ -1,25 +1,25 @@
import { Pipe, PipeTransform } from '@angular/core'; import { Pipe, PipeTransform } from '@angular/core';
import { StreamModel, ParticipantAbstractModel } from '../models/participant.model'; import { StreamModel, ParticipantAbstractModel } from '../models/participant.model';
@Pipe({ name: 'connections' }) @Pipe({ name: 'streams' })
export class ParticipantConnectionsPipe implements PipeTransform { export class ParticipantStreamsPipe implements PipeTransform {
constructor() {} constructor() {}
transform(participants: ParticipantAbstractModel[] | ParticipantAbstractModel): StreamModel[] { transform(participants: ParticipantAbstractModel[] | ParticipantAbstractModel): StreamModel[] {
let connections: StreamModel[] = []; let streams: StreamModel[] = [];
if (Array.isArray(participants)) { if (Array.isArray(participants)) {
participants.forEach((p) => { participants.forEach((p) => {
connections = connections.concat(Array.from(p.connections.values())); streams = streams.concat(Array.from(p.streams.values()));
}); });
} else { } else {
connections = Array.from(participants.connections.values()); streams = Array.from(participants.streams.values());
} }
return connections; return streams;
} }
} }
@Pipe({ name: 'connectionsEnabled', pure: false }) @Pipe({ name: 'streamsEnabled', pure: false })
export class ConnectionsEnabledPipe implements PipeTransform { export class StreamsEnabledPipe implements PipeTransform {
constructor() {} constructor() {}
transform(participant: ParticipantAbstractModel): string { transform(participant: ParticipantAbstractModel): string {

View File

@ -198,7 +198,7 @@ export class ParticipantService {
let participantsWithConnectionAvailable: ParticipantAbstractModel = Object.assign(this.newParticipant(), this.localParticipant); let participantsWithConnectionAvailable: ParticipantAbstractModel = Object.assign(this.newParticipant(), this.localParticipant);
const availableConnections = participantsWithConnectionAvailable.getAvailableConnections(); const availableConnections = participantsWithConnectionAvailable.getAvailableConnections();
const availableConnectionsMap = new Map(availableConnections.map((conn) => [conn.type, conn])); const availableConnectionsMap = new Map(availableConnections.map((conn) => [conn.type, conn]));
participantsWithConnectionAvailable.connections = availableConnectionsMap; participantsWithConnectionAvailable.streams = availableConnectionsMap;
this._localParticipant.next(participantsWithConnectionAvailable); this._localParticipant.next(participantsWithConnectionAvailable);
} }
@ -249,7 +249,7 @@ export class ParticipantService {
if (participant) { if (participant) {
participant.removeConnection(connectionId); participant.removeConnection(connectionId);
//TODO: Timeout of X seconds?? Its possible sometimes the connections map was empty but must not be deleted //TODO: Timeout of X seconds?? Its possible sometimes the connections map was empty but must not be deleted
if (participant.connections.size === 0) { if (participant.streams.size === 0) {
// Remove participants without connections // Remove participants without connections
this.remoteParticipants = this.remoteParticipants.filter((p) => p !== participant); this.remoteParticipants = this.remoteParticipants.filter((p) => p !== participant);
} }

View File

@ -40,7 +40,7 @@ export * from './lib/models/video-type.model';
export * from './lib/models/notification-options.model'; export * from './lib/models/notification-options.model';
// Pipes // Pipes
export * from './lib/pipes/participant-connections.pipe'; export * from './lib/pipes/participant.pipe';
// Directives // Directives
export * from './lib/directives/stream/stream.directive'; export * from './lib/directives/stream/stream.directive';