@100mslive/roomkit-react 0.2.7-alpha.1 → 0.2.7-alpha.3

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.7-alpha.1",
+  "version": "0.2.7-alpha.3",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,12 +82,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.7-alpha.1",
+    "@100mslive/hls-player": "0.2.7-alpha.3",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.12.7-alpha.1",
-    "@100mslive/react-icons": "0.9.7-alpha.1",
-    "@100mslive/react-sdk": "0.9.7-alpha.1",
-    "@100mslive/types-prebuilt": "0.12.6",
+    "@100mslive/hms-virtual-background": "1.12.7-alpha.3",
+    "@100mslive/react-icons": "0.9.7-alpha.3",
+    "@100mslive/react-sdk": "0.9.7-alpha.3",
+    "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -121,5 +121,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "d9ed012d59612c39bc68dc427b5749405e4eeb38"
+  "gitHead": "696d255e5bbde485a185ef420c2f00fefdb85426"
 }

package/src/Prebuilt/App.tsx

@@ -26,6 +26,7 @@ import { PreviewScreen } from './components/Preview/PreviewScreen';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
 import { VBHandler } from './components/VirtualBackground/VBHandler';
+import { Sheet } from './layouts/Sheet';
 import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
 import { DialogContainerProvider } from '../context/DialogContext';
 import { Box } from '../Layout';
@@ -293,6 +294,7 @@ function AppRoutes({
         <ToastContainer />
         <Notifications />
         <MwebLandscapePrompt />
+        <Sheet />
         <BackSwipe />
         {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />

package/src/Prebuilt/common/constants.ts

@@ -46,6 +46,7 @@ export const APP_DATA = {
   disableNotifications: 'disableNotifications',
   pollState: 'pollState',
   background: 'background',
+  sheet: 'sheet',
 };
 
 export const UI_SETTINGS = {
@@ -64,6 +65,11 @@ export const SIDE_PANE_OPTIONS = {
   STREAMING: 'STREAMING',
   POLLS: 'POLLS',
   VB: 'VB',
+  ROOM_DETAILS: 'ROOM_DETAILS',
+};
+
+export const SHEET_OPTIONS = {
+  ROOM_DETAILS: 'ROOM_DETAILS',
 };
 
 export const POLL_STATE = {

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

@@ -54,6 +54,7 @@ const initialAppData = {
   },
   [APP_DATA.chatDraft]: '',
   [APP_DATA.sidePane]: '',
+  [APP_DATA.sheet]: '',
   [APP_DATA.hlsStarted]: false,
   [APP_DATA.rtmpStarted]: false,
   [APP_DATA.recordingStarted]: false,

package/src/Prebuilt/components/AppData/useSheet.ts

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { APP_DATA } from '../../common/constants';
+
+export const useIsSheetTypeOpen = (sheetType: string) => {
+  if (!sheetType) {
+    throw Error('Pass one of the sheet options');
+  }
+  return useHMSStore(selectAppData(APP_DATA.sheet)) === sheetType;
+};
+
+export const useSheetState = () => {
+  const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
+  return sheet;
+};
+
+export const useSheetToggle = (sheetType: string) => {
+  const hmsActions = useHMSActions();
+  const vanillaStore = useHMSVanillaStore();
+  const toggleSheet = useCallback(() => {
+    const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sheet)) === sheetType;
+    hmsActions.setAppData(APP_DATA.sheet, !isOpen ? sheetType : '');
+  }, [vanillaStore, hmsActions, sheetType]);
+  return toggleSheet;
+};
+
+export const useSheetReset = () => {
+  const hmsActions = useHMSActions();
+  const resetSheet = useCallback(() => {
+    hmsActions.setAppData(APP_DATA.sheet, '');
+  }, [hmsActions]);
+  return resetSheet;
+};

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -90,7 +90,7 @@ export const usePinnedTrack = () => {
 
 export const useSubscribedNotifications = notificationKey => {
   const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));
-  return notificationPreference || {};
+  return notificationPreference;
 };
 
 export const useIsNotificationDisabled = () => {

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -6,6 +6,7 @@ import {
   selectIsLocalAudioPluginPresent,
   selectLocalAudioTrackID,
   selectLocalVideoTrackID,
+  selectRoom,
   selectRoomState,
   selectVideoTrackByID,
   useAVToggle,
@@ -99,6 +100,7 @@ const NoiseCancellation = () => {
   const [active, setActive] = useState(isPluginAdded);
   const [inProgress, setInProgress] = useState(false);
   const actions = useHMSActions();
+  const room = useHMSStore(selectRoom);
 
   useEffect(() => {
     (async () => {
@@ -113,37 +115,40 @@ const NoiseCancellation = () => {
     })();
   }, [actions, active, isPluginAdded]);
 
-  if (!plugin.isSupported() || !localPeerAudioTrackID) {
+  if (!plugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
     return null;
   }
 
   return (
-    <Dropdown.Item
-      css={{
-        p: '$4 $8',
-        h: '$15',
-        fontSize: '$xs',
-        justifyContent: 'space-between',
-      }}
-      onClick={e => {
-        e.preventDefault();
-        setActive(value => !value);
-      }}
-    >
-      <Text css={{ display: 'flex', alignItems: 'center', gap: '$2', fontSize: '$xs', '& svg': { size: '$8' } }}>
-        <AudioLevelIcon />
-        Reduce Noise
-      </Text>
-      <Switch
-        id="noise_cancellation"
-        checked={active}
-        disabled={inProgress}
-        onClick={e => e.stopPropagation()}
-        onCheckedChange={value => {
-          setActive(value);
+    <>
+      <Dropdown.Item
+        css={{
+          p: '$4 $8',
+          h: '$15',
+          fontSize: '$xs',
+          justifyContent: 'space-between',
         }}
-      />
-    </Dropdown.Item>
+        onClick={e => {
+          e.preventDefault();
+          setActive(value => !value);
+        }}
+      >
+        <Text css={{ display: 'flex', alignItems: 'center', gap: '$2', fontSize: '$xs', '& svg': { size: '$8' } }}>
+          <AudioLevelIcon />
+          Reduce Noise
+        </Text>
+        <Switch
+          id="noise_cancellation"
+          checked={active}
+          disabled={inProgress}
+          onClick={e => e.stopPropagation()}
+          onCheckedChange={value => {
+            setActive(value);
+          }}
+        />
+      </Dropdown.Item>
+      <Dropdown.ItemSeparator css={{ mx: 0 }} />
+    </>
   );
 };
 
@@ -252,7 +257,6 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
           )}
           <Dropdown.ItemSeparator css={{ mx: 0 }} />
           <NoiseCancellation />
-          <Dropdown.ItemSeparator css={{ mx: 0 }} />
           <AudioSettings onClick={() => setShowSettings(true)} />
         </IconButtonWithOptions>
       ) : null}

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

@@ -219,7 +219,6 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               placeholder={message_placeholder}
               ref={inputRef}
               required
-              autoFocus={!isMobile}
               onKeyPress={async event => {
                 if (event.key === 'Enter') {
                   if (!event.shiftKey) {

package/src/Prebuilt/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { config as cssConfig, Flex } from '../../..';
 // @ts-ignore: No implicit any
 import { Logo, SpeakerTag } from './HeaderComponents';
 // @ts-ignore: No implicit any
+import { RoomDetailsHeader } from './RoomDetailsHeader';
 import { LiveStatus, RecordingPauseStatus, RecordingStatus, StreamActions } from './StreamActions';
 // @ts-ignore: No implicit any
 import { AudioActions, CamaraFlipActions } from './common';
@@ -20,6 +21,7 @@ export const Header = () => {
     <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
       <Flex align="center" gap="2" css={{ position: 'absolute', left: '$10' }}>
         <Logo />
+        <RoomDetailsHeader />
         <SpeakerTag />
         {isMobile && (
           <Flex align="center" css={{ gap: '$4' }}>

package/src/Prebuilt/components/Header/RoomDetailsHeader.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { ChevronRightIcon } from '@100mslive/react-icons';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useSheetToggle } from '../AppData/useSheet';
+// @ts-ignore
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const RoomDetailsHeader = () => {
+  const { title, description } = useRoomLayoutHeader();
+  const isMobile = useMedia(cssConfig.media.md);
+  const clipLength = 80;
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+
+  if ((!title && !description) || (isMobile && !title)) {
+    return null;
+  }
+
+  return (
+    <Flex direction={isMobile ? 'row' : 'column'} css={{ ml: '$8', alignItems: isMobile ? 'center' : 'start' }}>
+      <Text variant="sm" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
+        {title}
+      </Text>
+      {!isMobile && (
+        <Flex align="end" css={{ color: '$on_surface_high' }}>
+          <Text variant="xs" css={{ c: '$on_surface_medium' }}>
+            {description.slice(0, clipLength)}
+          </Text>
+          {description.length > clipLength ? (
+            <span
+              style={{ fontWeight: '600', fontSize: '12px', cursor: 'pointer', lineHeight: '1rem' }}
+              onClick={toggleDetailsPane}
+            >
+              &nbsp;...more
+            </span>
+          ) : null}
+        </Flex>
+      )}
+      {isMobile && description ? (
+        <Flex css={{ color: '$on_surface_medium' }}>
+          <ChevronRightIcon height={16} width={16} onClick={toggleDetailsSheet} />
+        </Flex>
+      ) : null}
+    </Flex>
+  );
+};

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

@@ -17,6 +17,7 @@ import {
   HamburgerMenuIcon,
   HandIcon,
   HandRaiseSlashedIcon,
+  InfoIcon,
   PeopleIcon,
   QuizActiveIcon,
   QuizIcon,
@@ -41,6 +42,8 @@ import { ActionTile } from '../ActionTile';
 import { ChangeNameModal } from '../ChangeNameModal';
 // @ts-ignore: No implicit any
 import { MuteAllModal } from '../MuteAllModal';
+import { useRoomLayoutHeader } from '../../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useSheetToggle } from '../../AppData/useSheet';
 // @ts-ignore: No implicit any
 import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
 // @ts-ignore: No implicit Any
@@ -53,7 +56,7 @@ import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
-import { SIDE_PANE_OPTIONS } from '../../../common/constants';
+import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -93,7 +96,8 @@ export const MwebOptions = ({
   const { toggleAudio, toggleVideo } = useAVToggle();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  // const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const { title, description } = useRoomLayoutHeader();
+  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -291,6 +295,18 @@ export const MwebOptions = ({
                 </ActionTile.Title>
               </ActionTile.Root>
             ) : null}
+
+            {title || description ? (
+              <ActionTile.Root
+                onClick={() => {
+                  setOpenOptionsSheet(false);
+                  toggleDetailsSheet();
+                }}
+              >
+                <InfoIcon />
+                <ActionTile.Title>About Session</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
           </Box>
         </Sheet.Content>
       </Sheet.Root>

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

@@ -13,13 +13,14 @@ import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useSubscribedNotifications } from '../AppData/useUISettings';
+import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
 export const HandRaisedNotifications = () => {
   const notification = useHMSNotifications(HMSNotificationTypes.HAND_RAISE_CHANGED);
   const roomState = useHMSStore(selectRoomState);
   const vanillaStore = useHMSVanillaStore();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
-  const subscribedNotifications = useSubscribedNotifications();
+  const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
 
   useEffect(() => {
     if (!notification?.data) {
@@ -27,12 +28,7 @@ export const HandRaisedNotifications = () => {
     }
 
     // Don't show toast message in case of local peer.
-    if (
-      roomState !== HMSRoomState.Connected ||
-      notification.data.isLocal ||
-      !on_stage_exp ||
-      !subscribedNotifications.METADATA_UPDATED
-    ) {
+    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp || !isSubscribing) {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
@@ -40,7 +36,7 @@ export const HandRaisedNotifications = () => {
       ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
       console.debug('Metadata updated', notification.data);
     }
-  }, [notification, on_stage_exp, roomState, subscribedNotifications.METADATA_UPDATED, vanillaStore]);
+  }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);
 
   return null;
 };

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

@@ -4,9 +4,11 @@ import {
   HMSNotificationTypes,
   HMSRoleChangeRequest,
   HMSRoomState,
+  selectIsLocalScreenShared,
   selectLocalPeerID,
   selectPeerNameByID,
   selectRoomState,
+  useAwayNotifications,
   useCustomEvent,
   useHMSNotifications,
   useHMSStore,
@@ -14,7 +16,7 @@ import {
 } from '@100mslive/react-sdk';
 import { GroupIcon } from '@100mslive/react-icons';
 import { Box, Button } from '../../..';
-import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
+import { useRoomLayout, useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
@@ -39,13 +41,16 @@ const pollToastKey: Record<string, string> = {};
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
   const notification = useHMSNotifications();
-  const subscribedNotifications = useSubscribedNotifications();
+  const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const screenProps = useRoomLayoutConferencingScreen();
   const vanillaStore = useHMSVanillaStore();
   const togglePollView = usePollViewToggle();
+  const { showNotification } = useAwayNotifications();
+  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
+  const logoURL = useRoomLayout()?.logo?.url;
 
   const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
@@ -165,6 +170,14 @@ export function Notifications() {
           delete pollToastKey[notification?.data.id];
         }
         break;
+      case HMSNotificationTypes.NEW_MESSAGE:
+        if (amIScreenSharing) {
+          showNotification(`New message from ${notification.data.senderName}`, {
+            body: notification.data.message,
+            icon: logoURL,
+          });
+        }
+        break;
       default:
         break;
     }

package/src/Prebuilt/components/Polls/common/utils.ts

@@ -1,16 +1,22 @@
-export const getFormattedTime = (milliseconds: number | undefined) => {
+export const getFormattedTime = (milliseconds: number | undefined, precise = true) => {
   if (!milliseconds) return '-';
 
   const totalSeconds = milliseconds / 1000;
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = precise ? totalSeconds % 60 : Math.floor(totalSeconds % 60);
 
-  let formattedSeconds = '';
-  if (Number.isInteger(seconds) || minutes) {
-    formattedSeconds = seconds.toFixed(0);
-  } else {
-    formattedSeconds = seconds.toFixed(1);
+  let formattedTime = '';
+  if (hours) {
+    formattedTime += `${hours}h `;
   }
+  if (minutes || hours) {
+    formattedTime += `${minutes}m `;
+  }
+  if (!precise && (hours || minutes)) {
+    return formattedTime;
+  }
+  formattedTime += `${seconds}s`;
 
-  return `${minutes ? `${minutes}m ` : ''}${formattedSeconds}s`;
+  return formattedTime;
 };

package/src/Prebuilt/components/RoomDetails/Duration.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { getFormattedTime } from '../Polls/common/utils';
+
+export const Duration = ({ timestamp }: { timestamp: Date }) => {
+  const [elapsedTime, setElapsedTime] = useState(getFormattedTime(Date.now() - timestamp.getTime(), false));
+
+  useEffect(() => {
+    const timerAdded = setInterval(() => {
+      setElapsedTime(getFormattedTime(Date.now() - timestamp.getTime(), false));
+    }, 1000);
+
+    return () => {
+      clearInterval(timerAdded);
+    };
+  }, [timestamp]);
+
+  return (
+    <Flex css={{ color: '$on_surface_medium' }}>
+      <Text variant="xs" css={{ color: 'inherit' }}>
+        Started {elapsedTime} ago
+      </Text>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { CrossIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { RoomDetailsRow } from './RoomDetailsRow';
+import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const RoomDetailsPane = () => {
+  const { title, description, details } = useRoomLayoutHeader();
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  return (
+    <Box css={{ flex: '1 1 0' }}>
+      <Flex justify="between" align="center" css={{ w: '100%' }}>
+        <Text variant="h6">{title}</Text>
+        <Flex
+          onClick={toggleDetailsPane}
+          css={{ color: '$on_surface_high', cursor: 'pointer', '&:hover': { opacity: '0.8' } }}
+        >
+          <CrossIcon />
+        </Flex>
+      </Flex>
+
+      <RoomDetailsRow details={details} />
+
+      <Box css={{ mt: '$10' }}>
+        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>Description</Text>
+        <Text variant="sm" css={{ c: '$on_surface_medium' }}>
+          {description}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { Duration } from './Duration';
+
+export const RoomDetailsRow = ({ details }: { details: (string | Date)[] }) => {
+  return (
+    <Flex align="center" css={{ w: '100%' }}>
+      {details.map((detail, index) => (
+        <React.Fragment key={detail.toString()}>
+          {index > 0 && <Box css={{ h: '$2', w: '$2', r: '$round', bg: '$on_surface_medium', m: '0 $2' }} />}
+          {typeof detail !== 'string' ? (
+            <Duration timestamp={detail} />
+          ) : (
+            <Text variant="xs" css={{ c: '$on_surface_medium' }}>
+              {detail}
+            </Text>
+          )}
+        </React.Fragment>
+      ))}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { CrossIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Text } from '../../../Text';
+// @ts-ignore
+import { Logo } from '../Header/HeaderComponents';
+import { RoomDetailsRow } from './RoomDetailsRow';
+import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useIsSheetTypeOpen, useSheetToggle } from '../AppData/useSheet';
+import { SHEET_OPTIONS } from '../../common/constants';
+
+export const RoomDetailsSheet = () => {
+  const { title, description, details } = useRoomLayoutHeader();
+  const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  const showRoomDetailsSheet = useIsSheetTypeOpen(SHEET_OPTIONS.ROOM_DETAILS);
+  return (
+    <Sheet.Root open={showRoomDetailsSheet} onOpenChange={toggleSheet}>
+      <Sheet.Content css={{ py: '$8', pb: '$12' }}>
+        <Flex
+          justify="between"
+          align="center"
+          css={{ w: '100%', borderBottom: '1px solid $border_bright', pb: '$4', mb: '$4', px: '$8' }}
+        >
+          <Text css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>Description</Text>
+          <Sheet.Close css={{ color: '$on_surface_high' }}>
+            <CrossIcon />
+          </Sheet.Close>
+        </Flex>
+        <Flex align="center" css={{ w: '100%', gap: '$4', pb: '$8', px: '$8' }}>
+          <Logo />
+          <Box>
+            <Text variant="sm" css={{ c: '$on_secondary_high', fontWeight: '$semiBold' }}>
+              {title}
+            </Text>
+            <RoomDetailsRow details={details} />
+          </Box>
+        </Flex>
+        <Text variant="sm" css={{ color: '$on_surface_medium', px: '$8' }}>
+          {description}
+        </Text>
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+};

package/src/Prebuilt/components/ScreenShareToggle.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { selectIsAllowedToPublish, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
+import { selectIsAllowedToPublish, useAwayNotifications, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
 import { ShareScreenIcon } from '@100mslive/react-icons';
 import { ShareScreenOptions } from './pdfAnnotator/shareScreenOptions';
 import { Box, Flex } from '../../Layout';
@@ -14,6 +14,7 @@ export const ScreenshareToggle = ({ css = {} }) => {
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
 
   const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare();
+  const { requestPermission } = useAwayNotifications();
   const isVideoScreenshare = amIScreenSharing && !!video;
   if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
     return null;
@@ -28,8 +29,9 @@ export const ScreenshareToggle = ({ css = {} }) => {
           active={!isVideoScreenshare}
           css={css}
           disabled={isAudioOnly}
-          onClick={() => {
-            toggleScreenShare();
+          onClick={async () => {
+            await toggleScreenShare();
+            await requestPermission();
           }}
         >
           <Tooltip title={`${!isVideoScreenshare ? 'Start' : 'Stop'} screen sharing`}>

package/src/Prebuilt/layouts/Sheet.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
+import { RoomDetailsSheet } from '../components/RoomDetails/RoomDetailsSheet';
+import { Box } from '../../Layout';
+import { APP_DATA, SHEET_OPTIONS } from '../common/constants';
+
+export const Sheet = () => {
+  const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
+  let ViewComponent;
+  if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
+    ViewComponent = <RoomDetailsSheet />;
+  }
+  return <Box>{ViewComponent}</Box>;
+};