refactor: improve local participant updates in the global state

__mocks__/participants.mock.ts

@@ -10,7 +10,6 @@ export const MOCK_AVATAR: Avatar = {
 export const MOCK_LOCAL_PARTICIPANT: Participant = {
   id: 'unit-test-local-participant-id',
   name: 'unit-test-local-participant-name',
-  color: '#000',
   avatar: {
     imageUrl: 'unit-test-avatar-thumbnail.png',
     model3DUrl: 'unit-test-avatar-model.glb',

src/common/types/participant.types.ts

@@ -18,7 +18,6 @@ export interface Participant {
   id: string;
   name?: string;
   type?: ParticipantType;
-  color?: string;
   slot?: Slot;
   avatar?: Avatar;
   isHost?: boolean;

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

@@ -330,7 +330,7 @@ export class PointersCanvas extends BaseComponent {
     const pointerUser = divPointer.getElementsByClassName('pointer-mouse')[0] as HTMLDivElement;
 
     if (pointerUser) {
-      pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/mouse-pointers/${mouse.slot.colorName}.svg)`;
+      pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/mouse-pointers/${mouse.slot?.colorName}.svg)`;
     }
 
     if (mouseUser) {

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

@@ -691,7 +691,7 @@ export class PointersHTML extends BaseComponent {
     const pointerUser = mouseFollower.getElementsByClassName('pointer-mouse')[0] as HTMLDivElement;
 
     if (pointerUser) {
-      pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/mouse-pointers/${participant.slot.colorName}.svg)`;
+      pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/mouse-pointers/${participant.slot?.colorName}.svg)`;
     }
 
     if (mouseUser) {

src/components/video/index.test.ts

@@ -22,6 +22,7 @@ import { useStore } from '../../common/utils/use-store';
 import { IOC } from '../../services/io';
 import { Presence3DManager } from '../../services/presence-3d-manager';
 import { VideoFrameState } from '../../services/video-conference-manager/types';
+import { ParticipantToFrame } from './types';
 
 import { VideoConference } from '.';
 import { MEETING_COLORS } from '../../common/types/meeting-colors.types';
@@ -678,7 +679,6 @@ describe('VideoConference', () => {
           isHost: true,
           avatar: MOCK_AVATAR,
           type: ParticipantType.HOST,
-          color: 'turquoise',
           slot: {
             colorName: 'turquoise',
             index: 0,
@@ -691,14 +691,15 @@ describe('VideoConference', () => {
 
       VideoConferenceInstance['onRealtimeParticipantsDidChange'](participant);
 
-      const expectedParticipants = {
+      const expectedParticipants: ParticipantToFrame = {
         timestamp: 0,
-        name: MOCK_LOCAL_PARTICIPANT.name,
+        name: MOCK_LOCAL_PARTICIPANT.name as string,
         isHost: true,
         avatar: MOCK_AVATAR,
         type: ParticipantType.HOST,
-        color: 'turquoise',
         participantId: MOCK_LOCAL_PARTICIPANT.id,
+        color: MEETING_COLORS.turquoise,
+        id: MOCK_LOCAL_PARTICIPANT.id,
         slot: {
           colorName: 'turquoise',
           index: 0,

src/components/video/index.ts

@@ -32,7 +32,7 @@ import {
 import { BaseComponent } from '../base';
 import { ComponentNames } from '../types';
 
-import { ParticipandToFrame, VideoComponentOptions } from './types';
+import { ParticipantToFrame, VideoComponentOptions } from './types';
 import { MEETING_COLORS } from '../../common/types/meeting-colors.types';
 
 const KICK_PARTICIPANTS_TIME = 1000 * 60;
@@ -321,14 +321,17 @@ export class VideoConference extends BaseComponent {
    * */
   private createParticipantFromPresence = (
     participant: PresenceEvent<Participant>,
-  ): Participant => {
+  ): ParticipantToFrame => {
     return {
+      participantId: participant.id,
       id: participant.id,
       color: participant.data.slot?.color || MEETING_COLORS.gray,
       avatar: participant.data.avatar,
       type: participant.data.type,
       name: participant.data.name,
       isHost: participant.data.isHost,
+      timestamp: participant.timestamp,
+      slot: participant.data.slot,
     };
   };
 
@@ -672,11 +675,12 @@ export class VideoConference extends BaseComponent {
    */
   private onRealtimeParticipantsDidChange = (participants: Participant[]): void => {
     this.logger.log('video conference @ on participants did change', participants);
-    const participantList: ParticipandToFrame[] = participants.map((participant) => {
+    const participantList: ParticipantToFrame[] = participants.map((participant) => {
       return {
+        id: participant.id,
         timestamp: participant.timestamp,
         participantId: participant.id,
-        color: participant.slot?.colorName ?? 'gray',
+        color: participant.slot?.color || MEETING_COLORS.gray,
         name: participant.name,
         isHost: participant.isHost ?? false,
         avatar: participant.avatar,

src/components/video/types.ts

@@ -1,4 +1,4 @@
-import { Avatar, ParticipantType } from '../../common/types/participant.types';
+import { Avatar, ParticipantType, Slot } from '../../common/types/participant.types';
 import { DevicesOptions } from '../../common/types/sdk-options.types';
 import {
   CamerasPosition,
@@ -46,12 +46,14 @@ export interface VideoComponentOptions {
   };
 }
 
-export type ParticipandToFrame = {
+export type ParticipantToFrame = {
+  id: string;
   timestamp: number;
   participantId: string;
   color: string;
   name: string;
   isHost: boolean;
   avatar?: Avatar;
   type: ParticipantType;
+  slot: Slot;
 };

src/core/launcher/index.ts

@@ -28,11 +28,11 @@ export class Launcher extends Observable implements DefaultLauncher {
   private activeComponents: ComponentNames[] = [];
   private componentsToAttachAfterJoin: Partial<BaseComponent>[] = [];
   private activeComponentsInstances: Partial<BaseComponent>[] = [];
+  private participant: Participant;
 
   private ioc: IOC;
   private room: Socket.Room;
   private eventBus: EventBus = new EventBus();
-  private timestamp: number = 0;
 
   private useStore = useStore.bind(this) as typeof useStore;
 
@@ -47,6 +47,9 @@ export class Launcher extends Observable implements DefaultLauncher {
     localParticipant.publish({ ...participant });
     participants.subscribe(this.onParticipantListUpdate);
     isDomainWhitelisted.subscribe(this.onAuthentication);
+    localParticipant.subscribe((participant) => {
+      this.participant = participant;
+    });
 
     group.publish(participantGroup);
     this.ioc = new IOC(localParticipant.value);
@@ -144,7 +147,7 @@ export class Launcher extends Observable implements DefaultLauncher {
 
     this.activeComponents.splice(this.activeComponents.indexOf(component.name), 1);
     localParticipant.publish({
-      ...localParticipant.value,
+      ...this.participant,
       activeComponents: this.activeComponents,
     });
   };
@@ -244,14 +247,9 @@ export class Launcher extends Observable implements DefaultLauncher {
     this.logger.log('launcher service @ onParticipantListUpdate', participants);
     const { localParticipant } = useStore(StoreType.GLOBAL);
 
-    const participant: Participant = Object.values(participants)
-      .filter((participant) => participant.id === localParticipant.value.id)
-      .map((participant) => {
-        return {
-          ...participant,
-          color: participant.slot?.color,
-        };
-      })[0];
+    const participant: Participant = Object.values(participants).find(
+      (participant) => participant.id === localParticipant.value.id,
+    );
 
     if (!participant || isEqual(localParticipant.value, participant)) return;
 
@@ -279,8 +277,7 @@ export class Launcher extends Observable implements DefaultLauncher {
    * @returns {void}
    */
   private onParticipantJoined = (participant: Socket.PresenceEvent<Participant>): void => {
-    const { localParticipant } = useStore(StoreType.GLOBAL);
-    if (participant.id !== localParticipant.value.id) return;
+    if (participant.id !== this.participant.id) return;
 
     this.logger.log('launcher service @ onParticipantJoined - local participant joined');
     this.attachComponentsAfterJoin();
@@ -301,7 +298,7 @@ export class Launcher extends Observable implements DefaultLauncher {
 
   private startIOC = (): void => {
     this.logger.log('launcher service @ startIOC');
-    const { participants, localParticipant } = useStore(StoreType.GLOBAL);
+    const { participants } = useStore(StoreType.GLOBAL);
     // retrieve the current participants in the room
 
     this.ioc.stateSubject.subscribe((state) => {
@@ -321,9 +318,9 @@ export class Launcher extends Observable implements DefaultLauncher {
         };
       });
 
-      participantsMap[localParticipant.value.id] = {
-        ...participantsMap[localParticipant.value.id],
-        ...localParticipant.value,
+      participantsMap[this.participant.id] = {
+        ...participantsMap[this.participant.id],
+        ...this.participant,
       };
 
       participants.publish(participantsMap);
@@ -351,21 +348,18 @@ export class Launcher extends Observable implements DefaultLauncher {
   private onParticipantJoinedIOC = async (
     presence: Socket.PresenceEvent<Participant>,
   ): Promise<void> => {
-    const { localParticipant } = useStore(StoreType.GLOBAL);
-    if (presence.id !== localParticipant.value.id) return;
+    if (presence.id !== this.participant.id) return;
 
     // Assign a slot to the participant
     const slot = new SlotService(this.room);
     await slot.assignSlot();
 
-    this.timestamp = presence.timestamp;
-
-    this.room.presence.update(localParticipant.value);
+    this.room.presence.update(this.participant);
 
     this.logger.log('launcher service @ onParticipantJoined - local participant joined');
     this.onParticipantJoined(presence);
-    this.publish(ParticipantEvent.LOCAL_JOINED, localParticipant.value);
-    this.publish(ParticipantEvent.JOINED, localParticipant.value);
+    this.publish(ParticipantEvent.LOCAL_JOINED, this.participant);
+    this.publish(ParticipantEvent.JOINED, this.participant);
   };
 
   /**
@@ -399,27 +393,17 @@ export class Launcher extends Observable implements DefaultLauncher {
   private onParticipantUpdatedIOC = (presence: Socket.PresenceEvent<Participant>): void => {
     const { localParticipant } = useStore(StoreType.GLOBAL);
 
-    if (
-      localParticipant.value &&
-      presence.id === localParticipant.value.id &&
-      !isEqual(localParticipant.value, presence.data)
-    ) {
-      if (presence.data.timestamp === this.timestamp) {
-        this.timestamp = 0;
-        return;
-      }
-
+    if (localParticipant.value && presence.id === localParticipant.value.id) {
       localParticipant.publish({
         ...presence.data,
         ...localParticipant.value,
         timestamp: presence.timestamp,
       } as Participant);
 
-      this.timestamp = presence.timestamp;
-      this.room.presence.update(localParticipant.value);
-
-      this.publish(ParticipantEvent.LOCAL_UPDATED, presence.data);
-
+      this.publish(ParticipantEvent.LOCAL_UPDATED, {
+        ...presence.data,
+        ...localParticipant.value,
+      });
       this.logger.log('Publishing ParticipantEvent.UPDATED', presence.data);
     }
 

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

@@ -38,7 +38,7 @@ export class WhoIsOnlineMessages extends WebComponentsBaseElement {
     super();
     const { localParticipant } = this.useStore(StoreType.GLOBAL);
     localParticipant.subscribe((participant: Participant) => {
-      this.participantColor = participant.color;
+      this.participantColor = participant.slot.color;
     });
 
     const { following } = this.useStore(StoreType.WHO_IS_ONLINE);