diff --git a/src/common/styles/global.css b/src/common/styles/global.css index a7ae530b..3ade86f3 100644 --- a/src/common/styles/global.css +++ b/src/common/styles/global.css @@ -75,5 +75,4 @@ html, body { position: absolute; display: block; z-index: 2; - transition: all 300ms ease-in-out; } \ No newline at end of file diff --git a/src/components/presence-mouse/html/index.test.ts b/src/components/presence-mouse/html/index.test.ts index ce691b3b..ae4ec21f 100644 --- a/src/components/presence-mouse/html/index.test.ts +++ b/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)); }); }); diff --git a/src/components/presence-mouse/html/index.ts b/src/components/presence-mouse/html/index.ts index fd615a9c..13bcbc6b 100644 --- a/src/components/presence-mouse/html/index.ts +++ b/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 diff --git a/src/components/realtime/index.test.ts b/src/components/realtime/index.test.ts index a0485908..90262fd3 100644 --- a/src/components/realtime/index.test.ts +++ b/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', () => { diff --git a/src/components/realtime/index.ts b/src/components/realtime/index.ts index b7cd8d9f..e1c39d56 100644 --- a/src/components/realtime/index.ts +++ b/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