Merge pull request #714 from SuperViz/fix/build-esm-files

fix: update global participant object when they enter the meeting room

Author: carlossantos74

package.json

@@ -82,7 +82,7 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@superviz/socket-client": "1.8.0",
+    "@superviz/socket-client": "1.8.2",
     "bowser": "^2.11.0",
     "bowser-jr": "^1.0.6",
     "debug": "^4.3.4",

src/components/video/index.ts

@@ -90,6 +90,11 @@ export class VideoConference extends BaseComponent {
    * @returns {void}
    */
   public toggleMicrophone(): void {
+    if (this.localParticipant.type === ParticipantType.AUDIENCE) {
+      console.warn('[SuperViz] Audience cannot toggle microphone');
+      return;
+    }
+
     return this.videoManager?.publishMessageToFrame(MeetingControlsEvent.TOGGLE_MICROPHONE);
   }
 
@@ -99,6 +104,11 @@ export class VideoConference extends BaseComponent {
    * @returns {void}
    */
   public toggleCam(): void {
+    if (this.localParticipant.type === ParticipantType.AUDIENCE) {
+      console.warn('[SuperViz] Audience cannot toggle camera');
+      return;
+    }
+
     this.videoManager?.publishMessageToFrame(MeetingControlsEvent.TOGGLE_CAM);
   }
 
@@ -108,6 +118,11 @@ export class VideoConference extends BaseComponent {
    * @returns {void}
    */
   public toggleScreenShare(): void {
+    if (this.localParticipant.type === ParticipantType.AUDIENCE) {
+      console.warn('[SuperViz] Audience cannot toggle screen share');
+      return;
+    }
+
     return this.videoManager?.publishMessageToFrame(MeetingControlsEvent.TOGGLE_SCREENSHARE);
   }
 
@@ -126,6 +141,11 @@ export class VideoConference extends BaseComponent {
    * @returns {void}
    */
   public toggleRecording(): void {
+    if (this.localParticipant.isHost) {
+      console.warn('[SuperViz] Only host can toggle recording');
+      return;
+    }
+
     return this.videoManager?.publishMessageToFrame(MeetingControlsEvent.TOGGLE_RECORDING);
   }
 
@@ -509,6 +529,23 @@ export class VideoConference extends BaseComponent {
     this.publish(MeetingEvent.MY_PARTICIPANT_JOINED, participant);
     this.kickParticipantsOnHostLeave = !this.params?.allowGuests;
 
+    const { localParticipant, participants } = this.useStore(StoreType.GLOBAL);
+
+    const newParticipantName = participant.name.trim();
+
+    localParticipant.publish({
+      ...localParticipant.value,
+      name: newParticipantName,
+    });
+
+    participants.publish({
+      ...participants.value,
+      [participant.id]: {
+        ...localParticipant.value,
+        name: newParticipantName,
+      },
+    });
+
     if (this.videoConfig.canUseDefaultAvatars) {
       this.roomState.updateMyProperties({
         avatar: participant.avatar,
@@ -536,6 +573,25 @@ export class VideoConference extends BaseComponent {
   private onParticipantLeft = (_: VideoParticipant): void => {
     this.logger.log('video conference @ on participant left', this.localParticipant);
 
+    const { localParticipant, participants } = this.useStore(StoreType.GLOBAL);
+
+    localParticipant.publish({
+      ...localParticipant.value,
+      activeComponents: localParticipant.value.activeComponents?.filter(
+        (ac) => ac !== ComponentNames.VIDEO_CONFERENCE,
+      ),
+    });
+
+    participants.publish({
+      ...participants.value,
+      [this.localParticipant.id]: {
+        ...localParticipant.value,
+        activeComponents: localParticipant.value.activeComponents?.filter(
+          (ac) => ac !== ComponentNames.VIDEO_CONFERENCE,
+        ),
+      },
+    });
+
     this.connectionService.removeListeners();
     this.publish(MeetingEvent.DESTROY);
     this.publish(MeetingEvent.MY_PARTICIPANT_LEFT, this.localParticipant);

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

@@ -440,7 +440,7 @@ describe('Who Is Online', () => {
 
       expect(whoIsOnlineComponent['room'].emit).toHaveBeenCalledWith(
         WhoIsOnlineEvent.START_FOLLOW_ME,
-        event.detail.id,
+        event.detail,
       );
     });
   });

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

@@ -171,14 +171,27 @@ export class WhoIsOnline extends BaseComponent {
 
     this.room.presence.get((list) => {
       const dataList = list
-        .filter((participant) => participant.data['id'] && participant.data['avatar'])
+        .filter((participant) => participant.data['id'])
         .map(({ data }: { data: any }) => {
+          let avatar = data.avatar;
+
+          if (!avatar) {
+            avatar = this.getAvatar({
+              avatar: data.avatar,
+              color: data.slot.color,
+              name: data.name,
+              letterColor: data.slot.textColor,
+            });
+          }
+
           const tooltip = this.getTooltipData(data);
           const controls = this.getControls(data);
+
           return {
             ...data,
             tooltip,
             controls,
+            avatar,
             isLocalParticipant: data.id === this.localParticipantId,
           };
         }) as WhoIsOnlineParticipant[];
@@ -433,7 +446,7 @@ export class WhoIsOnline extends BaseComponent {
   private follow = ({ detail }: CustomEvent) => {
     const { everyoneFollowsMe } = this.useStore(StoreType.WHO_IS_ONLINE);
     everyoneFollowsMe.publish(!!detail?.id);
-    this.room.emit(WhoIsOnlineEvent.START_FOLLOW_ME, detail?.id);
+    this.room.emit(WhoIsOnlineEvent.START_FOLLOW_ME, detail);
 
     if (this.following) {
       this.publish(WhoIsOnlineEvent.START_FOLLOW_ME, this.following);

src/core/launcher/index.test.ts

@@ -149,6 +149,13 @@ describe('Launcher', () => {
       LimitsService.checkComponentLimit = jest.fn().mockReturnValue(LIMITS_MOCK.videoConference);
 
       LauncherInstance.addComponent(MOCK_COMPONENT);
+
+      // it will be updated by IOC when the participant is updated
+      LauncherInstance['participant'] = {
+        ...MOCK_LOCAL_PARTICIPANT,
+        activeComponents: [MOCK_COMPONENT.name],
+      };
+
       LauncherInstance.addComponent(MOCK_COMPONENT);
 
       expect(MOCK_COMPONENT.attach).toHaveBeenCalledTimes(1);
@@ -159,7 +166,7 @@ describe('Launcher', () => {
 
       LauncherInstance.addComponent(MOCK_COMPONENT);
 
-      expect(MOCK_COMPONENT.attach).not.toBeCalled();
+      expect(MOCK_COMPONENT.attach).not.toHaveBeenCalled();
     });
   });
 

src/core/launcher/index.ts

@@ -41,9 +41,7 @@ export class Launcher extends Observable implements DefaultLauncher {
     super();
     this.logger = new Logger('@superviz/sdk/launcher');
 
-    const { localParticipant, participants, group, isDomainWhitelisted } = this.useStore(
-      StoreType.GLOBAL,
-    );
+    const { localParticipant, group, isDomainWhitelisted } = this.useStore(StoreType.GLOBAL);
 
     localParticipant.publish({ ...participant });
     isDomainWhitelisted.subscribe(this.onAuthentication);
@@ -53,6 +51,16 @@ export class Launcher extends Observable implements DefaultLauncher {
     this.ioc = new IOC(localParticipant.value);
     this.room = this.ioc.createRoom('launcher', 'unlimited');
 
+    // Assign a slot to the participant
+    this.slotService = new SlotService(this.room, this.useStore);
+    localParticipant.publish({
+      ...localParticipant.value,
+      slot: this.slotService.slot,
+      activeComponents: [],
+    });
+
+    this.participant = localParticipant.value;
+
     // internal events without realtime
     this.eventBus = new EventBus();
 
@@ -67,10 +75,10 @@ export class Launcher extends Observable implements DefaultLauncher {
    * @param component - component to add
    * @returns {void}
    */
-  public addComponent = (component: Partial<BaseComponent>): void => {
+  public addComponent = async (component: Partial<BaseComponent>): Promise<void> => {
     if (!this.canAddComponent(component)) return;
 
-    const { hasJoinedRoom, localParticipant, group } = useStore(StoreType.GLOBAL);
+    const { hasJoinedRoom, group, localParticipant } = useStore(StoreType.GLOBAL);
 
     if (!hasJoinedRoom.value) {
       this.logger.log('launcher service @ addComponent - not joined yet');
@@ -92,17 +100,18 @@ export class Launcher extends Observable implements DefaultLauncher {
     this.activeComponents.push(component.name);
     this.activeComponentsInstances.push(component);
 
+    localParticipant.publish({
+      ...this.participant,
+      activeComponents: this.activeComponents,
+    });
+
     this.room.presence.update({
-      ...localParticipant.value,
+      ...this.participant,
+      slot: this.slotService.slot,
       activeComponents: this.activeComponents,
     });
 
-    ApiService.sendActivity(
-      localParticipant.value.id,
-      group.value.id,
-      group.value.name,
-      component.name,
-    );
+    ApiService.sendActivity(this.participant.id, group.value.id, group.value.name, component.name);
   };
 
   /**
@@ -192,7 +201,7 @@ export class Launcher extends Observable implements DefaultLauncher {
   private canAddComponent = (component: Partial<BaseComponent>): boolean => {
     const isProvidedFeature = config.get<boolean>(`features.${component.name}`);
     const componentLimit = LimitsService.checkComponentLimit(component.name);
-    const isComponentActive = this.activeComponents.includes(component.name);
+    const isComponentActive = this.activeComponents?.includes(component.name);
 
     const verifications = [
       {
@@ -242,6 +251,16 @@ export class Launcher extends Observable implements DefaultLauncher {
     );
   };
 
+  private onLocalParticipantUpdate = (participant: Participant): void => {
+    this.activeComponents = participant.activeComponents || [];
+
+    if (this.activeComponents.length) {
+      this.activeComponentsInstances = this.activeComponentsInstances.filter((ac) => {
+        return this.activeComponents.includes(ac.name);
+      });
+    }
+  };
+
   /**
    * @function onLocalParticipantUpdateOnStore
    * @description handles the update of the local participant in the store.
@@ -250,19 +269,13 @@ export class Launcher extends Observable implements DefaultLauncher {
    */
   private onLocalParticipantUpdateOnStore = (participant: Participant): void => {
     this.participant = participant;
-  };
+    this.activeComponents = participant.activeComponents || [];
 
-  /**
-   * @function onParticipantJoined
-   * @description on participant joined
-   * @param ablyParticipant - ably participant
-   * @returns {void}
-   */
-  private onParticipantJoined = (participant: Socket.PresenceEvent<Participant>): void => {
-    if (participant.id !== this.participant.id) return;
-
-    this.logger.log('launcher service @ onParticipantJoined - local participant joined');
-    this.attachComponentsAfterJoin();
+    if (this.activeComponents.length) {
+      this.activeComponentsInstances = this.activeComponentsInstances.filter((component) => {
+        return this.activeComponents.includes(component.name);
+      });
+    }
   };
 
   private onSameAccount = (): void => {
@@ -330,13 +343,11 @@ export class Launcher extends Observable implements DefaultLauncher {
   ): Promise<void> => {
     if (presence.id !== this.participant.id) return;
 
-    // Assign a slot to the participant
-    this.slotService = new SlotService(this.room, this.useStore);
-
     this.room.presence.update(this.participant);
 
     this.logger.log('launcher service @ onParticipantJoined - local participant joined');
-    this.onParticipantJoined(presence);
+
+    this.attachComponentsAfterJoin();
     this.publish(ParticipantEvent.LOCAL_JOINED, this.participant);
     this.publish(ParticipantEvent.JOINED, this.participant);
   };

src/services/io/index.ts

@@ -23,7 +23,6 @@ export class IOC {
    */
   public destroy(): void {
     this.client.destroy();
-    this.client.connection.off();
   }
 
   /**
@@ -43,7 +42,7 @@ export class IOC {
 
     if (
       needsToReconnectStates.includes(state.state) &&
-      state.reason !== 'Unauthorized connection'
+      !['io client disconnect', 'Unauthorized connection'].includes(state.reason)
     ) {
       this.forceReconnect();
     }