feat: publish events when presence controls are used

src/common/types/cdn.types.ts

@@ -1,4 +1,3 @@
-import { CommentEvent } from '../..';
 import {
   CanvasPin,
   HTMLPin,
@@ -25,6 +24,9 @@ import {
   MeetingControlsEvent,
   ParticipantEvent,
   FrameEvent,
+  CommentEvent,
+  ComponentLifeCycleEvent,
+  WhoIsOnlineEvent,
 } from './events.types';
 import { ParticipantType } from './participant.types';
 import { SuperVizSdkOptions } from './sdk-options.types';
@@ -39,6 +41,8 @@ export interface SuperVizCdn {
   MeetingConnectionStatus: typeof MeetingConnectionStatus;
   MeetingControlsEvent: typeof MeetingControlsEvent;
   ParticipantEvent: typeof ParticipantEvent;
+  WhoIsOnlineEvent: typeof WhoIsOnlineEvent;
+  ComponentLifeCycleEvent: typeof ComponentLifeCycleEvent;
   FrameEvent: typeof FrameEvent;
   LayoutMode: typeof LayoutMode;
   ParticipantType: typeof ParticipantType;

src/common/types/events.types.ts

@@ -134,7 +134,18 @@ export type Dimensions = {
   height: number | null;
 };
 
-export enum ComponentLifeCycle {
+export enum ComponentLifeCycleEvent {
   MOUNT = 'mount',
   UNMOUNT = 'unmount',
 }
+
+export enum WhoIsOnlineEvent {
+  START_FOLLOWING_PARTICIPANT = 'who-is-online.start-following-participant',
+  STOP_FOLLOWING_PARTICIPANT = 'who-is-online.stop-following-participant',
+  ENTER_PRIVATE_MODE = 'who-is-online.enter-private-mode',
+  LEAVE_PRIVATE_MODE = 'who-is-online.leave-private-mode',
+  GATHER_ALL = 'who-is-online.gather-all',
+  GO_TO_PARTICIPANT = 'who-is-online.go-to-participant',
+  START_FOLLOW_ME = 'who-is-online.start-follow-me',
+  STOP_FOLLOW_ME = 'who-is-online.stop-follow-me',
+}

src/components/base/index.ts

@@ -1,4 +1,4 @@
-import { ComponentLifeCycle } from '../../common/types/events.types';
+import { ComponentLifeCycleEvent } from '../../common/types/events.types';
 import { Group, Participant } from '../../common/types/participant.types';
 import { Logger, Observable } from '../../common/utils';
 import config from '../../services/config';
@@ -62,7 +62,7 @@ export abstract class BaseComponent extends Observable {
     this.logger.log(`${this.name} @ attached`);
 
     this.start();
-    this.publish(ComponentLifeCycle.MOUNT);
+    this.publish(ComponentLifeCycleEvent.MOUNT);
   };
 
   /*
@@ -77,7 +77,7 @@ export abstract class BaseComponent extends Observable {
     }
 
     this.logger.log('detached');
-    this.publish(ComponentLifeCycle.UNMOUNT);
+    this.publish(ComponentLifeCycleEvent.UNMOUNT);
     this.destroy();
 
     Object.values(this.observers).forEach((observer) => {

src/components/who-is-online/index.test.ts

@@ -8,7 +8,7 @@ import {
   MOCK_ABLY_PARTICIPANT_DATA_1,
 } from '../../../__mocks__/participants.mock';
 import { ABLY_REALTIME_MOCK } from '../../../__mocks__/realtime.mock';
-import { RealtimeEvent } from '../../common/types/events.types';
+import { RealtimeEvent, WhoIsOnlineEvent } from '../../common/types/events.types';
 import { MeetingColorsHex } from '../../common/types/meeting-colors.types';
 
 import { WhoIsOnline } from './index';
@@ -36,41 +36,62 @@ describe('Who Is Online', () => {
 
   afterEach(() => {
     whoIsOnlineComponent.detach();
+    document.body.innerHTML = '';
+    document.head.innerHTML = '';
   });
 
-  test('should create a new instance of Who Is Online', () => {
-    expect(whoIsOnlineComponent).toBeInstanceOf(WhoIsOnline);
-  });
+  describe('start', () => {
+    test('should create a new instance of Who Is Online', () => {
+      expect(whoIsOnlineComponent).toBeInstanceOf(WhoIsOnline);
+    });
 
-  test('should position component inside div if id is provided', async () => {
-    whoIsOnlineComponent['element'].remove();
-    whoIsOnlineComponent['breakLayout'] = true;
+    test('should position component inside div if id is provided', async () => {
+      whoIsOnlineComponent['element'].remove();
+      whoIsOnlineComponent['breakLayout'] = true;
 
-    const div = document.createElement('div');
+      const div = document.createElement('div');
 
-    div.id = 'unit-test-div';
-    document.body.appendChild(div);
-    whoIsOnlineComponent['position'] = 'unit-test-div';
-    whoIsOnlineComponent['positionWhoIsOnline']();
+      div.id = 'unit-test-div';
+      document.body.appendChild(div);
+      whoIsOnlineComponent['position'] = 'unit-test-div';
+      whoIsOnlineComponent['positionWhoIsOnline']();
 
-    expect(div.parentElement).toBe(document.body);
-    expect(whoIsOnlineComponent['element'].parentElement).toBe(div);
-    expect(whoIsOnlineComponent['element'].position).toBe('position: relative;');
-  });
+      expect(div.parentElement).toBe(document.body);
+      expect(whoIsOnlineComponent['element'].parentElement).toBe(div);
+      expect(whoIsOnlineComponent['element'].position).toBe('position: relative;');
+    });
 
-  test('should position at top-right if no id is provided', async () => {
-    expect(whoIsOnlineComponent['element'].parentElement).toBe(document.body);
-    expect(whoIsOnlineComponent['element'].position).toBe('top: 20px; right: 40px;');
-  });
+    test('should position at top-right if no id is provided', async () => {
+      expect(whoIsOnlineComponent['element'].parentElement).toBe(document.body);
+      expect(whoIsOnlineComponent['element'].position).toBe('top: 20px; right: 40px;');
+    });
+
+    test('should position at top-right if invalid id is provided', async () => {
+      whoIsOnlineComponent['element'].remove();
+      const randomIdNumber = Math.ceil(Math.random() * 100);
+      whoIsOnlineComponent['position'] = `random-id${randomIdNumber}`;
+      whoIsOnlineComponent['positionWhoIsOnline']();
+
+      expect(whoIsOnlineComponent['element'].parentElement).toBe(document.body);
+      expect(whoIsOnlineComponent['element'].position).toBe('top: 20px; right: 40px;');
+    });
+
+    test('should allow an object with options in the constructor', () => {
+      const whoIsOnlineComponent = new WhoIsOnline({
+        position: 'bottom-left',
+        styles: '.unit-test-class { color: red; }',
+      });
+
+      expect(whoIsOnlineComponent['position']).toBe('bottom-left');
+    });
 
-  test('should position at top-right if invalid id is provided', async () => {
-    whoIsOnlineComponent['element'].remove();
-    const randomIdNumber = Math.ceil(Math.random() * 100);
-    whoIsOnlineComponent['position'] = `random-id${randomIdNumber}`;
-    whoIsOnlineComponent['positionWhoIsOnline']();
+    test('should set default position when passing an object without position', () => {
+      const whoIsOnlineComponent = new WhoIsOnline({
+        styles: '.unit-test-class { color: red; }',
+      });
 
-    expect(whoIsOnlineComponent['element'].parentElement).toBe(document.body);
-    expect(whoIsOnlineComponent['element'].position).toBe('top: 20px; right: 40px;');
+      expect(whoIsOnlineComponent['position']).toBe('top-right');
+    });
   });
 
   describe('onParticipantListUpdate', () => {
@@ -337,4 +358,124 @@ describe('Who Is Online', () => {
       });
     });
   });
+
+  describe('events', () => {
+    beforeEach(() => {
+      whoIsOnlineComponent['publish'] = jest.fn();
+    });
+
+    test('should publish "go to" event when goToMousePointer is called', () => {
+      whoIsOnlineComponent['goToMousePointer']({
+        detail: { id: 'unit-test-id' },
+      } as CustomEvent);
+
+      expect(whoIsOnlineComponent['publish']).toHaveBeenCalledWith(
+        WhoIsOnlineEvent.GO_TO_PARTICIPANT,
+        'unit-test-id',
+      );
+    });
+
+    test('should not publish "go to" event if id is equal to local participant id', () => {
+      whoIsOnlineComponent['goToMousePointer']({
+        detail: { id: MOCK_LOCAL_PARTICIPANT.id },
+      } as CustomEvent);
+
+      expect(whoIsOnlineComponent['publish']).not.toHaveBeenCalled();
+    });
+
+    test('should publish "follow" event when followMousePointer is called', () => {
+      whoIsOnlineComponent['followMousePointer']({
+        detail: { id: 'unit-test-id' },
+      } as CustomEvent);
+
+      expect(whoIsOnlineComponent['publish']).toHaveBeenCalledWith(
+        WhoIsOnlineEvent.START_FOLLOWING_PARTICIPANT,
+        'unit-test-id',
+      );
+    });
+
+    test('should publish "stop following" if follow is called with undefined id', () => {
+      whoIsOnlineComponent['followMousePointer']({
+        detail: { id: undefined },
+      } as CustomEvent);
+
+      expect(whoIsOnlineComponent['publish']).toHaveBeenCalledWith(
+        WhoIsOnlineEvent.STOP_FOLLOWING_PARTICIPANT,
+      );
+    });
+
+    test('should publish "stop following" event when stopFollowing is called', () => {
+      whoIsOnlineComponent['element'].following = {
+        id: 'unit-test-id',
+        color: 'unit-test-color',
+        name: 'unit-test-name',
+      };
+
+      whoIsOnlineComponent['stopFollowing']({
+        clientId: 'unit-test-id',
+      });
+
+      expect(whoIsOnlineComponent['publish']).toHaveBeenCalledWith(
+        WhoIsOnlineEvent.STOP_FOLLOWING_PARTICIPANT,
+      );
+    });
+
+    test('should publish "enter private mode" event when setPrivate is called with isPrivate as true', () => {
+      whoIsOnlineComponent['setPrivate']({
+        detail: { isPrivate: true, id: 'unit-test-id' },
+      } as CustomEvent);
+
+      expect(whoIsOnlineComponent['publish']).toHaveBeenCalledWith(
+        WhoIsOnlineEvent.ENTER_PRIVATE_MODE,
+      );
+    });
+
+    test('should publish "leave private mode" event when setPrivate is called with isPrivate as false', () => {
+      whoIsOnlineComponent['setPrivate']({
+        detail: { isPrivate: false, id: 'unit-test-id' },
+      } as CustomEvent);
+
+      expect(whoIsOnlineComponent['publish']).toHaveBeenCalledWith(
+        WhoIsOnlineEvent.LEAVE_PRIVATE_MODE,
+      );
+    });
+
+    test('should publish "follow me" event when follow is called with defined id', () => {
+      whoIsOnlineComponent['follow']({
+        detail: { id: 'unit-test-id' },
+      } as CustomEvent);
+
+      expect(whoIsOnlineComponent['publish']).toHaveBeenCalledWith(
+        WhoIsOnlineEvent.START_FOLLOW_ME,
+        'unit-test-id',
+      );
+    });
+
+    test('should publish "stop follow me" event when follow is called with undefined id', () => {
+      whoIsOnlineComponent['follow']({
+        detail: { id: undefined },
+      } as CustomEvent);
+
+      expect(whoIsOnlineComponent['publish']).toHaveBeenCalledWith(WhoIsOnlineEvent.STOP_FOLLOW_ME);
+    });
+  });
+
+  describe('setStyles', () => {
+    test('should append style element with user styles to head', () => {
+      const styles = `
+        .unit-test-class {
+          color: red;
+        }`;
+
+      whoIsOnlineComponent['setStyles'](styles);
+      const styleElement = document.getElementById('superviz-who-is-online-styles');
+      expect(styleElement).toBeTruthy();
+    });
+
+    test('should do nothing if no styles are passed', () => {
+      whoIsOnlineComponent['setStyles']();
+      const styleElement = document.getElementById('superviz-who-is-online-styles');
+      expect(styleElement).toBeFalsy();
+    });
+  });
 });

src/components/who-is-online/index.ts

@@ -1,6 +1,6 @@
 import { isEqual } from 'lodash';
 
-import { RealtimeEvent } from '../../common/types/events.types';
+import { RealtimeEvent, WhoIsOnlineEvent } from '../../common/types/events.types';
 import { Logger } from '../../common/utils';
 import { AblyParticipant } from '../../services/realtime/ably/types';
 import { WhoIsOnline as WhoIsOnlineElement } from '../../web-components';
@@ -219,8 +219,11 @@ export class WhoIsOnline extends BaseComponent {
    * @param {CustomEvent} event
    * @returns {void}
    */
-  private goToMousePointer = ({ detail }: CustomEvent) => {
-    this.eventBus.publish(RealtimeEvent.REALTIME_GO_TO_PARTICIPANT, detail.id);
+  private goToMousePointer = ({ detail: { id } }: CustomEvent) => {
+    if (id === this.localParticipant.id) return;
+
+    this.eventBus.publish(RealtimeEvent.REALTIME_GO_TO_PARTICIPANT, id);
+    this.publish(WhoIsOnlineEvent.GO_TO_PARTICIPANT, id);
   };
 
   /**
@@ -232,6 +235,13 @@ export class WhoIsOnline extends BaseComponent {
   private followMousePointer = ({ detail }: CustomEvent) => {
     this.eventBus.publish(RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT, detail.id);
     this.following = detail.id;
+
+    if (this.following) {
+      this.publish(WhoIsOnlineEvent.START_FOLLOWING_PARTICIPANT, this.following);
+      return;
+    }
+
+    this.publish(WhoIsOnlineEvent.STOP_FOLLOWING_PARTICIPANT);
   };
 
   /**
@@ -243,6 +253,13 @@ export class WhoIsOnline extends BaseComponent {
   private setPrivate = ({ detail: { isPrivate, id } }: CustomEvent) => {
     this.eventBus.publish(RealtimeEvent.REALTIME_PRIVATE_MODE, isPrivate);
     this.realtime.setPrivateWIOParticipant(id, isPrivate);
+
+    if (isPrivate) {
+      this.publish(WhoIsOnlineEvent.ENTER_PRIVATE_MODE);
+      return;
+    }
+
+    this.publish(WhoIsOnlineEvent.LEAVE_PRIVATE_MODE);
   };
 
   private setFollow = (following) => {
@@ -262,17 +279,26 @@ export class WhoIsOnline extends BaseComponent {
   private follow = (data: CustomEvent) => {
     this.realtime.setFollowWIOParticipant({ ...data.detail });
     this.following = data.detail?.id;
+
+    if (this.following) {
+      this.publish(WhoIsOnlineEvent.START_FOLLOW_ME, this.following);
+      return;
+    }
+
+    this.publish(WhoIsOnlineEvent.STOP_FOLLOW_ME);
   };
 
   private stopFollowing = (participant: { clientId: string }) => {
-    if (participant.clientId === this.element.following?.id) {
-      this.element.following = undefined;
-      this.following = undefined;
-      this.eventBus.publish(RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT, undefined);
-    }
+    if (participant.clientId !== this.element.following?.id) return;
+
+    this.element.following = undefined;
+    this.following = undefined;
+    this.eventBus.publish(RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT, undefined);
+    this.publish(WhoIsOnlineEvent.STOP_FOLLOWING_PARTICIPANT);
   };
 
   private gather = (data: CustomEvent) => {
     this.realtime.setGatherWIOParticipant({ ...data.detail });
+    this.publish(WhoIsOnlineEvent.GATHER_ALL, data.detail.id);
   };
 }

src/index.ts

@@ -8,6 +8,8 @@ import {
   ParticipantEvent,
   FrameEvent,
   CommentEvent,
+  ComponentLifeCycleEvent,
+  WhoIsOnlineEvent,
 } from './common/types/events.types';
 import { ParticipantType } from './common/types/participant.types';
 import {
@@ -72,6 +74,8 @@ if (window) {
     CamerasPosition,
     RealtimeComponentState,
     RealtimeComponentEvent,
+    ComponentLifeCycleEvent,
+    WhoIsOnlineEvent,
   };
 }
 
@@ -91,6 +95,8 @@ export {
   RealtimeComponentState,
   RealtimeComponentEvent,
   CommentEvent,
+  ComponentLifeCycleEvent,
+  WhoIsOnlineEvent,
 };
 
 export default init;