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

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

@@ -1,8 +1,7 @@
-import React, { Suspense, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
 import {
   selectIsConnectedToRoom,
-  selectIsLocalVideoEnabled,
   selectPeerCount,
   selectPermissions,
   useHMSActions,
@@ -13,7 +12,7 @@ import { CrossIcon, DragHandleIcon, EmojiIcon, PeopleIcon, RecordIcon, SettingsI
 import { Box, Loading, Tooltip } from '../../../../';
 import { Sheet } from '../../../../Sheet';
 import IconButton from '../../../IconButton';
-import { EmojiCard } from '../../Footer/EmojiCard';
+import { EmojiReaction } from '../../EmojiReaction';
 import { StopRecordingInSheet } from '../../Header/StreamActions';
 import SettingsModal from '../../Settings/SettingsModal';
 import { ToastManager } from '../../Toast/ToastManager';
@@ -25,7 +24,7 @@ import { useDropdownList } from '../../hooks/useDropdownList';
 import { getFormattedCount } from '../../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../../common/constants';
 
-const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
+// const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -39,7 +38,7 @@ const MODALS = {
   EMBED_URL: 'embedUrl',
 };
 
-export const MwebOptions = () => {
+export const MwebOptions = ({ elements }) => {
   const hmsActions = useHMSActions();
   const permissions = useHMSStore(selectPermissions);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
@@ -55,9 +54,9 @@ export const MwebOptions = () => {
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  // const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
-  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
+  useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
   const updateState = (modalName, value) => {
     setOpenModals(modals => {
@@ -127,21 +126,23 @@ export const MwebOptions = () => {
               <ActionTile.Title>Participants</ActionTile.Title>
             </ActionTile.Root>
 
-            {isVideoOn ? (
+            {/* {isVideoOn ? (
               <Suspense fallback="">
                 <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />
               </Suspense>
-            ) : null}
+            ) : null} */}
 
-            <ActionTile.Root
-              onClick={() => {
-                setShowEmojiCard(true);
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <EmojiIcon />
-              <ActionTile.Title>Emoji Reactions</ActionTile.Title>
-            </ActionTile.Root>
+            {elements?.emoji_reactions && (
+              <ActionTile.Root
+                onClick={() => {
+                  setShowEmojiCard(true);
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <EmojiIcon />
+                <ActionTile.Title>Emoji Reactions</ActionTile.Title>
+              </ActionTile.Root>
+            )}
 
             <ActionTile.Root
               onClick={() => {
@@ -235,7 +236,7 @@ export const MwebOptions = () => {
             mx: '$4',
           }}
         >
-          <EmojiCard />
+          <EmojiReaction />
         </Box>
       )}
       {showRecordingOn && (

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

@@ -60,7 +60,9 @@ export function HLSFailureModal() {
             <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => setOpenModal(false)}>
               Dismiss
             </Button>
-            <Button css={{ w: '100%' }}>Go Live</Button>
+            <Button css={{ w: '100%' }} onClick={startHLS}>
+              Go Live
+            </Button>
           </Flex>
         </Dialog.Content>
       </Dialog.Portal>

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

@@ -1,28 +1,35 @@
 /* eslint-disable no-case-declarations */
 import React, { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { useNavigate } from 'react-router-dom';
+import {
+  HMSNotificationTypes,
+  HMSRoomState,
+  selectRoomState,
+  useHMSNotifications,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { Button } from '../../../';
+import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { InitErrorModal } from './InitErrorModal';
-import { MessageNotifications } from './MessageNotifications';
 import { PeerNotifications } from './PeerNotifications';
 import { PermissionErrorModal } from './PermissionErrorModal';
 import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
-import { useHLSViewerRole, useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
-import { useNavigation } from '../hooks/useNavigation';
+import { useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
 import { getMetadata } from '../../common/utils';
 
 export function Notifications() {
   const notification = useHMSNotifications();
-  const navigate = useNavigation();
-  const HLS_VIEWER_ROLE = useHLSViewerRole();
+  const navigate = useNavigate();
   const subscribedNotifications = useSubscribedNotifications() || {};
   const isHeadless = useIsHeadless();
+  const roomState = useHMSStore(selectRoomState);
+  const updateRoomLayoutForRole = useUpdateRoomLayout();
 
   useEffect(() => {
     if (!notification) {
@@ -30,6 +37,9 @@ export function Notifications() {
     }
     switch (notification.type) {
       case HMSNotificationTypes.METADATA_UPDATED:
+        if (roomState !== HMSRoomState.Connected) {
+          return;
+        }
         // Don't toast message when metadata is updated and raiseHand is false.
         // Don't toast message in case of local peer.
         const metadata = getMetadata(notification.data?.metadata);
@@ -90,13 +100,11 @@ export function Notifications() {
         });
         break;
       case HMSNotificationTypes.ROLE_UPDATED:
-        if (notification.data.roleName === HLS_VIEWER_ROLE) {
-          return;
-        }
         if (notification.data?.isLocal) {
           ToastManager.addToast({
             title: `You are now a ${notification.data.roleName}`,
           });
+          updateRoomLayoutForRole(notification.data.roleName);
         }
         break;
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
@@ -129,7 +137,7 @@ export function Notifications() {
         break;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED, HLS_VIEWER_ROLE]);
+  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED]);
 
   return (
     <>
@@ -140,7 +148,6 @@ export function Notifications() {
       <ReconnectNotifications />
       <AutoplayBlockedModal />
       <PermissionErrorModal />
-      <MessageNotifications />
       <InitErrorModal notification={notification} />
     </>
   );

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

@@ -1,5 +1,11 @@
 import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import {
+  HMSNotificationTypes,
+  HMSRoomState,
+  selectRoomState,
+  useHMSNotifications,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useSubscribedNotifications } from '../AppData/useUISettings';
 import { isInternalRole } from '../../common/utils';
@@ -15,10 +21,15 @@ export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
+  const roomState = useHMSStore(selectRoomState);
   useEffect(() => {
+    if (roomState !== HMSRoomState.Connected) {
+      return;
+    }
     if (!notification || (notification?.data?.roleName && isInternalRole(notification.data.roleName))) {
       return;
     }
+
     console.debug(`[${notification.type}]`, notification);
     switch (notification.type) {
       case HMSNotificationTypes.PEER_LIST:
@@ -39,8 +50,9 @@ export const PeerNotifications = () => {
       default:
         return;
     }
+
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, roomState]);
 
   return null;
 };

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

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
 import { Button, config as cssConfig, Dialog, Flex, Text } from '../../../';
-import androidPermissionAlert from '../../../assets/android-perm-1.png';
-import iosPermissions from '../../../assets/ios-perm-0.png';
+import androidPermissionAlert from '../../images/android-perm-1.png';
+import iosPermissions from '../../images/ios-perm-0.png';
 import { isAndroid, isIOS } from '../../common/constants';
 
 export function PermissionErrorModal() {
@@ -47,11 +47,17 @@ export function PermissionErrorModal() {
               borderBottom: '1px solid $border_default',
             }}
           >
-            {isMobile && isIOS ? <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} /> : null}
+            {isMobile && isIOS ? (
+              <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} alt="iOS Permission flow" />
+            ) : null}
 
             {/* Images for android */}
             {isMobile && isAndroid ? (
-              <img src={androidPermissionAlert} style={{ maxWidth: '100%', maxHeight: '100%' }} />
+              <img
+                src={androidPermissionAlert}
+                style={{ maxWidth: '100%', maxHeight: '100%' }}
+                alt="Android Permission flow "
+              />
             ) : null}
 
             <Text variant="h6">We can't access your {deviceType}</Text>

package/src/Prebuilt/components/PIP/PIPComponent.jsx

@@ -1,31 +1,20 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-  selectLocalPeerRoleName,
-  selectPeers,
-  selectTracksMap,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
+import { selectPeers, selectTracksMap, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { PipIcon } from '@100mslive/react-icons';
 import { Flex, Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { PictureInPicture } from './PIPManager';
 import { MediaSession } from './SetupMediaSession';
 import { usePinnedTrack } from '../AppData/useUISettings';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { DEFAULT_HLS_VIEWER_ROLE, FEATURE_LIST } from '../../common/constants';
 
 /**
  * shows a button which when clicked shows some videos in PIP, clicking
  * again turns it off.
  */
 const PIPComponent = ({ content = null }) => {
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
   const hmsActions = useHMSActions();
   const store = useHMSVanillaStore();
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
 
   const onPipToggle = useCallback(() => {
     if (!isPipOn) {
@@ -36,7 +25,7 @@ const PIPComponent = ({ content = null }) => {
     }
   }, [hmsActions, isPipOn, store]);
 
-  if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE || !isFeatureEnabled) {
+  if (!PictureInPicture.isSupported()) {
     return null;
   }
   return (
@@ -66,8 +55,8 @@ export const ActivatedPIP = () => {
   const pinnedTrack = usePinnedTrack();
 
   useEffect(() => {
-    PictureInPicture.listenToStateChange(isPipOn => {
-      if (!isPipOn) {
+    function updatePIP() {
+      if (!PictureInPicture.isOn()) {
         return;
       }
       let pipPeers = storePeers;
@@ -77,7 +66,9 @@ export const ActivatedPIP = () => {
       PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
         console.error('error in updating pip', err);
       });
-    });
+    }
+    PictureInPicture.listenToStateChange(updatePIP);
+    updatePIP();
   }, [storePeers, tracksMap, pinnedTrack]);
 
   return <></>;

package/src/Prebuilt/components/PIP/PIPManager.js

@@ -107,6 +107,7 @@ class PipManager {
     this.pipVideo?.removeEventListener(LEAVE_EVENT_NAME, this.stop);
     if (this.timeoutRef) {
       workerTimers.clearTimeout(this.timeoutRef);
+      this.timeoutRef = null;
     }
     if (this.isOn()) {
       this.exitPIP();

package/src/Prebuilt/components/{Pagination.jsx → Pagination.tsx}

@@ -1,24 +1,53 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
 import { StyledPagination } from '../../Pagination';
 
-export const Pagination = ({ page, onPageChange, numPages }) => {
+export const Pagination = ({
+  page,
+  onPageChange,
+  numPages,
+}: {
+  page: number;
+  onPageChange: (page: number) => void;
+  numPages: number;
+}) => {
   const disableLeft = page === 0;
   const disableRight = page === numPages - 1;
-  const nextPage = () => {
+  const nextPage = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
     onPageChange(Math.min(page + 1, numPages - 1));
   };
-  const prevPage = () => {
+  const prevPage = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
     onPageChange(Math.max(page - 1, 0));
   };
+
+  useEffect(() => {
+    // currentPageIndex should not exceed pages length
+    if (page >= numPages) {
+      onPageChange(Math.max(0, numPages - 1));
+    }
+  }, [numPages, onPageChange, page]);
+
+  if (numPages <= 1) {
+    return null;
+  }
+
   return (
-    <StyledPagination.Root>
+    <StyledPagination.Root css={{ flexShrink: 0 }}>
       <StyledPagination.Chevron disabled={disableLeft} onClick={prevPage}>
         <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>
       <StyledPagination.Dots>
         {[...Array(numPages)].map((_, i) => (
-          <StyledPagination.Dot key={i} active={page === i} onClick={() => onPageChange(i)} />
+          <StyledPagination.Dot
+            key={i}
+            active={page === i}
+            onClick={e => {
+              e.stopPropagation();
+              onPageChange(i);
+            }}
+          />
         ))}
       </StyledPagination.Dots>
       <StyledPagination.Chevron disabled={disableRight} onClick={nextPage}>

package/src/Prebuilt/components/Playlist/Playlist.jsx

@@ -5,9 +5,7 @@ import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { AudioPlaylistControls } from './PlaylistControls';
 import { PlaylistItem } from './PlaylistItem';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
 import { usePlaylist } from '../hooks/usePlaylist';
-import { FEATURE_LIST } from '../../common/constants';
 
 const BrowseAndPlayFromLocal = ({ type, actions }) => {
   return (
@@ -44,10 +42,7 @@ export const Playlist = ({ type }) => {
   const [open, setOpen] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const isFeatureEnabled = useIsFeatureEnabled(
-    isAudioPlaylist ? FEATURE_LIST.AUDIO_PLAYLIST : FEATURE_LIST.VIDEO_PLAYLIST,
-  );
-  if (!isAllowedToPublish.screen || playlist.length === 0 || !isFeatureEnabled) {
+  if (!isAllowedToPublish.screen || playlist.length === 0) {
     return null;
   }
 

package/src/Prebuilt/components/PostLeave.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { ExitIcon } from '@100mslive/react-icons';
 import { ToastManager } from './Toast/ToastManager';
 import { Button } from '../../Button';
@@ -7,14 +7,14 @@ import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { Header } from './Header';
-import { useNavigation } from './hooks/useNavigation';
+import { useRoomLayoutPreviewScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';
-import { getRoutePrefix } from '../common/utils';
 import { textEllipsis } from '../../utils';
 
 const PostLeave = () => {
-  const navigate = useNavigation();
-  const { showPreview, roomCode } = useHMSPrebuiltContext();
+  const navigate = useNavigate();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const { roomCode } = useHMSPrebuiltContext();
   const { roomId, role } = useParams();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
   return (
@@ -32,7 +32,7 @@ const PostLeave = () => {
           👋
         </Text>
         <Text variant="h4" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>
-          You left the {getRoutePrefix() ? 'stream' : 'room'}
+          You left the room
         </Text>
         <Text
           variant="body1"
@@ -57,7 +57,7 @@ const PostLeave = () => {
           </Text>
           <Button
             onClick={() => {
-              let redirectUrl = `${showPreview ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
+              let redirectUrl = `${isPreviewScreenEnabled ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
               if (role && roomId) redirectUrl += '/' + role;
               navigate(redirectUrl);
               ToastManager.clearAllToast();

package/src/Prebuilt/components/Preview/PreviewContainer.jsx

@@ -1,20 +1,19 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
 import { Flex } from '../../../';
 import { useHMSPrebuiltContext } from '../../AppContext';
-import SidePane from '../../layouts/SidePane';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import FullPageProgress from '../FullPageProgress';
 import PreviewJoin from './PreviewJoin';
+import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useAuthToken } from '../AppData/useUISettings';
-import { useNavigation } from '../hooks/useNavigation';
-import { useSkipPreview } from '../hooks/useSkipPreview';
 import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
 const PreviewContainer = () => {
-  const navigate = useNavigation();
-  const skipPreview = useSkipPreview();
+  const navigate = useNavigate();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const skipPreview = !isPreviewScreenEnabled;
   const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
   const { userName } = useHMSPrebuiltContext();
   const initialName = userName || (skipPreview ? 'Beam' : '');
@@ -42,13 +41,6 @@ const PreviewContainer = () => {
         ) : (
           <FullPageProgress />
         )}
-        <SidePane
-          css={{
-            position: 'unset',
-            mr: '$10',
-            '@lg': { position: 'fixed', mr: '$0' },
-          }}
-        />
       </Flex>
     </Flex>
   );

package/src/Prebuilt/components/Preview/{PreviewForm.jsx → PreviewForm.tsx}

@@ -1,11 +1,12 @@
 import React from 'react';
 import { useMedia } from 'react-use';
+import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { RadioIcon } from '@100mslive/react-icons';
 import { Button, config as cssConfig, Flex, Input, styled } from '../../..';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
+// @ts-ignore: No implicit Any
 import { PreviewSettings } from './PreviewJoin';
-import { useShowStreamingUI } from '../../common/hooks';
 
 const PreviewForm = ({
   name,
@@ -14,8 +15,15 @@ const PreviewForm = ({
   enableJoin,
   cannotPublishVideo = false,
   cannotPublishAudio = false,
+}: {
+  name: string;
+  onChange: (name: string) => void;
+  onJoin: () => void;
+  enableJoin: boolean;
+  cannotPublishVideo: boolean;
+  cannotPublishAudio: boolean;
 }) => {
-  const formSubmit = e => {
+  const formSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
   };
   const mediaQueryLg = cssConfig.media.md;
@@ -24,8 +32,10 @@ const PreviewForm = ({
   const permissions = useHMSStore(selectPermissions);
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
-  const showStreamingUI = useShowStreamingUI();
-  const showGoLive = showStreamingUI && !isHLSRunning && permissions?.hlsStreaming;
+  const showGoLive =
+    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE &&
+    !isHLSRunning &&
+    permissions?.hlsStreaming;
 
   return (
     <Form

package/src/Prebuilt/components/Preview/PreviewJoin.jsx

@@ -12,7 +12,7 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Avatar, Box, Flex, flexCenter, styled, StyledVideoTile, Text, useBorderAudioLevel, Video } from '../../../';
+import { Avatar, Box, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../../';
 import { useHMSPrebuiltContext } from '../../AppContext';
 import IconButton from '../../IconButton';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
@@ -22,6 +22,7 @@ import TileConnection from '../Connection/TileConnection';
 import FullPageProgress from '../FullPageProgress';
 import { Logo } from '../Header/HeaderComponents';
 import SettingsModal from '../Settings/SettingsModal';
+import { AudioLevel } from '../VideoTile';
 import PreviewForm from './PreviewForm';
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
@@ -170,9 +171,8 @@ const Container = styled('div', {
   px: '$10',
 });
 
-const PreviewTile = ({ name, error }) => {
+export const PreviewTile = ({ name, error }) => {
   const localPeer = useHMSStore(selectLocalPeer);
-  const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle();
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
@@ -189,11 +189,11 @@ const PreviewTile = ({ name, error }) => {
         overflow: 'clip',
         '@md': {
           aspectRatio: 9 / 16,
-          width: 'min(275px, 70vw)',
+          width: 'min(220px, 70vw)',
           maxWidth: '100%',
+          my: '$4',
         },
       }}
-      ref={borderAudioRef}
     >
       {localPeer ? (
         <>
@@ -216,12 +216,14 @@ const PreviewTile = ({ name, error }) => {
         <StyledVideoTile.AudioIndicator size="medium">
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
-      ) : null}
+      ) : (
+        <AudioLevel trackId={localPeer.audioTrack} />
+      )}
     </StyledVideoTile.Container>
   );
 };
 
-const PreviewControls = ({ hideSettings }) => {
+export const PreviewControls = ({ hideSettings }) => {
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   return (
     <Flex

package/src/Prebuilt/components/RaiseHand.jsx

@@ -3,20 +3,13 @@ import { selectLocalPeer, selectPeerMetadata, useHMSStore } from '@100mslive/rea
 import { HandIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
-import { useIsFeatureEnabled } from './hooks/useFeatures';
 import { useMyMetadata } from './hooks/useMetadata';
-import { FEATURE_LIST } from '../common/constants';
 
 export const RaiseHand = () => {
-  const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);
   const { toggleHandRaise } = useMyMetadata();
   const localPeer = useHMSStore(selectLocalPeer);
   const isHandRaised = useHMSStore(selectPeerMetadata(localPeer.id))?.isHandRaised || false;
 
-  if (!isHandRaiseEnabled) {
-    return null;
-  }
-
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
       <IconButton active={!isHandRaised} onClick={toggleHandRaise}>