feat: rename gather option to follow me, create gather option

__mocks__/realtime.mock.ts

@@ -21,6 +21,7 @@ export const createRealtimeHistory = () => ({
 
 export const ABLY_REALTIME_MOCK: AblyRealtimeService = {
   isLocalParticipantHost: true,
+  setFollow: jest.fn(),
   setGather: jest.fn(),
   setHost: jest.fn(),
   setGridMode: jest.fn(),
@@ -34,6 +35,7 @@ export const ABLY_REALTIME_MOCK: AblyRealtimeService = {
   join: jest.fn(),
   leave: jest.fn(),
   setFollowParticipant: jest.fn(),
+  setGatherWIOParticipant: jest.fn(),
   domainWhitelisted: true,
   isDomainWhitelisted: jest.fn().mockReturnValue(true),
   fetchSyncClientProperty: jest.fn((key?: string) => {
@@ -72,6 +74,7 @@ export const ABLY_REALTIME_MOCK: AblyRealtimeService = {
   presenceSlotsInfosObserver: MOCK_OBSERVER_HELPER,
   presenceWIOObserver: MOCK_OBSERVER_HELPER,
   privateModeWIOObserver: MOCK_OBSERVER_HELPER,
+  followWIOObserver: MOCK_OBSERVER_HELPER,
   gatherWIOObserver: MOCK_OBSERVER_HELPER,
   subscribeToParticipantUpdate: jest.fn(),
   unsubscribeFromParticipantUpdate: jest.fn(),
@@ -80,7 +83,7 @@ export const ABLY_REALTIME_MOCK: AblyRealtimeService = {
   updateComments: jest.fn(),
   updatePresenceMouse: jest.fn(),
   setPrivateWIOParticipant: jest.fn(),
-  setGatherWIOParticipant: jest.fn(),
+  setFollowWIOParticipant: jest.fn(),
   leavePresenceMouseChannel: jest.fn(),
   enterPresenceMouseChannel: jest.fn(),
   enterWIOChannel: jest.fn(),

src/common/types/events.types.ts

@@ -51,6 +51,7 @@ export enum RealtimeEvent {
   REALTIME_GO_TO_PARTICIPANT = 'realtime.go-to-participant',
   REALTIME_GATHER = 'realtime.gather',
   REALTIME_FOLLOW_PARTICIPANT = 'realtime.follow-participant',
+  REALTIME_LOCAL_FOLLOW_PARTICIPANT = 'realtime.local-follow-participant',
   REALTIME_SET_AVATAR = 'realtime.set-avatar',
   REALTIME_DRAWING_CHANGE = 'realtime.drawing-change',
   REALTIME_TRANSCRIPT_CHANGE = 'realtime.transcript-change',

src/components/presence-mouse/index.ts

@@ -50,7 +50,7 @@ export class MousePointers extends BaseComponent {
     this.canvas.addEventListener('mousemove', this.onMyParticipantMouseMove);
     this.canvas.addEventListener('mouseout', this.onMyParticipantMouseOut);
     this.eventBus.subscribe(RealtimeEvent.REALTIME_GO_TO_PARTICIPANT, this.goToMouse);
-    this.eventBus.subscribe(RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT, this.followMouse);
+    this.eventBus.subscribe(RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT, this.followMouse);
     this.eventBus.subscribe(RealtimeEvent.REALTIME_PRIVATE_MODE, this.setParticipantPrivate);
     this.subscribeToRealtimeEvents();
     this.realtime.enterPresenceMouseChannel(this.localParticipant);
@@ -64,7 +64,7 @@ export class MousePointers extends BaseComponent {
   protected destroy(): void {
     this.logger.log('presence-mouse component @ destroy');
     this.eventBus.unsubscribe(RealtimeEvent.REALTIME_GO_TO_PARTICIPANT, this.goToMouse);
-    this.eventBus.unsubscribe(RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT, this.followMouse);
+    this.eventBus.unsubscribe(RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT, this.followMouse);
     this.eventBus.unsubscribe(RealtimeEvent.REALTIME_PRIVATE_MODE, this.setParticipantPrivate);
     this.realtime.leavePresenceMouseChannel();
     this.unsubscribeFromRealtimeEvents();
@@ -83,7 +83,6 @@ export class MousePointers extends BaseComponent {
   private subscribeToRealtimeEvents = (): void => {
     this.logger.log('presence-mouse component @ subscribe to realtime events');
     this.realtime.presenceMouseParticipantLeaveObserver.subscribe(this.onParticipantLeftOnRealtime);
-
     this.realtime.presenceMouseObserver.subscribe(this.onParticipantsDidChange);
   };
 

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

@@ -211,15 +211,15 @@ describe('Who Is Online', () => {
       );
     });
 
-    test('should publish follow to event bus', () => {
-      const event = new CustomEvent(RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT, {
+    test('should publish local follow to event bus', () => {
+      const event = new CustomEvent(RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT, {
         detail: { id: MOCK_ABLY_PARTICIPANT_DATA_2.id },
       });
 
       whoIsOnlineComponent['followMousePointer'](event);
 
       expect(whoIsOnlineComponent['eventBus'].publish).toHaveBeenCalledWith(
-        RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT,
+        RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT,
         MOCK_ABLY_PARTICIPANT_DATA_2.id,
       );
     });
@@ -238,7 +238,7 @@ describe('Who Is Online', () => {
     });
   });
 
-  describe('setGather', () => {
+  describe('setFollow', () => {
     beforeEach(() => {
       whoIsOnlineComponent['followMousePointer'] = jest
         .fn()
@@ -250,14 +250,14 @@ describe('Who Is Online', () => {
     });
 
     test('should set element.data to following.data', () => {
-      whoIsOnlineComponent['setGather']({ ...MOCK_ABLY_PARTICIPANT, clientId: 'ably-id' });
+      whoIsOnlineComponent['setFollow']({ ...MOCK_ABLY_PARTICIPANT, clientId: 'ably-id' });
       expect(whoIsOnlineComponent['element'].following).toBe(MOCK_ABLY_PARTICIPANT_DATA_1);
     });
 
     test('should early return if following the local participant', () => {
       whoIsOnlineComponent['element'].following = MOCK_ABLY_PARTICIPANT_DATA_2;
 
-      whoIsOnlineComponent['setGather'](MOCK_ABLY_PARTICIPANT);
+      whoIsOnlineComponent['setFollow'](MOCK_ABLY_PARTICIPANT);
 
       expect(whoIsOnlineComponent['followMousePointer']).not.toHaveBeenCalled();
       expect(whoIsOnlineComponent['element'].following).toBe(MOCK_ABLY_PARTICIPANT_DATA_2);
@@ -266,7 +266,7 @@ describe('Who Is Online', () => {
     test('should set element.following to undefiend return if no id is passed', () => {
       whoIsOnlineComponent['element'].following = MOCK_ABLY_PARTICIPANT_DATA_2;
 
-      whoIsOnlineComponent['setGather']({
+      whoIsOnlineComponent['setFollow']({
         ...MOCK_ABLY_PARTICIPANT,
         clientId: 'ably-id',
         data: { id: '' },
@@ -281,17 +281,17 @@ describe('Who Is Online', () => {
     });
   });
 
-  describe('gatherAll', () => {
+  describe('follow', () => {
     test('should publish detail to realtime', () => {
       const event = new CustomEvent(RealtimeEvent.REALTIME_GATHER, {
         detail: {
           ...MOCK_ABLY_PARTICIPANT_DATA_1,
         },
       });
 
-      whoIsOnlineComponent['gatherAll'](event);
+      whoIsOnlineComponent['follow'](event);
 
-      expect(whoIsOnlineComponent['realtime'].setGatherWIOParticipant).toHaveBeenCalledWith(
+      expect(whoIsOnlineComponent['realtime'].setFollowWIOParticipant).toHaveBeenCalledWith(
         event.detail,
       );
     });
@@ -321,4 +321,20 @@ describe('Who Is Online', () => {
       expect(whoIsOnlineComponent['following']).toBe(undefined);
     });
   });
+
+  describe('gather', () => {
+    test('should call setGatherWIOParticipant with detail', () => {
+      const event = new CustomEvent(RealtimeEvent.REALTIME_GATHER, {
+        detail: {
+          ...MOCK_ABLY_PARTICIPANT_DATA_1,
+        },
+      });
+
+      whoIsOnlineComponent['gather'](event);
+
+      expect(whoIsOnlineComponent['realtime'].setGatherWIOParticipant).toHaveBeenCalledWith({
+        ...event.detail,
+      });
+    });
+  });
 });

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

@@ -57,30 +57,32 @@ export class WhoIsOnline extends BaseComponent {
    */
   private addListeners(): void {
     this.element.addEventListener(
-      RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT,
+      RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT,
       this.followMousePointer,
     );
     this.element.addEventListener(RealtimeEvent.REALTIME_GO_TO_PARTICIPANT, this.goToMousePointer);
     this.element.addEventListener(RealtimeEvent.REALTIME_PRIVATE_MODE, this.setPrivate);
-    this.element.addEventListener(RealtimeEvent.REALTIME_GATHER, this.gatherAll);
+    this.element.addEventListener(RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT, this.follow);
+    this.element.addEventListener(RealtimeEvent.REALTIME_GATHER, this.gather);
   }
 
   /**
-   * @function addListeners
+   * @function removeListeners
    * @description adds event listeners from the who is online element.
    * @returns {void}
    */
   private removeListeners(): void {
     this.element.removeEventListener(
-      RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT,
+      RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT,
       this.followMousePointer,
     );
     this.element.removeEventListener(
       RealtimeEvent.REALTIME_GO_TO_PARTICIPANT,
       this.goToMousePointer,
     );
     this.element.removeEventListener(RealtimeEvent.REALTIME_PRIVATE_MODE, this.setPrivate);
-    this.element.removeEventListener(RealtimeEvent.REALTIME_GATHER, this.gatherAll);
+    this.element.removeEventListener(RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT, this.follow);
+    this.element.removeEventListener(RealtimeEvent.REALTIME_GATHER, this.gather);
   }
 
   /**
@@ -92,7 +94,8 @@ export class WhoIsOnline extends BaseComponent {
     this.realtime.participantsObserver.subscribe(this.onParticipantListUpdate);
     this.realtime.participantLeaveObserver.subscribe(this.stopFollowing);
     this.realtime.privateModeWIOObserver.subscribe(this.onParticipantListUpdate);
-    this.realtime.gatherWIOObserver.subscribe(this.setGather);
+    this.realtime.followWIOObserver.subscribe(this.setFollow);
+    this.realtime.gatherWIOObserver.subscribe(this.goToMousePointer);
   }
 
   /**
@@ -104,7 +107,7 @@ export class WhoIsOnline extends BaseComponent {
     this.realtime.participantsObserver.unsubscribe(this.onParticipantListUpdate);
     this.realtime.participantLeaveObserver.unsubscribe(this.stopFollowing);
     this.realtime.privateModeWIOObserver.unsubscribe(this.onParticipantListUpdate);
-    this.realtime.gatherWIOObserver.unsubscribe(this.setGather);
+    this.realtime.followWIOObserver.unsubscribe(this.setFollow);
   }
 
   /**
@@ -198,7 +201,7 @@ export class WhoIsOnline extends BaseComponent {
    * @returns {void}
    */
   private followMousePointer = ({ detail }: CustomEvent) => {
-    this.eventBus.publish(RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT, detail.id);
+    this.eventBus.publish(RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT, detail.id);
     this.following = detail.id;
   };
 
@@ -213,7 +216,7 @@ export class WhoIsOnline extends BaseComponent {
     this.realtime.setPrivateWIOParticipant(id, isPrivate);
   };
 
-  private setGather = (following) => {
+  private setFollow = (following) => {
     if (following.clientId === this.localParticipant.id) return;
 
     this.followMousePointer({ detail: { id: following?.data?.id } } as CustomEvent);
@@ -227,15 +230,20 @@ export class WhoIsOnline extends BaseComponent {
     this.element.following = following.data;
   };
 
-  private gatherAll = (data: CustomEvent) => {
-    this.realtime.setGatherWIOParticipant({ ...data.detail });
+  private follow = (data: CustomEvent) => {
+    this.realtime.setFollowWIOParticipant({ ...data.detail });
+    this.following = data.detail?.id;
   };
 
   private stopFollowing = (participant: { clientId: string }) => {
     if (participant.clientId === this.element.following?.id) {
       this.element.following = undefined;
       this.following = undefined;
-      this.eventBus.publish(RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT, undefined);
+      this.eventBus.publish(RealtimeEvent.REALTIME_LOCAL_FOLLOW_PARTICIPANT, undefined);
     }
   };
+
+  private gather = (data: CustomEvent) => {
+    this.realtime.setGatherWIOParticipant({ ...data.detail });
+  };
 }

src/services/realtime/ably/index.test.ts

@@ -1745,16 +1745,29 @@ describe('AblyRealtimeService', () => {
       );
     });
 
-    test('should publish to gatherWIOObserver when calling setGather', () => {
+    test('should publish to followWIOObserver when calling setFollow', () => {
       const data = {
         ...MOCK_ABLY_PARTICIPANT_DATA_1,
-        gather: MOCK_ABLY_PARTICIPANT_DATA_1.id,
+        follow: MOCK_ABLY_PARTICIPANT_DATA_1.id,
       } as Participant;
 
-      AblyRealtimeServiceInstance['gatherWIOObserver'].publish = jest.fn();
-      AblyRealtimeServiceInstance['onSetGather'](data);
+      AblyRealtimeServiceInstance['followWIOObserver'].publish = jest.fn();
+      AblyRealtimeServiceInstance['onSetFollow'](data);
+
+      expect(AblyRealtimeServiceInstance['followWIOObserver'].publish).toBeCalledWith(data);
+    });
 
-      expect(AblyRealtimeServiceInstance['gatherWIOObserver'].publish).toBeCalledWith(data);
+    test('should publish to WIO Channel when calling setFollow', () => {
+      const data = {
+        ...MOCK_ABLY_PARTICIPANT_DATA_1,
+        follow: MOCK_ABLY_PARTICIPANT_DATA_1.id,
+      } as Participant;
+
+      AblyRealtimeServiceInstance.setFollowWIOParticipant(data);
+
+      expect(AblyRealtimeServiceInstance['presenceWIOChannel'].publish).toBeCalledWith('follow', {
+        ...data,
+      });
     });
 
     test('should publish to WIO Channel when calling setGather', () => {
@@ -1769,5 +1782,22 @@ describe('AblyRealtimeService', () => {
         ...data,
       });
     });
+
+    test('should call gatherWIOObserver on gather', () => {
+      const mockAblyMessage = {
+        data: {
+          id: '123',
+        },
+      };
+      AblyRealtimeServiceInstance['gatherWIOObserver'].publish = jest.fn();
+
+      AblyRealtimeServiceInstance['onSetGather'](mockAblyMessage as Ably.Types.Message);
+
+      expect(AblyRealtimeServiceInstance['gatherWIOObserver'].publish).toBeCalledWith({
+        detail: {
+          id: mockAblyMessage.data.id,
+        },
+      });
+    });
   });
 });

src/services/realtime/ably/index.ts

@@ -1390,6 +1390,7 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
 
     this.presenceWIOChannel.attach();
     this.presenceWIOChannel.subscribe('private', this.onSetPrivate);
+    this.presenceWIOChannel.subscribe('follow', this.onSetFollow);
     this.presenceWIOChannel.subscribe('gather', this.onSetGather);
   };
 
@@ -1398,14 +1399,22 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
     this.privateModeWIOObserver.publish(this.participants);
   };
 
-  private onSetGather = (data: Participant): void => {
-    this.gatherWIOObserver.publish(data);
+  private onSetFollow = (data: Participant): void => {
+    this.followWIOObserver.publish(data);
+  };
+
+  private onSetGather = ({ data }: Ably.Types.Message): void => {
+    this.gatherWIOObserver.publish({ detail: { id: data.id } });
   };
 
   public setPrivateWIOParticipant = (id: string, isPrivate: boolean): void => {
     this.presenceWIOChannel.publish('private', { id, isPrivate });
   };
 
+  public setFollowWIOParticipant = (data): void => {
+    this.presenceWIOChannel.publish('follow', { ...data });
+  };
+
   public setGatherWIOParticipant = (data): void => {
     this.presenceWIOChannel.publish('gather', { ...data });
   };

src/services/realtime/base/index.ts

@@ -24,6 +24,7 @@ export class RealtimeService implements DefaultRealtimeService {
   public commentsObserver: Observer;
   public presenceMouseObserver: Observer;
   public privateModeWIOObserver: Observer;
+  public followWIOObserver: Observer;
   public gatherWIOObserver: Observer;
   public presenceMouseParticipantLeaveObserver: Observer;
   public presenceMouseParticipantJoinedObserver: Observer;
@@ -61,7 +62,10 @@ export class RealtimeService implements DefaultRealtimeService {
 
     // presence mouse
     this.presenceMouseObserver = new Observer({ logger: this.logger });
+
+    // who is online
     this.privateModeWIOObserver = new Observer({ logger: this.logger });
+    this.followWIOObserver = new Observer({ logger: this.logger });
     this.gatherWIOObserver = new Observer({ logger: this.logger });
 
     this.presenceMouseParticipantLeaveObserver = new Observer({ logger: this.logger });

src/web-components/who-is-online/components/types.ts

@@ -1,7 +1,9 @@
 export enum WIODropdownOptions {
   GOTO = 'go to',
-  FOLLOW = 'follow',
-  UNFOLLOW = 'unfollow',
+  LOCAL_FOLLOW = 'follow',
+  LOCAL_UNFOLLOW = 'unfollow',
+  FOLLOW = 'everyone follows me',
+  UNFOLLOW = 'stop followers',
   PRIVATE = 'private mode',
   LEAVE_PRIVATE = 'leave private mode',
   GATHER = 'gather all',