From 3e7bf2c0bf317e3615b52ed6f7c1bde736c1ad62 Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Sat, 29 Nov 2025 20:56:03 +0100
Subject: [PATCH] fix: handle video feed rising

---
 src/components/room/grid/my-tile.tsx   | 65 +++++++++++-------------
 src/components/room/grid/peer-tile.tsx | 69 ++++++++++++--------------
 2 files changed, 60 insertions(+), 74 deletions(-)

diff --git a/src/components/room/grid/my-tile.tsx b/src/components/room/grid/my-tile.tsx
index f9837d1..91eb803 100644
--- a/src/components/room/grid/my-tile.tsx
+++ b/src/components/room/grid/my-tile.tsx
@@ -11,7 +11,6 @@ import {
   usePeerMe,
 } from '@/store/conf/hooks';
 import { useMedia } from '@/hooks/use-media';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 
 interface PeerTileProps {
   layout: Layout;
@@ -38,48 +37,42 @@ const MyTile: React.FC<PeerTileProps> = ({ layout }) => {
   return (
     <div
       className={cn(
-        `bg-linear-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl 
-        rounded-lg overflow-hidden flex flex-col relative transition-all duration-300 ease-in-out`,
+        ` bg-linear-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl 
+        rounded-lg overflow-hidden relative flex items-center transition-all duration-300 ease-in-out`,
         peerMeCondition?.isSpeaking && ' border-blue-500'
       )}
       style={{ width: `${layout.width}px`, height: `${layout.height}px` }}
     >
       {/* Video/Avatar Area */}
-      <div className="flex-1 relative  flex items-center justify-center">
-        {cameraOn ? (
-          <video
-            ref={videoRef}
-            className={cn(
-              isAMobileDevice ? 'object-contain' : ' h-full w-full object-cover'
-            )}
-            autoPlay
-            muted
-            playsInline
-            webkit-playsinline="true"
-          />
+      {cameraOn ? (
+        <video
+          ref={videoRef}
+          className={cn('h-full w-full', !isAMobileDevice && ' object-cover')}
+          autoPlay
+          muted
+          playsInline
+          webkit-playsinline="true"
+        />
+      ) : (
+        <div className="w-24 h-24 bg-linear-to-br from-white/15 to-white/1 rounded-full flex items-center justify-center shadow-lg mx-auto">
+          {getInitials(peerMe.name)}
+        </div>
+      )}
+
+      {/* Mic Status */}
+      <div
+        className={cn(
+          'absolute top-2 right-2 z-10 p-1.5 rounded-full ',
+          micOn
+            ? 'bg-green-500/20 backdrop-blur-sm'
+            : 'bg-red-500/20 backdrop-blur-sm'
+        )}
+      >
+        {micOn ? (
+          <Mic className="w-4 h-4 text-green-400" />
         ) : (
-          <Avatar className=" w-24 h-24">
-            <AvatarFallback className="text-white text-xl bg-linear-to-bl from-white/15 to-white/1  backdrop-blur-x">
-              {getInitials(peerMe.name)}
-            </AvatarFallback>
-          </Avatar>
+          <MicOff className="w-4 h-4 text-red-400" />
         )}
-
-        {/* Mic Status */}
-        <div
-          className={cn(
-            'absolute top-2 right-2 z-10 p-1.5 rounded-full ',
-            micOn
-              ? 'bg-green-500/20 backdrop-blur-sm'
-              : 'bg-red-500/20 backdrop-blur-sm'
-          )}
-        >
-          {micOn ? (
-            <Mic className="w-4 h-4 text-green-400" />
-          ) : (
-            <MicOff className="w-4 h-4 text-red-400" />
-          )}
-        </div>
       </div>
 
       {/* Name Bar */}
diff --git a/src/components/room/grid/peer-tile.tsx b/src/components/room/grid/peer-tile.tsx
index 2ce901a..ad642d0 100644
--- a/src/components/room/grid/peer-tile.tsx
+++ b/src/components/room/grid/peer-tile.tsx
@@ -8,7 +8,6 @@ import {
   usePeerOthersById,
 } from '@/store/conf/hooks';
 import { useMedia } from '@/hooks/use-media';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 
 interface PeerTileProps {
   peerId: string;
@@ -42,54 +41,48 @@ export const PeerTile: React.FC<PeerTileProps> = ({ peerId, layout }) => {
     <div
       className={cn(
         `bg-linear-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl 
-        rounded-lg overflow-hidden flex flex-col relative transition-all duration-300 ease-in-out`,
+        rounded-lg overflow-hidden flex items-center relative transition-all duration-300 ease-in-out`,
         peerCondition?.isSpeaking && ' border-blue-500'
       )}
       style={{ width: `${layout.width}px`, height: `${layout.height}px` }}
     >
       {/* Video/Avatar Area */}
-      <div className="flex-1 relative flex items-center justify-center">
-        {media?.camera ? (
-          <video
-            ref={videoRef}
-            className={cn(
-              peerData?.isMobileDevice
-                ? 'object-contain'
-                : ' h-full w-full object-cover'
-            )}
-            autoPlay
-            muted
-            playsInline
-            webkit-playsinline="true"
-          />
-        ) : (
-          <Avatar className=" w-24 h-24 ">
-            {/* <AvatarImage src="https://github.com/shadcn.png" /> */}
-            <AvatarFallback className="text-white text-xl bg-linear-to-bl from-white/15 to-white/1  backdrop-blur-x ">
-              {getInitials(peerData.name)}
-            </AvatarFallback>
-          </Avatar>
-        )}
-
-        {/* Mic Status */}
-        <div
+      {media?.camera ? (
+        <video
+          ref={videoRef}
           className={cn(
-            'absolute top-2 right-2 z-10 p-1.5 rounded-full ',
-            media?.mic
-              ? 'bg-green-500/20 backdrop-blur-sm'
-              : 'bg-red-500/20 backdrop-blur-sm'
-          )}
-        >
-          {media?.mic ? (
-            <Mic className="w-4 h-4 text-green-400" />
-          ) : (
-            <MicOff className="w-4 h-4 text-red-400" />
+            'h-full w-full',
+            !peerData?.isMobileDevice && ' object-cover'
           )}
+          autoPlay
+          muted
+          playsInline
+          webkit-playsinline="true"
+        />
+      ) : (
+        <div className="w-24 h-24 bg-linear-to-br from-white/15 to-white/1 rounded-full flex items-center justify-center shadow-lg mx-auto">
+          {getInitials(peerData.name)}
         </div>
+      )}
+
+      {/* Mic Status */}
+      <div
+        className={cn(
+          'absolute top-2 right-2 z-10 p-1.5 rounded-full ',
+          media?.mic
+            ? 'bg-green-500/20 backdrop-blur-sm'
+            : 'bg-red-500/20 backdrop-blur-sm'
+        )}
+      >
+        {media?.mic ? (
+          <Mic className="w-4 h-4 text-green-400" />
+        ) : (
+          <MicOff className="w-4 h-4 text-red-400" />
+        )}
       </div>
 
       {/* Name Bar */}
-      <div className="absolute  flex gap-x-2 items-center bottom-0 z-10 px-3 py-2 text-white text-sm font-medium ">
+      <div className="absolute flex gap-x-2 items-center bottom-0 z-10 px-3 py-2 text-white text-sm font-medium ">
         {peerCondition.hand?.raised && <Hand size={18} />}
         <span className="truncate"> {peerData.name}</span>
       </div>