@100mslive/roomkit-react 0.3.16-alpha.0 → 0.3.16-alpha.10

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.16-alpha.0",
+  "version": "0.3.16-alpha.10",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.16-alpha.0",
+    "@100mslive/hls-player": "0.3.16-alpha.10",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.16-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.6-alpha.0",
-    "@100mslive/react-icons": "0.10.16-alpha.0",
-    "@100mslive/react-sdk": "0.10.16-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.16-alpha.10",
+    "@100mslive/hms-whiteboard": "0.0.6-alpha.10",
+    "@100mslive/react-icons": "0.10.16-alpha.10",
+    "@100mslive/react-sdk": "0.10.16-alpha.10",
     "@100mslive/types-prebuilt": "0.12.9",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -104,6 +104,7 @@
     "eventemitter2": "^6.4.9",
     "lodash.merge": "^4.6.2",
     "qrcode.react": "^3.1.0",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-intersection-observer": "^9.4.3",
     "react-swipeable": "^7.0.1",
@@ -116,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "0ba6be8700e395887440d6ab1cadaacb6a769e98"
+  "gitHead": "770babc8f2199bd6c5b112472a97b3a93a10f6c4"
 }

package/src/Prebuilt/App.tsx

@@ -23,6 +23,7 @@ import { KeyboardHandler } from './components/Input/KeyboardInputManager';
 import { LeaveScreen } from './components/LeaveScreen';
 import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
 import { Notifications } from './components/Notifications';
+import { PIPProvider } from './components/PIP/PIPProvider';
 import { PreviewScreen } from './components/Preview/PreviewScreen';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
@@ -218,24 +219,26 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                         },
                       }}
                     >
-                      <Init />
-                      <DialogContainerProvider dialogContainerSelector={containerSelector}>
-                        <Box
-                          className={DEFAULT_PORTAL_CONTAINER.slice(1)} // Skips the '.' in the selector
-                          css={{
-                            bg: '$background_dim',
-                            size: '100%',
-                            lineHeight: '1.5',
-                            '-webkit-text-size-adjust': '100%',
-                            position: 'relative',
-                          }}
-                        >
-                          <AppRoutes
-                            authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint}
-                            defaultAuthToken={authToken}
-                          />
-                        </Box>
-                      </DialogContainerProvider>
+                      <PIPProvider>
+                        <Init />
+                        <DialogContainerProvider dialogContainerSelector={containerSelector}>
+                          <Box
+                            className={DEFAULT_PORTAL_CONTAINER.slice(1)} // Skips the '.' in the selector
+                            css={{
+                              bg: '$background_dim',
+                              size: '100%',
+                              lineHeight: '1.5',
+                              '-webkit-text-size-adjust': '100%',
+                              position: 'relative',
+                            }}
+                          >
+                            <AppRoutes
+                              authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint}
+                              defaultAuthToken={authToken}
+                            />
+                          </Box>
+                        </DialogContainerProvider>
+                      </PIPProvider>
                     </HMSThemeProvider>
                   );
                 }}

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -44,7 +44,7 @@ import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/
 // @ts-ignore: No implicit Any
 import { useIsNoiseCancellationEnabled, useSetNoiseCancellation } from './AppData/useUISettings';
 import { useAudioOutputTest } from './hooks/useAudioOutputTest';
-import { isMacOS, TEST_AUDIO_URL } from '../common/constants';
+import { isAndroid, isIOS, isMacOS, TEST_AUDIO_URL } from '../common/constants';
 
 const krispPlugin = new HMSKrispPlugin();
 // const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%' };
@@ -109,6 +109,9 @@ const useNoiseCancellationWithPlugin = () => {
     if (inProgress) {
       return;
     }
+    if (!krispPlugin.checkSupport().isSupported) {
+      throw Error('Krisp plugin is not supported');
+    }
     setInProgress(true);
     if (enabled) {
       await actions.addPluginToAudioTrack(krispPlugin);
@@ -281,13 +284,17 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
   useEffect(() => {
     (async () => {
       if (isNoiseCancellationEnabled && !isKrispPluginAdded && !inProgress && localPeer?.audioTrack) {
-        await setNoiseCancellationWithPlugin(true);
-        ToastManager.addToast({
-          title: `Noise Reduction Enabled`,
-          variant: 'standard',
-          duration: 2000,
-          icon: <AudioLevelIcon />,
-        });
+        try {
+          await setNoiseCancellationWithPlugin(true);
+          ToastManager.addToast({
+            title: `Noise Reduction Enabled`,
+            variant: 'standard',
+            duration: 2000,
+            icon: <AudioLevelIcon />,
+          });
+        } catch (error) {
+          console.error(error);
+        }
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -365,7 +372,7 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
         </IconButtonWithOptions>
       ) : null}
 
-      {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview ? (
+      {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview && (isIOS || isAndroid) ? (
         <Tooltip title="Switch Camera" key="switchCamera">
           <IconButton
             onClick={async () => {

package/src/Prebuilt/components/Chat/ChatBody.tsx

@@ -28,18 +28,9 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 // @ts-ignore: No implicit Any
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { usePinnedBy } from '../hooks/usePinnedBy';
+import { formatTime } from './utils';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
-const formatTime = (date: Date) => {
-  if (!(date instanceof Date)) {
-    return '';
-  }
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-  const suffix = hours > 11 ? 'PM' : 'AM';
-  return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes} ${suffix}`;
-};
-
 const rowHeights: Record<number, { size: number; id: string }> = {};
 let listInstance: VariableSizeList | null = null; //eslint-disable-line
 function getRowHeight(index: number) {
@@ -109,7 +100,7 @@ const MessageTypeContainer = ({ left, right }: { left?: string; right?: string }
   );
 };
 
-const MessageType = ({
+export const MessageType = ({
   roles,
   hasCurrentUserSent,
   receiver,
@@ -172,7 +163,8 @@ const getMessageType = ({ roles, receiver }: { roles?: HMSRoleName[]; receiver?:
   }
   return receiver ? 'private' : '';
 };
-const SenderName = styled(Text, {
+
+export const SenderName = styled(Text, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -20,10 +20,9 @@ import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 // @ts-ignore: No implicit any
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 import { useDefaultChatSelection, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
+import { CHAT_MESSAGE_LIMIT } from './utils';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
-const CHAT_MESSAGE_LIMIT = 2000;
-
 const TextArea = styled('textarea', {
   width: '100%',
   bg: 'transparent',
@@ -76,7 +75,7 @@ function EmojiPicker({ onSelect }: { onSelect: (emoji: any) => void }) {
   );
 }
 
-export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => void; children: ReactNode }) => {
+export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => void; children?: ReactNode }) => {
   const hmsActions = useHMSActions();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();

package/src/Prebuilt/components/Chat/utils.ts

@@ -0,0 +1,11 @@
+export const formatTime = (date: Date) => {
+  if (!(date instanceof Date)) {
+    return '';
+  }
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const suffix = hours > 11 ? 'PM' : 'AM';
+  return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes} ${suffix}`;
+};
+
+export const CHAT_MESSAGE_LIMIT = 2000;

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,6 +6,7 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAwayNotifications,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -50,6 +51,7 @@ export const ConferenceScreen = () => {
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const { requestPermission } = useAwayNotifications();
 
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
@@ -99,10 +101,20 @@ export const ConferenceScreen = () => {
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
           },
         })
+        .then(() => requestPermission())
         .catch(console.error);
       autoRoomJoined.current = true;
     }
-  }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
+  }, [
+    authTokenInAppData,
+    endpoints?.init,
+    hmsActions,
+    isConnectedToRoom,
+    isPreviewScreenEnabled,
+    roomState,
+    userName,
+    requestPermission,
+  ]);
 
   useEffect(() => {
     onJoinFunc?.();

package/src/Prebuilt/components/Footer/ParticipantList.tsx

@@ -194,7 +194,6 @@ export const Participant = ({
         <ParticipantActions
           peerId={peer.id}
           peerType={peer.type}
-          isLocal={peer.id === localPeerId}
           role={peer.roleName}
           isHandRaisedAccordion={isHandRaisedAccordion}
         />
@@ -273,12 +272,10 @@ const ParticipantActions = React.memo(
     peerId,
     peerType,
     role,
-    isLocal,
     isHandRaisedAccordion,
   }: {
     peerId: string;
     role: string;
-    isLocal: boolean;
     isHandRaisedAccordion?: boolean;
     peerType: HMSPeerType;
   }) => {
@@ -331,7 +328,7 @@ const ParticipantActions = React.memo(
               </Flex>
             ) : null}
 
-            {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
+            {shouldShowMoreActions ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
           </>
         )}
       </Flex>

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -28,8 +28,11 @@ import { Checkbox, Dropdown, Flex, Switch, Text, Tooltip } from '../../../..';
 import IconButton from '../../../IconButton';
 // @ts-ignore: No implicit any
 import { PIP } from '../../PIP';
+import { PIPChat } from '../../PIP/PIPChat';
 // @ts-ignore: No implicit any
+import { PIPChatOption } from '../../PIP/PIPChatOption';
 import { PictureInPicture } from '../../PIP/PIPManager';
+import { PIPWindow } from '../../PIP/PIPWindow';
 // @ts-ignore: No implicit any
 import { RoleChangeModal } from '../../RoleChangeModal';
 // @ts-ignore: No implicit any
@@ -45,10 +48,14 @@ import { CaptionModal } from '../CaptionModal';
 import { FullScreenItem } from '../FullScreenItem';
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../../AppData/useSidepane';
+// @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useMyMetadata } from '../../hooks/useMetadata';
 // @ts-ignore: No implicit any
-import { APP_DATA, isMacOS } from '../../../common/constants';
+import { usePIPChat } from '../../PIP/usePIPChat';
+// @ts-ignore: No implicit any
+import { APP_DATA, isMacOS, SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -79,6 +86,10 @@ export const DesktopOptions = ({
   const isBRBEnabled = !!elements?.brb;
   const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
   const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
+  const { isSupported, pipWindow, requestPipWindow } = usePIPChat();
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const showPipChatOption = !!elements?.chat && isSupported;
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
 
@@ -98,6 +109,11 @@ export const DesktopOptions = ({
 
   return (
     <Fragment>
+      {isSupported && pipWindow ? (
+        <PIPWindow pipWindow={pipWindow}>
+          <PIPChat />
+        </PIPWindow>
+      ) : null}
       <Dropdown.Root
         open={openModals.has(MODALS.MORE_SETTINGS)}
         onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
@@ -168,13 +184,15 @@ export const DesktopOptions = ({
             </Dropdown.Item>
           ) : null}
 
+          <PIPChatOption
+            showPIPChat={showPipChatOption}
+            openChat={async () => {
+              isChatOpen && toggleChat();
+              await requestPipWindow(350, 500);
+            }}
+          />
           <FullScreenItem />
-          {/* {isAllowedToPublish.screen && isEmbedEnabled && (
-            <EmbedUrl setShowOpenUrl={() => updateState(MODALS.EMBED_URL, true)} />
-          )} */}
-
           <Dropdown.ItemSeparator css={{ mx: 0 }} />
-
           <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">
             <SettingsIcon />
             <Text variant="sm" css={{ ml: '$4' }}>

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -1,14 +1,19 @@
 import { useEffect } from 'react';
+import { useDebounce } from 'react-use';
 import {
   HMSNotificationTypes,
   HMSRoomState,
+  selectHandRaisedPeers,
   selectHasPeerHandRaised,
+  selectIsLocalScreenShared,
   selectPeerByID,
   selectRoomState,
+  useAwayNotifications,
   useHMSNotifications,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+import { useRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -22,6 +27,9 @@ export const HandRaisedNotifications = () => {
   const vanillaStore = useHMSVanillaStore();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
   const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
+  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
+  const { showNotification } = useAwayNotifications();
+  const logoURL = useRoomLayout()?.logo?.url;
 
   useEffect(() => {
     if (!notification?.data) {
@@ -32,6 +40,7 @@ export const HandRaisedNotifications = () => {
     if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
       return;
     }
+
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
     const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
     if (hasPeerHandRaised) {
@@ -41,5 +50,29 @@ export const HandRaisedNotifications = () => {
     }
   }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);
 
+  useDebounce(
+    () => {
+      if (!notification?.data) {
+        return;
+      }
+
+      // Don't show toast message in case of local peer.
+      if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
+        return;
+      }
+
+      const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+      const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
+      const handRaisedPeers = vanillaStore.getState(selectHandRaisedPeers);
+      if (amIScreenSharing && hasPeerHandRaised) {
+        const title = `${peer?.name} ${
+          handRaisedPeers.length > 1 ? `and ${handRaisedPeers.length - 1} others` : ''
+        } raised hand`;
+        showNotification(title, { icon: logoURL });
+      }
+    },
+    1000,
+    [isSubscribing, notification, roomState, vanillaStore, amIScreenSharing],
+  );
   return null;
 };

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -35,6 +35,7 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { usePollViewToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
 import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
+import { usePIPWindow } from '../PIP/usePIPWindow';
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 const pollToastKey: Record<string, string> = {};
@@ -52,6 +53,7 @@ export function Notifications() {
   const { showNotification } = useAwayNotifications();
   const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
   const logoURL = useRoomLayout()?.logo?.url;
+  const { pipWindow } = usePIPWindow();
 
   const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
@@ -172,7 +174,7 @@ export function Notifications() {
         }
         break;
       case HMSNotificationTypes.NEW_MESSAGE:
-        if (amIScreenSharing && !notification.data?.ignored) {
+        if (amIScreenSharing && !notification.data?.ignored && !pipWindow) {
           showNotification(`New message from ${notification.data.senderName}`, {
             body: notification.data.message,
             icon: logoURL,