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

package/dist/{conference-FJJQ4TXX.js → conference-MPZNWHV5.js}

@@ -1,6 +1,6 @@
 import {
   ActionTile
-} from "./chunk-ZKE2N5LH.js";
+} from "./chunk-UXBTLGWY.js";
 import {
   APP_DATA,
   Accordion,
@@ -84,7 +84,7 @@ import {
   useUrlToEmbed,
   useUserPreferences,
   useWaitingViewerRole
-} from "./chunk-WVGGQZK4.js";
+} from "./chunk-6JF3GAOH.js";
 import {
   Box,
   Flex,
@@ -103,7 +103,7 @@ import {
   slideLeftAndFade,
   styled,
   textEllipsis
-} from "./chunk-KBVIZGYW.js";
+} from "./chunk-KAJJ56J4.js";
 
 // src/Prebuilt/components/conference.jsx
 import React62, { useEffect as useEffect25, useRef as useRef14, useState as useState35 } from "react";
@@ -335,7 +335,8 @@ var LeaveSessionContent = ({
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
 var DesktopLeaveRoom = ({
   leaveRoom,
-  screenType
+  screenType,
+  endRoom
 }) => {
   const [open, setOpen] = useState2(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState2(false);
@@ -343,12 +344,12 @@ var DesktopLeaveRoom = ({
   const isConnected = useHMSStore2(selectIsConnectedToRoom2);
   const permissions = useHMSStore2(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
-  const showStream = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn;
+  const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: "LeaveRoom" });
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(Fragment2, null, permissions.hlsStreaming ? /* @__PURE__ */ React6.createElement(Flex, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(Fragment2, null, screenType !== "hls_live_streaming" && ((permissions == null ? void 0 : permissions.hlsStreaming) || (permissions == null ? void 0 : permissions.endRoom)) ? /* @__PURE__ */ React6.createElement(Flex, null, /* @__PURE__ */ React6.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -358,11 +359,7 @@ var DesktopLeaveRoom = ({
         borderBottomRightRadius: 0
       },
       onClick: () => {
-        if (screenType === "hls_live_streaming") {
-          setShowLeaveRoomAlert(true);
-        } else {
-          leaveRoom({ endstream: false });
-        }
+        leaveRoom({ endstream: false });
       }
     },
     /* @__PURE__ */ React6.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React6.createElement(Box, null, /* @__PURE__ */ React6.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
@@ -400,7 +397,7 @@ var DesktopLeaveRoom = ({
         css: { p: 0 }
       }
     )
-  ), isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React6.createElement(
+  ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React6.createElement(
     Dropdown.Item,
     {
       css: {
@@ -443,7 +440,7 @@ var DesktopLeaveRoom = ({
     EndSessionContent,
     {
       setShowEndStreamAlert,
-      leaveRoom,
+      leaveRoom: isStreamingOn ? leaveRoom : endRoom,
       isStreamingOn,
       isModal: true
     }
@@ -456,7 +453,8 @@ import { selectIsConnectedToRoom as selectIsConnectedToRoom3, selectPermissions
 import { ExitIcon as ExitIcon2, StopIcon as StopIcon2 } from "@100mslive/react-icons";
 var MwebLeaveRoom = ({
   leaveRoom,
-  screenType
+  screenType,
+  endRoom
 }) => {
   const [open, setOpen] = useState3(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState3(false);
@@ -464,12 +462,12 @@ var MwebLeaveRoom = ({
   const isConnected = useHMSStore3(selectIsConnectedToRoom3);
   const permissions = useHMSStore3(selectPermissions2);
   const { isStreamingOn } = useRecordingStreaming2();
-  const showStream = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn;
+  const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
   useDropdownList({ open, name: "LeaveRoom" });
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(Fragment3, null, (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React7.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(Fragment3, null, screenType !== "hls_live_streaming" ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React7.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React7.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -491,7 +489,7 @@ var MwebLeaveRoom = ({
       onClick: () => leaveRoom({ endstream: false }),
       css: { pt: 0, mt: "$10", color: "$on_surface_low", "&:hover": { color: "$on_surface_high" } }
     }
-  ), isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(
+  ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(
     LeaveCard,
     {
       title: showStream ? "End Stream" : "End Session",
@@ -523,7 +521,7 @@ var MwebLeaveRoom = ({
     EndSessionContent,
     {
       setShowEndStreamAlert,
-      leaveRoom,
+      leaveRoom: isStreamingOn ? leaveRoom : endRoom,
       isStreamingOn
     }
   ))), screenType === "hls_live_streaming" ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))) : null);
@@ -555,6 +553,10 @@ var LeaveRoom = ({ screenType }) => {
       ToastManager.addToast({ title: "Error in stopping the stream", type: "error" });
     }
   });
+  const endRoom = () => {
+    hmsActions.endRoom(false, "End Room");
+    redirectToLeave();
+  };
   const leaveRoom = (_0) => __async(void 0, [_0], function* ({ endstream = false }) {
     if (endstream || hlsState.running && peersWithStreamingRights.length === 1) {
       yield stopStream();
@@ -565,7 +567,7 @@ var LeaveRoom = ({ screenType }) => {
   if (!permissions || !isConnected) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ React8.createElement(MwebLeaveRoom, { leaveRoom, screenType }) : /* @__PURE__ */ React8.createElement(DesktopLeaveRoom, { leaveRoom, screenType });
+  return isMobile ? /* @__PURE__ */ React8.createElement(MwebLeaveRoom, { leaveRoom, screenType, endRoom }) : /* @__PURE__ */ React8.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom });
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
@@ -2821,7 +2823,7 @@ var RoleAccordion = ({
     return null;
   }
   const height = ROW_HEIGHT * peerList.length;
-  return /* @__PURE__ */ React34.createElement(Flex, { direction: "column", css: { flexGrow: 1, "&:hover .role_actions": { visibility: "visible" } }, ref }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React34.createElement(Flex, { direction: "column", css: { "&:hover .role_actions": { visibility: "visible" } }, ref }, /* @__PURE__ */ React34.createElement(
     Accordion.Root,
     {
       type: "single",
@@ -2942,10 +2944,11 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
       direction: "column",
       css: {
         gap: "$8",
-        maxHeight: "100%",
         overflowY: "auto",
         overflowX: "hidden",
-        pr: "$3"
+        pr: "$10",
+        mr: "-$10",
+        flex: "1 1 0"
       }
     },
     /* @__PURE__ */ React35.createElement(
@@ -3105,7 +3108,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
     {
       align: "center",
       css: {
-        p: isMobile ? "$0 $6" : "$2 0",
+        p: isMobile ? "0" : "$2 0",
         mb: "$2",
         position: "relative",
         color: "$on_surface_medium",
@@ -3134,7 +3137,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
 };
 
 // src/Prebuilt/components/Footer/Footer.tsx
-var VirtualBackground = React36.lazy(() => import("./VirtualBackground-37FXUPYO.js"));
+var VirtualBackground = React36.lazy(() => import("./VirtualBackground-6EP3X7MO.js"));
 var Footer2 = ({
   screenType,
   elements
@@ -3160,7 +3163,7 @@ var Footer2 = ({
           gap: "$10",
           position: "relative",
           // To prevent it from showing over the sidepane if chat type is not overlay
-          zIndex: isOverlayChat ? 20 : 1
+          zIndex: isOverlayChat && isChatOpen ? 20 : 1
         }
       }
     },
@@ -3842,11 +3845,6 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState24(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const label = getVideoTileLabel({
-    peerName: peer.name,
-    isLocal: false,
-    track
-  });
   const fullscreenRef = useRef7(null);
   const [fullscreen, setFullscreen] = useState24(false);
   const isFullscreen = useFullscreen2(fullscreenRef, fullscreen, {
@@ -3860,6 +3858,11 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
   if (!peer) {
     return null;
   }
+  const label = getVideoTileLabel({
+    peerName: peer == null ? void 0 : peer.name,
+    isLocal: false,
+    track
+  });
   return /* @__PURE__ */ React47.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React47.createElement(
     StyledVideoTile.Container,
     {
@@ -3884,7 +3887,16 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
       }
     ) : null,
     /* @__PURE__ */ React47.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-    isMouseHovered && !(peer == null ? void 0 : peer.isLocal) ? /* @__PURE__ */ React47.createElement(TileMenu_default, { isScreenshare: true, peerID: peer == null ? void 0 : peer.id, audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id }) : null
+    isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React47.createElement(
+      TileMenu_default,
+      {
+        isScreenshare: true,
+        peerID: peer.id,
+        audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
+        videoTrackID: track == null ? void 0 : track.id,
+        enableSpotlightingPeer: false
+      }
+    ) : null
   ));
 };
 var ScreenshareTile = React47.memo(Tile);
@@ -4250,11 +4262,12 @@ var PDFEmbedComponent = () => {
 
 // src/Prebuilt/layouts/SidePane.tsx
 import React58 from "react";
-import { useMedia as useMedia14 } from "react-use";
+import { useMedia as useMedia15 } from "react-use";
 import { selectAppData as selectAppData3, selectVideoTrackByPeerID, useHMSStore as useHMSStore33 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SidePaneTabs.tsx
 import React55, { useEffect as useEffect21, useState as useState32 } from "react";
+import { useMedia as useMedia14 } from "react-use";
 import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore30 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
 
@@ -4683,6 +4696,7 @@ var useEmojiPickerStyles = (showing) => {
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
+            top: 0.25rem;
             background-color: var(--hms-ui-colors-surface_bright);
             margin-top: 0.5rem;
           }
@@ -4912,8 +4926,8 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
     )
   ) : null;
 };
-var Chat = ({ screenType, hideControls = false }) => {
-  var _a, _b, _c;
+var Chat = ({ screenType }) => {
+  var _a, _b;
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -4966,12 +4980,10 @@ var Chat = ({ screenType, hideControls = false }) => {
       direction: "column",
       css: {
         size: "100%",
-        gap: "$4",
-        marginTop: hideControls && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? "$17" : "0",
-        transition: "margin 0.3s ease-in-out"
+        gap: "$4"
       }
     },
-    isMobile && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay) ? null : /* @__PURE__ */ React54.createElement(React54.Fragment, null, ((_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.allow_pinning_messages) ? /* @__PURE__ */ React54.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
+    isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? null : /* @__PURE__ */ React54.createElement(React54.Fragment, null, ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages) ? /* @__PURE__ */ React54.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
     /* @__PURE__ */ React54.createElement(
       ChatBody,
       {
@@ -5058,6 +5070,7 @@ var tabTriggerCSS = {
   justifyContent: "center"
 };
 var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+  var _a;
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
@@ -5067,6 +5080,9 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
   const showChat = !!(elements == null ? void 0 : elements.chat);
   const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
   const hideTabs = !(showChat && showParticipants);
+  const isMobile = useMedia14(config.media.md);
+  const isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   useEffect21(() => {
     if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
       setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
@@ -5076,16 +5092,21 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
       resetSidePane();
     }
   }, [showChat, activeTab, showParticipants, resetSidePane]);
+  useEffect21(() => {
+    setActiveTab(active);
+  }, [active]);
   return /* @__PURE__ */ React55.createElement(
     Flex,
     {
       direction: "column",
       css: {
         color: "$on_primary_high",
-        h: "100%"
+        h: "100%",
+        marginTop: hideControls && isOverlayChat ? "$17" : "0",
+        transition: "margin 0.3s ease-in-out"
       }
     },
-    hideTabs ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : `Participants (${peerCount})`), showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType, hideControls }) : /* @__PURE__ */ React55.createElement(ParticipantList, null)) : /* @__PURE__ */ React55.createElement(
+    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(React55.Fragment, null, hideTabs ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : `Participants (${peerCount})`), showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(ParticipantList, null)) : /* @__PURE__ */ React55.createElement(
       Tabs.Root,
       {
         value: activeTab,
@@ -5119,12 +5140,12 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         ")"
       )),
       /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(ParticipantList, null)),
-      /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(Chat, { screenType, hideControls }))
-    ),
-    /* @__PURE__ */ React55.createElement(
+      /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(Chat, { screenType }))
+    )),
+    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React55.createElement(
       IconButton,
       {
-        css: { position: "absolute", right: "$10", top: "$11" },
+        css: { position: "absolute", right: "$10", top: "$11", "@md": { top: "$8", right: "$8" } },
         onClick: (e) => {
           e.stopPropagation();
           if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
@@ -5356,7 +5377,7 @@ var SidePane = ({
   hideControls = false
 }) => {
   var _a, _b;
-  const isMobile = useMedia14(config.media.md);
+  const isMobile = useMedia15(config.media.md);
   const sidepane = useHMSStore33(selectAppData3(APP_DATA.sidePane));
   const activeScreensharePeerId = useHMSStore33(selectAppData3(APP_DATA.activeScreensharePeerId));
   const trackId = (_a = useHMSStore33(selectVideoTrackByPeerID(activeScreensharePeerId))) == null ? void 0 : _a.id;
@@ -5487,7 +5508,7 @@ var WaitingView = React59.memo(() => {
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React60.lazy(() => import("./HLSView-QMU5JK7U.js"));
+var HLSView = React60.lazy(() => import("./HLSView-HL455FYH.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
@@ -5564,7 +5585,6 @@ var RoleChangeRequestModal = () => {
       return;
     }
     (() => __async(void 0, null, function* () {
-      yield updateMetaData({ prevRole: currentRole });
       yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
     }))();
   }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
@@ -5601,7 +5621,7 @@ var RoleChangeRequestModal = () => {
       body,
       onAction: () => __async(void 0, null, function* () {
         yield hmsActions.acceptChangeRole(roleChangeRequest);
-        yield updateMetaData({ isHandRaised: false });
+        yield updateMetaData({ isHandRaised: false, prevRole: currentRole });
       }),
       actionText: "Accept"
     }
@@ -5642,6 +5662,7 @@ var Conference = () => {
       setHideControls((value) => !value);
     }
   };
+  const autoRoomJoined = useRef14(isPreviewScreenEnabled);
   useEffect25(() => {
     let timeout = null;
     dropdownListRef.current = dropdownList || [];
@@ -5673,7 +5694,7 @@ var Conference = () => {
     }
   }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
   useEffect25(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) {
+    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting && !autoRoomJoined.current) {
       hmsActions.join({
         userName,
         authToken: authTokenInAppData,
@@ -5684,6 +5705,7 @@ var Conference = () => {
           speakerAutoSelectionBlacklist: ["Yeti Stereo Microphone"]
         }
       }).catch(console.error);
+      autoRoomJoined.current = true;
     }
   }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
   useEffect25(() => {
@@ -5759,4 +5781,4 @@ var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-FJJQ4TXX.js.map
+//# sourceMappingURL=conference-MPZNWHV5.js.map