Merge pull request #12 from SuperViz/feat/grid-mode-on-realtime

feat: implement grid mode synced with realtime

Author: carlossantos74

src/common/types/messages.types.ts

@@ -11,8 +11,10 @@ export enum MessageTypes {
   MEETING_JOIN = 'meeting.join',
   MEETING_USER_PROPERTIES = 'meeting.user-properties',
   MEETING_HOST_CHANGE = 'meeting.host-change',
+  MEETING_GRID_MODE_CHANGE = 'meeting.grid-mode-change',
   REALTIME_USER_LIST_UPDATE = 'realtime.user-list-update',
   REALTIME_HOST_CHANGE = 'realtime.host-change',
+  REALTIME_GRID_MODE_CHANGE = 'realtime.grid-mode-change',
 
   HEARTBEAT = 'heartbeat',
 }

src/service/VideoConfereceManager.ts

@@ -18,6 +18,7 @@ export default class VideoConfereceManager {
   private frameStateObserver = new ObserverHelper({ logger });
   private meetingJoinObserver = new ObserverHelper({ logger });
   private hostChangeObserver = new ObserverHelper({ logger });
+  private gridModeChangeObserver = new ObserverHelper({ logger });
 
   frameState = VideoFrameStateType.UNINITIALIZED;
 
@@ -69,6 +70,7 @@ export default class VideoConfereceManager {
     this.frameStateObserver.destroy();
     this.meetingJoinObserver.destroy();
     this.hostChangeObserver.destroy();
+    this.gridModeChangeObserver.destroy();
 
     this.bricklayer = null;
     this.frameState = null;
@@ -88,6 +90,7 @@ export default class VideoConfereceManager {
     this.messageBridge.listen(MessageTypes.FRAME_SIZE_UPDATE, this.updateFrameSize);
     this.messageBridge.listen(MessageTypes.MEETING_JOIN, this.meetingJoin);
     this.messageBridge.listen(MessageTypes.MEETING_HOST_CHANGE, this.onMeetingHostChange);
+    this.messageBridge.listen(MessageTypes.MEETING_GRID_MODE_CHANGE, this.onGridModeChange);
 
     this.updateFrameState(VideoFrameStateType.INITIALIZED);
   };
@@ -123,6 +126,14 @@ export default class VideoConfereceManager {
     this.hostChangeObserver.publish(hostId);
   };
 
+  private onGridModeChange = (isGridModeEnable) => {
+    this.gridModeChangeObserver.publish(isGridModeEnable);
+  };
+
+  gridModeDidChange(isGridModeEnable) {
+    this.messageBridge.publish(MessageTypes.REALTIME_GRID_MODE_CHANGE, isGridModeEnable);
+  }
+
   actorsListDidChange(actorsList) {
     this.messageBridge.publish(MessageTypes.REALTIME_USER_LIST_UPDATE, actorsList);
   }
@@ -137,4 +148,6 @@ export default class VideoConfereceManager {
   unsubscribeFromMeetingJoin = this.meetingJoinObserver.unsubscribe;
   subscribeToHostChange = this.hostChangeObserver.subscribe;
   unsubscribeFromHostChange = this.hostChangeObserver.unsubscribe;
+  subscribeToGridModeChange = this.gridModeChangeObserver.subscribe;
+  unsubscribeFromGridModeChange = this.gridModeChangeObserver.unsubscribe;
 }

src/service/communicator/Communicator.ts

@@ -43,6 +43,7 @@ export default class Communicator {
     this.videoManager.subscribeToFrameState(this.onFrameStateDidChange);
     this.videoManager.subscribeToMeetingJoin(this.onMeetingJoin);
     this.videoManager.subscribeToHostChange(this.onHostDidChange);
+    this.videoManager.subscribeToGridModeChange(this.onGridModeDidChange);
     this.realtime.subscribeToRoomInfoUpdated(this.onActorsListDidChange);
     this.realtime.subscribeToMasterActorUpdate(this.onMasterActorDidChange);
   }
@@ -76,6 +77,7 @@ export default class Communicator {
     this.videoManager.unsubscribeFromFrameState(this.onFrameStateDidChange);
     this.videoManager.unsubscribeFromMeetingJoin(this.onMeetingJoin);
     this.videoManager.unsubscribeFromHostChange(this.onHostDidChange);
+    this.videoManager.unsubscribeFromGridModeChange(this.onGridModeDidChange);
     this.realtime.unsubscribeFromRoomInfoUpdated(this.onActorsListDidChange);
     this.realtime.unsubscribeFromMasterActorUpdate(this.onMasterActorDidChange);
     this.leave();
@@ -87,11 +89,16 @@ export default class Communicator {
     }
   };
 
-  onActorsListDidChange = (actorsList) => {
-    this.videoManager.actorsListDidChange(actorsList._customProperties.slots);
+  onActorsListDidChange = (room) => {
+    this.videoManager.actorsListDidChange(room._customProperties.slots);
+    this.videoManager.gridModeDidChange(room._customProperties.isGridModeEnable);
   };
 
   onMasterActorDidChange = (masterActor) => {
     this.videoManager.onMasterActorDidChange(masterActor?.newMasterActorUserId);
   };
+
+  onGridModeDidChange = (isGridModeEnable) => {
+    this.realtime.setGridMode(isGridModeEnable);
+  };
 }

src/service/realtime/photon/PhotonRealtimeService.ts

@@ -340,6 +340,7 @@ export default class PhotonRealtimeService {
     const roomProperties = {
       slots: Array(16).fill(null),
       userIdToSlotIndex: {},
+      isGridModeEnable: false,
     };
 
     roomProperties.slots[0] = {
@@ -557,6 +558,15 @@ export default class PhotonRealtimeService {
     this.realtimeStateObserver.publish(this.state, this.stateReason);
   }
 
+  setGridMode = (isGridModeEnable) => {
+    const roomProperties = this.getRoomProperties;
+    const newRoomProperties = {
+      ...roomProperties,
+      isGridModeEnable,
+    };
+    this.updateRoomProperties(newRoomProperties);
+  };
+
   // Photon listeners
   onError = (errorCode, errorMessage) => {
     const photonErrorCodes = Photon.LoadBalancing.LoadBalancingClient.PeerErrorCode;