From fc08bbd8d7f0b280a5371126cc48edc145edfec9 Mon Sep 17 00:00:00 2001
From: Kaustubh Kumar <kaustubhkumar05@gmail.com>
Date: Tue, 19 Sep 2023 16:28:54 +0530
Subject: [PATCH] fix: convert tile dimensions to numeric

---
 .../src/Prebuilt/components/VideoTile.jsx     | 21 ++++++++++++-------
 .../src/Prebuilt/layouts/SidePane.tsx         |  1 -
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
index 482c8ce407..ca2f65a7be 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
@@ -73,21 +73,28 @@ const Tile = ({
   const onHoverHandler = useCallback(event => {
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
-  const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
+
+  const ref = useRef(null);
+  const calculatedHeight = ref.current?.clientHeight || '';
+  const calculatedWidth = ref.current?.clientWidth || '';
+
+  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
+
   const avatarSize = useMemo(() => {
-    if (!width || !height) {
+    if (!calculatedWidth || !calculatedHeight) {
       return undefined;
     }
-    if (width <= 150 || height <= 150) {
+    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
       return 'small';
-    } else if (width <= 300 || height <= 300) {
+    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
       return 'medium';
     }
     return 'large';
-  }, [width, height]);
+  }, [calculatedWidth, calculatedHeight]);
 
   return (
     <StyledVideoTile.Root
+      ref={ref}
       css={{
         width,
         height,
@@ -134,7 +141,7 @@ const Tile = ({
             isAudioMuted ? (
               <StyledVideoTile.AudioIndicator
                 data-testid="participant_audio_mute_icon"
-                size={getAttributeBoxSize(width, height)}
+                size={getAttributeBoxSize(calculatedWidth, calculatedHeight)}
               >
                 <MicOffIcon />
               </StyledVideoTile.AudioIndicator>
@@ -151,7 +158,7 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={height} width={width} />}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={calculatedHeight} width={calculatedWidth} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
index ebeee18e7c..0a65072fcb 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
@@ -64,7 +64,6 @@ const SidePane = ({
         <VideoTile
           peerId={activeScreensharePeerId}
           trackId={trackId}
-          width="100%"
           height={225}
           rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
           {...tileLayout}