@100mslive/roomkit-react 0.1.14 → 0.1.16

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.14",
+  "version": "0.1.16",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,11 +76,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.23",
-    "@100mslive/hms-virtual-background": "1.11.23",
-    "@100mslive/react-icons": "0.8.23",
-    "@100mslive/react-sdk": "0.8.23",
-    "@100mslive/types-prebuilt": "0.12.4",
+    "@100mslive/hls-player": "0.1.25",
+    "@100mslive/hms-virtual-background": "1.11.25",
+    "@100mslive/react-icons": "0.8.25",
+    "@100mslive/react-sdk": "0.8.25",
+    "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "aed9a8922bbebf1015858ab5b4896acff5647c0a"
+  "gitHead": "096d50e1ffbeb9f2ec895b630952d2ad9694dfee"
 }

package/src/Prebuilt/AppStateContext.tsx

@@ -55,7 +55,7 @@ export const useAppStateManager = () => {
       setActiveState(PrebuiltStates.MEETING);
     } else if (
       prevRoomState &&
-      [HMSRoomState.Reconnecting, HMSRoomState.Connected].includes(prevRoomState) &&
+      [HMSRoomState.Reconnecting, HMSRoomState.Connected, HMSRoomState.Connecting].includes(prevRoomState) &&
       [HMSRoomState.Disconnecting, HMSRoomState.Disconnected].includes(roomState)
     ) {
       const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;

package/src/Prebuilt/common/PeersSorter.ts

@@ -17,6 +17,7 @@ class PeersSorter {
   }
 
   setPeersAndTilesPerPage = ({ peers, tilesPerPage }: { peers: HMSPeer[]; tilesPerPage: number }) => {
+    this.speaker = undefined;
     this.tilesPerPage = tilesPerPage;
     const peerIds = new Set(peers.map(peer => peer.id));
     // remove existing peers which are no longer provided
@@ -46,10 +47,13 @@ class PeersSorter {
     this.updateListeners();
     this.listeners.clear();
     this.storeUnsubscribe?.();
+    this.storeUnsubscribe = undefined;
+    this.speaker = undefined;
   };
 
   moveSpeakerToFront = (speaker?: HMSPeer) => {
     if (!speaker) {
+      this.maintainLruSize(this.tilesPerPage);
       this.updateListeners();
       return;
     }
@@ -59,19 +63,23 @@ class PeersSorter {
     }
     // delete to insert at beginning
     this.lruPeers.delete(speaker.id);
-    const lruPeerArray = Array.from(this.lruPeers);
-    while (lruPeerArray.length >= this.tilesPerPage && lruPeerArray.length) {
-      lruPeerArray.pop();
-    }
-    this.lruPeers = new Set([speaker.id, ...lruPeerArray]);
+    // - 1 as we are going to insert the new speaker
+    this.maintainLruSize(this.tilesPerPage - 1);
+    this.lruPeers = new Set([speaker.id, ...this.lruPeers]);
     this.updateListeners();
   };
 
   onDominantSpeakerChange = (speaker: HMSPeer | null) => {
-    if (speaker && speaker.id !== this?.speaker?.id) {
-      this.speaker = speaker;
-      this.moveSpeakerToFront(speaker);
+    // no speaker or is current speaker do nothing
+    if (!speaker || speaker.id === this.speaker?.id) {
+      return;
     }
+    // if the active speaker is not from the peers passed ignore
+    if (!this.peers.has(speaker.id)) {
+      return;
+    }
+    this.speaker = speaker;
+    this.moveSpeakerToFront(speaker);
   };
 
   updateListeners = () => {
@@ -89,6 +97,14 @@ class PeersSorter {
     });
     this.listeners.forEach(listener => listener?.(orderedPeers));
   };
+
+  private maintainLruSize = (size: number) => {
+    const lruPeerArray = Array.from(this.lruPeers);
+    while (lruPeerArray.length > size && lruPeerArray.length) {
+      lruPeerArray.pop();
+    }
+    this.lruPeers = new Set(lruPeerArray);
+  };
 }
 
 export default PeersSorter;

package/src/Prebuilt/common/constants.ts

@@ -17,7 +17,7 @@ export const RTMP_RECORD_DEFAULT_RESOLUTION = {
 export const EMOJI_REACTION_TYPE = 'EMOJI_REACTION';
 
 export const CHAT_SELECTOR = {
-  PEER_ID: 'peer_id',
+  PEER: 'peer',
   ROLE: 'role',
   EVERYONE: 'Everyone',
 };
@@ -33,7 +33,6 @@ export const APP_DATA = {
   waitingViewerRole: 'waitingViewerRole',
   subscribedNotifications: 'subscribedNotifications',
   logo: 'logo',
-  appLayout: 'appLayout',
   hlsStarted: 'hlsStarted',
   rtmpStarted: 'rtmpStarted',
   recordingStarted: 'recordingStarted',
@@ -111,6 +110,7 @@ export enum SESSION_STORE_KEY {
   CHAT_PEER_BLACKLIST = 'chatPeerBlacklist',
   CHAT_MESSAGE_BLACKLIST = 'chatMessageBlacklist',
   CHAT_STATE = 'chatState',
+  SHARED_LEADERBOARDS = 'sharedLeaderboards',
 }
 
 export enum INTERACTION_TYPE {
@@ -121,15 +121,15 @@ export enum INTERACTION_TYPE {
 export enum QUESTION_TYPE_TITLE {
   'single-choice' = 'Single Choice',
   'multiple-choice' = 'Multiple Choice',
-  // "short-answer": "Short Answer",
-  // "long-answer": "Long Answer",
+  'short-answer' = 'Short Answer',
+  'long-answer' = 'Long Answer',
 }
 
 export enum QUESTION_TYPE {
   SINGLE_CHOICE = 'single-choice',
   MULTIPLE_CHOICE = 'multiple-choice',
-  // SHORT_ANSWER: "short-answer",
-  // LONG_ANSWER: "long-answer",
+  SHORT_ANSWER = 'short-answer',
+  LONG_ANSWER = 'long-answer',
 }
 
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';

package/src/Prebuilt/common/hooks.ts

@@ -12,6 +12,7 @@ import {
 } from '@100mslive/react-sdk';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { CHAT_SELECTOR } from './constants';
 /**
  * Hook to execute a callback when alone in room(after a certain 5d of time)
  * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,
@@ -55,6 +56,21 @@ export const useFilteredRoles = () => {
   return elements?.chat?.roles_whitelist || [];
 };
 
+export const useDefaultChatSelection = () => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const roles = useFilteredRoles();
+  // default is everyone for public chat
+  if (elements?.chat?.public_chat_enabled) {
+    return CHAT_SELECTOR.EVERYONE;
+  }
+  // sending first role as default
+  if (roles.length > 0) {
+    return roles[0];
+  }
+  // sending empty
+  return '';
+};
+
 export const useShowStreamingUI = () => {
   const layout = useRoomLayout();
   const { join_form } = layout?.screens?.preview?.default?.elements || {};

package/src/Prebuilt/common/utils.js

@@ -137,3 +137,36 @@ export const calculateAvatarAndAttribBoxSize = (calculatedWidth, calculatedHeigh
 };
 
 export const isMobileUserAgent = /Mobi|Android|iPhone/i.test(navigator.userAgent);
+
+export const getPeerResponses = (questions, peerid, userid) => {
+  return questions.map(question =>
+    question.responses?.filter(
+      response =>
+        ((response && response.peer?.peerid === peerid) || response.peer?.userid === userid) && !response.skipped,
+    ),
+  );
+};
+
+export const getPeerParticipationSummary = (poll, localPeerID, localCustomerUserID) => {
+  let correctResponses = 0;
+  let score = 0;
+  const questions = poll.questions || [];
+  const peerResponses = getPeerResponses(questions, localPeerID, localCustomerUserID);
+  let totalResponses = peerResponses.length || 0;
+
+  peerResponses.forEach(peerResponse => {
+    if (!peerResponse?.[0]) {
+      return;
+    }
+    const isCorrect = checkCorrectAnswer(
+      questions[peerResponse[0].questionIndex - 1].answer,
+      peerResponse[0],
+      questions[peerResponse[0].questionIndex - 1].type,
+    );
+    if (isCorrect) {
+      score += questions[peerResponse[0].questionIndex - 1]?.weight || 0;
+      correctResponses++;
+    }
+  });
+  return { totalResponses, correctResponses, score };
+};

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -1,11 +1,8 @@
 import React, { useEffect } from 'react';
 import {
   HMSRoomState,
-  selectAvailableRoleNames,
   selectFullAppData,
   selectHLSState,
-  selectLocalPeerRoleName,
-  selectRolesMap,
   selectRoomState,
   selectRTMPState,
   useHMSActions,
@@ -13,8 +10,6 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 //@ts-ignore
-import { normalizeAppPolicyConfig } from '../init/initUtils';
-//@ts-ignore
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from './useSidepane';
@@ -49,7 +44,7 @@ const initialAppData = {
   [APP_DATA.chatOpen]: false,
   [APP_DATA.chatSelector]: {
     [CHAT_SELECTOR.ROLE]: '',
-    [CHAT_SELECTOR.PEER_ID]: '',
+    [CHAT_SELECTOR.PEER]: {},
   },
   [APP_DATA.chatDraft]: '',
   [APP_DATA.sidePane]: '',
@@ -73,9 +68,6 @@ const initialAppData = {
 export const AppData = React.memo(() => {
   const hmsActions = useHMSActions();
   const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
-  const roleNames = useHMSStore(selectAvailableRoleNames);
-  const rolesMap = useHMSStore(selectRolesMap);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const appData = useHMSStore(selectFullAppData);
 
   useEffect(() => {
@@ -109,13 +101,6 @@ export const AppData = React.memo(() => {
     hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);
   }, [preferences.subscribedNotifications, hmsActions]);
 
-  useEffect(() => {
-    if (localPeerRole) {
-      const config = normalizeAppPolicyConfig(roleNames, rolesMap);
-      hmsActions.setAppData(APP_DATA.appLayout, config[localPeerRole]);
-    }
-  }, [roleNames, rolesMap, localPeerRole, hmsActions]);
-
   return <ResetStreamingStart />;
 });
 

package/src/Prebuilt/components/Chat/Chat.jsx

@@ -1,13 +1,7 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeer, selectPeerByID, selectSessionStore } from '@100mslive/hms-video-store';
-import {
-  HMSNotificationTypes,
-  selectHMSMessagesCount,
-  useHMSActions,
-  useHMSNotifications,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+import { selectLocalPeer, selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
+import { selectHMSMessagesCount, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
 import { Flex } from '../../../Layout';
@@ -17,33 +11,18 @@ import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
 import { PinnedMessage } from './PinnedMessage';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
-import { useUnreadCount } from './useUnreadCount';
-import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
+import { SESSION_STORE_KEY } from '../../common/constants';
 
 export const Chat = () => {
   const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
-  const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
-  const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   const localPeer = useHMSStore(selectLocalPeer);
   const [isSelectorOpen] = useState(false);
   const listRef = useRef(null);
   const hmsActions = useHMSActions();
   const { removePinnedMessage } = useSetPinnedMessages();
   const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
-  const isPeerPresent = !!useHMSStore(selectPeerByID(selectedPeer));
 
-  useEffect(() => {
-    if (notification && notification.data && selectedPeer === notification.data.id) {
-      setPeerSelector('');
-      setRoleSelector('');
-    }
-    if (selectedPeer && !isPeerPresent) {
-      setPeerSelector('');
-    }
-  }, [notification, selectedPeer, setPeerSelector, setRoleSelector, isPeerPresent]);
   const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
   const blacklistedPeerIDSet = new Set(blacklistedPeerIDs);
   const isLocalPeerBlacklisted = blacklistedPeerIDSet.has(localPeer?.customerUserId);
@@ -97,17 +76,15 @@ export const Chat = () => {
 
       {isChatEnabled && !isLocalPeerBlacklisted ? (
         <ChatFooter onSend={() => scrollToBottom(1)} screenType={screenType}>
-          {!isSelectorOpen && !isScrolledToBottom && (
-            <NewMessageIndicator role={selectedRole} peerId={selectedPeer} scrollToBottom={scrollToBottom} />
-          )}
+          {!isSelectorOpen && !isScrolledToBottom && <NewMessageIndicator scrollToBottom={scrollToBottom} />}
         </ChatFooter>
       ) : null}
     </Flex>
   );
 };
 
-const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
-  const unreadCount = useUnreadCount({ role, peerId });
+const NewMessageIndicator = ({ scrollToBottom }) => {
+  const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
   if (!unreadCount) {
     return null;
   }
@@ -128,9 +105,8 @@ const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         }}
         icon
         css={{
-          p: '$4',
-          pl: '$8',
-          pr: '$6',
+          p: '$3 $4',
+          pl: '$6',
           '& > svg': { ml: '$4' },
           borderRadius: '$round',
           position: 'relative',
@@ -141,7 +117,7 @@ const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         }}
       >
         New {unreadCount === 1 ? 'message' : 'messages'}
-        <ChevronDownIcon />
+        <ChevronDownIcon height={16} width={16} />
       </Button>
     </Flex>
   );