Skip to content
This repository was archived by the owner on Oct 18, 2024. It is now read-only.

Commit 5c79577

Browse files
carlossantos74carlossantos74
authored
Merge pull request #729 from SuperViz/lab
Lab
2 parents e108869 + ac6db74 commit 5c79577

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+822
-546
lines changed

‎__mocks__/limits.mock.ts

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
import { ComponentLimits } from '../src/services/limits/types';
22

33
export const LIMITS_MOCK: ComponentLimits = {
4-
videoConference: true,
5-
presence: true,
6-
comments: true,
7-
transcript: true,
4+
presence: {
5+
canUse: true,
6+
maxParticipants: 50,
7+
},
8+
realtime: {
9+
canUse: true,
10+
maxParticipants: 200,
11+
},
12+
videoConference: {
13+
canUse: true,
14+
maxParticipants: 255,
15+
canUseTranscript: true,
16+
},
817
};

‎__mocks__/participants.mock.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Avatar, Group, Participant } from '../src';
2-
import { MeetingColors, MeetingColorsHex } from '../src/common/types/meeting-colors.types';
2+
import { MEETING_COLORS } from '../src/common/types/meeting-colors.types';
33
import { ParticipantByGroupApi } from '../src/common/types/participant.types';
44

55
export const MOCK_AVATAR: Avatar = {
@@ -10,15 +10,14 @@ export const MOCK_AVATAR: Avatar = {
1010
export const MOCK_LOCAL_PARTICIPANT: Participant = {
1111
id: 'unit-test-local-participant-id',
1212
name: 'unit-test-local-participant-name',
13-
color: '#000',
1413
avatar: {
1514
imageUrl: 'unit-test-avatar-thumbnail.png',
1615
model3DUrl: 'unit-test-avatar-model.glb',
1716
},
1817
slot: {
19-
color: MeetingColorsHex[0],
18+
color: MEETING_COLORS.turquoise,
2019
index: 0,
21-
colorName: MeetingColors[0],
20+
colorName: 'turquoise',
2221
textColor: '#000',
2322
timestamp: 0,
2423
},
@@ -36,7 +35,7 @@ export const MOCK_ABLY_PARTICIPANT_DATA_1 = {
3635
avatar: MOCK_AVATAR,
3736
participantId: MOCK_LOCAL_PARTICIPANT.id,
3837
slotIndex: 0,
39-
color: MeetingColorsHex[0],
38+
color: MEETING_COLORS.turquoise,
4039
};
4140

4241
export const MOCK_ABLY_PARTICIPANT_DATA_2 = {
@@ -46,7 +45,7 @@ export const MOCK_ABLY_PARTICIPANT_DATA_2 = {
4645
avatar: MOCK_AVATAR,
4746
participantId: MOCK_LOCAL_PARTICIPANT.id,
4847
slotIndex: 1,
49-
color: MeetingColorsHex[1],
48+
color: MEETING_COLORS.orange,
5049
};
5150

5251
export const MOCK_PARTICIPANT_LIST: ParticipantByGroupApi[] = [

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

+84-37
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,88 @@
1-
export enum MeetingColors {
2-
'turquoise',
3-
'orange',
4-
'blue',
5-
'pink',
6-
'purple',
7-
'green',
1+
export const NAME_IS_WHITE_TEXT = [
2+
'rosybrown',
83
'red',
9-
'bluedark',
10-
'pinklight',
11-
'purplelight',
12-
'greenlight',
13-
'orangelight',
14-
'bluelight',
15-
'redlight',
4+
'saddlebrown',
5+
'coral',
6+
'orange',
167
'brown',
17-
'yellow',
18-
'gray',
19-
}
8+
'goldenrod',
9+
'olivegreen',
10+
'darkolivegreen',
11+
'seagreen',
12+
'lightsea',
13+
'teal',
14+
'cadetblue',
15+
'pastelblue',
16+
'mediumslateblue',
17+
'bluedark',
18+
'navy',
19+
'rebeccapurple',
20+
'purple',
21+
'vividorchid',
22+
'darkmagenta',
23+
'deepmagenta',
24+
'fuchsia',
25+
'violetred',
26+
'pink',
27+
'vibrantpink',
28+
'paleredviolet',
29+
'carmine',
30+
'wine',
31+
];
2032

21-
export const INDEX_IS_WHITE_TEXT = [1, 3, 4, 6, 7, 14, 16];
33+
export const MEETING_COLORS = {
34+
turquoise: '#31E0B0',
35+
orange: '#FF5E10',
36+
blue: '#00ABF7',
37+
pink: '#FF00BB',
38+
purple: '#9C29FF',
39+
green: '#6FDD00',
40+
red: '#E30000',
41+
bluedark: '#304AFF',
42+
pinklight: '#FF89C4',
43+
purplelight: '#D597FF',
44+
greenlight: '#C6EC5C',
45+
orangelight: '#FFA115',
46+
bluelight: '#75DEFE',
47+
redlight: '#FAA291',
48+
brown: '#BB813F',
49+
yellow: '#FFEF33',
50+
olivegreen: '#93A000',
51+
lightyellow: '#FAE391',
52+
violetred: '#C03FA3',
53+
rosybrown: '#B58787',
54+
cadetblue: '#2095BB',
55+
lightsteelblue: '#ABB5FF',
56+
seagreen: '#04B45F',
57+
palegreen: '#8DE990',
58+
saddlebrown: '#964C42',
59+
pastelblue: '#77A1CC',
60+
palesilver: '#D2BABA',
61+
coral: '#DF6B6B',
62+
bisque: '#FFD9C4',
63+
goldenrod: '#DAA520',
64+
tan: '#D2BD93',
65+
darkolivegreen: '#536C27',
66+
mint: '#ADE6DF',
67+
lightsea: '#45AFAA',
68+
teal: '#036E6E',
69+
wine: '#760040',
70+
cyan: '#00FFFF',
71+
mediumslateblue: '#6674D7',
72+
navy: '#0013BB',
73+
rebeccapurple: '#663399',
74+
vividorchid: '#D429FF',
75+
darkmagenta: '#810E81',
76+
deepmagenta: '#C303C6',
77+
fuchsia: '#FA00FF',
78+
lavendermagenta: '#EE82EE',
79+
thistle: '#EEB4DD',
80+
vibrantpink: '#FF007A',
81+
cottoncandy: '#FFC0DE',
82+
paleredviolet: '#D96598',
83+
carmine: '#B50A52',
84+
gray: '#878291',
85+
};
2286

23-
export enum MeetingColorsHex {
24-
'#31E0B0',
25-
'#FF5E10',
26-
'#00ABF7',
27-
'#FF00BB',
28-
'#9C29FF',
29-
'#6FDD00',
30-
'#E30000',
31-
'#304AFF',
32-
'#FF89C4',
33-
'#D597FF',
34-
'#C6EC5C',
35-
'#FFA115',
36-
'#75DEFE',
37-
'#FAA291',
38-
'#BB813F',
39-
'#FFEF33',
40-
'#878291',
41-
}
87+
export const MEETING_COLORS_ARRAY = Object.values(MEETING_COLORS);
88+
export const MEETING_COLORS_KEYS = Object.keys(MEETING_COLORS);

‎src/common/types/participant.types.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export interface Participant {
1818
id: string;
1919
name?: string;
2020
type?: ParticipantType;
21-
color?: string;
2221
slot?: Slot;
2322
avatar?: Avatar;
2423
isHost?: boolean;
@@ -28,6 +27,12 @@ export interface Participant {
2827
timestamp?: number;
2928
}
3029

30+
export interface VideoParticipant extends Participant {
31+
participantId?: string;
32+
color?: string;
33+
joinedMeeting?: boolean;
34+
}
35+
3136
export type ParticipantByGroupApi = {
3237
id: string;
3338
name: string;

‎src/components/base/index.test.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { useGlobalStore } from '../../services/stores';
1313
import { ComponentNames } from '../types';
1414

1515
import { BaseComponent } from '.';
16+
import { LIMITS_MOCK } from '../../../__mocks__/limits.mock';
1617

1718
class DummyComponent extends BaseComponent {
1819
protected logger: Logger;
@@ -70,6 +71,7 @@ describe('BaseComponent', () => {
7071
config: MOCK_CONFIG,
7172
eventBus: EVENT_BUS_MOCK,
7273
Presence3DManagerService: Presence3DManager,
74+
connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
7375
useStore,
7476
});
7577

@@ -90,6 +92,7 @@ describe('BaseComponent', () => {
9092
ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
9193
config: MOCK_CONFIG,
9294
eventBus: EVENT_BUS_MOCK,
95+
connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
9396
useStore,
9497
});
9598

@@ -109,6 +112,7 @@ describe('BaseComponent', () => {
109112
ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
110113
config: MOCK_CONFIG,
111114
eventBus: EVENT_BUS_MOCK,
115+
connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
112116
useStore,
113117
});
114118

@@ -126,8 +130,9 @@ describe('BaseComponent', () => {
126130
config: null as unknown as Configuration,
127131
eventBus: null as unknown as EventBus,
128132
useStore: null as unknown as typeof useStore,
133+
connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
129134
});
130-
}).toThrowError();
135+
}).toThrow();
131136
});
132137
});
133138

@@ -141,6 +146,7 @@ describe('BaseComponent', () => {
141146
ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
142147
config: MOCK_CONFIG,
143148
eventBus: EVENT_BUS_MOCK,
149+
connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
144150
useStore,
145151
});
146152

@@ -162,6 +168,7 @@ describe('BaseComponent', () => {
162168
ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
163169
config: MOCK_CONFIG,
164170
eventBus: EVENT_BUS_MOCK,
171+
connectionLimit: LIMITS_MOCK.videoConference.maxParticipants,
165172
useStore,
166173
});
167174

‎src/components/base/index.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { DefaultAttachComponentOptions } from './types';
1515
export abstract class BaseComponent extends Observable {
1616
public abstract name: ComponentNames;
1717
protected abstract logger: Logger;
18+
protected connectionLimit: number | 'unlimited';
1819
protected group: Group;
1920
protected ioc: IOC;
2021
protected eventBus: EventBus;
@@ -51,7 +52,8 @@ export abstract class BaseComponent extends Observable {
5152
this.eventBus = eventBus;
5253
this.isAttached = true;
5354
this.ioc = ioc;
54-
this.room = ioc.createRoom(this.name);
55+
this.connectionLimit = params.connectionLimit ?? 50;
56+
this.room = ioc.createRoom(this.name, this.connectionLimit);
5557

5658
if (!hasJoinedRoom.value) {
5759
this.logger.log(`${this.name} @ attach - not joined yet`);

‎src/components/base/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export interface DefaultAttachComponentOptions {
1111
eventBus: EventBus;
1212
useStore: <T extends StoreType>(name: T) => Store<T>;
1313
Presence3DManagerService: typeof Presence3DManager;
14+
connectionLimit: number | 'unlimited';
1415
}
1516

1617
export type GlobalStore = {

‎src/components/comments/index.test.ts

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { ComponentNames } from '../types';
1717
import { PinAdapter, CommentsSide, Annotation, PinCoordinates } from './types';
1818

1919
import { Comments } from './index';
20+
import { LIMITS_MOCK } from '../../../__mocks__/limits.mock';
2021

2122
const MOCK_PARTICIPANTS: ParticipantByGroupApi[] = [
2223
{
@@ -83,6 +84,7 @@ describe('Comments', () => {
8384
config: MOCK_CONFIG,
8485
eventBus: EVENT_BUS_MOCK,
8586
Presence3DManagerService: Presence3DManager,
87+
connectionLimit: LIMITS_MOCK.presence.maxParticipants,
8688
useStore,
8789
});
8890

@@ -337,6 +339,7 @@ describe('Comments', () => {
337339
config: MOCK_CONFIG,
338340
eventBus: EVENT_BUS_MOCK,
339341
Presence3DManagerService: Presence3DManager,
342+
connectionLimit: LIMITS_MOCK.presence.maxParticipants,
340343
useStore,
341344
});
342345

@@ -356,6 +359,7 @@ describe('Comments', () => {
356359
config: MOCK_CONFIG,
357360
eventBus: EVENT_BUS_MOCK,
358361
Presence3DManagerService: Presence3DManager,
362+
connectionLimit: LIMITS_MOCK.presence.maxParticipants,
359363
useStore,
360364
});
361365

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

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ComponentNames } from '../types';
1010
import { FieldEvents } from './types';
1111

1212
import { FormElements } from '.';
13+
import { LIMITS_MOCK } from '../../../__mocks__/limits.mock';
1314

1415
describe('form elements', () => {
1516
let instance: any;
@@ -32,6 +33,7 @@ describe('form elements', () => {
3233
config: MOCK_CONFIG,
3334
eventBus: EVENT_BUS_MOCK,
3435
Presence3DManagerService: Presence3DManager,
36+
connectionLimit: LIMITS_MOCK.presence.maxParticipants,
3537
useStore,
3638
});
3739
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SocketEvent } from '../../lib/socket';
1+
import type { SocketEvent } from '../../lib/socket';
22

33
import { Participant } from '../../common/types/participant.types';
44
import { StoreType } from '../../common/types/stores.types';

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { MOCK_CANVAS } from '../../../../__mocks__/canvas.mock';
22
import { MOCK_CONFIG } from '../../../../__mocks__/config.mock';
33
import { EVENT_BUS_MOCK } from '../../../../__mocks__/event-bus.mock';
4+
import { LIMITS_MOCK } from '../../../../__mocks__/limits.mock';
45
import { MOCK_LOCAL_PARTICIPANT } from '../../../../__mocks__/participants.mock';
56
import { useStore } from '../../../common/utils/use-store';
67
import { IOC } from '../../../services/io';
@@ -53,6 +54,7 @@ const createMousePointers = (): PointersCanvas => {
5354
config: MOCK_CONFIG,
5455
eventBus: EVENT_BUS_MOCK,
5556
Presence3DManagerService: Presence3DManager,
57+
connectionLimit: LIMITS_MOCK.presence.maxParticipants,
5658
useStore,
5759
});
5860

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Logger } from '../../../common/utils';
88
import { BaseComponent } from '../../base';
99
import { ComponentNames } from '../../types';
1010
import { Camera, ParticipantMouse, PresenceMouseProps, Transform } from '../types';
11+
import { MEETING_COLORS } from '../../../common/types/meeting-colors.types';
1112

1213
export class PointersCanvas extends BaseComponent {
1314
public name: ComponentNames;
@@ -330,12 +331,12 @@ export class PointersCanvas extends BaseComponent {
330331
const pointerUser = divPointer.getElementsByClassName('pointer-mouse')[0] as HTMLDivElement;
331332

332333
if (pointerUser) {
333-
pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/pointers-v2/${mouse.slot.index}.svg)`;
334+
pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/mouse-pointers/${mouse.slot?.colorName}.svg)`;
334335
}
335336

336337
if (mouseUser) {
337-
mouseUser.style.color = mouse.slot.textColor;
338-
mouseUser.style.backgroundColor = mouse.slot.color;
338+
mouseUser.style.color = mouse.slot?.textColor ?? '#fff';
339+
mouseUser.style.backgroundColor = mouse.slot?.color ?? MEETING_COLORS.gray;
339340
mouseUser.innerHTML = mouse.name;
340341
}
341342

0 commit comments

Comments
 (0)