mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Renamed connections to streams
parent
5d16528f82
commit
5a3430fab5
|
@ -13,7 +13,6 @@ export class AudioWaveComponent implements OnInit {
|
|||
|
||||
@Input()
|
||||
set streamManager(streamManager: StreamManager) {
|
||||
console.log('streamManager', streamManager);
|
||||
|
||||
if(streamManager) {
|
||||
streamManager.on('publisherStartSpeaking', (event: PublisherSpeakingEvent) => {
|
||||
|
|
|
@ -2,14 +2,14 @@
|
|||
<div
|
||||
class="OT_root OT_publisher"
|
||||
id="localUser"
|
||||
*ngFor="let stream of localParticipant | connections"
|
||||
*ngFor="let stream of localParticipant | streams"
|
||||
[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
|
||||
>
|
||||
<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: stream }"></ng-container>
|
||||
</div>
|
||||
|
||||
<div
|
||||
*ngFor="let stream of remoteParticipants | connections"
|
||||
*ngFor="let stream of remoteParticipants | streams"
|
||||
class="OT_root OT_publisher"
|
||||
id="remote-participant"
|
||||
[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<div class="local-participant-container">
|
||||
<ov-participant-item
|
||||
[name]="localParticipant | nickname"
|
||||
[connections]="localParticipant | connectionsEnabled"
|
||||
[connections]="localParticipant | streamsEnabled"
|
||||
[showDividerLine]="true"
|
||||
></ov-participant-item>
|
||||
</div>
|
||||
|
@ -25,7 +25,7 @@
|
|||
<ov-participant-item
|
||||
*ngFor="let p of remoteParticipants; let lastItem = last"
|
||||
[name]="p | nickname"
|
||||
[connections]="p | connectionsEnabled"
|
||||
[connections]="p | streamsEnabled"
|
||||
[showDividerLine]="!lastItem"
|
||||
></ov-participant-item>
|
||||
</div>
|
||||
|
|
|
@ -22,12 +22,12 @@
|
|||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
<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 -->
|
||||
<ov-video
|
||||
*ngIf="(stream.type === 'CAMERA' && hasVideoDevices) || stream.type === 'SCREEN'"
|
||||
[streamManager]="stream.streamManager"
|
||||
[ngClass]="{ ovVideoSmall: localParticipant.connections.size > 1 && stream.type === 'CAMERA' }"
|
||||
[ngClass]="{ ovVideoSmall: localParticipant.streams.size > 1 && stream.type === 'CAMERA' }"
|
||||
></ov-video>
|
||||
<div class="cameraMessageContainer" *ngIf="stream.type === 'CAMERA' && !hasVideoDevices">
|
||||
<span *ngIf="!hasVideoDevices && !hasAudioDevices">Oops! Camera and microphone are not available</span>
|
||||
|
|
|
@ -12,7 +12,7 @@ export interface StreamModel {
|
|||
}
|
||||
|
||||
export abstract class ParticipantAbstractModel {
|
||||
connections: Map<VideoType, StreamModel> = new Map();
|
||||
streams: Map<VideoType, StreamModel> = new Map();
|
||||
id: string;
|
||||
|
||||
constructor(model?: StreamModel, id?: string) {
|
||||
|
@ -25,12 +25,12 @@ export abstract class ParticipantAbstractModel {
|
|||
videoEnlarged: model ? model.videoEnlarged : false,
|
||||
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();
|
||||
}
|
||||
|
||||
addConnection(streamModel: StreamModel) {
|
||||
this.connections.set(streamModel.type, streamModel);
|
||||
this.streams.set(streamModel.type, streamModel);
|
||||
}
|
||||
|
||||
public isCameraAudioActive(): boolean {
|
||||
|
@ -48,15 +48,15 @@ export abstract class ParticipantAbstractModel {
|
|||
}
|
||||
|
||||
hasConnectionType(type: VideoType): boolean {
|
||||
return this.connections.has(type);
|
||||
return this.streams.has(type);
|
||||
}
|
||||
|
||||
public getCameraConnection(): StreamModel {
|
||||
return this.connections.get(VideoType.CAMERA);
|
||||
return this.streams.get(VideoType.CAMERA);
|
||||
}
|
||||
|
||||
public getScreenConnection(): StreamModel {
|
||||
return this.connections.get(VideoType.SCREEN);
|
||||
return this.streams.get(VideoType.SCREEN);
|
||||
}
|
||||
|
||||
getConnectionTypesEnabled(): VideoType[] {
|
||||
|
@ -75,27 +75,27 @@ export abstract class ParticipantAbstractModel {
|
|||
}
|
||||
|
||||
removeConnection(connectionId: string) {
|
||||
this.connections.delete(this.getConnectionById(connectionId).type);
|
||||
this.streams.delete(this.getConnectionById(connectionId).type);
|
||||
}
|
||||
|
||||
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 {
|
||||
return Array.from(this.connections.values()).find((conn) => conn.connectionId === connectionId);
|
||||
return Array.from(this.streams.values()).find((conn) => conn.connectionId === connectionId);
|
||||
}
|
||||
|
||||
getAvailableConnections(): StreamModel[] {
|
||||
return Array.from(this.connections.values()).filter((conn) => conn.connected);
|
||||
return Array.from(this.streams.values()).filter((conn) => conn.connected);
|
||||
}
|
||||
|
||||
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) {
|
||||
this.connections.forEach((conn) => {
|
||||
this.streams.forEach((conn) => {
|
||||
if (conn.type === VideoType.CAMERA) {
|
||||
conn.nickname = nickname;
|
||||
} else {
|
||||
|
@ -123,7 +123,7 @@ export abstract class ParticipantAbstractModel {
|
|||
}
|
||||
|
||||
setPublisher(connType: VideoType, publisher: StreamManager) {
|
||||
const connection = this.connections.get(connType);
|
||||
const connection = this.streams.get(connType);
|
||||
if(connection) {
|
||||
connection.streamManager = publisher;
|
||||
}
|
||||
|
@ -157,11 +157,11 @@ export abstract class ParticipantAbstractModel {
|
|||
if (screenConnection) screenConnection.connected = false;
|
||||
}
|
||||
setAllVideoEnlarged(enlarged: boolean) {
|
||||
this.connections.forEach((conn) => (conn.videoEnlarged = enlarged));
|
||||
this.streams.forEach((conn) => (conn.videoEnlarged = enlarged));
|
||||
}
|
||||
|
||||
toggleVideoEnlarged(connectionId: string) {
|
||||
this.connections.forEach((conn) => {
|
||||
this.streams.forEach((conn) => {
|
||||
if (conn.connectionId === connectionId) {
|
||||
conn.videoEnlarged = !conn.videoEnlarged;
|
||||
}
|
||||
|
@ -169,7 +169,7 @@ export abstract class ParticipantAbstractModel {
|
|||
}
|
||||
|
||||
someHasVideoEnlarged(): boolean {
|
||||
return Array.from(this.connections.values()).some((conn) => conn.videoEnlarged);
|
||||
return Array.from(this.streams.values()).some((conn) => conn.videoEnlarged);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@ import { DialogTemplateComponent } from './components/material/dialog.component'
|
|||
|
||||
import { LinkifyPipe } from './pipes/linkify.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 { CdkOverlayContainer } from './config/custom-cdk-overlay';
|
||||
|
@ -64,7 +64,6 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
|
|||
@NgModule({
|
||||
declarations: [
|
||||
StreamDirective,
|
||||
|
||||
UserSettingsComponent,
|
||||
VideoComponent,
|
||||
ToolbarComponent,
|
||||
|
@ -75,8 +74,8 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
|
|||
DialogTemplateComponent,
|
||||
LinkifyPipe,
|
||||
TooltipListPipe,
|
||||
ParticipantConnectionsPipe,
|
||||
ConnectionsEnabledPipe,
|
||||
ParticipantStreamsPipe,
|
||||
StreamsEnabledPipe,
|
||||
NicknamePipe,
|
||||
ParticipantItemComponent,
|
||||
ParticipantsPanelComponent,
|
||||
|
@ -137,7 +136,7 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
|
|||
StreamComponent,
|
||||
VideoComponent,
|
||||
AudioWaveComponent,
|
||||
ParticipantConnectionsPipe,
|
||||
ParticipantStreamsPipe,
|
||||
CommonModule,
|
||||
StreamDirective
|
||||
],
|
||||
|
|
|
@ -1,25 +1,25 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { StreamModel, ParticipantAbstractModel } from '../models/participant.model';
|
||||
|
||||
@Pipe({ name: 'connections' })
|
||||
export class ParticipantConnectionsPipe implements PipeTransform {
|
||||
@Pipe({ name: 'streams' })
|
||||
export class ParticipantStreamsPipe implements PipeTransform {
|
||||
constructor() {}
|
||||
|
||||
transform(participants: ParticipantAbstractModel[] | ParticipantAbstractModel): StreamModel[] {
|
||||
let connections: StreamModel[] = [];
|
||||
let streams: StreamModel[] = [];
|
||||
if (Array.isArray(participants)) {
|
||||
participants.forEach((p) => {
|
||||
connections = connections.concat(Array.from(p.connections.values()));
|
||||
streams = streams.concat(Array.from(p.streams.values()));
|
||||
});
|
||||
} else {
|
||||
connections = Array.from(participants.connections.values());
|
||||
streams = Array.from(participants.streams.values());
|
||||
}
|
||||
return connections;
|
||||
return streams;
|
||||
}
|
||||
}
|
||||
|
||||
@Pipe({ name: 'connectionsEnabled', pure: false })
|
||||
export class ConnectionsEnabledPipe implements PipeTransform {
|
||||
@Pipe({ name: 'streamsEnabled', pure: false })
|
||||
export class StreamsEnabledPipe implements PipeTransform {
|
||||
constructor() {}
|
||||
|
||||
transform(participant: ParticipantAbstractModel): string {
|
|
@ -198,7 +198,7 @@ export class ParticipantService {
|
|||
let participantsWithConnectionAvailable: ParticipantAbstractModel = Object.assign(this.newParticipant(), this.localParticipant);
|
||||
const availableConnections = participantsWithConnectionAvailable.getAvailableConnections();
|
||||
const availableConnectionsMap = new Map(availableConnections.map((conn) => [conn.type, conn]));
|
||||
participantsWithConnectionAvailable.connections = availableConnectionsMap;
|
||||
participantsWithConnectionAvailable.streams = availableConnectionsMap;
|
||||
this._localParticipant.next(participantsWithConnectionAvailable);
|
||||
}
|
||||
|
||||
|
@ -249,7 +249,7 @@ export class ParticipantService {
|
|||
if (participant) {
|
||||
participant.removeConnection(connectionId);
|
||||
//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
|
||||
this.remoteParticipants = this.remoteParticipants.filter((p) => p !== participant);
|
||||
}
|
||||
|
|
|
@ -40,7 +40,7 @@ export * from './lib/models/video-type.model';
|
|||
export * from './lib/models/notification-options.model';
|
||||
|
||||
// Pipes
|
||||
export * from './lib/pipes/participant-connections.pipe';
|
||||
export * from './lib/pipes/participant.pipe';
|
||||
|
||||
// Directives
|
||||
export * from './lib/directives/stream/stream.directive';
|
Loading…
Reference in New Issue