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

package/src/Prebuilt/components/Streaming/Common.jsx

@@ -37,36 +37,46 @@ export const StreamCard = ({ title, subtitle, Icon, imgSrc = '', css = {}, onCli
   );
 };
 
-export const ContentHeader = ({ onBack, title, content }) => {
+export const ContentHeader = ({ onBack, onClose, title = '', content }) => {
   return (
-    <Flex css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer' }}>
-      <Text
-        css={{ p: '$2', bg: '$surface_bright', r: '$round', alignSelf: 'center' }}
-        onClick={onBack}
-        data-testid="go_back"
-      >
-        <ChevronLeftIcon width={16} height={16} />
-      </Text>
-      <Box css={{ flex: '1 1 0', mx: '$8' }}>
+    <Flex
+      css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer', borderBottom: '1px solid $border_bright', mb: '$8' }}
+    >
+      {onBack ? (
         <Text
-          variant="tiny"
           css={{
-            textTransform: 'uppercase',
-            fontWeight: '$semiBold',
-            color: '$on_surface_medium',
+            alignSelf: 'center',
+            mr: '$8',
           }}
+          onClick={onBack}
+          data-testid="go_back"
         >
-          {title}
+          <ChevronLeftIcon />
         </Text>
+      ) : null}
+      <Box css={{ flex: '1 1 0' }}>
+        {title ? (
+          <Text
+            variant="tiny"
+            css={{
+              textTransform: 'uppercase',
+              fontWeight: '$semiBold',
+              color: '$on_surface_medium',
+            }}
+          >
+            {title}
+          </Text>
+        ) : null}
         <Text variant="h6">{content}</Text>
       </Box>
-      <IconButton onClick={onBack} css={{ alignSelf: 'flex-start' }} data-testid="close_stream_section">
-        <CrossIcon width={16} height={16} />
-      </IconButton>
+      {onClose ? (
+        <IconButton onClick={onClose} css={{ alignSelf: 'flex-start' }} data-testid="close_stream_section">
+          <CrossIcon />
+        </IconButton>
+      ) : null}
     </Flex>
   );
 };
-
 export const Container = ({ children, rounded = false }) => {
   return (
     <Box
@@ -76,7 +86,7 @@ export const Container = ({ children, rounded = false }) => {
         position: 'absolute',
         top: 0,
         left: 0,
-        bg: '$surface_default',
+        bg: '$surface_dim',
         transform: 'translateX(10%)',
         animation: `${slideLeftAndFade('10%')} 100ms ease-out forwards`,
         display: 'flex',
@@ -125,7 +135,7 @@ export const ErrorText = ({ error }) => {
     return null;
   }
   return (
-    <Text variant="sm" css={{ mb: '$8', color: '$alert_error_default' }}>
+    <Text variant="sm" css={{ my: '$4', color: '$alert_error_default' }}>
       {error}
     </Text>
   );

package/src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx

@@ -19,15 +19,14 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
   const [page, setPage] = useState(0);
   const activeSharePeer = peersSharing[page];
   const isMobile = useMedia(cssConfig.media.md);
-  const secondaryPeers = useMemo(
-    () =>
-      isMobile
-        ? activeSharePeer
-          ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)]
-          : peers //keep active sharing peer as first tile
-        : peers.filter(p => p.id !== activeSharePeer?.id),
-    [activeSharePeer, peers, isMobile],
-  );
+  const secondaryPeers = useMemo(() => {
+    if (isMobile) {
+      return activeSharePeer
+        ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)] //keep active sharing peer as first tile
+        : peers;
+    }
+    return peers.filter(p => p.id !== activeSharePeer?.id);
+  }, [activeSharePeer, peers, isMobile]);
   useEffect(() => {
     setActiveScreenSharePeer(isMobile ? '' : activeSharePeer?.id);
     return () => {

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,5 +1,5 @@
-import React, { Fragment, useCallback, useMemo, 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,
@@ -23,6 +23,7 @@ import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
 import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
+import { calculateAvatarAndAttribBoxSize } from '../common/utils';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
 const Tile = ({
@@ -71,29 +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, attribBoxSize] = useMemo(() => {
-    if (!calculatedWidth || !calculatedHeight) {
-      return [undefined, undefined];
-    }
-    let avatarSize = 'large';
-    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
-      avatarSize = 'small';
-    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
-      avatarSize = 'medium';
-    }
-    let attribBoxSize = 'medium';
-    if (calculatedWidth <= 180 || calculatedHeight <= 180) {
-      attribBoxSize = 'small';
-    }
-
-    return [avatarSize, attribBoxSize];
-  }, [calculatedWidth, calculatedHeight]);
+  const [avatarSize, attribBoxSize] = useMemo(
+    () => calculateAvatarAndAttribBoxSize(calculatedWidth, calculatedHeight),
+    [calculatedWidth, calculatedHeight],
+  );
 
   return (
     <StyledVideoTile.Root
@@ -133,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 ? (
-              <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>
-            )
+              {!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
@@ -160,7 +150,6 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}

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/useDropdownSelection.jsx

@@ -1,3 +1,3 @@
 export const useDropdownSelection = () => {
-  return '$primary_dim';
+  return '$surface_bright';
 };

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>
   );
 };