@100mslive/roomkit-react 0.2.8-alpha.0 → 0.2.8-alpha.10

package/src/Prebuilt/components/HMSVideo/{HMSVIdeoUtils.js → utils.ts}

@@ -1,14 +1,14 @@
-export function getPercentage(a, b) {
+export function getPercentage(a: number, b: number) {
   return (a / b) * 100;
 }
 
 /**
+ * Take a time in seconds and return its equivalent time in hh:mm:ss format
+ * @param {number} timeInSeconds if given as floating point value, it is floored.
  *
- * @param {number} timeInSeconds - if given as floating point value, it is floored.
- * @returns  a string representing timeInSeconds in HH:MM:SS format.
- * (e.g) getDurationFromSeconds(3910) returns "1:05:10"
+ * @returns a string representing timeInSeconds in HH:MM:SS format.
  */
-export function getDurationFromSeconds(timeInSeconds) {
+export function getDurationFromSeconds(timeInSeconds: number) {
   let time = Math.floor(timeInSeconds);
   const hours = Math.floor(time / 3600);
   time = time - hours * 3600;

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

@@ -42,7 +42,7 @@ export const LiveStatus = () => {
         setLiveTime(Date.now() - timeStamp.getTime());
       }
     }, 1000);
-  }, [hlsState?.running, hlsState?.variants]);
+  }, [hlsState?.running, hlsState?.variants, screenType]);
 
   useEffect(() => {
     if (hlsState?.running) {

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -24,7 +24,7 @@ const IconSection = styled(IconButton, {
   h: '$14',
   p: '$4',
   r: '$1',
-  bg: '$transparent',
+  bg: 'transparent',
   borderTopRightRadius: 0,
   borderColor: '$border_bright',
   borderBottomRightRadius: 0,

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

@@ -17,10 +17,12 @@ export const DesktopLeaveRoom = ({
   leaveRoom,
   screenType,
   endRoom,
+  container,
 }: {
   leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
   screenType: keyof ConferencingScreen;
   endRoom: () => Promise<void>;
+  container?: HTMLElement;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -69,54 +71,56 @@ export const DesktopLeaveRoom = ({
                 <VerticalMenuIcon />
               </MenuTriggerButton>
             </Dropdown.Trigger>
-            <Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
-              <Dropdown.Item
-                css={{
-                  bg: '$surface_dim',
-                  color: '$on_surface_medium',
-                  '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
-                  p: '0',
-                }}
-                data-testid="just_leave_btn"
-              >
-                <LeaveCard
-                  title={showStream ? 'Leave Stream' : 'Leave Session'}
-                  subtitle={`Others will continue after you leave. You can join the ${
-                    showStream ? 'stream' : 'session'
-                  } again.`}
-                  bg=""
-                  titleColor="$on_surface_high"
-                  icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-                  onClick={async () => await leaveRoom()}
-                  css={{ p: '$8 $4' }}
-                />
-              </Dropdown.Item>
+            <Dropdown.Portal container={container}>
+              <Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
+                <Dropdown.Item
+                  css={{
+                    bg: '$surface_dim',
+                    color: '$on_surface_medium',
+                    '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
+                    p: '0',
+                  }}
+                  data-testid="just_leave_btn"
+                >
+                  <LeaveCard
+                    title={showStream ? 'Leave Stream' : 'Leave Session'}
+                    subtitle={`Others will continue after you leave. You can join the ${
+                      showStream ? 'stream' : 'session'
+                    } again.`}
+                    bg=""
+                    titleColor="$on_surface_high"
+                    icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
+                    onClick={async () => await leaveRoom()}
+                    css={{ p: '$8 $4' }}
+                  />
+                </Dropdown.Item>
 
-              <Dropdown.Item
-                css={{
-                  bg: '$alert_error_dim',
-                  color: '$alert_error_bright',
-                  '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
-                  p: '0',
-                }}
-                data-testid="end_room_btn"
-              >
-                <LeaveCard
-                  title={showStream ? 'End Stream' : 'End Session'}
-                  subtitle={`The ${
-                    showStream ? 'stream' : 'session'
-                  } will end for everyone. You can't undo this action.`}
-                  bg=""
-                  titleColor="$alert_error_brighter"
-                  icon={<StopIcon height={24} width={24} />}
-                  onClick={() => {
-                    setOpen(false);
-                    setShowEndStreamAlert(true);
+                <Dropdown.Item
+                  css={{
+                    bg: '$alert_error_dim',
+                    color: '$alert_error_bright',
+                    '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+                    p: '0',
                   }}
-                  css={{ p: '$8 $4' }}
-                />
-              </Dropdown.Item>
-            </Dropdown.Content>
+                  data-testid="end_room_btn"
+                >
+                  <LeaveCard
+                    title={showStream ? 'End Stream' : 'End Session'}
+                    subtitle={`The ${
+                      showStream ? 'stream' : 'session'
+                    } will end for everyone. You can't undo this action.`}
+                    bg=""
+                    titleColor="$alert_error_brighter"
+                    icon={<StopIcon height={24} width={24} />}
+                    onClick={() => {
+                      setOpen(false);
+                      setShowEndStreamAlert(true);
+                    }}
+                    css={{ p: '$8 $4' }}
+                  />
+                </Dropdown.Item>
+              </Dropdown.Content>
+            </Dropdown.Portal>
           </Dropdown.Root>
         </Flex>
       ) : (

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

@@ -14,12 +14,18 @@ import {
 } from '@100mslive/react-sdk';
 import { config as cssConfig } from '../../../Theme';
 // @ts-ignore: No implicit Any
-// @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { DesktopLeaveRoom } from './DesktopLeaveRoom';
 import { MwebLeaveRoom } from './MwebLeaveRoom';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 
-export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
+export const LeaveRoom = ({
+  screenType,
+  container,
+}: {
+  screenType: keyof ConferencingScreen;
+  container?: HTMLElement;
+}) => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const isMobile = useMedia(cssConfig.media.md);
@@ -33,6 +39,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   );
   const hlsState = useHMSStore(selectHLSState);
   const hmsActions = useHMSActions();
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   const stopStream = async () => {
     try {
@@ -61,9 +69,12 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   if (!permissions || !isConnected) {
     return null;
   }
+  if (isMobileHLSStream || isLandscapeHLSStream) {
+    return <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />;
+  }
   return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
+    <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />
   ) : (
-    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
+    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} container={container} />
   );
 };

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

@@ -1,9 +1,9 @@
 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 } from '@100mslive/react-icons';
+import { CrossIcon, ExitIcon, StopIcon } from '@100mslive/react-icons';
+import { IconButton } from '../../../IconButton';
 import { Box } from '../../../Layout';
 import { Sheet } from '../../../Sheet';
 import { Tooltip } from '../../../Tooltip';
@@ -11,19 +11,22 @@ import { EndSessionContent } from './EndSessionContent';
 import { LeaveIconButton } from './LeaveAtoms';
 import { LeaveCard } from './LeaveCard';
 import { LeaveSessionContent } from './LeaveSessionContent';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useDropdownList } from '../hooks/useDropdownList';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 
 export const MwebLeaveRoom = ({
   leaveRoom,
-  screenType,
   endRoom,
+  container,
 }: {
   leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
-  screenType: keyof ConferencingScreen;
   endRoom: () => Promise<void>;
+  container?: HTMLElement;
 }) => {
   const [open, setOpen] = useState(false);
+  const { screenType } = useRoomLayoutConferencingScreen();
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
   const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
@@ -43,22 +46,13 @@ export const MwebLeaveRoom = ({
       {showLeaveOptions ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
-            <LeaveIconButton
-              key="LeaveRoom"
-              data-testid="leave_room_btn"
-              css={{
-                borderTopRightRadius: '$1',
-                borderBottomRightRadius: '$1',
+            <LeaveButton
+              onClick={() => {
+                setOpen(open => !open);
               }}
-            >
-              <Tooltip title="Leave Room">
-                <Box>
-                  <ExitIcon style={{ transform: 'rotate(180deg)' }} />
-                </Box>
-              </Tooltip>
-            </LeaveIconButton>
+            />
           </Sheet.Trigger>
-          <Sheet.Content>
+          <Sheet.Content container={container}>
             <LeaveCard
               title={showStream ? 'Leave Stream' : 'Leave Session'}
               subtitle={`Others will continue after you leave. You can join the ${
@@ -88,16 +82,10 @@ export const MwebLeaveRoom = ({
           </Sheet.Content>
         </Sheet.Root>
       ) : (
-        <LeaveIconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={() => setShowLeaveRoomAlert(true)}>
-          <Tooltip title="Leave Room">
-            <Box>
-              <ExitIcon style={{ transform: 'rotate(180deg)' }} />
-            </Box>
-          </Tooltip>
-        </LeaveIconButton>
+        <LeaveButton onClick={() => setShowLeaveRoomAlert(true)} />
       )}
       <Sheet.Root open={showEndStreamAlert} onOpenChange={setShowEndStreamAlert}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }} container={container}>
           <EndSessionContent
             setShowEndStreamAlert={setShowEndStreamAlert}
             leaveRoom={isStreamingOn ? leaveRoom : endRoom}
@@ -107,10 +95,41 @@ export const MwebLeaveRoom = ({
       </Sheet.Root>
 
       <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }} container={container}>
           <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
         </Sheet.Content>
       </Sheet.Root>
     </Fragment>
   );
 };
+
+const LeaveButton = ({ onClick }: { onClick: () => void }) => {
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+
+  return isMobileHLSStream || isLandscapeHLSStream ? (
+    <IconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={onClick}>
+      <Tooltip title="Leave Room">
+        <Box>
+          <CrossIcon />
+        </Box>
+      </Tooltip>
+    </IconButton>
+  ) : (
+    <LeaveIconButton
+      key="LeaveRoom"
+      data-testid="leave_room_btn"
+      css={{
+        borderTopRightRadius: '$1',
+        borderBottomRightRadius: '$1',
+      }}
+      onClick={onClick}
+    >
+      <Tooltip title="Leave Room">
+        <Box>
+          <ExitIcon style={{ transform: 'rotate(180deg)' }} />
+        </Box>
+      </Tooltip>
+    </LeaveIconButton>
+  );
+};

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

@@ -10,6 +10,7 @@ import { DesktopOptions } from './SplitComponents/DesktopOptions';
 // @ts-ignore: No implicit Any
 import { MwebOptions } from './SplitComponents/MwebOptions';
 import { config as cssConfig } from '../../..';
+import { useLandscapeHLSStream } from '../../common/hooks';
 
 export const MoreSettings = ({
   elements,
@@ -19,7 +20,8 @@ export const MoreSettings = ({
   screenType: keyof ConferencingScreen;
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
-  return isMobile ? (
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  return isMobile || isLandscapeHLSStream ? (
     <MwebOptions elements={elements} screenType={screenType} />
   ) : (
     <DesktopOptions elements={elements} screenType={screenType} />

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

@@ -5,6 +5,7 @@ import {
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { BrbIcon, CheckIcon, HamburgerMenuIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
@@ -143,41 +144,46 @@ export const DesktopOptions = ({
               Settings
             </Text>
           </Dropdown.Item>
+          {match({ screenType, isSupported: HMSHLSPlayer.isSupported() })
+            .with({ screenType: 'hls_live_streaming', isSupported: false }, () => null)
+            .with({ screenType: 'hls_live_streaming', isSupported: true }, () => {
+              return (
+                <Dropdown.Item
+                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  data-testid="hls_stats"
+                >
+                  <Checkbox.Root
+                    css={{ margin: '$2' }}
+                    checked={enablHlsStats}
+                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  >
+                    <Checkbox.Indicator>
+                      <CheckIcon width={16} height={16} />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <Flex justify="between" css={{ width: '100%' }}>
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      Show HLS Stats
+                    </Text>
 
-          {screenType === 'hls_live_streaming' ? (
-            HMSHLSPlayer.isSupported() ? (
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
+                    </Text>
+                  </Flex>
+                </Dropdown.Item>
+              );
+            })
+            .otherwise(() => (
               <Dropdown.Item
-                onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                data-testid="hls_stats"
+                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
+                data-testid="stats_for_nerds_btn"
               >
-                <Checkbox.Root
-                  css={{ margin: '$2' }}
-                  checked={enablHlsStats}
-                  onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                >
-                  <Checkbox.Indicator>
-                    <CheckIcon width={16} height={16} />
-                  </Checkbox.Indicator>
-                </Checkbox.Root>
-                <Flex justify="between" css={{ width: '100%' }}>
-                  <Text variant="sm" css={{ ml: '$4' }}>
-                    Show HLS Stats
-                  </Text>
-
-                  <Text variant="sm" css={{ ml: '$4' }}>
-                    {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                  </Text>
-                </Flex>
+                <InfoIcon />
+                <Text variant="sm" css={{ ml: '$4' }}>
+                  Stats for Nerds
+                </Text>
               </Dropdown.Item>
-            ) : null
-          ) : (
-            <Dropdown.Item onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)} data-testid="stats_for_nreds_btn">
-              <InfoIcon />
-              <Text variant="sm" css={{ ml: '$4' }}>
-                Stats for Nerds
-              </Text>
-            </Dropdown.Item>
-          )}
+            ))}
         </Dropdown.Content>
       </Dropdown.Root>
       {openModals.has(MODALS.BULK_ROLE_CHANGE) && (

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
 import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
   selectPeerCount,
@@ -53,6 +54,7 @@ import { useDropdownList } from '../../hooks/useDropdownList';
 // @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
@@ -98,6 +100,8 @@ export const MwebOptions = ({
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -120,7 +124,7 @@ export const MwebOptions = ({
       <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
         <Tooltip title="More options">
           <Sheet.Trigger asChild data-testid="more_settings_btn">
-            <IconButton>
+            <IconButton css={{ bg: isMobileHLSStream || isLandscapeHLSStream ? '$surface_default' : '' }}>
               <HamburgerMenuIcon />
             </IconButton>
           </Sheet.Trigger>
@@ -196,7 +200,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null} */}
 
-            {elements?.emoji_reactions && (
+            {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
               <ActionTile.Root
                 onClick={() => {
                   setShowEmojiCard(true);
@@ -287,11 +291,11 @@ export const MwebOptions = ({
               >
                 {isRecordingLoading ? <Loading /> : <RecordIcon />}
                 <ActionTile.Title>
-                  {isBrowserRecordingOn
-                    ? 'Recording On'
-                    : isRecordingLoading
-                    ? 'Starting Recording'
-                    : 'Start Recording'}
+                  {match({ isBrowserRecordingOn, isRecordingLoading })
+                    .with({ isBrowserRecordingOn: true, isRecordingLoading: false }, () => 'Recording On')
+                    .with({ isRecordingLoading: true }, () => 'Starting Recording')
+                    .with({ isRecordingLoading: false }, () => 'Start Recording')
+                    .otherwise(() => null)}
                 </ActionTile.Title>
               </ActionTile.Root>
             ) : null}
@@ -339,7 +343,7 @@ export const MwebOptions = ({
             mx: '$4',
           }}
         >
-          <EmojiReaction />
+          <EmojiReaction showCard />
         </Box>
       )}
       {showRecordingOn && (

package/src/Prebuilt/components/MwebLandscapePrompt.tsx

@@ -1,17 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
+import { match, P } from 'ts-pattern';
 import { RefreshIcon } from '@100mslive/react-icons';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
 import { config as cssConfig } from '../../Theme';
+import { useLandscapeHLSStream } from '../common/hooks';
 // @ts-ignore
 import { isMobileUserAgent } from '../common/utils';
 
 export const MwebLandscapePrompt = () => {
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false);
   const isLandscape = useMedia(cssConfig.media.ls);
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useEffect(() => {
     if (!isMobileUserAgent) {
@@ -20,22 +23,30 @@ export const MwebLandscapePrompt = () => {
     }
 
     if (!window.screen?.orientation) {
-      setShowMwebLandscapePrompt(isLandscape);
+      setShowMwebLandscapePrompt(isLandscape && !isLandscapeHLSStream);
       return;
     }
     const handleRotation = () => {
       const angle = window.screen.orientation.angle;
       const type = window.screen.orientation.type || '';
       // Angle check needed to diff bw mobile and desktop
-      setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes('landscape') : isLandscape);
+      setShowMwebLandscapePrompt(
+        match({ angle, isLandscapeHLSStream, isLandscape, type })
+          .with({ isLandscapeHLSStream }, () => false)
+          .with({ angle: P.when(angle => angle && angle >= 90) }, ({ type }) => type.includes('landscape'))
+          .otherwise(() => isLandscape),
+      );
     };
     handleRotation();
     window.screen.orientation.addEventListener('change', handleRotation);
     return () => {
       window.screen.orientation.removeEventListener('change', handleRotation);
     };
-  }, [isLandscape]);
+  }, [isLandscape, isLandscapeHLSStream]);
 
+  if (isLandscapeHLSStream) {
+    return null;
+  }
   return (
     <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>
       <Dialog.Portal>

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

@@ -3,6 +3,7 @@ import {
   HMSNotificationTypes,
   HMSRoomState,
   selectHasPeerHandRaised,
+  selectPeerByID,
   selectRoomState,
   useHMSNotifications,
   useHMSStore,
@@ -28,12 +29,14 @@ export const HandRaisedNotifications = () => {
     }
 
     // Don't show toast message in case of local peer.
-    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp || !isSubscribing) {
+    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+    const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
     if (hasPeerHandRaised) {
-      ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
+      const showCTA = peer?.roleName && (on_stage_exp?.off_stage_roles || [])?.includes(peer.roleName);
+      ToastBatcher.showToast({ notification, type: showCTA ? 'RAISE_HAND_HLS' : 'RAISE_HAND' });
       console.debug('Metadata updated', notification.data);
     }
   }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);

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

@@ -49,7 +49,7 @@ export const PeerNotifications = () => {
     }
 
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, selectedPeer.id, setPeerSelector]);
 
   return null;
 };

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -1,5 +1,6 @@
 // @ts-check
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { match } from 'ts-pattern';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, Text } from '../../../../';
@@ -92,20 +93,30 @@ export const QuestionCard = ({
         <Text
           variant="caption"
           css={{
-            color:
-              respondedToQuiz && !isLive
-                ? isCorrectAnswer
-                  ? '$alert_success'
-                  : '$alert_error_default'
-                : '$on_surface_low',
+            color: match({ respondedToQuiz, isLive, isCorrectAnswer })
+              .when(
+                ({ respondedToQuiz, isLive }) => respondedToQuiz && !isLive,
+                ({ isCorrectAnswer }) => (isCorrectAnswer ? '$alert_success' : '$alert_error_default'),
+              )
+              .otherwise(() => '$on_surface_low'),
             fontWeight: '$semiBold',
             display: 'flex',
             alignItems: 'center',
             gap: '$4',
           }}
         >
-          {respondedToQuiz && isCorrectAnswer && pollEnded ? <CheckCircleIcon height={16} width={16} /> : null}
-          {respondedToQuiz && !isCorrectAnswer && pollEnded ? <CrossCircleIcon height={16} width={16} /> : null}
+          {match({ respondedToQuiz, pollEnded, isCorrectAnswer })
+            .when(
+              ({ respondedToQuiz, pollEnded }) => respondedToQuiz && pollEnded,
+              ({ isCorrectAnswer }) => {
+                return isCorrectAnswer ? (
+                  <CheckCircleIcon height={16} width={16} />
+                ) : (
+                  <CrossCircleIcon height={16} width={16} />
+                );
+              },
+            )
+            .otherwise(() => null)}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
       </Flex>