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

package/package.json

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

package/src/Prebuilt/App.tsx

@@ -26,7 +26,6 @@ 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';
@@ -294,7 +293,6 @@ function AppRoutes({
         <ToastContainer />
         <Notifications />
         <MwebLandscapePrompt />
-        <Sheet />
         <BackSwipe />
         {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />

package/src/Prebuilt/common/constants.ts

@@ -46,7 +46,6 @@ export const APP_DATA = {
   disableNotifications: 'disableNotifications',
   pollState: 'pollState',
   background: 'background',
-  sheet: 'sheet',
 };
 
 export const UI_SETTINGS = {
@@ -65,11 +64,6 @@ 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 = {
@@ -98,11 +92,12 @@ export const HLS_TIMED_METADATA_DOC_URL =
 
 export const REMOTE_STOP_SCREENSHARE_TYPE = 'REMOTE_STOP_SCREENSHARE';
 
-export const isChrome = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'chrome';
-export const isFirefox = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'firefox';
-export const isSafari = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'safari';
+// mweb could have browser name as "Mobile Chrome" or "Mobile Firefox"
+export const isChrome = parsedUserAgent.getBrowser()?.name?.toLowerCase().includes('chrome');
+export const isFirefox = parsedUserAgent.getBrowser()?.name?.toLowerCase().includes('firefox');
+export const isSafari = parsedUserAgent.getBrowser()?.name?.toLowerCase().includes('safari');
 export const isIOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'ios';
-export const isMacOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'mac os';
+export const isMacOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'macos';
 export const isAndroid = parsedUserAgent.getOS()?.name?.toLowerCase() === 'android';
 export const isIPadOS = false;
 // typeof navigator !== "undefined" &&
@@ -142,3 +137,5 @@ export enum QUESTION_TYPE {
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';
 
 export const DEFAULT_PORTAL_CONTAINER = '.prebuilt-container';
+
+export const TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';

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

@@ -54,7 +54,6 @@ 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/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

@@ -0,0 +1,308 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { HMSKrispPlugin } from '@100mslive/hms-noise-cancellation';
+import {
+  DeviceType,
+  HMSRoomState,
+  selectIsLocalAudioPluginPresent,
+  selectLocalAudioTrackID,
+  selectLocalVideoTrackID,
+  selectRoomState,
+  selectVideoTrackByID,
+  useAVToggle,
+  useDevices,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import {
+  AudioLevelIcon,
+  CameraFlipIcon,
+  CheckIcon,
+  MicOffIcon,
+  MicOnIcon,
+  SettingsIcon,
+  SpeakerIcon,
+  VideoOffIcon,
+  VideoOnIcon,
+} from '@100mslive/react-icons';
+import { IconButtonWithOptions } from './IconButtonWithOptions/IconButtonWithOptions';
+// @ts-ignore: No implicit Any
+import SettingsModal from './Settings/SettingsModal';
+// @ts-ignore: No implicit Any
+import { ToastManager } from './Toast/ToastManager';
+import { Dropdown } from '../../Dropdown';
+import { Box, Flex } from '../../Layout';
+import { Switch } from '../../Switch';
+import { Text } from '../../Text';
+import { Tooltip } from '../../Tooltip';
+import IconButton from '../IconButton';
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useAudioOutputTest } from './hooks/useAudioOutputTest';
+import { isMacOS, TEST_AUDIO_URL } from '../common/constants';
+
+// const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%' };
+
+export const Options = ({
+  options,
+  selectedDeviceId,
+  onClick,
+}: {
+  options?: Array<MediaDeviceInfo | InputDeviceInfo>;
+  selectedDeviceId?: string;
+  onClick: (deviceId: string) => Promise<void>;
+}) => {
+  return (
+    <>
+      {options?.map(option => (
+        <Dropdown.Item
+          key={option.label}
+          css={{
+            backgroundColor: selectedDeviceId === option.deviceId ? '$surface_bright' : '$surface_dim',
+            p: '$4 $8',
+            h: '$15',
+            fontSize: '$xs',
+            justifyContent: 'space-between',
+          }}
+          onClick={() => {
+            onClick(option.deviceId);
+          }}
+        >
+          {option.label}
+          {selectedDeviceId === option.deviceId ? <CheckIcon width={16} height={16} /> : null}
+        </Dropdown.Item>
+      ))}
+    </>
+  );
+};
+
+const OptionLabel = ({ children, icon }: { children: React.ReactNode; icon: React.ReactNode }) => {
+  return (
+    <Dropdown.Label
+      css={{
+        h: '$16',
+        p: '$4 $8',
+        color: '$on_surface_medium',
+        bg: 'transparent',
+        fontSize: '$xs',
+        gap: '$4',
+        alignItems: 'center',
+      }}
+    >
+      <Flex css={{ alignItems: 'center', justifyContent: 'center', '& svg': { size: '$8' } }}>{icon}</Flex> {children}
+    </Dropdown.Label>
+  );
+};
+
+const plugin = new HMSKrispPlugin();
+const NoiseCancellation = () => {
+  const localPeerAudioTrackID = useHMSStore(selectLocalAudioTrackID);
+  const isPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(plugin.getName()));
+  const [active, setActive] = useState(isPluginAdded);
+  const [inProgress, setInProgress] = useState(false);
+  const actions = useHMSActions();
+
+  useEffect(() => {
+    (async () => {
+      setInProgress(true);
+      if (active && !isPluginAdded) {
+        await actions.addPluginToAudioTrack(plugin);
+      }
+      if (!active && isPluginAdded) {
+        await actions.removePluginFromAudioTrack(plugin);
+      }
+      setInProgress(false);
+    })();
+  }, [actions, active, isPluginAdded]);
+
+  if (!plugin.isSupported() || !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>
+  );
+};
+
+const AudioOutputLabel = ({ deviceId }: { deviceId: string }) => {
+  const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId });
+  return (
+    <OptionLabel icon={<SpeakerIcon />}>
+      <Box css={{ flex: '1 1 0' }}>Speakers</Box>
+      <Text
+        variant="xs"
+        css={{ color: '$primary_bright', '&:hover': { cursor: 'pointer' } }}
+        onClick={async () => {
+          if (playing) {
+            return;
+          }
+          await audioRef.current?.play();
+        }}
+      >
+        <audio
+          ref={audioRef}
+          src={TEST_AUDIO_URL}
+          onEnded={() => setPlaying(false)}
+          onPlay={() => setPlaying(true)}
+          style={{ display: 'none' }}
+        />
+        {playing ? 'Playing Sound...' : 'Play Test Sound'}
+      </Text>
+    </OptionLabel>
+  );
+};
+
+const AudioSettings = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <>
+      <Dropdown.Item
+        css={{
+          backgroundColor: '$surface_dim',
+          p: '$4 $8',
+          h: '$15',
+          alignItems: 'center',
+          gap: '$2',
+          fontSize: '$xs',
+          '& svg': { size: '$8' },
+        }}
+        onClick={onClick}
+      >
+        <SettingsIcon /> Audio Settings
+      </Dropdown.Item>
+    </>
+  );
+};
+
+export const AudioVideoToggle = ({ hideOptions = false }) => {
+  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
+  const { videoInput, audioInput, audioOutput } = allDevices;
+  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
+  const actions = useHMSActions();
+  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
+  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
+  const roomState = useHMSStore(selectRoomState);
+  const hasAudioDevices = Number(audioInput?.length) > 0;
+  const hasVideoDevices = Number(videoInput?.length) > 0;
+  const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype && Number(audioOutput?.length) > 0;
+  const { screenType } = useRoomLayoutConferencingScreen();
+  const [showSettings, setShowSettings] = useState(false);
+
+  if (!toggleAudio && !toggleVideo) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      {toggleAudio ? (
+        <IconButtonWithOptions
+          disabled={!toggleAudio}
+          hideOptions={hideOptions || !hasAudioDevices}
+          onDisabledClick={toggleAudio}
+          tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
+          icon={
+            !isLocalAudioEnabled ? <MicOffIcon data-testid="audio_off_btn" /> : <MicOnIcon data-testid="audio_on_btn" />
+          }
+          active={isLocalAudioEnabled}
+          onClick={toggleAudio}
+          key="toggleAudio"
+        >
+          <Dropdown.Group>
+            <OptionLabel icon={<MicOnIcon />}>{!shouldShowAudioOutput ? 'Audio' : 'Microphone'}</OptionLabel>
+            <Options
+              options={audioInput}
+              selectedDeviceId={selectedDeviceIDs.audioInput}
+              onClick={deviceId => updateDevice({ deviceId, deviceType: DeviceType.audioInput })}
+            />
+          </Dropdown.Group>
+          <Dropdown.ItemSeparator css={{ mx: 0 }} />
+          {shouldShowAudioOutput && (
+            <>
+              <AudioOutputLabel deviceId={selectedDeviceIDs.audioOutput || ''} />
+              <Dropdown.Group>
+                <Options
+                  options={audioOutput}
+                  selectedDeviceId={selectedDeviceIDs.audioOutput}
+                  onClick={deviceId => updateDevice({ deviceId, deviceType: DeviceType.audioOutput })}
+                />
+              </Dropdown.Group>
+            </>
+          )}
+          <Dropdown.ItemSeparator css={{ mx: 0 }} />
+          <NoiseCancellation />
+          <Dropdown.ItemSeparator css={{ mx: 0 }} />
+          <AudioSettings onClick={() => setShowSettings(true)} />
+        </IconButtonWithOptions>
+      ) : null}
+
+      {toggleVideo ? (
+        <IconButtonWithOptions
+          disabled={!toggleVideo}
+          hideOptions={hideOptions || !hasVideoDevices}
+          onDisabledClick={toggleVideo}
+          tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
+          icon={
+            !isLocalVideoEnabled ? (
+              <VideoOffIcon data-testid="video_off_btn" />
+            ) : (
+              <VideoOnIcon data-testid="video_on_btn" />
+            )
+          }
+          key="toggleVideo"
+          active={isLocalVideoEnabled}
+          onClick={toggleVideo}
+        >
+          <Options
+            options={videoInput}
+            selectedDeviceId={selectedDeviceIDs.videoInput}
+            onClick={deviceId => updateDevice({ deviceId, deviceType: DeviceType.videoInput })}
+          />
+        </IconButtonWithOptions>
+      ) : null}
+
+      {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview ? (
+        <Tooltip title="Switch Camera" key="switchCamera">
+          <IconButton
+            onClick={async () => {
+              try {
+                await actions.switchCamera();
+              } catch (e) {
+                ToastManager.addToast({
+                  title: `Error while flipping camera ${(e as Error).message || ''}`,
+                  variant: 'error',
+                });
+              }
+            }}
+          >
+            <CameraFlipIcon />
+          </IconButton>
+        </Tooltip>
+      ) : null}
+      {showSettings && (
+        <SettingsModal open={showSettings} onOpenChange={() => setShowSettings(false)} screenType={screenType} />
+      )}
+    </Fragment>
+  );
+};

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

@@ -80,6 +80,7 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
   return (
     <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
       <Dropdown.Trigger
+        data-testid="role_group_options"
         onClick={e => e.stopPropagation()}
         className="role_actions"
         asChild

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

@@ -5,7 +5,6 @@ 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';
@@ -21,7 +20,6 @@ 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/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import { VerticalMenuIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Flex } from '../../../Layout';
+import { styled } from '../../../Theme';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+
+const variants = {
+  disabled: {
+    true: {
+      bg: '$surface_brighter',
+    },
+  },
+  active: {
+    false: {
+      bg: '$secondary_dim',
+    },
+  },
+};
+
+const IconSection = styled(IconButton, {
+  w: 'unset',
+  h: '$14',
+  p: '$4',
+  r: '$1',
+  bg: '$transparent',
+  borderTopRightRadius: 0,
+  borderColor: '$border_bright',
+  borderBottomRightRadius: 0,
+  position: 'relative',
+  '&:not([disabled]):focus-visible': {
+    zIndex: 1,
+  },
+  '@md': {
+    mx: 0,
+    borderTopRightRadius: '$1',
+    borderBottomRightRadius: '$1',
+  },
+  variants: {
+    ...variants,
+    hideOptions: {
+      true: {
+        borderTopRightRadius: '$1',
+        borderBottomRightRadius: '$1',
+      },
+    },
+  },
+});
+
+const OptionsSection = styled(IconButton, {
+  w: 'unset',
+  h: '$14',
+  p: '$4 $2',
+  r: '$1',
+  borderTopLeftRadius: 0,
+  borderColor: '$border_bright',
+  borderBottomLeftRadius: 0,
+  borderLeftWidth: 0,
+  position: 'relative',
+  '&:not([disabled]):focus-visible': {
+    zIndex: 1,
+  },
+  '@md': {
+    display: 'none',
+  },
+  variants,
+});
+
+const Icon = styled(Flex, {
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '$on_primary_high',
+  variants: {
+    disabled: {
+      true: {
+        color: '$on_surface_low',
+      },
+    },
+    active: {
+      true: {
+        color: '$on_surface_high',
+      },
+    },
+  },
+});
+
+export const IconButtonWithOptions = ({
+  disabled = false,
+  onDisabledClick = () => {
+    return;
+  },
+  tooltipMessage = '',
+  icon,
+  children,
+  active,
+  hideOptions = false,
+  onClick = () => {
+    return;
+  },
+}: {
+  onClick: () => void;
+  onDisabledClick: () => void;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+  hideOptions?: boolean;
+  active: boolean;
+  disabled?: boolean;
+  tooltipMessage?: string;
+}) => {
+  const commonProps = { disabled, active };
+  return (
+    <Flex>
+      <IconSection {...commonProps} onClick={onClick} hideOptions={hideOptions}>
+        <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
+          <Icon {...commonProps}>{icon}</Icon>
+        </Tooltip>
+      </IconSection>
+      {!hideOptions && children ? (
+        <Dropdown.Root>
+          <Dropdown.Trigger
+            asChild
+            // onClick does not work
+            onPointerDown={e => {
+              if (disabled) {
+                e.preventDefault();
+                onDisabledClick();
+              }
+            }}
+          >
+            <OptionsSection {...commonProps}>
+              <Tooltip title="View Options">
+                <Icon {...commonProps}>
+                  <VerticalMenuIcon />
+                </Icon>
+              </Tooltip>
+            </OptionsSection>
+          </Dropdown.Trigger>
+          <Dropdown.Content
+            sideOffset={5}
+            alignOffset={-44}
+            align="start"
+            side="top"
+            css={{
+              w: 344,
+              maxWidth: '100%',
+              maxHeight: 'unset',
+              p: 0,
+              border: 'none',
+              bg: '$surface_dim',
+            }}
+          >
+            {children}
+          </Dropdown.Content>
+        </Dropdown.Root>
+      ) : null}
+    </Flex>
+  );
+};

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

@@ -1,8 +1,6 @@
 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, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { Box, Flex } from '../../../Layout';

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

@@ -17,7 +17,6 @@ import {
   HamburgerMenuIcon,
   HandIcon,
   HandRaiseSlashedIcon,
-  InfoIcon,
   PeopleIcon,
   QuizActiveIcon,
   QuizIcon,
@@ -42,8 +41,6 @@ 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
@@ -56,7 +53,7 @@ import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
-import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../../common/constants';
+import { SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -96,8 +93,7 @@ export const MwebOptions = ({
   const { toggleAudio, toggleVideo } = useAVToggle();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  const { title, description } = useRoomLayoutHeader();
-  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  // const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -295,18 +291,6 @@ 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>