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

Commit

Permalink
Merge pull request #705 from SuperViz/fix/kick-participant-interval
Browse files Browse the repository at this point in the history 
feat: add new colors and slots
  • Loading branch information
@carlossantos74
carlossantos74 authored Jul 8, 2024
2 parents b3a06f3 + 975c475 commit 890e6a9
Show file tree
Hide file tree
Showing 15 changed files with 186 additions and 202 deletions.
10 changes: 5 additions & 5 deletions __mocks__/participants.mock.ts
View file
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -16,9 +16,9 @@ export const MOCK_LOCAL_PARTICIPANT: Participant = {
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,
},
Expand All @@ -36,7 +36,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 = {
Expand All @@ -46,7 +46,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[] = [
Expand Down
121 changes: 84 additions & 37 deletions src/common/types/meeting-colors.types.ts
View file
Original file line number Diff line number Diff line change
@@ -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);
2 changes: 1 addition & 1 deletion src/components/presence-mouse/canvas/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ 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) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/presence-mouse/html/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -691,7 +691,7 @@ export class PointersHTML extends BaseComponent {
const pointerUser = mouseFollower.getElementsByClassName('pointer-mouse')[0] as HTMLDivElement;

if (pointerUser) {
pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/pointers-v2/${participant.slot.index}.svg)`;
pointerUser.style.backgroundImage = `url(https://production.cdn.superviz.com/static/mouse-pointers/${participant.slot.colorName}.svg)`;
}

if (mouseUser) {
Expand Down
69 changes: 34 additions & 35 deletions src/components/video/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,15 @@ import {
RealtimeEvent,
TranscriptState,
} from '../../common/types/events.types';
import { MeetingColors, MeetingColorsHex } from '../../common/types/meeting-colors.types';
import { Participant, ParticipantType } from '../../common/types/participant.types';
import { StoreType } from '../../common/types/stores.types';
import { useStore } from '../../common/utils/use-store';
import { IOC } from '../../services/io';
import { Presence3DManager } from '../../services/presence-3d-manager';
import { VideoFrameState } from '../../services/video-conference-manager/types';
import { ComponentNames } from '../types';

import { VideoConference } from '.';
import { MEETING_COLORS } from '../../common/types/meeting-colors.types';

Object.assign(global, { TextDecoder, TextEncoder });

Expand Down Expand Up @@ -144,10 +143,10 @@ describe('VideoConference', () => {
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand Down Expand Up @@ -191,10 +190,10 @@ describe('VideoConference', () => {
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand All @@ -212,10 +211,10 @@ describe('VideoConference', () => {
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand Down Expand Up @@ -248,10 +247,10 @@ describe('VideoConference', () => {
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand Down Expand Up @@ -308,10 +307,10 @@ describe('VideoConference', () => {
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand Down Expand Up @@ -589,12 +588,12 @@ describe('VideoConference', () => {
const participantInfoList: Participant[] = [
{
id: participants.value[MOCK_LOCAL_PARTICIPANT.id].id,
color: participants.value[MOCK_LOCAL_PARTICIPANT.id].slot?.colorName || 'gray',
avatar: participants.value[MOCK_LOCAL_PARTICIPANT.id].avatar,
name: participants.value[MOCK_LOCAL_PARTICIPANT.id].name,
type: participants.value[MOCK_LOCAL_PARTICIPANT.id].type,
isHost: participants.value[MOCK_LOCAL_PARTICIPANT.id].isHost ?? false,
slot: participants.value[MOCK_LOCAL_PARTICIPANT.id].slot,
timestamp: participants.value[MOCK_LOCAL_PARTICIPANT.id].timestamp,
},
];

Expand Down Expand Up @@ -627,10 +626,10 @@ describe('VideoConference', () => {
avatar: MOCK_AVATAR,
type: ParticipantType.GUEST,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand Down Expand Up @@ -679,12 +678,12 @@ describe('VideoConference', () => {
isHost: true,
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
color: MeetingColors[0],
color: 'turquoise',
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand All @@ -698,13 +697,13 @@ describe('VideoConference', () => {
isHost: true,
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
color: MeetingColors[0],
color: 'turquoise',
participantId: MOCK_LOCAL_PARTICIPANT.id,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
};
Expand All @@ -730,10 +729,10 @@ describe('VideoConference', () => {
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand Down Expand Up @@ -762,10 +761,10 @@ describe('VideoConference', () => {
avatar: MOCK_AVATAR,
type: ParticipantType.HOST,
slot: {
colorName: MeetingColors[0],
colorName: 'turquoise',
index: 0,
color: MeetingColorsHex[0],
textColor: MeetingColors[0],
color: MEETING_COLORS.turquoise,
textColor: '#fff',
timestamp: 0,
},
},
Expand Down
Loading

0 comments on commit 890e6a9

Please sign in to comment.