Merge pull request #306 from SuperViz/beta

Beta

src/common/types/events.types.ts

@@ -17,6 +17,7 @@ export enum MeetingEvent {
   MY_PARTICIPANT_UPDATED = 'my-participant.update',
   MY_PARTICIPANT_LEFT = 'my-participant.left',
   MY_PARTICIPANT_JOINED = 'my-participant.joined',
+  MEETING_KICK_PARTICIPANT = 'meeting.kick-participant',
   DESTROY = 'destroy',
 }
 
@@ -53,11 +54,13 @@ export enum RealtimeEvent {
   REALTIME_FOLLOW_PARTICIPANT = 'realtime.follow-participant',
   REALTIME_SET_AVATAR = 'realtime.set-avatar',
   REALTIME_DRAWING_CHANGE = 'realtime.drawing-change',
+  REALTIME_TRANSCRIPT_CHANGE = 'realtime.transcript-change',
 }
 
-export enum TranscriptionEvent {
-  TRANSCRIPTION_START = 'transcription.start',
-  TRANSCRIPTION_STOP = 'transcription.stop',
+export enum TranscriptState {
+  TRANSCRIPT_START = 'transcript.start',
+  TRANSCRIPT_RUNNING = 'transcript.running',
+  TRANSCRIPT_STOP = 'transcript.stop',
 }
 
 export enum MeetingState {

src/index.test.ts

@@ -38,8 +38,6 @@ const COMMUNICATOR_INSTANCE_MOCK = {
   toggleScreenShare: jest.fn(),
   hangUp: jest.fn(),
   toggleChat: jest.fn(),
-  startTranscription: jest.fn(),
-  stopTranscription: jest.fn(),
   loadPlugin: jest.fn(),
   unloadPlugin: jest.fn(),
 };
@@ -83,11 +81,7 @@ jest.mock('./services/api');
 jest.mock('./services/auth-service', () => ({
   __esModule: true,
   default: jest.fn().mockImplementation((_, apiKey: string) => {
-    if (apiKey === UNIT_TEST_API_KEY) {
-      return true;
-    }
-
-    return false;
+    return apiKey === UNIT_TEST_API_KEY;
   }),
 }));
 jest.mock('./services/remote-config-service');

src/services/communicator/ index.test.ts

@@ -1,7 +1,4 @@
-import exp from 'constants';
-
 import { MOCK_OBSERVER_HELPER } from '../../../__mocks__/observer-helper.mock';
-import { MOCK_LOCAL_PARTICIPANT } from '../../../__mocks__/participants.mock';
 import {
   MOCK_AVATAR_CONFIG,
   MOCK_PARTICIPANT_TO_3D,
@@ -10,7 +7,6 @@ import {
 import {
   MeetingControlsEvent,
   RealtimeEvent,
-  TranscriptionEvent,
 } from '../../common/types/events.types';
 import { AblyRealtimeService } from '../realtime';
 
@@ -54,6 +50,7 @@ const AblyRealtimeMock = {
   start: jest.fn(),
   leave: jest.fn(),
   setFollowParticipant: jest.fn(),
+  setTranscript: jest.fn(),
   fetchSyncClientProperty: jest.fn((key?: string) => {
     if (key) {
       return createRealtimeMessage(key);
@@ -69,6 +66,7 @@ const AblyRealtimeMock = {
   hostAvailabilityObserver: MOCK_OBSERVER_HELPER,
   syncPropertiesObserver: MOCK_OBSERVER_HELPER,
   kickAllParticipantsObserver: MOCK_OBSERVER_HELPER,
+  kickParticipantObserver: MOCK_OBSERVER_HELPER,
   authenticationObserver: MOCK_OBSERVER_HELPER,
 };
 
@@ -79,6 +77,7 @@ const VideoManagerMock = {
   frameSizeObserver: MOCK_OBSERVER_HELPER,
   realtimeObserver: MOCK_OBSERVER_HELPER,
   hostChangeObserver: MOCK_OBSERVER_HELPER,
+  kickParticipantObserver: MOCK_OBSERVER_HELPER,
   gridModeChangeObserver: MOCK_OBSERVER_HELPER,
   drawingChangeObserver: MOCK_OBSERVER_HELPER,
   followParticipantObserver: MOCK_OBSERVER_HELPER,
@@ -91,6 +90,7 @@ const VideoManagerMock = {
   meetingConnectionObserver: MOCK_OBSERVER_HELPER,
   participantJoinedObserver: MOCK_OBSERVER_HELPER,
   participantLeftObserver: MOCK_OBSERVER_HELPER,
+  transcriptChangeObserver: MOCK_OBSERVER_HELPER,
 };
 
 jest.mock('../realtime', () => ({
@@ -106,7 +106,7 @@ describe('Communicator', () => {
     expect(Communicator).toBeDefined();
   });
 
-  test('should exprt a function', () => {
+  test('should expect a function', () => {
     expect(typeof Communicator).toBe('function');
   });
 
@@ -130,8 +130,6 @@ describe('Communicator', () => {
     expect(communicator).toHaveProperty('hangUp');
     expect(communicator).toHaveProperty('toggleCam');
     expect(communicator).toHaveProperty('toggleChat');
-    expect(communicator).toHaveProperty('startTranscription');
-    expect(communicator).toHaveProperty('stopTranscription');
     expect(communicator).toHaveProperty('loadPlugin');
     expect(communicator).toHaveProperty('unloadPlugin');
   });
@@ -221,11 +219,13 @@ describe('Communicator', () => {
       expect(AblyRealtimeMock.hostAvailabilityObserver.unsubscribe).toBeCalled();
       expect(AblyRealtimeMock.syncPropertiesObserver.unsubscribe).toBeCalled();
       expect(AblyRealtimeMock.kickAllParticipantsObserver.unsubscribe).toBeCalled();
+      expect(AblyRealtimeMock.kickParticipantObserver.unsubscribe).toBeCalled();
       expect(AblyRealtimeMock.authenticationObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.frameStateObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.frameSizeObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.realtimeObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.hostChangeObserver.unsubscribe).toBeCalled();
+      expect(VideoManagerMock.kickParticipantObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.followParticipantObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.goToParticipantObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.gatherParticipantsObserver.unsubscribe).toBeCalled();
@@ -236,6 +236,7 @@ describe('Communicator', () => {
       expect(VideoManagerMock.participantLeftObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.meetingStateObserver.unsubscribe).toBeCalled();
       expect(VideoManagerMock.meetingConnectionObserver.unsubscribe).toBeCalled();
+      expect(VideoManagerMock.transcriptChangeObserver.unsubscribe).toBeCalled();
     });
   });
 
@@ -399,46 +400,6 @@ describe('Communicator', () => {
     });
   });
 
-  describe('startTranscription', () => {
-    let communicator: SuperVizSdk;
-
-    beforeEach(() => {
-      jest.clearAllMocks();
-      communicator = Communicator(COMMUNICATOR_INITIALIZATION_MOCK);
-    });
-
-    test('should call the startTranscription method', () => {
-      jest.spyOn(communicator, 'startTranscription');
-      communicator.startTranscription('en-US');
-
-      expect(communicator.startTranscription).toBeCalled();
-      expect(VideoManagerMock.publishMessageToFrame).toBeCalledWith(
-        TranscriptionEvent.TRANSCRIPTION_START,
-        'en-US',
-      );
-    });
-  });
-
-  describe('stopTranscription', () => {
-    let communicator: SuperVizSdk;
-
-    beforeEach(() => {
-      jest.clearAllMocks();
-      communicator = Communicator(COMMUNICATOR_INITIALIZATION_MOCK);
-    });
-
-    test('should call the stopTranscription method', () => {
-      jest.spyOn(communicator, 'stopTranscription');
-      communicator.stopTranscription();
-
-      expect(communicator.stopTranscription).toBeCalled();
-      expect(VideoManagerMock.publishMessageToFrame).toBeCalledWith(
-        TranscriptionEvent.TRANSCRIPTION_STOP,
-        undefined,
-      );
-    });
-  });
-
   describe('loadPlugin', () => {
     let communicator: SuperVizSdk;
 

src/services/communicator/index.ts

@@ -9,7 +9,7 @@ import {
   MeetingEvent,
   MeetingState,
   RealtimeEvent,
-  TranscriptionEvent,
+  TranscriptState,
 } from '../../common/types/events.types';
 import { Participant, Group } from '../../common/types/participant.types';
 import { Observer, logger } from '../../common/utils';
@@ -144,6 +144,7 @@ class Communicator {
     this.realtime.hostObserver.subscribe(this.onHostParticipantDidChange);
     this.realtime.syncPropertiesObserver.subscribe(this.onSyncPropertiesDidChange);
     this.realtime.kickAllParticipantsObserver.subscribe(this.onKickAllParticipantsDidChange);
+    this.realtime.kickParticipantObserver.subscribe(this.onMyParticipantLeft);
     this.realtime.authenticationObserver.subscribe(this.onAuthenticationFailed);
     this.realtime.hostAvailabilityObserver.subscribe(this.onHostAvailabilityDidChange);
 
@@ -192,9 +193,11 @@ class Communicator {
 
     this.videoManager.realtimeObserver.unsubscribe(this.onRealtimeJoin);
     this.videoManager.hostChangeObserver.unsubscribe(this.onHostDidChange);
+    this.videoManager.kickParticipantObserver.unsubscribe(this.onKickParticipant);
     this.videoManager.followParticipantObserver.unsubscribe(this.onFollowParticipantDidChange);
     this.videoManager.gridModeChangeObserver.unsubscribe(this.onGridModeDidChange);
     this.videoManager.drawingChangeObserver.unsubscribe(this.onDrawingDidChange);
+    this.videoManager.transcriptChangeObserver.unsubscribe(this.onTranscriptDidChange);
 
     this.videoManager.goToParticipantObserver.unsubscribe(this.onGoToParticipantDidChange);
     this.videoManager.gatherParticipantsObserver.unsubscribe(this.onGatherDidChange);
@@ -212,6 +215,7 @@ class Communicator {
     this.realtime.hostObserver.unsubscribe(this.onHostParticipantDidChange);
     this.realtime.syncPropertiesObserver.unsubscribe(this.onSyncPropertiesDidChange);
     this.realtime.kickAllParticipantsObserver.unsubscribe(this.onKickAllParticipantsDidChange);
+    this.realtime.kickParticipantObserver.unsubscribe(this.onMyParticipantLeft);
     this.realtime.authenticationObserver.unsubscribe(this.onAuthenticationFailed);
     this.realtime.participantJoinedObserver.unsubscribe(this.onParticipantJoined);
     this.realtime.participantLeaveObserver.unsubscribe(this.onParticipantLeft);
@@ -266,8 +270,8 @@ class Communicator {
 
   /**
    * @function publishMeetingControlEvent
-   * @param {MeetingControlsEvent} event
    * @description publish event to meeting controls
+   * @param {MeetingControlsEvent} event
    * @returns {void}
    */
   public publishMeetingControlEvent(event: MeetingControlsEvent): void {
@@ -288,7 +292,7 @@ class Communicator {
   /**
    * @function follow
    * @description - send follow message to all participants on plugin
-   * @param participantId: string
+   * @param {string | undefined} participantId
    * @returns {void}
    */
   public follow(participantId?: string): void {
@@ -311,23 +315,13 @@ class Communicator {
   /**
    * @function goTo
    * @description call goTo on plugin
-   * @param participantId: string
+   * @param {string} participantId
    * @returns {void}
    */
   public goTo(participantId: string): void {
     this.integrationManager.goToParticipant(participantId);
   }
 
-  /**
-   * @function publishTranscriptionEvent
-   * @description publish transcription event to transcription service
-   * @param {TranscriptionEvent} event - event to be published
-   * @param {unknown} payload - payload to be sent to transcription service
-   */
-  public publishTranscriptionEvent = (event: TranscriptionEvent, payload?: unknown): void => {
-    this.videoManager.publishMessageToFrame(event, payload);
-  };
-
   /**
    * @function startVideo
    * @description start video manager
@@ -343,11 +337,13 @@ class Communicator {
 
     this.videoManager.realtimeObserver.subscribe(this.onRealtimeJoin);
     this.videoManager.hostChangeObserver.subscribe(this.onHostDidChange);
+    this.videoManager.kickParticipantObserver.subscribe(this.onKickParticipant);
     this.videoManager.followParticipantObserver.subscribe(this.onFollowParticipantDidChange);
     this.videoManager.goToParticipantObserver.subscribe(this.onGoToParticipantDidChange);
     this.videoManager.gatherParticipantsObserver.subscribe(this.onGatherDidChange);
     this.videoManager.gridModeChangeObserver.subscribe(this.onGridModeDidChange);
     this.videoManager.drawingChangeObserver.subscribe(this.onDrawingDidChange);
+    this.videoManager.transcriptChangeObserver.subscribe(this.onTranscriptDidChange);
 
     this.videoManager.sameAccountErrorObserver.subscribe(this.onSameAccountError);
     this.videoManager.waitingForHostObserver.subscribe(this.onWaitingForHost);
@@ -417,6 +413,16 @@ class Communicator {
     this.realtime.setHost(hostId);
   };
 
+  /**
+   * @function onKickParticipant
+   * @description on kick a participant event
+   * @param {string} participantId - participant Id
+   * @returns {void}
+   */
+  private onKickParticipant = (participantId: string): void => {
+    this.realtime.setKickParticipant(participantId);
+  };
+
   /**
    * @function onFollowParticipantDidChange
    * @description handler for follow participant change event
@@ -487,13 +493,14 @@ class Communicator {
    * @returns {void}
    * */
   private onRoomInfoUpdated = (room: AblyRealtimeData): void => {
-    const { isGridModeEnable, followParticipantId, gather, drawing } = room;
+    const { isGridModeEnable, followParticipantId, gather, drawing, transcript } = room;
 
     this.videoManager.publishMessageToFrame(
       RealtimeEvent.REALTIME_GRID_MODE_CHANGE,
       isGridModeEnable,
     );
     this.videoManager.publishMessageToFrame(RealtimeEvent.REALTIME_DRAWING_CHANGE, drawing);
+    this.videoManager.publishMessageToFrame(RealtimeEvent.REALTIME_TRANSCRIPT_CHANGE, transcript);
     this.videoManager.publishMessageToFrame(
       RealtimeEvent.REALTIME_FOLLOW_PARTICIPANT,
       followParticipantId,
@@ -605,6 +612,16 @@ class Communicator {
     this.realtime.setDrawing(drawing);
   };
 
+  /**
+   * @function onTranscriptDidChange
+   * @description handler when transcript state changes
+   * @param {TranscriptState} state
+   * @returns {void}
+   * */
+  private onTranscriptDidChange = (state: TranscriptState): void => {
+    this.realtime.setTranscript(state);
+  };
+
   /**
    * @function updateParticipantListFromAblyList
    * @description update participant list from ably participant list
@@ -846,16 +863,6 @@ export default (params: CommunicatorOptions): SuperVizSdk => {
       return communicator.publishMeetingControlEvent(MeetingControlsEvent.TOGGLE_MEETING_CHAT);
     },
 
-    startTranscription: (language) => {
-      return communicator.publishTranscriptionEvent(
-        TranscriptionEvent.TRANSCRIPTION_START,
-        language,
-      );
-    },
-    stopTranscription: () => {
-      return communicator.publishTranscriptionEvent(TranscriptionEvent.TRANSCRIPTION_STOP);
-    },
-
     loadPlugin: (plugin, props) => communicator.loadPlugin(plugin, props),
     unloadPlugin: () => communicator.unloadPlugin(),
   };

src/services/communicator/types.ts

@@ -2,7 +2,7 @@ import { SuperVizSdkOptions } from '../../common/types/sdk-options.types';
 import { Plugin, PluginMethods, DefaultPluginOptions } from '../integration/base-plugin/types';
 import { AvatarConfig } from '../integration/participants/types';
 import { RealtimeMessage } from '../realtime/ably/types';
-import { LayoutPosition, WaterMark } from '../video-conference-manager/types';
+import { WaterMark } from '../video-conference-manager/types';
 
 export interface CommunicatorOptions extends SuperVizSdkOptions {
   apiKey: string;
@@ -43,9 +43,6 @@ export type SuperVizSdk = {
   toggleCam: () => void;
   toggleChat: () => void;
 
-  startTranscription: (language: string) => void;
-  stopTranscription: () => void;
-
   loadPlugin: (plugin: Plugin, props: PluginOptions) => PluginMethods;
   unloadPlugin: () => void;
 };