openvidu-components: Renamed components and models

* ov-room to ov-session
* ov-participant to ov-stream
* ov-chat to ov-chat-panel
* ov-participant-panel to ov-participants-panel
* ConnectionWrapper to StreamModel

openvidu-components-angular/projects/openvidu-angular/src/lib/components/chat-panel/chat-panel.component.spec.ts

@@ -2,21 +2,21 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChatService } from '../../services/chat/chat.service';
 import { ChatServiceMock } from '../../services/chat/chat.service.mock';
 
-import { ChatComponent } from './chat.component';
+import { ChatPanelComponent } from './chat-panel.component';
 
-describe('ChatComponent', () => {
-	let component: ChatComponent;
-	let fixture: ComponentFixture<ChatComponent>;
+describe('ChatPanelComponent', () => {
+	let component: ChatPanelComponent;
+	let fixture: ComponentFixture<ChatPanelComponent>;
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			declarations: [ChatComponent],
+			declarations: [ChatPanelComponent],
 			providers: [{ provide: ChatService, useClass: ChatServiceMock }]
 		}).compileComponents();
 	});
 
 	beforeEach(() => {
-		fixture = TestBed.createComponent(ChatComponent);
+		fixture = TestBed.createComponent(ChatPanelComponent);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});

openvidu-components-angular/projects/openvidu-angular/src/lib/components/chat-panel/chat-panel.component.ts

@@ -6,11 +6,11 @@ import { ChatService } from '../../services/chat/chat.service';
 import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.service';
 
 @Component({
-	selector: 'ov-chat',
-	templateUrl: './chat.component.html',
-	styleUrls: ['./chat.component.css']
+	selector: 'ov-chat-panel',
+	templateUrl: './chat-panel.component.html',
+	styleUrls: ['./chat-panel.component.css']
 })
-export class ChatComponent implements OnInit, AfterViewInit {
+export class ChatPanelComponent implements OnInit, AfterViewInit {
 	@ViewChild('chatScroll') chatScroll: ElementRef;
 	@ViewChild('chatInput') chatInput: ElementRef;
 	message: string;

openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html

@@ -15,8 +15,8 @@
 
 		<!-- Default menu content if custom menu content is not injected -->
 		<ng-template #defaultMenuContent>
-			<ov-chat *ngIf="isChatOpened"></ov-chat>
-			<ov-participant-panel *ngIf="isParticipantsOpened"></ov-participant-panel>
+			<ov-chat-panel *ngIf="isChatOpened"></ov-chat-panel>
+			<ov-participants-panel *ngIf="isParticipantsOpened"></ov-participants-panel>
 		</ng-template>
 
 	</mat-sidenav>
@@ -37,7 +37,7 @@
 					*ngFor="let connection of localParticipant | connections"
 					[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
 				>
-					<ov-participant [participant]="connection" [videoEnlarged]="connection.videoEnlarged"></ov-participant>
+					<ov-stream [participant]="connection" [videoEnlarged]="connection.videoEnlarged"></ov-stream>
 				</div>
 			</ng-template>
 
@@ -59,7 +59,7 @@
 					id="remote-participant"
 					[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
 				>
-					<ov-participant [participant]="connection" [videoEnlarged]="connection.videoEnlarged"></ov-participant>
+					<ov-stream [participant]="connection" [videoEnlarged]="connection.videoEnlarged"></ov-stream>
 				</div>
 			</ng-template>
 		</div>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/participants-panel/participants-panel/participants-panel.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ParticipantPanelComponent } from './participant-panel.component';
+import { ParticipantsPanelComponent } from './participants-panel.component';
 
-describe('ParticipantPanelComponent', () => {
-  let component: ParticipantPanelComponent;
-  let fixture: ComponentFixture<ParticipantPanelComponent>;
+describe('ParticipantsPanelComponent', () => {
+  let component: ParticipantsPanelComponent;
+  let fixture: ComponentFixture<ParticipantsPanelComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ParticipantPanelComponent ]
+      declarations: [ ParticipantsPanelComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ParticipantPanelComponent);
+    fixture = TestBed.createComponent(ParticipantsPanelComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -4,11 +4,11 @@ import { ParticipantService } from '../../../services/participant/participant.se
 import { SidenavMenuService } from '../../../services/sidenav-menu/sidenav-menu.service';
 
 @Component({
-	selector: 'ov-participant-panel',
-	templateUrl: './participant-panel.component.html',
-	styleUrls: ['./participant-panel.component.css']
+	selector: 'ov-participants-panel',
+	templateUrl: './participants-panel.component.html',
+	styleUrls: ['./participants-panel.component.css']
 })
-export class ParticipantPanelComponent implements OnInit {
+export class ParticipantsPanelComponent implements OnInit {
 	localParticipant: any;
 	remoteParticipants: ParticipantAbstractModel[] = [];
 

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css

@@ -1,4 +1,4 @@
-#room-container {
+#session-container {
 	background-color: var(--ov-primary-color);
 	min-width: 400px;
 	height: 100%;
@@ -41,7 +41,7 @@
 
 
 @media only screen and (max-width: 600px) {
-	#room-container {
+	#session-container {
 		width: 100%;
 		/* position: fixed; */
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html

@@ -1,4 +1,4 @@
-<div id="room-container">
+<div id="session-container">
 
 	<!-- Custom toolbar -->
 	<!-- <ng-container *ngIf="toolbarTemplate">

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.spec.ts

@@ -16,15 +16,15 @@ import { WebrtcServiceMock } from '../../services/webrtc/webrtc.service.mock';
 import { ParticipantService } from '../../services/participant/participant.service';
 import { ParticipantServiceMock } from '../../services/participant/participant.service.mock';
 
-import { RoomComponent } from './room.component';
+import { SessionComponent } from './session.component';
 
-describe('RoomComponent', () => {
-  let component: RoomComponent;
-  let fixture: ComponentFixture<RoomComponent>;
+describe('SessionComponent', () => {
+  let component: SessionComponent;
+  let fixture: ComponentFixture<SessionComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RoomComponent ],
+      declarations: [ SessionComponent ],
       providers: [
       { provide: LoggerService, useClass: LoggerServiceMock },
 				{ provide: ActionService, useClass: ActionServiceMock },
@@ -39,7 +39,7 @@ describe('RoomComponent', () => {
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RoomComponent);
+    fixture = TestBed.createComponent(SessionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts

@@ -14,11 +14,11 @@ import { Signal } from '../../models/signal.model';
 import { ParticipantService } from '../../services/participant/participant.service';
 
 @Component({
-	selector: 'ov-room',
-	templateUrl: './room.component.html',
-	styleUrls: ['./room.component.css']
+	selector: 'ov-session',
+	templateUrl: './session.component.html',
+	styleUrls: ['./session.component.css']
 })
-export class RoomComponent implements OnInit {
+export class SessionComponent implements OnInit {
 	@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>;
 	@Input() tokens: { webcam: string; screen: string };
 	@Output() _session = new EventEmitter<any>();
@@ -38,7 +38,7 @@ export class RoomComponent implements OnInit {
 		protected tokenService: TokenService,
 		protected platformService: PlatformService
 	) {
-		this.log = this.loggerSrv.get('RoomComponent');
+		this.log = this.loggerSrv.get('SessionComponent');
 	}
 
 	@HostListener('window:beforeunload')

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

@@ -13,15 +13,15 @@ import { StorageService } from '../../services/storage/storage.service';
 import { Signal } from '../../models/signal.model';
 import { LayoutClass } from '../../models/layout.model';
 import { PublisherProperties } from 'openvidu-browser';
-import { ConnectionWrapper } from '../../models/participant.model';
+import { StreamModel } from '../../models/participant.model';
 import { ParticipantService } from '../../services/participant/participant.service';
 
 @Component({
-	selector: 'ov-participant',
-	templateUrl: './participant.component.html',
-	styleUrls: ['./participant.component.css']
+	selector: 'ov-stream',
+	templateUrl: './stream.component.html',
+	styleUrls: ['./stream.component.css']
 })
-export class ParticipantComponent implements OnInit {
+export class StreamComponent implements OnInit {
 	videoSizeIconEnum = VideoSizeIcon;
 	videoTypeEnum = VideoType;
 	videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;
@@ -29,7 +29,7 @@ export class ParticipantComponent implements OnInit {
 	toggleNickname: boolean;
 	nicknameFormControl: FormControl;
 	matcher: NicknameMatcher;
-	_participant: ConnectionWrapper;
+	_participant: StreamModel;
 
 	@ViewChild('streamComponent', { read: ViewContainerRef }) streamComponent: ViewContainerRef;
 	@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
@@ -53,14 +53,14 @@ export class ParticipantComponent implements OnInit {
 	// }
 
 	// Has been mandatory fullscreen Input because of Input user did not fire changing
-	// the fullscreen user property in publisherStartSpeaking event in VideoRoom Component
+	// the fullscreen user property in publisherStartSpeaking event in SessionComponent
 	@Input()
 	set videoEnlarged(enlarged: boolean) {
 		this.checkVideoSizeBigIcon(enlarged);
 	}
 
 	@Input()
-	set participant(participant: ConnectionWrapper) {
+	set participant(participant: StreamModel) {
 		this._participant = participant;
 		this.nicknameFormControl = new FormControl(this._participant.nickname, [Validators.maxLength(25), Validators.required]);
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.css

@@ -1,4 +1,4 @@
-#call-container, #room-container {
+#call-container, #session-container {
 	height: 100%;
 }
 

openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html

@@ -13,8 +13,8 @@
 		<span>{{errorMessage}}</span>
 	</div>
 
-	<div id="room-container" *ngIf="joinSessionClicked && isSessionAlive && !error">
-		<ov-room [tokens]="_tokens">
+	<div id="session-container" *ngIf="joinSessionClicked && isSessionAlive && !error">
+		<ov-session [tokens]="_tokens">
 			<ng-template #toolbar>
 				<ov-toolbar
 					(onCamClicked)="onCamClicked()"
@@ -25,6 +25,6 @@
 				></ov-toolbar>
 			</ng-template>
 			<ov-layout layout></ov-layout>
-		</ov-room>
+		</ov-session>
 	</div>
 </div>

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

@@ -1,7 +1,7 @@
 import { Publisher, StreamManager } from 'openvidu-browser';
 import { VideoType } from './video-type.model';
 
-export interface ConnectionWrapper {
+export interface StreamModel {
 	local: boolean;
 	connected: boolean;
 	nickname: string;
@@ -12,11 +12,11 @@ export interface ConnectionWrapper {
 }
 
 export abstract class ParticipantAbstractModel {
-	connections: Map<VideoType, ConnectionWrapper> = new Map();
+	connections: Map<VideoType, StreamModel> = new Map();
 	id: string;
 
-	addConnection(connWrapper: ConnectionWrapper) {
-		this.connections.set(connWrapper.type, connWrapper);
+	addConnection(streamModel: StreamModel) {
+		this.connections.set(streamModel.type, streamModel);
 	}
 
 	public isCameraAudioActive(): boolean {
@@ -37,11 +37,11 @@ export abstract class ParticipantAbstractModel {
 		return this.connections.has(type);
 	}
 
-	public getCameraConnection(): ConnectionWrapper {
+	public getCameraConnection(): StreamModel {
 		return this.connections.get(VideoType.CAMERA);
 	}
 
-	public getScreenConnection(): ConnectionWrapper {
+	public getScreenConnection(): StreamModel {
 		return this.connections.get(VideoType.SCREEN);
 	}
 
@@ -68,11 +68,11 @@ export abstract class ParticipantAbstractModel {
 		return Array.from(this.connections.values()).some((conn) => conn.connectionId === connectionId);
 	}
 
-	getConnectionById(connectionId: string): ConnectionWrapper {
+	getConnectionById(connectionId: string): StreamModel {
 		return Array.from(this.connections.values()).find((conn) => conn.connectionId === connectionId);
 	}
 
-	getAvailableConnections(): ConnectionWrapper[] {
+	getAvailableConnections(): StreamModel[] {
 		return Array.from(this.connections.values()).filter((conn) => conn.connected);
 	}
 
@@ -161,18 +161,18 @@ export abstract class ParticipantAbstractModel {
 
 export class ParticipantModel extends ParticipantAbstractModel {
 
-	constructor(connWrapper?: ConnectionWrapper, id?: string) {
+	constructor(model?: StreamModel, id?: string) {
 		super();
-		let connectionWrapper: ConnectionWrapper = {
-			local: connWrapper ? connWrapper.local : true,
+		let streamModel: StreamModel = {
+			local: model ? model.local : true,
 			connected: true,
-			nickname: connWrapper ? connWrapper.nickname : 'OpenVidu_User',
-			type: connWrapper ? connWrapper.type : VideoType.CAMERA,
-			streamManager: connWrapper ? connWrapper.streamManager : null,
-			videoEnlarged: connWrapper ? connWrapper.videoEnlarged : false,
-			connectionId: connWrapper ? connWrapper.connectionId : null
+			nickname: model ? model.nickname : 'OpenVidu_User',
+			type: model ? model.type : VideoType.CAMERA,
+			streamManager: model ? model.streamManager : null,
+			videoEnlarged: model ? model.videoEnlarged : false,
+			connectionId: model ? model.connectionId : null
 		};
-		this.connections.set(connectionWrapper.type, connectionWrapper);
+		this.connections.set(streamModel.type, streamModel);
 		this.id = id ? id : new Date().getTime().toString();
 	}
 

openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts

@@ -29,10 +29,10 @@ import { HttpClientModule } from '@angular/common/http';
 import { UserSettingsComponent } from './components/user-settings/user-settings.component';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
 import { VideoComponent } from './components/video/video.component';
-import { ChatComponent } from './components/chat/chat.component';
-import { RoomComponent } from './components/room/room.component';
+import { ChatPanelComponent } from './components/chat-panel/chat-panel.component';
+import { SessionComponent } from './components/session/session.component';
 import { LayoutComponent } from './components/layout/layout.component';
-import { ParticipantComponent } from './components/participant/participant.component';
+import { StreamComponent } from './components/stream/stream.component';
 import { DialogTemplateComponent } from './components/material/dialog.component';
 
 import { LinkifyPipe } from './pipes/linkify.pipe';
@@ -55,7 +55,7 @@ import { LayoutService } from './services/layout/layout.service';
 import { SidenavMenuService } from './services/sidenav-menu/sidenav-menu.service';
 import { ParticipantService } from './services/participant/participant.service';
 import { ParticipantItemComponent } from './components/participants-panel/participant-item/participant-item.component';
-import { ParticipantPanelComponent } from './components/participants-panel/participant-panel/participant-panel.component';
+import { ParticipantsPanelComponent } from './components/participants-panel/participants-panel/participants-panel.component';
 import { VideoconferenceComponent } from './components/videoconference/videoconference.component';
 
 @NgModule({
@@ -63,10 +63,10 @@ import { VideoconferenceComponent } from './components/videoconference/videoconf
 		UserSettingsComponent,
 		VideoComponent,
 		ToolbarComponent,
-		ChatComponent,
-		RoomComponent,
+		ChatPanelComponent,
+		SessionComponent,
 		LayoutComponent,
-		ParticipantComponent,
+		StreamComponent,
 		DialogTemplateComponent,
 		LinkifyPipe,
 		TooltipListPipe,
@@ -74,7 +74,7 @@ import { VideoconferenceComponent } from './components/videoconference/videoconf
 		ConnectionsEnabledPipe,
 		NicknamePipe,
 		ParticipantItemComponent,
-		ParticipantPanelComponent,
+		ParticipantsPanelComponent,
 		VideoconferenceComponent
 	],
 	imports: [
@@ -124,10 +124,10 @@ import { VideoconferenceComponent } from './components/videoconference/videoconf
 		VideoconferenceComponent,
 		UserSettingsComponent,
 		ToolbarComponent,
-		ChatComponent,
-		RoomComponent,
+		ChatPanelComponent,
+		SessionComponent,
 		LayoutComponent,
-		ParticipantComponent,
+		StreamComponent,
 		VideoComponent,
 		ParticipantConnectionsPipe,
 		CommonModule

openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant-connections.pipe.ts

@@ -1,12 +1,12 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { ConnectionWrapper, ParticipantAbstractModel } from '../models/participant.model';
+import { StreamModel, ParticipantAbstractModel } from '../models/participant.model';
 
 @Pipe({ name: 'connections' })
 export class ParticipantConnectionsPipe implements PipeTransform {
 	constructor() {}
 
-	transform(participants: ParticipantAbstractModel[] | ParticipantAbstractModel): ConnectionWrapper[] {
-		let connections: ConnectionWrapper[] = [];
+	transform(participants: ParticipantAbstractModel[] | ParticipantAbstractModel): StreamModel[] {
+		let connections: StreamModel[] = [];
 		if (Array.isArray(participants)) {
 			participants.forEach((p) => {
 				connections = connections.concat(Array.from(p.connections.values()));

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

@@ -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 { ConnectionWrapper, ParticipantAbstractModel, ParticipantModel } from '../../models/participant.model';
+import { StreamModel, ParticipantAbstractModel, ParticipantModel } from '../../models/participant.model';
 import { VideoType } from '../../models/video-type.model';
 import { LoggerService } from '../logger/logger.service';
 
@@ -87,7 +87,7 @@ export class ParticipantService {
 	enableScreenUser(screenPublisher: Publisher) {
 		this.log.d('Enabling screen publisher');
 
-		const connWrapper: ConnectionWrapper = {
+		const steramModel: StreamModel = {
 			local: true,
 			type: VideoType.SCREEN,
 			videoEnlarged: true,
@@ -97,7 +97,7 @@ export class ParticipantService {
 			connectionId: null
 		};
 
-		this.localParticipant.addConnection(connWrapper);
+		this.localParticipant.addConnection(steramModel);
 
 		this._screensharing.next(true);
 
@@ -205,7 +205,7 @@ export class ParticipantService {
 
 	addRemoteConnection(connectionId:string, data: string, subscriber: Subscriber) {
 
-		const connWrapper: ConnectionWrapper = {
+		const steramModel: StreamModel = {
 			local: false,
 			type: this.getTypeConnectionData(data),
 			videoEnlarged: false,
@@ -219,16 +219,16 @@ export class ParticipantService {
 		const participantAdded = this.getRemoteParticipantById(participantId);
 		if (!!participantAdded) {
 			this.log.d('Adding connection to existing participant: ', participantId);
-			if(participantAdded.hasConnectionType(connWrapper.type)) {
+			if(participantAdded.hasConnectionType(steramModel.type)) {
 				this.log.d('Participant has publisher, updating it');
-				participantAdded.setPublisher(connWrapper.type, subscriber);
+				participantAdded.setPublisher(steramModel.type, subscriber);
 			} else {
 				this.log.d('Participant has not publisher, adding it');
-				participantAdded.addConnection(connWrapper);
+				participantAdded.addConnection(steramModel);
 			}
 		} else {
 			this.log.d('Creating new participant with id: ', participantId);
-			const remoteParticipant = this.newParticipant(connWrapper, participantId);
+			const remoteParticipant = this.newParticipant(steramModel, participantId);
 			this.remoteParticipants.push(remoteParticipant);
 		}
 		this.updateRemoteParticipants();
@@ -300,7 +300,7 @@ export class ParticipantService {
 	protected updateRemoteParticipants() {
 		this._remoteParticipants.next(this.remoteParticipants);
 	}
-	protected newParticipant(connWrapper?: ConnectionWrapper, participantId?: string) {
-		return new ParticipantModel(connWrapper, participantId);
+	protected newParticipant(steramModel?: StreamModel, participantId?: string) {
+		return new ParticipantModel(steramModel, participantId);
 	}
 }

openvidu-components-angular/projects/openvidu-angular/src/public-api.ts

@@ -24,10 +24,11 @@ export * from './lib/services/storage/storage.service';
 export * from './lib/components/videoconference/videoconference.component';
 export * from './lib/components/user-settings/user-settings.component';
 export * from './lib/components/toolbar/toolbar.component';
-export * from './lib/components/chat/chat.component';
-export * from './lib/components/room/room.component';
+export * from './lib/components/chat-panel/chat-panel.component';
+export * from './lib/components/participants-panel/participants-panel/participants-panel.component';
+export * from './lib/components/session/session.component';
 export * from './lib/components/layout/layout.component';
-export * from './lib/components/participant/participant.component';
+export * from './lib/components/stream/stream.component';
 export * from './lib/components/video/video.component';
 
 // Models

openvidu-components-angular/src/app/app.module.ts

@@ -14,14 +14,14 @@ import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.com
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ChatTestComponent } from './components/chat-test/chat-test.component';
 import { LayoutTestComponent } from './components/layout-test/layout-test.component';
-import { ParticipantTestComponent } from './components/participant-test/participant-test.component';
+import { StreamTestComponent } from './components/stream-test/stream-test.component';
 
 import {
 	OpenviduAngularModule,
 	UserSettingsComponent,
-	ChatComponent,
+	ChatPanelComponent,
 	ToolbarComponent,
-	RoomComponent,
+	SessionComponent,
 	LayoutComponent,
 	VideoconferenceComponent
 } from 'openvidu-angular';
@@ -35,7 +35,7 @@ import { MatButtonModule } from '@angular/material/button';
 		ToolbarTestComponent,
 		ChatTestComponent,
 		LayoutTestComponent,
-		ParticipantTestComponent
+		StreamTestComponent
 	],
 	imports: [
 		BrowserModule,
@@ -44,7 +44,7 @@ import { MatButtonModule } from '@angular/material/button';
 		OpenviduAngularModule.forRoot(environment),
 		AppRoutingModule // Order is important, AppRoutingModule must be the last import for useHash working
 	],
-	providers: [VideoconferenceComponent, UserSettingsComponent, ToolbarComponent, ChatComponent, RoomComponent, LayoutComponent],
+	providers: [VideoconferenceComponent, UserSettingsComponent, ToolbarComponent, ChatPanelComponent, SessionComponent, LayoutComponent],
 	bootstrap: [AppComponent]
 })
 export class AppModule {}

openvidu-components-angular/src/app/app.routing.module.ts

@@ -5,7 +5,7 @@ import { CallComponent } from './openvidu-call/call.component';
 import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.component';
 import { ChatTestComponent } from './components/chat-test/chat-test.component';
 import { LayoutTestComponent } from './components/layout-test/layout-test.component';
-import { ParticipantTestComponent } from './components/participant-test/participant-test.component';
+import { StreamTestComponent } from './components/stream-test/stream-test.component';
 
 const routes: Routes = [
 	{ path: '', component: DashboardComponent },
@@ -13,7 +13,7 @@ const routes: Routes = [
 	{ path: 'toolbar', component: ToolbarTestComponent },
 	{ path: 'chat', component: ChatTestComponent },
 	{ path: 'layout', component: LayoutTestComponent },
-	{ path: 'participant', component: ParticipantTestComponent }
+	{ path: 'stream', component: StreamTestComponent }
 ];
 @NgModule({
 	imports: [RouterModule.forRoot(routes, { useHash: true })],

openvidu-components-angular/src/app/components/chat-test/chat-test.component.html

@@ -33,7 +33,7 @@
 
 <div id="chat-test-container">
 	<!-- OPENVIDU CHAT -->
-	<ov-chat></ov-chat>
+	<ov-chat-panel></ov-chat-panel>
 	<span>WARNING: Like chat component need an active room, this page only allow check and test the UI</span>
 
 </div>

openvidu-components-angular/src/app/components/stream-test/stream-test.component.html

@@ -29,9 +29,9 @@
 
 </div>
 
-<div id="participant-test-container">
-	<!-- OPENVIDU PARTICIPANT -->
-	<ov-participant [participant]="participant"></ov-participant>
+<div id="stream-test-container">
+
+	<ov-stream [participant]="participant"></ov-stream>
 </div>
 
 

openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss

@@ -1,4 +1,4 @@
-#participant-test-container{
+#stream-test-container{
 	background: #d1d1d1;
 	position: absolute;
 	left: 50px;

openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ParticipantTestComponent } from './participant-test.component';
+import { StreamTestComponent } from './stream-test.component';
 
-describe('ParticipantTestComponent', () => {
-  let component: ParticipantTestComponent;
-  let fixture: ComponentFixture<ParticipantTestComponent>;
+describe('StreamTestComponent', () => {
+  let component: StreamTestComponent;
+  let fixture: ComponentFixture<StreamTestComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ParticipantTestComponent ]
+      declarations: [ StreamTestComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ParticipantTestComponent);
+    fixture = TestBed.createComponent(StreamTestComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts

@@ -2,11 +2,11 @@ import { Component, OnInit } from '@angular/core';
 import { ParticipantModel } from 'openvidu-angular';
 
 @Component({
-  selector: 'app-participant-test',
-  templateUrl: './participant-test.component.html',
-  styleUrls: ['./participant-test.component.scss']
+  selector: 'app-stream-test',
+  templateUrl: './stream-test.component.html',
+  styleUrls: ['./stream-test.component.scss']
 })
-export class ParticipantTestComponent implements OnInit {
+export class StreamTestComponent implements OnInit {
 
   participant: ParticipantModel;
   constructor() { }

openvidu-components-angular/src/app/dashboard/dashboard.component.html

@@ -45,8 +45,8 @@
 			<span>Layout Component</span>
 		</div>
 
-		<div class="card card-small" (click)="goTo('participant')" tabindex="0">
-			<span>Participant Component</span>
+		<div class="card card-small" (click)="goTo('stream')" tabindex="0">
+			<span>Stream Component</span>
 		</div>
 
 		<div class="card card-small" (click)="goTo('chat')" tabindex="0">

openvidu-components-angular/src/app/openvidu-call/call.component.html

@@ -4,7 +4,7 @@
 	</div>
 
 	<div *ngIf="joinSessionClicked && isSessionAlive" style="height: 100%;">
-		<ov-room [tokens]="tokens">
+		<ov-session [tokens]="tokens">
 			<ng-template #toolbar>
 				<ov-toolbar
 					(onCamClicked)="onCamClicked()"
@@ -15,6 +15,6 @@
 				></ov-toolbar>
 			</ng-template>
 			<ov-layout layout></ov-layout>
-		</ov-room>
+		</ov-session>
 	</div>
 </div>