From d44ba5fd611d6e908698c11bea1d536db6699795 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Wed, 27 Sep 2017 18:42:11 +0200 Subject: [PATCH] session tab on openvidu-testapp --- openvidu-testapp/src/app/app.module.ts | 4 +- openvidu-testapp/src/app/app.routing.ts | 5 - .../dashboard/app.material.module.ts | 41 ------ .../dashboard/dashboard.component.css | 102 +++---------- .../dashboard/dashboard.component.html | 107 ++++++++------ .../dashboard/dashboard.component.ts | 102 ++++++++++++- .../components/session/session.component.css | 0 .../components/session/session.component.html | 11 -- .../session/session.component.spec.ts | 25 ---- .../components/session/session.component.ts | 135 ------------------ .../src/app/services/openvidu-rest.service.ts | 1 - .../app/services/session-conf.service.spec.ts | 15 -- .../src/app/services/session-conf.service.ts | 17 --- openvidu-testapp/src/styles.css | 4 + 14 files changed, 184 insertions(+), 385 deletions(-) delete mode 100644 openvidu-testapp/src/app/components/dashboard/app.material.module.ts delete mode 100644 openvidu-testapp/src/app/components/session/session.component.css delete mode 100644 openvidu-testapp/src/app/components/session/session.component.html delete mode 100644 openvidu-testapp/src/app/components/session/session.component.spec.ts delete mode 100644 openvidu-testapp/src/app/components/session/session.component.ts delete mode 100644 openvidu-testapp/src/app/services/session-conf.service.spec.ts delete mode 100644 openvidu-testapp/src/app/services/session-conf.service.ts diff --git a/openvidu-testapp/src/app/app.module.ts b/openvidu-testapp/src/app/app.module.ts index 14623889..1b8cac75 100644 --- a/openvidu-testapp/src/app/app.module.ts +++ b/openvidu-testapp/src/app/app.module.ts @@ -8,15 +8,13 @@ import { AppMaterialModule } from './app.material.module'; import { routing } from './app.routing'; import { AppComponent } from './app.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; -import { SessionComponent } from './components/session/session.component'; import { OpenviduRestService } from './services/openvidu-rest.service'; @NgModule({ declarations: [ AppComponent, - DashboardComponent, - SessionComponent + DashboardComponent ], imports: [ BrowserModule, diff --git a/openvidu-testapp/src/app/app.routing.ts b/openvidu-testapp/src/app/app.routing.ts index 909bf8f4..cac03737 100644 --- a/openvidu-testapp/src/app/app.routing.ts +++ b/openvidu-testapp/src/app/app.routing.ts @@ -2,16 +2,11 @@ import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { DashboardComponent } from './components/dashboard/dashboard.component'; -import { SessionComponent } from './components/session/session.component'; const appRoutes: Routes = [ { path: '', component: DashboardComponent - }, - { - path: 'session/:session-name', - component: SessionComponent } ]; diff --git a/openvidu-testapp/src/app/components/dashboard/app.material.module.ts b/openvidu-testapp/src/app/components/dashboard/app.material.module.ts deleted file mode 100644 index 314e4aec..00000000 --- a/openvidu-testapp/src/app/components/dashboard/app.material.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { - MdButtonModule, - MdIconModule, - MdCheckboxModule, - MdCardModule, - MdInputModule, - MdProgressSpinnerModule, - MdTooltipModule, - MdDialogModule, - MdSlideToggleModule -} from '@angular/material'; - -@NgModule({ - imports: [ - BrowserAnimationsModule, - MdButtonModule, - MdIconModule, - MdCheckboxModule, - MdCardModule, - MdInputModule, - MdProgressSpinnerModule, - MdTooltipModule, - MdDialogModule, - MdSlideToggleModule - ], - exports: [ - BrowserAnimationsModule, - MdButtonModule, - MdIconModule, - MdCheckboxModule, - MdCardModule, - MdInputModule, - MdProgressSpinnerModule, - MdTooltipModule, - MdDialogModule, - MdSlideToggleModule - ], -}) -export class AppMaterialModule { } diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css index 3d7e8389..6936f243 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css @@ -27,99 +27,31 @@ th { } md-card { - font-weight: bold; + background-color: rgba(77, 77, 77, 0.05); } -#join-dialog h1 { - color: #4d4d4d; - font-weight: bold; - text-align: center; +.join-card { + width: fit-content; + margin: auto; + margin-bottom: 50px; + margin-top: 50px; } -#img-div { - text-align: center; - position: absolute; - top: 19%; - left: 50%; - transform: translate(-50%, -50%); +.full-width { + width: 100%; } -#img-div img { - height: 15%; -} - -#join-dialog label { - color: #0088aa; -} - -#join-dialog input.btn { - margin-top: 15px; -} - -#session-header { - margin-bottom: 20px; -} - -#session-title { - display: inline-block; -} - -#buttonLeaveSession { - float: right; +.inner-card { + border: 1px solid #e1e1e1; + padding: 16px; + background: #ffffff; margin-top: 20px; } -#video-container video { - position: relative; - float: left; - cursor: pointer; +.inner-card h4 { + margin-top: 0; } -#video-container p { - display: inline-block; - background: #f8f8f8; - padding-right: 5px; - padding-left: 5px; - color: #777777; - font-weight: bold; - border-bottom-right-radius: 4px; -} - -video { - width: 100%; - height: auto; -} - -#main-video p { - position: absolute; - display: inline-block; - background: #f8f8f8; - padding-right: 5px; - padding-left: 5px; - left: 0; - font-size: 22px; - color: #777777; - font-weight: bold; - border-bottom-right-radius: 4px; -} - -#main-video video { - cursor: initial; -} - -#session img { - width: 100%; - height: auto; - display: inline-block; - object-fit: contain; - vertical-align: baseline; -} - -#session #video-container img { - position: relative; - float: left; - width: 50%; - cursor: pointer; - object-fit: cover; - height: 180px; -} +.inner-card md-radio-group { + padding-left: 20px; +} \ No newline at end of file diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html index d89021a5..f8cd7ce0 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html @@ -1,44 +1,83 @@ - + - - + + + + + + +
-
- - -
+
+ + Join a session + +
+ + + + + + +
+

Send...

+

+ Video +

+

+ + Video + Screen + +

+

+ Audio +

+
+
+

Enter with active...

+ Video + Audio +
+
+ + + + + +
+
+
+
+

{{sessionName}}

+ +
+
+
+
- - - -
+
+ +
-
- - -
-
-
- - - - -
-
+
-
+
+
+ +
@@ -90,23 +129,3 @@
- - diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts b/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts index fe6d0935..84543a58 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts @@ -4,7 +4,7 @@ import { DataSource } from '@angular/cdk/table'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; -import { OpenVidu } from 'openvidu-browser'; +import { OpenVidu, Session } from 'openvidu-browser'; import * as colormap from 'colormap'; const numColors = 64; @@ -26,9 +26,19 @@ export class DashboardComponent implements OnInit { openViduRoles = ['SUBSCRIBER', 'PUBLISHER', 'MODERATOR']; + sendAudio = true; + sendVideo = true; + optionVideo = 'video'; + activeAudio = true; + activeVideo = true; + // Join form - sessionName: string; clientData: string; + sessionName: string; + + // OpenVidu objects + OV: OpenVidu; + session: Session; // API REST data collected data = []; @@ -48,11 +58,94 @@ export class DashboardComponent implements OnInit { ngOnInit() { } + + + + /* TEST SESSION TAB */ + private generateSessionInfo() { this.sessionName = 'TestSession'; - this.clientData = 'RandomClient' + Math.floor(Math.random() * 100); + this.clientData = 'TestClient'; } + private removeHttps = input => input.replace(/^https?:\/\//, ''); + + private joinSession(): void { + this.OV = new OpenVidu(); + + this.session = this.OV.initSession('wss://' + + this.removeHttps(this.openviduURL) + + '/' + + this.sessionName + '?secret=' + + this.openviduSecret); + + this.session.on('streamCreated', (event) => { + const subscriber = this.session.subscribe(event.stream, 'video-container'); + subscriber.on('videoElementCreated', (e) => { + this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection); + }); + }); + + this.session.on('streamDestroyed', (event) => { + this.removeUserData(event.stream.connection); + }); + + this.session.connect(null, this.clientData, (error) => { + + if (!error) { + const publisher = this.OV.initPublisher('video-container', { + audio: true, + video: true, + quality: 'MEDIUM' + }); + + publisher.on('videoElementCreated', (event) => { + this.appendUserData(event.element, this.clientData, null); + event.element['muted'] = true; + }); + + this.session.publish(publisher); + + } else { + console.log('There was an error connecting to the session:', error.code, error.message); + } + }); + } + + private leaveSession(): void { + if (this.session) { + this.session.disconnect(); + } + this.session = null; + this.OV = null; + } + + private appendUserData(videoElement, data, connection) { + const dataNode = document.createElement('div'); + dataNode.className = 'data-node'; + dataNode.id = 'data-' + (connection ? connection.connectionId : data); + dataNode.innerHTML = '

' + data + '

'; + videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling); + } + + private removeUserData(connection) { + $('#data-' + connection.connectionId).remove(); + } + + private removeAllUserData() { + const nicknameElements = $('.data-node'); + while (nicknameElements[0]) { + nicknameElements[0].remove(); + } + } + + /* TEST SESSION TAB */ + + + + + /* API REST TAB */ + private getSessionId() { this.openviduRestService.getSessionId(this.openviduURL, this.openviduSecret) .then((sessionId) => { @@ -92,4 +185,7 @@ export class DashboardComponent implements OnInit { this.openviduRestService.sessionIdSession.clear(); this.openviduRestService.sessionIdTokenOpenViduRole.clear(); } + + /* API REST TAB */ + } diff --git a/openvidu-testapp/src/app/components/session/session.component.css b/openvidu-testapp/src/app/components/session/session.component.css deleted file mode 100644 index e69de29b..00000000 diff --git a/openvidu-testapp/src/app/components/session/session.component.html b/openvidu-testapp/src/app/components/session/session.component.html deleted file mode 100644 index 6a817399..00000000 --- a/openvidu-testapp/src/app/components/session/session.component.html +++ /dev/null @@ -1,11 +0,0 @@ -
-
-

{{sessionName}}

- -
-
-

- -
-
-
\ No newline at end of file diff --git a/openvidu-testapp/src/app/components/session/session.component.spec.ts b/openvidu-testapp/src/app/components/session/session.component.spec.ts deleted file mode 100644 index b6161fd6..00000000 --- a/openvidu-testapp/src/app/components/session/session.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SessionComponent } from './session.component'; - -describe('SessionComponent', () => { - let component: SessionComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ SessionComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(SessionComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/openvidu-testapp/src/app/components/session/session.component.ts b/openvidu-testapp/src/app/components/session/session.component.ts deleted file mode 100644 index 50ee54ee..00000000 --- a/openvidu-testapp/src/app/components/session/session.component.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { OpenVidu, Session } from 'openvidu-browser'; -import { Component, ElementRef, ViewChild, HostListener, OnDestroy } from '@angular/core'; - -declare var $: any; - -@Component({ - selector: 'app-session', - templateUrl: './session.component.html', - styleUrls: ['./session.component.css'] -}) -export class SessionComponent implements OnDestroy { - - @ViewChild('mainVideoElement') elementRef: ElementRef; - mainVideoElement: HTMLVideoElement; - - // OpenVidu objects - OV: OpenVidu; - session: Session; - - // Join form - sessionName: string; - clientData: string; - - constructor() { } - - @HostListener('window:beforeunload') - beforeunloadHandler() { - // On window closed leave session - this.leaveSession(); - } - - ngOnDestroy() { - // On component destroyed leave session - this.leaveSession(); - } - - joinSession() { - - this.OV = new OpenVidu(); - - this.session = this.OV.initSession('wss://' + location.hostname + ':8443/' + this.sessionName + '?secret=MY_SECRET'); - - this.mainVideoElement = this.elementRef.nativeElement; - - this.session.on('streamCreated', (event) => { - const subscriber = this.session.subscribe(event.stream, 'video-container'); - subscriber.on('videoElementCreated', (e) => { - this.appendUserData(e.element, subscriber.stream.connection); - }); - }); - - this.session.on('streamDestroyed', (event) => { - this.removeUserData(event.stream.connection); - }); - - this.session.connect(null, this.clientData, (error) => { - - if (!error) { - const publisher = this.OV.initPublisher('video-container', { - audio: true, - video: true, - quality: 'MEDIUM' - }); - - publisher.on('videoElementCreated', (event) => { - this.initMainVideo(event.element, this.clientData); - this.appendUserData(event.element, this.clientData); - event.element['muted'] = true; - }); - - this.session.publish(publisher); - - } else { - console.log('There was an error connecting to the session:', error.code, error.message); - } - }); - - return false; - } - - leaveSession() { - if (this.OV) { - this.session.disconnect(); - } - this.removeAllUserData(); - this.session = null; - this.OV = null; - } - - private appendUserData(videoElement, connection) { - let userData; - let nodeId; - if (typeof connection === 'string') { - userData = connection; - nodeId = connection; - } else { - userData = JSON.parse(connection.data).clientData; - nodeId = connection.connectionId; - } - const dataNode = document.createElement('div'); - dataNode.className = 'data-node'; - dataNode.id = 'data-' + nodeId; - dataNode.innerHTML = '

' + userData + '

'; - videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling); - this.addClickListener(videoElement, userData); - } - - private removeUserData(connection) { - const dataNode = $('#data-' + connection.connectionId); - dataNode.parentNode.removeChild(dataNode); - } - - private removeAllUserData() { - const nicknameElements = $('.data-node'); - while (nicknameElements[0]) { - nicknameElements[0].parentNode.removeChild(nicknameElements[0]); - } - } - - private addClickListener(videoElement: HTMLVideoElement, userData) { - videoElement.addEventListener('click', () => { - const mainUserData = $('#main-video p'); - if (this.mainVideoElement.srcObject !== videoElement.srcObject) { - mainUserData.innerHTML = userData; - this.mainVideoElement.srcObject = videoElement.srcObject; - } - }); - } - - private initMainVideo(videoElement: HTMLVideoElement, userData) { - this.mainVideoElement.srcObject = videoElement.srcObject; - $('#main-video p').innerHTML = userData; - this.mainVideoElement['muted'] = true; - } -} diff --git a/openvidu-testapp/src/app/services/openvidu-rest.service.ts b/openvidu-testapp/src/app/services/openvidu-rest.service.ts index 798c2970..9e13d8f8 100644 --- a/openvidu-testapp/src/app/services/openvidu-rest.service.ts +++ b/openvidu-testapp/src/app/services/openvidu-rest.service.ts @@ -31,7 +31,6 @@ export class OpenviduRestService { getToken(openviduURL: string, openviduSecret: string, sessionId: string, role: string, serverData: string): Promise { console.warn(sessionId); - const OV = new OpenViduAPI(openviduURL, openviduSecret); const session: SessionAPI = this.sessionIdSession.get(sessionId); const OVRole: OpenViduRoleAPI = OpenViduRoleAPI[role]; diff --git a/openvidu-testapp/src/app/services/session-conf.service.spec.ts b/openvidu-testapp/src/app/services/session-conf.service.spec.ts deleted file mode 100644 index a4b153e8..00000000 --- a/openvidu-testapp/src/app/services/session-conf.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; - -import { SessionConfService } from './session-conf.service'; - -describe('SessionConfService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [SessionConfService] - }); - }); - - it('should be created', inject([SessionConfService], (service: SessionConfService) => { - expect(service).toBeTruthy(); - })); -}); diff --git a/openvidu-testapp/src/app/services/session-conf.service.ts b/openvidu-testapp/src/app/services/session-conf.service.ts deleted file mode 100644 index 2fd946ba..00000000 --- a/openvidu-testapp/src/app/services/session-conf.service.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs/Subject'; - -@Injectable() -export class SessionConfService { - - private conf$ = new Subject(); - - getConf() { - return this.conf$; - } - - updateConf(configuration: any) { - this.conf$.next(configuration); - } - -} diff --git a/openvidu-testapp/src/styles.css b/openvidu-testapp/src/styles.css index 93f57389..749e90ec 100644 --- a/openvidu-testapp/src/styles.css +++ b/openvidu-testapp/src/styles.css @@ -20,3 +20,7 @@ ul { list-style: none; padding-left: 0; } + +video { + max-width: 300px; +} \ No newline at end of file