@100mslive/roomkit-react 0.1.6-alpha.0 → 0.1.6-alpha.2

package/src/Prebuilt/components/Leave/EndSessionContent.tsx

@@ -6,14 +6,12 @@ import { Text } from '../../../Text';
 
 export const EndSessionContent = ({
   setShowEndStreamAlert,
-  stopStream,
   leaveRoom,
   isModal = false,
   isStreamingOn = false,
 }: {
   setShowEndStreamAlert: (value: boolean) => void;
-  stopStream: () => Promise<void>;
-  leaveRoom: () => void;
+  leaveRoom: (args: { endstream: boolean }) => void;
   isModal?: boolean;
   isStreamingOn: boolean;
 }) => {
@@ -52,8 +50,7 @@ export const EndSessionContent = ({
           variant="danger"
           css={{ w: '100%' }}
           onClick={async () => {
-            await stopStream();
-            leaveRoom();
+            await leaveRoom({ endstream: true });
             setShowEndStreamAlert(false);
           }}
           id="stopStream"

package/src/Prebuilt/components/Leave/LeaveCard.tsx

@@ -10,7 +10,6 @@ export const LeaveCard = ({
   onClick,
   bg,
   titleColor,
-  subtitleColor,
   css = {},
 }: {
   icon: React.JSX.Element;
@@ -18,7 +17,6 @@ export const LeaveCard = ({
   subtitle: string;
   onClick: () => void;
   titleColor: string;
-  subtitleColor: string;
   bg: string;
   css?: CSS;
 }) => {
@@ -29,7 +27,7 @@ export const LeaveCard = ({
         <Text variant="lg" css={{ color: titleColor }}>
           {title}
         </Text>
-        <Text variant="sm" css={{ color: subtitleColor }}>
+        <Text variant="sm" css={{ c: 'inherit' }}>
           {subtitle}
         </Text>
       </Box>

package/src/Prebuilt/components/Leave/LeaveRoom.tsx

@@ -1,28 +1,40 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
-import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  HMSPeer,
+  HMSRole,
+  selectHLSState,
+  selectIsConnectedToRoom,
+  selectPeersByCondition,
+  selectPermissions,
+  selectRolesMap,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { config as cssConfig } from '../../../Theme';
 // @ts-ignore: No implicit Any
-import { useHMSPrebuiltContext } from '../../AppContext';
-// @ts-ignore: No implicit Any
-import { PictureInPicture } from '../PIP/PIPManager';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { DesktopLeaveRoom } from './DesktopLeaveRoom';
 import { MwebLeaveRoom } from './MwebLeaveRoom';
-import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
 
 export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
-  const navigate = useNavigate();
-  const params = useParams();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const isMobile = useMedia(cssConfig.media.md);
+  const rolesMap: Record<string, HMSRole> = useHMSStore(selectRolesMap);
+  const streamingPermissionRoles = Object.keys(rolesMap).filter(roleName => {
+    const roleObj = rolesMap[roleName];
+    return roleObj.permissions.hlsStreaming;
+  });
+  const peersWithStreamingRights = useHMSStore(
+    selectPeersByCondition((peer: HMSPeer) => streamingPermissionRoles.includes(peer.roleName || '')),
+  );
+  const hlsState = useHMSStore(selectHLSState);
   const hmsActions = useHMSActions();
-  const { onLeave } = useHMSPrebuiltContext();
-  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  const { redirectToLeave } = useRedirectToLeave();
 
   const stopStream = async () => {
     try {
@@ -35,29 +47,20 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
     }
   };
 
-  const redirectToLeavePage = () => {
-    const prefix = isLeaveScreenEnabled ? '/leave/' : '/';
-    if (params.role) {
-      navigate(prefix + params.roomId + '/' + params.role);
-    } else {
-      navigate(prefix + params.roomId);
+  const leaveRoom = async ({ endstream = false }) => {
+    if (endstream || (hlsState.running && peersWithStreamingRights.length === 1)) {
+      await stopStream();
     }
-    PictureInPicture.stop().catch(() => console.error('stopping pip'));
-    ToastManager.clearAllToast();
-    onLeave?.();
-  };
-
-  const leaveRoom = () => {
     hmsActions.leave();
-    redirectToLeavePage();
+    redirectToLeave();
   };
 
   if (!permissions || !isConnected) {
     return null;
   }
   return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} stopStream={stopStream} screenType={screenType} />
+    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
   ) : (
-    <DesktopLeaveRoom leaveRoom={leaveRoom} stopStream={stopStream} screenType={screenType} />
+    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
   );
 };

package/src/Prebuilt/components/Leave/LeaveSessionContent.tsx

@@ -10,7 +10,7 @@ export const LeaveSessionContent = ({
   isModal = false,
 }: {
   setShowLeaveRoomAlert: (value: boolean) => void;
-  leaveRoom: () => void;
+  leaveRoom: (args: { endstream: boolean }) => void;
   isModal?: boolean;
 }) => {
   return (
@@ -44,7 +44,13 @@ export const LeaveSessionContent = ({
         >
           Cancel
         </Button>
-        <Button variant="danger" css={{ w: '100%' }} onClick={leaveRoom} id="leaveRoom" data-testid="leave_room">
+        <Button
+          variant="danger"
+          css={{ w: '100%' }}
+          onClick={() => leaveRoom({ endstream: false })}
+          id="leaveRoom"
+          data-testid="leave_room"
+        >
           Leave Session
         </Button>
       </Flex>

package/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx

@@ -1,6 +1,8 @@
 import React, { Fragment, useState } from 'react';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
+// @ts-ignore: No implicit Any
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { ExitIcon, StopIcon } from '@100mslive/react-icons';
 import { Box } from '../../../Layout';
 import { Sheet } from '../../../Sheet';
@@ -14,11 +16,9 @@ import { useDropdownList } from '../hooks/useDropdownList';
 
 export const MwebLeaveRoom = ({
   leaveRoom,
-  stopStream,
   screenType,
 }: {
-  leaveRoom: () => void;
-  stopStream: () => Promise<void>;
+  leaveRoom: (args: { endstream: boolean }) => void;
   screenType: keyof ConferencingScreen;
 }) => {
   const [open, setOpen] = useState(false);
@@ -63,10 +63,9 @@ export const MwebLeaveRoom = ({
               } again.`}
               bg="$surface_default"
               titleColor="$on_surface_high"
-              subtitleColor="$on_surface_low"
               icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-              onClick={leaveRoom}
-              css={{ pt: 0, mt: '$10' }}
+              onClick={() => leaveRoom({ endstream: false })}
+              css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
             {isStreamingOn && permissions?.hlsStreaming ? (
               <LeaveCard
@@ -76,7 +75,7 @@ export const MwebLeaveRoom = ({
                 } for everyone. You can't undo this action.`}
                 bg="$alert_error_dim"
                 titleColor="$alert_error_brighter"
-                subtitleColor="$alert_error_bright"
+                css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
                 icon={<StopIcon height={24} width={24} />}
                 onClick={() => {
                   setOpen(false);
@@ -93,6 +92,8 @@ export const MwebLeaveRoom = ({
           onClick={() => {
             if (screenType === 'hls_live_streaming') {
               setShowLeaveRoomAlert(true);
+            } else {
+              leaveRoom({ endstream: false });
             }
           }}
         >
@@ -107,7 +108,6 @@ export const MwebLeaveRoom = ({
         <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
           <EndSessionContent
             setShowEndStreamAlert={setShowEndStreamAlert}
-            stopStream={stopStream}
             leaveRoom={leaveRoom}
             isStreamingOn={isStreamingOn}
           />

package/src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx

@@ -27,6 +27,7 @@ export const ChangeNameContent = ({
           color: '$on_surface_high',
           fontWeight: '$semiBold',
           display: 'flex',
+          pb: '$4',
           '@md': { px: '$8', borderBottom: '1px solid $border_default' },
         }}
       >
@@ -57,6 +58,9 @@ export const ChangeNameContent = ({
           onKeyDown={async e => {
             if (e.key === 'Enter' && currentName.trim().length > 0 && currentName !== localPeerName) {
               e.preventDefault();
+              if (isMobile) {
+                return;
+              }
               changeName();
             }
           }}

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

@@ -20,7 +20,7 @@ export const MoreSettings = ({
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
   return isMobile ? (
-    <MwebOptions elements={elements} streamType={screenType} />
+    <MwebOptions elements={elements} screenType={screenType} />
   ) : (
     <DesktopOptions elements={elements} screenType={screenType} />
   );

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

@@ -6,7 +6,7 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { BrbIcon, CheckIcon, DragHandleIcon, HandIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
+import { BrbIcon, CheckIcon, DragHandleIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
 // @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
@@ -58,7 +58,7 @@ export const DesktopOptions = ({
   const hmsActions = useHMSActions();
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const [openModals, setOpenModals] = useState(new Set());
-  const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
+  const { isBRBOn, toggleBRB } = useMyMetadata();
   const isPipOn = PictureInPicture.isOn();
   const isBRBEnabled = !!elements?.brb;
 
@@ -85,13 +85,13 @@ export const DesktopOptions = ({
         onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
         modal={false}
       >
-        <Dropdown.Trigger asChild data-testid="more_settings_btn">
-          <IconButton>
-            <Tooltip title="More options">
+        <Tooltip title="More options">
+          <Dropdown.Trigger asChild data-testid="more_settings_btn">
+            <IconButton>
               <DragHandleIcon />
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
+            </IconButton>
+          </Dropdown.Trigger>
+        </Tooltip>
 
         <Dropdown.Content
           sideOffset={5}
@@ -105,19 +105,7 @@ export const DesktopOptions = ({
             },
           }}
         >
-          {screenType !== 'hls_live_streaming' ? (
-            <Dropdown.Item onClick={toggleHandRaise} data-testid="raise_hand_btn">
-              <HandIcon />
-              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
-                Raise Hand
-              </Text>
-              <Flex justify="end" css={{ color: '$on_surface_high', flexGrow: '1' }}>
-                {isHandRaised ? <CheckIcon /> : null}
-              </Flex>
-            </Dropdown.Item>
-          ) : null}
-
-          {isBRBEnabled && screenType === 'hls_live_streaming' ? (
+          {isBRBEnabled && screenType !== 'hls_live_streaming' ? (
             <Dropdown.Item onClick={toggleBRB} data-testid="brb_btn">
               <BrbIcon />
               <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
@@ -129,8 +117,6 @@ export const DesktopOptions = ({
             </Dropdown.Item>
           ) : null}
 
-          {isBRBEnabled && screenType === 'hls_live_streaming' ? <Dropdown.ItemSeparator css={{ mx: '0' }} /> : null}
-
           {screenType !== 'hls_live_streaming' ? (
             <Dropdown.Item>
               <PIP

package/src/Prebuilt/components/MoreSettings/SplitComponents/{MwebOptions.jsx → MwebOptions.tsx}

@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
+import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import {
   selectIsConnectedToRoom,
   selectPeerCount,
@@ -8,20 +9,44 @@ import {
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
-import { CrossIcon, DragHandleIcon, EmojiIcon, PeopleIcon, RecordIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Box, Loading, Tooltip } from '../../../../';
+import {
+  BrbIcon,
+  CrossIcon,
+  DragHandleIcon,
+  EmojiIcon,
+  HandIcon,
+  HandRaiseSlashedIcon,
+  PeopleIcon,
+  RecordIcon,
+  SettingsIcon,
+} from '@100mslive/react-icons';
+import { Box, Loading, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
+// @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
+// @ts-ignore: No implicit any
 import { EmojiReaction } from '../../EmojiReaction';
+// @ts-ignore: No implicit any
 import { StopRecordingInSheet } from '../../Header/StreamActions';
+// @ts-ignore: No implicit any
 import SettingsModal from '../../Settings/SettingsModal';
+// @ts-ignore: No implicit any
 import { ToastManager } from '../../Toast/ToastManager';
-import { ActionTile } from '.././ActionTile';
-import { ChangeNameModal } from '.././ChangeNameModal';
-import { MuteAllModal } from '.././MuteAllModal';
+// @ts-ignore: No implicit any
+import { ActionTile } from '../ActionTile';
+// @ts-ignore: No implicit any
+import { ChangeNameModal } from '../ChangeNameModal';
+// @ts-ignore: No implicit any
+import { MuteAllModal } from '../MuteAllModal';
+// @ts-ignore: No implicit any
 import { useSidepaneToggle } from '../../AppData/useSidepane';
+// @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
+// @ts-ignore: No implicit any
+import { useMyMetadata } from '../../hooks/useMetadata';
+// @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
+// @ts-ignore: No implicit any
 import { SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 // const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
@@ -38,14 +63,18 @@ const MODALS = {
   EMBED_URL: 'embedUrl',
 };
 
-export const MwebOptions = ({ elements }) => {
+export const MwebOptions = ({
+  elements,
+  screenType,
+}: {
+  elements: DefaultConferencingScreen_Elements;
+  screenType: keyof ConferencingScreen;
+}) => {
   const hmsActions = useHMSActions();
   const permissions = useHMSStore(selectPermissions);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
-
   const [openModals, setOpenModals] = useState(new Set());
-
   const [openOptionsSheet, setOpenOptionsSheet] = useState(false);
   const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
   const [showEmojiCard, setShowEmojiCard] = useState(false);
@@ -54,11 +83,12 @@ export const MwebOptions = ({ elements }) => {
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
+  const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
   // const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
-  const updateState = (modalName, value) => {
+  const updateState = (modalName: string, value: boolean) => {
     setOpenModals(modals => {
       const copy = new Set(modals);
       if (value) {
@@ -75,13 +105,13 @@ export const MwebOptions = ({ elements }) => {
   return (
     <>
       <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
-        <Sheet.Trigger asChild data-testid="more_settings_btn">
-          <IconButton>
-            <Tooltip title="More options">
+        <Tooltip title="More options">
+          <Sheet.Trigger asChild data-testid="more_settings_btn">
+            <IconButton>
               <DragHandleIcon />
-            </Tooltip>
-          </IconButton>
-        </Sheet.Trigger>
+            </IconButton>
+          </Sheet.Trigger>
+        </Tooltip>
         <Sheet.Content css={{ bg: '$surface_dim', pb: '$14' }}>
           <Sheet.Title
             css={{
@@ -115,16 +145,31 @@ export const MwebOptions = ({ elements }) => {
               px: '$9',
             }}
           >
-            <ActionTile.Root
-              onClick={() => {
-                toggleParticipants();
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
-              <PeopleIcon />
-              <ActionTile.Title>Participants</ActionTile.Title>
-            </ActionTile.Root>
+            {elements?.participant_list && (
+              <ActionTile.Root
+                onClick={() => {
+                  toggleParticipants();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
+                <PeopleIcon />
+                <ActionTile.Title>Participants</ActionTile.Title>
+              </ActionTile.Root>
+            )}
+
+            {screenType !== 'hls_live_streaming' ? (
+              <ActionTile.Root
+                active={isHandRaised}
+                onClick={() => {
+                  toggleHandRaise();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
+                <ActionTile.Title>{isHandRaised ? 'Lower' : 'Raise'} Hand</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
 
             {/* {isVideoOn ? (
               <Suspense fallback="">
@@ -144,6 +189,19 @@ export const MwebOptions = ({ elements }) => {
               </ActionTile.Root>
             )}
 
+            {elements?.brb && (
+              <ActionTile.Root
+                active={isBRBOn}
+                onClick={() => {
+                  toggleBRB();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <BrbIcon />
+                <ActionTile.Title>Be Right Back</ActionTile.Title>
+              </ActionTile.Root>
+            )}
+
             <ActionTile.Root
               onClick={() => {
                 setOpenSettingsSheet(true);
@@ -174,6 +232,7 @@ export const MwebOptions = ({ elements }) => {
                       setOpenOptionsSheet(false);
                       setIsRecordingLoading(false);
                     } catch (error) {
+                      // @ts-ignore
                       if (error.message.includes('stream already running')) {
                         ToastManager.addToast({
                           title: 'Recording already running',
@@ -181,6 +240,7 @@ export const MwebOptions = ({ elements }) => {
                         });
                       } else {
                         ToastManager.addToast({
+                          // @ts-ignore
                           title: error.message,
                           variant: 'error',
                         });
@@ -206,13 +266,13 @@ export const MwebOptions = ({ elements }) => {
           </Box>
         </Sheet.Content>
       </Sheet.Root>
-      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} />
+      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} screenType={screenType} />
       {openModals.has(MODALS.MUTE_ALL) && (
-        <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} isMobile />
+        <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} isMobile />
       )}
       {openModals.has(MODALS.CHANGE_NAME) && (
         <ChangeNameModal
-          onOpenChange={value => updateState(MODALS.CHANGE_NAME, value)}
+          onOpenChange={(value: boolean) => updateState(MODALS.CHANGE_NAME, value)}
           openParentSheet={() => setOpenOptionsSheet(true)}
         />
       )}
@@ -248,6 +308,7 @@ export const MwebOptions = ({ elements }) => {
               setShowRecordingOn(false);
             } catch (error) {
               ToastManager.addToast({
+                // @ts-ignore
                 title: error.message,
                 variant: 'error',
               });