@100mslive/roomkit-react 0.1.8 → 0.1.9-alpha.0

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,5 +1,5 @@
-import React, { Fragment, useCallback, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import { useMeasure, useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
   selectHasPeerHandRaised,
@@ -22,12 +22,10 @@ import { config as cssConfig } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
-import { PrebuiltAttributeBox, PrebuiltAudioIndicator } from './PrebuiltTileElements';
 import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
+import { calculateAvatarAndAttribBoxSize } from '../common/utils';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
-const iconDims = { height: '1rem', width: '1rem' };
-
 const Tile = ({
   peerId,
   trackId,
@@ -74,11 +72,14 @@ const Tile = ({
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
 
-  const ref = useRef(null);
-  const calculatedHeight = ref.current?.clientHeight || '';
-  const calculatedWidth = ref.current?.clientWidth || '';
+  const [ref, { width: calculatedWidth, height: calculatedHeight }] = useMeasure();
+
   const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
-  const avatarSize = 'medium';
+
+  const [avatarSize, attribBoxSize] = useMemo(
+    () => calculateAvatarAndAttribBoxSize(calculatedWidth, calculatedHeight),
+    [calculatedWidth, calculatedHeight],
+  );
 
   return (
     <StyledVideoTile.Root
@@ -118,23 +119,27 @@ const Tile = ({
               bg: 'transparent',
             }}
           />
+          {calculatedWidth > 0 && calculatedHeight > 0 ? (
+            <>
+              {isVideoMuted || (!isLocal && isAudioOnly) ? (
+                <StyledVideoTile.AvatarContainer>
+                  <Avatar name={peerName || ''} data-testid="participant_avatar_icon" size={avatarSize} />
+                </StyledVideoTile.AvatarContainer>
+              ) : null}
 
-          {isVideoMuted || (!isLocal && isAudioOnly) ? (
-            <StyledVideoTile.AvatarContainer>
-              <Avatar name={peerName || ''} data-testid="participant_avatar_icon" size={avatarSize} />
-            </StyledVideoTile.AvatarContainer>
-          ) : null}
-
-          {!hideAudioMuteOnTile ? (
-            isAudioMuted ? (
-              <PrebuiltAudioIndicator data-testid="participant_audio_mute_icon">
-                <MicOffIcon style={iconDims} />
-              </PrebuiltAudioIndicator>
-            ) : (
-              <PrebuiltAudioIndicator>
-                <AudioLevel trackId={audioTrack?.id} />
-              </PrebuiltAudioIndicator>
-            )
+              {!hideAudioMuteOnTile ? (
+                isAudioMuted ? (
+                  <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
+                    <MicOffIcon />
+                  </StyledVideoTile.AudioIndicator>
+                ) : (
+                  <StyledVideoTile.AudioIndicator size={attribBoxSize}>
+                    <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
+                  </StyledVideoTile.AudioIndicator>
+                )
+              ) : null}
+              {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
+            </>
           ) : null}
           {isMouseHovered || (isDragabble && isMobile) ? (
             <TileMenu
@@ -145,7 +150,6 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
@@ -162,7 +166,7 @@ const Tile = ({
   );
 };
 
-const PeerMetadata = ({ peerId }) => {
+const PeerMetadata = ({ peerId, size }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isBRB = metaData?.isBRBOn || false;
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -170,14 +174,14 @@ const PeerMetadata = ({ peerId }) => {
   return (
     <Fragment>
       {isHandRaised ? (
-        <PrebuiltAttributeBox data-testid="raiseHand_icon_onTile">
-          <HandIcon style={iconDims} />
-        </PrebuiltAttributeBox>
+        <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
+          <HandIcon width={24} height={24} />
+        </StyledVideoTile.AttributeBox>
       ) : null}
       {isBRB ? (
-        <PrebuiltAttributeBox data-testid="brb_icon_onTile">
-          <BrbTileIcon style={iconDims} />
-        </PrebuiltAttributeBox>
+        <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
+          <BrbTileIcon width={22} height={22} />
+        </StyledVideoTile.AttributeBox>
       ) : null}
     </Fragment>
   );

package/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx

@@ -20,12 +20,12 @@ export const useAutoStartStreaming = () => {
   const showStreamingUI = useShowStreamingUI();
   const hmsActions = useHMSActions();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { isHLSRunning } = useRecordingStreaming();
+  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
   const streamStartedRef = useRef(false);
 
   const startHLS = useCallback(async () => {
     try {
-      if (isHLSStarted || !showStreamingUI || isHLSRunning) {
+      if (isHLSStarted || !showStreamingUI || isHLSRunning || isRTMPRunning) {
         return;
       }
       setHLSStarted(true);
@@ -38,7 +38,7 @@ export const useAutoStartStreaming = () => {
       streamStartedRef.current = false;
       setHLSStarted(false);
     }
-  }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
+  }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI, isRTMPRunning]);
 
   useEffect(() => {
     if (!isHLSStarted && !isHLSRunning) {

package/src/Prebuilt/components/hooks/useRedirectToLeave.tsx

@@ -1,33 +1,25 @@
 import { useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useHMSPrebuiltContext } from '../../AppContext';
 // @ts-ignore: No implicit Any
 import { PictureInPicture } from '../PIP/PIPManager';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
-import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 
 export const useRedirectToLeave = () => {
-  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   const { onLeave } = useHMSPrebuiltContext();
-  const params = useParams();
-  const navigate = useNavigate();
 
   const redirect = useCallback(
     (timeout = 0) => {
-      setTimeout(() => {
-        const prefix = isLeaveScreenEnabled ? '/leave/' : '/';
-        if (params.role) {
-          navigate(prefix + params.roomId + '/' + params.role);
-        } else {
-          navigate(prefix + params.roomId);
-        }
-        PictureInPicture.stop().catch(() => console.error('stopping pip'));
-        ToastManager.clearAllToast();
-        onLeave?.();
-      }, timeout);
+      return new Promise<void>(resolve => {
+        setTimeout(() => {
+          PictureInPicture.stop().catch(() => console.error('stopping pip'));
+          ToastManager.clearAllToast();
+          onLeave?.();
+          resolve();
+        }, timeout);
+      });
     },
-    [isLeaveScreenEnabled, navigate, onLeave, params.role, params.roomId],
+    [onLeave],
   );
 
   return { redirectToLeave: redirect };

package/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Dialog, Flex } from '../../../';
 import { DialogInputFile } from '../../primitives/DialogContent';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { PDFHeader } from './pdfHeader';
 import { SubmitPDF } from './submitPdf';
 import { UploadedFile } from './uploadedFile';
@@ -11,7 +10,7 @@ export function PDFFileOptions({ onOpenChange }) {
 
   return !pdfFile ? (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -35,7 +34,7 @@ export function PDFFileOptions({ onOpenChange }) {
             <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   ) : (
     <UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />

package/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx

@@ -31,7 +31,7 @@ export const SubmitPDF = ({ pdfFile, onOpenChange }) => {
         type="submit"
         onClick={() => {
           if (pdfFile) {
-            setPDFConfig({ state: true, file: pdfFile });
+            setPDFConfig(pdfFile);
             onOpenChange(false);
           }
         }}

package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { TrashIcon } from '@100mslive/react-icons';
 import { Dialog, Flex, Text } from '../../../';
 import { DialogRow } from '../../primitives/DialogContent';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { PDFHeader } from './pdfHeader';
 import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
@@ -11,7 +10,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
   const [fileName, ext] = pdfFile.name.split('.');
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -66,7 +65,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
             <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/layouts/EmbedView.jsx

@@ -1,26 +1,21 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  selectPeers,
-  selectPeerScreenSharing,
-  throwErrorHandler,
-  useHMSStore,
-  useScreenShare,
-} from '@100mslive/react-sdk';
+import React, { useEffect, useMemo } from 'react';
+import { selectAppData, selectPeers, selectPeerScreenSharing, useEmbedShare, useHMSStore } from '@100mslive/react-sdk';
 import { SecondaryTiles } from '../components/SecondaryTiles';
+import { ToastManager } from '../components/Toast/ToastManager';
 import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
 import { Box } from '../../Layout';
-import { useSetAppDataByKey } from '../components/AppData/useUISettings';
+import { useResetEmbedConfig, useSetAppDataByKey } from '../components/AppData/useUISettings';
 import { APP_DATA } from '../common/constants';
 
 export const EmbedView = () => {
   return (
-    <EmbebScreenShareView>
+    <EmbedScreenShareView>
       <EmbedComponent />
-    </EmbebScreenShareView>
+    </EmbedScreenShareView>
   );
 };
 
-export const EmbebScreenShareView = ({ children }) => {
+export const EmbedScreenShareView = ({ children }) => {
   const peers = useHMSStore(selectPeers);
 
   const peerPresenting = useHMSStore(selectPeerScreenSharing);
@@ -44,62 +39,54 @@ export const EmbebScreenShareView = ({ children }) => {
     </ProminenceLayout.Root>
   );
 };
-
+/**
+ * EmbedView is responsible for rendering the iframe and managing the screen sharing functionality.
+ */
 const EmbedComponent = () => {
-  const { amIScreenSharing, toggleScreenShare } = useScreenShare(throwErrorHandler);
-  const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [wasScreenShared, setWasScreenShared] = useState(false);
-  // to handle - https://github.com/facebook/react/issues/24502
-  const screenShareAttemptInProgress = useRef(false);
-  const src = embedConfig.url;
-  const iframeRef = useRef();
-
-  const resetEmbedConfig = useCallback(() => {
-    if (src) {
-      setEmbedConfig({ url: '' });
-    }
-  }, [src, setEmbedConfig]);
+  const embedConfig = useHMSStore(selectAppData(APP_DATA.embedConfig));
+  const resetConfig = useResetEmbedConfig();
 
-  useEffect(() => {
-    if (embedConfig.shareScreen && !amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
-      screenShareAttemptInProgress.current = true;
-      // start screenshare on load for others in the room to see
-      toggleScreenShare({
-        forceCurrentTab: true,
-        cropElement: iframeRef.current,
-      })
-        .then(() => {
-          setWasScreenShared(true);
-        })
-        .catch(resetEmbedConfig)
-        .finally(() => {
-          screenShareAttemptInProgress.current = false;
-        });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // need to send resetConfig to clear configuration, if stop screenshare occurs.
+  const { iframeRef, startEmbedShare, isEmbedShareInProgress } = useEmbedShare(resetConfig);
 
   useEffect(() => {
-    // reset embed when screenshare is closed from anywhere
-    if (wasScreenShared && !amIScreenSharing) {
-      resetEmbedConfig();
-    }
-    return () => {
-      // close screenshare when this component is being unmounted
-      if (wasScreenShared && amIScreenSharing) {
-        resetEmbedConfig();
-        toggleScreenShare(); // stop
+    (async () => {
+      if (embedConfig && !isEmbedShareInProgress) {
+        try {
+          await startEmbedShare(embedConfig);
+        } catch (err) {
+          resetConfig();
+          ToastManager.addToast({
+            title: `Error while sharing embed url ${err.message || ''}`,
+            variant: 'error',
+          });
+        }
       }
-    };
-  }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
+    })();
+  }, [isEmbedShareInProgress, embedConfig, startEmbedShare, resetConfig]);
 
   return (
-    <Box ref={iframeRef} css={{ size: '100%' }}>
+    <Box
+      css={{
+        mx: '$8',
+        flex: '3 1 0',
+        '@lg': {
+          flex: '2 1 0',
+          display: 'flex',
+          alignItems: 'center',
+        },
+      }}
+    >
       <iframe
-        src={src}
-        title={src}
-        style={{ width: '100%', height: '100%', border: 0 }}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture fullscreen"
+        title="Embed View"
+        ref={iframeRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 0,
+          borderRadius: '0.75rem',
+        }}
+        allow="autoplay; clipboard-write;"
         referrerPolicy="no-referrer"
       />
     </Box>

package/src/Prebuilt/layouts/PDFView.jsx

@@ -1,111 +1,61 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { throwErrorHandler, useScreenShare } from '@100mslive/react-sdk';
+import React, { useEffect } from 'react';
+import { usePDFShare } from '@100mslive/react-sdk';
+import { ToastManager } from '../components/Toast/ToastManager';
 import { Box } from '../../Layout';
-import { ThemeTypes, useTheme } from '../../Theme';
-import { EmbebScreenShareView } from './EmbedView';
-import { useSetAppDataByKey } from '../components/AppData/useUISettings';
-import { APP_DATA, isChrome } from '../common/constants';
+import { EmbedScreenShareView } from './EmbedView';
+import { usePDFConfig, useResetPDFConfig } from '../components/AppData/useUISettings';
 
+/**
+ * PDFView is responsible for rendering the PDF iframe and managing the screen sharing functionality.
+ */
 export const PDFView = () => {
-  return (
-    <EmbebScreenShareView>
-      <PDFEmbedComponent />
-    </EmbebScreenShareView>
-  );
-};
+  const pdfConfig = usePDFConfig();
+  const resetConfig = useResetPDFConfig();
 
-export const PDFEmbedComponent = () => {
-  const ref = useRef();
-  const themeType = useTheme().themeType;
-  const [isPDFLoaded, setIsPDFLoaded] = useState(false);
-  let pdfJSURL = process.env.REACT_APP_PDFJS_IFRAME_URL;
-  const { amIScreenSharing, toggleScreenShare } = useScreenShare(throwErrorHandler);
-  const [pdfConfig, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-  if (pdfConfig.url && !pdfConfig.file) {
-    pdfJSURL = pdfJSURL + '?file=' + encodeURIComponent(pdfConfig.url);
-  }
-  const [wasScreenShared, setWasScreenShared] = useState(false);
-  // to handle - https://github.com/facebook/react/issues/24502
-  const screenShareAttemptInProgress = useRef(false);
-  const iframeRef = useRef();
+  // need to send resetConfig to clear configuration, if stop screenshare occurs.
+  const { iframeRef, startPDFShare, isPDFShareInProgress } = usePDFShare(resetConfig);
 
-  const resetEmbedConfig = useCallback(() => {
-    setPDFConfig({ state: false });
-  }, [setPDFConfig]);
-  useEffect(() => {
-    if (isPDFLoaded && ref.current) {
-      ref.current.contentWindow.postMessage(
-        {
-          theme: themeType === ThemeTypes.dark ? 2 : 1,
-        },
-        '*',
-      );
-    }
-  }, [isPDFLoaded, themeType]);
   useEffect(() => {
-    if (!amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
-      screenShareAttemptInProgress.current = true;
-      // start screenshare on load for others in the room to see
-      toggleScreenShare({
-        forceCurrentTab: isChrome,
-        cropElement: iframeRef.current,
-        preferCurrentTab: isChrome,
-      })
-        .then(() => {
-          setWasScreenShared(true);
-        })
-        .catch(resetEmbedConfig)
-        .finally(() => {
-          screenShareAttemptInProgress.current = false;
+    (async () => {
+      try {
+        if (!isPDFShareInProgress && pdfConfig) {
+          await startPDFShare(pdfConfig);
+        }
+      } catch (err) {
+        resetConfig();
+        ToastManager.addToast({
+          title: `Error while sharing annotator ${err.message || ''}`,
+          variant: 'error',
         });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    // reset embed when screenshare is closed from anywhere
-    if (wasScreenShared && !amIScreenSharing) {
-      resetEmbedConfig();
-    }
-    return () => {
-      // close screenshare when this component is being unmounted
-      if (wasScreenShared && amIScreenSharing) {
-        resetEmbedConfig();
-        toggleScreenShare(); // stop
       }
-    };
-  }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-
+    })();
+  }, [isPDFShareInProgress, pdfConfig, resetConfig, startPDFShare]);
   return (
-    <Box ref={iframeRef} css={{ size: '100%' }}>
-      <iframe
-        src={pdfJSURL}
-        title="PDF Annotator"
-        ref={ref}
-        style={{
-          width: '100%',
-          height: '100%',
-          border: 0,
-          borderRadius: '0.75rem',
-        }}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture fullscreen"
-        referrerPolicy="no-referrer"
-        onLoad={() => {
-          if (ref.current && pdfConfig.file) {
-            // setting theme dark -> 2 and light -> 1
-            requestAnimationFrame(() => {
-              ref.current.contentWindow.postMessage(
-                {
-                  file: pdfConfig.file,
-                  theme: themeType === ThemeTypes.dark ? 2 : 1,
-                },
-                '*',
-              );
-              setIsPDFLoaded(true);
-            }, 1000);
-          }
+    <EmbedScreenShareView>
+      <Box
+        css={{
+          mx: '$8',
+          flex: '3 1 0',
+          '@lg': {
+            flex: '2 1 0',
+            display: 'flex',
+            alignItems: 'center',
+          },
         }}
-      />
-    </Box>
+      >
+        <iframe
+          title="Embed View"
+          ref={iframeRef}
+          style={{
+            width: '100%',
+            height: '100%',
+            border: 0,
+            borderRadius: '0.75rem',
+          }}
+          allow="autoplay; clipboard-write;"
+          referrerPolicy="no-referrer"
+        />
+      </Box>
+    </EmbedScreenShareView>
   );
 };

package/src/Prebuilt/layouts/SidePane.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
+import { Polls } from '../components/Polls/Polls';
 import { SidePaneTabs } from '../components/SidePaneTabs';
-// @ts-ignore: No implicit Any
-import { StreamingLanding } from '../components/Streaming/StreamingLanding';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
 // @ts-ignore: No implicit Any
 import VideoTile from '../components/VideoTile';
 import { Box, Flex } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { translateAcross } from '../../utils';
 // @ts-ignore: No implicit Any
 import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
 
@@ -29,10 +29,11 @@ const SidePane = ({
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
   let ViewComponent;
+  if (sidepane === SIDE_PANE_OPTIONS.POLLS) {
+    ViewComponent = <Polls />;
+  }
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
     ViewComponent = <SidePaneTabs screenType={screenType} hideControls={hideControls} active={sidepane} />;
-  } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = <StreamingLanding />;
   }
   if (!ViewComponent && !trackId) {
     return null;
@@ -97,6 +98,9 @@ const SidePane = ({
             '@md': {
               p: '$6 $8',
               pb: mwebStreamingChat ? '$20' : '$12',
+              borderTopLeftRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',
+              borderTopRightRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',
+              animation: `${translateAcross({ yFrom: '100%' })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
             },
           }}
         >

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -18,7 +18,7 @@ import SidePane from './SidePane';
 import { WaitingView } from './WaitingView';
 // import { useWhiteboardMetadata } from '../plugins/whiteboard';
 import {
-  usePDFAnnotator,
+  usePDFConfig,
   useUrlToEmbed,
   useWaitingViewerRole,
   // @ts-ignore: No implicit Any
@@ -45,7 +45,7 @@ export const VideoStreamingSection = ({
   const hmsActions = useHMSActions();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
-  const pdfAnnotatorActive = usePDFAnnotator();
+  const pdfAnnotatorActive = usePDFConfig();
 
   useEffect(() => {
     if (!isConnected) {

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
 import { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';
-import { PrebuiltDialogPortal } from '../components/PrebuiltDialogPortal';
 import { Button } from '../../Button';
 import { Checkbox } from '../../Checkbox';
 import { HorizontalDivider } from '../../Divider';
@@ -15,7 +14,7 @@ import { Text } from '../../Text';
 
 export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
   return (
-    <PrebuiltDialogPortal>
+    <Dialog.Portal>
       <Dialog.Overlay />
       <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>
         <Dialog.Title>
@@ -36,7 +35,7 @@ export const DialogContent = ({ Icon, title, closeable = true, children, css, ic
         <HorizontalDivider css={{ mt: '0.8rem' }} />
         <Box>{children}</Box>
       </Dialog.Content>
-    </PrebuiltDialogPortal>
+    </Dialog.Portal>
   );
 };
 
@@ -61,7 +60,7 @@ export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...pro
 
 export const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
   <Dialog.Root open={open} onOpenChange={onOpenChange}>
-    <PrebuiltDialogPortal>
+    <Dialog.Portal>
       <Dialog.Overlay />
       <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
         <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>
@@ -98,7 +97,7 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
           </Box>
         </Flex>
       </Dialog.Content>
-    </PrebuiltDialogPortal>
+    </Dialog.Portal>
   </Dialog.Root>
 );