feat: drawing channel

src/components/video/index.ts

@@ -1,4 +1,4 @@
-import { PresenceEvent, PresenceEvents } from '@superviz/socket-client';
+import { PresenceEvent, PresenceEvents, Room } from '@superviz/socket-client';
 
 import { ColorsVariables } from '../../common/types/colors.types';
 import {
@@ -49,6 +49,7 @@ export class VideoConference extends BaseComponent {
   private videoConfig: VideoManagerOptions;
   private params?: VideoComponentOptions;
   private roomState: RoomStateService;
+  private drawingRoom: Room;
 
   private kickParticipantsOnHostLeave = false;
 
@@ -142,6 +143,8 @@ export class VideoConference extends BaseComponent {
   protected start(): void {
     this.logger.log('video conference @ start');
 
+    this.drawingRoom = this.ioc.createRoom('drawing');
+
     this.subscribeToStoreUpdates();
     this.suscribeToRealtimeEvents();
     this.startVideo();
@@ -428,7 +431,7 @@ export class VideoConference extends BaseComponent {
 
     if (state !== VideoFrameState.INITIALIZED) return;
 
-    this.roomState = new RoomStateService(this.room, this.logger);
+    this.roomState = new RoomStateService(this.room, this.drawingRoom, this.logger);
     this.roomState.kickParticipantObserver.subscribe(this.onKickLocalParticipant);
     this.roomState.start();
 

src/services/roomState/index.test.ts

@@ -21,9 +21,9 @@ Object.assign(global, { TextDecoder, TextEncoder });
 function createInstance() {
   const ioc = new IOC(MOCK_LOCAL_PARTICIPANT);
   const room = ioc.createRoom('test-room-state-service');
-
+  const drawingRoom = ioc.createRoom('test-drawing-room');
   const logger = new Logger('Room State Service');
-  return new RoomStateService(room, logger);
+  return new RoomStateService(room, drawingRoom, logger);
 }
 
 describe('roomState', () => {
@@ -195,9 +195,9 @@ describe('roomState', () => {
     });
 
     test('should setDrawing', () => {
-      const updateRoomProperties = jest.spyOn(serviceInstance as any, 'updateRoomProperties');
+      const updateDrawingProperties = jest.spyOn(serviceInstance as any, 'updateDrawingProperties');
       serviceInstance.setDrawing({ data: 'drawing data' } as any);
-      expect(updateRoomProperties).toBeCalledWith({ drawing: { data: 'drawing data' } });
+      expect(updateDrawingProperties).toBeCalledWith({ data: 'drawing data' });
     });
 
     test('should setTranscript', () => {
@@ -216,7 +216,6 @@ describe('roomState', () => {
         hostClientId: null,
         followParticipantId: null,
         gather: false,
-        drawing: null,
         transcript: TranscriptState.TRANSCRIPT_STOP,
         kickParticipant: null,
       });
@@ -462,7 +461,6 @@ describe('roomState', () => {
 
       serviceInstance['updateLocalRoomState']({
         data: {
-          drawing: {} as DrawingData,
           followParticipantId: 'followParticipantId',
           gather: true,
           hostClientId: 'hostClientId',
@@ -472,7 +470,7 @@ describe('roomState', () => {
         },
       });
 
-      expect(publish).toBeCalledTimes(7);
+      expect(publish).toBeCalledTimes(6);
     });
 
     test('should not publish new properties if kickParticipant is not me', () => {

src/services/roomState/index.ts

@@ -21,7 +21,8 @@ export class RoomStateService {
   private room: Room;
   private logger: Logger;
   private myParticipant: Partial<ParticipantInfo> = {};
-  private localRoomProperties?: VideoRoomProperties = null;
+  private localRoomProperties: VideoRoomProperties = null;
+  private drawingData: DrawingData = null;
   private enableSync: boolean;
   private left: boolean;
   private isSyncFrozen: boolean;
@@ -30,9 +31,12 @@ export class RoomStateService {
   private useStore: typeof useStore = useStore.bind(this);
   public kickParticipantObserver: Observer;
   private started: boolean;
+  private drawingRoom: Room;
 
-  constructor(room: Room, logger: Logger) {
+  constructor(room: Room, drawingRoom: Room, logger: Logger) {
     this.room = room;
+    this.drawingRoom = drawingRoom;
+
     this.logger = logger;
     this.kickParticipantObserver = new Observer({ logger: this.logger });
 
@@ -62,6 +66,7 @@ export class RoomStateService {
 
     if (!this.enableSync) return;
     this.room.on(RoomPropertiesEvents.UPDATE, this.updateLocalRoomState);
+    this.drawingRoom.presence.on(PresenceEvents.UPDATE, this.updateDrawing);
   };
 
   /**
@@ -127,6 +132,23 @@ export class RoomStateService {
     this.room.emit(RoomPropertiesEvents.UPDATE, newProperties);
   };
 
+  /**
+   * @function updateDrawingProperties
+   * @param {DrawingData} data
+   * @description updates drawing properties
+   * @returns {void}
+   */
+  private updateDrawingProperties = (data: DrawingData): void => {
+    if (this.isMessageTooBig(data) || this.isSyncFrozen || this.left) return;
+
+    this.drawingData = {
+      ...this.drawingData,
+      ...data,
+    };
+
+    this.drawingRoom.presence.update(this.drawingData);
+  };
+
   /**
    * @function setHost
    * @param {string} participantId
@@ -171,7 +193,7 @@ export class RoomStateService {
    * @returns {void}
    */
   public setDrawing(drawing: DrawingData): void {
-    this.updateRoomProperties({ drawing });
+    this.updateDrawingProperties(drawing);
   }
 
   /**
@@ -197,7 +219,6 @@ export class RoomStateService {
       hostClientId: null,
       followParticipantId: null,
       gather: false,
-      drawing: null,
       transcript: TranscriptState.TRANSCRIPT_STOP,
       kickParticipant: null,
     };
@@ -345,10 +366,10 @@ export class RoomStateService {
     this.logger.log('REALTIME', 'Room update received', data);
     this.localRoomProperties = Object.assign({}, this.localRoomProperties, data);
 
-    const { drawing, followParticipantId, gather, hostId, isGridModeEnabled, transcript } =
-      this.useStore(StoreType.VIDEO);
+    const { followParticipantId, gather, hostId, isGridModeEnabled, transcript } = this.useStore(
+      StoreType.VIDEO,
+    );
 
-    drawing.publish(data.drawing);
     followParticipantId.publish(data.followParticipantId);
     gather.publish(data.gather);
     hostId.publish(data.hostClientId);
@@ -362,6 +383,13 @@ export class RoomStateService {
     }
   };
 
+  private updateDrawing = (event: PresenceEvent<DrawingData>): void => {
+    if (event.id === this.myParticipant.id) return;
+
+    const { drawing } = this.useStore(StoreType.VIDEO);
+    drawing.publish(event.data);
+  };
+
   /**
    * @function freezeSync
    * @param {boolean} isFrozen

src/services/roomState/type.ts

@@ -9,7 +9,6 @@ export interface VideoRoomProperties {
   isGridModeEnabled?: boolean;
   followParticipantId?: string;
   gather?: boolean;
-  drawing?: DrawingData;
   kickParticipant?: PresenceEvent<Participant>;
   transcript?: TranscriptState;
 }