feat: realtime and mouse throttles

src/common/styles/global.css

@@ -75,5 +75,4 @@ html, body {
   position: absolute;
   display: block;
   z-index: 2;
-  transition: all 300ms ease-in-out;
 }

src/components/presence-mouse/html/index.test.ts

@@ -216,7 +216,6 @@ describe('MousePointers on HTML', () => {
 
       presenceMouseComponent['addListeners']();
 
-      expect(addEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
       expect(addEventListenerSpy).toHaveBeenCalledWith('mouseleave', expect.any(Function));
     });
   });
@@ -230,7 +229,6 @@ describe('MousePointers on HTML', () => {
 
       presenceMouseComponent['removeListeners']();
 
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
       expect(removeEventListenerSpy).toHaveBeenCalledWith('mouseleave', expect.any(Function));
     });
   });

src/components/presence-mouse/html/index.ts

@@ -1,8 +1,8 @@
 import * as Socket from '@superviz/socket-client';
-import { isEqual, throttle } from 'lodash';
+import { isEqual } from 'lodash';
+import { Subscription, fromEvent, throttleTime } from 'rxjs';
 
 import { RealtimeEvent } from '../../../common/types/events.types';
-import { INDEX_IS_WHITE_TEXT } from '../../../common/types/meeting-colors.types';
 import { Participant } from '../../../common/types/participant.types';
 import { StoreType } from '../../../common/types/stores.types';
 import { Logger } from '../../../common/utils';
@@ -36,6 +36,7 @@ export class PointersHTML extends BaseComponent {
   private isPrivate: boolean;
   private containerTagname: string;
   private transformation: Transform = { translate: { x: 0, y: 0 }, scale: 1 };
+  private pointerMoveObserver: Subscription;
 
   // callbacks
   private goToPresenceCallback: PresenceMouseProps['onGoToPresence'];
@@ -143,11 +144,12 @@ export class PointersHTML extends BaseComponent {
   /**
    * @function addListeners
    * @description adds the mousemove and mouseout listeners to the wrapper with the specified id
-   * @param {string} id the id of the wrapper
    * @returns {void}
    */
   private addListeners(): void {
-    this.container.addEventListener('pointermove', this.onMyParticipantMouseMove);
+    this.pointerMoveObserver = fromEvent(this.container, 'pointermove')
+      .pipe(throttleTime(10))
+      .subscribe(this.onMyParticipantMouseMove);
     this.container.addEventListener('mouseleave', this.onMyParticipantMouseLeave);
   }
 
@@ -157,7 +159,7 @@ export class PointersHTML extends BaseComponent {
    * @returns {void}
    */
   private removeListeners(): void {
-    this.container.removeEventListener('pointermove', this.onMyParticipantMouseMove);
+    this.pointerMoveObserver?.unsubscribe();
     this.container.removeEventListener('mouseleave', this.onMyParticipantMouseLeave);
   }
 
@@ -167,7 +169,7 @@ export class PointersHTML extends BaseComponent {
    * @description event to update my participant mouse position to others participants
    * @returns {void}
    */
-  private onMyParticipantMouseMove = throttle((event: MouseEvent): void => {
+  private onMyParticipantMouseMove = (event: MouseEvent): void => {
     if (this.isPrivate) return;
     const container = event.currentTarget as HTMLDivElement;
 
@@ -182,7 +184,7 @@ export class PointersHTML extends BaseComponent {
       y,
       visible: true,
     });
-  }, 100);
+  };
 
   /**
    * @function onMyParticipantMouseLeave
@@ -220,16 +222,6 @@ export class PointersHTML extends BaseComponent {
     this.userBeingFollowedId = id;
   };
 
-  /**
-   * @function onParticipantLeftOnRealtime
-   * @description handler for participant left event
-   * @param {AblyParticipant} participant
-   * @returns {void}
-   */
-  private onParticipantLeftOnRealtime = (participant: ParticipantMouse): void => {
-    this.removePresenceMouseParticipant(participant.id);
-  };
-
   /**
    * @function setParticipantPrivate
    * @description perform animation in presence mouse

src/components/realtime/index.test.ts

@@ -12,6 +12,7 @@ import { RealtimeComponentState } from './types';
 
 import { Realtime } from '.';
 
+jest.mock('lodash/throttle', () => jest.fn((fn) => fn));
 jest.useFakeTimers();
 
 describe('realtime component', () => {

src/components/realtime/index.ts

@@ -1,4 +1,5 @@
 import * as Socket from '@superviz/socket-client';
+import throttle from 'lodash/throttle';
 
 import { ComponentLifeCycleEvent } from '../../common/types/events.types';
 import { StoreType } from '../../common/types/stores.types';
@@ -49,7 +50,7 @@ export class Realtime extends BaseComponent {
    * @param data - event data
    * @returns {void}
    */
-  public publish = (event: string, data?: unknown): void => {
+  public publish = throttle((event: string, data?: unknown): void => {
     if (Object.values(ComponentLifeCycleEvent).includes(event as ComponentLifeCycleEvent)) {
       this.publishEventToClient(event, data);
       return;
@@ -63,7 +64,7 @@ export class Realtime extends BaseComponent {
     }
 
     this.room.emit('message', { name: event, payload: data });
-  };
+  }, 100);
 
   /**
    * @function subscribe