Merge pull request #729 from SuperViz/lab

Lab

__mocks__/limits.mock.ts

@@ -1,8 +1,17 @@
 import { ComponentLimits } from '../src/services/limits/types';
 
 export const LIMITS_MOCK: ComponentLimits = {
-  videoConference: true,
-  presence: true,
-  comments: true,
-  transcript: true,
+  presence: {
+    canUse: true,
+    maxParticipants: 50,
+  },
+  realtime: {
+    canUse: true,
+    maxParticipants: 200,
+  },
+  videoConference: {
+    canUse: true,
+    maxParticipants: 255,
+    canUseTranscript: true,
+  },
 };

__mocks__/participants.mock.ts

@@ -1,5 +1,5 @@
 import { Avatar, Group, Participant } from '../src';
-import { MeetingColors, MeetingColorsHex } from '../src/common/types/meeting-colors.types';
+import { MEETING_COLORS } from '../src/common/types/meeting-colors.types';
 import { ParticipantByGroupApi } from '../src/common/types/participant.types';
 
 export const MOCK_AVATAR: Avatar = {
@@ -10,15 +10,14 @@ export const MOCK_AVATAR: Avatar = {
 export const MOCK_LOCAL_PARTICIPANT: Participant = {
   id: 'unit-test-local-participant-id',
   name: 'unit-test-local-participant-name',
-  color: '#000',
   avatar: {
     imageUrl: 'unit-test-avatar-thumbnail.png',
     model3DUrl: 'unit-test-avatar-model.glb',
   },
   slot: {
-    color: MeetingColorsHex[0],
+    color: MEETING_COLORS.turquoise,
     index: 0,
-    colorName: MeetingColors[0],
+    colorName: 'turquoise',
     textColor: '#000',
     timestamp: 0,
   },
@@ -36,7 +35,7 @@ export const MOCK_ABLY_PARTICIPANT_DATA_1 = {
   avatar: MOCK_AVATAR,
   participantId: MOCK_LOCAL_PARTICIPANT.id,
   slotIndex: 0,
-  color: MeetingColorsHex[0],
+  color: MEETING_COLORS.turquoise,
 };
 
 export const MOCK_ABLY_PARTICIPANT_DATA_2 = {
@@ -46,7 +45,7 @@ export const MOCK_ABLY_PARTICIPANT_DATA_2 = {
   avatar: MOCK_AVATAR,
   participantId: MOCK_LOCAL_PARTICIPANT.id,
   slotIndex: 1,
-  color: MeetingColorsHex[1],
+  color: MEETING_COLORS.orange,
 };
 
 export const MOCK_PARTICIPANT_LIST: ParticipantByGroupApi[] = [

src/common/types/meeting-colors.types.ts

@@ -1,41 +1,88 @@
-export enum MeetingColors {
-  'turquoise',
-  'orange',
-  'blue',
-  'pink',
-  'purple',
-  'green',
+export const NAME_IS_WHITE_TEXT = [
+  'rosybrown',
   'red',
-  'bluedark',
-  'pinklight',
-  'purplelight',
-  'greenlight',
-  'orangelight',
-  'bluelight',
-  'redlight',
+  'saddlebrown',
+  'coral',
+  'orange',
   'brown',
-  'yellow',
-  'gray',
-}
+  'goldenrod',
+  'olivegreen',
+  'darkolivegreen',
+  'seagreen',
+  'lightsea',
+  'teal',
+  'cadetblue',
+  'pastelblue',
+  'mediumslateblue',
+  'bluedark',
+  'navy',
+  'rebeccapurple',
+  'purple',
+  'vividorchid',
+  'darkmagenta',
+  'deepmagenta',
+  'fuchsia',
+  'violetred',
+  'pink',
+  'vibrantpink',
+  'paleredviolet',
+  'carmine',
+  'wine',
+];
 
-export const INDEX_IS_WHITE_TEXT = [1, 3, 4, 6, 7, 14, 16];
+export const MEETING_COLORS = {
+  turquoise: '#31E0B0',
+  orange: '#FF5E10',
+  blue: '#00ABF7',
+  pink: '#FF00BB',
+  purple: '#9C29FF',
+  green: '#6FDD00',
+  red: '#E30000',
+  bluedark: '#304AFF',
+  pinklight: '#FF89C4',
+  purplelight: '#D597FF',
+  greenlight: '#C6EC5C',
+  orangelight: '#FFA115',
+  bluelight: '#75DEFE',
+  redlight: '#FAA291',
+  brown: '#BB813F',
+  yellow: '#FFEF33',
+  olivegreen: '#93A000',
+  lightyellow: '#FAE391',
+  violetred: '#C03FA3',
+  rosybrown: '#B58787',
+  cadetblue: '#2095BB',
+  lightsteelblue: '#ABB5FF',
+  seagreen: '#04B45F',
+  palegreen: '#8DE990',
+  saddlebrown: '#964C42',
+  pastelblue: '#77A1CC',
+  palesilver: '#D2BABA',
+  coral: '#DF6B6B',
+  bisque: '#FFD9C4',
+  goldenrod: '#DAA520',
+  tan: '#D2BD93',
+  darkolivegreen: '#536C27',
+  mint: '#ADE6DF',
+  lightsea: '#45AFAA',
+  teal: '#036E6E',
+  wine: '#760040',
+  cyan: '#00FFFF',
+  mediumslateblue: '#6674D7',
+  navy: '#0013BB',
+  rebeccapurple: '#663399',
+  vividorchid: '#D429FF',
+  darkmagenta: '#810E81',
+  deepmagenta: '#C303C6',
+  fuchsia: '#FA00FF',
+  lavendermagenta: '#EE82EE',
+  thistle: '#EEB4DD',
+  vibrantpink: '#FF007A',
+  cottoncandy: '#FFC0DE',
+  paleredviolet: '#D96598',
+  carmine: '#B50A52',
+  gray: '#878291',
+};
 
-export enum MeetingColorsHex {
-  '#31E0B0',
-  '#FF5E10',
-  '#00ABF7',
-  '#FF00BB',
-  '#9C29FF',
-  '#6FDD00',
-  '#E30000',
-  '#304AFF',
-  '#FF89C4',
-  '#D597FF',
-  '#C6EC5C',
-  '#FFA115',
-  '#75DEFE',
-  '#FAA291',
-  '#BB813F',
-  '#FFEF33',
-  '#878291',
-}
+export const MEETING_COLORS_ARRAY = Object.values(MEETING_COLORS);
+export const MEETING_COLORS_KEYS = Object.keys(MEETING_COLORS);

src/common/types/participant.types.ts

@@ -18,7 +18,6 @@ export interface Participant {
   id: string;
   name?: string;
   type?: ParticipantType;
-  color?: string;
   slot?: Slot;
   avatar?: Avatar;
   isHost?: boolean;
@@ -28,6 +27,12 @@ export interface Participant {
   timestamp?: number;
 }
 
+export interface VideoParticipant extends Participant {
+  participantId?: string;
+  color?: string;
+  joinedMeeting?: boolean;
+}
+
 export type ParticipantByGroupApi = {
   id: string;
   name: string;

src/components/base/index.test.ts

@@ -13,6 +13,7 @@ import { useGlobalStore } from '../../services/stores';
 import { ComponentNames } from '../types';
 
 import { BaseComponent } from '.';
+import { LIMITS_MOCK } from '../../../__mocks__/limits.mock';
 
 class DummyComponent extends BaseComponent {
   protected logger: Logger;
@@ -70,6 +71,7 @@ describe('BaseComponent', () => {
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
         Presence3DManagerService: Presence3DManager,
+        connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
         useStore,
       });
 
@@ -90,6 +92,7 @@ describe('BaseComponent', () => {
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
+        connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
         useStore,
       });
 
@@ -109,6 +112,7 @@ describe('BaseComponent', () => {
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
+        connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
         useStore,
       });
 
@@ -126,8 +130,9 @@ describe('BaseComponent', () => {
           config: null as unknown as Configuration,
           eventBus: null as unknown as EventBus,
           useStore: null as unknown as typeof useStore,
+          connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
         });
-      }).toThrowError();
+      }).toThrow();
     });
   });
 
@@ -141,6 +146,7 @@ describe('BaseComponent', () => {
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
+        connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
         useStore,
       });
 
@@ -162,6 +168,7 @@ describe('BaseComponent', () => {
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
+        connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
         useStore,
       });
 

src/components/base/index.ts

@@ -15,6 +15,7 @@ import { DefaultAttachComponentOptions } from './types';
 export abstract class BaseComponent extends Observable {
   public abstract name: ComponentNames;
   protected abstract logger: Logger;
+  protected connectionLimit: number | 'unlimited';
   protected group: Group;
   protected ioc: IOC;
   protected eventBus: EventBus;
@@ -51,7 +52,8 @@ export abstract class BaseComponent extends Observable {
     this.eventBus = eventBus;
     this.isAttached = true;
     this.ioc = ioc;
-    this.room = ioc.createRoom(this.name);
+    this.connectionLimit = params.connectionLimit ?? 50;
+    this.room = ioc.createRoom(this.name, this.connectionLimit);
 
     if (!hasJoinedRoom.value) {
       this.logger.log(`${this.name} @ attach - not joined yet`);

src/components/base/types.ts

@@ -11,6 +11,7 @@ export interface DefaultAttachComponentOptions {
   eventBus: EventBus;
   useStore: <T extends StoreType>(name: T) => Store<T>;
   Presence3DManagerService: typeof Presence3DManager;
+  connectionLimit: number | 'unlimited';
 }
 
 export type GlobalStore = {

src/components/comments/index.test.ts

@@ -17,6 +17,7 @@ import { ComponentNames } from '../types';
 import { PinAdapter, CommentsSide, Annotation, PinCoordinates } from './types';
 
 import { Comments } from './index';
+import { LIMITS_MOCK } from '../../../__mocks__/limits.mock';
 
 const MOCK_PARTICIPANTS: ParticipantByGroupApi[] = [
   {
@@ -83,6 +84,7 @@ describe('Comments', () => {
       config: MOCK_CONFIG,
       eventBus: EVENT_BUS_MOCK,
       Presence3DManagerService: Presence3DManager,
+      connectionLimit: LIMITS_MOCK.presence.maxParticipants,
       useStore,
     });
 
@@ -337,6 +339,7 @@ describe('Comments', () => {
       config: MOCK_CONFIG,
       eventBus: EVENT_BUS_MOCK,
       Presence3DManagerService: Presence3DManager,
+      connectionLimit: LIMITS_MOCK.presence.maxParticipants,
       useStore,
     });
 
@@ -356,6 +359,7 @@ describe('Comments', () => {
       config: MOCK_CONFIG,
       eventBus: EVENT_BUS_MOCK,
       Presence3DManagerService: Presence3DManager,
+      connectionLimit: LIMITS_MOCK.presence.maxParticipants,
       useStore,
     });
 

src/components/form-elements/index.test.ts

@@ -10,6 +10,7 @@ import { ComponentNames } from '../types';
 import { FieldEvents } from './types';
 
 import { FormElements } from '.';
+import { LIMITS_MOCK } from '../../../__mocks__/limits.mock';
 
 describe('form elements', () => {
   let instance: any;
@@ -32,6 +33,7 @@ describe('form elements', () => {
       config: MOCK_CONFIG,
       eventBus: EVENT_BUS_MOCK,
       Presence3DManagerService: Presence3DManager,
+      connectionLimit: LIMITS_MOCK.presence.maxParticipants,
       useStore,
     });
   });

src/components/form-elements/index.ts

@@ -1,4 +1,4 @@
-import { SocketEvent } from '../../lib/socket';
+import type { SocketEvent } from '../../lib/socket';
 
 import { Participant } from '../../common/types/participant.types';
 import { StoreType } from '../../common/types/stores.types';

src/components/presence-mouse/canvas/index.test.ts

@@ -1,6 +1,7 @@
 import { MOCK_CANVAS } from '../../../../__mocks__/canvas.mock';
 import { MOCK_CONFIG } from '../../../../__mocks__/config.mock';
 import { EVENT_BUS_MOCK } from '../../../../__mocks__/event-bus.mock';
+import { LIMITS_MOCK } from '../../../../__mocks__/limits.mock';
 import { MOCK_LOCAL_PARTICIPANT } from '../../../../__mocks__/participants.mock';
 import { useStore } from '../../../common/utils/use-store';
 import { IOC } from '../../../services/io';
@@ -53,6 +54,7 @@ const createMousePointers = (): PointersCanvas => {
     config: MOCK_CONFIG,
     eventBus: EVENT_BUS_MOCK,
     Presence3DManagerService: Presence3DManager,
+    connectionLimit: LIMITS_MOCK.presence.maxParticipants,
     useStore,
   });
 

src/components/presence-mouse/canvas/index.ts

@@ -8,6 +8,7 @@ import { Logger } from '../../../common/utils';
 import { BaseComponent } from '../../base';
 import { ComponentNames } from '../../types';
 import { Camera, ParticipantMouse, PresenceMouseProps, Transform } from '../types';
+import { MEETING_COLORS } from '../../../common/types/meeting-colors.types';
 
 export class PointersCanvas extends BaseComponent {
   public name: ComponentNames;
@@ -330,12 +331,12 @@ export class PointersCanvas extends BaseComponent {
     const pointerUser = divPointer.getElementsByClassName('pointer-mouse')[0] as HTMLDivElement;
 
     if (pointerUser) {
-      pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/pointers-v2/${mouse.slot.index}.svg)`;
+      pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/mouse-pointers/${mouse.slot?.colorName}.svg)`;
     }
 
     if (mouseUser) {
-      mouseUser.style.color = mouse.slot.textColor;
-      mouseUser.style.backgroundColor = mouse.slot.color;
+      mouseUser.style.color = mouse.slot?.textColor ?? '#fff';
+      mouseUser.style.backgroundColor = mouse.slot?.color ?? MEETING_COLORS.gray;
       mouseUser.innerHTML = mouse.name;
     }