Merge pull request #291 from SuperViz/feat/host-availability-event

Feat: host availability event

src/common/types/events.types.ts

@@ -43,6 +43,8 @@ export enum RealtimeEvent {
   REALTIME_JOIN = 'realtime.join',
   REALTIME_PARTICIPANT_LIST_UPDATE = 'realtime.participant-list-update',
   REALTIME_HOST_CHANGE = 'realtime.host-change',
+  REALTIME_HOST_AVAILABLE = 'realtime.host-available',
+  REALTIME_NO_HOST_AVAILABLE = 'realtime.no-host-available',
   REALTIME_GRID_MODE_CHANGE = 'realtime.grid-mode-change',
   REALTIME_WAIT_FOR_HOST = 'realtime.wait-for-host',
   REALTIME_AUTHENTICATION_FAILED = 'realtime.authentication-failed',

src/services/communicator/ index.test.ts

@@ -66,6 +66,7 @@ const AblyRealtimeMock = {
   participantJoinedObserver: MOCK_OBSERVER_HELPER,
   participantLeaveObserver: MOCK_OBSERVER_HELPER,
   hostObserver: MOCK_OBSERVER_HELPER,
+  hostAvailabilityObserver: MOCK_OBSERVER_HELPER,
   syncPropertiesObserver: MOCK_OBSERVER_HELPER,
   kickAllParticipantsObserver: MOCK_OBSERVER_HELPER,
   authenticationObserver: MOCK_OBSERVER_HELPER,
@@ -217,6 +218,7 @@ describe('Communicator', () => {
       expect(AblyRealtimeMock.participantJoinedObserver.unsubscribe).toBeCalled();
       expect(AblyRealtimeMock.participantLeaveObserver.unsubscribe).toBeCalled();
       expect(AblyRealtimeMock.hostObserver.unsubscribe).toBeCalled();
+      expect(AblyRealtimeMock.hostAvailabilityObserver.unsubscribe).toBeCalled();
       expect(AblyRealtimeMock.syncPropertiesObserver.unsubscribe).toBeCalled();
       expect(AblyRealtimeMock.kickAllParticipantsObserver.unsubscribe).toBeCalled();
       expect(AblyRealtimeMock.authenticationObserver.unsubscribe).toBeCalled();

src/services/communicator/index.ts

@@ -145,6 +145,7 @@ class Communicator {
     this.realtime.syncPropertiesObserver.subscribe(this.onSyncPropertiesDidChange);
     this.realtime.kickAllParticipantsObserver.subscribe(this.onKickAllParticipantsDidChange);
     this.realtime.authenticationObserver.subscribe(this.onAuthenticationFailed);
+    this.realtime.hostAvailabilityObserver.subscribe(this.onHostAvailabilityDidChange);
 
     this.realtime.start({
       initialParticipantData: {
@@ -265,7 +266,7 @@ class Communicator {
 
   /**
    * @function publishMeetingControlEvent
-   * @param event: MeetingControlsEvent
+   * @param {MeetingControlsEvent} event
    * @description publish event to meeting controls
    * @returns {void}
    */
@@ -569,6 +570,21 @@ class Communicator {
     }
   };
 
+  /**
+   * @function onHostAvailabilityDidChange
+   * @description handler for host availability inside room
+   * @param {boolean} hasHost
+   * @return {void}
+   */
+
+  private onHostAvailabilityDidChange = (hasHost: boolean): void => {
+    if (hasHost) {
+      this.publish(RealtimeEvent.REALTIME_HOST_AVAILABLE);
+      return;
+    }
+    this.publish(RealtimeEvent.REALTIME_NO_HOST_AVAILABLE);
+  };
+
   /**
    * @function onGridModeDidChange
    * @description handler for grid mode change event
@@ -698,7 +714,7 @@ class Communicator {
   };
 
   /**
-   * @function onCOnnectionStatusChange
+   * @function onConnectionStatusChange
    * @description handler for connection status change event
    * @param {MeetingConnectionStatus} newStatus - new connection status
    * @returns {void}

src/services/realtime/ably/index.ts

@@ -163,7 +163,7 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
   }
 
   /**
-   * @function Join
+   * @function join
    * @description join realtime room
    * @returns {void}
    * @param joinProperties
@@ -266,7 +266,7 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
   public setSyncProperty<T>(name: string, property: T): void {
     const queue = this.clientSyncPropertiesQueue[name] ?? [];
 
-    // clousure to create the event
+    // closure to create the event
     const createEvent = (name: string, data: T): RealtimeMessage => {
       return {
         name,
@@ -514,6 +514,7 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
     this.roomInfoUpdatedObserver.publish(this.localRoomProperties);
 
     if (!data.hostClientId) {
+      this.hostParticipantId = null;
       this.hostPassingHandle();
     } else if (data?.hostClientId !== this.hostParticipantId) {
       this.updateHostInfo(data.hostClientId);
@@ -659,6 +660,7 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
 
     if (KICK_PARTICIPANTS_TIMEOUT) {
       clearTimeout(KICK_PARTICIPANTS_TIMEOUT);
+      this.hostAvailabilityObserver.publish(true);
     }
 
     const oldHostParticipantId = this.hostParticipantId;
@@ -840,6 +842,7 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
 
       // no proper host candidate, kick everyone
       if (this.shouldKickParticipantsOnHostLeave && hostCandidates.length === 0) {
+        this.hostAvailabilityObserver.publish(false);
         KICK_PARTICIPANTS_TIMEOUT = setTimeout(() => {
           this.kickAllParticipantsObserver.publish(true);
         }, KICK_PARTICIPANTS_TIME);
@@ -1025,11 +1028,16 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
     if (!this.localRoomProperties) {
       this.initializeRoomProperties();
     } else {
-      await Promise.all([
-        this.updateParticipants(),
-        this.localRoomProperties?.hostClientId &&
-          this.updateHostInfo(this.localRoomProperties.hostClientId),
-      ]);
+      this.updateParticipants();
+
+      const isHostCandidate = this.myParticipant.data.type === ParticipantType.HOST;
+
+      if (this.localRoomProperties?.hostClientId) {
+        await this.updateHostInfo(this.localRoomProperties.hostClientId);
+      } else if (isHostCandidate) {
+        await this.setHost(this.myParticipant.data.participantId);
+      }
+
       this.localRoomProperties = await this.fetchRoomProperties();
       this.updateLocalRoomState(this.localRoomProperties);
     }

src/services/realtime/base/index.ts

@@ -12,6 +12,7 @@ export class RealtimeService implements DefaultRealtimeService {
   public roomInfoUpdatedObserver: Observer;
   public roomListUpdatedObserver: Observer;
   public hostObserver: Observer;
+  public hostAvailabilityObserver: Observer;
   public realtimeStateObserver: Observer;
   public syncPropertiesObserver: Observer;
   public kickAllParticipantsObserver: Observer;
@@ -26,10 +27,11 @@ export class RealtimeService implements DefaultRealtimeService {
     this.syncPropertiesObserver = new Observer({ logger });
     this.reconnectObserver = new Observer({ logger });
 
-    // Room info obervers helpers
+    // Room info observers helpers
     this.roomInfoUpdatedObserver = new Observer({ logger });
     this.roomListUpdatedObserver = new Observer({ logger });
     this.hostObserver = new Observer({ logger });
+    this.hostAvailabilityObserver = new Observer({ logger });
     this.realtimeStateObserver = new Observer({ logger });
     this.kickAllParticipantsObserver = new Observer({ logger });
     this.authenticationObserver = new Observer({ logger });
@@ -64,7 +66,7 @@ export class RealtimeService implements DefaultRealtimeService {
   }
 
   /**
-   * @function getParticipantColor
+   * @function getSlotColor
    * @description get slot color string
    * @returns {string}
    * @param slotIndex