diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html index b595a816..f7f7df7c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html @@ -5,12 +5,8 @@ *ngFor="let stream of localParticipant | connections" [ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }" > - + -
- +
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html index 2016d3c9..cf561c12 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html @@ -1,9 +1,6 @@ - - - - + + + + + - - - - diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html index 45758150..46ca5801 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html @@ -9,14 +9,14 @@ fixedTopGap="0" fixedBottomGap="0" > + - - - + + - +
@@ -26,9 +26,13 @@ - - - +
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index e70fefcd..fbd781dc 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts @@ -24,9 +24,7 @@ import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.ser styleUrls: ['./session.component.css'] }) export class SessionComponent implements OnInit, AfterViewInit { - @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef; @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef; - @ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef; @Input() tokens: { webcam: string; screen: string }; @Output() _session = new EventEmitter(); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html index a7ee6388..fef79f95 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html @@ -15,83 +15,54 @@
+ - - - - - - - - - - - - - - - + + - - - + + - - - - - - - - + + + + + + - - - - + + - - - - - - - - - - - + + + + - + + + - - - - - + + + - - - - - - - - + + + + + + - - - - - + + + - - + + -
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts index e86f6a4a..620b92aa 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts @@ -1,4 +1,5 @@ -import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core'; +import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core'; +import { StreamDirective } from '../../directives/stream/stream.directive'; @Component({ selector: 'ov-videoconference', @@ -6,16 +7,38 @@ import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateR styleUrls: ['./videoconference.component.css'] }) export class VideoconferenceComponent implements OnInit { - @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef; - @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef; - @ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef; - @ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef; - @ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef; - @ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef; + streamTemplate: TemplateRef; + + // @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef; + + @ContentChild(StreamDirective) + set customStream(customStream: StreamDirective) { + if (customStream) { + this.streamTemplate = customStream.template; + } + } @Input() sessionName: string; @Input() userName: string; + @Input() + set tokens(tokens: { webcam: string; screen: string }) { + if (!tokens || (!tokens.webcam && !tokens.screen)) { + //No tokens received + // throw new Error('No tokens received'); + console.warn('No tokens received'); + } else { + if (tokens.webcam || tokens.screen) { + this._tokens = { + webcam: tokens.webcam, + screen: tokens.screen + }; + this.joinSessionClicked = true; + this.isSessionAlive = true; + } + } + } + // @Input() openviduServerUrl: string; // @Input() openviduSecret: string; @@ -33,25 +56,6 @@ export class VideoconferenceComponent implements OnInit { ngOnInit() {} - @Input() - set tokens(tokens: { webcam: string; screen: string }) { - if (!tokens || (!tokens.webcam && !tokens.screen)) { - //No tokens received - // throw new Error('No tokens received'); - console.warn('No tokens received'); - - } else { - if (tokens.webcam || tokens.screen) { - this._tokens = { - webcam: tokens.webcam, - screen: tokens.screen - }; - this.joinSessionClicked = true; - this.isSessionAlive = true; - } - } - } - async _onJoinClicked() { this.onJoinClicked.emit(); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.spec.ts new file mode 100644 index 00000000..8908b61a --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.spec.ts @@ -0,0 +1,8 @@ +import { StreamDirective } from './stream.directive'; + +describe('StreamDirective', () => { + it('should create an instance', () => { + const directive = new StreamDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.ts new file mode 100644 index 00000000..432e66af --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.ts @@ -0,0 +1,10 @@ +import { Directive, OnInit, TemplateRef, ViewContainerRef } from '@angular/core'; + +@Directive({ + selector: '[ovStream]' +}) +export class StreamDirective implements OnInit { + constructor(public template: TemplateRef, public container: ViewContainerRef) {} + + ngOnInit() {} +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts index eb66179d..4c0dfecb 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts @@ -58,9 +58,13 @@ import { ParticipantItemComponent } from './components/panel/participants-panel/ import { ParticipantsPanelComponent } from './components/panel/participants-panel/participants-panel/participants-panel.component'; import { VideoconferenceComponent } from './components/videoconference/videoconference.component'; import { PanelComponent } from './components/panel/panel.component'; +import { StreamDirective } from './directives/stream/stream.directive'; +import { BrowserModule } from '@angular/platform-browser'; @NgModule({ declarations: [ + StreamDirective, + UserSettingsComponent, VideoComponent, ToolbarComponent, @@ -77,7 +81,7 @@ import { PanelComponent } from './components/panel/panel.component'; ParticipantItemComponent, ParticipantsPanelComponent, VideoconferenceComponent, - PanelComponent + PanelComponent, ], imports: [ CommonModule, @@ -132,7 +136,8 @@ import { PanelComponent } from './components/panel/panel.component'; StreamComponent, VideoComponent, ParticipantConnectionsPipe, - CommonModule + CommonModule, + StreamDirective ], entryComponents: [DialogTemplateComponent] }) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts index d7fef6a0..0a3505b0 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts @@ -39,4 +39,7 @@ export * from './lib/models/video-type.model'; export * from './lib/models/notification-options.model'; // Pipes -export * from './lib/pipes/participant-connections.pipe'; \ No newline at end of file +export * from './lib/pipes/participant-connections.pipe'; + +// Directives +export * from './lib/directives/stream/stream.directive'; \ No newline at end of file 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 b8bc3eb1..2953949b 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.html +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html @@ -1,61 +1,22 @@ - - - + - + + + - - + - + 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 ac1a55a7..cfa4c3a2 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.ts +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.ts @@ -1,13 +1,14 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, ContentChild, OnInit } from '@angular/core'; import { RestService } from '../services/rest.service'; import { Router } from '@angular/router'; - @Component({ selector: 'app-call', templateUrl: './call.component.html', styleUrls: ['./call.component.scss'] }) export class CallComponent implements OnInit { + + sessionId = 'prueba-majestuosa-amable'; tokens: { webcam: string; screen: string };