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

openvidu-components: Added OnPush detection strategy

pull/707/head
csantosm 2022-02-23 12:13:28 +01:00
parent 8ee9d74d3d
commit 948a64c551
6 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
View File

@ -1,4 +1,4 @@
import { AfterViewInit, Component, ContentChild, OnDestroy, OnInit, TemplateRef } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnDestroy, OnInit, TemplateRef } from '@angular/core';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { ParticipantService } from '../../services/participant/participant.service'; import { ParticipantService } from '../../services/participant/participant.service';
import { ParticipantAbstractModel } from '../../models/participant.model'; import { ParticipantAbstractModel } from '../../models/participant.model';
@ -8,9 +8,10 @@ import { StreamDirective } from '../../directives/openvidu-angular.directive';
@Component({ @Component({
selector: 'ov-layout', selector: 'ov-layout',
templateUrl: './layout.component.html', templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css'] styleUrls: ['./layout.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { export class LayoutComponent implements OnInit, OnDestroy {
@ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef<any>; @ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef<any>;
@ContentChild(StreamDirective) @ContentChild(StreamDirective)
@ -27,30 +28,33 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
protected localParticipantSubs: Subscription; protected localParticipantSubs: Subscription;
protected remoteParticipantsSubs: Subscription; protected remoteParticipantsSubs: Subscription;
constructor(protected layoutService: LayoutService, protected participantService: ParticipantService) {} constructor(protected layoutService: LayoutService, protected participantService: ParticipantService, private cd: ChangeDetectorRef) {}
ngOnInit(): void { ngOnInit(): void {
this.subscribeToUsers(); this.subscribeToUsers();
this.layoutService.initialize();
this.layoutService.update();
} }
ngAfterViewInit() {}
ngOnDestroy() { ngOnDestroy() {
this.localParticipant = null; this.localParticipant = null;
this.remoteParticipants = []; this.remoteParticipants = [];
if (this.localParticipantSubs) this.localParticipantSubs.unsubscribe(); if (this.localParticipantSubs) this.localParticipantSubs.unsubscribe();
if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe(); if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe();
this.layoutService.clear();
} }
protected subscribeToUsers() { protected subscribeToUsers() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p; this.localParticipant = p;
this.layoutService.update(); this.layoutService.update();
this.cd.markForCheck();
}); });
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => { this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
this.remoteParticipants = [...participants]; this.remoteParticipants = [...participants];
this.layoutService.update(); this.layoutService.update();
this.cd.markForCheck();
}); });
} }
} }

5
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
View File

@ -1,4 +1,4 @@
import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { ChatMessage } from '../../../models/chat.model'; import { ChatMessage } from '../../../models/chat.model';
import { MenuType } from '../../../models/menu.model'; import { MenuType } from '../../../models/menu.model';
@ -8,7 +8,8 @@ import { SidenavMenuService } from '../../../services/sidenav-menu/sidenav-menu.
@Component({ @Component({
selector: 'ov-chat-panel', selector: 'ov-chat-panel',
templateUrl: './chat-panel.component.html', templateUrl: './chat-panel.component.html',
styleUrls: ['./chat-panel.component.css'] styleUrls: ['./chat-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class ChatPanelComponent implements OnInit, AfterViewInit { export class ChatPanelComponent implements OnInit, AfterViewInit {
@ViewChild('chatScroll') chatScroll: ElementRef; @ViewChild('chatScroll') chatScroll: ElementRef;

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
import { skip, Subscription } from 'rxjs'; import { skip, Subscription } from 'rxjs';
import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/openvidu-angular.directive'; import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/openvidu-angular.directive';
import { MenuType } from '../../models/menu.model'; import { MenuType } from '../../models/menu.model';
@ -7,7 +7,8 @@ import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.ser
@Component({ @Component({
selector: 'ov-panel', selector: 'ov-panel',
templateUrl: './panel.component.html', templateUrl: './panel.component.html',
styleUrls: ['./panel.component.css'] styleUrls: ['./panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class PanelComponent implements OnInit { export class PanelComponent implements OnInit {
@ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef<any>; @ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef<any>;
@ -34,7 +35,7 @@ export class PanelComponent implements OnInit {
isParticipantsPanelOpened: boolean; isParticipantsPanelOpened: boolean;
isChatPanelOpened: boolean; isChatPanelOpened: boolean;
menuSubscription: Subscription; menuSubscription: Subscription;
constructor(protected menuService: SidenavMenuService) {} constructor(protected menuService: SidenavMenuService, private cd: ChangeDetectorRef) {}
ngOnInit(): void { ngOnInit(): void {
this.subscribeToPanelToggling(); this.subscribeToPanelToggling();
@ -43,6 +44,7 @@ export class PanelComponent implements OnInit {
this.menuSubscription = this.menuService.menuOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => { this.menuSubscription = this.menuService.menuOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => {
this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT; this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT;
this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS; this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
this.cd.markForCheck();
}); });
} }

5
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
import { ParticipantAbstractModel, ParticipantModel } from '../../../../models/participant.model'; import { ParticipantAbstractModel, ParticipantModel } from '../../../../models/participant.model';
import { ParticipantService } from '../../../../services/participant/participant.service'; import { ParticipantService } from '../../../../services/participant/participant.service';
import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-menu.service'; import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-menu.service';
@ -7,7 +7,8 @@ import { ParticipantPanelItemDirective } from '../../../../directives/openvidu-a
@Component({ @Component({
selector: 'ov-participants-panel', selector: 'ov-participants-panel',
templateUrl: './participants-panel.component.html', templateUrl: './participants-panel.component.html',
styleUrls: ['./participants-panel.component.css'] styleUrls: ['./participants-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class ParticipantsPanelComponent implements OnInit { export class ParticipantsPanelComponent implements OnInit {
localParticipant: any; localParticipant: any;

1
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
View File

@ -4,7 +4,6 @@ import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
import { NicknameMatcher } from '../../matchers/nickname.matcher'; import { NicknameMatcher } from '../../matchers/nickname.matcher';
import { VideoSizeIcon } from '../../models/icon.model'; import { VideoSizeIcon } from '../../models/icon.model';
import { ScreenType, VideoType } from '../../models/video-type.model'; import { ScreenType, VideoType } from '../../models/video-type.model';
import { Storage } from '../../models/storage.model';
import { DocumentService } from '../../services/document/document.service'; import { DocumentService } from '../../services/document/document.service';
import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service'; import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
import { OpenViduService } from '../../services/openvidu/openvidu.service'; import { OpenViduService } from '../../services/openvidu/openvidu.service';

5
openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { FormControl, Validators } from '@angular/forms'; import { FormControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
@ -22,7 +22,8 @@ import { ParticipantAbstractModel } from '../../models/participant.model';
@Component({ @Component({
selector: 'ov-user-settings', selector: 'ov-user-settings',
templateUrl: './user-settings.component.html', templateUrl: './user-settings.component.html',
styleUrls: ['./user-settings.component.css'] styleUrls: ['./user-settings.component.css'],
// changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class UserSettingsComponent implements OnInit, OnDestroy { export class UserSettingsComponent implements OnInit, OnDestroy {
@ViewChild('bodyCard') bodyCard: ElementRef; @ViewChild('bodyCard') bodyCard: ElementRef;