feat: video component

.github/workflows/ci.yml

@@ -40,7 +40,7 @@ jobs:
         run: yarn install
       - name: Build package
         run: |
-          touch .version.js && echo "echo \"export const version = 'beta'\" > .version.js" | bash -
+          touch .version.js && echo "echo \"export const version = 'lab'\" > .version.js" | bash -
           yarn build
       - name: Push
         uses: s0/git-publish-subdir-action@develop

__mocks__/plugins.mock.ts

@@ -9,7 +9,7 @@ import {
 import { DefaultIntegrationManagerOptions } from '../src/services/integration/types';
 
 import { MOCK_AVATAR, MOCK_LOCAL_PARTICIPANT } from './participants.mock';
-import { MOCK_REALTIME_SERVICE } from './realtime.mock';
+import { ABLY_REALTIME_MOCK } from './realtime.mock';
 
 export const MOCK_AVATAR_CONFIG: AvatarConfig = {
   height: 1.8,
@@ -76,5 +76,5 @@ export const MOCK_INTEGRATION_MANAGER_OPTIONS: DefaultIntegrationManagerOptions
   avatarConfig: MOCK_AVATAR_CONFIG,
   participantList: MOCK_PARTICIPANT_TO_3D_LIST,
   plugin: MOCK_PLUGIN,
-  RealtimeService: MOCK_REALTIME_SERVICE,
+  RealtimeService: ABLY_REALTIME_MOCK,
 };

__mocks__/realtime.mock.ts

@@ -18,25 +18,17 @@ export const createRealtimeHistory = () => ({
   'unit-test-message-3': new Array(10).fill(createRealtimeMessage('unit-test-message-3')),
 });
 
-export const MOCK_REALTIME_SERVICE: AblyRealtimeService = {
-  participantJoinedObserver: MOCK_OBSERVER_HELPER,
-  participantLeaveObserver: MOCK_OBSERVER_HELPER,
-  roomInfoUpdatedObserver: MOCK_OBSERVER_HELPER,
-  syncPropertiesObserver: MOCK_OBSERVER_HELPER,
-  participantsObserver: MOCK_OBSERVER_HELPER,
-  subscribeToParticipantUpdate: jest.fn(),
-  unsubscribeFromParticipantUpdate: jest.fn(),
-  updateMyProperties: jest.fn(),
-  subscribe: MOCK_OBSERVER_HELPER.subscribe,
-  unsubscribe: MOCK_OBSERVER_HELPER.unsubscribe,
-  getParticipantSlot: jest.fn(),
-} as unknown as AblyRealtimeService;
-
-export const ABLY_REALTIME_MOCK = {
+export const ABLY_REALTIME_MOCK: AblyRealtimeService = {
   isLocalParticipantHost: true,
   setGather: jest.fn(),
+  setHost: jest.fn(),
+  setGridMode: jest.fn(),
+  setDrawing: jest.fn(),
+  freezeSync: jest.fn(),
   setParticipantData: jest.fn(),
   setSyncProperty: jest.fn(),
+  setKickParticipant: jest.fn(),
+  setTranscript: jest.fn(),
   start: jest.fn(),
   join: jest.fn(),
   leave: jest.fn(),
@@ -48,8 +40,9 @@ export const ABLY_REALTIME_MOCK = {
 
     return createRealtimeHistory();
   }),
-  getSlotColor: jest.fn(() => {
-    return { color: MeetingColorsHex['#FFEF33'], name: MeetingColors.yellow };
+  getSlotColor: jest.fn().mockReturnValue({
+    color: MeetingColorsHex[0],
+    name: MeetingColors[0],
   }),
   roomInfoUpdatedObserver: MOCK_OBSERVER_HELPER,
   participantsObserver: MOCK_OBSERVER_HELPER,
@@ -58,5 +51,10 @@ export const ABLY_REALTIME_MOCK = {
   hostObserver: MOCK_OBSERVER_HELPER,
   syncPropertiesObserver: MOCK_OBSERVER_HELPER,
   kickAllParticipantsObserver: MOCK_OBSERVER_HELPER,
+  kickParticipantObserver: MOCK_OBSERVER_HELPER,
   authenticationObserver: MOCK_OBSERVER_HELPER,
-};
+  subscribeToParticipantUpdate: jest.fn(),
+  unsubscribeFromParticipantUpdate: jest.fn(),
+  updateMyProperties: jest.fn(),
+  getParticipantSlot: jest.fn(),
+} as unknown as AblyRealtimeService;

jest.config.js

@@ -9,6 +9,7 @@ module.exports = {
     '<rootDir>/src/**/*.ts',
     '<rootDir>/src/**/*.js',
     '!<rootDir>/src/web-components/**/*',
+    '!<rootDir>/src/index.ts',
   ],
   coverageDirectory: '<rootDir>/coverage',
   coverageReporters: ['html', 'lcov'].concat(argv.coverage ? ['text'] : []),

src/common/types/cdn.types.ts

@@ -1,4 +1,5 @@
-import { SuperVizSdk } from '../../types';
+import { VideoComponent } from '../../components';
+import { LauncherFacade } from '../../core/launcher/types';
 
 import {
   DeviceEvent,
@@ -12,12 +13,13 @@ import {
 import { SuperVizSdkOptions } from './sdk-options.types';
 
 export interface SuperVizCdn {
-  init: (apiKey: string, options: SuperVizSdkOptions) => Promise<SuperVizSdk>;
+  init: (apiKey: string, options: SuperVizSdkOptions) => Promise<LauncherFacade>;
   MeetingEvent: typeof MeetingEvent;
   RealtimeEvent: typeof RealtimeEvent;
   DeviceEvent: typeof DeviceEvent;
   MeetingState: typeof MeetingState;
   MeetingConnectionStatus: typeof MeetingConnectionStatus;
   MeetingControlsEvent: typeof MeetingControlsEvent;
   ParticipantEvent: typeof ParticipantEvent;
+  VideoComponent: typeof VideoComponent;
 }

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',
 }
 
@@ -40,7 +41,6 @@ export enum MeetingControlsEvent {
 }
 
 export enum RealtimeEvent {
-  REALTIME_JOIN = 'realtime.join',
   REALTIME_PARTICIPANT_LIST_UPDATE = 'realtime.participant-list-update',
   REALTIME_HOST_CHANGE = 'realtime.host-change',
   REALTIME_GRID_MODE_CHANGE = 'realtime.grid-mode-change',
@@ -51,11 +51,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/components/base/index.test.ts

@@ -1,7 +1,10 @@
-import { MOCK_LOCAL_PARTICIPANT } from '../../../__mocks__/participants.mock';
-import { MOCK_REALTIME_SERVICE } from '../../../__mocks__/realtime.mock';
-import { Participant } from '../../common/types/participant.types';
+import { MOCK_CONFIG } from '../../../__mocks__/config.mock';
+import { MOCK_OBSERVER_HELPER } from '../../../__mocks__/observer-helper.mock';
+import { MOCK_GROUP, MOCK_LOCAL_PARTICIPANT } from '../../../__mocks__/participants.mock';
+import { ABLY_REALTIME_MOCK } from '../../../__mocks__/realtime.mock';
+import { Group, Participant } from '../../common/types/participant.types';
 import { Logger } from '../../common/utils';
+import { Configuration } from '../../services/config/types';
 import { AblyRealtimeService } from '../../services/realtime';
 
 import { BaseComponent } from '.';
@@ -45,11 +48,13 @@ describe('BaseComponent', () => {
 
       DummyComponentInstance.attach({
         localParticipant: MOCK_LOCAL_PARTICIPANT,
-        realtime: MOCK_REALTIME_SERVICE,
+        realtime: ABLY_REALTIME_MOCK,
+        group: MOCK_GROUP,
+        config: MOCK_CONFIG,
       });
 
       expect(DummyComponentInstance['localParticipant']).toEqual(MOCK_LOCAL_PARTICIPANT);
-      expect(DummyComponentInstance['realtime']).toEqual(MOCK_REALTIME_SERVICE);
+      expect(DummyComponentInstance['realtime']).toEqual(ABLY_REALTIME_MOCK);
       expect(DummyComponentInstance['isAttached']).toBeTruthy();
       expect(DummyComponentInstance['start']).toBeCalled();
     });
@@ -61,6 +66,8 @@ describe('BaseComponent', () => {
         DummyComponentInstance.attach({
           localParticipant: null as unknown as Participant,
           realtime: null as unknown as AblyRealtimeService,
+          group: null as unknown as Group,
+          config: null as unknown as Configuration,
         });
       }).toThrowError();
     });
@@ -73,7 +80,9 @@ describe('BaseComponent', () => {
 
       DummyComponentInstance.attach({
         localParticipant: MOCK_LOCAL_PARTICIPANT,
-        realtime: MOCK_REALTIME_SERVICE,
+        realtime: ABLY_REALTIME_MOCK,
+        group: MOCK_GROUP,
+        config: MOCK_CONFIG,
       });
 
       DummyComponentInstance.detach();
@@ -84,6 +93,26 @@ describe('BaseComponent', () => {
       expect(DummyComponentInstance['destroy']).toBeCalled();
     });
 
+    test('should unsubscribe from all events', () => {
+      const callback = jest.fn();
+      DummyComponentInstance['destroy'] = jest.fn();
+
+      DummyComponentInstance.attach({
+        localParticipant: MOCK_LOCAL_PARTICIPANT,
+        realtime: ABLY_REALTIME_MOCK,
+        group: MOCK_GROUP,
+        config: MOCK_CONFIG,
+      });
+
+      DummyComponentInstance.subscribe('test', callback);
+
+      expect(DummyComponentInstance['observers']['test']).toBeDefined();
+
+      DummyComponentInstance.detach();
+
+      expect(DummyComponentInstance['observers']['test']).toBeUndefined();
+    });
+
     test('should not detach the component if it is not attached', () => {
       DummyComponentInstance['logger'].log = jest.fn();
       expect(DummyComponentInstance.detach).toBeDefined();
@@ -93,4 +122,48 @@ describe('BaseComponent', () => {
       expect(DummyComponentInstance['logger'].log).toBeCalled();
     });
   });
+
+  describe('subscribe', () => {
+    test('should subscribe to the event component with success', () => {
+      const callback = jest.fn();
+
+      expect(DummyComponentInstance.subscribe).toBeDefined();
+
+      DummyComponentInstance.subscribe('test', callback);
+
+      DummyComponentInstance['publish']('test', 'test');
+
+      expect(callback).toBeCalledWith('test');
+    });
+
+    test('should unsubscribe to the event component with success', () => {
+      const callback = jest.fn();
+
+      expect(DummyComponentInstance.subscribe).toBeDefined();
+
+      DummyComponentInstance.subscribe('test', callback);
+
+      DummyComponentInstance['publish']('test', 'test');
+
+      expect(callback).toBeCalledWith('test');
+
+      DummyComponentInstance.unsubscribe('test');
+
+      DummyComponentInstance['publish']('test', 'test');
+
+      expect(callback).toBeCalledTimes(1);
+    });
+
+    test('should skip unsubscribe if the event is not subscribed', () => {
+      expect(DummyComponentInstance.subscribe).toBeDefined();
+
+      DummyComponentInstance.unsubscribe('test');
+    });
+
+    test('should skip publish if the event is not subscribed', () => {
+      expect(DummyComponentInstance.subscribe).toBeDefined();
+
+      DummyComponentInstance['publish']('test', 'test');
+    });
+  });
 });

src/components/base/index.ts

@@ -1,11 +1,15 @@
-import { Participant } from '../../common/types/participant.types';
-import { Logger } from '../../common/utils';
+import { Group, Participant } from '../../common/types/participant.types';
+import { Logger, Observer } from '../../common/utils';
+import config from '../../services/config';
 import { AblyRealtimeService } from '../../services/realtime';
 
 import { DefaultAttachComponentOptions } from './types';
 
 export abstract class BaseComponent {
+  private observers: Record<string, Observer> = {};
+
   protected localParticipant: Participant;
+  protected group: Group;
   protected realtime: AblyRealtimeService;
   protected abstract name: string;
   protected abstract logger: Logger;
@@ -17,18 +21,25 @@ export abstract class BaseComponent {
    * @description attach component
    * @returns {void}
    */
-  public attach = ({ realtime, localParticipant }: DefaultAttachComponentOptions): void => {
-    if (!realtime || !localParticipant) {
-      const message = `${this.name} @ attach - realtime and localParticipant are required`;
+  public attach = (params: DefaultAttachComponentOptions): void => {
+    if (Object.values(params).includes(null) || Object.values(params).includes(undefined)) {
+      const message = `${this.name} @ attach - params are required`;
 
       this.logger.log(message);
       throw new Error(message);
     }
 
-    this.logger.log('attached');
+    const { realtime, localParticipant, group, config: globalConfig } = params;
+
+    config.setConfig(globalConfig);
+
     this.realtime = realtime;
     this.localParticipant = localParticipant;
+    this.group = group;
     this.isAttached = true;
+
+    this.logger.log('attached');
+
     this.start();
   };
 
@@ -43,12 +54,61 @@ export abstract class BaseComponent {
       return;
     }
 
+    this.logger.log('detached');
+    this.destroy();
+
     this.realtime = undefined;
     this.localParticipant = undefined;
     this.isAttached = false;
 
-    this.logger.log('detached');
-    this.destroy();
+    Object.keys(this.observers).forEach((type) => this.unsubscribe(type));
+  };
+
+  /**
+   * @function subscribe
+   * @description Subscribe to an event
+   * @param type - event type
+   * @param listener - event callback
+   * @returns {void}
+   */
+  public subscribe = (type: string, listener: Function): void => {
+    this.logger.log(`subscribed to ${type} event`);
+
+    if (!this.observers[type]) {
+      this.observers[type] = new Observer({ logger: this.logger });
+    }
+
+    this.observers[type].subscribe(listener);
+  };
+
+  /**
+   * @function unsubscribe
+   * @description Unsubscribe from an event
+   * @param type - event type
+   * @returns {void}
+   */
+  public unsubscribe = (type: string): void => {
+    this.logger.log(`unsubscribed from ${type} event`);
+
+    if (!this.observers[type]) return;
+
+    this.observers[type].reset();
+    delete this.observers[type];
+  };
+
+  /**
+   * @function publish
+   * @description Publish an event to client
+   * @param type - event type
+   * @param data - event data
+   * @returns {void}
+   */
+  protected publish = (type: string, data?: unknown): void => {
+    const hasListenerRegistered = type in this.observers;
+
+    if (!hasListenerRegistered) return;
+
+    this.observers[type].publish(data);
   };
 
   protected abstract destroy(): void;

src/components/base/types.ts

@@ -1,8 +1,10 @@
-import { Participant } from '../../common/types/participant.types';
+import { Group, Participant } from '../../common/types/participant.types';
+import { Configuration } from '../../services/config/types';
 import { AblyRealtimeService } from '../../services/realtime';
-import { AblyRealtime } from '../../services/realtime/ably/types';
 
 export interface DefaultAttachComponentOptions {
   realtime: AblyRealtimeService;
   localParticipant: Participant;
+  group: Group;
+  config: Configuration;
 }