feat: add ui for sip peer

packages/hms-video-store/src/index.ts

@@ -18,6 +18,7 @@ export {
   parsedUserAgent,
   simulcastMapping,
   DeviceType,
+  HMSPeerType,
 } from './internal';
 
 export type {
@@ -51,7 +52,6 @@ export type {
   HMSPollQuestionOption,
   HMSQuizLeaderboardResponse,
   HMSQuizLeaderboardSummary,
-  HMSPeerType,
 } from './internal';
 
 export { EventBus } from './events/EventBus';

packages/hms-video-store/src/interfaces/peer/hms-peer.ts

@@ -1,7 +1,10 @@
 import { HMSAudioTrack, HMSTrack, HMSVideoTrack } from '../../media/tracks';
 import { HMSRole } from '../role';
 
-export type HMSPeerType = 'sip' | 'regular';
+export enum HMSPeerType {
+  SIP = 'sip',
+  REGULAR = 'regular',
+}
 
 export interface HMSPeer {
   peerId: string;

packages/hms-video-store/src/interfaces/peer/index.ts

@@ -1,4 +1,5 @@
-export type { HMSPeer, HMSPeerType } from './hms-peer';
+export type { HMSPeer } from './hms-peer';
 export type { HMSLocalPeer } from './hms-local-peer';
 export type { HMSRemotePeer } from './hms-remote-peer';
 export type { HMSConnectionQuality } from './connection-quality';
+export { HMSPeerType } from './hms-peer';

packages/hms-video-store/src/notification-manager/fixtures.ts

@@ -1,10 +1,11 @@
 import { MessageNotification, PeerListNotification, PeerNotification, SpeakerList } from './HMSNotifications';
+import { HMSPeerType } from '../interfaces';
 
 export const FAKE_PEER_ID = 'peer_id_1';
 
 export const fakePeer: PeerNotification = {
   peer_id: 'peer_id_0',
-  info: { data: 'data', name: 'Sarvesh0', user_id: 'customer_user_id', type: 'regular' },
+  info: { data: 'data', name: 'Sarvesh0', user_id: 'customer_user_id', type: HMSPeerType.REGULAR },
   role: 'host',
   tracks: {},
   groups: [],
@@ -17,7 +18,7 @@ export const fakePeerList: PeerListNotification = {
         name: 'Sarvesh1',
         data: 'data',
         user_id: 'customer_user_id',
-        type: 'regular',
+        type: HMSPeerType.REGULAR,
       },
       role: 'host',
       peer_id: FAKE_PEER_ID,
@@ -33,7 +34,7 @@ export const fakePeerList: PeerListNotification = {
         track_id_2: {
           mute: false,
           type: 'video',
-          source: 'regular',
+          source: HMSPeerType.REGULAR,
           description: '',
           track_id: 'track_id_2',
           stream_id: 'stream_id_1',
@@ -46,7 +47,7 @@ export const fakePeerList: PeerListNotification = {
         name: 'Sarvesh3',
         data: 'data',
         user_id: 'customer_user_id',
-        type: 'regular',
+        type: HMSPeerType.REGULAR,
       },
       peer_id: 'peer_id_3',
       role: 'viewer',
@@ -87,7 +88,7 @@ export const fakeReconnectPeerList: PeerListNotification = {
         name: 'Sarvesh1',
         data: 'data',
         user_id: 'customer_user_id',
-        type: 'regular',
+        type: HMSPeerType.REGULAR,
       },
       role: 'host',
       peer_id: FAKE_PEER_ID,
@@ -103,7 +104,7 @@ export const fakeReconnectPeerList: PeerListNotification = {
         track_id_2: {
           mute: false,
           type: 'video',
-          source: 'regular',
+          source: HMSPeerType.REGULAR,
           description: '',
           track_id: 'track_id_2',
           stream_id: 'stream_id_1',
@@ -116,7 +117,7 @@ export const fakeReconnectPeerList: PeerListNotification = {
         name: 'Sarvesh2',
         data: 'data',
         user_id: 'customer_user_id',
-        type: 'regular',
+        type: HMSPeerType.REGULAR,
       },
       peer_id: 'peer_id_2',
       role: 'viewer',

packages/hms-video-store/src/sdk/LocalTrackManager.test.ts

@@ -5,7 +5,7 @@ import { AnalyticsTimer } from '../analytics/AnalyticsTimer';
 import { DeviceManager } from '../device-manager';
 import { HMSException } from '../error/HMSException';
 import { EventBus } from '../events/EventBus';
-import { HMSLocalVideoTrack, HMSTrackType } from '../internal';
+import { HMSLocalVideoTrack, HMSPeerType, HMSTrackType } from '../internal';
 import { HMSLocalStream } from '../media/streams/HMSLocalStream';
 import { HMSTrack } from '../media/tracks';
 import { PolicyParams } from '../notification-manager';
@@ -96,7 +96,7 @@ const publishParams = hostRole.publishParams;
 let localPeer = new HMSLocalPeer({
   name: 'test',
   role: hostRole,
-  type: 'regular',
+  type: HMSPeerType.REGULAR,
 });
 testStore.addPeer(localPeer);
 
@@ -232,7 +232,7 @@ describe('LocalTrackManager', () => {
     localPeer = new HMSLocalPeer({
       name: 'test',
       role: hostRole,
-      type: 'regular',
+      type: HMSPeerType.REGULAR,
     });
     testStore.addPeer(localPeer);
   });
@@ -410,7 +410,7 @@ describe('LocalTrackManager', () => {
       localPeer = new HMSLocalPeer({
         name: 'test',
         role: hostRole,
-        type: 'regular',
+        type: HMSPeerType.REGULAR,
       });
       testStore.addPeer(localPeer);
       mockGetUserMedia.mockClear();
@@ -424,7 +424,7 @@ describe('LocalTrackManager', () => {
           kind: 'video',
           getSettings: () => ({ deviceId: 'video-device-id', groupId: 'video-group-id' }),
         } as MediaStreamTrack,
-        'regular',
+        HMSPeerType.REGULAR,
         testEventBus,
       );
       localPeer.videoTrack = mockVideoTrack;
@@ -456,7 +456,7 @@ describe('LocalTrackManager', () => {
           kind: 'video',
           getSettings: () => ({ deviceId: 'video-device-id', groupId: 'video-group-id' }),
         } as MediaStreamTrack,
-        'regular',
+        HMSPeerType.REGULAR,
         testEventBus,
       );
 

packages/hms-video-store/src/sdk/index.ts

@@ -28,6 +28,7 @@ import {
   HMSDeviceChangeEvent,
   HMSFrameworkInfo,
   HMSMessageInput,
+  HMSPeerType,
   HMSPlaylistSettings,
   HMSPlaylistType,
   HMSPreviewConfig,
@@ -1300,7 +1301,7 @@ export class HMSSdk implements HMSInterface {
       role: policy,
       // default value is the original role if user didn't pass asRole in config
       asRole: asRolePolicy || policy,
-      type: 'regular',
+      type: HMSPeerType.REGULAR,
     });
 
     this.store.addPeer(localPeer);

packages/hms-video-store/src/sdk/models/peer/peer.test.ts

@@ -46,7 +46,7 @@ describe('HMSLocalPeer', () => {
     name: 'John Doe',
     role: getParamsForRole(role),
     customerUserId: userId,
-    type: 'regular' as HMSPeerType,
+    type: HMSPeerType.REGULAR as HMSPeerType,
   };
   const peer = new HMSLocalPeer(params);
 
@@ -82,7 +82,7 @@ describe('HMSRemotPeer', () => {
       name: 'John Doe',
       data: 'data',
       user_id: 'customer_user_id',
-      type: 'regular',
+      type: HMSPeerType.REGULAR,
     },
     role: 'viewer',
     tracks: {},
@@ -94,7 +94,7 @@ describe('HMSRemotPeer', () => {
     role: getParamsForRole(peerInfo.role),
     customerUserId: peerInfo.info.user_id,
     metadata: peerInfo.info.data,
-    type: 'regular',
+    type: HMSPeerType.REGULAR,
   });
 
   it('should be constructed using params', () => {

packages/hms-video-store/src/selectors/selectorsByID.ts

@@ -163,6 +163,8 @@ export const selectAppDataByPath = (...keys: string[]) =>
  */
 export const selectPeerNameByID = byIDCurry(createSelector(selectPeerByIDBare, peer => peer?.name));
 
+export const selectPeerTypeByID = byIDCurry(createSelector(selectPeerByIDBare, peer => peer?.type));
+
 /**
  * Select the {@link HMSTrack} object given a track ID.
  */

packages/hms-video-store/src/test/fakeStore/fakeHMSStore.ts

@@ -9,7 +9,7 @@ import {
   HMSTrackSource,
   HMSTrackType,
 } from '../../';
-import { HMSSimulcastLayer } from '../../internal';
+import { HMSPeerType, HMSSimulcastLayer } from '../../internal';
 import { HMSAudioTrack, HMSPlaylist, HMSPlaylistType, HMSRole, HMSScreenVideoTrack, HMSVideoTrack } from '../../schema';
 
 function makeTrack(
@@ -98,7 +98,7 @@ export const makeFakeStore = (): HMSStore => {
         metadata: '{}',
         groups: [],
         isHandRaised: false,
-        type: 'regular',
+        type: HMSPeerType.REGULAR,
       },
       '2': {
         id: '2',
@@ -111,7 +111,7 @@ export const makeFakeStore = (): HMSStore => {
         metadata: '{"hello":"world"}',
         groups: [],
         isHandRaised: false,
-        type: 'regular',
+        type: HMSPeerType.REGULAR,
       },
       '3': {
         id: '3',
@@ -123,16 +123,16 @@ export const makeFakeStore = (): HMSStore => {
         auxiliaryTracks: [],
         groups: [],
         isHandRaised: false,
-        type: 'regular',
+        type: HMSPeerType.REGULAR,
       },
     },
     tracks: {
-      '101': makeTrack('101', 'video', 'regular', '1'),
-      '102': makeTrack('102', 'audio', 'regular', '1'),
-      '103': makeTrack('103', 'video', 'regular', '2'),
-      '104': makeTrack('104', 'audio', 'regular', '2'),
+      '101': makeTrack('101', 'video', HMSPeerType.REGULAR, '1'),
+      '102': makeTrack('102', 'audio', HMSPeerType.REGULAR, '1'),
+      '103': makeTrack('103', 'video', HMSPeerType.REGULAR, '2'),
+      '104': makeTrack('104', 'audio', HMSPeerType.REGULAR, '2'),
       '105': makeTrack('105', 'video', 'screen', '2'),
-      '106': makeTrack('106', 'audio', 'regular', '2'),
+      '106': makeTrack('106', 'audio', HMSPeerType.REGULAR, '2'),
       '107': makeTrack('107', 'audio', 'screen', '2'),
     },
     playlist: {

packages/hms-video-store/src/test/fixtures.ts

@@ -1,3 +1,4 @@
+import { HMSPeerType } from '../interfaces';
 import { HMSAudioTrack, HMSPeer, HMSTrackType, HMSVideoTrack } from '../';
 
 let counter = 100;
@@ -20,6 +21,6 @@ export const makeFakePeer = (): HMSPeer => {
     videoTrack: '',
     groups: [],
     isHandRaised: false,
-    type: 'regular',
+    type: HMSPeerType.REGULAR,
   };
 };

packages/react-icons/src/CallIcon.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgCallIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M18.646 21c-.07 0-.14 0-.217-.008a16.19 16.19 0 0 1-7.039-2.504 15.955 15.955 0 0 1-4.883-4.883A16.178 16.178 0 0 1 4.01 6.55a2.303 2.303 0 0 1 .597-1.79A2.356 2.356 0 0 1 6.327 4h2.327c.542 0 1.1.194 1.535.566.426.364.705.876.783 1.434a9.36 9.36 0 0 0 .504 2.015c.155.42.193.869.093 1.303-.094.434-.31.837-.62 1.147l-.559.558a11.714 11.714 0 0 0 3.558 3.558l.559-.558a2.253 2.253 0 0 1 1.155-.62 2.333 2.333 0 0 1 1.302.093c.643.24 1.326.411 2.008.504a2.324 2.324 0 0 1 2.007 2.349v2.318a2.311 2.311 0 0 1-.752 1.72c-.24.218-.519.388-.829.489a2.284 2.284 0 0 1-.752.124ZM8.67 5.55H6.33a.724.724 0 0 0-.31.07c-.102.039-.195.1-.264.178a.634.634 0 0 0-.163.28.874.874 0 0 0-.039.317 14.713 14.713 0 0 0 2.256 6.372 14.474 14.474 0 0 0 4.418 4.419 14.66 14.66 0 0 0 6.357 2.264.832.832 0 0 0 .302-.04.853.853 0 0 0 .28-.162.632.632 0 0 0 .186-.264.75.75 0 0 0 .061-.317v-2.341a.752.752 0 0 0-.186-.52.75.75 0 0 0-.48-.263c-.79-.101-1.581-.303-2.341-.582a.759.759 0 0 0-.434-.03.763.763 0 0 0-.388.209l-.977.984a.775.775 0 0 1-.93.124 13.263 13.263 0 0 1-4.946-4.938c-.162-.325-.116-.705.132-.953l.985-.985c.1-.1.17-.232.201-.38a.754.754 0 0 0-.03-.434 10.75 10.75 0 0 1-.59-2.349.776.776 0 0 0-.256-.473.792.792 0 0 0-.504-.186Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgCallIcon;

packages/react-icons/src/index.ts

@@ -44,6 +44,7 @@ export { default as BuildingIcon } from './BuildingIcon';
 export { default as CalculatorIcon } from './CalculatorIcon';
 export { default as CalculatorIconsIcon } from './CalculatorIconsIcon';
 export { default as CalendarIcon } from './CalendarIcon';
+export { default as CallIcon } from './CallIcon';
 export { default as CameraFlipIcon } from './CameraFlipIcon';
 export { default as CardIcon } from './CardIcon';
 export { default as CardWithCvcIcon } from './CardWithCvcIcon';

packages/roomkit-react/src/Avatar/Avatar.tsx

@@ -47,14 +47,14 @@ type Props = VariantProps<typeof StyledAvatar> &
   };
 
 export const Avatar: React.FC<Props> = ({ name, css, ...props }) => {
-  const { initials } = getAvatarBg(name);
-  let { color } = getAvatarBg(name);
+  const info = getAvatarBg(name);
+  let { color } = info;
   if (!name) {
     color = '#7E47EB';
   }
   return (
     <StyledAvatar css={{ bg: color, ...css }} {...props}>
-      {initials || <PersonIcon height={40} width={40} />}
+      {info.initials || <PersonIcon height={40} width={40} />}
     </StyledAvatar>
   );
 };

packages/roomkit-react/src/Avatar/getAvatarBg.ts

@@ -2,13 +2,17 @@ const getInitials = (name: string | undefined) => {
   if (!name) {
     return undefined;
   } else {
-    return name
-      .trim()
-      .match(/(^\S\S?|\b\S)?/g)
-      ?.join('')
-      ?.match(/(^\S|\S$)?/g)
-      ?.join('')
-      .toUpperCase();
+    return (
+      name
+        .trim()
+        // remove non chars/digits
+        .replace(/[^a-zA-Z0-9]/g, '')
+        .match(/(^\S\S?|\b\S)?/g)
+        ?.join('')
+        ?.match(/(^\S|\S$)?/g)
+        ?.join('')
+        .toUpperCase()
+    );
   }
 };
 

packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
-import { selectScreenShareByPeerID, selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
-import { PinIcon, ShareScreenIcon, SpotlightIcon } from '@100mslive/react-icons';
+import {
+  HMSPeerType,
+  selectPeerTypeByID,
+  selectScreenShareByPeerID,
+  selectSessionStore,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { CallIcon, PinIcon, ShareScreenIcon, SpotlightIcon } from '@100mslive/react-icons';
 import { Flex, styled, Text, textEllipsis } from '../../..';
 import { ConnectionIndicator } from './ConnectionIndicator';
 import { SESSION_STORE_KEY } from '../../common/constants';
@@ -20,12 +26,18 @@ const TileConnection = ({
 }) => {
   const spotlighted = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
   const isPeerScreenSharing = !!useHMSStore(selectScreenShareByPeerID(peerId));
+  const peerType = useHMSStore(selectPeerTypeByID(peerId));
   return (
     <Wrapper>
       {!hideLabel ? (
         <>
           {name ? (
             <Flex align="center">
+              {peerType === HMSPeerType.SIP && (
+                <IconWrapper>
+                  <CallIcon width="15" height="15" />
+                </IconWrapper>
+              )}
               {isPeerScreenSharing && (
                 <IconWrapper>
                   <ShareScreenIcon width="15" height="15" />