feat: Pinned 및 UnPinned 컴포넌트에 useNetworkMonitor 추가

boostcampwm-2024 · Dec 4, 2024 · 53d4a76 · 53d4a76
1 parent bf7bdf4
commit 53d4a76
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/apps/web/src/components/live/StreamView/List/Pinned.tsx b/apps/web/src/components/live/StreamView/List/Pinned.tsx
@@ -3,6 +3,7 @@ import { client } from '@repo/mediasoup';
 import PaginationControls from '@/components/live/StreamView/List/PaginationControls';
 import SubVideoGrid from '@/components/live/StreamView/List/SubVideoGrid';
 import VideoPlayer from '@/components/live/StreamView/List/VideoPlayer';
+import useNetworkMonitor from '@/hooks/mediasoup/useNetworkMonitor';
 import usePagination from '@/hooks/usePagination';
 
 const ITEMS_PER_SUB_GRID = 4;
@@ -21,11 +22,13 @@ function PinnedGrid({
   addPinnedVideo,
   getAudioMutedState,
 }: PinnedListProps) {
-  const { paginatedItems: subPaginatedStreams, ...subPaginationControlsProps } = usePagination({
+  const { paginatedItems, ...paginationControlsProps } = usePagination({
     itemsPerPage: ITEMS_PER_SUB_GRID,
     pinnedStream: pinnedVideoStreamData,
   });
 
+  useNetworkMonitor({ streams: [...paginatedItems, pinnedVideoStreamData] });
+
   return (
     <div className="relative flex h-full w-full flex-col gap-5">
       <div className="flex h-3/4 w-full justify-center self-center px-8">
@@ -43,10 +46,10 @@ function PinnedGrid({
         </div>
       </div>
       <div className="relative flex h-1/4 items-center justify-between">
-        <PaginationControls {...subPaginationControlsProps}>
+        <PaginationControls {...paginationControlsProps}>
           <SubVideoGrid
             pinnedVideoStreamData={pinnedVideoStreamData}
-            videoStreamData={subPaginatedStreams}
+            videoStreamData={paginatedItems}
             onVideoClick={addPinnedVideo}
             getAudioMutedState={getAudioMutedState}
           />

diff --git a/apps/web/src/components/live/StreamView/List/UnPinned.tsx b/apps/web/src/components/live/StreamView/List/UnPinned.tsx
@@ -2,6 +2,7 @@ import { client } from '@repo/mediasoup';
 
 import PaginationControls from '@/components/live/StreamView/List/PaginationControls';
 import VideoGrid from '@/components/live/StreamView/List/VideoGrid';
+import useNetworkMonitor from '@/hooks/mediasoup/useNetworkMonitor';
 import usePagination from '@/hooks/usePagination';
 
 const ITEMS_PER_GRID = 9;
@@ -16,6 +17,8 @@ function UnPinnedGrid({ addPinnedVideo, getAudioMutedState }: UnPinnedListProps)
     itemsPerPage: ITEMS_PER_GRID,
   });
 
+  useNetworkMonitor({ streams: paginatedStreams });
+
   return (
     <PaginationControls {...paginationControlsProps}>
       <VideoGrid