mirror of https://github.com/OpenVidu/openvidu.git
109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import {
|
|
AfterViewInit,
|
|
ChangeDetectionStrategy,
|
|
ChangeDetectorRef,
|
|
Component,
|
|
ContentChild,
|
|
OnDestroy,
|
|
OnInit,
|
|
TemplateRef
|
|
} from '@angular/core';
|
|
import { Subscription } from 'rxjs';
|
|
import { ParticipantService } from '../../services/participant/participant.service';
|
|
import { ParticipantAbstractModel } from '../../models/participant.model';
|
|
import { LayoutService } from '../../services/layout/layout.service';
|
|
import { StreamDirective } from '../../directives/template/openvidu-angular.directive';
|
|
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
|
|
|
|
@Component({
|
|
selector: 'ov-layout',
|
|
templateUrl: './layout.component.html',
|
|
styleUrls: ['./layout.component.css'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
|
|
@ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef<any>;
|
|
|
|
@ContentChild(StreamDirective)
|
|
set externalStream(externalStream: StreamDirective) {
|
|
// This directive will has value only when STREAM component tagget with '*ovStream' directive
|
|
// is inside of the layout component tagged with '*ovLayout' directive
|
|
if (externalStream) {
|
|
this.streamTemplate = externalStream.template;
|
|
}
|
|
}
|
|
|
|
localParticipant: ParticipantAbstractModel;
|
|
remoteParticipants: ParticipantAbstractModel[] = [];
|
|
protected localParticipantSubs: Subscription;
|
|
protected remoteParticipantsSubs: Subscription;
|
|
|
|
constructor(
|
|
protected layoutService: LayoutService,
|
|
protected participantService: ParticipantService,
|
|
private libService: OpenViduAngularConfigService,
|
|
private cd: ChangeDetectorRef
|
|
) {}
|
|
|
|
@ViewChild('localStream', { static: false, read: ViewContainerRef })
|
|
set stream(reference: ViewContainerRef) {
|
|
setTimeout(() => {
|
|
if (reference) {
|
|
const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.STREAM);
|
|
//reference.clear();
|
|
this._localStreamComponent = component;
|
|
// reference.createComponent(component);
|
|
}
|
|
}, 0);
|
|
}
|
|
|
|
@ViewChild('remoteStream', { static: false, read: ViewContainerRef })
|
|
set remoteStream(reference: ViewContainerRef) {
|
|
setTimeout(() => {
|
|
if (reference) {
|
|
|
|
const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.STREAM);
|
|
// reference.clear();
|
|
this._remoteStreamComponent = component;
|
|
// reference.createComponent(component);
|
|
}
|
|
}, 0);
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.subscribeToParticipants();
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
let timeout: number = 0;
|
|
// if (this.libService.isWebcomponent()) {
|
|
// timeout = 0;
|
|
// }
|
|
|
|
this.layoutService.initialize(timeout);
|
|
this.layoutService.update(timeout);
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.localParticipant = null;
|
|
this.remoteParticipants = [];
|
|
if (this.localParticipantSubs) this.localParticipantSubs.unsubscribe();
|
|
if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe();
|
|
this.layoutService.clear();
|
|
}
|
|
|
|
protected subscribeToParticipants() {
|
|
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
|
|
this.localParticipant = p;
|
|
this.layoutService.update();
|
|
this.cd.markForCheck();
|
|
});
|
|
|
|
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
|
|
this.remoteParticipants = participants;
|
|
this.layoutService.update();
|
|
this.cd.markForCheck();
|
|
});
|
|
}
|
|
}
|