From 81ea1a097d6388d55ac75338cc86297543ea0fda Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Tue, 26 Sep 2023 15:02:54 +0200
Subject: [PATCH] Move audio elements to component wrapper

---
 .../CallLayout/PaginatedGridLayout.tsx        | 60 +++++++++----------
 1 file changed, 28 insertions(+), 32 deletions(-)

diff --git a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
index 1beef54d9f..2f244039f1 100644
--- a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
+++ b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
@@ -109,41 +109,37 @@ export const PaginatedGridLayout = ({
   if (!call) return null;
 
   return (
-    <>
+    <div className="str-video__paginated-grid-layout__wrapper">
       {remoteParticipants.map((participant) => (
         <Audio key={participant.sessionId} participant={participant} />
       ))}
-      <div className="str-video__paginated-grid-layout__wrapper">
-        <div className="str-video__paginated-grid-layout">
-          {pageArrowsVisible && pageCount > 1 && (
-            <IconButton
-              icon="caret-left"
-              disabled={page === 0}
-              onClick={() =>
-                setPage((currentPage) => Math.max(0, currentPage - 1))
-              }
-            />
-          )}
-          {selectedGroup && (
-            <PaginatedGridLayoutGroup
-              group={participantGroups[page]}
-              VideoPlaceholder={VideoPlaceholder}
-              ParticipantViewUI={ParticipantViewUI}
-            />
-          )}
-          {pageArrowsVisible && pageCount > 1 && (
-            <IconButton
-              disabled={page === pageCount - 1}
-              icon="caret-right"
-              onClick={() =>
-                setPage((currentPage) =>
-                  Math.min(pageCount - 1, currentPage + 1),
-                )
-              }
-            />
-          )}
-        </div>
+      <div className="str-video__paginated-grid-layout">
+        {pageArrowsVisible && pageCount > 1 && (
+          <IconButton
+            icon="caret-left"
+            disabled={page === 0}
+            onClick={() =>
+              setPage((currentPage) => Math.max(0, currentPage - 1))
+            }
+          />
+        )}
+        {selectedGroup && (
+          <PaginatedGridLayoutGroup
+            group={participantGroups[page]}
+            VideoPlaceholder={VideoPlaceholder}
+            ParticipantViewUI={ParticipantViewUI}
+          />
+        )}
+        {pageArrowsVisible && pageCount > 1 && (
+          <IconButton
+            disabled={page === pageCount - 1}
+            icon="caret-right"
+            onClick={() =>
+              setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))
+            }
+          />
+        )}
       </div>
-    </>
+    </div>
   );
 };