From 4fc878f796ae31238fec76832957c6fcae0078a0 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Tue, 5 Apr 2022 15:58:12 +0200 Subject: [PATCH] openvidu-components: Added directive examples and clean testapp - Clean test components - Avoid using backend in development --- openvidu-components-angular/README.md | 9 +- .../src/app/app.module.ts | 52 +++---- .../src/app/app.routing.module.ts | 32 +++-- .../chat-test/chat-test.component.html | 41 ------ .../chat-test/chat-test.component.scss | 26 ---- .../chat-test/chat-test.component.spec.ts | 25 ---- .../chat-test/chat-test.component.ts | 15 -- .../layout-test/layout-test.component.html | 44 ------ .../layout-test/layout-test.component.scss | 29 ---- .../layout-test/layout-test.component.spec.ts | 25 ---- .../layout-test/layout-test.component.ts | 33 ----- .../stream-test/stream-test.component.html | 37 ----- .../stream-test/stream-test.component.scss | 17 --- .../stream-test/stream-test.component.spec.ts | 25 ---- .../stream-test/stream-test.component.ts | 18 --- .../toolbar-test/toolbar-test.component.html | 32 ----- .../toolbar-test/toolbar-test.component.scss | 18 --- .../toolbar-test.component.spec.ts | 25 ---- .../toolbar-test/toolbar-test.component.ts | 15 -- .../chatPanel-directive.component.scss | 0 .../chatPanel-directive.component.ts | 70 +++++++++- .../examples-dashboard.component.ts | 2 +- .../layout-directive.component.ts | 76 ++++++++++- .../toolbar-directive.component.scss | 0 .../panel-directive.component.scss | 0 .../panel-directive.component.ts | 27 +++- ...articipantPanelItem-directive.component.ts | 60 ++++++++ ...ntPanelItemElements-directive.component.ts | 40 ++++++ ...participantsPanel-directive.component.scss | 0 .../participantsPanel-directive.component.ts | 79 ++++++++++- .../stream-directive.component.ts | 39 +++++- .../toolbar-directive.component.scss | 0 .../toolbar-directive.component.scss | 0 .../toolbar-directive.component.ts | 23 ++-- .../toolbar-directive.component.scss | 0 .../toolbar-directive.component.ts | 11 -- ...arAdditionalButtons-directive.component.ts | 43 ++++++ .../src/app/openvidu-call/call.component.html | 4 +- .../src/app/openvidu-call/call.component.ts | 20 ++- .../src/app/services/rest.service.ts | 129 ++++++++++-------- 40 files changed, 565 insertions(+), 576 deletions(-) delete mode 100644 openvidu-components-angular/src/app/components/chat-test/chat-test.component.html delete mode 100644 openvidu-components-angular/src/app/components/chat-test/chat-test.component.scss delete mode 100644 openvidu-components-angular/src/app/components/chat-test/chat-test.component.spec.ts delete mode 100644 openvidu-components-angular/src/app/components/chat-test/chat-test.component.ts delete mode 100644 openvidu-components-angular/src/app/components/layout-test/layout-test.component.html delete mode 100644 openvidu-components-angular/src/app/components/layout-test/layout-test.component.scss delete mode 100644 openvidu-components-angular/src/app/components/layout-test/layout-test.component.spec.ts delete mode 100644 openvidu-components-angular/src/app/components/layout-test/layout-test.component.ts delete mode 100644 openvidu-components-angular/src/app/components/stream-test/stream-test.component.html delete mode 100644 openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss delete mode 100644 openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts delete mode 100644 openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts delete mode 100644 openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.html delete mode 100644 openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.scss delete mode 100644 openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.spec.ts delete mode 100644 openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.ts delete mode 100644 openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.scss delete mode 100644 openvidu-components-angular/src/app/examples/layout-directive/toolbar-directive.component.scss delete mode 100644 openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.scss create mode 100644 openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts create mode 100644 openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts delete mode 100644 openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.scss delete mode 100644 openvidu-components-angular/src/app/examples/stream-directive/toolbar-directive.component.scss delete mode 100644 openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.scss delete mode 100644 openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.scss delete mode 100644 openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.ts create mode 100644 openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts diff --git a/openvidu-components-angular/README.md b/openvidu-components-angular/README.md index cb1fd113..848b002d 100644 --- a/openvidu-components-angular/README.md +++ b/openvidu-components-angular/README.md @@ -1,7 +1,12 @@ # Openvidu Angular -The easier way to build powerfull OpenVidu videoconference frontend applications. +The easier way to build powerful OpenVidu videoconference frontend applications. + +How to install: + +``` +npm install openvidu-angular +``` -![OpenVidu application](app.gif) diff --git a/openvidu-components-angular/src/app/app.module.ts b/openvidu-components-angular/src/app/app.module.ts index b40bd410..fc1f1094 100644 --- a/openvidu-components-angular/src/app/app.module.ts +++ b/openvidu-components-angular/src/app/app.module.ts @@ -5,51 +5,57 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app.routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; import { environment } from 'src/environments/environment'; -// openvidu-angular - import { CallComponent } from './openvidu-call/call.component'; -import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.component'; 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 { StreamTestComponent } from './components/stream-test/stream-test.component'; - -import { - OpenViduAngularModule, - ChatPanelComponent, - ToolbarComponent, - SessionComponent, - LayoutComponent, - VideoconferenceComponent -} from 'openvidu-angular'; -import { MatButtonModule } from '@angular/material/button'; import { TestingComponent } from './testing-app/testing.component'; -import { MatIconModule } from '@angular/material/icon'; +import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component'; +import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component'; +import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component'; +import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component'; +import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component'; +import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component'; +import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component'; +import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component'; +import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component'; + +// openvidu-angular +import { OpenViduAngularModule } from 'openvidu-angular'; +import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component'; @NgModule({ declarations: [ AppComponent, DashboardComponent, CallComponent, - ToolbarTestComponent, - ChatTestComponent, - LayoutTestComponent, - StreamTestComponent, - TestingComponent + TestingComponent, + ExamplesDashboardComponent, + ToolbarDirectiveComponent, + ToolbarAdditionalButtonsDirectiveComponent, + LayoutDirectiveComponent, + StreamDirectiveComponent, + PanelDirectiveComponent, + ParticipantsPanelDirectiveComponent, + ChatPanelDirectiveComponent, + ParticipantPanelItemDirectiveComponent, + ParticipantPanelItemElementsDirectiveComponent ], imports: [ BrowserModule, MatCheckboxModule, MatButtonModule, MatIconModule, + MatMenuModule, BrowserAnimationsModule, OpenViduAngularModule.forRoot(environment), AppRoutingModule // Order is important, AppRoutingModule must be the last import for useHash working ], - providers: [VideoconferenceComponent, ToolbarComponent, ChatPanelComponent, SessionComponent, LayoutComponent], + providers: [], bootstrap: [AppComponent] }) export class AppModule {} diff --git a/openvidu-components-angular/src/app/app.routing.module.ts b/openvidu-components-angular/src/app/app.routing.module.ts index 08d3b3ae..c40b865e 100644 --- a/openvidu-components-angular/src/app/app.routing.module.ts +++ b/openvidu-components-angular/src/app/app.routing.module.ts @@ -2,20 +2,34 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; 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 { StreamTestComponent } from './components/stream-test/stream-test.component'; import { TestingComponent } from './testing-app/testing.component'; +import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component'; +import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component'; +import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component'; +import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component'; +import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component'; +import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component'; +import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component'; +import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component'; + +import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component'; +import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component'; const routes: Routes = [ { path: '', component: DashboardComponent }, { path: 'call', component: CallComponent }, - { path: 'toolbar', component: ToolbarTestComponent }, - { path: 'chat', component: ChatTestComponent }, - { path: 'layout', component: LayoutTestComponent }, - { path: 'stream', component: StreamTestComponent }, - { path: 'testing', component: TestingComponent } + { path: 'testing', component: TestingComponent }, + + { path: 'examples', component: ExamplesDashboardComponent}, + { path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent }, + { path: 'examples/toolbarAdditionalButtonsDirective', component: ToolbarAdditionalButtonsDirectiveComponent }, + { path: 'examples/layoutDirective', component: LayoutDirectiveComponent }, + { path: 'examples/streamDirective', component: StreamDirectiveComponent }, + { path: 'examples/panelDirective', component: PanelDirectiveComponent }, + { path: 'examples/participantsPanelDirective', component: ParticipantsPanelDirectiveComponent }, + { path: 'examples/chatPanelDirective', component: ChatPanelDirectiveComponent }, + { path: 'examples/participantPanelItemDirective', component: ParticipantPanelItemDirectiveComponent }, + { path: 'examples/participantPanelItemElementsDirective', component: ParticipantPanelItemElementsDirectiveComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true })], diff --git a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.html b/openvidu-components-angular/src/app/components/chat-test/chat-test.component.html deleted file mode 100644 index 771d704f..00000000 --- a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.html +++ /dev/null @@ -1,41 +0,0 @@ -

chat-test works!

- - - -
- - - - - - - - - - - Go back to Dashboard page - - -
- -
- - - WARNING: Like chat component need an active room, this page only allow check and test the UI - -
- - diff --git a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.scss b/openvidu-components-angular/src/app/components/chat-test/chat-test.component.scss deleted file mode 100644 index 0d695bbf..00000000 --- a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.scss +++ /dev/null @@ -1,26 +0,0 @@ -#chat-test-container{ - background: #d1d1d1; - position: absolute; - left: 50px; - right: 50px; - top: 150px; - border: solid 2px; - height: 500px; - text-align: center; - - - span { - position: relative; - top: 50%; - font-size: medium; - width: 50px; - font-weight: bold; - } -} - - -::ng-deep #chat-container { - width: 400px !important; - right: 0; -} - diff --git a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.spec.ts b/openvidu-components-angular/src/app/components/chat-test/chat-test.component.spec.ts deleted file mode 100644 index cdb9dff9..00000000 --- a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ChatTestComponent } from './chat-test.component'; - -describe('ChatTestComponent', () => { - let component: ChatTestComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ChatTestComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ChatTestComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.ts b/openvidu-components-angular/src/app/components/chat-test/chat-test.component.ts deleted file mode 100644 index e31358cc..00000000 --- a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-chat-test', - templateUrl: './chat-test.component.html', - styleUrls: ['./chat-test.component.scss'] -}) -export class ChatTestComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.html b/openvidu-components-angular/src/app/components/layout-test/layout-test.component.html deleted file mode 100644 index 57a716de..00000000 --- a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - -
- - - - - - - - - Go back to Dashboard page - - -
- -
- - - - -
- -
- - -
- - diff --git a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.scss b/openvidu-components-angular/src/app/components/layout-test/layout-test.component.scss deleted file mode 100644 index cc774124..00000000 --- a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.scss +++ /dev/null @@ -1,29 +0,0 @@ -#layout-test-container{ - background: #d1d1d1; - position: absolute; - left: 50px; - right: 50px; - top: 150px; - border: solid 2px; - height: calc(100% - 250px); - text-align: center; - - span { - position: relative; - top: 50%; - font-size: medium; - font-weight: bold; - } -} - -#buttons { - position: absolute; - bottom: 20px; - left: 0; - right: 0; - margin: auto; - text-align: center; - button { - margin: 15px; - } -} \ No newline at end of file diff --git a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.spec.ts b/openvidu-components-angular/src/app/components/layout-test/layout-test.component.spec.ts deleted file mode 100644 index 5444f33f..00000000 --- a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { LayoutTestComponent } from './layout-test.component'; - -describe('LayoutTestComponent', () => { - let component: LayoutTestComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ LayoutTestComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(LayoutTestComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.ts b/openvidu-components-angular/src/app/components/layout-test/layout-test.component.ts deleted file mode 100644 index 20578d01..00000000 --- a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ParticipantService, SidenavMenuService } from 'openvidu-angular'; - -@Component({ - selector: 'app-layout-test', - templateUrl: './layout-test.component.html', - styleUrls: ['./layout-test.component.scss'] -}) -export class LayoutTestComponent implements OnInit { - connectionIds: string[] = []; - constructor(private menuService: SidenavMenuService, private participantService: ParticipantService) {} - - ngOnInit(): void {} - - addParticipant() { - const id = `test${Math.random()}`; - const event: any = { connection: { connectionId: id } }; - this.connectionIds.push(id); - //TODO - // this.remoteUserService.add(event, null); - } - - deleteParticipant() { - if (this.connectionIds.length > 0) { - //TODO: - // this.remoteUserService.removeUserByConnectionId(this.connectionIds.pop()); - } - } - - toggleMenu() { - // this.menuService.toggleMenu(); - } -} diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html deleted file mode 100644 index 5d52c209..00000000 --- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - -
- - -
- - diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss deleted file mode 100644 index aa9eb0be..00000000 --- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -#stream-test-container{ - background: #d1d1d1; - position: absolute; - left: 50px; - right: 50px; - top: 150px; - border: solid 2px; - height: calc(100% - 250px); - text-align: center; - - span { - position: relative; - top: 50%; - font-size: medium; - font-weight: bold; - } -} diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts deleted file mode 100644 index ff8823e7..00000000 --- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { StreamTestComponent } from './stream-test.component'; - -describe('StreamTestComponent', () => { - let component: StreamTestComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ StreamTestComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(StreamTestComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts deleted file mode 100644 index d5934c76..00000000 --- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ParticipantModel } from 'openvidu-angular'; - -@Component({ - selector: 'app-stream-test', - templateUrl: './stream-test.component.html', - styleUrls: ['./stream-test.component.scss'] -}) -export class StreamTestComponent implements OnInit { - - stream: ParticipantModel; - constructor() { } - - ngOnInit(): void { - // this.stream = new ParticipantModel(); - } - -} diff --git a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.html b/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.html deleted file mode 100644 index c17a109c..00000000 --- a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - -
- - - WARNING: Like toolbar component need a active room, this page only allow check and test the UI -
- diff --git a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.scss b/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.scss deleted file mode 100644 index c2cc3e9e..00000000 --- a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.scss +++ /dev/null @@ -1,18 +0,0 @@ -#toolbar-test-container{ - background: #d1d1d1; - position: absolute; - left: 50px; - right: 50px; - top: 150px; - border: solid 2px; - height: 300px; - text-align: center; - - span { - position: relative; - top: 50%; - font-size: medium; - font-weight: bold; - } -} - diff --git a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.spec.ts b/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.spec.ts deleted file mode 100644 index c467e93e..00000000 --- a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ToolbarTestComponent } from './toolbar-test.component'; - -describe('ToolbarTestComponent', () => { - let component: ToolbarTestComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ToolbarTestComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ToolbarTestComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.ts b/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.ts deleted file mode 100644 index 08157c84..00000000 --- a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-toolbar-test', - templateUrl: './toolbar-test.component.html', - styleUrls: ['./toolbar-test.component.scss',] -}) -export class ToolbarTestComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.scss b/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts b/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts index 8da405b1..afbab86e 100644 --- a/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts +++ b/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts @@ -1,12 +1,70 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; +import { TokenModel, Signal } from 'openvidu-angular'; +import { Session, SignalOptions } from 'openvidu-browser'; +import { RestService } from 'src/app/services/rest.service'; @Component({ selector: 'app-chatPanel-directive', - template: `

toolbar-directive works!

`, - styleUrls: ['./chatPanel-directive.component.scss'] + template: ` + +
+

Chat

+
+
    +
  • {{ msg }}
  • +
+
+ + +
+
+ `, + styles: [ + ` + #my-panel { + background: #aafffc; + height: 100%; + overflow: hidden; + text-align: center; + } + ` + ] }) -export class ChatPanelDirectiveComponent implements OnInit { - constructor() {} +export class ChatPanelDirectiveComponent { + tokens: TokenModel; + sessionId = 'chat-panel-directive-example'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; + session: Session; + messages: string[] = []; + constructor(private restService: RestService) {} - ngOnInit(): void {} + async onJoinButtonClicked() { + this.tokens = { + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) + }; + } + + onSessionCreated(session: Session) { + this.session = session; + this.session.on(`signal:${Signal.CHAT}`, (event: any) => { + const msg = JSON.parse(event.data).message; + this.messages.push(msg); + }); + } + + send(message: string): void { + const signalOptions: SignalOptions = { + data: JSON.stringify({ message }), + type: Signal.CHAT, + to: undefined + }; + this.session.signal(signalOptions); + } } diff --git a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts b/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts index 9f601889..fc9e2ad0 100644 --- a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts +++ b/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts @@ -13,7 +13,7 @@ export class ExamplesDashboardComponent implements OnInit { ngOnInit(): void {} goTo(path: string) { - this.router.navigate([`/${path}`]); + this.router.navigate([`examples/${path}`]); } } diff --git a/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts b/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts index 27460486..d6087661 100644 --- a/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts +++ b/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts @@ -1,11 +1,75 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular'; +import { Subscription } from 'rxjs'; +import { RestService } from 'src/app/services/rest.service'; @Component({ selector: 'app-layout-directive', - template: `

layout-directive works!

`, -}) -export class LayoutDirectiveComponent implements OnInit { - constructor() {} + styles: [ + ` + .container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } - ngOnInit(): void {} + .item { + flex: 0 50%; + height: 250px; + margin-bottom: 2%; + } + ` + ], + template: ` + +
+
+
+ +
+ +
+ +
+
+
+
+ ` +}) +export class LayoutDirectiveComponent implements OnInit, OnDestroy { + tokens: TokenModel; + sessionId = 'layout-directive-example'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; + localParticipant: ParticipantAbstractModel; + remoteParticipants: ParticipantAbstractModel[]; + localParticipantSubs: Subscription; + remoteParticipantsSubs: Subscription; + + constructor(private restService: RestService, private participantService: ParticipantService) {} + + ngOnInit(): void { + this.subscribeToParticipants(); + } + + ngOnDestroy() { + this.localParticipantSubs.unsubscribe(); + this.remoteParticipantsSubs.unsubscribe(); + } + subscribeToParticipants() { + this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { + this.localParticipant = p; + }); + + this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => { + this.remoteParticipants = participants; + }); + } + + async onJoinButtonClicked() { + this.tokens = { + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) + }; + } } diff --git a/openvidu-components-angular/src/app/examples/layout-directive/toolbar-directive.component.scss b/openvidu-components-angular/src/app/examples/layout-directive/toolbar-directive.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.scss b/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts b/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts index 381dc11d..7f0538e3 100644 --- a/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts +++ b/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts @@ -1,12 +1,33 @@ import { Component, OnInit } from '@angular/core'; +import { TokenModel } from 'openvidu-angular'; +import { RestService } from 'src/app/services/rest.service'; @Component({ selector: 'app-panel-directive', - template: `

toolbar-directive works!

`, - styleUrls: ['./panel-directive.component.scss'] + template: ` + +
+
HOLA?
+
+ +
+
+
+ ` }) export class PanelDirectiveComponent implements OnInit { - constructor() {} + tokens: TokenModel; + sessionId = 'panel-directive-example'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; + constructor(private restService: RestService) {} + + async onJoinButtonClicked() { + this.tokens = { + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) + }; + } ngOnInit(): void {} } diff --git a/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts b/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts new file mode 100644 index 00000000..a87343e6 --- /dev/null +++ b/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts @@ -0,0 +1,60 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular'; +import { Subscription } from 'rxjs'; +import { RestService } from 'src/app/services/rest.service'; + +@Component({ + selector: 'app-participantPanelItem-directive', + template: ` + +
+ + + + + + + +
+
+ `, + styles: [``] +}) +export class ParticipantPanelItemDirectiveComponent implements OnInit, OnDestroy { + tokens: TokenModel; + sessionId = 'participants-panel-directive-example'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; + localParticipant: ParticipantAbstractModel; + remoteParticipants: ParticipantAbstractModel[]; + localParticipantSubs: Subscription; + remoteParticipantsSubs: Subscription; + + constructor(private restService: RestService, private participantService: ParticipantService) {} + + ngOnInit(): void { + this.subscribeToParticipants(); + } + + ngOnDestroy() { + this.localParticipantSubs.unsubscribe(); + this.remoteParticipantsSubs.unsubscribe(); + } + + async onJoinButtonClicked() { + this.tokens = { + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) + }; + } + + subscribeToParticipants() { + this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { + this.localParticipant = p; + }); + + this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => { + this.remoteParticipants = participants; + }); + } +} diff --git a/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts b/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts new file mode 100644 index 00000000..be3b32a6 --- /dev/null +++ b/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { ParticipantService, TokenModel } from 'openvidu-angular'; +import { RestService } from 'src/app/services/rest.service'; + +@Component({ + selector: 'app-participantPanelItemElements-directive', + template: ` + +
+
    +
  • {{ localParticipant.nickname }}
  • +
+ +
    +
  • {{ p.nickname }}
  • +
+
+
+ `, + styles: [``] +}) +export class ParticipantPanelItemElementsDirectiveComponent { + tokens: TokenModel; + sessionId = 'participants-panel-directive-example'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; + + constructor(private restService: RestService, private participantService: ParticipantService) {} + + + + async onJoinButtonClicked() { + this.tokens = { + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) + }; + } + + +} diff --git a/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.scss b/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts b/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts index 8f9b19e5..36d14ab8 100644 --- a/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts +++ b/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts @@ -1,12 +1,77 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, } from '@angular/core'; +import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular'; +import { Subscription } from 'rxjs'; +import { RestService } from 'src/app/services/rest.service'; @Component({ selector: 'app-participantsPanel-directive', - template: `

participantsPanel-directive works!

`, - styleUrls: ['./participantsPanel-directive.component.scss'] -}) -export class ParticipantsPanelDirectiveComponent implements OnInit { - constructor() {} + template: ` + +
+
    +
  • {{localParticipant.nickname}}
  • +
- ngOnInit(): void {} +
    +
  • {{p.nickname}}
  • +
+
+
+ `, + styles: [ + ` + #my-panel { + background: #faff7f; + height: 100%; + overflow: hidden; + } + #my-panel > #local { + background: #a184ff; + } + #my-panel > #remote { + background: #7fb8ff; + } + ` + ] +}) +export class ParticipantsPanelDirectiveComponent implements OnInit, OnDestroy { + tokens: TokenModel; + sessionId = 'participants-panel-directive-example'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; + localParticipant: ParticipantAbstractModel; + remoteParticipants: ParticipantAbstractModel[]; + localParticipantSubs: Subscription; + remoteParticipantsSubs: Subscription; + + constructor( + private restService: RestService, + private participantService: ParticipantService + ) {} + + ngOnInit(): void { + this.subscribeToParticipants(); + } + + ngOnDestroy() { + this.localParticipantSubs.unsubscribe(); + this.remoteParticipantsSubs.unsubscribe(); + } + + async onJoinButtonClicked() { + this.tokens = { + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) + }; + } + + subscribeToParticipants() { + this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { + this.localParticipant = p; + }); + + this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => { + this.remoteParticipants = participants; + }); + } } diff --git a/openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts b/openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts index 4074f3e9..8e73b2e6 100644 --- a/openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts +++ b/openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts @@ -1,11 +1,40 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; +import { TokenModel } from 'openvidu-angular'; +import { RestService } from 'src/app/services/rest.service'; @Component({ selector: 'app-stream-directive', - template: `

stream-directive works!

`, + styles: [ + ` + p { + position: absolute; + bottom: 0; + border: 2px solid; + background: #000000; + } + ` + ], + template: ` + +
+ +

{{ stream.participant.nickname }}

+
+
+ ` }) -export class StreamDirectiveComponent implements OnInit { - constructor() {} +export class StreamDirectiveComponent { + tokens: TokenModel; + sessionId = 'toolbar-directive-example'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; - ngOnInit(): void {} + constructor(private restService: RestService) {} + + async onJoinButtonClicked() { + this.tokens = { + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) + }; + } } diff --git a/openvidu-components-angular/src/app/examples/stream-directive/toolbar-directive.component.scss b/openvidu-components-angular/src/app/examples/stream-directive/toolbar-directive.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.scss b/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts b/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts index bc9ef163..f00a7d8b 100644 --- a/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts +++ b/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { OpenViduService, ParticipantService, TokenModel } from 'openvidu-angular'; +import { OpenViduService, TokenModel } from 'openvidu-angular'; import { RestService } from 'src/app/services/rest.service'; @Component({ @@ -7,8 +7,8 @@ import { RestService } from 'src/app/services/rest.service'; template: `
- - + +
` @@ -18,11 +18,9 @@ export class ToolbarDirectiveComponent implements OnInit { sessionId = 'toolbar-directive-example'; OPENVIDU_URL = 'https://localhost:4443'; OPENVIDU_SECRET = 'MY_SECRET'; - constructor( - private restService: RestService, - private participantService: ParticipantService, - private openviduService: OpenViduService - ) {} + publishVideo = true; + publishAudio = true; + constructor(private restService: RestService, private openviduService: OpenViduService) {} ngOnInit(): void {} @@ -34,7 +32,12 @@ export class ToolbarDirectiveComponent implements OnInit { } toggleVideo() { - const publishVideo = !this.participantService.hasCameraVideoActive(); - // this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publishVideo); + this.publishVideo = !this.publishVideo; + this.openviduService.publishVideo(this.publishVideo); + } + + toggleAudio() { + this.publishAudio = !this.publishAudio; + this.openviduService.publishAudio(this.publishAudio); } } diff --git a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.scss b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.ts b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.ts deleted file mode 100644 index 69bfff13..00000000 --- a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-toolbarAdditionalButtons-directive', - template: `

toolbar-directive works!

`, -}) -export class ToolbarAdditionalButtonsDirectiveComponent implements OnInit { - constructor() {} - - ngOnInit(): void {} -} diff --git a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts new file mode 100644 index 00000000..ac2d79fa --- /dev/null +++ b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts @@ -0,0 +1,43 @@ +import { Component } from '@angular/core'; +import { OpenViduService, ParticipantService, TokenModel } from 'openvidu-angular'; +import { RestService } from 'src/app/services/rest.service'; + +@Component({ + selector: 'app-toolbarAdditionalButtons-directive', + template: ` + +
+ + +
+
+ ` +}) +export class ToolbarAdditionalButtonsDirectiveComponent { + tokens: TokenModel; + sessionId = 'toolbar-additionalbtn-directive-example'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; + constructor( + private restService: RestService, + private openviduService: OpenViduService, + private participantService: ParticipantService + ) {} + + async onJoinButtonClicked() { + this.tokens = { + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) + }; + } + + toggleVideo() { + const publishVideo = !this.participantService.isMyVideoActive(); + this.openviduService.publishVideo(publishVideo); + } + + toggleAudio() { + const publishAudio = !this.participantService.isMyAudioActive(); + this.openviduService.publishAudio(publishAudio); + } +} diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.html b/openvidu-components-angular/src/app/openvidu-call/call.component.html index c49c6a98..6d1fa7e9 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.html +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html @@ -8,9 +8,11 @@ (onToolbarFullscreenButtonClicked)="onToolbarFullscreenButtonClicked()" (onToolbarParticipantsPanelButtonClicked)="onToolbarParticipantsPanelButtonClicked()" (onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()" - [prejoin]="false" + [minimal]="false" > + + diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.ts b/openvidu-components-angular/src/app/openvidu-call/call.component.ts index 7ea9911e..e8a6f305 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.ts +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.ts @@ -8,7 +8,9 @@ import { Router } from '@angular/router'; }) export class CallComponent implements OnInit { value = true; - sessionId = 'qqqq'; + sessionId = 'daily-call'; + OPENVIDU_URL = 'https://localhost:4443'; + OPENVIDU_SECRET = 'MY_SECRET'; tokens: { webcam: string; screen: string }; joinSessionClicked: boolean = false; @@ -19,18 +21,22 @@ export class CallComponent implements OnInit { async ngOnInit() { this.tokens = { - webcam: await this.restService.getToken(this.sessionId), - screen: await this.restService.getToken(this.sessionId) + webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), + screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) }; } async onJoinClicked() { console.warn('VC JOIN BUTTON CLICKED'); - this.tokens = { - webcam: await this.restService.getToken(this.sessionId), - screen: await this.restService.getToken(this.sessionId) - }; + // this.tokens = { + // webcam: await this.restService.getToken(this.sessionId), + // screen: await this.restService.getToken(this.sessionId) + // }; + + console.log(await this.restService.getToken(this.sessionId)) + + // setInterval(() => { // this.value = !this.value; diff --git a/openvidu-components-angular/src/app/services/rest.service.ts b/openvidu-components-angular/src/app/services/rest.service.ts index 35ed5377..cec4921e 100644 --- a/openvidu-components-angular/src/app/services/rest.service.ts +++ b/openvidu-components-angular/src/app/services/rest.service.ts @@ -13,68 +13,77 @@ export class RestService { this.baseHref = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : ''); } async getToken(sessionId: string, openviduServerUrl?: string, openviduSecret?: string): Promise { - // if (!!openviduServerUrl && !!openviduSecret) { - // const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret); - // return await this.createToken(_sessionId, openviduServerUrl, openviduSecret); - // } - try { - return lastValueFrom(this.http.post(this.baseHref + 'call', { sessionId })); - } catch (error) { - if (error.status === 404) { - throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' }; - } - throw error; + if (!!openviduServerUrl && !!openviduSecret) { + const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret); + return await this.createToken(_sessionId, openviduServerUrl, openviduSecret); } + // try { + // return lastValueFrom(this.http.post(this.baseHref + 'call', { sessionId })); + // } catch (error) { + // if (error.status === 404) { + // throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' }; + // } + // throw error; + // } } - // private createSession(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise { - // return new Promise((resolve, reject) => { - // const body = JSON.stringify({ customSessionId: sessionId }); - // const options = { - // headers: new HttpHeaders({ - // Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret), - // 'Content-Type': 'application/json' - // }) - // }; - // return this.http - // .post(openviduServerUrl + '/openvidu/api/sessions', body, options) - // .pipe( - // catchError((error) => { - // if (error.status === 409) { - // resolve(sessionId); - // } - // if (error.statusText === 'Unknown Error') { - // reject({ status: 401, message: 'ERR_CERT_AUTHORITY_INVALID' }); - // } - // return observableThrowError(error); - // }) - // ) - // .subscribe((response) => { - // resolve(response.id); - // }); - // }); - // } + /** + * + * * WARNING: This is why this tutorial is an insecure application. + * * We need to ask OpenVidu Server for a user token in order to connect to our session. + * * This process should entirely take place in our server-side + */ + private createSession(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise { + return new Promise((resolve, reject) => { + const body = JSON.stringify({ customSessionId: sessionId }); + const options = { + headers: new HttpHeaders({ + Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret), + 'Content-Type': 'application/json' + }) + }; + return this.http + .post(openviduServerUrl + '/openvidu/api/sessions', body, options) + .pipe( + catchError((error) => { + if (error.status === 409) { + resolve(sessionId); + } + if (error.statusText === 'Unknown Error') { + reject({ status: 401, message: 'ERR_CERT_AUTHORITY_INVALID' }); + } + return observableThrowError(error); + }) + ) + .subscribe((response) => { + resolve(response.id); + }); + }); + } - // private createToken(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise { - // return new Promise((resolve, reject) => { - // const body = JSON.stringify({}); - // const options = { - // headers: new HttpHeaders({ - // Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret), - // 'Content-Type': 'application/json' - // }) - // }; - // return this.http - // .post(openviduServerUrl + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) - // .pipe( - // catchError((error) => { - // reject(error); - // return observableThrowError(error); - // }) - // ) - // .subscribe((response) => { - // resolve(response.token); - // }); - // }); - // } + private createToken(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise { + return new Promise((resolve, reject) => { + const body = JSON.stringify({}); + const options = { + headers: new HttpHeaders({ + Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret), + 'Content-Type': 'application/json' + }) + }; + return this.http + .post(openviduServerUrl + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) + .pipe( + catchError((error) => { + reject(error); + return observableThrowError(error); + }) + ) + .subscribe((response) => { + + console.warn(response); + + resolve(response.token); + }); + }); + } }