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

openvidu-components: Refactored panel service

pull/713/head
csantosm 2022-04-05 15:51:10 +02:00
parent 4cef8c3fac
commit aa0c78b882
6 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,7 +72,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
*/ */
@HostListener('document:keydown.escape', ['$event']) @HostListener('document:keydown.escape', ['$event'])
onKeydownHandler(event: KeyboardEvent) { onKeydownHandler(event: KeyboardEvent) {
if (this.PanelService.isMenuOpened()) { if (this.PanelService.isPanelOpened()) {
this.close(); this.close();
} }
} }
@ -119,13 +119,13 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
} }
close() { close() {
this.PanelService.toggleMenu(MenuType.CHAT); this.PanelService.togglePanel(MenuType.CHAT);
} }
private subscribeToMessages() { private subscribeToMessages() {
this.chatMessageSubscription = this.chatService.messagesObs.subscribe((messages: ChatMessage[]) => { this.chatMessageSubscription = this.chatService.messagesObs.subscribe((messages: ChatMessage[]) => {
this.messageList = messages; this.messageList = messages;
if (this.PanelService.isMenuOpened()) { if (this.PanelService.isPanelOpened()) {
this.scrollToBottom(); this.scrollToBottom();
this.cd.markForCheck(); this.cd.markForCheck();
} }

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

@ -95,7 +95,7 @@ export class PanelComponent implements OnInit {
} }
private subscribeToPanelToggling() { private subscribeToPanelToggling() {
this.menuSubscription = this.panelService.menuOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => { this.menuSubscription = this.panelService.panelOpenedObs.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(); this.cd.markForCheck();

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
View File

@ -153,7 +153,7 @@ export class SessionComponent implements OnInit {
this.updateLayoutInterval = setInterval(() => this.layoutService.update(), 50); this.updateLayoutInterval = setInterval(() => this.layoutService.update(), 50);
}); });
this.menuSubscription = this.panelService.menuOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => { this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => {
if (this.sideMenu) { if (this.sideMenu) {
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;

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -340,7 +340,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
*/ */
toggleParticipantsPanel() { toggleParticipantsPanel() {
this.onParticipantsPanelButtonClicked.emit(); this.onParticipantsPanelButtonClicked.emit();
this.panelService.toggleMenu(MenuType.PARTICIPANTS); this.panelService.togglePanel(MenuType.PARTICIPANTS);
} }
/** /**
@ -348,7 +348,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
*/ */
toggleChatPanel() { toggleChatPanel() {
this.onChatPanelButtonClicked.emit(); this.onChatPanelButtonClicked.emit();
this.panelService.toggleMenu(MenuType.CHAT); this.panelService.togglePanel(MenuType.CHAT);
} }
/** /**
@ -362,7 +362,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
protected subscribeToReconnection() { protected subscribeToReconnection() {
this.session.on('reconnecting', () => { this.session.on('reconnecting', () => {
if (this.panelService.isMenuOpened()) { if (this.panelService.isPanelOpened()) {
this.panelService.closeMenu(); this.panelService.closeMenu();
} }
this.isConnectionLost = true; this.isConnectionLost = true;
@ -372,7 +372,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
}); });
} }
protected subscribeToMenuToggling() { protected subscribeToMenuToggling() {
this.menuTogglingSubscription = this.panelService.menuOpenedObs.subscribe((ev: { opened: boolean; type?: MenuType }) => { this.menuTogglingSubscription = this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: MenuType }) => {
this.isChatOpened = ev.opened && ev.type === MenuType.CHAT; this.isChatOpened = ev.opened && ev.type === MenuType.CHAT;
this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS; this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
if (this.isChatOpened) { if (this.isChatOpened) {
@ -383,7 +383,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
protected subscribeToChatMessages() { protected subscribeToChatMessages() {
this.chatMessagesSubscription = this.chatService.messagesObs.pipe(skip(1)).subscribe((messages) => { this.chatMessagesSubscription = this.chatService.messagesObs.pipe(skip(1)).subscribe((messages) => {
if (!this.panelService.isMenuOpened()) { if (!this.panelService.isPanelOpened()) {
this.unreadMessages++; this.unreadMessages++;
} }
this.messageList = messages; this.messageList = messages;

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

@ -50,7 +50,7 @@ export class ChatService {
nickname: data.nickname, nickname: data.nickname,
message: data.message message: data.message
}); });
if (!this.panelService.isMenuOpened()) { if (!this.panelService.isPanelOpened()) {
const notificationOptions: INotificationOptions = { const notificationOptions: INotificationOptions = {
message: `${data.nickname.toUpperCase()} sent a message`, message: `${data.nickname.toUpperCase()} sent a message`,
cssClassName: 'messageSnackbar', cssClassName: 'messageSnackbar',
@ -77,6 +77,6 @@ export class ChatService {
} }
protected launchNotification(options: INotificationOptions) { protected launchNotification(options: INotificationOptions) {
this.actionService.launchNotification(options, this.panelService.toggleMenu.bind(this.panelService, MenuType.CHAT)); this.actionService.launchNotification(options, this.panelService.togglePanel.bind(this.panelService, MenuType.CHAT));
} }
} }

48
openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts
View File

@ -11,59 +11,59 @@ import { LoggerService } from '../logger/logger.service';
providedIn: 'root' providedIn: 'root'
}) })
export class PanelService { export class PanelService {
menuOpenedObs: Observable<{ opened: boolean; type?: MenuType }>; panelOpenedObs: Observable<{ opened: boolean; type?: MenuType }>;
protected log: ILogger; protected log: ILogger;
protected isChatMenuOpened: boolean = false; protected isChatPanelOpened: boolean = false;
protected isParticipantsMenuOpened: boolean = false; protected isParticipantsPanelOpened: boolean = false;
protected _menuOpened = <BehaviorSubject<{ opened: boolean; type?: MenuType }>>new BehaviorSubject({ opened: false }); protected _panelOpened = <BehaviorSubject<{ opened: boolean; type?: MenuType }>>new BehaviorSubject({ opened: false });
constructor(protected loggerSrv: LoggerService) { constructor(protected loggerSrv: LoggerService) {
this.log = this.loggerSrv.get('PanelService'); this.log = this.loggerSrv.get('PanelService');
this.menuOpenedObs = this._menuOpened.asObservable(); this.panelOpenedObs = this._panelOpened.asObservable();
} }
isMenuOpened(): boolean { isPanelOpened(): boolean {
return this.isChatOpened() || this.isParticipantsOpened(); return this.isChatOpened() || this.isParticipantsOpened();
} }
toggleMenu(type: MenuType) { togglePanel(type: MenuType) {
this.log.d(`Toggling ${type} menu`); this.log.d(`Toggling ${type} menu`);
if (type === MenuType.CHAT) { if (type === MenuType.CHAT) {
if (this.isChatMenuOpened) { if (this.isChatPanelOpened) {
// Close chat and side menu // Close chat and side menu
this.isChatMenuOpened = false; this.isChatPanelOpened = false;
this._menuOpened.next({ opened: false }); this._panelOpened.next({ opened: false });
} else { } else {
// Open chat // Open chat
this.isChatMenuOpened = true; this.isChatPanelOpened = true;
this.isParticipantsMenuOpened = false; this.isParticipantsPanelOpened = false;
this._menuOpened.next({ opened: true, type: MenuType.CHAT }); this._panelOpened.next({ opened: true, type: MenuType.CHAT });
} }
} else if (type === MenuType.PARTICIPANTS) { } else if (type === MenuType.PARTICIPANTS) {
if (this.isParticipantsMenuOpened) { if (this.isParticipantsPanelOpened) {
// Close participants menu and side menu // Close participants menu and side menu
this.isParticipantsMenuOpened = false; this.isParticipantsPanelOpened = false;
this._menuOpened.next({ opened: false }); this._panelOpened.next({ opened: false });
} else { } else {
// Open participants menu // Open participants menu
this.isParticipantsMenuOpened = true; this.isParticipantsPanelOpened = true;
this.isChatMenuOpened = false; this.isChatPanelOpened = false;
this._menuOpened.next({ opened: true, type: MenuType.PARTICIPANTS }); this._panelOpened.next({ opened: true, type: MenuType.PARTICIPANTS });
} }
} }
} }
closeMenu() { closeMenu() {
this.isParticipantsMenuOpened = false; this.isParticipantsPanelOpened = false;
this.isChatMenuOpened = false; this.isChatPanelOpened = false;
this._menuOpened.next({ opened: false }); this._panelOpened.next({ opened: false });
} }
isChatOpened() { isChatOpened() {
return this.isChatMenuOpened; return this.isChatPanelOpened;
} }
isParticipantsOpened() { isParticipantsOpened() {
return this.isParticipantsMenuOpened; return this.isParticipantsPanelOpened;
} }
} }