neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

openvidu-insecure-angular: small refactoring (not Output in UserVideoComponent)

Browse Source
This commit is contained in:
pabloFuente 2018-09-26 15:27:54 +02:00
parent 45701b8b07
commit c546573081
4 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openvidu-insecure-angular/src/app/app.component.html
View File

@ -29,10 +29,10 @@
</div>
<div id="video-container" class="col-md-6">
<div *ngIf="publisher" class="stream-container col-md-6 col-xs-6">
<user-video [streamManager]="publisher" (clicked)="updateMainStreamManager(publisher)"></user-video>
<user-video [streamManager]="publisher" (click)="updateMainStreamManager(publisher)"></user-video>
</div>
<div *ngFor="let sub of subscribers" class="stream-container col-md-6 col-xs-6">
<user-video [streamManager]="sub" (clicked)="updateMainStreamManager(sub)"></user-video>
<user-video [streamManager]="sub" (click)="updateMainStreamManager(sub)"></user-video>
</div>
</div>
</div>

14
openvidu-insecure-angular/src/app/app.component.ts
View File

@ -1,9 +1,9 @@
import { Component, HostListener, Input, OnDestroy } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { throwError as observableThrowError, Observable } from 'rxjs';
import { Component, HostListener, OnDestroy } from '@angular/core';
import { OpenVidu, Publisher, Session, StreamEvent, StreamManager, Subscriber } from 'openvidu-browser';
import { throwError as observableThrowError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { OpenVidu, Session, StreamManager, Publisher, Subscriber, StreamEvent } from 'openvidu-browser';
@Component({
selector: 'app-root',
@ -26,8 +26,8 @@ export class AppComponent implements OnDestroy {
myUserName: string;
// Main video of the page, will be 'publisher' or one of the 'subscribers',
// updated by an Output event of UserVideoComponent children
@Input() mainStreamManager: StreamManager;
// updated by click event in UserVideoComponent children
mainStreamManager: StreamManager;
constructor(private httpClient: HttpClient) {
this.generateParticipantInfo();
@ -140,7 +140,7 @@ export class AppComponent implements OnDestroy {
}
}
private updateMainStreamManager(streamManager: StreamManager) {
updateMainStreamManager(streamManager: StreamManager) {
this.mainStreamManager = streamManager;
}
@ -152,7 +152,7 @@ export class AppComponent implements OnDestroy {
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behaviour MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a session in OpenVidu Server (POST /api/sessions)
* 2) Generate a token in OpenVidu Server (POST /api/tokens)
* 3) The token must be consumed in Session.connect() method of OpenVidu Browser

2
openvidu-insecure-angular/src/app/ov-video.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
import { StreamManager } from 'openvidu-browser';
@Component({

12
openvidu-insecure-angular/src/app/user-video.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input } from '@angular/core';
import { StreamManager } from 'openvidu-browser';
@Component({
@ -23,7 +23,7 @@ import { StreamManager } from 'openvidu-browser';
margin: 0;
}`],
template: `
<div (click)="videoClicked()">
<div>
<ov-video [streamManager]="streamManager"></ov-video>
<div><p>{{getNicknameTag()}}</p></div>
</div>`
@ -33,15 +33,7 @@ export class UserVideoComponent {
@Input()
streamManager: StreamManager;
@Output()
clicked = new EventEmitter();
getNicknameTag() { // Gets the nickName of the user
return JSON.parse(this.streamManager.stream.connection.data).clientData;
}
videoClicked() { // Triggers event for the parent component to update its main video display (other UserVideoComponent)
this.clicked.emit();
}
}