ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Refactored webcomponent wrapper

pull/707/head
csantosm 2022-03-16 14:19:04 +01:00
parent facc06bebc
commit 6a01a33dba
6 changed files with 86 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
View File

@ -73,10 +73,6 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
openviduAngularLayoutTemplate: TemplateRef<any>;
openviduAngularStreamTemplate: TemplateRef<any>;
// *** Parameters ***
@Input() sessionName: string;
@Input() participantName: string;
@Input()
set tokens(tokens: { webcam: string; screen: string }) {
if (!tokens || (!tokens.webcam && !tokens.screen)) {
@ -120,7 +116,9 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
error: boolean = false;
errorMessage: string = '';
showPrejoin: boolean = true;
private externalParticipantName: string;
private prejoinSub: Subscription;
private participantNameSub: Subscription;
private log: ILogger;
constructor(
@ -131,7 +129,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
private openviduService: OpenViduService,
private actionService: ActionService,
private libService: OpenViduAngularConfigService,
private tokenService: TokenService,
private tokenService: TokenService
) {
this.log = this.loggerSrv.get('VideoconferenceComponent');
}
@ -139,7 +137,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
async ngOnInit() {
this.subscribeToVideconferenceDirectives();
await this.deviceSrv.initializeDevices();
const nickname = this.storageSrv.getNickname() || 'OpenVidu_User' + Math.floor(Math.random() * 100);
const nickname = this.externalParticipantName || this.storageSrv.getNickname() || `OpenVidu_User${Math.floor(Math.random() * 100)}`;
const props: ParticipantProperties = {
local: true,
nickname
@ -171,6 +169,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
ngOnDestroy(): void {
if (this.prejoinSub) this.prejoinSub.unsubscribe();
if (this.participantNameSub) this.participantNameSub.unsubscribe();
}
ngAfterViewInit() {
@ -295,5 +294,9 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
this.showPrejoin = value;
// this.cd.markForCheck();
});
this.participantNameSub = this.libService.participantName.subscribe((nickname: string) => {
this.externalParticipantName = nickname;
});
}
}

14
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
View File

@ -15,7 +15,13 @@ import {
ToolbarDisplayLogoDirective,
LogoDirective
} from './toolbar.directive';
import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDirective } from './videoconference.directive';
import {
AudioMutedDirective,
MinimalDirective,
PrejoinDirective,
VideoMutedDirective,
ParticipantNameDirective
} from './videoconference.directive';
@NgModule({
declarations: [
@ -34,7 +40,8 @@ import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDire
StreamDisplayAudioDetectionDirective,
StreamSettingsButtonDirective,
LogoDirective,
ParticipantPanelItemMuteButtonDirective
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective
],
exports: [
MinimalDirective,
@ -52,7 +59,8 @@ import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDire
StreamDisplayAudioDetectionDirective,
StreamSettingsButtonDirective,
LogoDirective,
ParticipantPanelItemMuteButtonDirective
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective
]
})
export class ApiDirectiveModule {}

2
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts
View File

@ -30,8 +30,6 @@ export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, O
}
update(value: boolean) {
console.warn('directive mute ', value);
if (this.libService.participantItemMuteButton.getValue() !== value) {
this.libService.participantItemMuteButton.next(value);
}

26
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts
View File

@ -1,4 +1,4 @@
import { Directive, Input, ElementRef, OnDestroy } from '@angular/core';
import { Directive, Input, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
@Directive({
@ -23,6 +23,29 @@ export class MinimalDirective implements OnDestroy {
}
}
@Directive({
selector: 'ov-videoconference[participantName]'
})
export class ParticipantNameDirective implements OnInit {
// Avoiding update participantName dynamically.
// The participantName must be updated from UI
@Input() participantName: string;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngOnInit(): void {
this.update(this.participantName);
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.update('');
}
update(value: string) {
this.libService.participantName.next(value);
}
}
@Directive({
selector: 'ov-videoconference[prejoin]'
})
@ -45,7 +68,6 @@ export class PrejoinDirective implements OnDestroy {
}
}
@Directive({
selector: 'ov-videoconference[videoMuted]'
})

4
openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
View File

@ -8,9 +8,10 @@ import { OpenViduAngularConfig, ParticipantFactoryFunction } from '../../config/
@Injectable()
export class OpenViduAngularConfigService {
private configuration: OpenViduAngularConfig;
minimal = <BehaviorSubject<boolean>>new BehaviorSubject(false);
minimalObs: Observable<boolean>;
participantName = <BehaviorSubject<string>>new BehaviorSubject('');
participantNameObs: Observable<string>;
prejoin = <BehaviorSubject<boolean>>new BehaviorSubject(true);
prejoinObs: Observable<boolean>;
@ -52,6 +53,7 @@ export class OpenViduAngularConfigService {
console.log(this.configuration);
if(this.isProduction()) console.log('OpenVidu Angular Production Mode');
this.minimalObs = this.minimal.asObservable();
this.participantNameObs = this.participantName.asObservable();
this.prejoinObs = this.prejoin.asObservable();
this.videoMutedObs = this.videoMuted.asObservable();
this.audioMutedObs = this.audioMuted.asObservable();

69
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts
View File

@ -2,19 +2,17 @@ import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@ang
import { ILogger, LoggerService, OpenViduService } from 'openvidu-angular';
import { Session } from 'openvidu-browser';
export interface SessionConfig {
sessionName: string;
participantName: string;
tokens: { webcam: string; screen: string };
export interface TokenModel {
webcam: string;
screen: string;
}
@Component({
template: `
<ov-videoconference
*ngIf="successParams"
[sessionName]="_sessionConfig.sessionName"
[userName]="_sessionConfig.userName"
[tokens]="_sessionConfig.tokens"
*ngIf="success"
[participantName]="_participantName"
[tokens]="_tokens"
[minimal]="_minimal"
[prejoin]="_prejoin"
[videoMuted]="_videoMuted"
@ -43,7 +41,9 @@ export interface SessionConfig {
`
})
export class OpenviduWebComponentComponent implements OnInit {
_tokens: TokenModel;
_minimal: boolean = false;
_participantName: string;
_prejoin: boolean = true;
_videoMuted: boolean = false;
_audioMuted: boolean = false;
@ -62,6 +62,9 @@ export class OpenviduWebComponentComponent implements OnInit {
@Input() set minimal(value: string | boolean) {
this._minimal = this.castToBoolean(value);
}
@Input() set participantName(value: string) {
this._participantName = value;
}
@Input() set prejoin(value: string | boolean) {
this._prejoin = this.castToBoolean(value);
}
@ -116,8 +119,8 @@ export class OpenviduWebComponentComponent implements OnInit {
@Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>();
@Output() onToolbarFullscreenButtonClicked = new EventEmitter<any>();
successParams: boolean = false;
_sessionConfig: SessionConfig;
success: boolean = false;
// _sessionConfig: SessionConfig;
private log: ILogger;
@ -128,18 +131,20 @@ export class OpenviduWebComponentComponent implements OnInit {
ngOnInit(): void {}
@Input('sessionConfig')
set sessionConfig(config: SessionConfig | string) {
this.log.d('Webcomponent sessionConfig: ', config);
config = this.castToJson(config);
this.successParams = this.isCorrectParams(<SessionConfig>config);
this._sessionConfig = <SessionConfig>config;
if (!this.successParams) {
this.log.e('Parameters received are incorrect: ', config);
@Input('tokens')
set tokens(value: TokenModel | string) {
this.log.d('Webcomponent tokens: ', value);
try {
this._tokens = this.castToJson(value);
this.success = !!this._tokens?.webcam && !!this._tokens?.screen;
} catch (error) {
this.log.e(error);
if (!this.success) {
this.log.e('Parameters received are incorrect: ', value);
this.log.e('Session cannot start');
}
}
}
_onJoinButtonClicked() {
this.onJoinButtonClicked.emit();
@ -156,16 +161,16 @@ export class OpenviduWebComponentComponent implements OnInit {
_onToolbarMicrophoneButtonClicked() {
this.onToolbarMicrophoneButtonClicked.emit();
}
_onToolbarScreenshareButtonClicked(){
_onToolbarScreenshareButtonClicked() {
this.onToolbarScreenshareButtonClicked.emit();
}
_onToolbarParticipantsPanelButtonClicked(){
_onToolbarParticipantsPanelButtonClicked() {
this.onToolbarParticipantsPanelButtonClicked.emit();
}
_onToolbarChatPanelButtonClicked(){
_onToolbarChatPanelButtonClicked() {
this.onToolbarChatPanelButtonClicked.emit();
}
_onToolbarFullscreenButtonClicked(){
_onToolbarFullscreenButtonClicked() {
this.onToolbarFullscreenButtonClicked.emit();
}
_onSessionCreated(event: Session) {
@ -176,13 +181,13 @@ export class OpenviduWebComponentComponent implements OnInit {
this.openviduService.disconnect();
}
private isCorrectParams(config: SessionConfig): boolean {
return !!config.tokens?.webcam && !!config.tokens?.screen && !!config.participantName && !!config.sessionName;
}
// private isCorrectParams(config: SessionConfig): boolean {
// return !!config.tokens?.webcam && !!config.tokens?.screen /*&& !!config.participantName && !!config.sessionName*/;
// }
private isEmpty(config: SessionConfig): boolean {
return Object.keys(config).length === 0;
}
// private isEmpty(config: SessionConfig): boolean {
// return Object.keys(config).length === 0;
// }
private castToBoolean(value: string | boolean): boolean {
if (typeof value === 'boolean') {
@ -197,7 +202,7 @@ export class OpenviduWebComponentComponent implements OnInit {
}
}
private castToJson(value: SessionConfig | string) {
private castToJson(value: TokenModel | string) {
if (typeof value === 'string') {
try {
return JSON.parse(value);
@ -208,7 +213,9 @@ export class OpenviduWebComponentComponent implements OnInit {
} else if (typeof value === 'object') {
return value;
} else {
throw new Error('Parameter has not a valid type. The parameters must to be string or SessionConfig.');
throw new Error(
'Parameter has not a valid type. The parameters must to be string or TokenModel {webcam:string, screen: string}.'
);
}
}
}