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

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

@@ -16,9 +16,11 @@ import { useDropdownList } from '../hooks/useDropdownList';
 export const DesktopLeaveRoom = ({
   leaveRoom,
   screenType,
+  endRoom,
 }: {
   leaveRoom: (args: { endstream: boolean }) => void;
   screenType: keyof ConferencingScreen;
+  endRoom: () => void;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -26,7 +28,7 @@ export const DesktopLeaveRoom = ({
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
-  const showStream = permissions?.hlsStreaming && isStreamingOn;
+  const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
 
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
@@ -36,7 +38,7 @@ export const DesktopLeaveRoom = ({
 
   return (
     <Fragment>
-      {permissions.hlsStreaming ? (
+      {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? (
         <Flex>
           <LeaveIconButton
             key="LeaveRoom"
@@ -46,11 +48,7 @@ export const DesktopLeaveRoom = ({
               borderBottomRightRadius: 0,
             }}
             onClick={() => {
-              if (screenType === 'hls_live_streaming') {
-                setShowLeaveRoomAlert(true);
-              } else {
-                leaveRoom({ endstream: false });
-              }
+              leaveRoom({ endstream: false });
             }}
           >
             <Tooltip title="Leave Room">
@@ -94,7 +92,7 @@ export const DesktopLeaveRoom = ({
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
-              {isStreamingOn && permissions?.hlsStreaming ? (
+              {permissions?.endRoom || permissions?.hlsStreaming ? (
                 <Dropdown.Item
                   css={{
                     bg: '$alert_error_dim',
@@ -148,7 +146,7 @@ export const DesktopLeaveRoom = ({
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <EndSessionContent
               setShowEndStreamAlert={setShowEndStreamAlert}
-              leaveRoom={leaveRoom}
+              leaveRoom={isStreamingOn ? leaveRoom : endRoom}
               isStreamingOn={isStreamingOn}
               isModal
             />

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

@@ -46,6 +46,10 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
       ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
     }
   };
+  const endRoom = () => {
+    hmsActions.endRoom(false, 'End Room');
+    redirectToLeave();
+  };
 
   const leaveRoom = async ({ endstream = false }) => {
     if (endstream || (hlsState.running && peersWithStreamingRights.length === 1)) {
@@ -59,8 +63,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
     return null;
   }
   return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
+    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
   ) : (
-    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
+    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
   );
 };

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

@@ -17,9 +17,11 @@ import { useDropdownList } from '../hooks/useDropdownList';
 export const MwebLeaveRoom = ({
   leaveRoom,
   screenType,
+  endRoom,
 }: {
   leaveRoom: (args: { endstream: boolean }) => void;
   screenType: keyof ConferencingScreen;
+  endRoom: () => void;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -27,8 +29,8 @@ export const MwebLeaveRoom = ({
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
+  const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
 
-  const showStream = permissions?.hlsStreaming && isStreamingOn;
   useDropdownList({ open, name: 'LeaveRoom' });
 
   if (!permissions || !isConnected) {
@@ -37,7 +39,7 @@ export const MwebLeaveRoom = ({
 
   return (
     <Fragment>
-      {permissions?.hlsStreaming ? (
+      {screenType !== 'hls_live_streaming' ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
@@ -67,7 +69,8 @@ export const MwebLeaveRoom = ({
               onClick={() => leaveRoom({ endstream: false })}
               css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
-            {isStreamingOn && permissions?.hlsStreaming ? (
+
+            {permissions?.endRoom || permissions?.hlsStreaming ? (
               <LeaveCard
                 title={showStream ? 'End Stream' : 'End Session'}
                 subtitle={`The will end the ${
@@ -108,7 +111,7 @@ export const MwebLeaveRoom = ({
         <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
           <EndSessionContent
             setShowEndStreamAlert={setShowEndStreamAlert}
-            leaveRoom={leaveRoom}
+            leaveRoom={isStreamingOn ? leaveRoom : endRoom}
             isStreamingOn={isStreamingOn}
           />
         </Sheet.Content>

package/src/Prebuilt/components/Notifications/Notifications.jsx

@@ -4,12 +4,10 @@ import { useNavigate, useParams } from 'react-router-dom';
 import {
   HMSNotificationTypes,
   HMSRoomState,
-  selectPeerMetadata,
   selectRoomState,
   useCustomEvent,
   useHMSNotifications,
   useHMSStore,
-  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { Button } from '../../../';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
@@ -31,7 +29,6 @@ export function Notifications() {
   const notification = useHMSNotifications();
   const navigate = useNavigate();
   const params = useParams();
-  const vanillaStore = useHMSVanillaStore();
   const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
@@ -113,13 +110,10 @@ export function Notifications() {
         break;
       case HMSNotificationTypes.ROLE_UPDATED: {
         if (notification.data?.isLocal) {
-          const { prevRole } = vanillaStore.getState(selectPeerMetadata(notification.data?.id));
-          if (prevRole !== notification?.data?.roleName) {
-            ToastManager.addToast({
-              title: `You are now a ${notification.data.roleName}`,
-            });
-            updateRoomLayoutForRole(notification.data.roleName);
-          }
+          ToastManager.addToast({
+            title: `You are now a ${notification.data.roleName}`,
+          });
+          updateRoomLayoutForRole(notification.data.roleName);
         }
         break;
       }

package/src/Prebuilt/components/RoleChangeRequestModal.tsx

@@ -28,7 +28,6 @@ export const RoleChangeRequestModal = () => {
       return;
     }
     (async () => {
-      await updateMetaData({ prevRole: currentRole });
       await hmsActions.preview({ asRole: roleChangeRequest.role.name });
     })();
   }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
@@ -71,7 +70,7 @@ export const RoleChangeRequestModal = () => {
       body={body}
       onAction={async () => {
         await hmsActions.acceptChangeRole(roleChangeRequest);
-        await updateMetaData({ isHandRaised: false });
+        await updateMetaData({ isHandRaised: false, prevRole: currentRole });
       }}
       actionText="Accept"
     />

package/src/Prebuilt/components/ScreenshareTile.jsx

@@ -34,11 +34,6 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const label = getVideoTileLabel({
-    peerName: peer.name,
-    isLocal: false,
-    track,
-  });
   const fullscreenRef = useRef(null);
   // fullscreen is for desired state
   const [fullscreen, setFullscreen] = useState(false);
@@ -56,6 +51,13 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   if (!peer) {
     return null;
   }
+
+  const label = getVideoTileLabel({
+    peerName: peer?.name,
+    isLocal: false,
+    track,
+  });
+
   return (
     <StyledVideoTile.Root css={{ width, height, p: 0, minHeight: 0 }} data-testid="screenshare_tile">
       <StyledVideoTile.Container
@@ -85,8 +87,14 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
           />
         ) : null}
         <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
-        {isMouseHovered && !peer?.isLocal ? (
-          <TileMenu isScreenshare peerID={peer?.id} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
+        {isMouseHovered && !peer.isLocal ? (
+          <TileMenu
+            isScreenshare
+            peerID={peer.id}
+            audioTrackID={audioTrack?.id}
+            videoTrackID={track?.id}
+            enableSpotlightingPeer={false}
+          />
         ) : null}
       </StyledVideoTile.Container>
     </StyledVideoTile.Root>

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
 import { CrossIcon } from '@100mslive/react-icons';
@@ -6,10 +7,11 @@ import { CrossIcon } from '@100mslive/react-icons';
 import { Chat } from './Chat/Chat';
 // @ts-ignore: No implicit Any
 import { ParticipantList } from './Footer/ParticipantList';
-import { Flex, IconButton, Tabs, Text } from '../..';
+import { config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
+// @ts-ignore: No implicit Any
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
-import { useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
+import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../common/constants';
 
@@ -36,6 +38,9 @@ export const SidePaneTabs = React.memo<{
   const showChat = !!elements?.chat;
   const showParticipants = !!elements?.participant_list;
   const hideTabs = !(showChat && showParticipants);
+  const isMobile = useMedia(cssConfig.media.md);
+  const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
 
   useEffect(() => {
     if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
@@ -47,74 +52,90 @@ export const SidePaneTabs = React.memo<{
     }
   }, [showChat, activeTab, showParticipants, resetSidePane]);
 
+  useEffect(() => {
+    setActiveTab(active);
+  }, [active]);
+
   return (
     <Flex
       direction="column"
       css={{
         color: '$on_primary_high',
         h: '100%',
+        marginTop: hideControls && isOverlayChat ? '$17' : '0',
+        transition: 'margin 0.3s ease-in-out',
       }}
     >
-      {hideTabs ? (
-        <>
-          <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
-            {showChat ? 'Chat' : `Participants (${peerCount})`}
-          </Text>
-          {showChat ? <Chat screenType={screenType} hideControls={hideControls} /> : <ParticipantList />}
-        </>
+      {isOverlayChat && isChatOpen && showChat ? (
+        <Chat screenType={screenType} />
       ) : (
-        <Tabs.Root
-          value={activeTab}
-          onValueChange={setActiveTab}
-          css={{
-            flexDirection: 'column',
-            size: '100%',
-          }}
-        >
-          <Tabs.List css={{ w: 'calc(100% - $12)', p: '$2', borderRadius: '$2', bg: '$surface_default' }}>
-            <Tabs.Trigger
-              value={SIDE_PANE_OPTIONS.CHAT}
-              onClick={toggleChat}
-              css={{
-                ...tabTriggerCSS,
-                color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
-              }}
-            >
-              Chat
-            </Tabs.Trigger>
-            <Tabs.Trigger
-              value={SIDE_PANE_OPTIONS.PARTICIPANTS}
-              onClick={toggleParticipants}
+        <>
+          {hideTabs ? (
+            <>
+              <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
+                {showChat ? 'Chat' : `Participants (${peerCount})`}
+              </Text>
+
+              {showChat ? <Chat screenType={screenType} /> : <ParticipantList />}
+            </>
+          ) : (
+            <Tabs.Root
+              value={activeTab}
+              onValueChange={setActiveTab}
               css={{
-                ...tabTriggerCSS,
-                color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
+                flexDirection: 'column',
+                size: '100%',
               }}
             >
-              Participants ({peerCount})
-            </Tabs.Trigger>
-          </Tabs.List>
-          <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
-            <ParticipantList />
-          </Tabs.Content>
-          <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
-            <Chat screenType={screenType} hideControls={hideControls} />
-          </Tabs.Content>
-        </Tabs.Root>
+              <Tabs.List css={{ w: 'calc(100% - $12)', p: '$2', borderRadius: '$2', bg: '$surface_default' }}>
+                <Tabs.Trigger
+                  value={SIDE_PANE_OPTIONS.CHAT}
+                  onClick={toggleChat}
+                  css={{
+                    ...tabTriggerCSS,
+                    color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
+                  }}
+                >
+                  Chat
+                </Tabs.Trigger>
+                <Tabs.Trigger
+                  value={SIDE_PANE_OPTIONS.PARTICIPANTS}
+                  onClick={toggleParticipants}
+                  css={{
+                    ...tabTriggerCSS,
+                    color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
+                  }}
+                >
+                  Participants ({peerCount})
+                </Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
+                <ParticipantList />
+              </Tabs.Content>
+              <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
+                <Chat screenType={screenType} />
+              </Tabs.Content>
+            </Tabs.Root>
+          )}
+        </>
+      )}
+
+      {isOverlayChat && isChatOpen ? null : (
+        <IconButton
+          css={{ position: 'absolute', right: '$10', top: '$11', '@md': { top: '$8', right: '$8' } }}
+          onClick={e => {
+            e.stopPropagation();
+            if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+              toggleChat();
+            } else {
+              toggleParticipants();
+            }
+          }}
+          data-testid="close_chat"
+        >
+          <CrossIcon />
+        </IconButton>
       )}
-      <IconButton
-        css={{ position: 'absolute', right: '$10', top: '$11' }}
-        onClick={e => {
-          e.stopPropagation();
-          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-            toggleChat();
-          } else {
-            toggleParticipants();
-          }
-        }}
-        data-testid="close_chat"
-      >
-        <CrossIcon />
-      </IconButton>
     </Flex>
   );
 });

package/src/Prebuilt/components/conference.jsx

@@ -49,6 +49,7 @@ const Conference = () => {
       setHideControls(value => !value);
     }
   };
+  const autoRoomJoined = useRef(isPreviewScreenEnabled);
 
   useEffect(() => {
     let timeout = null;
@@ -84,7 +85,13 @@ const Conference = () => {
   }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
 
   useEffect(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) {
+    if (
+      authTokenInAppData &&
+      !isConnectedToRoom &&
+      !isPreviewScreenEnabled &&
+      roomState !== HMSRoomState.Connecting &&
+      !autoRoomJoined.current
+    ) {
       hmsActions
         .join({
           userName,
@@ -97,6 +104,7 @@ const Conference = () => {
           },
         })
         .catch(console.error);
+      autoRoomJoined.current = true;
     }
   }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);